Designing Interfaces中文版摘要

“模式是某个对象的结构和行为上的特点”,这是一本关于界面设计模式的书。为什么界面设计中模式很重要?因为

对设计师而言:

  • 模式捕捉了常用的结构,是关于best practice的总结和沉淀
  • 模式可以快速复用,提供设计的模块化素材

对使用者而言

  • 界面的习惯用法在增多,模式使用得当的设计得让人有熟悉感,易学习

全书的思路大概是:基于对用户的理解而进行模式的探索和积累——内容组织和结构模式——导航模式——布局模式——操作和任务模式——大容量信息展示——少量信息输入模式——大量信息编辑模式——视觉模式

01 用户做些什么

好的界面设计并非始于图片,而是对人的理解:人们喜欢什么,为什么会使用某种特定的软件,他们可能会怎样与之交互。人们使用工具的理由包括:寻找信息或对象,学习知识,进行交易,控制或监视,建造某种东西,和其他人交谈,娱乐等等。

交互设计第一步:找出用户的目的。界面设计真正的艺术在于解决正确的问题。
用户的学习动机:用户愿意花多大的努力来学习使用你的界面?

  • 为熟练用户设计的软件:Photoshop,Dreamweaver、Web服务器的系统管理工具。为有效的操作而不是可学习性进行优化。
  • 中间状态:Office,邮件客户端,网络浏览器,手机应用。大部分情况:人们很快学会了基本知识,达到自己满意的熟练程度,并且在不需要完成更具体的目标时不用进一步学习。
  • 为偶尔使用而设计:设置桌面背景的Win或Mac控件,在线商店的购买页面,安装向导。提供向导的形式,不需要用户特地集中注意力,用户通常没有学习这些界面的动机。

用户的行为模式:

  1. Safe Exploration 安全探索:好的软件鼓励用户尝试不熟悉的操作,不必付出任何代价
  2. Instant Gratification 即使满足:立刻从行为得到结果;为用户提供明显的任务起点
  3. Satisficing 满意即可:当了解所有可能的选择需要付出时间和努力的时候,人们愿意接受“够用”而不是“最佳”的选择(Herbert Simon)。视觉复杂性常常诱使非专家用户采用满意即可的策略,只寻找第一个可行的选择。
  4. Changes in Midstream 中途变卦:让用户可以进行其他选择,并且容易重新进入(reentrance),例如邮件草稿
  5. Deferred Choices 延后选择:不要让用户一开始就面临太多选择,在将来可以回到需要延后填写的字段
  6. Incremental Construction 递增构建:创建某个东西的过程是增量式的,应支持快速的变化和保存,持续告诉用户整个目标对象的样子和它们的行为
  7. Habituation 习惯:外部一致性和内部一致性
  8. Spatial Memory 空间记忆:人们常通过回忆东西或文档的位置来再次找到它们,而不是通过名字,适用于对象数目不太大的情况
  9. Prospective Memory 前瞻记忆:计划在将来完成某事,会设置一些提示物来提醒自己。
  10. Streamlined Repetition 简化重复工作
  11. Keyboard Only 只支持键盘
  12. Other People’s Advice 旁人建议

02 组织内容:信息架构和应用结构

如何组织内容?一是切分内容(Dividing stuff up),想象动作和对象怎样才能和主题最顺畅的结合起来,先考虑内容组织方式和任务流。二是用物理结构把内容用页面、窗口、面板等元素表达出来。

大多数应用程序是根据这些方式来组织的:

  • 对象列表(list of objects),“你将操作什么对象?”,例如满是邮件的收件箱,通过线性模型、二维表格、类别、层次、空间等方式进行组织
  • 动作或任务列表(list of actions),“你想进行什么操作?”,如浏览、购买、出售、注册
  • 某种主题类别的列表(list of subject categories),如健康、科学、技术,适合组织名词对象,不太适合组织动作
  • 工具列表(list of tools),如日历、地址簿、写字板

