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