画好交互流程图的4个技巧
相信不少人都看过网上各种酷炫的动态交互原型，笔者也是很欣赏的，以前也学着用flash和AE做过类似的高逼格动态原型，但是个人感觉在实际项目中，动态原型图的性价比并不高。动态高保真原型，更适合用于公开展示，需要有对原型相当了解的人来讲解。而我下面要说的这种全流程交互图，在需求评审，方案传递时更为实用，视觉设计师，程序员只要看图，就能快速理解产品功能，比起文字型文档，交互流程图极大降低理解成本，提高沟通效率，制作成起来也比较快速。
下面是笔者以前画的交互流程图，用的工具是Photoshop，比较注重细节。现在由于时间问题，多用axure，无法像Photoshop 那样扣细节了，也没办法画斜线，但好处是快，导出动态demo比较方便。我个人还是比较推荐用Axure的。
接下来进入正题，说说画出易懂，美观的交互流程图的5个技巧
一、完整的主干闭环+可能出现异常反馈
1、确定一个目标，例如：新用户注册，从第一步开始，按用户页面跳转顺序摆放界面。
2、针对新用户注册这个功能，完整的功能交互流程图，必须包含：新用户开启APP，触发注册，注册流程，完成注册，进入游戏这几个关键步骤的完整闭环。
3、在关键步骤的主干闭环之外，需要将所有的异常提示展示出来，如：手机号无效，手机号已注册，网络超时等主干流程中可能遇到的异常提示，以及对应处理反馈。
二、按钮点击效果+页面跳转逻辑
1、主干流程的按钮，均要描述点击后的处理，以及可能出现的异常反馈。
2、触发页面跳转后，需要用箭头标注跳转逻辑，两条流程线之间，尽量不要有十字交叠。
三、标题和注解
1、交互流程图中，主要包含四类注解：模块标题、界面标题、界面注解、流程箭头注解。
2、模块标题：一般是主干流程的功能名称，如新用户注册流程、充值流程等。
3、界面标题：即每个界面的名称，如启动页、登录页等，可展示在每个界面上方，并附带编号。
4、界面注解：是交互图中最重要的文字内容，一般展示在对应界面下方，可包含页面动态描述，页面异常情况描述，页面简要逻辑描述等。
5、流程箭头注解：一般是展示在箭头线上的，对于页面跳转的描述，如：点击注册跳转。
四、视觉相关要素
1、视觉焦点：一个界面，尽量只展示一个重点信息，并且使其成为视觉焦点，从面积，放置位置，颜色，字号等元素，都做强化，其他非焦点信息，则弱化。
2、图像：在交互图中，每个模块尽可能用块状底色区分，避免使用过多线框，否则容易使交互图变得复杂，加重视觉负担。
3、配色：建议交互图中，使用一种基准色，如蓝色或灰色，叠放层级靠后的模块，用深蓝色，靠前的模块，用浅蓝色。同时，按钮可单独使用一种颜色，如绿色。部分需重点突出的元素可用提醒色，如橘色。箭头可用半透明的黄色等。
4、摆放：所有界面上下对齐，间隔一致，保证工整的视觉效果。
再附上一张关于手势操作的描述图，每个操作细节都要清楚描述
附录：如何提升互联网产品体验：
1、把用户假设成一个聪明但是很忙的人，不要指望让用户记住任何操作流程，而是随时提供清晰的指引和尽可能自由的页面跳转入口。
2、用户的高频操作，应尽量减少操作步骤，而低频操作，则无需刻意关注步骤数，更应该关注的是每一步的操作难度和界面信息是否易于理解。应尽量降低选择难度，别让用户花时间去理解。
3、一个页面只突出一个重点，用大小，颜色，形状来做分类，让用户一眼可分辨到重要信息。
4、扁平化和渐进披露相结合，视场景而定，而不是机械地执行扁平化。流程扁平化的好处是，可以让用户提前感知流程，页面跳转的成本也比较低，但是比较考验对页面信息的整合处理，渐进披露是预先把次要信息隐藏，当用户触发了对应操作，进入对应流程，才给出相应反馈或指引，好处是让用户更专注，减少理解成本。
5、页面一致性也是这个道理，就我理解，一致性的是为了让用户形成习惯，进而减少理解成本。比如，确定操作永远在右侧，选中状态永远高亮，红色代表严重警告等等。当用户已经形成统一认知，则会大大降低每一次操作的理解成本。但有时候设计师会过于信仰一致性，导致失去个性，我建议在不影响习惯的前提下，可适时打破所谓一致性的束缚，让设计更加出彩。
6、让用户有反悔机会。误操作后，可恢复，且重要操作需二次确认，并强化感知严重性。
7、避免依赖文字说明，多用图形化的方式让用户直接感知，而不是通过理解文字来感知。且文案使用的格式、主语建议统一，这有助于营造整体调性。另外一点，即按钮文案的使用，建议明确告诉用户该页面的目的和功能，同时引导行为，而不是陈述性文案。用动词+宾语的格式来引导用户操作，如：“去购买”比“商城”更清楚，“去玩牌”比“游戏”更清楚。
8、需同时考虑多平台的用户操作习惯，如ios系统上的应用，页面需提供返回按钮，而安卓上的应用，按钮应避免过于靠近手机底部操作栏，以防误操作。
共有 0 条评论