众妙之门——网站UI设计之道(修订版)

978-7-115-29461-6
作者: 【德】Smashing Magazine
译者: 贾云龙王士强
编辑: 赵轩

图书目录:

详情

全书共10章,前8章讨论了和网站UI设计相关的8个不同的领域具有很强的操作性和专业性。第9章以访谈的形式介绍了多位专家对一系列重要问题的看法。

图书摘要

版权信息

书名:众妙之门——网站UI设计之道(修订版)

ISBN:978-7-115-29461-6

本书由人民邮电出版社发行数字版。版权所有,侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用,未经授权,不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟,与我们共同保护知识产权。

如果购买者有侵权行为,我们可能对该用户实施包括但不限于关闭该帐号等维权措施,并可能追究法律责任。

• 著    [德] Smashing Magazine

  译    贾云龙  王士强

  责任编辑 赵 轩

• 人民邮电出版社出版发行  北京市丰台区成寿寺路11号

  邮编 100164  电子邮件 315@ptpress.com.cn

  网址 http://www.ptpress.com.cn

• 读者服务热线:(010)67132692

  反盗版热线:(010)67171154


Smashing Magazine是世界知名的顶级技术类博客,主要面向Web设计与开发人员。 成立于2006年9月的Smashing Magazine旨在向Web设计者和开发者提供优质创新的信息和最新的技术趋势。


The Smashing Book

Copyright © 2010 by Smashing Media GmbH

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, by photocopying, recording or otherwise, without the prior permission in writing from Smashing Media GmbH.

CHINESE SIMPLIFIED language edition published by POSTS & TELECOMMUNICATIONS PRESS Copyright ©2012.

本书中文简体版由德国Smashing Media公司授权人民邮电出版社独家出版。

未经出版者书面许可,不得以任何方式复制或抄袭本书内容。

版权所有,侵权必究。


本书是知名设计网站Smashing Magazine上线以来的精华总结,来自全球的知名设计师无私地分享了他们多年积累的宝贵经验。全书共分10章,前8章讨论了和网站UI设计相关的八个不同的领域,覆盖面非常广,具有很强的操作性和专业性,全书逻辑严密、言简意赅,设计人员可以快速地找到自己想要的东西。第9章以访谈的形式介绍了多位专家对一系列重要问题的看法,入木三分,极富启发性。第10章以讲故事的方式,把Smashing Magazine的创办和发展过程娓娓道来,同时毫不保留地分享了两位创始人的成功秘诀和价值观,让人受益匪浅。

本书最大的价值在于它在传授具体经验的同时,也对设计思想和设计理念进行了深入的探讨,在“授人以鱼”的同时,不忘“授人以渔”。相信广大读者读完这本书,一定会有一种相识恨晚的感觉。


人可以使简单的事情变得复杂,通过常规的方式写一本书对我们而言算不上什么挑战,从撰稿者的名单可以证明这一点。我们希望尽可能多的人参与进来:作者、设计师和插画师。实际上,在圈儿内,我们把这个小小的项目称为“社区之书”。然而,这本书并不是这个社区成员的作品,而是由一个专业的作家团队创作的。在成书过程中(从头脑风暴到最终的版面设计), 我们把读者也包含在了计划里面:我们在论坛(Smashing Forum)中向人们征集意见,并聆听他们的观点。当然,所有的这些前期的辛劳,也可以吊起读者的胃口。成果现在就握在你们的手中,这是Smashing Magazine的第一本书。我们希望至少做了一些大家看来正确的事情。

本书包含了Smashing Magazine精心准备、精心编写以及精心编辑的内容,这些都基于Smashing Magazine读者的建议和意愿。我们认为本书包含的主题是至关重要的,所以,我们希望本书的内容对您来说非常实用。在http://smashing-links.com提供的一份便捷的概述中,你会发现本书参考和提到的全部资源的列表。

请通过书评或评论的方式,让我们知道你对本书的看法。愿你们在本书中找到乐趣和酷毙了的体验!

Sven Lennartz(斯文·雷纳兹)

Vitaly Friedman(维塔利·弗里德曼)


Dmitry Fadeyev

