出版社: 电子工业出版社
原作名: Designing Interfaces: Patterns for Effective Interaction Design
译者: 蒋芳
出版年: 2013-9-1
页数: 514
定价: CNY 119.00
装帧: 平装
ISBN: 9787121204067
内容简介 · · · · · ·
模式意味着重用。
好的模式建立在对人与事物的深刻认知之上。
本书开篇即总结了“与人有关”的各类问题,为读者提供了界面设计总体思路上的指引,帮助读者举一反三。
接下来,本书收集并分析了很多常用的界面设计模式,帮助读者理解在实现级别的各种常用解决方案,将它们灵活地运用到自己的设计中。
同时,随着网络和技术的不断发展,本书在第1 版的基础上,更新了几乎所有的模式示例和说明,并新增了两章全新的移动应用和社交媒体设计模式,帮助读者在这两个新的领域从更高的起点开始设计。
有效的界面设计,从本书开始。
作者简介 · · · · · ·
Jenifer Tidwell是一位交互设计、信息架构和设计前期分析方面的咨询师和作家。她曾经为很多著名的公司(如Google和MathWorks)设计和建立用户界面。
目录 · · · · · ·
前言 .................................................................................... xvi
第1章 用户做些什么 .........................................................................1
1.1 达到某种目的的手段 ....................................................................................2
1.2 用户研究基础知识 ........................................................................................4
1.3 用户的学习动机 ............................................................................................6
· · · · · · (更多)
前言 .................................................................................... xvi
第1章 用户做些什么 .........................................................................1
1.1 达到某种目的的手段 ....................................................................................2
1.2 用户研究基础知识 ........................................................................................4
1.3 用户的学习动机 ............................................................................................6
1.4 模式 ................................................................................................................8
安全探索 ........................................................................................................9
即时满足 ......................................................................................................10
满意即可 ......................................................................................................10
中途变卦 ......................................................................................................11
延后选择 ......................................................................................................12
递增构建 ......................................................................................................13
习惯 ..............................................................................................................14
小片时间 ......................................................................................................15
空间记忆 ......................................................................................................16
前瞻记忆 ......................................................................................................17
简化重复工作 ..............................................................................................19
只支持键盘 ..................................................................................................20
旁人建议 ......................................................................................................21
个性化推荐 ..................................................................................................22
第2章 组织内容:信息架构和应用结构 ..........................................23
2.1 从全局出发 ..................................................................................................23
2.2 模式 ..............................................................................................................27
主题、搜索和浏览 ......................................................................................28
新闻流 ..........................................................................................................32
图片管理器 ..................................................................................................38
信息板 ..........................................................................................................43
画布加调色板工具条 ..................................................................................48
向导 ..............................................................................................................52
设置编辑器 ..................................................................................................57
可选视图 ......................................................................................................62
多工作空间 ..................................................................................................66
多级帮助 ......................................................................................................69
第3章 到处走走:导航、路标和找路 ..............................................75
3.1 不要迷路 ......................................................................................................75
3.2 导航的代价 ..................................................................................................77
3.3 常见的导航模型 ..........................................................................................78
3.4 网站设计习惯用法 ......................................................................................83
3.5 模式 ..............................................................................................................84
清楚的入口点 .............................................................................................85
菜单页面 ......................................................................................................88
金字塔 ..........................................................................................................92
模态面板 ......................................................................................................95
深度链接状态 ..............................................................................................98
逃生舱 ........................................................................................................101
胖菜单 .......................................................................................................104
页脚站点地图 ............................................................................................108
登录工具 ....................................................................................................113
序列地图 ....................................................................................................116
面包屑层级结构 ........................................................................................119
注释滚动条 ................................................................................................122
动画转换 ....................................................................................................124
第4章 组织页面:页面元素的布局 ...............................................127
4.1 页面布局基础知识 ....................................................................................127
4.2 模式 ............................................................................................................136
视觉框架 ....................................................................................................138
中央舞台 ....................................................................................................142
对等网格 ....................................................................................................146
带标题的区域 ............................................................................................149
模态Tab ......................................................................................................152
手风琴模式 ................................................................................................156
可收起面板 ................................................................................................160
可移动的面板 ............................................................................................165
右/左对齐 ...................................................................................................170
对角线平衡 ................................................................................................173
响应式展开 ................................................................................................175
响应式允许 ................................................................................................179
流体布局 ....................................................................................................183
第5章 列表 ..................................................................................187
5.1 列表的使用场景 ........................................................................................187
5.2 回到信息架构 ............................................................................................188
5.3 一些解决方案 ............................................................................................190
5.4 模式 ............................................................................................................193
双面板选择器 ............................................................................................194
单窗口深入 ................................................................................................198
列表嵌入 ....................................................................................................202
缩略图网格 ................................................................................................206
传送带 ........................................................................................................211
斑马行 ........................................................................................................215
分页 ............................................................................................................219
条目跳转 ....................................................................................................223
字母表滚动条 ............................................................................................225
级联列表 ....................................................................................................227
树表 ............................................................................................................229
新列表行 ....................................................................................................231
第6章 完成任务:动作与命令 ......................................................234
6.1 扩展边界 ....................................................................................................237
6.2 模式 ............................................................................................................239
按钮组 ........................................................................................................241
悬浮工具 ....................................................................................................244
动作面板 ....................................................................................................247
突出“完成”按钮 ....................................................................................251
智能菜单项 ................................................................................................255
预览 ............................................................................................................257
进度提示 ....................................................................................................259
可取消性 ....................................................................................................262
多级撤销 ....................................................................................................265
命令历史 ....................................................................................................269
宏 ................................................................................................................271
第7章 显示复杂数据:树、表格及其他信息图形 ..........................275
7.1 信息图形基础 ............................................................................................275
7.2 模式 ............................................................................................................289
总览加细节 ................................................................................................290
数据提示 ....................................................................................................293
数据焦点 ....................................................................................................297
动态查询 ....................................................................................................302
数据刷 ........................................................................................................306
局部缩放 ....................................................................................................310
可排序表格 ................................................................................................314
径向表 ........................................................................................................317
多Y值图 .....................................................................................................322
多个小对象 ................................................................................................325
树状地图 ....................................................................................................330
第8章 获取用户输入:表单与控件 ...............................................335
8.1 表单设计基础 ............................................................................................335
8.2 控件选择 ....................................................................................................338
8.3 模式 ............................................................................................................350
容错格式 ....................................................................................................351
结构化的格式 ............................................................................................354
填空 ............................................................................................................356
输入提示 ....................................................................................................358
输入提醒 ....................................................................................................361
密码强度计 ................................................................................................364
自动完成 ....................................................................................................367
下拉选择器 ................................................................................................372
列表构造器 ................................................................................................375
良好的默认值 ............................................................................................377
同页错误信息 ............................................................................................379
第9章 利用社交媒体 .....................................................................384
9.1 本章不涉及的内容 ....................................................................................385
9.2 社交媒体的基础 ........................................................................................385
9.3 模式 ............................................................................................................388
编辑混合 ....................................................................................................389
个人声音 ....................................................................................................393
转帖和评论 ................................................................................................397
发起会话 ....................................................................................................401
倒置纳米金字塔 ........................................................................................403
择时策略 ....................................................................................................406
专用流 ........................................................................................................409
社交链接 ....................................................................................................413
共享组件 ....................................................................................................416
新闻框 ........................................................................................................420
内容列表区域 ............................................................................................424
新近谈话 ....................................................................................................428
第10章 迈向移动设计 ...................................................................431
10.1 移动设计的挑战 ......................................................................................432
10.2 模式 ..........................................................................................................437
纵向堆叠 ..................................................................................................439
胶片 ..........................................................................................................442
触摸工具 ..................................................................................................444
底部导航 ..................................................................................................446
小图片加文字的列表 ..............................................................................449
无限列表 ..................................................................................................452
宽边界 ......................................................................................................454
文本清除按钮 ..........................................................................................456
加载提示 ..................................................................................................458
应用互联 ..................................................................................................460
精简品牌形象 ..........................................................................................463
第11章 修饰外观:视觉风格和美感 ............................................467
11.1 相同的内容、不同的风格 ......................................................................469
11.2 视觉设计基础 ..........................................................................................478
11.3 这对桌面应用来说意味着什么 ..............................................................486
11.4 模式 ..........................................................................................................488
深色背景 ..................................................................................................489
少一点颜色、多一些价值 ......................................................................493
角落处理 ..................................................................................................497
边界回应字体 ..........................................................................................499
发丝 ..........................................................................................................502
粗细字体对比 ..........................................................................................505
皮肤和主题 ..............................................................................................508
参考文献 .......................................................................................511
· · · · · · (收起)
"界面设计模式(第2版)"试读 · · · · · ·
喜欢读"界面设计模式(第2版)"的人也喜欢 · · · · · ·
界面设计模式(第2版)的话题 · · · · · · ( 全部 条 )



