如何设计移动端产品？
分享人：赵春蕾
目录
1.降低认知负荷
2.满足用户的控制感
3.界面的无障碍设计
4.导航栏设计
5.导航中的动效设计
6.关注用户的首次启动
7.加快App的响应速度
8.提高内容的展示质量
9.触控设计
10.情感化设计
11.优化消息推送
12.针对移动设备的优化
13.App的设计应适应新兴市场
14.测试和反馈
当设计移动端产品时，有很多事情需要考虑，在今天小课堂中，总结了移动端产品设计中的一些建议，希望能给大家以启发。
1、降低认知负荷
1.1整理界面
1.2满足用户的控制感
1.3界面的无障碍设计
右图所示的tab bar明显优于左图（图像来源：Apple）
点击后，展开更多隐藏项（图片来源：Ramotion）
任务分解后，降低了用户对任务的难度预期,减少用户输入（图片来源：Murat Mutlu）
2. 满足用户的控制感
2.1交互元素可预测、符合用户习惯
2.2请正确使用“返回”按钮
2.3有效的错误信息
Spotify的错误页面只有“出现错误”字样，无任何解决方案
错误信息应包含以下内容：
1 出了什么错，可能的原因；
2为了修复错误，接下来用户要怎么做。
3. 界面的无障碍设计
3.1照顾色盲人群
3.2动效是可选项
色盲用户无法区分红色突出的字段,同时使用标签、icon和颜色传递信息
4.导航栏设计
4.1使用标准化的导航组件
4.2不要混用导航模式
4.3导航栏可见
4.4标注当前的位置或层级标题
iOS的tab bar（图片来源：Ramotion）
Apple出品的Health App提供了当前页面的信息
5. 导航中的动效使用
动画是描述状态转换的最佳工具。动画能帮助用户理解页面之间的状态变化、触发了什么、以及如何恢复。
功能动画可以有效地引导用户注意力，使复杂的转化更好理解（图片来源：Jae-seong, Jeong）
6.关注用户的首次启动——第一印象决定最终印象
6.1 避免登录才能使用
6.2优化用户引导页的用户体验
6.3不要在首次启动时，要求用户进行任何设置操作
6.4避免在一开始就请求各类权限
Duolingo引导页的快速测试
7. 加快App的响应速度
7.1 在可见区域内加载内容
7.2 显示加载时间
7.3分散用户注意力
7.4 加载占位图（skeleton screen）
精细制作的动画能给用户小惊喜（图片来源：UI8）
占位符能立刻显示（图片来源：Tandem Seven）
当App加载数据时，占位图能给用户一种App响应快、性能好的印象。loading时的“菊花”只是告知用户正在发生什么，而占位图则能显示更细致的加载进度。
8. 提高内容的展示质量
8.1 提高文本的可读性易读性
8.2 高清图片和合适的宽高比
8.3视频的纵向播放
光线较强时，低对比度的界面几乎无法阅读
Facebook的直播支持纵向播放，同时可以查看用户留言/评论（图片来源：Giphy）
9.触控设计
9.1为手指设计，而不是为光标设计
9.2拇指触控区域
9.3交互反馈
屏幕尺寸越大，自然拇指区的相对面积越小。（图片来源：Smashing Magazine）
设计App时应考虑到所有区域：
绿色区域是导航栏或频繁的交互操作的最佳位置（如操作按钮）；
红色区域是潜在的危险选项的最佳位置（例如“删除”或“清空”），用户不太可能误触到此区域。
利用动画及时的给用户反馈（图片来源：Vadim Gromov）
10.情感化设计
10.1. 个性化体验
10.2. 可爱的动画
11. 优化消息推送
11.1. 推送有价值的内容
11.2. 避免在短时间内集中发送多条通知
11.3. 把控消息推送的时机
11.4. 考虑其他渠道传递消息
12. 针对移动设备的优化
12.1. 考虑到中断情况
12.2. 利用移动设备的功能特点
12.3. 拓展产品渠道
13. App的设计应适应新兴市场
13.1. 落后的网络普及
13.2. 有限的数据
13.3. 有限的设备性能
13.4. 结合当地文化和美学特点
13.5. 结合区域特点设计产品功能
14. 测试和反馈
14.1. 反馈机制
14.2. 设计是一个永无止境的过程
总结
伟大的产品是用户体验和功能的完美结合，这是我们不懈追求的目标。但不要指望着App的初始版本就是完美的，相反，我们应将产品视为不断改进、不断调整的长期项目。冰冻三尺非一日之寒，结合数据、测试、反馈、需求分析等手段，来不断改进产品，不断优化体验，才是产品设计的正确姿势。
鸣谢
感谢大家观看
BY : 赵春蕾