榨干Chrome UI

目前的我,已经成为Chrome的严重依赖用户,甚至U盘内也随身装着Chrome便携版。对我而言,它有着其他浏览器无法代替的杀手级优势:快速,稳定,完美支持Google所有在线服务;简洁到一塌糊涂的界面。

而其他浏览器,他们只在一些特殊需求中才会使用,如Firefox的AutoProxy翻墙,IE插件下的网银支付,Opera的turbo加速等。

用过Chrome的的人都有个习惯:就是都不好意思说Chrome不好用。当然这是玩笑话,Chrome 3.0版本之前功能也一直较为简单,但并不妨碍它的用户对其赞不绝口。究其根本,还是出在其独具一格的UI体验上。

只用一句话来评价:Chrome 才是浏览器,其他的只是软件。

戈达尔曾经为证明斯皮尔伯格是一个平庸的导演而愤怒地说过:“如果你真想知道他为什么(平庸),我会在放映室里一个镜头一个镜头地讲给你听!”

现在我要做一件类似的事情,不过目的是为了证明Chrome是一款多么优秀的浏览器。

目标导向设计

Chrome刚推出的时候,所有人都大吃一惊:界面简单得以至于菜单栏都砍掉了。这么多的菜单栏命令去哪里了呢?被重新组合了

示例问题:猜猜,“清除历史浏览记录”的功能分别在哪个菜单项里面?

firefox与Chrome菜单项对比

当你还在思考此命令在Firefox中的“History”还是“Tools”时;我想你应该早已确定这个功能位于chrome的“控制谷歌浏览器”的菜单内。

看,这是多大的差别!什么叫做符合用户第一直觉,这就是。

作为一个M粉,我个人的臆想是,Chrome是向Ribbon的致敬与学习:

1.基于用户的目标,对浏览器的命令进行再分类。

这使得Chrome只有两个菜单项:控制当前页控制谷歌浏览器。这有效的降低用户对命令的记忆要求。(可用性原则之一:依赖识别而不是记忆。)

M粉牢骚:这与Ribbon的的分类有异曲同工之妙。

Ribbon UI中的命令精简与分类对比

2.先将命令砍掉一半,剩下的再砍掉一半。

Chrome对于命令的精简可谓大刀阔斧,把一些用户目标之外的功能都通通剔除,避免陷入了功能主义,打造一个纯粹的、100%的浏览器。(当然,这其中也有Google的产品战略原因)

很明显吧,左边三个家伙都没Chrome纯

看上图你就能看到Chrome是如何砍命令项的,命令虽然精简了,但实际使用上,Chrome的右键菜单并不会让我有功能缺失感。Chrome并不是为了精简而精简,他们的精简是有理有据的,由用户的目标而来。

而对比菜单项命令,以及对话框的命令。Chrome将“历史记录”“下载记录”“扩展记录”这些功能都采用独立标签页呈现。一些常用对话框呈现的命令修改为浮层呈现。如“设为默认浏览器”,“保存密码”,”添加至收藏夹“。

这些做法的好处就是:让Chrome的命令项始终保持在“浅并且窄”的结构内(可参阅《设计心理学》),遵循用户从外到内的认知规则,确保用户有较好的控制感(Sense of Control):

  • 大部分右键菜单项在10个以内。
  • 没有三层或更深的菜单项或者窗口叠加。
  • 少用模态的控件打断用户焦点,让其保持在标签页内。

M粉的我再次牢骚:Ribbon的设计的目的之一就是提高用户的控制感。BTW,如果数一下每个浏览器的工具栏命令数,Chrome再次证明它是最“”的。

最佳响应性与操控感

相对于其他浏览器,Chrome做了以下的变化:

  • 砍掉了菜单栏以及窗口标题栏。
  • 将地址栏与搜索栏整合。
  • 动态的状态栏。

界面简单了,命令也少了。给Chrome的带来的第一优势就是:同等屏幕尺寸下,Chrome拥有最佳的最大的的显示区域。但在响应性上,Chrome却反而领先其他浏览器。Chrome的优秀反馈,让用户只需较少的注意力就能了解系统的状态,从而专注于自己的本身的任务与信息。

