《Designing Interfaces(界面设计模式 )》读书笔记

01-用户做些什么

好的界面始于对人的理解,软件对于用户来说,只是达到目的的一种手段。我们需要了解用户,因为他们不是你。

了解用户可以帮助我们发现问题、定义问题,解决真正的问题。了解用户的方面包括:使用软件的目标以及达到目标需要完成的任务、使用软件的场景、用户的基本背景(使用同等软件的技巧、平常使用的语言和词汇)。

了解用户的形式包括:直接观察、案例研究、带哦差问卷、访谈、人物角色、用户测试等

软件提供给用户的自由度应当由用户的特性决定,是大部分都会停留在新手用户(很长时间使用一次,如缴费),还是大部分会愿意学习成为中级用户甚至高级用户(如sketch等工具类软件)。大部分情况,软件应该处于中间状态,为两类用户提供服务:让新手用户快速学习;让老用户发掘更多新功能。

模式

安全探索

防错、容错,让用户随时可以撤销、回退。

即时满足

让用户可以快速开始使用——开箱即用。避免一开始就需要阅读大量的指导性说明,让用户感到畏惧与门槛。

满意即可

人们只需要达到目标,不希望有多余的思考。复杂的页面对用户而言意味着繁重的认知负担,所以要削减界面的复杂度,文字描述简单、布局能够表明结构与引导顺序、让用户能够回退。

中途变卦

用户的操作流程有可能会被被的事情打断,需要记录进度,支持从暂停的地方开始,防止出现重复的工作。

延后选择

在主要流程中只需要获取关键信息,对于附加信息,允许用户后续再做补充。这样让主流程尽可能的简洁,用户可以更快的完成任务。如注册过程中只需要手机号码。关于用户账号的自定义信息可以让用户进入APP后,随时在个人中心修改。

递增构建

对复杂任务进行分解,让用户一次完成一部分工作,最终全部完成,而不是要求一次性完成。

习惯

常用的操作与主流用法保持一致。应用内的操作也应该保持一致性,符合用户习惯,减少出错。

空间记忆

人们经常通过位置来回忆东西或者文档,而不是通过名字。所以,应用内不同页面、不同模块中相同的元素(按钮、信息等)应该放在相似的位置,方便用户找到。

前瞻记忆

让用户自定义添加标记,进行分组、分类、提示,如ps中用颜色标记区分图层。让用户在长线程的任务中,在后续的时间点再次打开的时候,能够记起上次的操作、未完成的事项等。

简化重复工作

当操作对象比较多时,让用户方便的批量操作,或者可以自动重复、复制粘贴等,减少同样的动作需要人来执行N遍。

只支持键盘

频繁的在鼠标和键盘之间进行切换,会影响效率。在表单中考虑使用tab键切换,让鼠标的操作和键盘的操作集中到一起,而不是来回切换。

旁人建议

让用户之间自主沟通,就像小米/魅族的用户论坛,让用户之间互相帮助,既可以自发的解决问题,也可以培养用户的归属感与认同感。

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

切分内容:关注任务的整体流程而不是具体使用哪种控件,将动作与对象顺畅的结合。

物理结构:用面板、窗口、页面等元素将布局、流程表达出来。包括多窗口、单一窗口分屏、单一窗口分页。

流程包含的元素:对象(如收件箱)、某种主题的列表(如星标邮件分组)、动作或任务列表(如撤销、发送)、工具列表(如日历)

模式

双面板选择器

what:相邻的两个面板,一个显示概要标题列表,一个显示选中左侧某一条后的详情。如邮箱的分屏模式。

when:web、pad端的收件箱、照片查看等既有列表,又需要查看单条详情的情况。

why:大屏幕时可充分利用屏幕空间,减少页面跳转。

用户的视线移动距离也较短。

减少用户的记忆负担,对于单条记录在列表中的位置可以随时查看,又不影响查看详情。如Mac 系统的文件夹。

how:上下布局或左右布局,支持键盘方向键在条目间移动,同时突出当前已选中的条目。

画布+调色板工具条

what:空白画布的操作区域+承载不同类型工具的工具条。

when:图形编辑器等软件。

why:对于对象的操作结果,可以实时、直观的看到,所见即所得。同时,与实际的画画的场景类似,用户能够快速理解与熟悉。

how:空白画布应当占据主要视觉部分。工具条的位置、工具条中工具的组织分类应当通过可用性测试来验证。

单窗口深入

what:在一个单一的窗口中显示应用程序的每个页面,层层深入。每次都用新的内容来替代当前的内容。

when:显示空间受限,如手机。任务为单一的线性流程。

why:将任务拆解到不同的页面,可以减少单一页面的复杂度,用户在每个阶段面临的选择和认知负荷较小,可以更好的聚焦于当前的任务,更高效的完成。

