Designing Interfaces中文版
Designing Interfaces中文版
Jenifer Tidwell
De Dream' 译
出版时间:2008年01月
“非常优秀!这绝对是UI设计模式领域最好的书,也是近年来交互设计领域最好的新书之一。本书清楚、简洁、引人入胜,既包括基础知识,又讲述了复杂的概念,既适合初学者,又适合专家和研究人员。本书超越了很多琐碎的‘模式语言’——它们提到的是显而易见的各种细小折衷——而本书讲述了交互设计领域许多真正的两难选择。本书不只是收集了一组模式——事实上,这是一本关于现代视觉和交互设计的完整教程。任何设计师都值得一看。”
——Larry Constantine, IDSA,获奖设计师及《Software for User》的作者之一
“本书采纳了界面设计领域的智慧和经验,为所有人提供了值得学习的内容。它已经成了我的设计工具集里不可缺少的一部分。现在,当我设计的时候有四个必备元素:我的手写板、Photoshop、Flash以及这本书。它帮助我组织头脑风暴,并为我的工作提供批评意见。我愿意向任何与创建界面有关的人士推荐这本书。”
——Paul Hoover,微软移动PC部门的产品设计师
每一天,越来越多的人们依赖交互式的软件——系统、Web应用、手机,以及其他数字设备。当这些软件设计良好的时候,人们将更开心、更安全、更有效率。好的界面设计增进了用户忠诚度,减少了客户服务支出,可以帮助产品从竞争对手中脱颖而出。
你想设计出有吸引力、容易使用的界面,但又对自己的能力还不太确定吗?这本书将是你的好帮手。本书从很多各不一样的资源吸取了设计智慧:多年的pre-Web应用设计、最好的交互式网站,以及移动设备(例如手机和iPod)。书中有很多你可以重用的设计想法。你不用再从头开始了。
这些设计想法表现为一组模式——对于常规设计问题的解决方案,并可以根据具体情况进行裁剪。每个模式包含切实可行的设计建议,供你即刻投入使用。每个模式还提供了各种全彩的例子。另外,每一章还讲述了交互设计和视觉设计中的各个关键概念。本书的主题包括:
应用的信息架构
-表单
-导航
-图形编辑器
-页面布局
-颜色,排版,外观和感觉
-地图,图表和表格
本书提供了许多有价值的资源,供交互设计师、软件开发人员、图形设计师,以及任何与创建带用户界面软件相关的人士阅读。当你在寻求解决方案的时候,学习某种特别技术的时候,或者在你只想得到一点有创意的帮助的时候,别忘了打开本书。
JeniferTTidwell是MathWorks公司的一名交互设计师和软件工程师。MathWorks公司位于马萨诸塞州,波士顿附近,是一家技术计算软件提供商。从1997年以来,Jenifer一直在研究用户界面模式,而早在1991年,她就已经开始设计和建造复杂的软件系统和Web界面了。
  1. 前言 II
  2. 01 用户做些什么 2
  3. 达到某种目的的手段 3
  4. 用户研究基础知识 5
  5. 用户的学习动机 7
  6. 模式 10
  7. 1 安全探索 11
  8. 2 即时满足 11
  9. 3 满意即可 11
  10. 4 中途变卦 12
  11. 5 延后选择 13
  12. 6 递增构建 14
  13. 7 习惯 4
  14. 8 空间记忆 15
  15. 9 前瞻记忆 16
  16. 10 简化重复工作 17
  17. 11 只支持键盘 17
  18. 12 旁人建议 18
  19. 02 组织内容:信息架构和应用结构 20
  20. 信息架构基础知识:切分内容 22
  21. 物理结构 28
  22. 模式 30
  23. 13 双面板选择器 31
  24. 把两个相邻的面板放在界面上,在第一个面板上显示一组对象,用户可以从中任意选择,然后在第二个面板上显示选中对象的内容。
  25. 14 画布加调色板工具条 34
  26. 把一个带图标的调色板工具条放在空白的画布旁边;用户单击调色板工具条上的按钮,在画布上创建对象。
  27. 15 单窗口深入 36
  28. 在一个单一的窗口中显示应用程序的每个页面。当用户层层深入一组菜单项或某个对象的详细资料时,用新的页面完全替换当前窗口的内容。
  29. 16 可选视图 39
  30. 让用户在使用默认视图之外,还可以使用另外的可选视图,该可选视图对于默认视图来说,不光是装饰性的区别,还有结构上的区别。
  31. 17 向导 42
  32. 在界面上一步步引导用户按预定的顺序完成任务。
  33. 18 需要时显示 45
  34. 把最重要的内容显示出来,并把其他内容隐藏起来。让用户通过一个简单的操作访问隐藏内容。
  35. 19 有趣的分支 47
  36. 把到有趣内容的链接放在一些意想不到的地方,然后给它一个好玩的标签来吸引那些好奇的用户。
  37. 20 多级帮助 49
  38. 混合使用轻量级和重量级的帮助技术来支持用户的不同需要。
  39. 03 到处走走:导航,路标和找路 54
  40. 不要迷路 55
  41. 导航的代价 56
  42. 模式 63
  43. 21 清楚的入口点 64
  44. 只在界面上显示几个入口;让它们面向任务,并具有自描述性。
  45. 22 全局导航 66
  46. 在每个页面上用一个小栏目来显示一组一致的链接或按钮,让用户可以通过它们来访问网站或应用的核心栏目。
  47. 23 中心和辐条 68
  48. 把应用的各个栏目分割成几个迷你的小应用,每个应用都有一个入口(从主页面),并且可以回到主页面。
  49. 24 金字塔 71
  50. 使用后退/下一个(Back/Next)的链接来关联一系列页面。把这种序列化展现方式和一个主页面结合起来,由该主页面链接到(并链接回)这个序列中所有的页面。
  51. 25 模态面板 74
  52. 只显示一个页面,在用户解决好当前的问题之前没有其他任何导航选择。
  53. 26 序列地图 76
  54. 在一系列页面的每一页上,显示一幅地图,把所有的页面按顺序排序在该地图上,包括一个“你在这里”的位置指示器。
  55. 27 面包屑层级结构 78
  56. 在层级结构的每个页面,显示所有父级页面的链接,向上追溯到主页面为止。
  57. 28 注释滚动条 80
  58. 让滚动条在滚动的同时,还可以作为一种内容的映射机制,或者说,作为一个“你在这里”的位置指示器。
  59. 29 颜色编码的栏目 82
  60. 使用颜色来标记一个应用或网站中某个网页所属的栏目。
  61. 30 动画转换 84
  62. 把一个突然出现或位置移动的转换用动画来显示,让它变得更自然。
  63. 31 逃生舱 86
  64. 在每个限制了导航选择的页面上,放置一个按钮或链接,让用户能明白无误地离开这个页面,回到熟悉的地方。
  65. 04 组织页面:页面元素的布局 88
  66. 页面布局基础知识 89
  67. 模式 99
  68. 32 视觉框架 100
  69. 使用相同的基本布局、颜色、格式方案来设计页面,但是会让设计足够灵活来处理不同的页面内容。
  70. 33 中央舞台 103
  71. 把最重要的UI部分放到页面或窗口最大的子栏目上,把一些辅助工具和内容放置在它周围的小面板上。
  72. 34 带标题的栏目 107
  73. 通过给每个栏目一个醒目的标题来区分不同栏目的内容,然后把它们都排列在页面上。
  74. 35 卡片堆 109
  75. 把不同栏目的内容组织成几个单独的面板或“卡片(Cards)”,并把它们垒成一堆,一次只显示一个栏目;用户可以使用Tab页或其他设备来访问它们。
  76. 36 可关闭的面板 111
  77. 把不同栏目的内容组织成几个面板,让用户每次可以打开和关闭单独的面板而不影响其他面板的显示。
  78. 37 可移动的面板 114
  79. 把页面上的工具或栏目组织到几个不同的面板上,让用户可以移动它们,形成自定义的布局。
  80. 38 右对齐/左对齐 116
  81. 在设计一个两竖栏的表单或表格时,让左边竖栏的标签右对齐,而右边竖栏的元素左对齐。
  82. 39 对角平衡 118
  83. 用一种不对称的方式布置页面,但是,通过把视觉重量放在左上角和右下角来使页面保持平衡。
  84. 40 属性表 120
  85. 使用两栏或表单格式的布局来告诉用户,一个对象的属性可以在这个页面进行编??。
  86. 41 响应式展开 123
  87. 从一个最小限度的用户界面开始,通过在每个步骤显示更多的界面,引导用户完成一系列步骤。
  88. 42 响应式允许 125
  89. 从一个基本上被禁止的UI开始,通过在每个步骤允许更多的用户界面部分有效,来引导用户完成一系列步骤。
  90. 43 流式布局 128
  91. 当用户调整窗口大小的时候,相应地调整页面元素的大小和位置,让页面一直保持填满的状态。
  92. 05 完成任务:动作和命令 130
  93. 扩展边界 133
  94. 模式 136
  95. 44 按钮分组 137
  96. 把相关的动作组织成一组按钮,彼此水平对齐或垂直对齐。如果超过三个或四个动作,那么可以多分几组。
  97. 45 动作面板 140
  98. 不使用菜单,而是把大量相关的动作放在一个UI面板上,该面板可以有丰富的组织方式,并且通常是可见的。
  99. 46 突出的“完成”按钮 144
  100. 把完成一项任务的按钮放在视觉流的末尾;加大它的尺寸并为它提供一个合适的标签。
  101. 47 智能菜单项 146
  102. 动态改变菜单的标题,以便在调用之前明确地知道它的功能。
  103. 48 预览 147
  104. 在用户执行某个动作之前,为其显示执行结果的预览或小结。
  105. 49 进度提示 149
  106. 在那些需要很长时间才能完成的操作中为用户显示该操作当前的进度。
  107. 50 可取消性 151
  108. 提供某种方式快速取消一个耗费时间的操作,而没有什么负面的影响。
  109. 51 多级撤销 153
  110. 提供一种方式可以很容易撤销用户执行的一系列操作。
  111. 52 命令历史 156
  112. 当用户执行某些操作时,保存一份可见的记录,记录做了什么操作、作用在什么对象上,以及执行操作的时间。
  113. 53 宏 158
  114. 宏是一个操作,但是在该操作里组合了其他一些小的操作。用户可以通过把一系列操作放在一起来创建一个宏命令。
  115. 06 显示复杂数据:树、表格及其他信息图形 160
  116. 信息图形基础 161
  117. 模式 173
  118. 54 总览加细节 174
  119. 在放大的详细视图旁边放置一个总览图。当用户在总览图上圈出一个视野的时候,详细视图里将显示该视野范围里的内容。
  120. 55 数据提示 176
  121. 当鼠标滑过图形上一个兴趣点时,把该点的数据显示在一个工具提示或其他某种浮动窗口上。
  122. 56 动态查询 178
  123. 提供一些方式来快速过滤数据,并让这种过滤充满交互性。采用容易使用的标准控件,例如滑块和复选框,来定义数据需要显示的范围。只要用户调整了这些控件的值,显示结果也随之调整。
  124. 57 数据刷 181
  125. 让用户在一个视图里选择数据,然后在另一个视图里同时显示这些选中的数据。
  126. 58 局部缩放 184
  127. 在一个密集的页面上显示所有数据,其中有很多小个的数据项目。当鼠标移动时页面会变形,鼠标位置的数据项变大,变得可以阅读。
  128. 59 斑马行 187
  129. 在表格行上使用两种样式类似但颜色不同的背景,来间隔显示数据。
  130. 60 可排序表格 189
  131. 在一个表格里显示数据,并让用户根据表格列的内容对表格进行排序。
  132. 61 跳转到对象 191
  133. 当用户输入某个对象的名称时,直接跳转到该对象并选中它。
  134. 62 新对象行 193
  135. 在表格的最后一行创建新的对象。
  136. 63 级联列表 195
  137. 通过在每个层级上显示一个可以选择的列表来表示层级结构。对任何对象的选择都会将其子对象显示在下一个列表中。
  138. 64 树状表格 197
  139. 把层级结构的数据放到各个列里,就像表格那样,并在第一列使用一种缩进的大纲形式来表现树结构。
  140. 65 多Y值图表 198
  141. 把多个图表的线段堆积起来,一个接一个地从上到下摆放在相同的面板里,让它们共享同一个X轴。
  142. 66 大量小对象 200
  143. 用两三个维度创建很多小的数据图片。并按一到两个附加数据维度平铺到整个页面,要么平铺成连环画式的长条,要么平铺成二维矩阵。
  144. 67 树状地图 203
  145. 用不同大小的矩形来表示多维数据和/或层级结构的数据。可以把这些矩形级联起来显示其层次结构,并用不同的颜色或给它们加上标签来显示更多的变量。
  146. 07 从用户获得输入:表单和控件 206
  147. 表单设计基础 207
  148. 控件选择 209
  149. 模式 218
  150. 68 容错格式 219
  151. 允许用户以多种格式和语法输入文本,并让应用系统具有智能解释文本的能力。
  152. 69 结构化的格式 220
  153. 和前面模式只使用一个文本输入框不同,这里使用一组文本输入框来反映所请求数据的格式。
  154. 70 填空 222
  155. 把一个或多个数据字段设置成散列的句子或短语形式,把那些输入变成“空白区域”,以便用户填写。
  156. 71 输入提示 224
  157. 在一个空白的文本输入框旁边,用一句话或一个例子来解释需要输入什么样的数据。
  158. 72 输入提醒 225
  159. 用提示信息预先填写文本输入框或下??列表框,来告诉用户该怎么做/输入。
  160. 73 自动完成 227
  161. 当用户在文本输入框内部输入的时候,猜测可能的答案并在合适的时候自动把答案填写到输入框里。
  162. 74 下拉选择器 230
  163. 通过使用下拉列表框或弹出面板,把菜单条的概念扩展成一个更加复杂的选择界面。
  164. 75 图示选项 233
  165. 用图片而不是文字(或在文字上附加文字)来显示可选项。
  166. 76 列表建造器 235
  167. 在同一个页面上显示源列表和目的列表,让用户在它们之间移动项目。
  168. 77 良好的默认值 237
  169. 无论在什么地方,只要合适,就预先为用户填写你猜测他们想要的输入值到各个字段中。
  170. 78 错误显示在同一页 239
  171. 把表单的错误信息和表单放在一起,直接放在页面上,在页面顶端标记错误信息。如果可能的话,在产生错误的控件旁边进行提示。
  172. 08 Builder和编辑器 242
  173. 编辑器设计基础 244
  174. 模式 248
  175. 79 就地编辑 249
  176. 使用小的动态文本编辑器,让用户可以“就地”修改文本:把这个编辑器直接放在原始文本的上面,而不是使用一个单独的面板或对话框。
  177. 80 智能选择 251
  178. 使软件足够聪明,自动选择一组相关对象,而不是让用户自己去选择。
  179. 81 组合选择 253
  180. 在不同的屏幕区域使用不同的操作——或鼠标单击,例如组合对象的边缘相对它的内部,来确定应该选择这个组合对象本身还是允许它所包含的那些对象也被选中。
  181. 82 一次性模态 255
  182. 当一个模态打开的时候,执行一次操作。然后自动切换回默认模态或前一个模态。
  183. 83 弹性加载模态 257
  184. 让用户通过按住某个键或鼠标按钮来进入某种模态。当用户释放它时,离开这个模态并回到之前的模态。
  185. 84 强制调整大小 259
  186. 为调整大小模态提供不同的行为,例如保持??始比例,以便在特别的环境下使用。
  187. 85 磁性吸附 261
  188. 让对象具有“磁性”,可以吸住靠近它们的其他对象。当用户拖动一个对象到这种“磁性”目标对象附近时,它就会贴在目标对象上。
  189. 86 对齐指示线 263
  190. 提供竖直方向和水平方向的参考线,帮助用户对齐各个对象。
  191. 87 粘贴变种 266
  192. 在标准的粘贴操作之外,另外提供专门的粘贴功能。
  193. 09 修饰外观:视觉风格和美感 268
  194. 内容相同,风格不同 270
  195. 视觉设计基础 279
  196. 这对桌面应用来说意味着什么 287
  197. 模式 290
  198. 88 深色背景 291
  199. 用图片或渐变颜色作为页面的背景,这样能可视化地??开和前景元素的距离。
  200. 89 少一点色彩,多一些价值 294
  201. 选择一种、两种,最多三种主要颜色样式应用在页面上。通过选择这很少几种颜色的混合值(不同亮度)来建立一个颜色板。
  202. 90 角落处理 297
  203. 不是使用普通的直角,而是使用斜纹、曲线或镂空来装饰界面上的方框角落。让这些角落处理和整个界面保持一致。
  204. 91 边界回应字体 300
  205. 在描画边界和其他线条的时候,使用设计中某种主要字体所使用的颜色、粗细和曲线。
  206. 92 发丝 303
  207. 在边界、水平标尺和Texture上使用的一个像素宽的线条。
  208. 93 粗细字体对比 306
  209. 使用两种字体互相对照——一种细一些,颜色浅一些;另一种粗一点,颜色深一点——来区别不同级别的信息,并丰富视觉效果。
  210. 94 皮肤 308
  211. 为你的应用提供开放的外观和感觉架构,让用户可以设计他们自己的图形和风格。
  212. 参考文献 312
  213. 索引 318