让我们从标签栏说起。这是Chrome最具魅力的地方。

1.向左转,向右转

tab-bar-at-Chrome

注意到加载网页时,标签栏左侧的进度图标反馈吗?

Chrome精细的用三种相对的信息(方向,颜色,速度)来向用户传达浏览器的状态:正在连接服务器;已连接服务器,正在加载网站。

大部分情况他们只是一闪而过,但出现问题时,他有助与你了解情况:假如您访问一个不存在的网站,如twitter.com,那么你就只能看到逆时针的进度图标了。

2.向左走,向右走

Chrome的标签栏操作上始终保持着缓冲式的过渡动画,对于反馈而言,他提供了隐喻,符合用户的操作期望。

于是乎,当一个新标签打开时,看起来就像一个新的标签从左侧向右滑出(这里顺带说一下,Mac下是从下自上滑出,有点意思吧。)。当关闭一个标签时,看起来就像标签向左边缩进去一样。Chrome始终用一种与现实生活相符合的预期动画,去呈现用户的操作,而这种动画,是最高效最生动而又最小化的反馈。

3.最小的操作需求

无论什么样的用户,大都想不劳而获,都不喜欢软件向他索取过多的东西。用户不仅仅是讨厌输入,讨厌按键盘,用户甚至讨厌去过多的移动他的鼠标。尤其是面对多次的重复操作时,想想当你需求遍历多页网页时,网页那糟糕的,到处跳动的翻页导航是多么的让你愤怒,你就大概能了解为什么了。

Chrome的最小操作需求,是关闭标签栏,当你存在多个标签时,你可以不移动鼠标就能关闭多个,这种设计操控感非常的强烈。谷奥上已经有详细的分析了。在此就不多说。

4.一个顶俩

One box

我说的一个顶俩指的是Chrome的地址栏。网上有云:真正好的用户界面都只有一个按钮,比如iPhone,比如抽水马桶。说起来还真有那么一点道理。

地址栏的作用就是带我们去到想去的地方。这么说,一定需要把地址栏与搜索栏区分吗?

难道的士司机会和你说:hey,你说的这个地方我无法识别,你问问我旁边的这个家伙,他能搜索?

Chrome的一条地址栏减少了用户的思考。但地址栏的自动完成反馈反而让用户更直白了解浏览器接下来将带领去去到何处。可以看到,Chrome在这里进行了有效分类,不至于让用户迷失和困惑。

onebox

另外其的可学性也不差,你无需帮助即可了解Ctrl+Enter的快捷操作。onebox2

Chrome的地址栏设计方法,我个人的看法而言,有点像我之前所讨论过的低度认知设计:将任务的开始点压迫得极度精简(只保留一条地址栏),提高任务的深度(输入后的可选路径浮层),反而能帮助用户做更多的工作。渐进式的操作结构,在满足低级用户的默认需求时,能够给高级用户带来更高的满意度。

但是,一条地址栏的缺陷在于:如果用户的第一目的是搜索,怎么解决?

在Windows的体验规范中,就有这么一条:在任何界面内ctrl+E,将使焦点定位在搜索框内。看看Chrome是怎么解决的?你可自行尝试。尝试之后记得说“Chrome牛X”。

这里还有一个视频,15秒Chrome能完成四次搜索。这才叫一个顶俩。

4.最“有用”

Windows用户体验规范中谈及状态栏时是这么说的:

状态栏通常使用文本和图标来描述状态,但它也可以包含进度指示器,以及包含与状态相关的命令菜单与选项。确保状态栏中的信息对用户来说有用且有实际意义,但也并非至关重要。——来源

statusbar

那我们来仔细对比一下,状态栏中的进度条到底对用户有用吗?没用,因为大部分网站在完全载入之前都无法正常使用。而且一个网页的载入如果还需要进度条来反馈,那么这个网页本来就存在问题。用户也不会对载入超过10秒并且还需浏览器来提供进度反馈的网站有任何的耐心。

OK,进度条是没用的,应该去掉,那么类似IE右侧的状态信息有用吗?对于一个没有过多附属功能的Chrome来说,他确实没用。(但我个人认为,Chrome扩展开放之后,应该在此开拓扩展栏,与状态栏整合。)