什么是用户界面设计?什么是有效的用户界面设计?你打算如何把用户界面设计得更好?这一章,我们就来了解一下现代互联网应用程序中可视用户界面设计的理论演化和技术更新。

“在你使用工具完成任务的过程中,你所做的操作以及工具的响应,这些结合起来就构成了界面。”—Jef Raskin

用户在第一次使用一个界面时,仍然能发现某些元素是他们所熟知的。

用户界面设计并不仅仅是考虑如何摆放按钮和菜单,更为重要的是考虑应用程序或设备如何与用户互动;更多时候,还要考虑产品与多个用户之间的互动。这就意味着,用户界面设计不仅要做出好看的产品外观,还要做出好用的产品。这不仅仅是调整一下按钮的位置、给他们选选颜色,而是要为完成一项任务而选择正确的工具。一个特殊的界面,是否需要使用按钮?如果确实需要,那么这些按钮将完成什么样的工作?这个按钮需要如何设计才能让用户了解这个应用程序的工作方式,并且轻松达到用户的目的。

在产品的开发周期中,尽早开始用户界面设计至关重要。正如 Jef Raskin 所说:“对消费者而言,界面就是产品[1]”。用户一直看到和使用的都是用户界面,而不是深藏在应用程序背后的技术体系结构。把界面做好,这将极大地提高用户使用产品时的愉悦感,这也能让其很容易就掌握产品的使用方法。所以,先从界面设计开始,然后再开始应用程序后台引擎的编码,要好于先开始编码,再给它包裹一层界面。

什么因素能成就一个伟大的用户界面?

在我们开始着手设计用户界面之前,首先应该理解什么样的用户界面才是出色的用户界面,我们的设计要具备哪些品质才够得上“出色”。所有伟大的用户界面大都具有下面这8个品质或特点。

1.清晰——通过使用文字、流程图、层级图、图标等元素,避免用户对界面产生困惑。清晰的界面不需要手册,同时还能确保用户在使用的过程中减少犯错。

2.简洁——为了让界面清晰,可以通过在所有元素上添加浮动框说明或者标签这种简单的方法来实现,但这样做会导致界面膨胀臃肿。如果电脑屏幕上同时充斥了太多的东西,找到你想要的东西是非常困难的,用户使用起来就觉得困难乏味。如何让界面同时保持简洁和清晰,这正是设计伟大界面的挑战所在。

3.熟悉——人们总是对之前见过的东西有一种熟悉的感觉,有的界面即使是第一次使用,其中的有些元素我们还是会感觉很熟悉。在设计过程中,使用一些现实生活中公认的意象能够更好地帮助用户理解。例如,文件夹样式的选项卡通常在网站和应用程序中起导航作用,人们很快就能意识到它的导航作用,因为现实生活中,我们也是通过文件夹来分类资料的。

4.响应性——这意味着两件事情。首先,响应必须迅速,一个良好的界面不应该让人感觉反应迟缓。其次,界面应该提醒用户发生了什么事,用户的输入是否成功地处理,让用户了解这些信息反馈。并且明确告诉用户,他的请求已经被成功受理。

5.一致性——在整个应用程序中保持界面一致是非常重要的,这能够让用户识别出使用的模式。一旦用户学会了界面中某个部分的操作,他很快就能知道如何在其他地方或其他特性上进行操作,就好像他们早就知道似的。

6.美学性——尽管你不需要把一个界面做得非常有吸引力,但是有一个好看的界面会让用户工作起来更开心。况且,让用户开心绝对是一件好事。

7.高效性——时间就是金钱,一个伟大的界面应当通过快捷菜单或者良好的设计来帮助用户提高工作效率。毕竟这是科技带给我们的一个最大好处,它允许我们用更少的时间和努力来完成更多的工作。

8.容错性——每个人都会犯错,你的应用程序如何处理用户所犯的错误是对它的总体质量的最好测试。它是否容易撤消操作?是否容易恢复删除的文件?一个好的用户界面不应当因为用户的错误而惩罚用户,而应该总是为用户提供犯错之后的补救方法。

