《瞬间之美 Web界面设计如何让用户心动》笔记

布局是内容组织的必然结果,它往往是自己逐渐成形的。一旦周全考虑了页面的所有需求,并且确定了每一块的内容,你的工作就变成了看着所想要的布局自己展现在你眼前。这就好像你不断地切削石膏直到雕塑成型。 在开始安排页面内容时,我会秉承这一最基本的(同时也相当复杂的)设计方法。简单来说,我把所有的栏目区域都扔到显示屏上,然后移来移去不断地调整让它们彼此协调。

增大了注册区域,写了一句颇具号召力的标语[Express yourself.Start a blog(创建博客,表达自我)],同时还把Sign Up Now按钮做得又大又美观。此外我们把这个按钮设置为绿色,这样它就能从页面中脱颖而出。这些改动创建了一条清晰的通道,带领浏览者们前往注册页面,那里也正是我们想要他们去的地方。

人们在浏览页面或布局的时候,视线往往趋向于从左上角移动到右下角,就好像页面的布局设计有某种自然引力一样。因为人们通常都是从左至右、由上往下地阅读,久而久之视线自然会沿着这一路径移动。古腾堡图表简单地描述了这一阅读轨迹规律,

我希望有什么东西能够在整个站点中一直延续下去,并且整合每个页面,为网站创造出一个有凝聚力的形象。我所想要的应该是一个符号。

但即使没有人注意,错误的用词仍然会导致产品给人留下不专业的印象。差之毫厘,谬以千里。请确保产品的每一个细节都是正确的,以此来告诉用户: “我很细心,百分之百,从始至终。”

Howard在文章中提到,在日本的城际铁路线上,每一个站台都会在列车进站后播放自己独特的音乐旋律。因为那些经常乘坐同一线路的乘客(例如上班族)会在乘车途中感到无聊,他们会看书、读报纸,或者打开笔记本电脑工作,而不一定会去关注每一站的站牌或列车的语音播报。而到达每一站都提前播放一段独有的音乐旋律,能有效地引起乘客的注意,从而提早准备下车。 Howard把这种音乐广播称之为环境的提示。

我舍弃了列表编号,同时根据文章发布的时间顺序改变了每一个链接的字体大小。最新发布的链接字体最大,下面的链接字体依次变小,以此表现列表中的文章越来越陈旧,其重要程度也越来越低。

我根据从新到旧的顺序修改链接列表,使得它的颜色由深至浅,

因为在这个世界上不存在任何理由强迫用户思考,无论对于一个页面、一个场景,还是一个博客模板。 我们没有理由要求用户学习了解为什么有些链接比其他的要大。用户也没有理由被迫花精力去学习标签云,更不用说去探究它的重要性了。

检查应用程序中每一个控件的标记,并且问问自己,一个从没见过这个程序的人是否也能明白它的意思。把所有回答是“不”的项目列一个清单,要么修改这些标记使其变得通俗易懂,要么加上说明元素(文本、屏幕截图、小短片等)解释它们。 把所有回答为“是”的项目同样也列一个清单,并把这个清单给3个从没接触过这个程序的人看。

Poka-yoke(ポカヨケ)一词最早出自于日本丰田(Toyota)公司。Poka的意思是“错误”,Yokeru的意思是“避免 ”。举个Poka-yoke的实例,如果自动档的汽车没有挂到停车的P档,车钥匙就无法拔出。这样可以防止司机在未锁死车轮的不安全情况下离开汽车。再比如3.5英寸软盘的右上角形状有些特别,此举可以避免人们以错误的方向插入软盘。

“自动完成”指的是某种奇特的文本输入框。它们能够尝试猜测用户输入的文字,并且动态地搜索出适配的结果,然后推荐给用户,辅助他们完成输入。有些输入框会直接在框内显示最接近的那个词,还有些输入框则会显示一个适配的列表,用户可以在其中选择。 这两种“自动完成”输入框都能避免用户打错字,从而确保他们的搜索更有效率。

在输入的字符数足以让推荐词有意义之前,请不要显示推荐词。当然从另一方面来说,目前也没有一个魔法数字能确切地规定到底应该在什么时候显示推荐词。因此我们暂且把这个界限定为3~4个字符。

在准备挑战标准时请确保你的目标是为了改进它们。如果你的新设计并没有做到改进,那么你的用户将不仅得不到任何好处,反而有可能失去更多。因为他们无法利用在其他网站获得的经验,所以不能很快地理解如何使用你的网站。