什么是有用的且有实际意义的信息?看图:

upload-status

在一个较为古老的上传交互模型上,系统本身没有提供任何有效的反馈,Chrome通过状态栏秒杀了其他一切浏览器:他提供了进度的反馈。同时,他的标签栏采用逆时针方向,表示正在和服务器进行数据交换。

让我们回到标题的最开始,叫做最佳响应性:Chrome不是功能最多的浏览器,但响应性是最佳的。这也就不难理解同样功能简单,而且还是MAC系统默认浏览器的safari,占有率转眼就被超越

响应性给用户带来何种好处:无语伦比的操控感;那种感觉,就像在极品飞车内遇到一款傻瓜式的操控豪华跑车一样,爽。

暗藏的OS野心

最后说一点题外话,对于Chrome OS,我们在Chrome内多少能看到其一点雏形,如Chrome的菜单内已经没有打开本地文件的命令,但其最重要的创意在于“创建应用程序快捷方式…”

chrome mail163

在上图中,这个界面已经具有很强的软件外观了,并且其在于本地的东西,只是一个只有1K大小的快捷方式。

因此看来,我们还需要安装一大堆的东西在本地的硬盘,然后去启动吗?不用,一切可变得简单,也许有天你点击桌面的某个快捷方式,你就可以直接使用使用Photoshop,真正的免安装,且不限平台。

当然,目前而言,Chrome OS还有一大推的问题需要解决,比如如何定义模态对话框与非模态对话框的实现,网络应用如何避免过渡的单页呈现。但从长远来看,这种趋势是不可逆转的。

其实一开始听到Chrome OS我是拒绝的,因为你不能说这是OS,我就认为这是OS,第一我要试一下,因为我不愿意试了之后用一些蛊惑人心的话去赞美它,很好很强大很快。这样其他M粉一定会鄙视我,根本没有这么方便的OS,就证明上面那个是假的。后来我也证实Chrome 确实有OS雏形,我使用了它“创建应用程序…”大概一个月左右,感觉就像使用本地软件一样,后来我介绍给同事的时候,也没有吹牛,因为我让他们知道,我是这么使用的,很爽,你们用得时候很会这么爽。

最后的话

Chrome是我最爱的一个浏览器,同时它也是优秀的。Chrome的优秀在于它树立了浏览器新的未来方向,浏览器的任务不仅仅是网页的呈现,浏览器也不应该是传统意义上的软件,它应该是一个彻底脱离用户本地电脑的东西,它应该被赋予更多的用户目标与期望,利用云端的海量信息和即时技术让用户的目标更快更容易实现。

本文标题虽为榨干Chrome UI,其实只是力求榨干。我相信,每多使用一次Chrome,你就会多一次惊喜,多一份满意。最后附送几段关于Chrome的视频:

最后,假设您能坚持看到这个,提前祝您虎年快乐,哥让我和你说:“爱老虎邮。”

关于 大脸

喜欢以逻辑推理的方式做设计, 设计师中的异类,其实我是个交互设计师。 而且还没合格。 稍带学点心理学,只是因为好奇。 电影,音乐,算是生命中可以坚持很久的爱好。 有个难以实现的梦想,去澳洲做个小农民。
此条目发表在 交互体验 分类目录,贴了 , , 标签。将固定链接加入收藏夹。