想要设计一个包含所有特性的用户界面非常困难,因为各个特性之间总是相互影响。你在界面中增加的元素越多,用户在使用上所花的努力就越大。当然,反过来亦是如此。没有足够的帮助和支持,用户会茫然不知所措。如何设计既简洁、优雅,又清晰、一致的用户界面,是摆在用户界面设计师面前的最大难题。

可视界面设计就是让用户能够在他们的电子设备屏幕上看到你的界面的物理表现的过程。可视界面设计的主要目的是通过精心制作合适的可视界面,让用户理解应用程序的用途以及如何操作应用程序。

可视界面设计由一系列过程组成。选择合适的类型、对齐每个元素、将不同元素以一种有意义的方式组合起来,用户界面中不同的功能和特性借此传递给了用户。下面就是可视界面设计中的一些主要元素。

布局规定了界面中所有可视元素的结构。通过元素之间的距离,还确定了元素之间的层级和相互关系。元素距离比较近表明它们之间存在相互关联,例如图标下面的标签。定位也能改变整个界面的流畅性。例如将标签放在文本输入框的上面,而不是左边,这样我们就可以方便地从上往下扫描所有元素,而不需要先看左边,然后再找右边哪个输入框与其对应。

形状通常用来区分元素。例如,通过改变图标的外形,能够让它们被更快、更容易地辨认出来。尺寸经常用来表示重要性,越大的元素就越重要。尺寸也可以改变可点击控件的可用性。费茨定律告诉我们,一个可点击区域越大,用户将鼠标移动到该区域就更快。把经常使用的按钮做大,不仅让用户的点击变得更容易,同时提升了点击率。

很多地方都用到颜色。一种颜色在与它反差强烈的背景色下是能够吸引人的注意(比如,在白色背景中的一个亮黄色警示箱)。不同的颜色可以表示不同的意义。例如,红色经常用来表示危险或停止(交通灯里的红灯),所以最好用红色来表示错误信息。而绿色一般用来表示成功或者继续进行的信号,所以应当用在表示这类信息的内容上。颜色也可以用来突出显示一些关系,例如在编辑的时候,根据按钮的关系,以不同颜色高亮显示,来帮助用户识别。

创造一个产品的外观和感觉并不是可视界面设计的主要目的,而仅仅是一个部分。最主要的目的还是沟通:通过沟通的行为帮助用户理解应用程序。

在使用颜色的时候要记住两件事。首先,不同文化中颜色代表的含义有所不同,所以确保你的目标用户能够识解你所选颜色的含义。其次,不要忘记色盲用户,在区分不同元素时,多花一些心思,使用一些颜色以外的技巧,例如一个图表中的长条。如果用户是色盲,他们就不能区分特定的颜色,多数色盲患者都是红绿色盲,所以你需要使用其他的方法,例如形状、材质等。

一个元素周围的黑暗或者明亮将会对元素在界面上的可用性产生影响,这其实就是对比度在起作用。白色背景中的黑色文本具有高对比度,比起白色背景中的灰色文字,更容易辨认和阅读。调低一些元素的对比度,将它们融入到背景当中,用户就能够区分出重要元素和次要元素。

在交互设计中有一个概念叫做Affordance。Affordance 是一种能够让用户明白如何使用一种东西的特质。以把手为例,做一个单向门的最好办法就是在拉的这一面安装一个把手,在推的那一面装一个平坦的手柄挡板。看到门,人们自然就知道什么时候拉、什么时候推,因为门把手已经告诉了人们如何去使用。也就是说,提供了最好的互动方式,来让用户集中精力于正确的一个上面。

我们可以把这个主意应用到用户界面设计中,在屏幕上使用材质。例如,在可视界面中一些元素是可以拖拽的,就像在一个窗口的四角,我们可以对这个窗口进行缩放。为了让用户知道可以点击、拖拽它,通常会使用一些粗糙介质的突起。现实生活中,那些可以用手拉的物品通常会具有比较粗糙的材质。这个主意被转移到了屏幕上,不同的是我们不再用手指,而是用鼠标来进行拖拽。

我们已经讨论过什么是用户界面,用户界面应该具备什么样的特点,以及我们可以使用的构建用户界面的工具,现在让我们看一些可以应用在你的网络应用或网站上的实用技术。

