方寸指间——设计流程

　　原型流程图　　

　　移动产品的原型界面很小，一般在第一屏中就能够展现产品的主要内容。所以，在产品架构图、产品地图

　　和产品流程图中，可以直接用原型界面来进行可视化展现，让其他涉及人员可以非常直观地了解整个产品的内

　　容，更快速的理解产品，抓住最核心的内容。此方式适用于产品的主要界面流程设计，可以提升产品的敏捷开

　　发效率。　　

 　　　

 

　　原型界面标注

　　不同于PC原型的大界面，移动APP都是320px宽度的界面。考虑到内容和说明之间的关联性，为了让团队的后

　　续成员能够更直观的理解，我们可以在界面左右两边的剩余空间中直接添加交互说明。

　　　　

 　　　　　　　　

　　移动设计6原则

　　内容优先、避免键盘输入、有效触动、手势操作、减少页面跳转、架构扁平化、平台一致性、有效反馈、情感化

　　、多通道设计、易学易用......这些指导性内容浓缩成更为简单易记的6条移动设计原则——简洁、高效、一致性

　　、反馈、情感化、移动化。

　　　　

 

　　简洁

　　简洁地目标是突出重点，让用户能在小屏幕上聚焦内容。PC上的简洁设计会考虑删除、隐藏、组织、转移，这样

　　的设计思路同样适用于移动端。

　　1、 从产品设计的开始，就不能够抱着将PC上的一切功能都网移动端搬的思想。敢于删除不必要的内容，只抓重

　　　　点，是对移动设计师的基本要求。

　　2、 做到内容优先。在浏览内容的过程中，适时地隐藏一些干扰功能，让内容最大化。多采用手势操作，也能够

　　　　极好的隐藏一些操作元素。

　　3、 多了解移动端的特性，将各种操作方式转移到传感器等硬件设备上，可以让设计更好玩让界面元素更加简洁。

　　　　

 

　　高效

　　高效对于移动产品来讲至关重要，稳定、流畅和快捷都是高效的表现。

　　1、避免键盘的输入

　　2、有效的触动：提高触动的有效性，减少用户的挫败感。例如：针对点击操作，可以增大点击区域，也可以用手

　　　  势来代替点击，这可是让操作更加有效快速。

　　3、减少页面的跳转：更少的页面跳转能增加页面的连贯性，减少用户的记忆负担，让用户能在任务的处理上有更

　　　  好的连续性。所以在形式上，需要给用户留存当前页；在功能上，适当设置全局性功能，使用户路径扁平化。

　　　　

 

　　高效•避免键盘输入

　　在很多情况下，键盘输入容易引起用户的焦虑和挫败感。越多的输入，意味着越多的错误率。所以在设计上要做到

　　减少输入、转化输入方式，从而提高输入效率。

　　1、减少键盘输入：保留之前输入的内容，例如：在文本框中输入内容，要做到意外退出之后能够再返回，依然可

　　　  以看到之前输入的内容。也可以尽快通过关键字联想，例如：在搜索的时候输入一个文字，可以通过联想匹配

　　　  让用户尽快得找到目标，而无需输入全部的文字。

　　2、转化输入方式：乐意通过将常用的输入框转化为选择控件，或者其他的自定义控件。语音输入、传感器都是便

　　　  捷的输入方式。

　　　　

 

　　高效•有效的触动

　　确保每次操作的有效性，可以有效的提升用户对产品的信任感和满意度。

　　1、提高点击的有效性：扩大点击区域和调整恰当的间距是两种有效的途径。按钮的点击区域要比视觉区域大，这样

　　　  才能增加点击的命中率。建议手指触屏的点击目标是7~9毫米。此外，在有多个可点击元素的时候，要预留足够

　　　  的间距以防止误点击。

　　2、增加手势操作：手势操作能够快速的、高效的实现操作目标。一般手势的可操作区域也比较大，从屏幕的边缘就

　　　  可以开始操控。

　　　　

 

　　高效•较少页面的跳转

　　从信息的连贯性和操作的便捷性考虑，我们应该做到减少无所谓的界面跳转，尽量给用户在同一个界面上操作的感觉。

　　1、使用抽屉：以抽屉的方式推开，显示关联的内容。常见的展开列表分组和导航抽屉方式都保持着信息的层级和关联

　　2、使用浮层：显示的内容若在界面的上方会盖住界面的内容，相对于抽屉显示的区域更小，但是更突出。常见的Tab

　　　  样式也可以归纳为对界面覆层的应用。

　　3、局部处理：用户的操作行为或者系统的反馈行为，尽量在当前页面中处理，这样可以让用户感觉高效，也方便用户

　　　  继续处理其他的事件。

　　　　

 

　　一致性

　　一致性是设计的基础原则，它让产品更加易用，降低用户的认知成本，从而带来整体体验的提升。

　　1、设计上的一致：基本结构布局、模块化内容、文案、交互行为和视觉风格等方面的设计需要遵循一致性要求。

　　2、与平台环境的一致：例如IOS屏幕左上角的返回设置，除非产品的特殊设计需要，否则尽量不要改变这种设计，保

　　　  持与平台的一致性，避免用户使用上的不习惯。

　　3、跨平台的一致性：移动产品往往是多平台布局，包括IOS、Android和Web APP，内容设计上的处理要追求一致性。

　　　　

 

　　一致性•规范

　　要确保产品的一致性，以及多团队协作的快速产出和统一性，监理规范内容是一种很好的方式。下图为淘宝手机HTML5

　　版本的规范，其内容包括：平台基本原则、主框架和频道规则、视觉和文案风格、控件和组件规范等。对组控件的具体

　　容都做了详细的描述，确保了后期其他频道整体风格的统一，保证了整个站点的整体性。

　　　　

 

　　反馈

　　屏幕小、硬件性能差、网络不稳定......移动产品需要面对各种情景，所以有效、清晰和及时的反馈起着重要的作用，它

　　能够让用户知道自己的行为正在被后台程序响应和处理中。

　　1、为用户的行为操作提供及时反馈。例如：点击后列表背景会变为灰色，这样在网络缓慢或者性能较差的设备上，用户

　　　  能够迅速觉察到已经点击成功，从而避免多次点击。

　　2、提供有价值的状态提示反馈。但是注意避免使用模态窗口，打断用户的当前任务。可以考虑使用toast、状态栏、导

　　　  航栏等反馈方式，也可以考虑结合声音、震动、闪光灯等的组合方式，让反馈信息更有效。

　　　　

 

　　情感化

　　产品的情感化设计，可以让用户倍感愉悦。出色的视觉效果是产生令人预约的产品的基础；幽默的文案风格，能让用户

　　面对问题时更加的舒心；惊喜的互动效果，让用户爱不释手；各种智能贴心的处理，让用户倍感关怀；个性化的设计，

　　让用户倍感产品独特的气质。设计的最后，再多想想，还有哪些方面可以做情感化的处理。

　　　　

 

　　移动化

　　要做一款移动产品，就要从PC的思维逻辑中跳出来，充分去了解移动端的设备特性，思考产品如何才能够更加移动化。

　　例如，要对手势充分利用，而不是简单的点击。要考虑麦克风、摄像头、震动硬件、LED灯等如何跟产品更好的融合。

　　同时要了解传感器的特点，摇一摇的重力感应，LBS地理位置，陀螺仪的游戏效果，这些可以让产品更加多样化。