可以根据软件本质和所在领域/主题、用户领域知识、用户计算机熟练程度、心智模型等来组织。心智模型是用户基于以前的经验或了解,它表示用户对某个东西的认知程度,也就是他认为他已经知道的那部分。

模式:

  • 双面板选择器(Two-Panel Selector):“选择-显示”,适用于展现对象列表、类别列表、动作列表,显示设备需要足够大
  • 画布加调色板工具条(Canvas Plus Palette):图形编辑器,创建新对象,将工具条放在画布左边或上边
  • 单窗口深入(One-Window Drilldown):用单一窗口显示每一页面,适用于显示空间有限或复杂性低的应用
  • 可选视图(Alternative Views):进行结构上的改变,以支持不同目的的操作
  • 向导(Wizard):适用于用户面临又长又复杂而且陌生的任务。但在确定要做什么的时候,决策就是一种负担:不要让我考虑,告诉我接下来做什么就好
  • 需要时显示(Extras on Demand):让80%的使用情形更容易,让20%能达到
  • 有趣的分支(Intriguing Branches):要提供明显的方式回到主要的工作流中
  • 多级帮助(Multi-Level Help)

03 到处走走:导航,路标和找路

导航问题:

  • 现在在哪里
  • 可以去哪里
  • 接下来去哪里
  • 如何去到

常规的路标(Signposts)包括页面和窗口标题,网页标识(logo),其他有标记的设备,Tab,选择指示器。

页面关联模式:

  • 清楚的入口点(Clear Entry Points):只在界面上显示几个入口,让它们面向任务,并具有自描述性。这些入口应该涵盖人们来这里的理由
  • 金字塔(Pyramid):用Back/Next链接来关联一系列页面,由主页链接到所有页面,如幻灯片、向导、书的章节等
  • 全局导航(Global Navigation):一个好的全局导航面板应该是一个良好定义顶视觉框架的组件。用户通常不会注意网站或UI是怎么组织的,而是简单的沿着最近或最明显的路标往前走,知道找到想要的内容为止。
  • 模态面板(Moda Panel)
  • 中心和辐条(Hub and Spoke):把应用顶各个栏目分割成几个迷你的小应用,每个应用都有一个入口,并且可以回到主页。应用相对独立。特别适用于小屏幕设备,常与单窗口深入一起使用

路标模式:

  • 序列地图(Sequence Map):在一系列页面的每一页上,显示所有页面顺序的地图以及当前位置的指示
  • 注释滚动条(Annotated Scrollbar):滚动条滚动的同时作为位置指示器
  • 面包屑层级结构(Breadcrumbs):在层级结构的每一页面,显示所有父级页面的链接
  • 颜色编码的栏目(Color-Coded Sections):不应成为唯一的栏目区分方式

其他

  • 动画转换(Animated Transition):把突然出现或位置移动的转换用动画来显示,保持用户在当前虚拟空间中的位置感,可以跟踪变化顶位置,而不是费力去寻找。300微秒的动画在平滑滚动的时候最理想
  • 逃生舱(Escape Hatch):在限制了导航选择的页面上,提供能离开回到熟悉地方顶按钮或链接

04 组织页面:页面元素的布局

页面布局是一种艺术,它通过操纵用户在页面上的注意力来完成对含义、顺序和交互点的传达。

视觉层次(Visual Hierarchy: What’s important):主次分明,读者能从页面布局推导出信息结构。左上角优先,空白,字体对比,前景和背景颜色对比,位置、对齐、缩进,图形(线条、方框、颜色条)

视觉流(Visual flow: What should I look at next):良好的视觉层次在页面上建立了许多焦点,控制和引导焦点之间的视觉流

分组和对齐(Grouping and alignment: What goes with what):格式塔(Gestalt)心理学:

  • 相邻性:相邻物体产生关联
  • 相似性:想同大小、形状、颜色、方向的物体产生关联
  • 连续性:由对齐或小元素组成的连续线条和曲线
  • 封闭性:简单封闭的区域

模式