榨干Chrome UI》有 34 条评论

  1. 00 说:

    大脸童鞋真是用心~
    Chrome看似普通,但是它弱化了“界面”,归还了控制权,确实能够让我们能更专注于“浏览”,这才是浏览器的使命。当初弃ff而转投chrome,一个重要原因就是它的“可控感”更强。
    不过,多进程还是让我有点头疼 >,<

  2. Pingback 引用通告: 榨干Chrome UI | 优涩控 Google Chrome中文站

  3. 进驻 说:

    Opera 控飘过~~

    不过这不妨碍我喜欢 Chrome :)
    还有多进程和“比较大”的资源占用是个大问题~~
    在性能差的旧 PC 上有点杯具。。。

    • 大脸 说:

      我想Chrome是有尝试过在这方便取得平衡的,提高软件的响应性的代价就是较大的资源占有。但目前来说,Chrome虽然启动较慢,在我的老爷机上,使用的流畅感还是很足的。如果是一些纯Flash站点的话,Chrome的资源占用反而比其他浏览器要低,我想,这也是其本身的webkit核心的优势。

      BTW,我也是Opera控啊

  4. anyshpm 说:

    分析的很不错,不过希望更过的站在普通用户的角度来考虑,而不是IT从业人员,普通用户没有专业的眼光去想“控制当前页”和“自定义和控制谷歌浏览器”的区别

  5. huangjintiyan 说:

    用过一次,后来再不用了

  6. M.j 说:

    不要把一些东西讲得那么绝对好么? 你不代表所有人。尤其是你评价的那句话,你是说其它浏览器糟糕之极呢还是说浏览器比软件高一个等级?
    有些问题你能私下帮助我解决么?我将不胜感激。
    1,你能告诉我怎样提高chrome的下载速度么?chrome的安装包不是太大,如果我用迅雷或者其它下载工具大概一分钟就可下载完成,但是用它自己的安装方式我要等待好半天哟。
    甚至我还听说安装完成后会有“解压后的安装包”驻留在诸如“Local Settings\Application Data”这样的路径下,是不是真的?还有那个自定义安装路径是不是高级IT人员才会懂得拥有和使用?
    2,我是chrome小白,麻烦你告诉我“下载”路径我可选么?在哪里设置?同样万分感谢。
    3,我有随时清除浏览数据的习惯,你能告诉我怎样减少我的操作步骤提高我的效率么?现在我每次都是先点那个扳手一样的东西,再找到选项,然后再选择个人资料,再点击清除。
    4,我想在后台打开一些链接,你能告诉我除了先点击右键再选择“新标签页中打开”之外有更方便的操作么?我同时习惯了右键一按一划就可切换标签或者关闭标签,你能告诉我chrome 怎样方便实现么?— 我听说许多浏览器有鼠标动作可以实现,这也是真的么?
    5,嗯,或者插件可以实现诸如鼠标动作页面截图等等,但是你能告诉我在插件详细页,除了直接“安装”按钮,哪里有“下载”这一项么?—这对我很重要,这和下一问题很相关。
    6,我是最普通的用非正式的windows的用户,我也装了很多chrome插件,解决了上面的4和5的问题,虽然在寻找插件时因为网站没有分类,我花了不少时间。但能解决问题我还是很高兴。但是不幸的是有天我打了补丁重启电脑时竟然开不了机要重装系统,我恨死了win,同时我不幸的想到以前和现在我…我…我都不知道如何备份chrome的插件及设置,于是我痛哭一场哀悼我逝去的所有chrome的插件。相比之下重装下载安装设置chrome所花的时间之少已经是不值一提了。
    7,其实我不是G粉 但也很欣赏它不作恶及处处为用户着想及上次退出事件可能是因为涉及用户隐私所坚持的底线,无需证明它即是最伟大的公司之一,但是产品,还有太多改善的余地,尤其是针对特定地域特定人群习惯所做的改进,这不是被同化或者被伦落这是高高之上之人应有的态度。
    8,哦哦,1问题中的安装文件驻留不止chrome有,卡巴等等也有。。。没有最优秀的产品,只有更进步的产品才是最好的产品

    • 钢盅郭子 说:

      你自己也说了更进步的产品才是最好的产品,Chrome的进步难道不是最多的么?

    • joyousun 说:

      鼠标手势插件应该有了,另外ctrl+单击应该可以在后台新标签页打开。

  7. ps 说:

    楼上的,不要激动呀,其实每个人都有自己的偏好和喜欢的产品,说真的,我就一直用傲游,虽然也用ff,chrome我用起来还真体验不好,我习惯了傲游双击标签自动关闭,双击banner空白打开新标签,还有许多的细节,这让我用其他的浏览器感觉很不爽,但是傲游本身体验上的问题也可能一大堆,博主赞扬chrome,跟Apple的拥护者一样,萝卜青菜,各有所爱,取精华,去糟粕就ok了,太主观部分可以直接无视掉就好了,呵呵

    • M.j 说:

      说真的,一两年来看的文章无数 包括网易cnbeta上的评论也会瞧瞧 但从来都是一瞄而过,今天不知怎么就激动了。或者是有感于文章观点的太过主观的部分,若是普通用户写或者不会引起我的注意,但做为“秉承以用户为中心的年轻人”应该对自己的言行尤其是专业观点的发表应该经过慎重思考。主观部分谁都会有,但能被大多数人认同的观点才是好观点。

  8. zodiac 说:

    这里讨论的东西很好,我很感兴趣!
    但是最郁闷的是多数文章里的图片都看不到,包括本篇,希望站长能关注一下,改进一下。谢谢了。

    • 说:

      非常抱歉,关于看不到图片的办法可查看这里;BTW,掌握翻墙技术是每个网民的基本要求,而且,现在Flickr也没有较好的替代品

  9. 潘大大 说:

    chrome不错,笔者写的也很到位。
    但是就是这样才体现出笔者火候还欠。

    不说别的,就说15秒搜索4个网站,我用opera在chrome出世之前就做到了…地址栏又做搜索栏?早就有人这么做了

    至于操控感和相应速度,对于我这样每天上网超过10小时的人来说,没有专业的数据分析和各种情况的比较,仅仅是主观判断得出的结论,实在没有说服力。至今为止,我还是觉得opera的多标签浏览速度是最快的,密码管理也是5大浏览器下用起来最方便的(opera ie ff chrome safari)

    文章细节真的写的很好,但是还是部分言语有点主观了,抛开一些多余的话,再集中一点在UI上会更好。

  10. Jsuper 说:

    “Chrome精细的用三种相对的信息(方向,颜色,速度)来向用户传达浏览器的状态:正在连接服务器;已连接服务器,正在加载网站。”
    我终于知道这个圈圈旋转的不同意义了,我在官方帮助和网上都没有查到。困惑已久,谢谢。

  11. 李惟 说:

    图片没有一张可以看得了

  12. cd盒 说:

    Chrome是我的首选浏览器。
    用惯了Chrome,极难忍受其他浏览器的慢。。
    没有特别情况,我一直用Chrome。除非要用ie的网银,或者要用火狐的firebug。

    喜欢一个东西,可以有很多理由。
    若是不喜欢,只需要一个理由。

  13. HicroKee 说:

    个人不喜欢Chrome Linux下的字体渲染是一个大问题
    chrome我觉得最大的优点就是快 要是FF的渲染速度能有chrome这么快的话就好了

  14. 晴枫 说:

    Chrome登QQ mail有问题,会莫名地下个文件下来

  15. joyousun 说:

    作者写出了我的真实的感受,我从接触chrome第一眼就喜欢了,哪怕当时为此我要放弃别的浏览器的一些非常优秀的功能我也用它做主浏览器了。

  16. 鄙视百度 说:

    那么丑的浏览器,那么耗费资源的浏览器,那么容易获取用户个人隐私的浏览器,居然还用那么多文字渲染。chrome在刚推出的时候偶就用了~ 2天后就删掉了。
    话说,这个网站的UE太差了。连个返回都没有么?

  17. 幸运小子 说:

    浏览器的进度条还是很有用的,网速慢的时候可以判断出网页是否可以打开,也可以反映出当前网页的加载程度和加载速度。
    Chrome光一个等待我都不知道这个网页时响应慢呢还是打不开呢。

  18. jtiger 说:

    IE当年出来的时候也很简洁,FF出来的时候也很简洁。但一切都架不住用户不断增长的需求。Chrome也不可能例外!当年的手机也很简洁,估计现在送你也不会用。Chrome之所以会受到一类人的欢迎,不过是用多了IE的逆反心理罢了,最终仍然会回归到功能需求上,而不是由Google的设计师来决定你该用什么。

  19. 枯の灵 说:

    此文太赞了

    反复读了几遍

  20. galaxysky 说:

    作为技术分析层面来讲,是篇好文。作为UEer来说,犯了大忌。永远不要用自己的专业眼光凌驾于普通用户之上。

发表评论

电子邮件地址不会被公开。 必填项已被标记为 *

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>