how:使用面包屑或者序列地图导航,让用户知道当前的位置,同时可以随时在流程间跳转。

层级应该尽可能的简单,避免过于琐碎冗长,让用户失去耐心。

可选视图

what:让用户可以选择不同的显示模式,如图标查看、列表查看。

when:显示格式化的内容,如照片、图表等。

why:满足不同场景的显示需求,如打印时显示打印模式。

how:提供视图切换按钮;将用户选择的视图模式作为下次打开的默认视图。

向导

what:在界面上一步步引导用户按预定的顺序完成操作。

when:任务过程链路很长且复杂。

why:根据希克定律,减少每一次需要认知的选择对象,简化任务难度。

how:步骤的切分应当按照业务关系归并到一起,切分的数量和粒度不能太细;允许用户随时向前/向后移动;提供良好的默认值,简化用户的操作;专家用户会被向导模式限制得很死,最好能提供自定义的模式。

需要时显示

what:将重要的内容显示出来,将其他的隐藏起来,让用户通过一个简单的操作访问隐藏内容。

when:页面需要显示的内容较多,但是又想要保持简洁。

why:简约法则中的隐藏原则。在简单的情况下可以满足大部分需求,突出重要内容,节约显示空间。

how:将大部分情况下都不会被使用的功能/信息进行隐藏。

有趣的分支

what:将一些有趣的内容入口放置在页面中,通过标签等方式吸引用户探索。

when:在线性流程的主线之外,提供一些额外的内容(解释、定义、帮助文本等)

why:让具有学习意愿的用户自由探索,增加产品的丰富程度,让中级用户向专家用户过渡。

how:将用户有可能感兴趣的、想要了解的在支线中展示,同时能让他们快速返回主线任务。

多级帮助

what:使用不同类型、不同重量级的帮助来满足用户的不同需求。

when:系统较为复杂、专业的术语等比较多时,用户可能不理解,需要提供帮助。

why:完整的帮助适合于不在任务当中、长期使用、具有耐心的用户,帮助用户系统的了解。简短的帮助适合于任务中的流程解释、名词解释或者对于偶尔使用一下的用户,只需要针对其需要完成的任务提供帮助。

how:轻量的如占位符的输入提示、标签/工具悬浮时显示介绍文字,不会影响当前的任务流程。需要注意文字表述的简洁性。在线手册、用户文档等,需要单独提供窗口/页面进行显示,需要提供入口。同时文档的结构应当与系统想信息架构保持一致并提供搜索,便于用户查找。

03-到处走走:导航、路标和找路

用户知道自己现在在哪里,接下来要去什么地方,以及怎样才能到达那里。通过良好的标记、环境线索、地图等来告诉用户这些信息。

导航的目的其实就是多个页面之间如何关联,如果能同在一个页面快速完成,那也就不需要导航了。尽量减少上下文的切换,让用户在上下文之间保持连贯,不需要记忆。

模式

清楚的入口点

what:界面的入口指向具体的任务,并且具有自描述性,让人能够看懂。

when:面向具体任务的应用,目的性较强。不会信息过载,让用户不知道从哪里开始。

why:让用户知道应用可以做什么,快速开始任务。

how:突出最主要的动作,让核心功能成为应用的“大门”。

全局导航

what:用一块固定的区域显示菜单,让用户无论在哪里都可以看到。

when:信息结构复杂的大型网站,模块较多。

why:每个页面都可以看到菜单,人们可以看到总体视图,在不同的模块间切换会比较容易。

how:数量要合适,文字的描述要对用户有意义,突出当前的位置。

中心和辐条

what:将功能分割成不同的独立的模块,在主页展示各个模块的入口。类似工作台的模式。

when:功能之间互相独立。显示区域的影响,不能展示全局菜单。

why:用户可以在进入一个模块后,聚焦于当前的任务,完成后再退出。

how:通过尺寸、颜色等区分各模块的层级。模块内任务的结尾应该可以将用户直接带回首页。

金字塔

what:每个页面都可以从主页进入,然后回到主页。各个页面之间可以通过翻页来横向跳转。

when:类似文件夹查看的模式,经常和单窗口深入的模式一起使用,路径再深也能即时回到主页。

why:组织关系比较明确,同时让用户在较深的路径中可以更快的回到起点。

how:把前进、后退的导航放置在固定位置,减少鼠标移动的距离。

模态面板

what:用户在关闭弹窗前,不能操作其他部分。

when:没有用户协助,系统就无法继续前进的状态。

why:聚焦用户的注意力

how:需要有一个出口,让用户可以逃离当前的状态

序列地图

what:步进器、步骤条来告知用户进度。

when:任务流程复杂,被拆解成多个步骤。

