移动互联网交互设计规范

1.  移动互联网的 “特征与公理”

特征:① 信息焦虑与应用焦虑  ② 碎片化  ③ 个性化

公理:移动设备的屏幕资源和用户在一定环境下的认知空间是有限的,因此需要 在界面中为不同权重的应用分配相应的界面元素。(记住:资源永远是稀缺的:屏幕资源是稀缺的;认知通道和认知能力是稀缺的;注意力是稀缺的)

2. 交互设计原则

① 符合直觉

让顾客有控制感,保持操作连贯性

比如:

② 帮助用户理解内容和功能

提高体验,同时关注内容本身

比如:半透明层就有“临时”的感觉,指引顾客回到主屏位置

③ 帮助用户集中注意力、高效操作

弱化设计感,避免分散内容和功能的注意力

正常状态下,让顾客感受不到设计;一定要设计时,要考虑减少顾客焦虑(如加载动画),成为内容和功能的支撑。

④ 降低用户焦虑


3.交互设计误区

3.1让使用者感受不到,而非引起顾客注意

移动设备就像身体的延伸,让顾客感受到很容易,感受不到比较难

3.2设计界面时,要想着少放点什么,不是多放点什么

让界面简洁、清晰、直观,并突出内容,可考虑大量留白,颜色代替边框或装饰

3.3使用者不是笨,而是懒

不需要让使用者了解是怎么运作的,但要保证运用起来够高效、够简洁

4.需要考虑的使用场景

4.1使用情景

用户在使用移动产品,有可能会在户外人多的公众场合使用,这时候需要特别注意移动应用设计的隐私安全。

用户有可能在家里、在床上、在厕所,用着各种姿态使用产品,所以对交互的便利性和容错性要特别注意

4.2网络环境

网络环境也是非常关键的一点。用户会在2G、3G、wifi甚至无联网的情况下使用产品,所以对于各种网络环境进行合理的交互设计是移动产品交互设计师需要考虑的重中之重

4.3使用心态

产品的存在是为了解决用户的问题,而移动产品是用户的贴身工具,当用户需要时,能立刻开始运作,需要快速、直接、有效,用户不喜欢等待。有研究结果表示:

5.交互设计详细准则

5.1整体

与系统大环境保持一致或尽量使用官方提供的标准UI元素、功能或手势(可以不用,但不能乱用)

5.2导航

布局和功能上支持整体构架,但设计和形式上要不过分引起用户注意(导航相当于一个随身携带的工具)

5.3取消按钮

明显且安全的设计和布局方式

5.4模块视图

特例:输出性较强但可编辑的文档,顾客模凌两可的时候使用,创造内容较强的文档,系统默认保存即可

5.5消息提示

信息量大、相关度小用红点表示;信息量小,相关度大,用数字表示

5.6手势

点击、拖动、滑动、轻扫、双击、捏掐、长按(呼出编辑或隐藏菜单)、摇晃(避免成为唯一的完成手段)

5.7反馈

让顾客有成就感但避免传递不必要的信息(包括用户的操作结果、APP正在做什么、下一步可以做什么)

5.8措辞

避免太正式同时不要低三下四

5.9动画

降低使用者焦虑同时不分散其注意力

5.10品牌

巧妙自然非强迫;或低干扰并随处可见

5.11路径

顾客始终要清楚:我在哪和我要去哪(从我在哪到我要去哪或重要导航之间,不要太远)

5.12储存

用户输出内容为主时,不需要用户主动储存;用户使用选择控件时,需要用户主动储存

5.13加载

进入APP,加载页面;页面之间的跳转,加载动画;当前页面的加载,加载动画+提示

5.14空页

未添加任何内容(给引导)、顾客删除全部内容(情感化设计)、出错(告诉顾客该如何处理)

5.15设置

常用的设置放在明显的位置,不常用的隐藏起来(放在背后)

6.信息交互规范

6.1预先信息提示

所有交互都应该提供较多的预先信息提示让用户知道该怎么做,做的后果什么,可填写什么。

大体分为内容提交类、谨慎类操作、差异化规则

6.1.1内容提交类

每个输入项、条件选选项(包括时间选择)均需要给出提示信息。该提示信息可放置在输入框内或者控件尾部(如密码要多少多少位。搜索框提示用户输入什么内容等。)

6.1.2谨慎类操作

针对不可修改、重要操作选择等操作属于谨慎类操作,均需给出提示信息。如审核是否通过操作、退款申请操作、价格输入等。

6.1.3差异化规则

如果某一项操作与用户操作习惯相悖需要给出提示信息,比如渠道想添加某个商品但是该商品的供应商资料不完善没通过审核,需要提给出提出和帮助链接。

6.2操作信息提示

发生任何操作时都需要进行信息提示,不管成功与失败。比如操作提交,数据输入。

分为三大类:确认提示、错误提示、读取提示

6.2.1确认提示

修改设置、删除数据等操作时需要弹出提示框,用户需要选择后方可执行。比如品控审核某商品点击通过按钮之后,弹出提示框品控人员需选择是或否,方可完成操作。

6.2.2错误提示

当用户的操作不符合规则、输入数据不符合规则需要给出操作提示。比如输入数值不符系统规定,则进行提示。错误提示分为:即时提示、提交后提示

