Chrome 浏览器的哪些设计符合「Don’t make me think」原则?

分类: 研发
人气 / 评论 / 05-23 发布
作者:
后台-系统设置-扩展变量-手机广告位-内容正文顶部

damndgigital_chrome-design_2014-03

Don’t make me think是一个很大的概念,同时提问者也选择了一款很优秀的产品 — Chrome,知乎上应该有很多人的默认浏览器是这一款,因其被广泛渲染的速度,以及优秀的设计而选它(当然也有人选择其它)。那么,Chrome 浏览器哪些设计符合「Don’t make me think」原则?先从以下几点展开。

1. 浏览器Tab栏

在Chrome出来之前绝大部分浏览器的Tab栏均放置在地栏下方(IE那会儿连Tab栏都木有),初见Chrome时很诧异它的Tab栏设计,位于地址栏上方以梯形的样式出现,视觉印象很深刻,第一印象(Blink)就与其它浏览器形成了区别。

damndgigital_chrome-design_2014-03_01

当最大化Chrome并进行浏览操作时,总算理解了为什么Chrome的设计为什么要将Tab栏放置在地址栏的上方了。在Windows下,用户将Chrome最大化后,它的边框将消失,Tab栏就处于整个屏幕最上面一行的位置了。

啰嗦了一大堆,为什么这样Tab栏的设计能够Don’t make user think呢?先介绍一个交互理论的常识–Fitts定律,该定律指的是:使用指点设备到达一个目标的时间与两个因素有关: 1.设备当前位置和目标位置的距离; 2.目标的大小。位于顶部的Tab栏其实是对Fitts定律的灵活运用,由于光标不可能跑出屏幕以外,因此用户尽可以随便将光标向上移动,光标肯定位于Tab栏上(Tab栏呈条状展现更易被选中),这降低了光标指向的难度,节约了用户时间。ps. 该设计只出现在Windows的Chrome浏览器内,至于为什么OSX里Chrome不这样设计,下面有解释。