why:让用户知道整个流程需要完成哪些工作,自己已经完成了多少。

how:对不同状态(已完成、正在进行、未完成)状态进行视觉区分。

面包屑层级结构

what:在层级结构的每个页面,显示所有父级页面的链接,向上追溯到主页面为止。

when:树形结构的信息架构,采用单窗口深入的模式。

why:显示整个网站或应用的一个线性切片,从而避免显示整个网站结构的复杂性

只告诉用户当前页处于整个系统的位置,不关心他接下来要去哪里。

how:一般位于页面顶部的固定位置,每个层级的标题能够自我解释。

注释滚动条

what:在长页面的向下滚动过程中,显示当前的位置信息,如pdf的多少页

when:以文档/表单浏览为中心的场景,页面很长。

why:更加详细的指示当前的位置,对全局也有更好的了解。

how:动态指示:滚动时显示页码。静态指示,在进度条上用颜色标示位置。

颜色编码的栏目

what:同一个模块用同一个颜色来保持整体性,不同模块用不同颜色表示区分。

when: 模块化的内容,每一块都有不同的目的或者目标用户。

why:区分不同的模块或栏目

how:为照顾色盲用户,不应该将颜色作为唯一的区分方式。

动画转换

what:页面的切换、位置的变化等通过动画来过渡。

when:移动、缩放、跳转等状态翻转的时候。

why:连续的动作让用户保持方向感,不会觉得突兀或由于转变太快而不知道发生了什么。增加产品的趣味性与解释性。

how:符合动画的物理规律。效果要微妙而非整个页面一起动。

逃生舱

what:让用户随时可以从当前状态退出到默认状态的机制。

when:导航受限的情况,如模态弹窗时,用户没法自由的跳到其他页面。

why:让用户随时可以撤销,让用户具有掌控感,鼓励用户大胆探索。

how:通过关闭、取消等按钮/链接来退出当前页面、撤销之前的操作。

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

页面布局是通过注意力的引导来完成对含义、顺序和交互点的传达。 主要包含5个方面:视觉层次、视觉流、分组和对齐、组织 、动态显示。

视觉层次主要是重要程度的区分,让人从布局就可以了解信息的基本结构。

视觉层次的主要区分方式:左上角优先:按照F型浏览,从左至右的阅读顺序,左上角最先被注意到;空白:主要用于内容区块的隔离;字体对比:字重、字号、颜色等进行视觉层次的区分;前景色与背景色的对比:颜色深浅;位置、对齐、缩进:缩进的文字属于上一层的信息;图形(线条、线框、背景色):切割区块,充当内容容器的作用,让区块内的内容具有整体感。

视觉流:通过焦点的切换让用户按预先设计好的线路浏览。一般遵循从左到右、从上到下的浏览顺序。

分组和对齐:将相关元素放到一起,让人由粗到细的浏览,更好体现层次结构,简化信息的复杂性,帮助人们快速理解。包含格式塔心理学的连续、封闭、相邻、相似几项基本原则。

动态显示:切换显示、滚动条、响应式展开等。

模式

视觉框架

what:页面的基本布局、颜色、格式方案等保持一致,建立一套系统自我的设计规范。

when:页面比较多

why:产品更像一个整体,人们也更加容易快速上手。同时,不同页面中变动的内容也会更加吸引人的注意力。

how:颜色、字体、布局、控件、间距等,按照原子设计理论由基本元素到业务组件的统一化。

中央舞台

what:最重要是元素占比最大,如文档编辑中,文档内容的占比最大。

when:面向某种具体任务,如文档、图片的编辑,表格的填写等。

why:将用户的视觉迅速引导到最重要的信息。清晰的中央元素可以锁定他们的注意力。

how:尺寸上占据叫大面积,与周围元素形成对比;通过大的标题来吸引注意力,突出重点关键信息。让用户打开即可看到。

带标题的栏目

what:通过醒目的标题来区分不同栏目的内容。

when:页面上内容较多,为了让用户快速扫描

why:快速浏览、由粗到细、结构清晰。

how:标题的文字通过字号、字重、颜色来突出。不同的栏目使用不同的背景色。栏目/模块之间通过间距、分割线等方式进行区分。

卡片堆

what:tab页切换模式

when:页面内容较多,而用户一次只关注其中一个栏目。

why:结构清晰,用户也比较熟悉。

how:内容的组织架构划分合理;标题简短、具有自明性;选项卡的数量一般6个以下,较多时考虑水平滚动展示。

可关闭的面板

what:多面板的显示,可以打开/折叠。

when:内容在需要时显示,可以利用纵向空间。

why:卡片堆的模式来组织不同大小的栏目,显示空间尺寸会保持一致,小栏目使用大空间,会显得很空,但是可关闭面板的显示空间会比较灵活。

