移动应用UI设计模式

1. 前言
   1. 各种不同系统和设备越来越具备了自己特点的规范标准；
   2. 至少花六周时间熟悉为之设计应用的设备；让自己的设计契合设备本身的特性和规范，保持用户使用习惯的一致性；
2. 导航
   1. 主导航模式-全局导航（Persistent）
      1. 好处是显示出所有选项，结构一目了然，坏处是会受到屏幕空间的限制
      2. 全局还是瞬时，选择前应考虑如下问题：
         1. 应用层次是否扁平？应用的菜单分类是同级的还是有优先级的？主要类别是否只有少数几个，比如3-5个？
         2. 是否需要菜单一直处于可见的状态以便用户快速访问？
         3. 菜单分类有无状态指示，比如未读邮件数，或者未读消息数等？
         4. 如果以上有一个答案回答“是”，则应考虑使用全局导航；
      3. 常见设计模式
         1. 跳板式（启动面板式）
            1. 优点：可放置多个选项（甚至分页）；
            2. 缺点：选项间没有优先级（可适当改进，例如磁贴的大小和颜色）；未直接呈现内容（多了一个层级）；
         2. 卡片式
            1. 优点：相对跳板，可以直接优雅的展示内容；
            2. 缺点：在定位到自己想查看的内容前，需要划过多张卡片以进行筛选，操作动作的次数相对跳板式会更一点；
            3. 适用场景：内容更加重要且是内容之间是同等优先级；
         3. 列表菜单式
            1. 优点：可放置较多选项，并支持较长的选项名称；
            2. 缺点：不能直接展示内容；
         4. 仪表盘式
            1. 优点：直接呈现汇总的数据结果，给用户提供关键信息；
            2. 缺点：非数据类则不可用；
            3. 适用场景：例如记帐或理财类应用；
         5. 陈列馆式（或者叫列表风格？）
            1. 优点：视觉效果突出，用图片做为内容呈现吸引注意力；
            2. 缺点：如果图片不能动态更新，则类似跳板式的磁贴效果了
            3. 适用场景：经常更新、视觉效果直观的无层级内容，例如新闻类、菜谱类应用；
         6. 选项卡菜单式
            1. 优点：选项一目了然，可以快速切换；
            2. 缺点：选项个数有限，最多5个；（如果超过5个，则可能需要引入一个“更多”的选项了）
            3. 适用场景：用户需要经常在选项间切换；
         7. 新生模式
            1. 折叠选项卡：可隐藏，可呼出（例如知乎的操作按钮，往下滚动时缩起，以便用户可以有更大的空间来阅读，也减少干扰；向上滚动时呼出，以便用户对文章进行操作）；
            2. 可配置选项卡：可增删选项，可拖动排序；
         8. 隐喻式
            1. 狙击游戏；碟片音乐；相机；文件夹；书架杂志架；航班时刻表；
            2. 需要谨慎的使用隐喻式，因为如果设计不好，则会成为反模式；
   2. 主导航模式-瞬时导航（Transient）
      1. 好处是打破了屏幕的空间限制，扩大了边界；优先呈现内容；
      2. 坏处是用户需要学习才能知道如何使用，且每次触发导航也需要更多的操作；
      3. 常见模式：
         1. 侧边抽屉式
            1. 优点：可放置丰富选项；可带结构；（功能强大，但建议不要放太多功能，而是专注于导航本身，例如结合spinner来提供下一级的内容分类）；
            2. 缺点：用户不易发现（可通过动画演示来培养用户习惯，先显示主页，之后自动弹出抽屉）；
         2. 下拉菜单式
            1. 优点：适用选项较少时使用；
            2. 缺点：不易发现；
            3. 注意事项：
               1. 无论什么手势，都能打开菜单，包括点击、轻滑、平移；
               2. 安卓的SPINNER控件用于同级细分，而非上级选项；
         3. 转盘菜单式
            1. 优点：新颖，有趣；
            2. 缺点：可放置的选项不多；
   3. 次级导航模式
      1. 所有主导航模式都可以用做次级导航模式，即可以用几种主导致模式来排列组合；
      2. 常见设计模式：
         1. 翻页式：有点像传送带
            1. 优点：可全屏呈现内容，减少干扰，更有沉浸感；
            2. 缺点：需要页面指示器告诉用户还有其他页面；
         2. 滚动选项卡式（或许叫滚动TAB更容易理解一些）
            1. 优点：可放置多个分类；每个分类占据尽量大的屏幕面积；
            2. 缺点：需要按顺序切换分类；
         3. 折叠菜单式（手风琴式）
            1. 优点：可放置丰富的内容，可带结构；方便快速切换；
            2. 适用场景：可只展现部分内容，如果用户有兴趣了解更多，再点击深入（例如应用中心的APP介绍，一开始只显示摘要，通过点击了解更多，会展示隐藏的折叠内容）；
            3. 注意事项：使用常见图标告诉用户可展开或折叠；