空白指在各种内容元素之间的空白区域,比如标题、正文和按钮。当在不同元素间建立联系时,空白是一个非常重要的工具。通过缩小元素之间的空白,能够把一些相关的项目组成一组。增加这些分组之间的空白能够更加强调这些分组与其他内容之间的联系。使用空白,我们可以分组相关的控件,也可以构建页面中元素之间的层级关系。

Gmail的工具栏通过空白的分割突出了3个分组。每个分组中的按钮都对应着不同的功能。

圆角通常用来改善图片元素的观感。它们看起来非常舒服,并且能够为你的界面增添平滑感,但这并不是圆角的全部功能。圆角通常定义一个对象的边界。当看到圆角时,你就知道已经到了容器的边界。如果是一个直角,后面再跟另一个直角的容器,它们之间的界限会不太明显。而圆角,或其他任何类似视觉上的处理,都能够让分界线变得更为明显。

注意在Ballpark的客户列表中,圆角是如何来突出每条记录的界限的。在每个记录的中间也有两个直角,但是它们是用作相关数据之间的分割线,而不是一个条目的边缘。

颜色是一个重要的沟通工具,例如,定义不同的元素。你可以在应用程序中使用不同的颜色来区分不同功能的按钮。红色常被用在一些表示破坏性的按钮上,诸如删除或移动;蓝色一般用在标准按钮上;绿色则用在保存和更新操作按钮上。使用代码着色,我们可以分辨出屏幕中用户创建的各种各样的数据,让它们变得更容易阅读。

当你在 Yammer 上发布一条信息的时候,信息就会滑出并且高亮显示。

使用动画来提醒用户关注。有时候,单独使用颜色和对比度还不足以吸引用户的注意。如果一件很重要的事情发生了,你也确实需要确保用户能够注意到,那么就使用动画。人类的眼睛非常适合捕捉移动的事物,特别是在固定背景中运动物体。如果用户在他的辅助工作的应用程序中添加一条待办事项,或者向购物车中加入一件商品,这个时候就可以使用动画来突出正在发生的事情。例如,当在屏幕中创建一个项目的时候,可以使用高亮的效果。对于那种使用很多Ajax技术的应用来说,这一点特别有用。在这些情况下,页面中的操作并不会导致页面的刷新,高亮的部分弹出来告诉用户发生了什么事情。

Goplan通过在面板左侧放置不同颜色的标签,来帮助用户快速区分不同的项目,比如任务、笔记或者博客文章。或者博客文章。

另外一个将用户注意力集中到某一区域的方法是使用阴影和加深背景。阴影通常被设置在弹出菜单或者模式窗口四周,像一张毯子一样遮住了窗口四周的干扰元素。阴影降低了窗口下方其他元素的对比度,反过来就增强了用户使用区域的对比度。同样可以在窗口底部使用一个黑色(或亮一点)的半透明层,减少它所覆盖内容部分的视觉干扰,从而让用户的注意力集中在窗口上。

MobileMe在模态窗口底部使用了黑色的遮罩层,同时在窗口四周使用了阴影。借此消除窗口以外元素的干扰,把用户注意力转移到窗口中来。

应用程序大多有自己特别的主要和次要界面。例如,当你在一个项目管理应用程序中创建项目时,主表单通常包含项目名称、项目截止日期、优先级,等等。在表单底部,你会看到一个“创建”按钮。通常你还会看到一个“取消”按钮或者文本的链接。因为用户不经常使用,所以“取消”按钮并不是很重要,因此,你就可以减少这个按钮的视觉“分量”。例如,可以把“创建”做成一个按钮,而“取消”只做一个没有任何视觉效果的超链接。这样中心就放在了主要的操作上,用户完成表单的时候就能很快地定位到操作按钮。

这是Ballpart客户创建的一个表单,注意看“Create Client”按钮与“Cancel”的区别是多么显著。