界面设计模式(第2版)的书评 · · · · · · ( 全部 28 条 )



> 更多书评 28篇
-
SSS级の炼乳茶 (的心理活动。)
页面是为了完成这件事: 1.显示一个对象 2.显示一个列表或一组对象 3.为创建某个对象提供工具 4.辅助完成一项任务 模式&技术分类: 1.可选视图模式 2.多工作空间模式 3.深度链接状态模式 4.共享组件模式 5.移动应用模式 模式&容器: 1.主题、搜索和浏览模式: -在一个固定位置方式搜索框。 -为专题文章、特殊商品、视频设定中央舞台模式。双面板选择模式:特色类别。 -面包屑层级结构模式:不同类别和子类别。 2.新闻流... (3回应)2017-01-27 16:29 1人喜欢
页面是为了完成这件事: 1.显示一个对象 2.显示一个列表或一组对象 3.为创建某个对象提供工具 4.辅助完成一项任务
信息结构图模式&技术分类: 1.可选视图模式 2.多工作空间模式 3.深度链接状态模式 4.共享组件模式 5.移动应用模式 模式&容器: 1.主题、搜索和浏览模式: -在一个固定位置方式搜索框。 -为专题文章、特殊商品、视频设定中央舞台模式。双面板选择模式:特色类别。 -面包屑层级结构模式:不同类别和子类别。 2.新闻流: -每条信息包括:什么、谁、什么时候、什么地方(eg:标题、摘要、源内容链接、相对时间戳) 3.图片管理器: -缩略图网格 -单个元素视图 -浏览界面 组件: -双面板选择器 -Tabs和可收起的面板 -树或者大纲 -共享组件 -社交评论和讨论 -单窗口深入 -金字塔 -按钮键 -只支持键盘 -搜索框 4.信息版: -单窗口深入模式 -数据提示(图形) -斑马行模式(多栏) 元素: -带标题区域 -可移动面板 -列表和表格 -斑马行 -信息图形 -tab和可收起面板 5.画布加调色板工具条 -一次性模态 -弹性加载模态 6.向导 -对任务进行分解 -物理结构: ①双面板选择器模式 ②单个页面:带标题的区域、响应式允许、响应式展开 7.设置编辑器 -首先“好找”, -其次“分页分组”, -再次“显示方式”:tab、双面板选择器、单窗口深入、页面菜单, -最后“变更生效”。 8.可选视图 ·用户对于速度、可视化风格和其他因素的偏好不同, ·用户临时需要用不同方式查看 ·用户在需要在编辑任务进程的过程中看到任务结果的展示 -放置“切换”符于页面醒目位置,提供用户不同视图选择 9.多工作空间 -利用多个tab -利用操作系统中的多个窗口 -利用一个窗口中的多个横栏或者多个列 -分割窗口,并且可以自定义调整分割线 10.多级帮助 -页面直接的输入提示或输入提醒 -工具提示 -悬浮工具模式 -可收起面板 -另一窗口显示的帮助 -“实时”技术支持通讯 -非正式的社区支持
3回应 2017-01-27 16:29
-
1. Safe Exploration 2. Instant Gratification 3. Satisficing 4. Changes in Midstream 5. Deferred Choices 6. Incremental Construction 7. Habituation 8. Microbreaks 9. Spatial Memory 10. Prospective Memory 11. Streamlined Repetition 12. Keyboard Only 13. Other People's Advice 14. Personal Recommendations
2015-06-06 08:58
1. Safe Exploration 2. Instant Gratification 3. Satisficing 4. Changes in Midstream 5. Deferred Choices 6. Incremental Construction 7. Habituation 8. Microbreaks 9. Spatial Memory 10. Prospective Memory 11. Streamlined Repetition 12. Keyboard Only 13. Other People's Advice 14. Personal Recommendations
回应 2015-06-06 08:58 -
飞然.金猫花儿 (你我安好,便是晴天)
为用户争取更多的利益: 1.安全探索:不会产生可怕的后果; 2.即时满足:立刻看到结果; 3.满意即可:满意+够用(不是最佳); 举例:一点点的产品改进,其实并不值得用户付出更多的时间和精力成本。不成熟的软件(比如Photoshop的升级),往往会做出如此的选择,成熟的软件是实用交互上的细化,并非大动手脚。 这里会有一个比较突出的矛盾,很多时候产品改版并非是用户本身出发,而是从业务战略出发,这种情况非常多,战略是老板的...2014-07-10 09:53
为用户争取更多的利益: 1.安全探索:不会产生可怕的后果; 2.即时满足:立刻看到结果; 3.满意即可:满意+够用(不是最佳); 举例:一点点的产品改进,其实并不值得用户付出更多的时间和精力成本。不成熟的软件(比如Photoshop的升级),往往会做出如此的选择,成熟的软件是实用交互上的细化,并非大动手脚。 这里会有一个比较突出的矛盾,很多时候产品改版并非是用户本身出发,而是从业务战略出发,这种情况非常多,战略是老板的决策,执行和体验平衡是设计人员的职责,需要找到更好的平衡办法---此处希望有人可以讨论; 4.中途变卦:a.为中途变卦提供机会;b.便捷的方式再续前缘--“重新进入”; 5.延后选择:用户喜欢轻便、简单,复杂的东西就留到后面吧,当然可以做好口子的预留; 6.递增构建:便于小修小补,即时反馈; 7.习惯:用户习惯的一致性,在任何产品中应该得到延续;比如:返回按钮、复制粘贴、移动设备的手势、删除、确认取消等; 8.小片时间:便于用户进入和抽身,简单、直接,无身份识别;特别适合移动应用;比如:收邮件、twitter、新闻、小视频、小游戏、在线书籍等; 9.空间记忆:位子记忆优于名字,用户的空间依赖感很强;空间记忆同习惯关系密切; 10.前瞻记忆:用户在开启某个任务,没有完成的情况下,需要提醒自己,日后来处理; 这点在现实生活中比较常见,我把书跟钥匙放一起,出门就不会忘记拿; outlook标红可以提醒我这个是重要的,或者需要紧急处理的; 浏览器保存日后还要看的网站; 11.简化重复工作:将用户从枯燥中释放出来,避免重复劳动,无聊也会出错; axure软件中的“find all”; word的"全部替换",复制——粘贴; photoshop的“动作"; 12.只支持键盘:有的用户很懒,或者在某些时候很懒,支持快捷键吧; 13.旁人建议:社会动物、人性的体现;请重视并给与别人的建议展示; 14.个性化推荐:很多时候人们分享的言外之意”我认为这个不错---它代表了我的一部分个人特质“,其追随者便获得了信息,他们相信发布者;病毒化传播、网络社交的雪球就是这样子越来越大。
回应 2014-07-10 09:53
-
第 2 版介绍。 前言 第 1 章用户做些什么 1.1 达到某种目的的手段 1.2 用户研究基础知识 直接观察 案例研究 调查问卷 人物角色 1.3 用户的学习动机 1.4 模式 1.4.1 安全探索 1.4.2 即时满足 1.4.3 满意即可 1.4.4 中途变卦 1.4.5 延后选择 1.4.6 递增构建 1.4.7 习惯 1.4.8 小片时间 1.4.9 空间记忆 1.4.10 前瞻记忆 1.4.11 简化重复工作 1.4.12 只支持键盘 1.4.13 旁人建议 1.4.14 个性化推荐。 第 2 章组织内容:信息架构和应...
2019-06-03 17:12
- 第 2 版介绍。
- 前言
- 第 1 章用户做些什么
- 1.1 达到某种目的的手段
- 1.2 用户研究基础知识
- 直接观察
- 案例研究
- 调查问卷
- 人物角色
- 1.3 用户的学习动机
- 1.4 模式
- 1.4.1 安全探索
- 1.4.2 即时满足
- 1.4.3 满意即可
- 1.4.4 中途变卦
- 1.4.5 延后选择
- 1.4.6 递增构建
- 1.4.7 习惯
- 1.4.8 小片时间
- 1.4.9 空间记忆
- 1.4.10 前瞻记忆
- 1.4.11 简化重复工作
- 1.4.12 只支持键盘
- 1.4.13 旁人建议
- 1.4.14 个性化推荐。
- 第 2 章组织内容:信息架构和应用结构
- 2.1 从全局出发。
- 2.1.1. 显示一个对象,例如地图、书籍、视频,或者游戏。
- 1 可选视图模式(Alternative Views),可以用两种或两种以上的方式来显示同一内容。
- 2 ・多工作空间模式(Many Workspaces),用在人们在同一时间想看到多个地点、多个状态,或多篇文档的时候。
- 3 深度链接状态模式(Deep-linked State),见第 3 章,用这个模式,用户可以把内容的特定地点或状态保存起来,并可以在将来回访或把链接地址发送给别人。
- 4 共享组件模式(Sharing Widget)和其他社交模式,参见第 9 章。
- 5 第 10 章中也介绍了一些移动应用模式,如果需要设计移动设备上的内容,可以参考它们。
- 2.1.2. 显示一个列表或一组对象。
- 2.1.3. 为创建某个对象提供工具。
- 2.1.4. 辅助完成一项任务。
- 2.1.1. 显示一个对象,例如地图、书籍、视频,或者游戏。
- 2.2 模式
- 2.2.1 主题、搜索和浏览
- 它是什么
- 什么时候使用
- 为什么使用
- 如何使用
- 5.示例
- 2.2.2 新闻流
- 它是什么
- 什么时候使用
- 为什么使用
- 如何使用
- 示例
- 2.2.3 图片管理器
- 它是什么
- 什么时候使用
- 为什么使用
- 如何使用
- 示例
- 2.2.4 信息板
- 它是什么
- 什么时候使用
- 为什么使用
- 如何使用
- 示例
- 2.2.5 画布加调色板工具条
- 它是什么
- 什么时候使用
- 为什么使用
- 如何使用
- 示例
- 2.2.6 向导
- 它是什么
- 什么时候使用
- 为什么使用
- 如何使用
- 示例
- 2.2.7 设置编辑器
- 它是什么
- 什么时候使用
- 为什么使用
- 如何使用
- 示例
- 2.2.8 可选视图
- 它是什么
- 什么时候使用
- 为什么使用
- 如何使用
- 示例
- 2.2.9 多工作空间
- 它是什么
- 什么时候使用
- 为什么使用
- 如何使用
- 示例
- 2.2.10 多级帮助
- 它是什么
- 什么时候使用
- 为什么使用
- 如何使用
- 示例
- 2.2.1 主题、搜索和浏览
- 2.1 从全局出发。
第 2 版介绍。
前言
第 1 章用户做些什么
了解用户,因为他们不是你!
1.1 达到某种目的的手段
每个人在使用工具、软件或别的什么的时候,总有一个理由,
设计界面的第一步,找出用户目标。表单和原型之类的从来不是本质。
这和有名的根本原因分析(root-cause analysis)技术的原理一样。当然,根本原因分析是一种查找组织失败原因的工具,而这里,你使用“五个为什么”(多几个少几个都可以)来理解用户的日常行为和功能请求。
1.2 用户研究基础知识
直接观察
案例研究
调查问卷
人物角色
1.3 用户的学习动机
?
1.4 模式
- 安全探索(Safe Exploration)
- 即时满足(Instant Gratifcation)
- 满意即可(Satisficing)
- 中途变卦(Changes in Midstream
- 延后选择(Deferred Choices
- 递增构建(Incremental Construction
- 习惯(Habituation)
- 小片时间(Microbreaks)
- 空间记忆(Spatial Memory)
- 前瞻记忆(Prospective Memory)
- 简化重复工作(Streamlined Repetition)
- 只支持键盘(Keyboard Only)
- 旁人建议(Other People's Advice)
- 个性化推荐(Personal Recommendations)
1.4.1 安全探索
人们在网络中探索的时候,浏览寻找新内容,应该有可以撤销,安全警报之类的保护。
1.4.2 即时满足
人们喜欢立刻从他们的行为看到结果一一这是人类的天性。如果一个人开始使用一个软件,然后在最初的几秒内就得到了成功的体验,他会觉得很开心。他很可能会继续用它,哪怕将来它的难度会增加。和要花上一些时间来弄清楚状况相比,前一种情况会让他对这个软件更有信心,对他自己也更有信心。
1.4.3 满意即可
术语“满意即可”(Satisficing)是“满意”(Satisfying)加上“够用”(Sufficing)的结合体是在 1957 年由社会科学家赫尔伯特・西蒙(Herbert Simon)提出的,他用这个词来形容人们在各种经济和社会状况下的行为。当了解所有可能的选择需要付出时间和努力的时候,人们愿意接受“够用”而不是“最佳”的选择。
1.4.4 中途变卦
应该为人们中途变卦提供机会。让他们可以进行其他选择。
1.4.5 延后选择
例如,一些 Web 论坛有冗长而复杂的用户注册过程。显示名称、E-mail 地址、隐私设置头像、个人描述等,这个清单还可以延续很长。“我只想发个帖而已”,用户痛苦而又委屈为什么不跳过这些问题,只回答最少的必要问题,然后让用户将来继续填写(如果还有将来的话)其他的部分?否则他可能得花上半个小时来回答长篇累牍的问题,找到合适的头像。
【等会儿再来做。】
1 不要让用户在一开始就面临太多需要提前做出的选择。
2 在必须使用的表单上,清楚地标注必须填写的字段,同时不要让这些必须填写的字段数目太多。让用户可以跳过可选问题,继续进行
3 有时候你可以把少数几个重要的问题或选项从其他选项中挑出来。显示这份简短的列表,把详细的问题列表隐藏起来。
4 尽可能使用良好的默认值模式(Good Defaults)(第 8 章),为用户提供几个合理的默认答案来开始接下来的过程。但是要记住,预先填写的答案仍然需要用户的关注,以防他们想要改变这些默认值。这里仍然需要付出一些小小的代价。
5 让用户将来可以回到需要延后填写的字段,并且,要让这些字段出现在显眼的位置有些对话框会给用户显示一段短的提示,例如“你将来可以单击“编辑项目”这个按钮来改变它”。一些网站把用户填写了一半的表单或其他数据保存起来,例如购物车里没有付款的商品。
6 如果某个网站需要用户注册来提供一些有用的服务,那么允许用户首先体验这些服务一一他们只是受到吸引,过来看看,然后网站再询问更多的信息,这样用户会更可能进行注册。有些网站允许用户不需要注册就能完成购买,而在最后才询问是否需要用购买过程中的个人信息进行方便的注册。
1.4.6 递增构建
当人们要创建某个东西时,他们并不总是一下就能完成它。就算是一名专家用户,也不会在开始之后就能有条不素地进行创建,得到一个完美的产物,然后结束这次创建过程。
1.4.7 习惯
ctrl+c, ctrl+v,
1.4.8 小片时间
人们经常会发现他们需要等上几分钟。可能是在工作间隙中需要几分钟时间休息一下大脑,也可能正在排队等候,或者遇到交通堵塞。也可能只是心情烦躁或者失去耐心。因为知道自己没有足够的时间进行网络活动,他们想做点什么有意义的或者好玩的事来消磨时间.
这种模式对移动应用来说特别适用,因为人们很容易就能从这种类型的应用里抽身出 来
下面是一些小片时间里常见的行为:
收邮件
阅读来自 Facebook 或 Twitter 的更新(第 2 章)。
阅读网站上的新闻。
看一个小视频。
上网快速搜索一点信息。
阅读一本在线书籍玩一个小游戏。
内容应该能够容易并且快速获得,新闻信息更新速度应该加强。加载过程中的设计。
1.4.9 空间记忆
当人们使用东西或文档时,他们经常通过回忆它们的位置来再次找到它们,而不是它们的名字。
1.4.10 前瞻记忆
当我们计划在将来完成某事的时候,就要用到前瞻记忆了,然后我们会设置一些提示来提醒自己。例如,若第二天需要带一本书去上班,你可能会在前一晚把它放在门厅的桌子上。如果你需要退一点回复某封邮件(而不是现在),你可能会把那封邮件留在屏幕上作为一个物理提示。又或者,如果担心错过会议,你可能会用 Outlook 或 Palm 设置一个提醒闹钟,在每个会议开始前 5 分钟响起
基本上,几乎每个人都会这么做,这是我们在复杂的、高度计划性的多任务生活环境中的应对手段之一:我们使用“现实中”的知识来帮助我们加强有限的记忆。我们需要把事情做好。
用前瞻记忆来做点别的什么呢?
1 个人用的便笺,就像虚拟的“即时贴 ・
2 留在屏幕上的窗口。
3 直接插入文档中的注释(例如“待完成”)・
4 浏览器书签,来保存那些以后还会访问的网站。・
5 存放在桌面而不是文件系统其他位置的文档。
6 收件箱里(或打上标记)的邮件,而不是那些存档的邮件。
作为一名设计师,你可以用前瞻记忆来主动做点什么吗?假设有人把一个完成了一半的表单临时关掉,你可以把已经填好的数据保存起来,帮助她下次回忆都填到哪里了(参考“延后选择模式”(Deferred Choices))。与此类似的是,很多应用能够“想起”最近几次编辑的文档或对象。可以提供类似书签的兴趣对象清单一一旧的或新的都可以然后让这个清单容易阅读,容易编辑。另外,还可以实现多工作空间,这样用户在离开当前工作的时候,还能让没完成的工作页面保持打开状态。
1.4.11 简化重复工作
1.4.12 只支持键盘
应该是指对键盘的支持:手指一直放在键盘上,而不是移动到鼠标上进行操作。例如PS快捷键就能提高设计效率。
主要指快捷键的设计和安排。
1.4.13 旁人建议
人是一种社会性生物。尽管我们自己的想法有时候很强烈,但其他人的想法也常常会影响我们。
1.4.14 个性化推荐。
这个模式和前面一个原理一样一一我们都会受到同伴们的强烈影响。因此,和其他些方式找到的相比,我们更可能会去看别人推荐给我们的文章或视频。在我们要决定在线阅读什么内容的时候,私人关系会产生很大的影响。
第 2 章组织内容:信息架构和应用结构
2.1 从全局出发。
...要服务于几个目的:一种软件服务,或者好几种一一共享信息、出售商品、品牌社会化通信,或者其他一些目标。
【从整体战略出发】
任何这样的页面主要都是为了完成以下的几件事:
2.1.1. 显示一个对象,例如地图、书籍、视频,或者游戏。
当你设计这类界面的时候,可以考虑下面列出的模式和技术
1 可选视图模式(Alternative Views),可以用两种或两种以上的方式来显示同一内容。
2 ・多工作空间模式(Many Workspaces),用在人们在同一时间想看到多个地点、多个状态,或多篇文档的时候。
3 深度链接状态模式(Deep-linked State),见第 3 章,用这个模式,用户可以把内容的特定地点或状态保存起来,并可以在将来回访或把链接地址发送给别人。
4 共享组件模式(Sharing Widget)和其他社交模式,参见第 9 章。
5 第 10 章中也介绍了一些移动应用模式,如果需要设计移动设备上的内容,可以参考它们。
2.1.2. 显示一个列表或一组对象。
主题、搜索和浏览模式(Feature, Search, and Browse)
新闻流
图片管理器(Picture Manager)
日历、整页菜单和搜索结果
2.1.3. 为创建某个对象提供工具。
PS
2.1.4. 辅助完成一项任务。
也许你要设计的界面并不是要显示一个列表或创建某些对象,而只是要完成某项工作。登录、注册、提交表单、打印、上传、购买、修改设置一一所有这些都属于这一类别。
- 分解任务
- 设置编辑器(偏好设置)
1 ・在很多情况下,你需要把任务分解成一些更小的步骤,或者一组步骤。对于这类需求来说,向导模式对于那些需要完成任务的用户来说比较有用。
2 ・设置编辑器也是一种非常常见的界面,可以让用户改变应用、文档、产品或者其他一些东西的设置或个人偏好。这些都不是需要一步一步完成的任务。你只需要给用户提供一种方式去査看和切换各种选择,并且让他们只在需要的时候,修改那些他们需要的选项,并且知道他们可以在其中进行前后査找就可以了。
2.2 模式
- 主题、搜索和浏览(Feature, Search, and Browse
- 新闻流(News Stream)
- 图片管理器(Picture Manager)
- 信息板(Dashboard)
- 画布加调色板工具条(Canvas Plus Palette
- 向导(Wizard)
- 设置编辑器(Settings Editor)
- 可选视图(Alternative Views)
- 多工作空间(Many Workspaces)
- 多级帮助(Multi- Level Help)
2.2.1 主题、搜索和浏览
1. 它是什么
三个重要的元素:主题对象/一个特色商品/文章,一个搜索框,一个可以浏览的内容列表或类别列表
2. 什么时候使用
浏览,搜索,
3. 为什么使用
这 3 个元素出现在很多很多成功的网站上。一且你注意到它们,就会发现它们几乎无处不在。
搜索和浏览常常结合在一起成为两种找到目标的并存方式:有一些人知道他们自己在寻找什么,立即定位到搜索框,而其他一些人有时候会进行开放式的浏览,在他们看到的列表和类别中寻找。
主题/专题内容是你用来诱惑用户的东西。它们比普通的类别列表和搜索框有趣多了特别是如果在你用了一些引人注目的图片和文字的时候。这样,来到页面的用户马上就有了一些可以阅读,可以尝试的东西,而不用其他额外的努力ー一他可能会发现这部分内容比他来网站的目的更有意思。
4. 如何使用
5.示例
亚马逊
2.2.2 新闻流
1. 它是什么
用倒序的方式显示一个和时间相关的元素列表,最新的元素放在最前面。对这个列表进行动态更新,并把来自不同来源或不同人的元素综合起来,成为一个单独的元素流。
2. 什么时候使用
你们网站或应用用到了一个或多个通信渠道,例如博客、电子邮件、社会化网站的更新或者新闻网站,来为用户提供及时的内容。
这种渠道可能是私人的一一某个用户拥有它,例如一个邮件客户端或者 Facebook 朋友列表,也可能是公开的,例如一个网站或者一个公开的 Twitter 信息流。
3. 为什么使用
新闻跟踪,了解相关事情的最新消息。
4. 如何使用
倒序更新,多个主题,
每条信息应该包括:what, who ,when ,where
5. 示例
Google 新闻。公共新闻流。
各种社交网络服务、新闻聚合服务、私人通信服务(例如电子邮件)都提供了大量私人新闻流的例子。
2.2.3 图片管理器
1. 它是什么
使用小图片、单个元素视图,再加上一个浏览界面来建立一个通用结构,用来管理图片视频和其他图片类的元素。
2. 什么时候使用
人们将用你的软件来处理列表或图片类的元素:照片、绘画、视频片段,等等。这个列表可能出现在网页上或者应用里,又或者两者都有。它可能也允许内容的拥有人来編辑内容,或者只是显示出来供公开浏览、査看和评论。
【VSCO等应用上都有这样的模式:手机照片的预览。】
3. 为什么使用
组合模式。
这个组合里通常会包括的模式和组件有 ・
缩路图网格(Thumbnail Grid) ・
单窗口深入(One- Window Drilldown) ・
双面板选择器(Two- Panel Selector)
金字塔(Pyramid) ・
Tabs 和可收起面板(Collapsible Panels)
按钮组(Button Groups)
树或大纲(Trees or outlines)
只支持键盘(Keyboard Only) ・
共享组件(Sharing Widget) ・
搜索框(Search box ・
社交评论和讨论(Social comments and discussion
4. 如何使用
先建立两个主要视图:一个是缩略图网格,用来显示列表中的对象,还有一个是显示单个对象的大图。
5. 示例
参考finder图片的显示。
2.2.4 信息板
1. 它是什么
把各项数据显示在一个信息密集的页面上,定期更新。
2. 什么时候使用
你们的网站或应用在处理一个信息流,这个信息流有某种来源,例如网站服务器数据、社会化聊天工具、新闻、航班信息、商业智能信息、金融信息,等等。你们的用户需要持续监测这些数据。
3. 为什么使用
这是一种常见而又很好识别的页面类型。信息板历史悠久,无论是在网络上还是现实世界里(也称仪表盘,例如汽车上的那种)。大家也都已经对于它的工作原理了然于胸,它们显示有用的信息,它们自动更新,它们常常使用图形来显示数据,等等
信息板也是其他相关模式和组件的组合,很多在线信息板都会用到下列元素:
带标题的区域(Titled Sections) ・
Tab 和可收起面板(Collapsible Panels ・
可移动的面板(Movable Panels) ・
单窗口深入(One- Window Drilldown ・
各种列表和表格(参见第 5 章)(Lists and tables of various kinds 斑马行(Row Striping) ・
数据提示(Datatips ・信息图形(参见第 7 章)(Information graphics
4. 如何使用
视觉层次结构
5. 示例
百度搜索下面的新闻
http://quince.infragistics.com/Patterns/Dashboard.asp http://patternry.com/p=information-dashboard/
http://wwwumag.com/design/rich-internet-application-screen-desigm
Information Dashboard Design: The Effective Visual Communication of Data, O'reilly http:/oreilly.com/catalog/9780596100162/)
2.2.5 画布加调色板工具条
1. 它是什么
2. 什么时候使用
3. 为什么使用
4. 如何使用
5. 示例
ps
2.2.6 向导
1. 它是什么
在界面上一步步引导用户按预定的顺序完成任务的工具。
2. 什么时候使用
3. 为什么使用
4. 如何使用
任务分解
物理结构
5. 示例
打开软件的时候,一系列的指示
http://ui-patterns.com/patterns/wizard
http://wwwwelie.com/pattern/showpatternph?pattern/D=wizard
http://patternry.com/p=one-page-wizard
http://patternry.com/p=multiple-page-wizard/
http://quince.infragistics.com/Patterns/Wizard.aspx
http://wwwuxmag.com/design/rich-internet-application-screen-design
2.2.7 设置编辑器
1. 它是什么
2. 什么时候使用
3. 为什么使用
4. 如何使用
5. 示例
参考Mac的偏好设计
2.2.8 可选视图
1. 它是什么
2. 什么时候使用
3. 为什么使用
有如下几个理由来使用可选视图模式:
1 用户对于速度、可视化风格和其他因素的偏好不同。
2 为了深入了解某个问题,用户有临时用不同方式査看某个东西的需要。例如这种情况,某个地图用户需要在街景信息和拓扑信息之间来回切换(如图 2-33 所示)。
3 又或者,用户在编辑幻灯片或网站时,可能他的绝大部分的编辑工作在文档的结构性视图中进行,包括编辑幻灯片顺序、一些不可见内容的标记、布局、个人备注,等等。但是有时候他又想看看最终用户看到的是什么效果。
4. 如何使用
5. 示例
参考地图软件中卫星视角,平面视角等等。
2.2.9 多工作空间
1. 它是什么
使用多个顶级 Tab、一组 Tab,或窗口,让用户能一次看到多个页面、项目、文件,或者工作环境。如果可能的话,让用户把这些工作空间放在一起。
2. 什么时候使用
3. 为什么使用
- 多任务
- 在两个或更多对象之间进行一一比较可以帮助人们学到更多,了解更深入。
这个模式能直接支持第 1 章中所述的一些模式,例如前瞻记忆(用户可能会打开一个窗口来提醒自己完成某项工作)和安全探索(因为他们不需要离开原来的工作空间再打开一个新的)。
4. 如何使用
5. 示例
参考打开多个finder,PS中多个文档,多个画板。
2.2.10 多级帮助
1. 它是什么
2. 什么时候使用
你的应用很复杂。有些用户可能需要完整的帮助系统,但是你知道,大部分用户不会花时间去使用这个系统。你希望尽可能地为那些没有耐心的用户,以及/或者那些偶尔使用的用户提供支持。特别是,如果你的应用主要面向从中级用户到专家用户的用户群的话一一怎样帮助用户从新手成为专家呢?
3. 为什么使用
4. 如何使用
5. 示例
参考软件官网上安装教程,affinity ipad上的帮助设计。
回应 2019-06-03 17:12
论坛 · · · · · ·
这本书怎么买到啊? | 来自accccccon | 1 回应 | 2019-03-03 |
界面设计模式第二版 买书 | 来自岛与_暮歌 | 2018-12-13 |
这本书的其他版本 · · · · · · ( 全部7 )
-
电子工业出版社 (2008)8.3分 1010人读过
-
暂时无货, 25天前曾上架
-
-
O'Reilly Media (2005)8.7分 186人读过
-
东南大学,O‘Reilly (2011)8.4分 47人读过
-
O'Reilly Media (2011)8.4分 57人读过
以下书单推荐 · · · · · · ( 全部 )
谁读这本书?
二手市场
订阅关于界面设计模式(第2版)的评论:
feed: rss 2.0
0 有用 低价值用户Kar1 2017-04-23
2017-04-04在读。2017-04-23读完。
2 有用 SSS级の炼乳茶 2017-02-05
就是设计原型的字典,设计的时候根据需求查然后再套用就好噜!
0 有用 Manu 2017-09-17
界面设计的字典,平时设计时使用的各种模式有了参考的依据
14 有用 daorren 2014-11-02
本周末根据这本书做了个思维导图,包含各个结构化的模式,有简介有案例图。既可以当做工具书查阅,又可以闲来无事阅读普及知识。链接http://pan.baidu.com/s/1nticLdf。(没有用过思维导图的同学戳链接http://pan.baidu.com/s/1ntIA8tz
0 有用 [悱恻] 2019-12-27
2019年再来看有点过时了其实
0 有用 我是江湖骗子吗 2021-03-02
本书让我意识到:当前做设计最大的误区是只关注流程,忽略了人的软性需求。 书中还对列表、控件、界面进行了细致的分类,看完感觉通透了不少。 本书毛病也不少:文字太多,缺少案例,读起来费劲;结构不合理,信息架构一章文不对题。
0 有用 dddt 2020-12-13
读书笔记:https://www.jianshu.com/p/74b8b26032d4
0 有用 臭瓦力 2020-10-15
工具书
0 有用 Jenni符 2020-06-10
这翻译。。。
0 有用 M。m 2020-05-27
pc端设计入门手册