<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>优涩控 &#187; ui</title>
	<atom:link href="http://www.userkon.com/tag/ui/feed" rel="self" type="application/rss+xml" />
	<link>http://www.userkon.com</link>
	<description>一群对用户脑残的家伙</description>
	<lastBuildDate>Tue, 07 Sep 2010 15:20:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>榨干Chrome UI</title>
		<link>http://www.userkon.com/tolyer/analizing_chrome_ui.html</link>
		<comments>http://www.userkon.com/tolyer/analizing_chrome_ui.html#comments</comments>
		<pubDate>Sun, 07 Feb 2010 14:40:57 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[交互体验]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://www.userkon.com/?p=301</guid>
		<description><![CDATA[目前的我，已经成为Chrome的严重依赖用户，甚至U盘内也随身装着Chrome便携版。对我而言，它有着其他浏览器无法代替的杀手级优势：快速，稳定，完美支持Google所有在线服务；简洁到一塌糊涂的界面。 而其他浏览器，他们只在一些特殊需求中才会使用，如Firefox的AutoProxy翻墙，IE插件下的网银支付，Opera的turbo加速等。 用过Chrome的的人都有个习惯：就是都不好意思说Chrome不好用。当然这是玩笑话，Chrome 3.0版本之前功能也一直较为简单，但并不妨碍它的用户对其赞不绝口。究其根本，还是出在其独具一格的UI体验上。 只用一句话来评价：Chrome 才是浏览器，其他的只是软件。 戈达尔曾经为证明斯皮尔伯格是一个平庸的导演而愤怒地说过：“如果你真想知道他为什么（平庸），我会在放映室里一个镜头一个镜头地讲给你听！” 现在我要做一件类似的事情，不过目的是为了证明Chrome是一款多么优秀的浏览器。 目标导向设计 Chrome刚推出的时候，所有人都大吃一惊：界面简单得以至于菜单栏都砍掉了。这么多的菜单栏命令去哪里了呢？被重新组合了。 示例问题：猜猜，“清除历史浏览记录”的功能分别在哪个菜单项里面？ 当你还在思考此命令在Firefox中的“History”还是“Tools”时；我想你应该早已确定这个功能位于chrome的“控制谷歌浏览器”的菜单内。 看，这是多大的差别！什么叫做符合用户第一直觉，这就是。 作为一个M粉，我个人的臆想是，Chrome是向Ribbon的致敬与学习： 1.基于用户的目标，对浏览器的命令进行再分类。 这使得Chrome只有两个菜单项：控制当前页，控制谷歌浏览器。这有效的降低用户对命令的记忆要求。（可用性原则之一：依赖识别而不是记忆。） M粉牢骚：这与Ribbon的的分类有异曲同工之妙。 2.先将命令砍掉一半，剩下的再砍掉一半。 Chrome对于命令的精简可谓大刀阔斧，把一些用户目标之外的功能都通通剔除，避免陷入了功能主义，打造一个纯粹的、100%的浏览器。（当然，这其中也有Google的产品战略原因） 看上图你就能看到Chrome是如何砍命令项的，命令虽然精简了，但实际使用上，Chrome的右键菜单并不会让我有功能缺失感。Chrome并不是为了精简而精简，他们的精简是有理有据的，由用户的目标而来。 而对比菜单项命令，以及对话框的命令。Chrome将“历史记录”“下载记录”“扩展记录”这些功能都采用独立标签页呈现。一些常用对话框呈现的命令修改为浮层呈现。如“设为默认浏览器”，“保存密码”，”添加至收藏夹“。 这些做法的好处就是：让Chrome的命令项始终保持在“浅并且窄”的结构内（可参阅《设计心理学》），遵循用户从外到内的认知规则，确保用户有较好的控制感（Sense of Control）： 大部分右键菜单项在10个以内。 没有三层或更深的菜单项或者窗口叠加。 少用模态的控件打断用户焦点，让其保持在标签页内。 M粉的我再次牢骚：Ribbon的设计的目的之一就是提高用户的控制感。BTW，如果数一下每个浏览器的工具栏命令数，Chrome再次证明它是最“纯”的。 最佳响应性与操控感 相对于其他浏览器，Chrome做了以下的变化： 砍掉了菜单栏以及窗口标题栏。 将地址栏与搜索栏整合。 动态的状态栏。 界面简单了，命令也少了。给Chrome的带来的第一优势就是：同等屏幕尺寸下，Chrome拥有最佳的最大的的显示区域。但在响应性上，Chrome却反而领先其他浏览器。Chrome的优秀反馈，让用户只需较少的注意力就能了解系统的状态，从而专注于自己的本身的任务与信息。 让我们从标签栏说起。这是Chrome最具魅力的地方。 1.向左转，向右转 注意到加载网页时，标签栏左侧的进度图标反馈吗？ Chrome精细的用三种相对的信息（方向，颜色，速度）来向用户传达浏览器的状态：正在连接服务器；已连接服务器，正在加载网站。 大部分情况他们只是一闪而过，但出现问题时，他有助与你了解情况：假如您访问一个不存在的网站，如twitter.com，那么你就只能看到逆时针的进度图标了。 2.向左走，向右走 &#8230; <a href="http://www.userkon.com/tolyer/analizing_chrome_ui.html">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>目前的我，已经成为Chrome的严重依赖用户，甚至U盘内也随身装着Chrome便携版。对我而言，它有着其他浏览器无法代替的杀手级优势：快速，稳定，完美支持Google所有在线服务；简洁到一塌糊涂的界面。</p>
<p>而其他浏览器，他们只在一些特殊需求中才会使用，如Firefox的AutoProxy翻墙，IE插件下的网银支付，Opera的turbo加速等。</p>
<p>用过Chrome的的人都有个习惯：就是都不好意思说Chrome不好用。当然这是玩笑话，Chrome 3.0版本之前功能也一直较为简单，但并不妨碍它的用户对其赞不绝口。究其根本，还是出在其独具一格的UI体验上。</p>
<p>只用一句话来评价：<strong>Chrome 才是浏览器，其他的只是软件。</strong></p>
<p>戈达尔曾经为证明斯皮尔伯格是一个平庸的导演而愤怒地说过：“如果你真想知道他为什么（平庸），我会在放映室里一个镜头一个镜头地讲给你听！”</p>
<p>现在我要做一件类似的事情，不过目的是为了证明Chrome是一款多么优秀的浏览器。</p>
<p><span id="more-301"></span></p>
<h3>目标导向设计</h3>
<p>Chrome刚推出的时候，所有人都大吃一惊：<strong>界面简单得以至于菜单栏都砍掉了</strong>。这么多的菜单栏命令去哪里了呢？<strong>被重新组合了</strong>。</p>
<p><strong>示例问题：猜猜，“清除历史浏览记录”的功能分别在哪个菜单项里面？</strong></p>
<p><a title="menu_bar by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4317971055/"><span style="color: #0044aa; background-color: #ffffff;"> </span><img title="firefox与Chrome菜单项对比" src="http://farm5.static.flickr.com/4060/4317971055_11a8dbb844.jpg" alt="firefox与Chrome菜单项对比" width="500" height="191" /></a></p>
<p>当你还在思考此命令在Firefox中的“History”还是“Tools”时；我想你应该早已确定这个功能位于chrome的“控制谷歌浏览器”的菜单内。</p>
<p>看，这是多大的差别！什么叫做符合用户第一直觉，这就是。</p>
<p>作为一个M粉，我个人的臆想是，Chrome是向Ribbon的致敬与学习：</p>
<p><strong>1.基于用户的目标，对浏览器的命令进行再分类。</strong></p>
<p>这使得Chrome只有两个菜单项：<strong>控制当前页</strong>，<strong>控制谷歌浏览器</strong>。这有效的降低用户对命令的记忆要求。（可用性原则之一：依赖识别而不是记忆。）</p>
<p>M粉牢骚：这与Ribbon的的分类有异曲同工之妙。</p>
<p><a title="Tab in 2007 and Menu in 2003 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4280737271/"><img title="Ribbon UI中的命令精简与分类对比" src="http://farm5.static.flickr.com/4028/4280737271_51dcfa3008_o.jpg" alt="Ribbon UI中的命令精简与分类对比" width="543" height="85" /></a></p>
<p><strong>2.先将命令砍掉一半，剩下的再砍掉一半。</strong></p>
<p>Chrome对于命令的精简可谓大刀阔斧，把一些用户目标之外的功能都通通剔除，避免陷入了功能主义，打造一个纯粹的、100%的浏览器。（当然，这其中也有Google的产品战略原因）</p>
<p><a title="right_menu by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4318059199/"><img title="很明显吧，左边三个家伙都没Chrome纯" src="http://farm5.static.flickr.com/4052/4318059199_cbc80b122c.jpg" alt="很明显吧，左边三个家伙都没Chrome纯" width="500" height="282" /></a></p>
<p>看上图你就能看到Chrome是如何砍命令项的，命令虽然精简了，但实际使用上，Chrome的右键菜单并不会让我有功能缺失感。Chrome并不是为了精简而精简，他们的精简是有理有据的，由用户的目标而来。</p>
<p>而对比菜单项命令，以及对话框的命令。Chrome将“历史记录”“下载记录”“扩展记录”这些功能都采用独立标签页呈现。一些常用对话框呈现的命令修改为浮层呈现。如“设为默认浏览器”，“保存密码”，”添加至收藏夹“。</p>
<p>这些做法的好处就是：让Chrome的命令项始终保持在“<strong>浅并且窄</strong>”的结构内（可参阅《<a title="去豆瓣看看这本书吧!" href="http://www.douban.com/subject/1288844/">设计心理学</a>》），遵循用户<a title="作为交互的8项基本原则，在GUI设计禁忌2.0中有明确提到。用户对于产品的理解是从外到内的，而设计师的顺序则是从内至外，认知顺序的冲突，是设计师需要慎重考虑的。" href="http://www.douban.com/subject/3263946/">从外到内</a>的认知规则，确保用户有较好的控制感（<strong>Sense of Control</strong>）：</p>
<ul>
<li>大部分右键菜单项在10个以内。</li>
<li>没有三层或更深的菜单项或者窗口叠加。</li>
<li>少用模态的控件打断用户焦点，让其保持在标签页内。</li>
</ul>
<p>M粉的我再次牢骚：Ribbon的设计的目的之一就是提高用户的控制感。BTW，如果数一下每个浏览器的工具栏命令数，Chrome再次证明它是最“<strong>纯</strong>”的。</p>
<h3>最佳响应性与操控感</h3>
<p>相对于其他浏览器，Chrome做了以下的变化：</p>
<ul>
<li>砍掉了菜单栏以及窗口标题栏。</li>
<li>将地址栏与搜索栏整合。</li>
<li>动态的状态栏。</li>
</ul>
<p>界面简单了，命令也少了。给Chrome的带来的第一优势就是：同等屏幕尺寸下，Chrome拥有最佳的最大的的显示区域。但在响应性上，Chrome却反而领先其他浏览器。Chrome的优秀反馈，让用户只需较少的注意力就能了解系统的状态，从而专注于自己的本身的任务与信息。</p>
<p>让我们从标签栏说起。这是Chrome最具魅力的地方。</p>
<h4>1.向左转，向右转</h4>
<p><a title="tab-bar-at-Chrome by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4334722206/"><span style="color: #ffffff; background-color: #303536;"> </span><img src="http://farm5.static.flickr.com/4028/4334722206_8126026dc8_o.png" alt="tab-bar-at-Chrome" width="500" height="97" /></a></p>
<p>注意到加载网页时，标签栏左侧的进度图标反馈吗？</p>
<p>Chrome精细的用三种相对的信息（方向，颜色，速度）来向用户传达浏览器的状态：正在连接服务器；已连接服务器，正在加载网站。</p>
<p>大部分情况他们只是一闪而过，但出现问题时，他有助与你了解情况：假如您访问一个不存在的网站，如twitter.com，那么你就只能看到逆时针的进度图标了。</p>
<h4>2.向左走，向右走</h4>
<p>Chrome的标签栏操作上始终保持着缓冲式的过渡动画，对于反馈而言，他提供了<strong>隐喻</strong>，符合用户的操作期望。</p>
<p>于是乎，当一个新标签打开时，看起来就像一个新的标签从左侧向右滑出（这里顺带说一下，Mac下是从下自上滑出，有点意思吧。）。当关闭一个标签时，看起来就像标签向左边缩进去一样。Chrome始终用一种与现实生活相符合的预期动画，去呈现用户的操作，而这种动画，是最高效最生动而又最小化的反馈。</p>
<h4>3.最小的操作需求</h4>
<p>无论什么样的用户，大都想不劳而获，都不喜欢软件向他索取过多的东西。用户不仅仅是讨厌输入，讨厌按键盘，用户甚至讨厌去过多的移动他的鼠标。尤其是面对多次的重复操作时，想想当你需求遍历多页网页时，网页那糟糕的，到处跳动的翻页导航是多么的让你愤怒，你就大概能了解为什么了。</p>
<p>Chrome的最小操作需求，是关闭标签栏，当你存在多个标签时，你可以不移动鼠标就能关闭多个，这种设计操控感非常的强烈。谷奥上已经有<a title="从关闭标签页的动作细节看 Chrome 和 Safari" href="http://www.google.org.cn/posts/closing-tab-in-chrome-and-safari.html" target="_blank">详细的分析</a>了。在此就不多说。</p>
<h4>4.一个顶俩</h4>
<p><a title="One box by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4318073655/"><img src="http://farm5.static.flickr.com/4021/4318073655_bbe0234416.jpg" alt="One box" width="500" height="279" /></a></p>
<p>我说的一个顶俩指的是Chrome的地址栏。网上有云：真正好的用户界面都只有一个按钮，比如iPhone，比如抽水马桶。说起来还真有那么一点道理。</p>
<p>地址栏的作用就是带我们去到想去的地方。这么说，一定需要把地址栏与搜索栏区分吗？</p>
<p>难道的士司机会和你说：hey，你说的这个地方我无法识别，你问问我旁边的这个家伙，他能搜索？</p>
<p>Chrome的一条地址栏减少了用户的思考。但地址栏的自动完成反馈反而让用户更直白了解浏览器接下来将带领去去到何处。可以看到，Chrome在这里进行了有效分类，不至于让用户迷失和困惑。</p>
<p><a title="onebox by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4336401603/"><img src="http://farm5.static.flickr.com/4045/4336401603_ed80a0a35e.jpg" alt="onebox" width="500" height="152" /></a></p>
<p>另外其的可学性也不差，你无需帮助即可了解Ctrl+Enter的快捷操作。<a title="onebox2 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4337146480/"><img src="http://farm5.static.flickr.com/4026/4337146480_fc76c04c5a_o.png" alt="onebox2" width="498" height="228" /></a></p>
<p>Chrome的地址栏设计方法，我个人的看法而言，有点像我之前所讨论过的<a title="高度认知与低度认知" href="http://www.userkon.com/highly_cognitive_and_minuent_cognitive.html" target="_blank">低度认知</a>设计：将任务的开始点压迫得极度精简（只保留一条地址栏），提高任务的深度（输入后的可选路径浮层），反而能帮助用户做更多的工作。渐进式的操作结构，在满足低级用户的默认需求时，能够给高级用户带来更高的满意度。</p>
<p>但是，一条地址栏的缺陷在于：如果用户的第一目的是搜索，怎么解决？</p>
<p>在Windows的体验规范中，就有这么一条：在任何界面内ctrl+E，将使焦点定位在搜索框内。看看Chrome是怎么解决的？你可自行尝试。尝试之后记得说“Chrome牛X”。</p>
<p>这里还有一个<a title="Browser Speed Test 2 4 searches in 15 seconds" href="http://v.youku.com/v_show/id_XMTQxODM2MjIw.html" target="_blank">视频</a>，15秒Chrome能完成四次搜索。这才叫一个顶俩。</p>
<h4>4.最“有用”</h4>
<p>Windows用户体验规范中谈及状态栏时是这么说的：</p>
<blockquote><p>状态栏通常使用文本和图标来描述状态，但它也可以包含进度指示器，以及包含与状态相关的命令菜单与选项。确保状态栏中的信息对用户来说<strong>有用且有实际意义</strong>，但也<strong>并非至关重要</strong>。——<a title="Windows 用户体验交互设计规范——状态栏" href="http://www.uxguide.net/wiki/windows:Controls/status-bars" target="_blank">来源</a></p></blockquote>
<p><a title="statusbar by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4336459563/"><img src="http://farm3.static.flickr.com/2749/4336459563_a3b32b7dbc_o.png" alt="statusbar" width="500" height="115" /></a></p>
<p>那我们来仔细对比一下，状态栏中的进度条到底对用户有用吗？没用，因为大部分网站在完全载入之前都无法正常使用。而且一个网页的载入如果还需要进度条来反馈，那么这个网页本来就存在问题。用户也不会对载入超过10秒并且还需浏览器来提供进度反馈的网站有任何的耐心。</p>
<p>OK，进度条是没用的，应该去掉，那么类似IE右侧的状态信息有用吗？对于一个没有过多附属功能的Chrome来说，他确实没用。（但我个人认为，Chrome扩展开放之后，应该在此开拓扩展栏，与状态栏整合。）</p>
<p>什么是有用的且有实际意义的信息？看图:</p>
<p><a title="upload-status by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4337246446/"><img src="http://farm3.static.flickr.com/2681/4337246446_9160de9831_o.png" alt="upload-status" width="499" height="346" /></a></p>
<p>在一个较为古老的上传交互模型上，系统本身没有提供任何有效的反馈，Chrome通过状态栏秒杀了其他一切浏览器：他提供了进度的反馈。同时，他的标签栏采用逆时针方向，表示正在和服务器进行数据交换。</p>
<p>让我们回到标题的最开始，叫做最佳响应性：Chrome不是功能最多的浏览器，但响应性是最佳的。这也就不难理解同样功能简单，而且还是MAC系统默认浏览器的safari，占有率<a title="Google Chrome成為全球第三大瀏覽器" href="http://www.techbang.com.tw/?p=30716" target="_blank">转眼就被超越</a>。</p>
<p>响应性给用户带来何种好处：无语伦比的操控感；那种感觉，就像在极品飞车内遇到一款傻瓜式的操控豪华跑车一样，爽。</p>
<h3>暗藏的OS野心</h3>
<p>最后说一点题外话，对于Chrome OS，我们在Chrome内多少能看到其一点雏形，如Chrome的菜单内已经没有打开本地文件的命令，但其最重要的创意在于“创建应用程序快捷方式&#8230;”</p>
<p><a title="chrome mail163 by 优涩控, on Flickr" href="http://www.flickr.com/photos/userkon/4337648424/"><img src="http://farm3.static.flickr.com/2679/4337648424_66e5832874.jpg" alt="chrome mail163" width="500" height="312" /></a></p>
<p>在上图中，这个界面已经具有很强的软件外观了，并且其在于本地的东西，只是一个只有1K大小的快捷方式。</p>
<p>因此看来，我们还需要安装一大堆的东西在本地的硬盘，然后去启动吗？不用，一切可变得简单，也许有天你点击桌面的某个快捷方式，你就可以直接使用使用Photoshop，真正的免安装，且不限平台。</p>
<p>当然，目前而言，Chrome OS还有一大推的问题需要解决，比如如何定义模态对话框与非模态对话框的实现，网络应用如何避免过渡的单页呈现。但从长远来看，这种趋势是不可逆转的。</p>
<p>其实一开始听到Chrome OS我是拒绝的，因为你不能说这是OS，我就认为这是OS，第一我要试一下，因为我不愿意试了之后用一些蛊惑人心的话去赞美它，很好很强大很快。这样其他M粉一定会鄙视我，根本没有这么方便的OS，就证明上面那个是假的。后来我也证实Chrome 确实有OS雏形，我使用了它“创建应用程序&#8230;”大概一个月左右,感觉就像使用本地软件一样，后来我介绍给同事的时候，也没有吹牛，因为我让他们知道，我是这么使用的，很爽，你们用得时候很会这么爽。</p>
<h3>最后的话</h3>
<p>Chrome是我最爱的一个浏览器，同时它也是优秀的。Chrome的优秀在于它树立了浏览器新的未来方向，浏览器的任务不仅仅是网页的呈现，浏览器也不应该是传统意义上的软件，它应该是一个彻底脱离用户本地电脑的东西，它应该被赋予更多的用户目标与期望，利用云端的海量信息和即时技术让用户的目标更快更容易实现。</p>
<p>本文标题虽为榨干Chrome UI，其实只是力求榨干。我相信，每多使用一次Chrome，你就会多一次惊喜，多一份满意。最后附送几段关于Chrome的视频:</p>
<ul>
<li><a href="http://www.google.org.cn/posts/chrome-video-by-google-uk.html">非常有创意的 Chrome 新广告</a></li>
<li><a href="http://briian.com/?p=6282">19個有趣的Google Chrome廣告影片</a>(需翻墙)</li>
<li><a href="http://www.google.org.cn/posts/what-chrome-can-do-in-15-seconds.html">15秒种时间，Chrome 可以完成什么工作？</a></li>
</ul>
<p>最后，假设您能坚持看到这个，提前祝您虎年快乐，哥让我和你说：“爱老虎邮。”</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/analizing_chrome_ui.html/feed</wfw:commentRss>
		<slash:comments>34</slash:comments>
		</item>
		<item>
		<title>如何突破Good enough?</title>
		<link>http://www.userkon.com/tolyer/beyond_good_enough.html</link>
		<comments>http://www.userkon.com/tolyer/beyond_good_enough.html#comments</comments>
		<pubDate>Sun, 17 Jan 2010 11:29:40 +0000</pubDate>
		<dc:creator>大脸</dc:creator>
				<category><![CDATA[读书笔记]]></category>
		<category><![CDATA[office 2007]]></category>
		<category><![CDATA[ribbon]]></category>
		<category><![CDATA[ui]]></category>
		<category><![CDATA[wimp]]></category>
		<category><![CDATA[结果导向设计]]></category>

		<guid isPermaLink="false">http://www.userkon.com/tolyer/beyond_good_enough.html</guid>
		<description><![CDATA[优涩控是一个很有意思的团体，每个成员都有很独立的喜好的IT公司，如00后就是100%的果粉，极爷是标准的G粉；但我却是一个不折不扣的微软粉丝。原因来自The Story of the Ribbon，设计一个伟大的产品很难，但把一个不伟大的产品修改得伟大则是难上青天。 A ribbon is a command bar that organizes a program&#8217;s features into a series of tabs at the top of a window. Using a ribbon increases discoverability of features and functions, enables quicker learning of &#8230; <a href="http://www.userkon.com/tolyer/beyond_good_enough.html">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>优涩控是一个很有意思的团体，每个成员都有很独立的喜好的IT公司，如00后就是100%的果粉，极爷是标准的G粉；但我却是一个不折不扣的微软粉丝。原因来自<a href="http://videos.visitmix.com/MIX08/UX09" target="_blank">The Story of the Ribbon</a>，设计一个伟大的产品很难，但把一个不伟大的产品修改得伟大则是难上青天。<a title="Flickr 上 优涩控 的 Cc872782.Ribbon01(en-us,MSDN.10)" href="http://www.flickr.com/photos/userkon/4280379445/"><img src="http://farm3.static.flickr.com/2642/4280379445_04abfe1961.jpg" alt="Cc872782.Ribbon01(en-us,MSDN.10)" width="500" height="205" /></a></p>
<blockquote><p>A ribbon is a command bar that organizes a program&#8217;s features into a series of tabs at the top of a window. Using a ribbon increases discoverability of features and functions, enables quicker learning of the program as a whole, and makes users feel more in control of their experience with the program. A ribbon can replace both the traditional menu bar and toolbars.</p>
<p>“功能区（Ribbon）”是一个命令栏，将程序功能组织到窗口顶部的一系列选项卡中。使用功能区能够使程序的功能特性更易于发现，使用户能够快速整体地了解程序，并使用户在该程序中体验到更强的控制感。功能区能够同时取代传统菜单栏与工具栏。</p></blockquote>
<p>第一次使用word 2007的用户会明显的感觉到，相比Office 2003 经典的<a href="http://zh.wikipedia.org/wiki/WIMP" target="_blank">WIMP UI</a>，Office 2007的Ribbon UI是对用户体验的一个完整的再设计；但稍微体验一下，你就不得不惊叹，他是那么的容易实现你的目标。</p>
<p><span id="more-270"></span></p>
<p>如今，Ribbon UI已经在微软的<a href="http://livesino.net/archives/2383.live" target="_blank">大部分产品中得以应用</a>，微软凭借Ribbon UI的良好设计正在走向统一体验的道路。而今天所分享的就是我个人的一点关于设计流程的心得，而不是来自<a href="http://msdn.microsoft.com/en-us/library/cc872782.aspx" target="_blank">Ribbon UI 的细致分析</a>。</p>
<h3>挖掘问题的根本原因</h3>
<p>当推出Office 2003之后，微软就着眼与下个版本的设计工作，调查得知对2003的传统观点：“Good enough，足够好了！”或者夸奖到：“任何我需要的功能Office都有了。”</p>
<p>当接触到真实的用户时，他们的说法则大相径庭：“office太强大了，如果我能更好的了解它，它能够对我的工作带来更好的帮助。”“我知道它有这个功能，但我就是找不到。”</p>
<p>于是设计团队回溯了word的所有历史版本，对每个版本增长的命令项，菜单，工具栏，任务面板进行分析对比发现导致用户无法找到命令的根本原因：<strong>传统的WIMP界面已经无法承载目前Office中大量的功能以及命令，相对于过去，用户要花费大量的时间去搜索一个普通的命令。</strong></p>
<p><a title="Flickr 上 优涩控 的 menu item" href="http://www.flickr.com/photos/userkon/4280741049/"><img src="http://farm5.static.flickr.com/4049/4280741049_908d9f5d31_o.png" alt="menu item" width="655" height="477" /></a></p>
<p><a title="Flickr 上 优涩控 的 taskbar" href="http://www.flickr.com/photos/userkon/4280741165/"><img src="http://farm5.static.flickr.com/4004/4280741165_c07ab8c12a_o.png" alt="taskbar" width="656" height="468" /></a></p>
<p>根据详细的访谈，以及历史版本的分析，设计团队才终究定下解决方案：<strong><a href="http://blogs.msdn.com/jensenh/archive/tags/Why+the+New+UI_3F00_/default.aspx" target="_blank">Office需要一个全新的UI，去唤起这个软件的灵魂。</a></strong></p>
<h3>简洁而又高效的设计流程</h3>
<p>Office 2007的设计流程简单且只包含四个步骤，研究-&gt;设计原则-&gt;原型-&gt;评估。</p>
<ol>
<li>研究：研究的作用用以发现问题。</li>
<li>设计原则：确定好的统一原则有利于设计师把握设计方向。</li>
<li>原型：原型用以快速展现设计师的基于设计原则的创意。</li>
<li>评估：对原型进行审核以及评估，决定是否采纳。</li>
</ol>
<p>在实际设计中，这样的流程易于迭代，且很高效。设计师在这样的流程中能<strong>多确切的做尝试且快速的改进（而不是仅仅的通过个人推理或者群体智慧去评估其他方案）</strong>，如00后在<a href="http://www.userkon.com/talk_about_product_design.html">漫话产品设计</a>中说的<strong>不断的犯错才是创新的源泉</strong>，如在考虑将Ribbon UI是放在软件顶部抑或是左右侧时，他们即刻设计了边栏的Ribbon UI，发现这是一个错误的方向，变取消了打算。还有对于Quick access Toolbar设计，最初的尝试也有多种方向，尝试多种方案后才对比确定。</p>
<p><a title="Flickr 上 优涩控 的 对于quick-access-Toolbar的设计稿" href="http://www.flickr.com/photos/userkon/4281300352/"><img src="http://farm3.static.flickr.com/2678/4281300352_c1891d8c17_o.jpg" alt="对于quick-access-Toolbar的设计稿" width="660" height="300" /></a></p>
<h3>至上而下的设计原则</h3>
<p>与我平常所见的设计流程不同，Office设计团队对设计原则较为强调，Office设计团队甚至这么说：“<strong>Design tenets have to be religion，（设计原则必须上升到宗教信仰的高度）。”</strong>容我猜测应是设计团队人员较多，设计原则利于设计师们往同一个地方“使劲”，更重要的一点是，这有利于整个团队的执行力，使原型的内部评估更加具有规则性以及说服力，最大可能的降低主管或者是老板对设计的干扰。保证设计团队中，每个人，每个环节都有着共同的目标。毕竟光说不练假把戏。</p>
<p>在设计方法上，设计团队特别强调了结果导向设计（Results-Oriented Design）区别命令导向设计（Command-Oriented Design），与<a href="http://zh.wikipedia.org/zh-cn/%E7%9B%AE%E6%A0%87%E5%AF%BC%E5%90%91%E8%AE%BE%E8%AE%A1" target="_blank">目标导向设计（Goal-Directed Design）</a>有异曲同工之妙。</p>
<p>这种方法我不细致说，简单而言，则是让用户的关注焦点定位于他要的结果（或者说是他的目标）能否实现，实现的效果又是怎样的；而不是让用户关注与他要使用哪个命令去达到目标，这个命令如何寻找，如何使用等。（这也是典型的WIMP UI的特性）</p>
<p>于是乎，以word为例，我们可以看到以下较为经典的改动：</p>
<ol>
<li>基于计算机逻辑分类命令菜单被取消，被修改成为基于用户目标分类的七个<a href="http://www.flickr.com/photos/userkon/4280737271/sizes/o/" target="_blank">核心选项卡</a>：开始，插入，页面布局，引用，邮件，审阅，视图。</li>
<li>当用户选中某元素时，自动在核心选项卡后激活与之对应的<a href="http://www.flickr.com/photos/userkon/4281495870/" target="_blank">上下文选项卡（contextual tab）</a>，或者是上下文选项卡组（contextual tab set），让针对此元素的编辑操作在此选项卡中呈现，用户则不必像以往那样去错综复杂的菜单项中寻找。</li>
<li>使用<a href="http://www.flickr.com/photos/userkon/4280741189/sizes/o/" target="_blank">库（Galleries）</a>与<a href="http://www.flickr.com/photos/userkon/4280745063/sizes/o/" target="_blank">实时预览（Live Preview）</a>等方法，图形化呈现一系列命令或者选项。让用户在作出决定之前就能清楚的看到结果是怎样。</li>
</ol>
<h3>锲而不舍的迭代</h3>
<p>很多人耻笑与微软是<a href="http://www.google.cn/search?hl=zh-CN&amp;client=aff-cs-worldbrowser&amp;hs=e38&amp;newwindow=1&amp;q=%E8%A1%A5%E4%B8%81+%E5%BE%AE%E8%BD%AF&amp;aq=f&amp;oq=&amp;tbo=1" target="_blank">最频繁打补丁的裁缝</a>，但实际确实是如此。在office 2007的开发中，他们就在团队中培养起“迭代的文化”，而这种文化几乎苛刻的折磨每一个人：<strong>迭代期被明显的写入到项目的开放进程中来</strong>；<strong>已经确定的事情，要重做3次让其做到最好。</strong>从2005年11月beta1发布，经历了超过5个月的部署；跟踪超过3百万个用户的操作记录以及习惯。</p>
<p><a title="Flickr 上 优涩控 的 office timeline" href="http://www.flickr.com/photos/userkon/4281508134/"><img src="http://farm5.static.flickr.com/4013/4281508134_4b334e16b9_o.png" alt="office timeline" width="645" height="471" /></a></p>
<p>长达一年的耐心，Office 2007最终达到了一个令人激动的高度。PC world与当年的CES都将其评为<strong>2007年最具创新产品。</strong></p>
<h3>个人快闪总结</h3>
<p>微软的耐心以及稳重扎实的创新精神值得所有人尊敬。</p>
<p>对问题的深度挖掘才能另设计人员看到本质，从根本解决问题。</p>
<p>自上而下的设计原则保证执行力。</p>
<p>长期迭代与敏捷性开发流程是创新的源泉。</p>
<h3>题外话</h3>
<p>Office 2007中的ribbon UI应用并不是完善，如<a href="http://www.flickr.com/photos/userkon/4281499308/" target="_blank">PowerPoint依然保留了菜单栏</a>。或许我们可以在<a href="http://blogs.technet.com/office2010/default.aspx" target="_blank">Office 2010</a>中看到他的强大魅力。</p>
<p>虽然目前有很多采用Ribbon UI的非微软的软件（如<a href="http://mindjet.com/products/mindmanager-8-win/overview" target="_blank">Mindmanager 8</a> ,<a href="http://www.my-debugbar.com/wiki/IETester/HomePage" target="_blank">IEtester</a>,<a href="http://www.smartdraw.com/videos/overview/How-to-Manage-a-Project-Part-1" target="_blank">SmartDraw 2009</a>），但目前还未有应用得好的。</p>
<p>如果你是一位想开发Ribbon UI 的程序员，请找一位有研究的设计师配合。Ribbon UI并不是简单的命令再组合。</p>
<p>个人认为<a href="http://www.adobe.com/products/" target="_blank">Adobe</a>系列软件应该用Ribbon UI了。</p>
<p>备注:本篇文章纯属个人口水堆积以及一个粉丝对偶像的涛涛敬仰之辞，如有不满，请即时拨打110求助。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.userkon.com/tolyer/beyond_good_enough.html/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>