使用带填充的块状链接可以用来方便地将鼠标定位到链接。网络应用程序构建在HTML元素的基础上,也就意味会使用很多的锚(通常称为链接)标签。锚标签默认是“内联(inline)”元素,意味着它的宽度和高度只是在文本的内部。反过来就是说,可以点击的区域和文本的范围一样,在很多情况下显得太小,用户不能够很精准、舒服地进行点击。而你可以对锚链接使用内边距来使它变大。对于列表中的链接,就像侧边栏,将锚链接转化为“块元素”是个更好的办法。通过使用CSS的“display”属性,我们可以转换一个元素的类型,所以给锚链接增加一个“block”属性,就能将其转化为一个块元素,块元素的宽度和高度就不再局限于文本的尺寸,而默认会扩展到包含它的容器的宽度。这种方法非常适合侧边栏中的链接。

MobileMe侧边的导航面板,使用了带内边距的块状链接增大了可点击区域,用户能够快速地移动鼠标到这些区域,提升了可用性。

用户在使用应用程序的时候,总是准备去做一些事情,他们总是在想动词。“我想保存这个文件”或者“我想更新这篇文章”。在创建对话框或者其他需要用户处理的应用时,使用动词而不要使用像“是的”、“不是”、“好的”这样的表述。当用户看到像“好的”或者“取消”这样的选项时,他们需要去阅读额外的信息来搞明白他们要做什么。如果你使用动词,例如“保存”、“不保存”和“取消”,用户就不需要再看其他的消息,他们马上就知道这个对话框或选项是做什么的。

Backpack在按钮或链接中很好地运用了动词,确保每个选择对用户都是明白无误的。

在网页文件加载完成后自动激活主表单中的输入框会给基于表单的应用带来很大的好处。例如,Google的搜索引擎页面自动将焦点定位在页面的输入框中,因为几乎所有到达Google首页的人都想在输入框中键入需要查找的内容。在其他的应用环境中自动激活输入框也非常有用,例如,在那种需要连续输入的应用中,就像创建购物清单,在输入第一个物品之后,用户想接着输入下一个,所以可以重新激活输入框,让用户快速、持续地进行输入。

Tadalist允许你快速、不断地输入待办事项。当输入一个任务并且单击回车后,程序会增加一个新条目,然后把焦点重新定位在输入框中,等待用户的下一次输入。

很多应用程序都有一套与内容紧密相关的控件,例如一个列表中的删除按钮和记录的编辑按钮。为了方便定位,通常这些控件放在了每条记录的后面,但是这种情况下就造成了大量的重复。多数的时间里,用户并不需要这些控件,需要时,也仅仅需要其中一个特定条目的控件。

如果使用悬浮控件,可以在用户将鼠标移动到一个特定区域后才显示,这样可以简化界面。例如,当鼠标停在你想编辑的记录上时,一个编辑按钮就会显现出来,但是其他记录的编辑按钮仍然保持隐藏。

悬浮控件是一个很棒的解构和简化界面的方法,但是在使用这个方法之前,你还需要考虑两件事情。首先考虑控件是否能被找到。用户在使用之前,往往需要先找到这个界面中的元素。你的控件是否做得足够显著以吸引用户注意?用户经常很自然地移动鼠标,停留在他们正在浏览的项目上,所以这也许并不是一个大问题,但是仍然值得去思考。其次,移动设备上的网页浏览器也许不能模拟鼠标的动作,那么这些控件将无法使用。

Basecamp运行用户上传多个文件,但是每次只显示一个文件上传按钮。

如果表单中的一个输入框中需要输入多个数据记录,例如,在一段文本之后附加多个文件,或者向数据库中的公司记录里添加多个人员信息。这种情况下,可以使用动态扩展表单,以一种优雅的方式来实现需求。因为用户每次只能在一个输入框中进行操作,所以每次也只需要显示一个输入框。当用户填完并且增加了一条记录后,程序会在新记录后再创建一个额外的输入框,允许用户键入更多的信息。这种方法替代了同时显示多个空输入框的形式,每次你只需要显示一个空的输入框,但是允许用户输入需要的内容。

Twitter 只有在鼠标停留在一个条目上的时候才显示“回复”和“收藏”按钮。

界面的简化需要不断地思考总结。如果你想要砍掉一些不必要的元素,并且为剩余的元素更好地利用空间,将标签放到输入框内部是一个巧妙的办法。这不仅节省了空间,也清楚地表明了与输入框对应的标签。