3. 表单
   1. 目的：数据输入和配置（糟糕的设计经常导致用户中途放弃和流失）；
   2. 常见模式：
      1. 登录表单
         1. 尽可能少的输入；
         2. 自动获得焦点；
         3. 可显示/隐藏密码的开关；
         4. 也可考虑使用设备账号做为用户名，而用户只需设置密码即可（例如取手机号）；
         5. 如有可能，无须登录，先行使用；
         6. 登录采用标准设计，减少花哨的创新，可以减少用户的学习成本，从而提高转化率；
      2. 注册表单
         1. 尽量少的要求用户提供信息；
         2. 用忘记密码功能来减少密码核对的两次输入；
         3. 如有需要，可在提交的时候，再提示核对用户名；
         4. 用户名输入时，实时反馈是否重名；（避免提交时才提示失败，从而给用户带来挫败感）；如果重名，猜测用户可能面临的原因，提供选项给用户选择，而不是让他重新开始（比如跳转到登录页面，或者可能遗忘密码，需要重置）；
         5. 去掉传统的姓、名分录，采用FULL NAME一次搞定；
         6. 垂直标签优于水平标签；
         7. 使用提示文字（水印式标签），减少标签名的空间；还可以加上动态悬浮效果，避免用户输到一半时忘记自己在输入什么信息；
         8. 提交后马上给予实时反馈结果；（避免用户不放心是否成功）
         9. 如有可能，每个字段的输入，都进行实时验证并给予反馈；
         10. 注册表单尽量简短，控制在一屏之内，同时操作按钮要放在可视范围内并突出显示；
      3. 个性化设置表单
         1. 尽量减少用户的操作工作量，有时候创新的交互会让用户感觉有趣，但如果工作量增加太多，则会带来厌恶；
      4. 多步骤表单
         1. 去掉进程栏（因空间有限）；可用步骤数字提示替代，显得更加简洁；
         2. 可考虑单页设计，同时配合选择性展开模式；（此模式可方便用户回顾之前的输入结果）；
         3. 去掉不必要的字段，最小化页面的数量和步骤数量；
         4. 可以步骤中间提供详情入口，以便用户预览前面的数据输入；
      5. 结账表单
         1. 同时提供注册、登录选项和游客模式，方便用户最快完成支付动作；
         2. 简化流程，比如单一结账页面；
         3. 提供省时的快捷方式（如果有什么信息是可以复用的，提供快捷方式，减少用户的手工输入，比如从通讯录调用电话、地址，用拍照扫描银行卡信息等）
         4. 提供快速结账的方式（如亚马逊的一键下单）
         5. 充分利用手机的一些原生技术，而不必照搬网页端的设计模式（比如二维码扫描、指纹识别）；
      6. 计算表单
         1. 注意表单的排版，包括对齐方式、字体、标签、颜色、按钮位置、视线路径等，它们都会影响易用性；
         2. 如有可能，尽量可视化输入结果；
         3. 不要求精细数据的时候，可以使用划块来输入粗略的数字；
      7. 搜索表单
         1. 尽可能减少输入，而是在搜索结果中提供筛选功能；
         2. 实时显示搜索结果的数目；
         3. 保存搜索选项，方便下次快速复用；
         4. 搜索条件尽量控制在一页内；
         5. 思考用户最常用的条件，预输入条件；
      8. 长表单
         1. 单页+滚动条，优于分页；
         2. 果断放弃没有必要的输入字段；
         3. 按钮位置遵守设计规范，以便相应设备的用户可以根据习惯快速定位；
4. 表格
   1. 不要照搬PC端的设计；由于空间有限，需要更加严格的审视哪些信息是用户真正需要关注的（不要盲目猜测，而应该通过测试来验证）；
   2. 常见模式
      1. 基本表格
         1. 不要使用深色的网格线；
         2. 如果不使用垂直分隔线，则应确保列对齐；
         3. 文字左对齐，数字右对齐；
         4. 如果一屏内要显示大量信息，则采用非基本表格的形式；
      2. 无表头表格
         1. 适用内容本身可以自说明自己是何信息的场景，例如图片，关键字等；突出显示关键字；
         2. 优点：更加简洁；
         3. 技巧：
            1. 如果详情信息不多，可考虑使用嵌入式显示，避免用户跳转页面；
            2. 去除一切多余的噪音，例如毫无意义的图标、边框等视觉元素，精确对齐，以方便浏览；
            3. 对于次要信息，用较淡的颜色、较小的字体显示；
            4. 重要的信息不超过两项，如果太多，反而失去了重点；
      3. 固定列表格
         1. 适用：需要展示较多列信息的场景；
         2. 默认显示最重要的列；同时注意提示用户可以左右划动，比如故意半露半遮部分信息；
         3. 固定列边缘采用阴影；
      4. 概览加数据型表格
         1. 适用：用户想知道趋势的场景，例如财经，天气等；
         2. 如果概览图表太大，则可以考虑采用逐级深入的方式来显示余下信息；
      5. 行分组表格
         1. 优点：更方便阅读；
         2. 从视觉上将汇总行和其他行区别开来，一般来说汇总行较窄些，字体颜色浅一些；
      6. 带有视觉指标器的表格（即图标）
         1. 如果视觉指示器不能提升信息显示效果，则宁可不用，因为它会造成干扰；
      7. 可编辑表格
         1. 适用：就苹果、谷歌、微软三家的电子表格独有，其他应用一般都没有这个功能（这个功能其实很难设计，尤其在移动设备上更甚，投入产出比不高）；
         2. 注意事项：
            1. 清晰显示选中的单元格、行或列；
            2. 如果单元格有特定格式，例如日期/颜色，则提供对应的适当的编辑器；
            3. 除非编辑后出现错误，不然不需要每次的编辑都提供确认反馈，等最后保存整个文件时再确认即可；
            4. 如果需要批量数据输入，或者可能需要大量的编辑工作，避免使用本模式；（因为效率和体验很差，与其如此，还不如让用户去PC端编辑）