用户可以同时打开多个对比查看,也可以一次只看一个。对于不重要的内容,一般默认收起。

how:标题简短且具有自明性,使用箭头、+、△等符号暗示可以展开。

可移动的面板

what:单页面划分模式,用户可以自定义每一块划分区域的大小。

when:各区域的内容有关联关系,但是不需要放到一起。

why:让用户通过空间记忆模式来记住自己把东西放到哪里了,最终季用户和专家用户来说更友好。

how:定义网格,让页面自动对齐。功能的可发现性:提供暗示可以拖动的符号;容错:让用户可以一键恢复默认布局模式。

右对齐/左对齐

what:表单/表格元素使用右对齐/左对齐。

when:有多行的文本元素

why:格式塔的相邻原则,让标签与控件/内容的关联关系更加明确;对齐的边缘让视线的流动更加顺畅。

how:标签文字太长时考虑换行/上下布局的形式。控件的尺寸也应该相互对齐。

对角平衡

what:用不对称的方式来布置页面,但通过将视觉重量放在左上角和右下角来保持页面的平衡。

when:一屏显示的页面/弹窗,顶部有标题,底部有结束的按钮。

why:让画面整体平衡;用户的实现从左上角到右下角移动,符合习惯,也符合任务的顺序;底部一般是用户最后才做的活动。

how:不要将空白集中放置在某一边,让整体的重心更加均衡;将重要内容放在左上角和右下角的连线中,将不重要的放在左下角和右上角。

属性表

what:两栏的表单式布局,展示对象的属性,可编辑。

when:查看、编辑对象的属性。

why:帮助用户建立该对象的心智模型。

how:属性进行分组、排序,符合某种逻辑(业务含义、首字母等);属性名称使用用户熟悉的术语;选择合适的控件;及时保存或者提醒用户保存;多个对象的展示可以使用图标+悬浮提示的模式;空对象也需要表示,避免看起来像是没有加载/出错。

控件选择参考:

表单设计基础知识整理 - 简书

响应式展开

what:界面的内容随用户的操作而展示

when:多步骤的任务,在一个页面内完成

why:只展现当前有用的信息,让用户更加聚焦,心理压力也更小;步骤之间的相关性比向导模式更好;实现不同任务分支的分流。

响应式允许:一开始禁用,随着用户的操作、选择等逐渐启用,如注册时信息不完整,注册按钮不用。

how:将所有信息放在同一个页面,用户可以随时查看之前的步骤;往下展开新的内容,而不是完全改变布局。

响应式允许

what:一开始展示所有页面元素,但是禁用一部分,只有一部分可用,通过用户的逐步操作来激活被禁区域。

when:具有分支的复杂任务、必须动作(填写、执行等)完整的任务。

why:防止用户出错,通过显示属性来引导、暗示用户。

how:将禁止的元素放在可以使之生效的元素附近;顺序上符合业务逻辑;告知用户为什么有的元素会被禁止使用。

流式布局

what:跟进窗口的大小调整界面的元素和位置,让页面一直保持填满的状态。

when:页面的显示区域有可能会发生变化。

why:除非固定尺寸的设备界面,一般的web和移动端都需要考虑适配。

how:控件弹性、文字流式、图片等比缩放。

适配规则参考:

iPhone 6 / 6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸? - 知乎

05-完成任务:动作和命令

动作的表现形式:按钮、菜单、弹出菜单、下拉菜单、工具条、链接、动作面板、看不见的动作(快捷键、手势、双击、拖拽、悬停、命令行输入等)

模式

按钮分组

what:将相关的动作组织成一组按钮,彼此水平或垂直对齐。

when:多个按钮,彼此之间有关联。

why:让界面具有自我描述的能力,在界面中形成一个整体。

how:按钮组中的按钮,针对的对象应该是一致的。而且,除非用户需要,不要使用高深的术语。尺寸上应该保持一致。中间部分的使用频次比两端的使用频次低一些,一般按照业务流程排序。

动作面板

what:将动作命令平铺到一个面板上。

when:动作数量较多,按钮分组不够用。

why:用户可以直接看到,操作上比较方便直接。按钮形式上更加自由。一般是针对中央舞台模式的对象进行操作。

how:动作面板的内容可随选择对象的不同而动态变化。组织动作的形式:列表、树、网格、可关闭的面板。动作的逻辑顺序,按照业务逻辑或使用频次。动作的标签描述可以告诉用户这些动作是干什么的。

突出“完成”按钮

what:将完成一项任务的按钮放在视觉流的末尾,加大它的尺寸并为它提供一个合适的标签。

when:对于单个任务的完成,需要有一个结束的动作。

why:明确最后一步,让用户有一种完成目标、清理干净的感觉。

