本书详细讲述了移动端涉及的绝大部分UI界面设计模式并配以丰富的图例，并且对各UI模式的适用场景和可能问题进行了介绍，适合学习使用。
第1章 导航
1. 全局导航设计模式：跳板式（或叫做启动面板）、磁贴式（跳板式的升级）、卡片式、列表菜单式、仪表盘式（数据作为选项入口）、陈列馆式（适于经常更新的内容，通常采用网格布局）、选项卡菜单式（或叫做标签栏）、隐喻式（或叫做拟物式，例如阅读APP的书架）
2. 瞬时导航设计模式：侧边抽屉式（风格分为浮层和嵌入层）、下拉菜单式（风格分为浮层和嵌入层，安卓提供了Spinner控件来实现这一模式）、转盘菜单式（环形的菜单栏）
3. 以上介绍的是主导航模式，其中所有的设计都可以应用到次级导航中。除此之外次级导航设计模式还可以包含以下这些：翻页式（通过使用滑动手势）、滚动选项卡式（可以滚动的标签栏）、折叠菜单式（又称手风琴式）
第2章 表单
1. 登录表单的设计建议：（1）包含尽可能少的输入；（2）尽可能将输入框设计在同一页面上；（3）如果有明文显示密码的功能，提供给用户关闭和开启的图标或文字提示；（4）使第一个输入框自动获得焦点
2. 注册表单的设计建议：（1）去掉不必要的输入元素，例如确认电子邮箱字段和确认密码字段（因为可以加入密码明文显示的功能）；（2）提供即时反馈，不要在用户提交之后告诉用户他的输入不合法；（3）提交后给予注册反馈；（4）如果信息较多可以采用多步骤表单进行注册，记得标注用户所处的位置并提示下一步
3. 对于整个应用而言，如果有注册必要那么登录和注册应放置在首页，如果没有必要那么最好让用户在使用应用时无需登录和注册。
4. 结账表单的设计建议：（1）同时提供登录、注册和客人用户选项；（2）简化流程，弃用进程栏；（3）提供省时的快捷方式；（4）提供快速结账方式；（5）忘掉网页端
5. 计算表单的设计建议：（1）保证表单的易读性；（2）可以尝试增加交互可视化
6. 搜索表单的设计建议：（1）保持短而简单，搜索条件尽量控制在一页内；（2）提供合理的默认值和保留搜索的选项以便后来使用；（3）在搜索结果页提供筛选功能
7. 长表单的设计建议：提供退出按钮和命令按钮并固定在页面的顶端或底端位置。
第3章 表格
1. 表格通常的设计：（1）省略垂直网格线以减少视觉噪音，同时保证列对齐；（2）使用无表头表格显示项目集合，如菜谱、存货清单等，起到列表的作用；（3）较大的列较多的表格可以固定首列，通过左右滑动查看信息；（4）对于财务类型的应用可以在第一行数据的上方以图表形式显示表格内容的摘要；（5）采用行分组方式分组数据；
2. 可编辑表格的设计规范（适用于网页端和移动端）：（1）清晰地指示出选中的单元格和行；（2）如果单元格有特定的格式，就要提供适当的选择器；（3）除非编辑后产生错误提示，否则没有必要为每项编辑都提供确认反馈，只需在保存时要求用户确认即可。
第4章 搜索、排序和筛选
1. 搜索的设计模式：隐式搜索（在用户检索相关内容时自动给出提示）、显示搜索（包括文字输入、图片和数码扫描、语音、模态搜索等）、自动完成搜索（在输入时就进行搜索结果的匹配和筛选）、动态搜索（动态筛选）、限定范围的搜索（提供搜索范围的选择栏）
2. 在设计搜索时将保存的搜索、最近搜索记录和热门搜索纳入考虑中会优化用户体验。
3. 排序——当搜索结果或其他信息数量较多时必须考虑合适的排序方式。排序的设计模式主要指排序规则位置的放置，包括单页排序和排序浮层
4. 筛选的设计模式：单页筛选（固定在底端的筛选选项或滚动筛选栏）、筛选浮层、筛选表单（注意要解决搜索结果会被暂时隐藏的问题）、筛选抽屉、基于手势的筛选（例如地图中的缩放手势可以改变显示的结果数）
第5章 工具
1. 工具的设计模式包括：工具栏、行为召唤按钮（适用于页面只有单一操作，也可用于弹出一组级联菜单选项）、行内操作、多状态按钮（适用于一系列紧密相关的过程被快速连续执行时，例如下载应用时由“安装”到“打开”）、上下文工具（触发的动作包括长按和左右滑动）、批量操作
2. 工具栏虽然看上去和导航栏差不多，但不具有导航作用，主要用于放置如转发、编辑等工具。工具栏的设计要依据移动端的操作系统，iOS中工具栏可以置于底端或收起，安卓系统中通常位于页面顶端。
第6章 图表
1. 图标设计的技巧：（1）了解基础知识，很多桌面端的图标设计准则都适用于移动应用的图表设计；（2）保持简单，不要让多余的数据或视觉效果降低图表的有效性；（3）进行用户测试，一定要让用户能看懂并能正确理解；（4）了解你的开发团队正在使用的图表库。
2. 图表的设计模式：带有筛选器的图表（使用筛选功能增强图表设计）、交互式时间线、数据点详情（点击饼图中的扇区或折线图的点显示数据详情）、逐级深入、概览加数据、交互式预览（适用于需要显示预测的场景，随着用户改变数据而变化）、仪表盘、缩放（引导用户横屏浏览更多数据以及直接缩放等）、迷你图、嵌入式图例、阈值、透视表格（相当于置于大表格中的小概览表格）
第7章 引导和视觉吸引
1. 引导（又称向导）的原则：（1）少用文字，多采用交互的方式使用户自己操作；（2）不要前置引导，将信息分成小块，最初只介绍必要的部分，当用户需要时再逐一展示；（3）给予用户成就感；（4）在使用中强化学习；（5）倾听用户的心声，做个不带倾向的用户测试；（6）不要在最后再设计引导，将引导融入整个设计过程；（7）允许用户跳过；（8）引导中传达的所有信息应该都可以随时访问
2. 视觉吸引的设计模式：提示、持续的视觉吸引（例如永远留一个空位置便于用户添加内容）；可发现的视觉吸引
第8章 社交模式
1. 提供社交服务的设计模式：注册（正确使用常见社交网络的API接口以简化注册体验）、连接（使用户能够连接访问他们已有的社交网络、关注功能、个人资料（社交网络的核心，应涵盖足够多和足够有趣的信息）、群组、游戏化（添加升级概念和激励机制等）
第9章 反馈与功能可见性
1. 恰当的、清晰的、及时的反馈对于用户非常重要。反馈的设计模式：错误提示（应当突出而明确）、确认（在执行操作后提供确认反馈，但不要打断操作流）、系统状态（例如加载时应该让用户了解到进程，进程较长时提供取消按钮）
2. 功能可见性指一个对象具有让用户知道它可以用来执行一项操作的特性，实现这点需要一些技巧。具体实例如下：（1）使用斜面和阴影示意元素是可点击的；（2）使用圆点指示器、页面元素的溢出、滚动条等示意页面能够滑动；（3）使用手柄示意可进行的拖曳移动和缩放的功能
第10章 帮助
1. 帮助的设计模式：入门介绍、用户指南/帮助系统、常见问题解答列表、功能使用向导（可能会对应用的转化率和使用量产生负面影响，应谨慎使用）、新手引导、上下文帮助、收集反馈
第11章 反模式
1. 反模式一词来源于计算机科学，也称为陷阱，指一类通常是重复发明的糟糕的问题的解决方案。在UI设计时应避免反模式。
2. 反模式的问题来源：标新立异（无效的、和已有设计模式冲突的创新只会使用户厌烦）、不必要的复杂（在简化设计和展现创意中间要选择前者才能为用户提升效率）、隐喻错位（包括控件错位、图标错位、手势错位、心理模型错位）、愚蠢的对话框（在不必要的地方干扰用户行为）、图表垃圾（图表是为了更好地展示数据而不是为了获得绚丽的视觉效果）、按钮海、格格不入（注意iOS平台和安卓平台在界面设计上的区别）
网友评论