mobileMe 将标签放到输入框内部,使登录界面紧凑而有致。

如果希望为高级用户整合一些额外的功能,但是又不想让页面臃肿,这时就可以通过提供按需增加的上下文元素来实现。例如,你的应用中有一个带高级搜索的搜索条,在没有使用的时候只显示搜索条,当用户单击时再显示一些额外的控件。这样,界面仍然保持了简洁,实现高级的功能也只需要一次点击。

用户将鼠标移动到搜索条上时,会显示一个扩展的搜索条件,为高级用户提供一些额外的功能。

使用图标能够简化界面、让界面看起来更有吸引力,但是在使用之前也有一些因素需要好好考虑。语言几乎总是比图标表达得更清楚。写一个标签非常容易,只要表明这个按钮的作用就行。然而在设计图标的时候,则需要用有效的意象来描述操作。如果图标是一些很本土化的东西,你选择的意象在不同的国家可能会有不同的理解(甚至连垃圾桶的形状在世界各地都是不同的)。

屏幕中同时没有太多的图标,每个图标都能够同其他图标明显地区分开,这样图标才能发挥出最好的作用。这意味着形状和颜色是创建一套成功图标的重要因素。使用正确的图标,能够让界面更容易使用。因为一旦用户熟悉了这些图标的含义,通过形状和颜色的区别,用户就能很快找到他们想要的图标。

没有人喜欢等待。等待意味着本来可以做一些有价值的事情的时间里,你却什么都没有做。但是很不幸,载入每个程序都需要花费一些时间,比如导出一个大文档或者通过查询返回结果,用户不得不等待。但是,可以通过使用加载指示器来让用户觉得等待的时间变短了[2] 。在加载过程中,可以增加一个指示器,比如旋转的动画或者进度条。研究表明,在指示器存在的情况下,用户感觉等待时间变短了 。加载指示器对短时的等待非常适用,但是对于一个需要一分钟甚至更多时间的情况呢?如果你在加载的这段时间里什么都不能做(假设你已经为减少加载时间做了最大的努力),你还是可以做一些事情来改善用户的等待体验。利用这段时间提供娱乐或者信息。例如,很多应用程序在长时间的等待过程中会显示一些有趣的提示或技巧。如果用户确实做不了任何工作,起码他们可以学到一些新东西。

当用户通过Web界面上传文件时,Dropbox显示一个进度条。对于类似的等待时间不定的事件,进度条是必不可少的,这样用户就不必猜测他们究竟还要等多长时间。

应用程序的响应性并不仅仅依赖于后台代码结构的优化。用户界面同样也扮演了非常重要的角色。在可视界面中被使用最多的一个元素就是按钮。在桌面应用程序中,按钮具有多种状态,最常见的是按钮默认状态和鼠标单击后的状态。

OtherInbox在主导航中有一系列图标,图标底部都有相应的文字进行说明。

WordPress中按钮的默认状态和按下的状态。

Campaign Monitor 在初次登录的时候提供了详细的帮助信息,同时有一个很大的按钮将你带到活动的创建页面。

按钮按下的状态看起来就像真的被按下去那样。这个状态提示用户,他们的单击已经成功地执行了。像在桌面应用程序一样,按钮的按下状态同样可以使用在互联网应用中,为用户提供一些额外的反馈和响应。

当用户第一次加载应用的时候,屏幕上不会显示过多的内容;用户还没有输入数据,也没有什么好显示的。在这个空白状态中添加简短的帮助信息,来引导用户如何开始。为了让事情更加简单,你甚至可以在信息中加入一个链接,将用户带到推荐的操作。例如,一个管理电子邮件广告的程序,用户创建了一个新账户后登录,应该提供给用户一段帮助信息,其中包含一个链接到创建新广告的界面。

用户对你的应用并不是十分了解,所以一些情况下在应用中合理使用广告是一个很好的办法。同时,由于互联网产品经常会进行一些细微的更新或者时不时推出一些新功能,所以通过广告的方式让你的用户知道这些变更就变得更有意义。一般情况下,可以通过在屏幕中的显著位置放置一个小块通知的方式来实现。通知区域应当吸引眼球但又不至于让用户分心,影响用户的正常工作。用户读了这个通知以后,应该可以关掉它。

