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

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


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

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

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

相关推荐

  • 设计×交互 | 在做交互的时候,我们可以从不好的设计与好的设计中学到什么?

    让人人都懂点儿设计设计史论全文字数 :4689 | 阅读 时长:12分钟今天史论君为大家分享一篇来自interaction design foundation的文章原文作者:TEO SLANG    |    翻译:于于于Jessica编辑:Sujay Wu转载后台回复 :史论君把不好的设计和好的设计的反面例子一起看,不仅有趣,而且为设计师们提供了重要的经验教训。它们突出了设计人员要避免的陷阱,并让我们理解如何将设计理论转化为在现实世界...

    2018-04-07
  • 交互干货必收 | App界面交互设计规范

    在上篇《APP界面设计风格》确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前,拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧!

    2017-06-04
  • 邮件其实是一种不容忽视的用户体验

    人们总是愿意相信,他们自己的创作本身就能够说明一切。由于电影《梦幻成真》里 “车到山前必有路” 的这种心态,加上非理性的恐惧,通常这类思想会影响到产品的设计,造成用户体验脱节,这个过程中又很少与用户交流沟通。

    2017-06-01
  • B2B vs. B2C 网站:关键用户体验差异

    尽管B2B网站和B2C网站有很多相似的地方,但B2B的客户却有着截然不同的需求。

    2017-05-14
  • 五个技巧,设计优质的新用户引导流程

    新用户引导绝对是个瓶颈。花费时间设计和开发,找了用户测试调研,最后上线了,依然拦不住汹涌的用户流失潮。很多时候,也许只是新用户引导没做好而已。今天的文章,我们来聊聊新用户引导的设计~新用户不去注册是因为他们乐于了解你的产品的UI是如何工作的。他们注册是因为他们认可你的产品所呈现出来的价值。好的空状态设计,能够化腐朽为神奇。

    2017-05-09
  • 【竞赛结果】2017 年度UA创作奖 · 概念设计国际竞赛最终结果

    来源:城市建筑竞赛题目:UA城的滨水居住建筑2017年度UA创作奖•概念设计国际竞赛由《城市建筑》杂志社主办,哈尔滨工业大学建筑设计研究院承办。组委会于2017年11月发布竞赛题目,共收到672个团队的注册参赛信息,至2018年1月15日止,共收取375份作品。本届竞赛评审分初审、通讯评审、现场评审、网络公示、评审委员会复议等阶段进行。初审遴选出362份有效参赛作品,其中前8所通过全国高等学校建筑学专业教育评估的学校学生报送作品63份,...

    2018-03-27
  • 【优秀作业展示】交互设计基础(一)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优业。优秀学生作业第一期周亦辂产品设计1511高铁取订票界面设计色彩选取字体:冬青黑体字号:18、21、24、28、30、32、36风格:利用从...

    2018-04-04
  • 人机交互 (HCI) 交互设计 (交互设计) 的区别是什么?

    作为一个PM当然非常需要注重产品在使用过程中的一些交互体验,可是广义的人机交互和交互设计又有什么区别呢?让我们来看看知乎里别人都是怎么回答的吧。

    2014-12-30
  • 2018用户体验设计趋势,你知道吗?

    设计师总再盼望未来 - 在整个工作流中我们重复相同的事情。最后,困扰设计师往往是围绕着一个简单的问题:我们如何才能提高用户的体验?为了解决这个题,Figma采访了18位设计师,让他们来来预测2018用户体验设计趋势。1.可用性第一,个性化第二“我真的希望2018年设计师们将可用性设计铭记在心。我们不要在基本元素上使用超浅灰色,我们做得每一个像素动画不应该只是因为它看起来不错,我们不应该让用户难以理解内容,因为我们是设计师。”2.设计师要...

    2018-01-31
  • 聊聊意见反馈,小功能也有大门道

    反馈是几乎所有应用的标配功能,往往藏在“设置”或者“关于”里面的小角落。意见反馈在产品开发中的作用是不能忽视的,这几乎是所有应用最好的用户意见收集入口,但是不同应用对意见反馈的处理各不相同。最近在做反馈系统的梳理工作,也包括意见反馈页面优化,将这一段的分析整理成此文。

    2017-06-01