移动互联网交互设计规范

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---

你可能感兴趣的:(移动互联网交互设计规范)