整体视觉层次模式:

  • 视觉框架(Visual Framework):使用相同的基本布局、颜色、格式方案来设计页面。颜色、字体、路标、导航、带标题栏目、间隔和对齐、整体布局网格等保持一致。
  • 中央舞台(Center Stage):适用于表格和数据表、表单、网页、图形编辑器等。大小:中央舞台至少有左右边距的两倍宽,上下边距的两倍高;颜色:与周围元素形成对比

内容组块模式:

  • 带标题的栏目(Titled Sections)
  • 卡片堆(Card Stack):把不同栏目的内容组织成几个单独的面板。横向tab页通常只支持6个或更少的卡片,如果一行实在显示不下,就水平滚动而不是两行
  • 可关闭的面板(Closable Panels):在很多可以使用卡片堆模式的地方都可以使用。链接箭头向下表示已经打开,向右表示关闭
  • 可移动的面板(Movable Panels)

视觉流细节:

  • 右对齐/左对齐(Right/Left Alignment)
  • 对角平衡(Diagonal Balance):用不对称的方式布置页面,把视觉重量放在左上角和右下角来使页面保持平衡
  • 属性表(Property Sheet):使用两栏或表单格式的布局告诉用户,一个对象的属性可以在这个页面进行编辑。如果可以实现及时刷新就及时刷新

动态布局模式:

  • 响应式展开(Responsive Disclosure):从最小限度的用户界面开始,在每个步骤显示更多,引导用户完成一系列步骤
  • 响应式允许(Responsive Enabling):当设计响应式允许或响应式展开界面时,要保证只禁止确实不能使用或不应该使用的元素,要避免没有提供任何线索来说明为什么一个元素被禁止,尽量将它们和开关控件放在一起
  • 流式布局(Liquid Layout):当调整窗口大小时,页面元素的大小和位置也相应变化,让页面一直保持填满的状态

05 完成任务:动作和命令

常规动作表现形式

  • 按钮
  • 菜单条:显示一个应用所包含的完整动作集合,并以可预测的方式组织。读屏软件可以访问这些动作
  • 弹出菜单/上下文菜单:右键菜单或者一些动作之后出现,列出有关的动作,而不是所有可能的动作
  • 下拉菜单:下拉控件的典型应用是设置状态,而不是执行动作
  • 工具条
  • 链接:很多web应用的做法是 用按钮强调动作,用链接显示其他内容
  • 动作面板
  • 不可见动作:在对象上双击,键盘动作,托拽,命令行键入

模式:

  • 按钮分组(Button Groups)
  • 动作面板(Action Panel):例如PPT新演示文档面板,可见性和自由展示的需要。形式自由
  • 突出的“完成”按钮(Prominent “Done” Button):把完成一项任务的按钮放在视觉流的末尾,加大尺寸并为它提供合适的标签
  • 智能菜单项(Smart Menu Items):动态改变,在使用前就能明确知道可以进行哪些操作
  • 预览(Preview):提交重量级操作前,显示任何可以告诉他将会发生什么结果的信息
  • 进度提示(Progress Indicator):超过两秒的打断当前任务的操作,可以考虑使用。告诉用户:当前正在做什么;已经完成了多少比例;还需要多少时间才能完成;如何停止这项任务
  • 可取消性(Cancelability):首先找出某种方式让耗时的操作加快速度,至少让它看起来更快一些。在进度指示或显示操作结果的地方提供取消按钮,并对操作即时响应
  • 多极撤销(Multi-Level Undo):人们期望能撤销这些改变:文字输入,数据库事务,图片或画布的修改,布局变化(位置、大小、顺序、分组),文件操作,对象的创建、删除和重组,剪切、复制、粘贴操作
  • 命令历史(Command History):
  • 宏(Macros)

06 显示复杂数据:树、表格及其他信息图形

