全书共分为11大章，分别为1导航；2表单；3表格；4搜索／排序和删选；5工具；6图表；7引导和视觉吸引；8设计模式；9反馈与功能可见性；10帮助和11反模式，本篇先总结前三章的内容。

第1章：导航

导航可以分为主导航和次级导航，主导航模式又分为全局(persistent)导航和瞬时(transient)导航，全局导航包括：跳板式、卡片式、列表菜单式、仪表式、陈列馆式、选项卡菜单式、隐喻式。

跳板式(Springboard）设计模式也称启动面板(Launchpad)，指的是一个带有菜单选项的登录界面，而菜单选项就是进入各个功能模块的入口。传统的跳板式中最多一屏可以放置9个选项（3*3格），如果再加入翻页指示（底部的小圆点），那么就可以提供更多的菜单选项。这种跨平台，具有兼容性并且可以重复利用的设计在2011年风行一时。但这种模式主要的缺点就是全部选项被扁平化，没有优先级。如今，它仍被一些应用采用，而且我们使用的iOS和安卓操作系统界面就使用了跳板式导航模式。磁铁模式（Tiles）将跳板式发挥到了极致，菜单选项有动态也有静态，动态磁贴可以显示未接来电数这样的动态信息，磁铁模式也被设计成用户通过添加来自定义用户界面的模式。

卡片式(Card)导航的原型是扑克牌，模仿了扑克牌中常见的切牌、洗牌、弃牌、翻牌等手法。卡片式设计模式要注意使用交互手势，iOS系统操作界面同时显示多个正在运行的应用程序时就使用了卡片式，上滑手势退出关闭应用。

列表菜单式(List Menu)是较为常见的一种模式，每一个列表项都是进入各个功能模块的入口，并且不同模块之间的切换需返回到列表主页，苹果的设计规范将其称为层级导航，安卓则将表达这种层级关系的返回按钮称为向上按钮。

仪表式(Dashboard)与跳板式和列表菜单式相似，当逐级深入各界面时，要提供能返回到仪表盘的导航。在需要使用关键指标或数据作为应用入口的时候，可以采用这种模式。

陈列馆式(Gallery)适合呈现例如新闻、菜谱或照片类经常更新、视觉效果直观且无层级内容的实时内容，可采用网格布局或轮盘布局、幻灯片模式。

选项卡菜单式(Tab Menu)这里分iOS和安卓来讲。iOS自第一版系统发布以来，就建议我们把标签栏作为扁平式应用的导航，底部标签栏应用普遍（注意区分标签栏和工具栏），如果你要设计这种标签栏，就要确保突出选中的选项卡。有一些应用，主要针对进行单一操作（例如拍摄）的用户，会把行为召唤按钮放置在标签栏中。而安卓系统为顶级导航或主导航提供了三种不同的选项卡菜单模式：固定选项卡(Fixed Tabs)（安卓的标签栏通常位于页面顶部）、下拉菜单(Spinners)和导航抽屉(Navigation Drawers)。无论桌面端还是移动端网页，都有一种设计趋势就是用户向下滚动屏幕时，顶部选项卡收缩或隐藏，向上滚动时又重新显示出来，这种模式被称为折叠选项卡式(Retracting Tab)。还有一种新生模式：可配置选项卡式(Configurable Tabs)，它是标准选项卡式的另一个变种，用户添加一个功能模块就增加一个新的选项卡，如果选项卡很多，整个选项栏就可以滚动。

隐喻式(Skeuomorphic)的特征是用页面模仿应用的隐喻对象，主要用在游戏设计中，在一些混音、照片以及旅游类应用也能看到。

瞬时导航包括：侧边抽屉式、下拉菜单式、转盘菜单式等。瞬时导航的出现必须通过点击或手势操作才会显现，这种导航的优势在于突破了屏幕画布，设计师们开始将内容层叠起来，通过3D图层面板和手势交互创造极佳的用户体验。

侧边抽屉式(Side Drawer)有两种风格，一种是浮层(Overlay)，通过轻化或点击手势打开抽屉，抽屉部分遮挡原页面内容，第二种是嵌入层(Inlay)，抽屉部分会把原页面的部分内容推出屏幕外。设计抽屉导航时友好的用户体验应在首次启动应用时打开抽屉，提醒用户那里有导航菜单。侧边导航大多放置在左侧，但也可以设计在右侧，又或者两边都有（例如左侧主菜单，右侧快捷链接），但要避免放置底端，因为这个位置与唤出iOS控制中心的向上手势相冲突。侧边抽屉式可以拥有多个层级，也可以在顶部高层次的场景中添加个人信息／邮件等内容。在有多个层级时，用户可以一层层点击，直到达到最底层的类别，每一层的导航模式也可以有不同变换，但切记不要让它承载太多功能，抽屉的首要功能是展示主导航选项。侧边抽屉还有一些新兴模式，比如在点击导航图标打开抽屉时，嵌入式抽屉不仅把上一页面向右推开，还采用3D效果将其推到后面。

下拉菜单式(Toggle Menu)以前在网页设计中被称为超级菜单(Mega Menu)，下拉式菜单也同样有嵌入式和浮层式两种风格，它的一个重要规则是无论什么样的手势，比如点击图标，轻滑、平移都能打开／隐藏菜单，显示菜单时，不要让菜单覆盖整个屏幕。安卓为这种主导航提供了一种特别的Spinner控件，用于在同一类别下不同视图间进行导航。

转盘菜单式(Pie Menu)也叫轮盘、环形菜单或径向菜单，这个模式可能是所有主导航模式中最不常用的，在游戏设计中较为受欢迎。

次级导航：所有的主导航模式都同样可以用作次级导航模式，此外还有一些模式也可以用作次级导航：翻页式、滚动选项卡式和伸缩面板式(Expand/Collapse Panel)。

翻页式(Page Swiping)：这种模式可以通过滑动手势快速导航内容页，表现这种导航模式最常见方式是利用页面指示器(page Indicator，iOS里对一行小圆点的叫法），运用翻页式时要利用移动的手势控制，不要依赖像下一步按钮或标签页这类桌面端模式，但注意要提供视觉指示，让用户知道可以使用滑动手势。

滚动选项卡式(Scrolling Tabs)：当在某一模块中显示多种类别或视图时，这种模式非常有用，可以左右滑动。如果要使用这种模式，请确保你的页面设计清晰地指示出了选中的标签项。

折叠菜单式(Accordion，又称手风琴式）能使用户在同一页面上查看到更多的信息，这种模式比跳转到另一页面再跳回去更高效。使用这种模式时，要用常见图标（比如向下展开箭头或加／减号）来指示折叠菜单的打开或关闭状态。

第2章：表单

常见表单模式有：登录表单、注册表单、个性化注册表单、结账表单、计算表单、搜索表单、多步骤表单、长表单。

登录表单应尽可能包含少的输入：用户名、密码、操作按钮、密码帮助以及注册选项。一些应用将这些输入框全部设计在同一页面，另外一些则首先显示登录和注册选项，然后让用户选择填写相应的表单，这时候应该让第一个输入框自动获取焦点，避免用户做额外点击操作，标签页是另一种呈现两个选项又能将导航最小化的可行模式。登录表单注意明文显示输入框的密码，同时也要为用户提供选项来隐藏密码。这些模式的任何一种都可以加上第三方登录选项（不要与第三方注册混淆）。还有一些登录模式也十分流行，比如直接放弃用户名只要求输入密码，在安装应用后，用户身份就可以得到验证，只要再输入密码就可以访问敏感数据，这一模式在之前的金融领域应用较多，此外还有常见的指纹登录，这一模式通常作为注册后辅助的便捷登录方式。注意登录页不一定要在应用启动时就出现，也不要在登录页上进行创新，采用标准设计会更易于用户登录。

注册表单也同样应该包含少的输入框，尽管企业热爱客户数据，企图在用户注册时获取更多信息，但切记每增加一项输入，就会大大降低用户注册的转换率，所以应尽可能地去掉不必要的确认电子邮件字段和确认密码字段。可以通过标出选填字段，并用提示用户核对的办法取代重复确认字段。还有一个选择是使用提示文字，但这会带来一个问题，就是用户一旦开始输入字符，提示文字就会消失，如果用户不注意就很容易忘了他应该在这里输入什么，悬浮标签是一种比较好的解决方式，只要输入文字，水印标签就会“悬浮”在输入框上方，还有一种不错的做法是在合适的时候以内联的形式给予及实时反馈。当你的应用对密码的安全性有特殊要求（诸如字母大小写）时，一定要在用户点击“提交／完成”前告诉他们，一旦用户完成注册表单，要立即给予注册反馈，通常是一个等待进度的视觉提示。另外，在用户注册时要为所有可能性考虑周全，比如我已经有了一个账号，但“不小心”又去注册了，这时尽管我的电子邮箱地址旁边有一个对勾表明这个邮箱是可用的，但在我提交时却收到错误提示，告知此邮箱地址已被使用，为什么不能在我填写注册表单电子邮箱字段时就告诉我此地址已被使用了呢，然后再跳转到填好我邮箱地址和找回密码的登录界面（因为这时系统已经推测我是想登录不是注册），而不是仅仅给我一个错误提示。在表单标签的对齐方式上，垂直对齐的标签往往更清晰可观。

个性化注册表单的目的是为用户提供更加个性化的内容，通过关联社交媒体鼓励用户找到好友来提升用户体验或获取设置所需数据。

多步骤表单：在网页端多步骤注册过程经常使用进程栏(Process bar)，但是移动设备的屏幕没有足够的空间显示那么大的进程栏，你可以采用显示当前步骤是第几步的方法分页展示，也可以将每一步的详情收起，点击向下展开，只显示当前步骤的导航信息，当前所处位置和下一步，最小化页面的数量和步骤数量，同时要方便查看之前所填写的全部信息。

结账表单的技巧：1、同时提供登录／注册和客人用户选项，允许客户在帐号信息中保存个人资料以便将来快速结帐，让客户完成支付后再提示他们去创建账号。2、简化流程，弃用进程栏，把分屏步骤融合进一个结账页，用户可以通过点击向下展开按钮完成每个类别的信息填写。3、提供省时的快捷方式，例如“导入通讯录地址”选项和“扫描卡号”都是比较便捷的做法。4、提供快速结帐方式，使用突出的行为召唤按钮来让用户用其他支付方式快速结帐。5、忘掉网页端，还有一些线下零售店通过扫描商品直接加入应用中的购物车，省去店内排队扫码结账的过程。

计算表单：例如房贷、税款或体重跟踪器都需要用户输入数字计算，对齐方式、标签、字体、按钮位置、对比及颜色都是影响移动表单易用性的重要因素，好用的计算器应用应该将输入结果实时地用视觉效果呈现出来，增加交互可视化。

搜索表单应该只有最核心的、不可或缺的输入字段，并提供合理的默认值，你可以在搜索结果页再提供筛选功能（搜索筛选在第4章会提到）。

长表单：一些表单不能只放进一屏之内，这种情况下，长的滚动页比把表格分割成多页要好得多，单页滚屏更可取，设计长表单中要注意的一点是何处放置执行和退出按钮。按钮位置的设定要遵守操作系统规范，比较可取的是iOS系统建议，命令按钮放在右上角，退出／取消键放在左上角；一些安卓应用会将按钮放置在顶部的操作栏或固定在底部。


第3章：表格

常见表格模式有：基本表格、无表头表格、固定列表格、概览加数据型表格，行分组表格、带有视觉指示器的表格、可编辑表格。

基本表格(Basic Table)模式就是带有固定列表头及网格布局的标准表格，文字左对齐，数字右对齐，省略垂直网格线来减少视觉噪音。

无表头表格(Headerless Table)的特征是，用较宽的行显示某一对象的多个变量，且没有列标签，常见的做法是突出显示行标识符。无表头表格非常适合显示项目合集（比如存货清单、菜谱、专辑等），也很适合显示搜索结果，和列表一样，都是为了快速浏览并执行操作。

固定列表格(Fixed Column)：对较大的表格来说，固定列表格模式或许是一个可行的解决方案。将最左侧的列固定，其他列可左右滑动，要注意提供视觉可见性，好让用户知道通过滑动可以显示更多的列，页面默认显示最重要的列。

概览加数据型表格(Overview plus Date)模式的特点是，表格内容的摘要显示在第一行数据的上方，这种模式在财务类的应用中十分普遍，概览可以是文字形式的，最常见的是图表式的图像，如果概览用饼图或环形图表示，且图表和图例占用了整个屏幕，那么采用逐级深入的模式会更好。

行分组表格(Grouped Rows)可以让数据更易读，一组分组行集可以作为节区头部，比如按年分组或按类别分组的交易记录，视觉上，应该将表格的汇总行和其他行区分开来。

带有视觉指示器的表格(Tables with Visual Indicators)模式中，波形图和图标可以提升表格的信息显示效果，但要谨慎使用，避免不必要的图标造成对数据显示的干扰。

可编辑表格(Editable Tables)几乎为微软office、谷歌云端硬盘和苹果numbers等电子表格所独有，可适当参照桌面设计的最佳实践，但移动端的可编辑表格不适合大量数据的编辑操作。