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：支持一键切换或者可以更加细化的添加装饰等。
文章结构
