具体描述
模式意味着重用。
好的模式建立在对人与事物的深刻认知之上。
本书开篇即总结了“与人有关”的各类问题,为读者提供了界面设计总体思路上的指引,帮助读者举一反三。
接下来,本书收集并分析了很多常用的界面设计模式,帮助读者理解在实现级别的各种常用解决方案,将它们灵活地运用到自己的设计中。
同时,随着网络和技术的不断发展,本书在第1 版的基础上,更新了几乎所有的模式示例和说明,并新增了两章全新的移动应用和社交媒体设计模式,帮助读者在这两个新的领域从更高的起点开始设计。
有效的界面设计,从本书开始。
作者简介
Jenifer Tidwell是一位交互设计、信息架构和设计前期分析方面的咨询师和作家。她曾经为很多著名的公司(如Google和MathWorks)设计和建立用户界面。
目录信息
前言 .................................................................................... 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
· · · · · · (收起)
读后感
看了这本书,有点难以名状的感觉。 封面非常棒,简约而又独具特色。非常鲜明的工笔鸳鸯,体现了O'Reilly的一贯风格。内页是全彩印的,还在侧边有色条来区分章节。标号和区隔都非常醒目,读起来很舒服。而此前看的《About Face2》完全是素面朝天,甚至一些图片还模糊不...
比较清楚、一般简洁、不怎么引人入胜。一项一项地罗列设计模式,看得时候有一种翻词典的感觉,甚至比翻词典还要枯燥一点。当然这也没办法,此种工具书很难让人充满兴趣。不过《CSS实战手册》http://www.douban.com/subject/2208550/ 这本,却很通俗,也比较吸引人,更像是一本...
这本书就属于那种,新手应该放在手边常查阅的东西,作者把搜集来的案例汇集起来,结构化分门别类,不同的模式分别介绍它是什么、什么时候用、怎么用,实在是非常良心的。虽然可能不全面,但是还是很好用 废话不多说,我这周末顺着作者的意做了个思维导图, 把每个模式都附上简...
《界面设计模式》 这本书是我近一年来读过的最好的一本书,没有之一。 本书总结出很多常用的交互设计中的“模式”,将交互设计中经验性的东西提炼并系统化,对每种模式都进行了应用场景分析,结合实例,让读者能更深入理解为什么要使用这种模式的原因;其实阅读的过程也是梳理...
这本书就属于那种,新手应该放在手边常查阅的东西,作者把搜集来的案例汇集起来,结构化分门别类,不同的模式分别介绍它是什么、什么时候用、怎么用,实在是非常良心的。虽然可能不全面,但是还是很好用 废话不多说,我这周末顺着作者的意做了个思维导图, 把每个模式都附上简...
用户评价
坦白讲,这本书的价值远不止于它表面的内容。我是一个正在准备转向产品设计领域的技术人员,对于如何将技术实现转化为用户友好的产品,一直感到有些迷茫。这本书就像一盏明灯,照亮了我前行的方向。《界面设计模式(第2版)》在讲解模式时,并没有回避技术实现的细节,而是将设计模式与实际的用户交互过程紧密结合。比如,在介绍“分页加载”(Infinite Scroll / Pagination)模式时,作者不仅仅描述了用户向下滚动时自动加载新内容的体验,还详细说明了在实现过程中需要考虑的性能优化、加载状态的反馈、以及如何设置一个合理的“断点”来避免无限循环带来的混乱。他甚至还提到了一些高级的实现技巧,比如预加载、占位符的使用等,这对于我这样的技术背景出身的人来说,非常有帮助。这本书让我明白,优秀的设计是技术和用户体验的完美融合,而设计模式正是连接这两者的桥梁。它让我能够用更专业的视角去理解设计决策背后的逻辑,也让我对接下来的产品设计工作充满了信心。这本书不仅仅是给设计师看的,也应该成为产品经理和开发人员的必读书籍,因为它能够帮助我们建立共同的设计语言和协作框架。
不得不说,这本书的排版和视觉呈现也相当出色,这对于一本关于界面设计的书籍来说尤为重要。我一直认为,一本关于设计的书籍,本身就应该体现出设计的精良。《界面设计模式(第2版)》在这方面做得非常到位。书中大量的插图、图表和案例分析,都清晰地展示了每一个设计模式的实际应用。作者非常注重图文并茂,每一个模式的讲解都配有直观的视觉示例,让我能够立刻理解其含义和用法。例如,在介绍“模态窗口”(Modal Window)时,书中不仅有文字描述,还有不同类型的模态窗口(如警告框、信息框、确认框)的示例,以及它们在不同情境下的恰当使用时机。更难得的是,书中对这些视觉示例的注释非常详细,解释了每个元素的含义、布局逻辑以及它们如何共同作用来传达信息和引导用户。这种高质量的视觉呈现,极大地增强了我的阅读体验,也让我更容易将书中的知识转化为自己的设计实践。它让我看到了,设计模式不仅仅是抽象的概念,更是可以被具象化、可被感知的实际应用。
我是一个长期从事前端开发工作的设计师,常常需要在理解设计稿的基础上,将其转化为可交互的界面。这本书为我提供了一个非常宝贵的“翻译器”。《界面设计模式(第2版)》在描述每一个设计模式时,都会深入到其背后的技术实现原理和考虑因素,这对于我这样的开发者来说非常有价值。例如,在讲解“搜索”(Search)模式时,作者不仅讨论了搜索框的位置、占位符文本、实时搜索建议等用户体验方面的考量,还会提及搜索算法的选择、索引的构建、以及结果的排序和过滤等技术细节。他会分析不同搜索实现方式的优劣,以及如何根据具体需求进行权衡。这种将设计理念与技术实现相结合的阐述方式,让我能够更深入地理解设计背后的逻辑,并能更有效地与后端开发人员沟通。我不再只是被动地执行设计,而是能够提出更具建设性的意见,甚至能够主动提出一些技术上更优的解决方案。这本书让我感觉自己不仅仅是一个“像素搬运工”,而是一个能够参与到产品设计全过程的“创造者”。
我是在一个偶然的机会接触到这本书的,当时我正在为一个复杂的企业级应用进行界面重构,遇到了很多用户操作流程不顺畅的问题。这本书简直就是雪中送炭。作者在讲解每一个设计模式时,都会详细描述该模式能够带来的具体效益,以及它如何解决用户在使用产品时可能遇到的各种障碍。比如,在讨论“进度指示器”(Progress Indicators)时,作者会详细分析不同类型的进度指示器(如加载条、旋转动画、百分比显示)在不同场景下的适用性,以及它们如何通过提供及时反馈来缓解用户的等待焦虑,提升用户体验。他甚至还会深入探讨,如何通过精细化的进度显示,让用户感知到时间的流逝,从而更好地理解操作的进展。这种对用户体验细节的极致追求,让我印象深刻。在我的重构项目中,我根据书中提供的思路,重新设计了那些容易让用户感到困惑的操作流程,引入了更清晰的进度指示和反馈机制,结果用户满意度有了显著提升。这本书不仅仅是提供了设计模式,更教会了我如何从用户视角出发,去发现和解决问题。
我得说,这本书在内容深度和广度上都远超我的预期。我之前也看过一些关于UI/UX的书籍,但很多都停留在“看起来不错”的层面,或者只是罗列一些技术性的技巧。《界面设计模式(第2版)》则截然不同,它真正触及了界面设计的核心——如何通过精心设计的模式来优化用户体验,并最终实现业务目标。作者的叙述非常严谨,每一个模式的提出都有充分的理论依据和实践支撑。例如,在讨论“卡片式布局”(Card-based Layout)时,作者不仅列举了它在内容聚合、信息层级组织方面的优势,还深入分析了卡片之间如何通过阴影、间距、以及内容元素的排列来建立视觉联系,引导用户进行下一步操作。他甚至还探讨了卡片式布局在不同平台(如Web、移动端、桌面应用)上的适应性和变体,以及在响应式设计中的实现要点。这本书让我意识到,一个好的界面不仅仅是漂亮的视觉元素堆砌,更是一套精密的系统,而设计模式就是构建这套系统的基石。作者的洞察力令人惊叹,他能够将那些看似零散的设计实践,提炼出具有普遍性和指导意义的模式,并用清晰的语言将其阐释出来。读完这本书,我感觉自己的设计思维得到了极大的升华,能够更系统、更宏观地看待界面设计问题,而不是陷入细节的泥沼。
这本《界面设计模式(第2版)》简直是给我打开了一扇新的大门。作为一个在用户体验领域摸爬滚打了几年的设计师,我一直觉得自己在构思和实现界面时,总有些似曾相识的感觉,仿佛在重复一些前人已经趟过的路,但又说不清具体是哪些“模式”。直到我翻开这本书,我才恍然大悟,原来我一直在潜意识中运用着一套成熟的设计语言,而这本书正是系统地将这些语言整理、归纳、并赋予了名字。我尤其欣赏作者在阐述每一个设计模式时,不仅仅是简单地给出定义和示例,而是深入剖析了该模式背后的用户行为、心理动机以及它能够解决的具体痛点。比如,在讲解“抽屉导航”(Drawer Navigation)模式时,作者并没有止步于“隐藏菜单”这个简单的描述,而是详细地探讨了它在信息层级复杂、屏幕空间有限的移动应用中的优势,以及如何通过合适的动画和反馈来弥补其可能带来的发现性问题。他甚至还引用了一些成功案例,分析了这些案例是如何巧妙地运用抽屉导航来提升用户效率和满意度的。这种由表及里、深入浅出的讲解方式,让我对每个模式的理解不再停留在表面,而是能够真正把握其精髓,并灵活地运用到我的实际项目中。更重要的是,书中提供的多种模式组合和切换的思路,为我提供了更广阔的视野,让我不再局限于单一的解决方案,而是能够根据具体场景和目标用户,选择最恰当、最富有创造性的设计策略。这本书不仅仅是一本工具书,更是一本思维启发书,它让我看到了界面设计中蕴含的深刻逻辑和艺术。
这本书的内容是如此丰富,以至于我感觉每一次重读都能有新的发现。我是一个喜欢研究用户行为和心理的设计师,而《界面设计模式(第2版)》在这方面给了我极大的启发。作者在分析每一个设计模式时,都会深入挖掘其背后的用户心理学原理。例如,在讲解“确认对话框”(Confirmation Dialogs)时,作者会探讨“损失规避”效应,即用户更倾向于避免潜在的损失,因此在执行一些不可逆操作时,需要清晰的确认提示来避免用户误操作。他还会分析不同类型的确认信息如何影响用户的决策,以及如何设计能够引导用户做出正确选择的提示。书中还讨论了“心智模型”(Mental Models)的概念,即用户对产品如何运作的预设想法,以及优秀的设计如何与用户的心智模型相契合,从而降低学习成本。这些基于心理学原理的设计洞察,让我能够更深刻地理解用户行为的驱动因素,从而设计出更能引起用户共鸣的产品。这本书不仅仅是一本设计工具书,更是一本关于人机交互的心理学读物。
老实说,我是一个比较“挑剔”的读者,对于市面上一些泛泛而谈的教程类书籍,我很容易感到厌倦。但《界面设计模式(第2版)》给我留下了深刻的印象。它不是那种“告诉你怎么做”的书,而是“让你理解为什么这样做”的书。作者在讲解每一个设计模式时,都会提供非常详尽的案例分析,并且会对这些案例进行深入的剖析。例如,他会选取一些大家耳熟能详的优秀产品,分析它们是如何巧妙地运用特定的设计模式来解决用户问题,以及这些模式如何为产品带来了商业上的成功。他还会探讨一些不那么成功的案例,分析它们在设计模式运用上的不足之处,以及可以改进的方向。这种“正反两面”的讲解方式,让我能够更全面地理解设计模式的适用性和局限性,也让我能够从中吸取经验教训。更重要的是,作者在书中提供了一套系统性的评估设计模式的方法论,让我能够独立地分析和判断哪些模式最适合我的项目,而不是盲目地跟风。这本书不仅教授了我知识,更教会了我如何学习和思考。
这本书的视角非常独特,它不仅仅关注“做什么”,更关注“为什么这样做”。我之前在工作中,常常会为了实现某个功能而选择一个看似“流行”或者“方便”的界面模式,但很少深入思考它是否真正适合我们的用户和产品。《界面设计模式(第2版)》彻底改变了我的认知。作者在阐述每一个模式时,都花费了大量的篇幅去分析该模式的应用场景、目标用户、以及它能够解决的特定用户痛点。比如,在讲解“主导航”(Primary Navigation)模式时,作者会深入探讨不同类型的导航(如顶部导航栏、侧边栏导航、底部标签栏)在不同信息架构下的适用性,以及它们对用户发现和访问关键功能的影响。他还会举例说明,为什么在内容量庞大的电商网站中,顶部导航栏配合搜索和筛选功能是更优的选择,而在信息层级相对扁平的社交应用中,底部标签栏更能满足用户快速切换不同板块的需求。这种“以用户为中心”的设计逻辑贯穿全书,让我深刻体会到,好的设计并非凭空产生,而是源于对用户需求的精准洞察和对信息架构的深刻理解。读完这本书,我感觉自己不仅仅是在学习设计模式,更是在学习一种解决问题的思维方式。
这本书的讲解方式非常有层次感,它不是简单地堆砌模式,而是将这些模式按照一定的逻辑进行组织和呈现。我最喜欢的是作者在讲解每一个模式之前,都会先铺垫一个相关的用户场景或者存在的问题,然后引出该模式是如何解决这个问题的。这种“问题-解决方案”的结构,让我在阅读时能够始终保持高度的关注度,并且能够清晰地理解每个模式的价值和意义。例如,在介绍“表单”(Forms)设计时,作者会先探讨用户在填写表单时可能遇到的各种困难,比如信息输入错误、必填项遗漏、以及繁琐的填写流程。然后,他会引出各种表单设计模式,如分组、标签清晰、错误提示及时、输入校验等,来系统地解决这些用户痛点。他还会深入分析不同类型的表单输入控件(如文本框、下拉菜单、单选/复选框)的设计原则,以及如何通过合理的布局和交互来简化用户的填写过程。这种循序渐进的讲解方式,让我能够深入理解每个模式的“为何”和“如何”,而不仅仅是停留在“是什么”的层面。
记不住啊。。。
本周末根据这本书做了个思维导图,包含各个结构化的模式,有简介有案例图。既可以当做工具书查阅,又可以闲来无事阅读普及知识。链接http://pan.baidu.com/s/1nticLdf。(没有用过思维导图的同学戳链接http://pan.baidu.com/s/1ntIA8tz
很多探究到底层行为模式的描述,写模式说明的时候还是挺有用的。
2019年再来看有点过时了其实
长假大半的时间都在翻这本书,其实它算是工具书,500多页看完有(fei)点(chang)累的,总算是积累了点理(chui)论(xu)知(zi)识(ben)。一到八章写的都还满清楚的,包括了各个模式的应用场景和示例。最后三章关于social,mobile和visual的,我想说,还是让专业的来,就一个章节其实也讲不清楚。现在看完这本书的一个后遗症就是看到随便一个网站都不自觉的要去想一下人家用了哪几个pattern。。。= =