移动设计

一 设计流程

1. Web app产品流程

需求->交互原型->视觉效果图->前端demo->开发->测试->上线。

2. Native app产品流程

需求->交互原型->视觉效果图->开发->测试->提交审批->上线。

二 设计原则

1.简洁

简洁的目标是突出重点，让用户能在小屏幕上聚焦内容。
(1)敢于删除不必要的内容，只抓重点。
(2)做到内容优先。浏览过程中适时隐藏一些干扰功能，做到内容最大化。多采用手势操作，也能极好地隐藏一些操作元素。
(3)多了解移动端的特性，将各种操作方式转移到传感器等硬件设备上，可以让设计更好玩，让界面元素更简洁。

2.高效

高效对移动产品来说至关重要，稳定、流畅和快捷都是高效的表现。
(1)避免键盘输入：设计的时候要思考是否有更好的输入方式。例如，将文字输入转化为语音、手势或传感器等。

价格区间 采用简单的拖拉实现
海豚浏览器自定义手势

(2)有效触动：提高触动的有效性，减少用户的挫败感。例如，针对点击操作，可以增大点击区域，也可以用手势来代替点击，这可以让操作更加有效快速。

扩大点击区域；多个可点元素时，预留足够间距。
iOS的手势滑动返回，不在需要左上角按钮

(3)减少页面跳转：更少的页面跳转能增加页面的连贯性，减少用户的记忆负担，让用户在任务的处理上有更好的连续性。所以在形式上，需要给用户留存当前页；在功能上，适当设置全局性功能，使用户路径扁平化。

使用抽屉、使用浮层、局部处理

3.一致性

一致性是设计的基础原则，它可以让产品更加易用，降低用户的认知成本，从而带来整体体验的提升。
(1)设计上的一致：基本结构布局、模块化内容、文案、交互行为和视觉风格等方面的设计遵循一致性要求。
(2)与平台环境的一致：例如iOS屏幕左上角的返回按钮，除非产品的特殊设计需要，否则尽量不要改变这样的设计，保持平台的一致性，避免用户在使用上的不习惯。

4.反馈

(1)让用户的行为操作提供即时的反馈。例如，点击后背景变灰色，这样在网络缓慢或者性能较差的设备上，用户能快速察觉到已经点击成功，从而避免多次点击。
(2)提供有价值的状态反馈。避免使用模态窗口，打断用户的当前任务。可以考虑使用toast、状态栏、导航栏等反馈方式，也可以考虑结合声音、振动、闪光灯等的组合方式，让反馈信息更有效。

5.情感化

产品的情感化设计，可以让用户倍感愉悦。出色的视觉效果是产生令人愉悦的产品的基础；幽默的文案风格，能让用户面对问题时更加舒心；惊喜的互动效果，让用户爱不释手；各种智能贴心的处理，让用户倍感关怀；个性化的设计，让用户感受到产品独特的气质。设计的最后，再多想想，还有哪些方面可以做情感化处理。

颠簸的公交车上看小说是一件特别费眼神的事。如果在设计上，利用重力传感器来判断用户的环境，然后弹出"转为大号字体，保护视力"的提示，是不是让用户倍感关怀？

6.移动化

要做一款移动产品，就要从PC的思维逻辑跳出来，去充分了解移动设备的特征，思考产品如何才能更具移动化。例如，要对手势充分利用，而不只是简单的点击。要考虑麦克风、摄像头、振动硬件、LED灯等如何跟产品更好的融合。同时更要了解传感器的特点，摇一摇的重力感应，LBS地理位置，陀螺仪的游戏效果，这些可以让产品更加多样化。