在follow特性的主要输入区下面,Yammer网站提供了一个非常有帮助的提示。用户读完以后,可以选择点击右边的关闭框关闭。

桌面应用程序最常用的特性之一是,值得信赖的撤消快捷键。不小心改变了正在编辑的文档图表格式?没问题,按Ctrl+Z/Cmd+Z组合键,应用程序会采取撤消操作,把你的文档恢复到最后一个动作之前的状态。撤消操作是容错界面的一个重要工具,它也可以应用在页面应用程序中。例如,你可以在网页应用程序中加入这些熟悉的快捷键或者显示一些带有撤消链接的临时通知信息。

每次在Gmail中删除一封邮件的时候,都会出现撤消操作的按钮,允许我们马上撤消删除操作。

人们在删除一些东西之后,通常会反悔,所以在你的应用程序里增加额外的保护措施来处理一些比较重要的数据是一个明智的做法。例如,项目管理中的项目文件。用户删除一个项目时,将其进行存档而不是立即删除。如果用户改变主意,希望把他们需要的项目文件取回时,程序可以轻松地将它们还原。当用户发现所有的东西并没有丢失而感到非常高兴时,消耗一点用户的磁盘空间是值得的。

Writeboard允许用户恢复两个月内被删除的文档。

当在应用程序中进行诸如删除记录这样的破坏性操作时,提供一个确认对话框,提醒用户是否确实要进行接下来的操作是非常必要的。特别是当删除按钮的位置和其他控件非常近的时候。如果用户不小心点击了删除按钮,在生效之前用户可以取消操作。但是,不要过度使用这个特性,因为不必要对话框拉长了操作过程并让人生厌。

Freckle使用确认对话框来确保用户的误操作不会造成更大的损失。

日本哲学家Kaizen(中译音为“改善”)强调,应该通过微小、逐渐的过程来获得持续的改进和提高。用户界面设计,特别是现代网络应用的用户界面设计,并不需要一个完成的状态,因为我们总是不断地对其进行改善和升级。记住,你也应该像Kaizen 一样思考。

传统的CD的分发模式有一个很大的缺点,即一旦产品烧录完成并寄送出去后,你就无法改变它……或者,不是那么容易改变 。你可以发布一个补丁,但是用户必须下载并安装它才能生效,你无法确保每个人都会进行更新。另外,为每一个细微的改变发布补丁是不可行的,所以你必须在第一次发布的时候尽量做到完美,而这就需要在发布之前进行大量的测试。SAAS(软件即服务)的模式改变了一切。通过网络运行你的网络应用的好处是,你可以随时进行微小的更改,而用户马上就能够实现这些改进。

这就意味着,现在不必在第一次发布之前将界面做到100%正确。如果一些东西不合适,你可以修改它。通过观察用户与界面之间的互动,你就能找到让界面工作得更好的感觉,也能发现使用时的冲突。不管是哪一部分的用户界面需要改进,你可以很容易地为所有用户进行更新。这就是 Kaizen的界面设计方法:微小的、逐渐的、常规的改进。你不再需要担心必须在第一次就将界面做到完美。相反,通过不断地改进,你将很快获得从实际使用中进化而来的伟大界面。

[1] Raskin,J. 2000 The Humane Interface Addison Wesley。

[2] http://www.usabilitypost.com/2009/01/23/maing-wait-times-feel-shorter/


相关图书

用户研究成长之路
用户研究成长之路
破茧成蝶 用户体验设计师的成长之路(第2版)
破茧成蝶 用户体验设计师的成长之路(第2版)
规律与逻辑——用户体验设计法则
规律与逻辑——用户体验设计法则
设计驱动力——途牛旅游用户体验设计之旅
设计驱动力——途牛旅游用户体验设计之旅
破茧成蝶2——以产品为中心的设计革命
破茧成蝶2——以产品为中心的设计革命
用户体验可视化指南
用户体验可视化指南

相关文章

相关课程