how:让按钮文字容易被理解,使用动词或动词短语。位置上靠近最后一个输入控件。视觉上进行突出显示。

智能菜单项

what:动态改变菜单的标题,让用户使用之前就明确知道它的功能。如撤销+刚才做的动作的名称,让用户知道撤销是针对的什么动作。

when:对于具体对象的操作,根据选择对象的不同,彼此之间有细微的差别。

why:完善上下文语义,防止用户出错。

how:对于未选择对象、单个对象、多个对象的情况下,语义描述都应该有所差别。

预览

what:执行动作之前,为用户显示执行将会得到的结果。

when:用户将要执行一个“重量级”操作,一旦执行将会有较高的成本(性能占用、金钱损耗、时间损耗等),如渲染、打印、滤镜。

why:避免用户产生无谓的损耗。应用具有自我描述性,让不熟悉的用户知道这个特定的动作是什么意思。

how:预览状态可直接进行下一步操作;让用户可以回退修改后再次预览。

进度提示

what:在需要很长执行时间的操作中,为用户显示该操作的进度。

when:长时间的进程,需要用户等待。如程序安装、下载等。

why:让用户知道当前的状态,避免用户误认为程序出错;让用户知道还需要等待多久,减少用户的焦虑感。

how:告知用户:当前正在做什么、已经完成了多少、还剩多少、如何中途停止这项任务。保持一致的形式;确切的时间并不是必须的。

可取消性

what:提供某种快速取消一个耗费时间任务的操作,而没有什么负面影响。

when:耗时较长的操作,且该操作关闭了其它很多交互,如ps打开一个大文件。

why:容错,在用户不小心操作的情况下可以让他即时停止,从而鼓励用户安全探索。

how:取消按钮靠近进度条,让用户易于发现。

多级撤销

what:提供一种方式,让用户可以撤销一系列操作。

when:交互流程比较复杂的情况,步骤较多。

why:让用户安全探索,分步撤销可以减少时间上的浪费,也可以让用户尝试不同的路径、效果。

how:选择对象、视图尺寸改变、光标的位置、滚动条位置等操作无需撤销,也无需记录;撤销的粒度不应该精确到修改的一个个字母级别,应该是整个修改一起撤销;考虑到内存占用等情况,多级撤销应该有层级限制;考虑命令历史列表或快捷键支持撤销/重做。

命令历史

what:将用户的每一步操作记录进行保存,包括操作名称、操作对象、操作时间。

when:用户需要执行一系列冗长且复杂的操作。

why:用户大量操作之后,可能想要重复之前的操作、会议之前的操作及顺序、回退到其中某一步。或者出于安全考虑、信息记录等的要求需要保存。

how:操作命令的时间显示是否需要;需要定义操作历史的记录长度/次数限制。可以展示多命令的列表,让用户自由回到任意一步,而不用逐级回退。已撤销的和未撤销的在命令列表中做出视觉区分。

what:自定义一些操作为一个命令组。

when:用户需要重复执行一系列操作的时候,方便用户复用。

why:提升效率,减少重复工作带来无趣、错误,让用户将精力放在更重要的任务上。

how:为用户提供某种方式来增删改查各个宏,可以自定义命名,方便后续调用。

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

良好的交互式信息图形为用户提供下面这些问题的答案:

1、数据是如何组织的?数据的信息结构

2、它们之间的关系如何?多个数据之间的关系是并列、递进、对比、哪些是同一组等。传达信息的形式包括颜色、位置和对齐、方向、大小、底纹、形状等。 

3、我能怎样进一步了解这些数据?平移、缩放、点击等,查看细节或其他维度。

4、我能重新组织这些数据来换一种方式看待它吗?排序规则自定义(字母、数字、数值、日期/时间、物理地点、类别/标记、受欢迎程度、完全随机等),看出不同的趋势。

5、只要把我想知道的数据显示给我就行了。显示关键信息,让用户可以切换/自动切换查看,而不是将所有信息一次性揉在一起。可以搜索、过滤。将相关数据放到一起,方便对比查看。

6、具体的数据值是多少?图例、坐标轴、数据标签、悬浮提示、筛选出某种范围的数据等。

模式

总览加细节

what:在放大的详细视图旁边放置一个总览图。总览图中显示当前详情在整体中的位置。

when:图片或地图集成了大量的信息,既能看到部分细节,又能在整体中保持方向感。

why:用户在整体中穿梭转换以及不同区域的对照、跳转等比较便捷。

how:在总视图上,把当前的视野显示出来,让视野框可以随鼠标移动。细节缩放时,视野框产生变化,总览图的大小不变。

数据提示

what:鼠标悬浮时,显示细节信息。

when:数据显示整体的状况,鼠标悬浮时显示详情。如地图上街道的名字、柱状图上柱子的数值。