好的网站设计应该能够通过我说的“无浏览器自测试”的检验。这种测试抛开浏览器以及站点导航提供的工具栏、收藏夹等一切功能,摒弃任何援助,而只依靠网站本身来引导用户。

所谓的“递进显示”就是一种设计方法,它能根据实际需要(即依靠用户的输入)而逐步显示控件,而不是默认把它们一股脑全堆在眼前。

我设计的大部分表单都使用了单列布局,标签位于输入域的上方居左对齐

费茨法则是人机交互领域里一个非常重要的法则,10年来得到了广泛的应用。其最基本的观点就是当一个人用鼠标移动指针时,屏幕上目标的某些特征会使得点击变得轻松或者困难。目标离得越远,到达就越费劲。目标越小,就越难点中。表达这一概念的公式为:Time = a + b log2 (D/S + 1)。其中,Time代表“从鼠标到达目标的时间”;D代表“鼠标达到目标的距离”;S代表 目标的尺寸”。

为什么要把按钮放在左边而文字链接放在右边呢?因为那些使用Tab键切换输入域的用户将先到达Register Now按钮。这再一次验证了我们应将焦点集中在可能性更大的选项上,同时降低用户在可能性较小的选项上的注意力。

你也能很轻易地去除用户的挫败感,只需要为他们建立期望,让他们预先知道总共有多少个步骤。 同时我们也应该告诉他们去过哪里,现在在哪里,将来还要到哪里。

可折叠面板控件是一种和手风琴非常相似的界面。它包含数个面板,依据用户的输入而展开和收拢。图14-4中,第一个面板是展开的(可见或打开),包含了Create a campaign表单。而第二、三、四个面板则都是收拢的(隐藏或关闭),其中的每一个面板都不能点击,以此来预防用户以错误的顺序访问某个过程。

用户正确地填写完某项后,在该项旁边显示一个绿色的勾号以表示“通过”。

现在当用户输入时,每增加一个字符这个数字就会减少。用户能在整个输入过程中确切地了解自己还能输入多少字符。当然,如果删除字符,这个数字就会增加。

关键就是在正确的时间显示正确的工具。

首先,我们认为(或者说意识到)博客应该便于浏览者扫描页面,以决定某篇日志是否值得阅读。其次,我们认为博客应当能更好地鼓励交流。绝大多数博客都为用户提供了添加评论的功能,但我们相信除了简单的日志评论之外,还能够激发更多地交流。最后,我们认为好的博客设计应该能够诱使人们阅读更多其他的日志。

标题使用了很大的Serif(衬线)字体以区别于日志正文所使用的Sans Serif(无衬线)小字体。(这是报纸和网站中常用的伎俩,用于在视觉上将标题和正文区分开来。)

在每一篇留言、回复、论坛帖子、日志评论旁边加一个小小的“标记”图标。这些图标可以点击,用户能对某篇评论进行标记,通知公司员工对其检查。

有两种不同的方法可以组织网站内容。一个是建立分类系统(Taxonomy),也就是说一旦你定义好类别,所有人都将遵循这个分类。另一个是分众分类系统(Folksonomy),它算是分类系统的一种协作型式。通过这种方法,用户可以根据自己的需要持续不断地添加和改变分类。

用户输入Tag之后,系统搜索出近似的Tag,然后在下一个页面中陈列出来。这个页面可以用文字向用户解释他可以把自己的新Tag和那些已被其他人创建出来的Tag相匹配。 通过这种方式,为相同Tag创建多个版本的几率将会降低,同时查找相关内容也会更容易。

首先是“邀请”状态。第二个是“操作”状态,第三个是“实现”状态。

例如在Blinksale中,你会回到Sign-in的页面。这种不错的方法被称作Closed System(封闭体系),也就是说除非Sign-in,否则你无法看到该应用的任何部分。而Srapblog则是另一种情况,单击Sign Out后你将会被送回该站点为非登录用户所显示的主页中去。这也是一种很好的解决方案,被称为Open System(开放体系),在没有Sign-in的情况下你仍然能够看到网站的一部分内容。

首先,让客户能为自己打点行李,这点非常重要。例如某个用于管理个人数据的应用程序,必须为日后可能的注销行为提供一种可靠的保留信息的方式,否则客户在一开始根本就不会感兴趣。

省去一些东西,远比把它们全塞进来要容易。 人们使用这样的应用程序,远比使用那些臃肿的程序要容易。多余的特性、复杂的交互还有时髦的界面小工具,它们更多地是在炫耀开发者的技术,而不是服务于实际用途。