交互原型合集

一、赛事系统交互原型图

二、手势操作交互原型图

三、赛事活动交互原型图

四、创建比赛交互原型


五、后台配置系统交互原型


六、竖屏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系统上的应用,页面需提供返回按钮,而安卓上的应用,按钮应避免过于靠近手机底部操作栏,以防误操作。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容