我们可以看一个更有名的例子,Apple的应用程序menu bar与Windows的应用程序menu bar对比,Windows一直以来的UI设计都是把menu bar放在应用程序的title bar下面,而OSX採取完全不同的设计,把menu bar固定在萤幕最顶端(注意下图红色框起来的部分)。一般人对这两种设计没有太多观感,但当我们应用Fitts定律后,会发现OSX把menu bar放在屏幕最顶端,虽然移动距离变长了,但目标的大小也跟着变成了“无限大”(有兴趣的可以看这里,传送门:http://zh.wikipedia.org/wiki/%E8%B4%B9%E8%8C%A8%E6%B3%95%E5%88%99)OSX里Chrome无法应用这样的设计,因为屏幕最顶部一行被系统占用!

damndgigital_chrome-design_2014-03_02

另外,有兴趣的同学,可以试一下在Windows(XP)下将鼠标紧贴屏幕最左下角点击Win键,以及在OSX系统里在屏幕的最左上角屏幕边缘点击苹果图标,试一试,理解一下它们分别的做法…… ^_^ ps.win7应该改进了吧,虚拟机里只装了xp!

再来说Tab栏的另一个设计,用户在浏览窗口打开过多,需要关闭的情况下,Chrome对Tab进行了一个很人性化的设计 — Tab自动移动至当前鼠标位置。相信许多Chrome的用户对此应深有感触吧,当用户关闭Tab栏时,Tab会从右向左移动(谢 @tracey12 同学提醒),用户从最右侧的Tab栏开始关闭,Tab会从左向右关闭,并且在等待一段时间用户没有进行关闭操作后,Tab才会调整宽度(以保证Tab的关闭icon在用户操作期间一直在鼠标下方),细节啊,这些细节都亮瞎了我的双眼。导致用户在进行连续多个Tab的关闭时连鼠标都不用移动,只需要点击、点击、点击……Don’t make me think

damndgigital_chrome-design_2014-03_03

2. ToolBar

简洁、极端的简洁,刚安装好的浏览器Toolbar简洁我只能输入地址。Toolbar上的列出用户最需要的功能:后退、前进、刷新、输入框、设置,只有5项,数量上属于短期记忆的能力范围内,减少了用户的认知负担,此时用户关注点只在浏览本身上,几乎不需要对浏览器进行额外的学习。

damndgigital_chrome-design_2014-03_04

3. 输入框

将同样具有输入属性的地址栏与搜索框进行融合,导致这个输入框成为一个很复杂的系统,仅在输入部分这个框就能够输入地址(废话)、搜索本地历史、搜索本地收藏、搜索Chrome插件、引用其它搜索引擎……Chrome将这些有机的融合在一起,用户需要做的只是输入,结果已经列好了。Chrome试图简化用户在到达浏览页面之前的所有操作,举个小例子吧,用户输入http://zhihu.com进入知乎网站,下次用户再试图进入输入时,从用户输入第一字母 Z 时,Chrome已自动帮用户进行了补全(目前仅支持网址补全,而且是用户浏览过的网站,这个设定很好,细节不表述自己思考吧),接下来就看用户采取何种动作,回车键(打开网页)或Tab键(引用知乎的引擎)。

damndgigital_chrome-design_2014-03_05

个人认为,Chrome的输入框还可以针对中文使用习惯进行再深一层次的设计,能够使输入框更优化。 ps.同学可以尝试在输入框内输入 zhihu。com(中文字符的dot,也就是句号)

4. 后台同步

这个是神一样的功能,近乎所有信息均可进行同步,看下图设置当中的选项就可了解(当然,这些设置项用户都不用去管,默认同步就好了),保证多平台、多端在某一程度体验上的一致,这功能设计之初就是为了减少用户重复性的操作及设置。

damndgigital_chrome-design_2014-03_06

5. Loading

这个放在最后吧,很少有人注意到Loading,也就是我们称之的进度条,因为曾经有段时间我希望能够从非技术角度解释Chrome速度为什么快,让我Chrome的进度条有了一定的了解。当页面进行loading时,Tab左侧有个不断滚动的四分之一圆的小环,最初是以逆时针方向缓慢转动,这个时候的Loading状态可能是解析DNS,并尝试与服务器进行连接,当连接成功开始Loading服务器上的数据时,小圆环以顺时针快速转动(看下图)。这样的设计有效有让用户明确的知道了目前Loading的状态,并对结果有一个直观的预期(一直逆时针用户就可以果断关闭网页了)。同时,这样的设计让我感觉在加载服务器数据时更快(有了逆时针缓慢的对比),并且情感上让我联想起小时玩过的后拉式小汽车,往后拉动汽车集蓄动能,放手后车轮就快速的向前奔跑 ^_^,这都是Chrome设计者对细节的把握,简单的旋转被设计者赋予了完全不同的含义,就算用户不明白技术细节,从动态的显示上也能了解一个大概。

damndgigital_chrome-design_2014-03_07

不知不觉写到半夜了! 又是一篇长文,以上仅从设计角度解答所提出的问题,还有许多Chrome优秀的设计无法在这一篇里完成,如:收藏管理、下载、历史、开发者模式、右键功能…… 等等!有兴趣的同学可以看看这个《Chrome的100个小技巧》,传送门: http://pan.baidu.com/share/link?shareid=98675&uk=3944669047

Don’t make me think是一个概念,不要停留在表象层面,在不让用户思考的同时意味着设计者需要花费更多的时间及精力进行思考,相应产品需要更精致的雕琢才能够达到要求。

Tags:
+ 赞
后台-系统设置-扩展变量-手机广告位-内容正文底部
相关信息:
  • 用Web吞噬世界:Chrome Apps将可以打包成iOS或Android应用
    用Web吞噬世界:Chrome Apps将可以打
    2014-05-23 18:54:500
后台-系统设置-扩展变量-手机广告位-内容正文底部2

评论

留言与评论(共有 0 条评论)
   
验证码:

文章总数
524+
评论总数
7+
阅读总数
1880+
运营天数
1001+