why:在总体视图中显示所有详情,会干扰用户的注意力,也会显得没有重点。

how:一般用于web端,移动端没有悬浮操作。显示的数据应该与对象保持某种关联,如位置靠近、指示箭头等。

动态查询

what:提供过滤条件,让用户筛选出某种范围的数据。

when:包含的数据量较大,用户需要找寻满足某些条件的数据。

why:即时反馈,鼓励用户探索数据;让用户通过筛选条件的范围值来了解全部数据的范围。

how:筛选的条件与数据自身的维度密切相关,控件的选择与数据筛选的形式密切相关。

数据刷

what:让用户在一个视图里选择数据,然后在另一个视图里显示选中的数据。同一组数据用两种维度来展现,在一个中选择部分数据,在另一个中突出这些数据。

when:需要不同维度的对比查看。

why:将多个不同维度的视图进行关联,让用户对数据有更加深入的了解。

how:选择的方式可以使鼠标画框、点选、套索、shift/control多选等。选中的数据在不同的视图中,使用相同的颜色或形式突出显示,增加关联关系。

局部缩放

what:一次展示全部数据,在鼠标操作(悬浮、点击等)时,放大某一块,显示详细信息。

when:地图、图形、网格等,用户可以看到全貌,但是不需要看到所有细节。类似于总览+细节的模式。

why:常规的细节跳转、缩放会失去上下文,局部缩放让用户在查看细节的时候,还能保留数据在整个数据集中的上下文信息。

how:在不同焦点间移动的时候过渡平滑;放大过程中的页面抖动不可太剧烈。

斑马行

what:表格中使用类似但颜色不同的背景来区分不同行。

when:表格有多列,行与行之间的区分比较困难。

why:格式塔的连续性、封闭性原理。

how:背景不要干扰正常的数据显示。

可排序的表格

what:用户可以对表格内容自定义排序。

when:表格有多列,用户需要按不同的顺序查看。如筛选商品时按价格、按销量等不同方式。

why:用户可以自由探索,更优控制感。

how:在表头出增加点击可排序的按钮或提示。明确哪些列可以用来排序。

跳转到对象

what:当用户输入某个对象的名称时,直接跳转到该对象并选中它。

when:对象数量较多,用户想要快速准确的选中其中某个字段。

why:人们不擅长在过长的列表中扫描定位信息。

how:持续过滤,当满足条件的结果有多个时,通过tab可以切换到下一个。

新对象行

what:在表格的最下方新增一行来创建新的对象。

when:用户需要在列表中新增一个对象,对象的创建过程并不复杂,只需要简单的选择或输入。

why:对象创建后的显示位置与创建时的位置保持一致,界面简洁、跳转更少。

how:一般可以让用户选择在哪里插入行的一行/一列;用户新增后,按已有格式新增一个空对象,用户可以修改、编辑值。

级联列表

what:分层展示信息,选中上一层后,展示下一层的信息。类似于双面板选择器模式。

when:树形结构的数据,层级比较深。

why:每一层看到的信息有限,用户可以看到每一层的信息,对于对象处于整个结构中的位置也有很好的了解。

how:叶子节点可能会显示属性之类的详情;显示的形式不一定是文字,有可能是图标/图标+文字。

树状表格

what:层级结构的数据,展开后的下一层缩进一部分。缩进越多,层级越深。

when:多层级结构的数据。

why:在一个统一的结构里显示该对象的层级结构。

how:可以用多列 的形式在显示每一行不同维度的信息。

多Y值图表

what:共享X轴,多个图从上到下累积,用不同的Y轴。

when:同样的维度,不同指标的数据。

why:同一个X轴可以告诉用户数据之间的关系,让用户在图与图之间对比查看。

how:相互之间区分明确,减少干扰。

大量小对象

what:将几个维度的信息图表平铺,如按照日历的方式放到一起,使用日历坐标系。

when:在一个图中显示两个以上维度的大量数据。

why:多个对象放到一起,对于多个对象、多维度之间的比较、变化趋势会有直观的了解,如将天空颜色的图片放到日历中,看一段时间内的空气质量好坏。

how:减少没有意义的视觉差别,让不同对象之间在非关键信息上保持一致。数量较多时考虑分区间展示、按照某种特定的顺序(如时间、数量大小)等显示。

树状地图

what:矩形树图,用不同大小的矩形来表示多维数据或层级结构的数据。

when:数据有多个维度的属性。

why:利用位置、大小、色彩、包含关系等将数据打包到同一个空间,鼓励人们找出各个数据之间的关系、趋势和一些特别的数据点。

how:矩形的大小与某种变量相关;通过矩形之间的嵌套来表达数据的层级结构;可以使用颜色、位置来表示其他维度的信息。

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