Information Graphics带着给用户传递数据的目标,对数据进行可视化展示。良好的交互式信息图形为用户提供以下问题的答案:

  • 数据是如何组织的?
  • 它们之间的关系如何?
  • 我能怎样进一步了解这些数据?
  • 我可以重新组织这些数据来换一种方式看待它吗?
  • 只要把我想知道的数据显示就可以了
  • 具体的数据值是多少?

组织模型 Organizational Models

  • 线性模型
  • 表格
  • 层级模型
  • 网络模型(组织模型)
  • 地理模型(空间模型)
  • 其他模型

前摄变量(Preattentive Variables):一些可视化特性是前摄的,在用户有意识的注意他们之前,他们就已经开始传达信息了。包括色调、亮度、颜色饱和度、底纹、位置和对齐、方向、大小、形状。

“Focus plus Context”焦点加上下文:一个好的可视化界面,应该允许用户把注意力集中在一个兴趣点上,同时在它周围显示足够的素材。

导航和浏览:滚动和平移,缩放,打开和关闭兴趣点,深入到兴趣点内部

排序和重新排列:字母顺序、数字顺序、日期或时间顺序、物理地点顺序、根据类别或标记排序、受欢迎程度,用户设计的排列方法,完全随机排列

搜索和过滤:用户意图–把注意力集中到感兴趣的那部分数据,去掉其他数据。高度交互(尽快响应用户请求)、迭代(允许不断细化直到获得想要的结果)、上下文相关(在整个上下文中显示结果)

实际数据:标签,图例,坐标轴、量尺、比例和时间轴,数据提示(datatips),数据刷(data brushing)

模式

一般模式

  • 总揽加细节(Overview Plus Detail):Micro and Macro reading。视野框和详细视图之间的反应最好在十分之一秒以内(标准的直接操作反应时间)
  • 数据提示(Datatips):当鼠标划过兴趣点时,把相关数据显示在工具提示或其他浮动窗口上
  • 动态查询(Dynamic Queries):充满交互性的快速过滤数据的方式
  • 数据刷(Data Brushing):让用户在一个视图里选择数据,然后在另一个视图里同时显示这些数据。选择数据的方式:画方框,鼠标单击,shift+单击,control+单击,在数据点外围画不规则“套索”,通过菜单项、按钮或按键取消选择。
  • 局部缩放(Local Zooming):鼠标移动时页面会变形,鼠标位置的数据项变大

标签和列表模式

  • 斑马行(Row Striping):在表格行上使用两种样式类似但颜色不同的背景,来间隔显示数据
  • 可排序表格(Sortable Table)
  • 跳转到对象(Jump to Item):输入某个对象名称时,直接跳转到该对象并选中
  • 新对象行(New-Item Row):在表格的最后一行创建新的对象

层级结构组织模式

  • 级联列表(Cascading Lists):对每一层级对象的选择,会将其子对象显示在下一层级的列表中
  • 树状表格(Tree Table)

多维数据组织模式

  • 多Y值图表(Multi-Y Graph):将多个图表的曲线一个接一个从上到下摆放在一个面板里,共享y轴
  • 大量小对象(Small Multiples):需要用两个以上的维度或独立变量来显示一个大型数据集
  • 树状地图(Treemap):用不同大小的矩形来表示多维数据或层级结构的数据。关键是确定用那些可视化变量对那些数据属性进行编码.

07 从用户获得输入:表单和控件

控件选择考虑因素:可使用的空间,用户电脑使用经验,用户领域经验,来自其他应用的期望,可用的技术

  • 对象列表LISTS OF ITEMS:选择一个或两个选项;进行n选1(n很小);进行n选1(n很大);从n个选项里选择多个;为输入建立列表;建立有序对象
  • 文字TEXT:输入一行文本;要么输入一行文本,要么从多个选项中选择;输入多行无格式文本;输入多行有格式文本
  • 数字NUMBERS:允许输入任何数字类型;从一个有界范围内输入数字;从一个大范围内输入一个字范围
  • 日期或时间DTES OR TIMES

模式

