近段读完并分享了Allan copper的 About face3 : The essentials of interaction design,推荐没看过的程序员朋友可以抽时间看看。感觉上这本书对交互设计讲得比较透彻,首先拿出了方法--目标导向的交互设计,再介绍了交互设计的过程框架,最后介绍交互设计的细节。比较易读,不仅有大量的细节规则,还会让读者对交互设计的方法和框架有一些认识。
第一部分:目标导向的交互设计
1. 设计的定义:了解用户的需求和期望,了解商业,了解技术限制,设计出可行,满足用户,满足商业要求的产品。简单说设计是用户,技术和商业三个要素的折中。看下图,Novell, Apple, Microsoft分别擅长技术,用户,商业,但都只是设计的一个方面。
2. 设计,一般不是解决可用性(Usability)的问题,而是要满足设计的目标。设计的目标包括很多维,包括商业目标(产品干什么),用户个人目标(用户的感觉),用户的人生目标(用户的荣耀和财富)。产品功能,任务往往是不稳定的,而用户目标是稳定的,甚至会稳定几百年。比如从北京到江南,快速舒适就是用户的目标,几百年前的产品是京杭运河的高档楼船或马车,现在是高铁,都能满足当时的用户目标。
3. 产品设计要倾向满足用户的精神感知模型。比如现在各路电视盒子的UI就比老式的电视控制界面更接近感知模型。不要暴露布尔逻辑给用户,那不是感知模型。
4. 除了用户目标,还要了解用户角色。用户一般很忙碌,却很聪明。设计最好针对的80%的中间用户,不要太偏向专家或新手。开发者容易偏向高级用户,喜欢开发一些命令行工具,那是给专家的(Linux :))。销售一般偏向菜鸟,巴不得你多开发一点用户向导之类的东西,那玩意减少他们支持的工作量。
5. 综合目标导向的设计方法,过程可见下图,关键是用户目标和用户的角色。设计的过程是非常具体的,不像代码容易抽象和重复使用。
第二部分:目标导向设计的模式和框架
6. 软件产品的模式,注意你的产品类型,注意不同类型交互的特点:平台型的软件,例如Word, Visual studio, 需要足够的可视空间,工具栏,不要太拥挤,需要丰富的信息反馈。 临时型软件,希望用户尽可能快地脱离主界面,干该干的事情。例如QQ, Skype, Winamp, 游戏模拟器等。守护型软件,类似守护进程,简单地窗口方便用户随时管理。例如虚拟光驱类的软件。
7. 用户喜欢的状态:流,这是用户在使用产品的时候进入的一种温和的沉醉状态。诀窍是不要过多用提示打扰用户,把工具放在用户的手边,不要让用户等待太久。例如0.1秒的等待,用户会认为是同步的。用户会认为1秒也是可以的。10秒的等待,用户期望有进度条。更长的等待需要有异步,后台进程或线程。
8. 替用户消除额外工作。额外工作是对用户完成目标无关的工作。技巧有,设置不要太多,太复杂,界面复杂的话控件应该放在其他的Tab页里。保存用户的输入状态。不要问用户太多问题,让用户去做,让用户去Undo。
第三部分:交互设计的细节规范
9. 关于磁盘文档:管理磁盘文件不是用户的目标。传统的文件模型强化了实现模型:一份文件在硬盘,另一份数据在内存。应该简化,用“文档”的概念去操作数据。文档应该自动保存。苹果的软件在这方面相当不错,例如itunes。
10. 对话框。对话框的缺陷是无法表现对话框之间的联系。现代对话框设计要尽量避免过多的对话框和难以管理的对话框关系。Mac程序一般在这方面不错,很多软件的第一观感是单窗口的。MDI和SDI,MDI也是比较老式的表达方式,优点是可以方便得在多个文档视图里操作数据,缺点是不同的菜单和过多的对话框,不够直观。来看一个糟糕的例子:
11. 菜单。相比工具栏,菜单有完全的文本按钮名,适合新手用户。由于用户不能非常快地用鼠标操作菜单,最常用的功能最好不要放在菜单里。注意实现的时候菜单的Enable/Disable状态要同步好。
12. 工具栏。工具栏应该持有图标按钮,适合熟练用户快速操作,工具栏不应该用文本按钮,而用Tooltip描述文本。由于菜单和工具栏的不同特性,微软的解决方案是合并两者的长处创建了"Ribbon"这种复杂菜单,而苹果的风格是尽量简化菜单,全局菜单动态加载为当前软件的菜单:
13. 简单控件。普通的动作控件主要包括Button, 菜单项,工具栏图标,HTML超链接。选择控件包括Check Box(复选框),Radio Box(单选按钮),Combo Box(下拉选择项),动态按钮(在同一个位置动态变化的按钮,例如播放器的播放和暂停键)。各有利弊:复选框,单选按钮会占用不少的屏幕空间,下拉选择占用空间少,主流。动态按钮占用控件少,但需要用户花时间熟悉。
14. 列表控件。一些好的交互经验:在每个条目前面加上图标;如果需要多选条目,卷动的时候会乱掉,最好在每个条目前加上复选框;如果条目很多,分页;尽量能让每个条目可编辑。
15. 树形控件。一般树形结构复杂且难以理解。如果不是确定的典型树结构,最好不用这种展示。(iOS用列表,展开项到另一页,不会去在一个页面上绘制复杂的树)
16. 文本控件。一些好的交互经验:不要让文本输入控件在水平方向卷动;在输出的地方允许输入;校验用户输入(可以给一个timer, 在每次输入后检查一下);考虑一些新颖的输入方式,例如需要输入1.0-7.5范围内的浮点值,可以考虑做仪表盘控件滑块。
17. 错误,警告,确认信息。告诉用户错误不是一件好事,更好的做法是深入考虑,在实现阶段让错误无法发生。别太严格,别打断用户的任务,可以给一些声音反馈。普通消费类软件可以考虑用非模式的泡泡提示错误,如果要用错误对话框,那么要礼貌说明错误,有何选择,缺省选择,哪些数据会丢失:
18. 拖放操作。 拖放时画出源对象;目标对象也要绘制一些特殊的状态,支持对拖放位置的鼠标卷动。
19. 鼠标选择和操作。一些好的或规范的用户体验:在对象上单击鼠标为选中;按下鼠标为准备动作,松开鼠标键开始执行;不要让用户在粗略鼠标操作和精细鼠标操作中来回切换,例如点选和卷动混在一起,可以用手势;只使用基本的鼠标键;选择对象可以用一个容限值,3-5个pixel比较合适。
20. 其他细节规范:查询和检索可以使用标签(tag); Undo/Redo非常重要,这个功能可以让用户放心得使用功能而不必担心编辑错误和状态丢失。
这20条基本是这本书浓缩的东西。本文没有展开讨论用户角色和访谈的相关章节,有兴趣的朋友可以关注用户角色的相关部分。