表单设计的原则:确定用户知道要回答的问题是什么,以及为什么需要回答这些问题;

如果可以,根本不要问什么问题;

不要依赖于用户的记忆力,电脑的保存能力比人脑更好;

多提醒用户(默认值、占位符、结构化格式、输入提示)

进行可用性测试;

控件会影响用户对所问内容的期望。

控件的选择要考虑:可供使用的空间;用户的使用经验;用户的领域经验;通用的形式;可用的技术。

表单设计基础知识整理 - 简书

模式

容错格式

what:不限定用户输入的格式,后台处理成标准格式,如电话号码单独输入,155-1111-1111、155-111-1111、1551111111等都可以。

when:请求用户输入数据时,用户可能会大小写混用、缩写等。

why:简化用户的输入操作,让用户输入更简单。

how:考虑用户看的输入形式;将格式化后的文本显示给用户,让其查看是否有误。

结构化的格式

what:使用格式化的文本框来反映所请求数据的格式。

when:数据格式固定,且用户对该格式比较熟悉,你不希望任何用户违背你所期望的格式。

why:分隔成不同的组合,让用户检查、比对更加容易。(如序列号的输入)

how:输入框的长度反映字符的长度;前一个框写满后,光标自动切换到下一个框。

填空

what:将一个或多个数据字段,组合成句子的形式,用户的输入过程,就是在完成一句话,予以更明确,更容易理解。

when:通过前后的选择与标签来解释需要输入的是什么,以及输入完毕后将会进行的动作。

why:让界面变得更加自我说明。

how:标签描述与输入控件对齐;对于国际化的翻译要更加准确。

输入提示

what:举例说明需要输入的是什么样的数据。

when:输入要求/标签用户不太熟悉。

why:让标签更简短、专业,同时又减少用户的困惑。

how:tooltips可以减少空间占用,但是需要用户主动操作;提示文字也不应该过分醒目,减少视觉干扰。

输入提醒

what:占位符提示用户该怎么做/输入。

when:不能提供默认值的场景。

why:让界面不言自明。

how:选择合适的提醒文字,动宾短语。

自动完成

what:在用户输入过程中,猜测可能的答案,并在合适的时候自动把答案写到输入框里。

when:输入的内容很长,如网址,用户难以输入或难以记住。

why:减少输入工作量,显得很贴心;防错。

how:让用户可以选择是否采用提示的答案;不要干扰正常的输入。

下拉选择器

what:在弹出的面板中展示选项。

when:备选项较多(>7),让用户从集合中选择。

why:最初的展示空间较小,但是可以完成复杂的选择。

how:减少弹出面板中的滚动。

图示选项

what:通过缩略图、图标等形式,而非文字来显示可选项。

when:选择的对象为颜色、图片等。

why:更加直观,减少用户的人致复旦,用户不用将文字在脑海中转换成对应的图片/色彩。

how:显示出最主要的区别,可以考虑加上文字辅助说明。

列表建造器

what:穿梭框,将备选和已选分两个部分展示。

when:被选项较多,可能需要复选多个,选中后备选项减少,让选择更加容易。

why:让用户明确知道备选项中,那些选中哪些没选。

how:源列表放左边,目的列表放右边;可以新增、删除、排序;可多选(shift/control)、拖拽会提高易用性,可拖拽的话要给出功能提示,暗示用户。

良好的默认值

what:与西安为用户填入他们看想要填入的值。

when:减少用户需要做的操作,大多数情况下,用户只需要确认就行。敏感信息避免默认,不要违反数据保护条例。

why:减少用户输入;提供需要输入的数据示例。

how:叫大部分用户在绝大部分情况下,不会改变默认值的时候才使用。

错误显示在同一页

what:错误信息与出错的位置关联,让人知道是哪里出错了。

when:错误反馈的提示。

why:让用户意识到出错的位置,并知道该如何解决。

how:错误反馈的要点:让用户注意到;告知出错原因;告知出错位置;提供解决方案。按照谷歌的原则,可以归纳为:简洁、清晰、有效。

08-Builder和编辑器

对文本、布局、格式、图像、矢量图形等进行编辑的应用。所见即所得的模式,让用户可以直接看到编辑后呈现的下过,也可以对对象直接操作,选择对象的方式包括单击、双击、三击、框选、shift/control多选等。

模式

就地编辑

what:使用动态文本编辑器,让用户可以在显示文本的地方直接编辑。

when:用户想要改变文本文字。

why:显示和编辑不在一个地方,会分散用户的注意力,增加页面认知的复杂度。

how:区分编辑状态和显示状态;编辑时的位置和显示时的位置保持一致。

智能选择

what:软件自动选择相关对象,而不是让用户去选择。

when:需要选择多个对象的时候。

