下面是笔者以前画的交互流程图，用的工具是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系统上的应用，页面需提供返回按钮，而安卓上的应用，按钮应避免过于靠近手机底部 *** 作栏，以防误 *** 作。
1、分析阶段
需求分析、用户场景模拟、竞品分析（聆听用户心声）。
需求分析：对于一个产品来说，必然有对用户需求的分析内容，更多的是从MRD与PRD获得，或者从产品需求评审会议上得到需求分析的内容，当然可以直接与产品经理交流获得相关产品需求。如果说设计原则是所有设计的出发点的话，那么用户需求就是本次设计的出发点。
用户场景模拟：好的设计建立在对用户深刻了解之上。因此用户使用场景分析就很重要，了解产品的现有交互以及用户使用产品习惯等，但是设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。
竞品分析（聆听用户心声）：竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。当市场上存在竞品时，去听听用户的评论，哪怕是骂声都好，别沉迷于自己的设计中，让真正的用户说话。
输入物：MRD、PRD、市场调查报告、竞品分析文档（或其一或全部）
输出物：设计初稿（或许只是几个简单的界面）
2、设计阶段
设计方法采用面向场景、面向事件驱动和面向对象的设计方法。面向场景是针对该产品使用场所等模拟，模拟用户在多种情况下产品使用的模拟。面向事件驱动则是对产品响应与触发事件的设计，一个提示框，一个提交按钮……这类都是对事件驱动的设计。面向对象，产品面向的用户不同对于产品的设计要求不同，不同年龄层的用户对于产品的要求不同，产品的用户定位将对UI设计师影响因素。
输入物：交互文档（高保真原型）
输出物：设计终稿（所有的设计稿）
3、配合
UI设计师交出产品设计图时，更多的配合开发人员、测试人员进行截图配合。配合开发人员对于PSD格式的图片切图 *** 作，对于不同的开发人员的要求，切图方式也有不同，UI设计师需配合相关的开发人员进行最适合的切图配合。
输入物：设计终稿
输出物：设计修改稿（设计稿切片）
4、验证
产品出来后，UI设计师需对产品的效果进行验证，与当初设计产品时的想法是否一致，是否可用，用户是否接受，以及与需求是否一致。都需要UI设计师验证，UI设计师是将产品需求用图片展现给用户最直接的经手人，对于产品的理解会更加深刻。
输入物：产品
输出物：产品（面向用户最终版本）
产品UI设计中夹杂着许多设计原则要求，统一公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可 *** 作性。UI设计师应该分析公司产品的特点，制定符合产品生命周期的UI设计流程。每个产品的生命周期中，UI设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）