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

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


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

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

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

相关推荐

  • IAMUE 移动客户端的设计作品分享

    Wechat: caochengweiued 分享了他对 IAMUE 移动客户端的设计作品,文末有 阿西 UED 的点评! 阿西UED 的点评: Hi 谢谢你的作品分享,总体上来说,依你当前的学生身份或当前的专业程度,做出这样的设计方案有一定的…

    2016-11-21
  • 未来,设计师的核心价值在哪里?我总结了4个进阶方法

    在 Web/iOS/Android 等旧平台成熟稳定、VR/AR 等新平台尚未全面兴起,设计标准化成为趋势的当下,作为用户体验设计师的核心价值又有哪些?本文作者将自己反思的一些经验总结了出来,一起来看看。

    2017-05-10
  • 【招聘】萧山众多高薪岗位专场来了,就在等你!

    萧山之窗移动生活由此开始....关注还在愁到哪里去上班吗?还在担心工资不够花吗?这里或许有适合你的岗位!2018萧山信息港小镇春季综合型人才招聘大会企业名称招聘岗位微医集团(浙江)有限公司资深Java开发工程师,搜索研发工程师,前端架构师,Java架构师,自然语言算法工程师,医学影像算法工程师,家庭医生,健康管理师,HRBP,客服专员浙江讯飞智能科技有限公司系统测试工程师,资深视觉设计师,视觉设计师,大数据工程师,高级交互设计师,研发架...

    2018-03-21
  • 华润创业、建信融通、便利蜂等4家名企春招

    求职奶爸华南最活跃的大学生求职平台旗下公号求职奶爸、校园宣讲会V、名企校招实习,50W+粉丝企业合作请加 QQ 3527488757 或微信 naibabd01(添加请备注公司名称)学生求职请加创始人微信 qiuzhinaiba101全国 | 华润创业全国 | 建信融通全国 | 便利蜂广州 | 卡宾服饰华润创业/ 公司介绍 /华润(集团)有限公司是一家在香港注册和运营的多元化控股企业集团,其前身是 1938 年于香港成立的联和行,194...

    2018-04-08
  • 百度贴吧体验升级背后的故事,用户洞察与交互升级

    作者:百度UXC随着产品的发展和用户群体的演变,用户对产品的认知也在发生变化,当用户认知和产品形象发生偏差时,体验升级就势在必行了。而用户对产品的认知大概体现在视觉感受(品牌形象)和使用感受(交互操作)上。对此我们从用户出发寻找设计上的突破口。洞察用户让设计有的放矢视觉感受对于大多数人是一种难以言说的东西,难以通过简单的方式得到答案。面对这个问题,我们选择迎难而上,通过精巧的实验、可视化的方式来解决,邀请用户与设计师一起,参与到品牌升级...

    2018-01-30
  • 蜕变.进化——百度云Android端7.0项目总结

    项目背景: 百度云面世之初是一款网盘类产品,以安全、稳定、易用、快速的体验著称,经历近两年时间的升级优化,百度云已不仅仅只是“网盘”了,在慢慢的朝着平台化的方向不断发展。 旧版的Android客户端随着每一次版…

    2015-03-18
  • 用户体验度在哪些方面影响着企业网站建设

    百度排名是评判一个网站运营情况的最好依据,而用户体验度是百度排名的一个重要参考方面。用户体验度越高,网站排名越好,相反,用户体验度越低,网站排名也就不理想。网站制作公司在建设网站时,要着重站在用户的角度去设计网站,这样对后期优化也会有很好的帮助。那么用户体验度为什么对网站有如此大的影响呢?企业网站建设时需要从哪些方面去提升用户体验度?首先,我们要明确什么是用户体验度,才能有针对性的去提升网站质量。用户体验度也就是用户浏览的网站能否为他提...

    2018-04-04
  • 【交互设计方案】记分对比法运用

    交互设计中,为什么需要这种方法? 在交互设计工作中经常会遇到这样的问题,某些位置的设计牵扯到比较复杂的场景,要考虑的因素比较多,这些设计点往往是最容易引起争议的,因为团队成员不一定都能快速了解全部的场…

    2015-10-09
  • B2B、SaaS 等企业软件中的交互设计总结

    ♝点击上方“交互设计学堂”关注我们,送电子书我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇文章是我在过去几年里的一些经验梳理,希望能够帮助那些想去或者已经在企业软件团队工作的设计师们。什么是企业软件?下面是维基百科中的定义:企业应用是一种计算机程序,主要用来满足企业的需求,而非独立的用户。一些大家可能用过或者见过的企业软件。在现代企业中,大...

    2018-04-20
  • 【交互设计】手机界面中的灰色运用

    苹果手机的出现,有效的提升了设计师的地位。我有个在微软工作过的朋友告诉我,在苹果手机产生规模性的影响前,他们把设计师称为“美工”,后来,才尊称一下“设计师”。在手机界面的设计中,灰色的使用常常可以为界面…

    2017-08-01