why:减少用户的操作,让用户和计算机各自做自己擅长的事情。

how:使用某个特定工具,如“魔棒”,或者某种特定操作(如shift+单击、三击)等来触发。

组合选择

what:使用不同的方式、选择位置等,来决定选择组合时选择对象还是选择组合;框选是选择内部的还是接触到的。

when:选择组合或者组合内的对象。

why:让用户知道如何选择组、如何选择对象,方便快速选择。

how:提供视觉线索告知用户是选中了单个对象还是选中了组合;

一次性模态

what:当一个模态打开后,执行一次操作,然后自动切换回默认模态或前一个模态。

when:用户不会重复待在这个模态里,如新建对象模态,新建完以后就回到选择模式。

why:流程更加流畅,不用用户手动点击切换。

how:确定用户只需操作一次;通过按键(如shift)来保持这个状态。

弹性加载模态

what:让用户通过某个按键或鼠标按钮来进入某种模态,如按住shift可多选。当用户松开时,离开这个模态并回到之前的模态。

when:用户对这个功能的使用频率较高,愿意付出学习成本。

why:通过光标来提示用户处于某种模态(如鼠标变为手形),用户不用那个频繁通过工具条来切换模态,有助于快速完成操作。

how:提供通过菜单进入模态的方法,也提供按下键盘等快捷方式。

强制调整大小

what:调整大小时,可以选择固定比例或随意缩放。

when:对图片、图形等进行变化的时候。

why:节约用户的操作时间。

how:提供变化框,显示中心、句柄等,显示变化框的时候为编辑模式。

磁性吸附

what:让对象与它附近的对象自动贴在一起。

when:用户需要将对象放在精确的位置

why:让鼠标的有效区域变大,不用一定要手动调整到一起,操作上更加便捷。

how:当用户把对象拖到另一个对象的边缘时,让它自动贴近那个对象。

对齐指示线

what:提供水平、竖直方向的参考线,帮助用户对齐各个对象。

when:用户需要让各个对象之间精确对齐。

why:参考线+磁性吸附,让用户操作更便捷;多人协作时,可以传递布局和位置信息。

how:让用户自由创建参考线,也可以直接删除;不影响当前的文档内容;可以让对象磁性吸附到参考线上;考虑显示智能参考线,在移动的时候显示,不操作的时候隐藏。

粘贴变种

what:除标准的粘贴之外,提供不同格式的选项。

when:用户需要选择包括内容、格式等一种或多种结合的粘贴情况。

why:用户可以自由选择,减少粘贴后的编辑工作。

how:粘贴的时候使用默认模式,并同时提供其它方式的选择。

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

根据内容来确定风格;视觉风格的影响因素包括:布局、颜色、图片、辅助元素、字体、空间和留白、光影、质感、阴影、纹理等。

模式

深色背景

what:图片或有色背景,拉开与前景元素的层次。

when:区分层次,聚焦于内容。

why:沉浸感,内容更突出;长时间看起来眼睛更舒服。

how:不要让背景干扰前景内容,区分前后层级。

少一点色彩,多一些价值

what:减少页面中使用的颜色种类。

when:页面设计的基本原则。

why:太多的颜色会显得很杂乱、花哨,会对用户的注意力形成竞争。

how:减少有彩色的种类,更多地使用无彩色;冷暖调和。

角落处理

what:圆角拉近与人的距离,直角更冷漠,与人有距离感,更高级。

when:按钮、边框等角落的处理。

why:使用圆角、直角的方式来强化整个页面的气质方向。

how:使用同样的圆角大小可以保持风格的一致性,不要混用。

边界回应字体

what:边框、描边的粗细以及圆角的风格等与字体的粗细、风格保持一致。

when:页面设计中有边框、按钮、文字等多种元素混用的时候。

why:各种元素统一化风格,让页面的整体风格更加明确,有助于整体的一致性。

how:各种细节、元素的风格要相互协调、一致。

发丝

what:使用细线作为分隔。

when:需要区分内容的时候。

why:区块的整体感更强,视觉上更精致。

how:将同一组的内容归纳到一起,形成大模块-小模块-细节的层次浏览。

粗细字体对比

what:通过字重、字号、颜色、字间距、行间距等来区分不同的层级。

when:突出主要内容,强化层次感。

why:让页面更有节奏感,不会显得单调;内容的组织结构具有自明性,有助于用户更好理解。

how:区分层级、区分不同的状态(选中与常规)、区分是否可交互。

皮肤

what:用户可以自定义外观风格。

when:用户需要个性化的定制;希望或者用户本身就会长时间使用的应用。

why:让用户形成一对一的专属感;增加用户粘性。

how:支持一键切换或者可以更加细化的添加装饰等。

文章结构

推荐阅读更多精彩内容