文本输入框模式:

  • 容错格式(Forgiving Format)
  • 结构化格式(Structured Format):一组格式预定的文本输入框
  • 填空(Fill-in-the-Blanks)
  • 输入提示(Input Hints):在文本框旁边
  • 输入提醒(Input Prompt):预先填写在文本框内进行提示
  • 自动完成(Anto completion)

其他

  • 下拉选择器(Dropdown Chooser)
  • 图示选项(Illstrated Choices)
  • 列表建造器(List Builder):同时显示源列表和目的列表,让用户在他们之间移动项目
  • 良好的默认值(Good Defaults)
  • 错误显示在同一页(Same-Page Error Messages)

08 Builder和编辑器

  • 页面布局和格式化的文本编辑器:word,quark,indesign
  • 图像编辑器:ps,gimp,macpaint
  • 矢量图形编辑器:ppt,illustrator,omnigraffle
  • 网站Builder:dw,golive
  • GUI Builder和代码编辑器:visual studio,eclipse,interface builder
  • 常见的文本编辑器:notepad,emacs,web页面

模式

  • 就地编辑(Edit-in-Place)
  • 智能选择(Smart Selection)
  • 组合选择(Composite Selection)
  • 一次性模态(One-Off Mode):一个模态打开时,执行一次操作,然后自动切换回默认模态或前一个模态
  • 弹性加载模态(Spring-Loaded Mode):通过按住某个键或鼠标进入某种模态(如shift键输入大写字母)
  • 强制调整大小(Constrained Resize)
  • 磁性吸附(Magnetism)
  • 对齐指示线(guides)
  • 粘贴变种(Paste Variations)

09 修饰外观:视觉风格和美感

颜色:

  • 在深色背景上放置浅色前景对象,或者反过来
  • 永远不要采用红色和绿色来区分重要的元素(10%的男性和1%的女性有某种程度的色盲)
  • 不用采用互补色的背景和前景(如红色和蓝色)
  • 冷色调(红、橙、黄、褐、米)和暖色调(蓝、绿、紫、灰、白)
  • 深背景和浅背景:浅背景更常用于计算机界面
  • 强对比和弱对比:强对比会让人觉得紧张、有力和大胆,弱对比会更平滑,更让人放松
  • 饱和色和不饱和色:高饱和度颜色生动、明亮、有力、温暖,但容易使视觉疲劳

排版:

  • 显示器上无衬线(Sans-Serif)字体表现更好,印刷品上衬线字体更具可读性
  • 避免使用斜体、草书和其他装饰性字体
  • 可能的情况下,把大量文本放在中等宽度的区域里,如10~12个英文单词

空间和拥挤 Spaciousness and crowding

曲线和角度 Angles and curves:注意曲线相切的视觉效果,考虑视觉焦点的引导

底纹和旋律 Texture and rhythm

模式

  • 深色背景(Deep Background):用图片或渐变颜色作为页面的背景,这样能可视化的拉开和前景元素的距离。柔和的焦点,避免太多细节,颜色渐变,深度暗示,没有强烈的焦点
  • 少一点色彩,多一些价值(Few Hues, Many Values):选择最多三种主要颜色样式应用在页面上
  • 角落处理(Corner Treatments)
  • 边界回应字体(Borders that Echo Fonts):在描画边界和其他线条的时候,使用设计中某种主要字体所使用的颜色、粗细和曲线
  • 发丝(Hairlines):在边界、水平标尺和Texture上使用一个像素宽的线条

    • 通过为标题加下划线来区分带标题的栏目
    • 用水平分割线、垂直分隔线或封闭的边界来划分不同的内容区域
    • 引导视线穿过一个组合元素的指示线
    • 在不同背景颜色的区域之间,清楚标识它们的边界
    • 用在底纹上,例如格线或一组水平线
    • 用在图标、图片和画出的图形里
    • 用在控件周围的边界上
  • 粗细字体对比(Contrasting Font Weights)

  • 皮肤(Skins)

End

by 00

kidult00 wechat
扫码关注 00 的公众号
如果文章帮您节省时间或者解答疑问,不妨打个赏 :)