引导性交互界面怎么设计才能直观有效?

在任务流程较为复杂的时候,用户容易迷失在流程中,从而放弃任务,导致转化率不尽人意。所以我们在交互界面上需要引导用户。人机交互中不论是文字、图像、色彩、动态效果等,主要是通过视觉反馈信息,所以视觉的引导尤为直观有效。


在任务流程较为复杂的时候,用户容易迷失在流程中,从而放弃任务,导致转化率不尽人意。所以我们在交互界面上需要引导用户。人机交互中不论是文字、图像、色彩、动态效果等,主要是通过视觉反馈信息,所以视觉的引导尤为直观有效。

引导性交互界面怎么设计才能直观有效?

1. 形色引导

形状、色彩、大小等进行引导。当人们大脑接收到一定量信息时,会对相似的的信息进行分类来简化信息的处理,所以我们在设计中可以把同类型的元素使用相同的形状或色彩等。比如在选择购买电影票或宾馆时,我们所需要筛选的信息较多,如日期、位置、影院/宾馆,这时候把这些信息使用相同的样式展示,用户很自然的认为这些信息是有关联的,都是为了筛选影院/宾馆所需的条件。
引导性交互界面怎么设计才能直观有效?

使用形色引导用户筛选信息

在移动也可以采用这种方式,在信息较多时建议适当隐藏。
引导性交互界面怎么设计才能直观有效?

移动上的应用
引导性交互界面怎么设计才能直观有效?

2. 方向引导

默认情况下,我们都习惯从左往右,从上往下的扫描信息,所以我们设计时一般也是依照这个惯例。
引导性交互界面怎么设计才能直观有效?

方向性视觉线

有时候在一个任务流中或者一个页面中,难免会遇见迷惑的地方,这时候我们就要引导用户通向真正的目的地。最典型的就是iOS解锁提示。

引导性交互界面怎么设计才能直观有效?

slide to unlock

3. 运动引导

人们最容易捕捉的就是运动的物体,这个运动不是只位移,像iOS解锁提示同时也使文字有方向闪烁来产生运动,就好像你已经迷失在人海中,有人再向你招手一样。比如点击加入购物车之后商品飞到了购物车图标里、选好观影座位后座位号飞到了购票订单处等,视觉自然的就过渡到了下一步骤。

引导性交互界面怎么设计才能直观有效? Mac OS 窗口最小化

移动端同样适用,如Path。
引导性交互界面怎么设计才能直观有效?

Path

4. 向导控件

如果一个任务需要多步操作跨越多个页面,那么可以用向导控件来引导用户完成多步操作。同时还可以告诉用户完成这个任务一共需要多少步、现在在哪个阶段、剩下多少可以完成任务等。
引导性交互界面怎么设计才能直观有效?

Amazon

引导性交互界面怎么设计才能直观有效?
豆瓣同城

End.

 

本文由 @陈正曦  授权发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31188/

(0)
CatherineCatherine
上一篇 2017-05-31 19:16
下一篇 2017-05-31 22:39

相关推荐

  • 复杂性和用户体验[译]

    每一个交互设计师应该都怀有一颗追求简单的心——轻盈的操作,简易的流程,干净的界面。每每提及复杂性,必然会想到其对立面——简单。所谓简单,就是要去除不必要的干扰,让用户直达目标。优秀的产品关注简约而非复杂…

    交互设计 2015-07-22
  • 设计师最好的时代和交互设计最差的时代

    当技术平台化的时候,可能是正在酝酿下一步的技术革命。而现在设计用技术做差异化不是不行,而是很难。还是举facebook的例子,他们现在在招有接近一半的researcher岗位,UX researcher和Quantitative researcher,姑且分为主定性和主定量的用研岗吧,我觉得原因在于,交互设计师内化在心的用研思维难以在大量数据和海量用户面前快速将信息转化为决策,必须由专业人士专职来做。

    2017-06-05
  • 使用无序列表的7项注意

    小圆点有助于分割大段文字,使得复杂的文章和博客更容易消化,突出关键信息。如何运用好无序列表?这篇文章提出了7个注意点。

    2017-05-02
  • 【Material Design】Chrome iOS版微交互创新(下拉管理tab)

    平时在手机上主要用Safari,今天用Chrome时下意识的手指下拉滑动,发现已经可以通过下拉操作来管理tab,而且不仅仅是下拉刷新,还有进一步的优化和创新: 直接下拉是刷新当前tab 下拉并往左滑可打开新的tab 下拉往…

    2015-08-19
  • 向APP用户请求权限的正确姿势【UXRen译#188】

    作者:Nick Babich |  翻译:Gogi,校审:June Wang   你知道吗,平均每个APP在用户安装的前3天就会流失80%的日活用户。 大部分人下载一个APP后,用过一次就删除了。这是因为用户虽然会在一开始尝试使用大量的APP,…

    交互专题 2017-11-29
  • 看似平淡无奇的Icons,到底什么才是它的正确使用方式?

    了解食材是厨师的基本功课之一,了解器材是摄影师的基本功课之一,了解城管的时间表是卖热干面大叔大妈的基本功课之一,了解各个组件的设计模式和属性是交互设计师的基本功课之一。

    2017-05-08
  • 新项目丨青岛东海凤凰:宽建筑[UCD]挑战中国第一仿生建筑

    *文章已由原作者授权发布▲凤凰中心效果图作者:王宽方案设计方:宽建筑 [北京城建] KUAN architects [UCD]项目名称:青岛市西海岸新区文化活动中心地址:中国,青岛,金沙滩设计团队:王宽,周媛,李鹏,梁文杰等结构咨询:中冶京诚工程技术有限公司  卢理杰数字模型&BIM咨询:北京华茂云信息科技有限责任公司施工方:北京城建集团(建筑部)、北京城建集团十六公司、城建精工钢构公司面积:31,313平方米状态:主体结构已封顶预计建...

    2018-03-13
  • 酱课程丨交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!

    上周,我们发布了交互设计师Eary Alan的第一期课程,最值钱的内容,就是这张指导交互设计师们工作流程的“双钻图”了(横屏观看)。从0开始到完成一个设计项目,都是两次发散(Diverging)和两次汇聚(Converging)的结果。Discover探索与调研属于发散型的思考,探索研究问题的本质1. 质疑 rip the brief对需求质疑,对商业模式质疑,对用户质疑,质疑一切不合理的事情。2. 故事/场景 cluster topi...

    2018-04-07
  • 关于假设和极致

    作者:杨蓉(资深用研专家,现任极客网运营总监)   假设的意义 今天看到一本质性研究的书,在讨论定量定性的研究方法的时候,会说定性通常被质疑的是“不够客观”,所以作者开始一大篇幅,在讨论“客观性”是什么,就…

    交互专题 2017-08-07
  • 草稿箱的交互设计

    作者:宋孝方,交互设计师,现负责虾丸校园app的整体交互设计。 转载自微信公众号:大宋(id:songxf0827) 转载请联系作者。 由于移动端设备的限制,文字的编辑成本高,在PC上很容易完成的事情,移动设备上来做可能…

    2015-09-10