书名:Designing Interfaces中文版
作者:Jenifer Tidwell
译者:De Dream' 译
出版时间:2008年01月
书号:978-7-121-04797-8
原版书出版商:O'Reilly Media
Jenifer Tidwell
 
Jenifer Tidwell是技术计算软件厂商MathWorks公司的一名交互设计师和软件工程师。她擅长设计和开发数据分析及可视化工具,最近正在为MATLAB的数据工具进行新的设计。全世界有很多研究人员、学生和工程师使用MATLAB来开发汽车、飞机、蛋白质和宇宙理论等。她在网站设计方面也很有名,很早的时候就是一名RIA(Rich Internet Application)技术的倡导者,并在2000年初协助设计和开发了Curl。
Jenifer在麻省理工学院接受技术教育,并在马萨诸塞州艺术学院学习设计,但她一直没有停止学习。她从1997年开始研究用户界面模式。Jenifer热爱摄影和写作,并热衷于在新英格兰地区进行户外活动――骑车、划船、滑雪、攀岩。她的个人网站地址是http://jtidwell.net。
 
 
O'Reilly特有的封面设计风格,主要来自读者的建议、我们自己的实验及发行渠道的反馈。唯有与众不同的封面,才能突显我们对技术主题独树一帜的阐述风格,避免读者被枯燥的主题压得喘不过气。
本书封面上的动物叫做鸳鸯(Mandarin duck,学名Aix Galericulata),是鸭科中最漂亮的鸟种之一,原产地在中国,现在生活在俄罗斯东南部、中国北部、日本、英格兰南部和西伯利亚地区。
鸳鸯的雄鸟有着华美艳丽的羽毛、色彩斑斓带着金属光泽的羽冠、栗色的两颊,长长的白色眉纹从鲜红的鸟啄一直延伸到脑后。雌鸟的羽毛没有这么鲜艳,呈灰色、白色、褐色或绿褐色,颈部前面有白色的羽毛。
它们生活在靠近河流和湖泊的森林地区,属于杂食鸟类,所吃的食物随季节变化:在秋季进食果实和谷物,在春季进食昆虫、蜗牛、水生植物,在夏季进食蠕虫、蚱蜢,青蛙和一些软体动物。
鸳鸯的求偶以一种复杂而精细的求爱舞蹈开始,包括摇摆运动、模仿喝水的姿势,还有梳理羽毛等动作。每一只雄鸟都要互相比试来赢得雌鸟的喜爱,并由雌鸟来决定最后的对象。鸳鸯的幼鸟跟随母亲生活,因为幼鸟的猎食者包括水獭、貉、貂、臭鼬、鹰和草蛇等,雌鸟常常会假装受伤引开这些敌人的注意力,从而来保护幼鸟。
鸳鸯并不是濒危动物,但它们的生存也会受到威胁,伐木工人不断侵蚀它们的地盘,猎人和偷猎者常常觊觎它们的羽毛。它们的肉味道不好,所以人类并不把它们当作食物来捕杀。