《移动应用UI设计模式》读书笔记

本书详细讲述了移动端涉及的绝大部分UI界面设计理念并配以丰富的图例，并且对各UI模式的适用场景和或许弊端进行了介绍，适合学习使用。

1. 全局导航设计理念：跳板式（或叫做启动面板）、磁贴式（跳板式的更新）、卡片式、列表菜单式、仪表盘式（数据成为选项入口）、陈列馆式（适于每天升级的内容，通常采取网格布局）、选项卡菜单式（或叫做标签栏）、隐喻式（或叫做拟物式，例如阅读APP的书架）

2. 瞬时导航设计思路：侧边抽屉式（风格分为浮层和嵌入层）、下拉菜单式（风格分为浮层和内嵌层，安卓提供了Spinner控件来推动这一理念）、转盘菜单式（环形的菜单栏）

3. 以上介绍的是主导航方式，其中所有的设计都可以应用到次级导航中。除此之外次级导航设计理念还可以包括下面这种：翻页式（通过使用滑动手势）、滚动选项卡式（可以滚动的标签栏）、折叠菜单式（又称手风琴式）

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. 长表单的设计建议：提供退出图标和命令按键并固定在页面的顶部或底端位置。

1. 表格通常的设计：（1）省略垂直网格线以提高视觉噪音，同时确保列对齐；（2）使用无表头表格显示项目集合，如菜谱、存货清单等，起到列表的作用；（3）较大的列众多的表格可以固定首列，通过左右滑动查看信息；（4）对于财务类型的应用可以在第一行数据的上面以图例形式显示表格内容的摘要；（5）采用行分组方法分组数据；

2. 可编辑表格的设计完善（适用于网页端和移动端）：（1）清晰地指示出选中的单元格和行；（2）如果单元格有特定的格式，就要提供适度的选择器；（3）除非编辑后形成错误提醒，否则没有必要为每项编辑都提供确定反馈，只需在保存时规定用户确定即可。

1. 搜索的设计理念：隐式搜索（在客户检索相关内容时自动给出提示）、显示搜索（包括文字输入、图片和数码扫描、语音、模态搜索等）、自动完成搜索（在输入时就进行搜索结果的匹配和筛选）、动态搜索（动态筛选）、限定范围的搜索（提供搜索范围的选择栏）

2. 在设计搜索时将保存的搜索、最近搜索记录和热门搜索纳入考量中会改进用户感受。

3. 排序——当搜索结果或其它信息总量增多时需要考量合适的顺序方法。排序的设计理念主要指顺序规则位置的摆放，包括单页排序和顺序浮层

4. 筛选的设计理念：单页筛选（固定在底端的筛选选项或滚动筛选栏）、筛选浮层、筛选表单（注意要解决搜索结果会被暂时隐藏的难题）、筛选抽屉、基于手势的筛选（例如地图中的缩放手势可以改变显示的结果数）

1. 工具的设计理念包含：工具栏、行为召唤图标（适用于页面只有单一操作，也可用于弹出一组级联菜单选项）、行内操作、多状况按钮（适用于一系列紧密相关的过程被迅速连续执行时，例如下载应用时由“安装”到“打开”）、上下文工具（触发的动作比如长按和左右滑动）、批量操作

2.工具栏虽然看上去和导航栏差不多，但不具备导航作用移动应用ui设计模式，主要适于放置如转发、编辑等软件。工具栏的设计要根据移动端的操作系统，iOS中工具栏可以放在底端或收起，安卓平台中一般位于页面顶端。

1. 图标设计的方法：（1）了解基础知识，很多桌面端的界面设计准则都适用于移动应用的图例设计；（2）保持简单，不要让多余的数据或视觉效果提高图表的有效性；（3）进行用户测试，一定要让用户能读懂并能恰当理解；（4）了解你的研发团队正在使用的图表库。

2. 图表的设计理念：带有筛选器的图例（使用筛选功能提升图表设计）、交互式时间线、数据点详情（点击饼图中的扇区或折线图的点显示数据详情）、逐级深入、概览加数据、交互式预览（适用于需要显示分析的场景移动应用ui设计模式，随着客户改变数据而差异）、仪表盘、缩放（引导客户横屏浏览更多数据或者直接缩放等）、迷你图、嵌入式图例、阈值、透视表格（相当于置于大表格中的小概览表格）

1. 引导（又称向导）的原则：（1）少用文字，多选用交互的方法使用户自己操作；（2）不要前置引导，将信息分成小块，最初只介绍必要的个别，当客户必须时再逐一展示；（3）给予用户成就感；（4）在使用中提高学习；（5）倾听客户的心声，做个不带倾向的用户测试；（6）不要在最终再设计引导，将鼓励融入整个设计过程；（7）允许用户跳过；（8）引导中传达的所有信息需要都可以随时访问

2. 视觉吸引的设计理念：提示、持续的视觉吸引（例如永远留一个空位置以便用户添加内容）；可看到的视觉吸引

1. 提供社交服务的设计理念：注册（正确使用常用社交网络的API接口以简化登录体验）、连接（使用户能够连接访问它们已有的社交网络、关注功能、（社交网络的核心，应包括足够多和足够有趣的信息）、群组、游戏化（添加更新概念和激励机制等）

1. 恰当的、清晰的、及时的反馈对于用户更加重要。反馈的设计理念：错误提醒（应当突出而确立）、确认（在执行操作后提供确定反馈，但不要打断操作流）、系统状况（例如加载时需要让用户了解到进程，进程较长时提供更改按钮）

2. 功能可见性指一个对象具备让用户了解它可以拿来执行一项操作的特点，实现这点需要一些方法。具体案例如下：（1）使用斜面和阴影示意元素是可点击的；（2）使用圆点指示器、页面元素的溢出、滚动条等示意页面能够滑动；（3）使用手柄示意可进行的拖拽移动和拖动的功能

1. 帮助的设计理念：入门介绍、用户手册/帮助平台、常见问题解答列表、功能使用向导（可能会对应用的转化率和使用量产生负面影响，应慎重使用）、新手引导、上下文帮助、收集反馈

1. 反模式一词来源于计算机科学，也称为陷阱，指一类一般是重复发明的糟糕的难题的解决方案。在UI设计时应防止反模式。

2. 反模式的弊端来源：标新立异（无效的、和已有设计理念冲突的变革只会使用户厌烦）、不必要的复杂（在简化设计和感受时尚中间要选用后者能够为用户提高强度）、隐喻错位（包括控件错位、图标错位、手势错位、心理模型错位）、愚蠢的对话框（在不必要的地方干扰用户行为）、图表垃圾（图表是为了更好地展示数据而不是为了取得绚丽的视觉效果）、按钮海、格格不入（注意iOS平台和安卓系统在图标设计上的区别）

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-122307-1.html