即时提示

需手动输入/选择的项目可以进行即时提示,当输入焦点移除之后不管输入框内是否有内容即可进行判断如果有误即显示提示,比如在添加商品过程中输入商品价格,价格如果超过系统设定当输入焦点移除之后则进行判断并进行错误提示。

注:上线时间不做判断当选择完下线时间之后即可判断如有错即可进行提示,服务开始结束时间也可如此。

可及时判断的项目包括:输入框、日期选择

提交后提示

对于未作任何输入操作和选择的项目不做及时判断,只能当提交表单之后才做判断并进行错误提示。比如商品是否可退未必选,但是没有系统默认选项,操作人员未做选择点击了提交定稿按钮,这时才会显示是否可退的错误提示信息。

对于提交后判断的项目包括:图片是否上传、单选/多选、下来菜单选择。

6.2.3读取提示

涉及到大量信息读取缓慢的时候应该进行提示。比如进入后台查看商品列表时,由于网络、数据量大等原导致载入缓慢,应该显示读取提示信息,已避免用户过度重复点击操作。

6.3结果信息提示

当成功完成某一操作之后需要显示反馈的结果信息提示,比如查询商品,未查询到与条件匹配的商品则需要显示信息提示。提示分为:保存结果提示、查询结果提示、添加结果提示

6.3.1保存结果提示

当进行商品添加/修改此类涉及到数据保存的操作,不管是否成功均需给出提示。

6.3.2查询结果提示

任何信息列表、查询结果,当对应信息结果的时候需要给出有无结果状态提示。不得使用空白信息。

6.3.3添加结果提示

当涉及到填写评审未通过原因这类的内容添加操作。保存之后可直接显示结果页面。

7.动态交互规范

7.1刷新、加载、系统判定与各自的数据读取失败

7.1.1刷新

自动刷新:打开页面后,当系统检测到有更新,自动刷新

手动刷新:通常情况下分为下拉刷新、释放刷新、正在刷新三种状态

数据读取失败:用浮动TAP的形式展现,不影响当前页面的阅读。

7.1.2加载

列表页加载:进入页加载方式加载,优先加载框架、默认元素及文字

详情页加载:用进度条加载,而非动态活动指示器(使用者能了解进度、减少使用者的焦虑,而却利用热门讨厌缺失的原理,更适合传播内容)

数据读取失败:引导使用者下一步操作,如 轻击重新加载

7.1.3系统判定

在按钮上做判定指示,而非全局页面(为了避免加载时间过长,顾客可以使用关闭按钮或返回按钮)

数据读取失败:用toasr而非alert做提示

反馈

7.2按钮状态反馈

7.2.1默认、点击、选中、链接、不可用

7.2.2推荐、不推荐

7.3当前页面反馈

每个当前页面都要有当前页面非反馈,帮助使用者记忆现在在哪

7.4路径反馈

页面收起后有短暂性的反馈,帮助使用者记住路径

7.5手势

7.5.1刷新与懒加载

下拉刷新

上拉懒加载

7.5.2删除

IOS向左滑动删除

安卓长按删除

7.5.3层级关系

向左滑动出现下一级

向右滑动回到上一级

7.5.4页头页尾

下拉出现页头(松开手指隐藏页头)

上拉出现页尾(松开手指隐藏页尾)

7.6键盘种类与出现/收起时机

7.6.1键盘种类

根据输入框的不同,键盘为别为:数字键盘、电话键盘、邮箱键盘与默认键盘

7.6.2出现收起时机

页面载入时出现键盘,如进入搜索界面

页面载入时不出现键盘,如进入登陆界面

滚动列表时收起键盘,如滚动搜索列表页

滚动列表时不收起键盘,如滚动文本框内容

8.交互设计几点tips

8.1直接控制

旋转或用其他方式移动设备,以影响屏幕上的物体

使用手势操纵屏幕上的物体

看到他们的动作有直接的、可见的结果。

8.2有控制感

8.2.1应该由用户出发和控制操作,而非程序。虽然程序可以建议某种流程、操作,也可以警 示危险的结果,但抛开用户由程序来做决策未免太过荒诞。优秀的程序能够平衡用户的操作权并帮助用户避免犯错。

8.2.2用户在控件和行为都很熟悉、可以预测结果的时候最有操控感。而且,当动作非常简单 直白时,用户可以很容易地理解并记住它。

8.2.3用户希望在进程开始执行前有足够的机会取消它。而且他们希望能在执行破坏性动作前 有再次确认的机会。最后,用户希望能优雅地终止运行中的进程

8.3巧妙运用暗喻

暗语既直观的展示了使用方法,又避免了现实世界中的使用限制

8.4聚焦目标群体

聚焦于你的目标用户,但功能和内容则不局限于这些人。二八法则,大多数用户(至少 80%)只使用程序中很少一部分功能。只 有很少用户会使用全部功能(少于 20%)

8.5永远关注主任务

永远不要脱离主任务或对此APP的定义,依据主任务或定义设计每个程序的功能,和每屏要展示的内容

9.交互设计底线

无论如何不要让顾客感觉APP有问题,如强制退出或明显的超出预期或不符合逻辑

----End---

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