掌握这5个方面,让你具备真正的交互设计思维!

Z Yuhan(英国约克大学人机交互硕士):交互思维是什么?网上的搜索结果大多是一些交互设计 的方法。但是我这里要讲的,是真正做交互设计 所具备的思维方式。交互设计在国内发展的并不成熟,还有很长一段路要走。很多人,甚至包括交互设计师自身,对这一工作的性质和价值都未必有足够的了解。

文章目录[隐藏]

掌握这5个方面,让你具备真正的交互设计思维!

Z Yuhan(英国约克大学人机交互硕士):交互思维是什么?网上的搜索结果大多是一些交互设计的方法。但是我这里要讲的,是真正做交互设计所具备的思维方式。交互设计在国内发展的并不成熟,还有很长一段路要走。很多人,甚至包括交互设计师自身,对这一工作的性质和价值都未必有足够的了解。

交互设计,听上去是“设计”,但是其本质和常见的UI和视觉设计相去甚远。“交互”指的是人类与机器之间的沟通,与美学、界面、按钮什么的,其实没有半毛钱关系。领域细分之前,也许我们考虑的东西越多越好,但是在细分之后的今天甚至未来,交互设计就要有它不一样的价值。

由于目前的大环境对这一细分领域仍旧缺乏了解,所以我希望在这篇文章里,写几个做交互设计所需要的思维方式。

1. 可用性优先,视觉靠边

一个功能首先要能用、好用,才会有人关心好不好看,审美挑剔的用户其实比你想象中要少很多。当然不是说视觉设计不重要,只是对于交互设计而言,解决可用性才是最优先的,而视觉上的优化,可以在下一个环节再做讨论。

例如下图这个例子,在一个较宽的页面上放一段较窄的文字:如果只以视觉感官来考虑,可能会设计出方案一(左);如果纯粹以可读性来考虑,可能会设计出方案三(右);如果两者都估计到,可能最后得出的是方案二(中)。可见单凭任何一个环节都没有办法得到好的方案,但是我们应该分清顺序,从各自的立场提供帮助。

掌握这5个方面,让你具备真正的交互设计思维!

2. 不寄期望于用户的理解力、耐性和信任度

通过长期的摸索和测试,你会发现用户这种生物,不但永远不会成长和进化,反倒变得越来越懒惰。十年前也许你可以用纯文本小广告骗到点击率,如今没有图片大家都懒得扫一眼。交互思维需要有一种佛祖般的慈悲胸怀(只是一个比喻),无微不至地对主流用户表示关怀(对不起,小众和非主流们)。如果你对用户行为感兴趣,可以去看我之前写过的这篇《你想象中的用户 vs 真实的用户》

例如下图,解析图片中,右边写清楚“解析中”帮助用户理解当前在等待什么,进度条帮助减轻用户的不耐烦,模糊处理的图片给用户“你的图没有丢,正在处理呢”的心理暗示。

掌握这5个方面,让你具备真正的交互设计思维!

3. 不脱离目标谈设计

交互设计师不喜欢听到:“请你设计两个界面,商品列表页和详情页。”

更好的沟通方式是:“我们需要为想要购买商品的用户提供信息,可选的商品数量有N个,用户最感兴趣的信息有……,一般人不会看但必须附上的信息有……”

这样做并不是矫情,而是不同的信息量和重要性,所对应的解决方式可能完全不同。并不是一提到商品信息,就都要想淘宝、亚马逊那样的结构。

例如下图,如果商品详情重要程度较低,很多人愿意直接购买(如 App Store),可以采用方案一(左),如果商品详情非常重要,不看几乎不会购买,则可以采用方案二。

掌握这5个方面,让你具备真正的交互设计思维!

4. 用户期望比逻辑更重要

有传言说交互设计需要很强的逻辑性,才能够梳理页面上复杂的信息。这想就错了,界面是为了便于使用而存在,如果用户不能快速理解和操作,逻辑再正确也丧失了意义。

拿到一大堆信息时,需要思考的不是改用总分、分总还是总分总结构,而是对用户来说那些事基础、主要和辅助功能/信息,详细可以去看我以前写过的《复杂页面的布局设计》

例如下面是简书网页端的布局分析:

掌握这5个方面,让你具备真正的交互设计思维!

5. 没有奇怪的设计,只有看不懂的设计

自以为对互联网产品很了解的人,通常习惯用定式思维来评判设计的好坏。例如,认为凡是符合设计趋势的(扁平化、卡片化……)就是好的,凡是自己没见过的,就是不好的。这样的习惯非常危险,因为用户从来不会以这些标准评判一款产品的好坏,对他们来说,能够帮助他们高效完成任务的,就是好的产品。

例如下图,你可能很少在手机上看到分页,但这并不是一个拒绝在手机上使用分页的理由。如果列表数量过多,需要支持用户逐条寻找,且在搜索和筛选上有一些限制,就有可能需要用到分页。否则,用户并不会觉得你的设计很符合当下流行趋势,而是烦恼无法完成自己想要的操作。

掌握这5个方面,让你具备真正的交互设计思维!

总结

交互思维并不能够取代任何东西,也并不比任何你之前所学到的东西更加正确,甚至并不是所有的交互设计都要有与之相同的思维方式。

如果你是交互设计师,我希望这篇文章能够启发你更加深刻地思考自己所在的角色以及能够提供的价值。

如果你不是,我希望这篇文章能够帮助你与交互设计师合作时,沟通更加顺畅,一起创造出色的作品。

欢迎关注作者主讲的的设计Live:「听完这个Live,你对复选框设计的知识就满格了」

想锻炼出结构化思维,好的工具必不可少:《做你大脑中的记号笔!15款为设计师而生的思维导图工具》

也可以看看专业设计师的思维是怎样的:《初级进阶教程!手把手教你培养专业的设计思维》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34151/

(0)
震天下震天下
上一篇 2017-08-17
下一篇 2017-08-23

相关推荐

  • 交互设计中的情感化!

    文/金雅庆UI即User Interface 用户界面的简称。UI设计是指设计人和产品或服务互动的一种机制 , 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。交互设计是一种如何让产品易用,有效而让人方便的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理...

    2018-03-09
  • 认知设计论:关于认知最全面的一篇

    所谓的成长就是认知升级。——傅盛

    2017-05-03
  • 以服务设计视角推动设计赋能

    作者:阿里UED 周静&谢辉敏小编说:未来的设计都应该归纳服务设计的范畴,包括用户体验设计、交互设计等,比如新零售设计就是一套完整的服务设计体现,不要等服务设计成熟了再去设计,谁先先学习,谁就抢占了先机~~为未来充点电!本文较长,读完需要点耐心~~近两年随着UED团队的探索,沉淀出了业务协同、设计增值、设计驱动三个层次的价值模型,深入剖析了设计师价值实现的不同阶段与方式。同时越来越多的设计师也逐渐意识到了只有在协同业务的全流程中利用体验...

    2018-02-13
  • 写给初学者:UI、UX、GUI新手科普指南

    这篇文章会跟各位伙伴简单介绍UI、UX跟GUI三者的差异,同时也会根据自身经验说明一些业界实际的需求状况,有任何问题欢迎透过留言一起讨论喔!注:近期的业界趋势就是,不管你是工程师、设计师、BD、PM还是老板,只要会说一句话,「阿,这样设计不够『直觉』啦,使用者OOXX…」,就有种好像很懂UX的感觉呢!(苦笑)为什么使用者会点进「关于我们」注:近期有不少的Landing Page常常都会用无声的影片搭配黑色屏蔽塑造分为,其实营造的感觉真的还不赖。(当然…影片要拍得好)

    2017-05-12
  • UI交互设计手册

    Good UI是一家研究用户体验的设计机构。我们知道成功的页面设计不仅有很高的转化率更便于用户使用,既能满足商业目标更能为用户带来良好的体验。今天为大家分享一些Good UI 在一些项目中获取的设计以及运营策略等方…

    2017-08-01
  • 初级交互设计师的自省:基础知识能力很重要

    在交互设计师参与的各个阶段都会有不同的挑战和着重的考察点,希望大家都能打好基础,不要让基础的知识能力的欠缺影响甚至阻碍我们综合设计能力提升。

    2017-05-16
  • 设计师要懂心理学の眼见非脑见

    我们一般认为,当我们观察周围的一切时,眼睛会将看到的信息传输给大脑,大脑再对信息进行处理,让我们感受到真实的世界。但其实不然,脑见并非眼见,因为大脑总会解析眼睛看到的所有信息。试举一例,请观察下图: …

    2014-11-26
  • Axure RP 8.0安装图解

    Axure RP 8.0下载链接:链接:https://pan.baidu.com/s/1jJFQwLK 密码:3d1yAxure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illu...

    2018-03-24
  • 2019届及以后实习|互联派、苹果、百度等一大波实习来咯!

    今天的实习信息也是满满的哦~快跟着派派一起来看看吧~互联派、苹果、法国优格、百度、京东等多个岗位等你投递~面向人群2019届及以后,包括2019届、2020届、2021届同学,以下的岗位都可以投递哦~岗位预览◆互联派/用户运营实习生/大连◆互联派/新媒体运营(内容编辑)实习生/大连◆网易有道广告优化实习生◆苹果/数据分析实习生/北京◆法国优格/财务助理实习生/上海◆百度/HR实习生(招聘方向)/北京/可转正◆百度/人力资源实习生/北京◆...

    2018-03-23
  • 想做动效,可是你的需求写清楚了么?

    精美的动画对于提升产品体验有很大帮助,如促进用户理解功能,缓解用户情绪,调动用户积极心理,为产品提供亮点等等。诸如此类的文章相信各位已经看过不少了,不少人已经开始越来越重视动效在产品中的应用了,还没有看过的同学不用急,谷歌官方的动效指南讲解得很详细,建议只看这个就够了,配合一些动画理解起来更容易。说明:

    1.优化直播间分享面板,增加特效

    2.当用户点击分享按钮时(*包括传统直播间主播面板的分享按钮和上方分享按钮,手机直播间的分享按钮*),从下方弹出分享面板,逐个弹出分享icon,并淡入显示分享奖励。

    3.用户关闭分享面板时,分享icon从右到左依次下落淡化消失
    相关参数:

    1.分享面板减速弹出,运动时间225ms
    2.分享icon从左到右依次弹出,运动时间225ms。带有奖励图标的,当对应分享icon弹出后,分享图标淡入显示(时间225ms),第二个图标比第一个迟100ms开始运动

    eg:如图第一个为qq图标,当用户点击分享按钮,分享面板弹出后,qq图标开始弹出(时间225ms),100ms后第二个图标(qq空间)弹出,当qq图标完全弹出时,淡入显示分享奖励图标,时间225ms。
    3.分享icon从右往左依次收回,分享面板收回,所有运动的时间减少30毫秒,如分享面板收回时间195ms,分享icon收回时间195ms。

    andorid端动画曲线采用系统自带:AccelerateDecelerateInterpolator(在动画开始与结束的地方速率改变比较慢,在中间的时候加速)

    iOS端动画采用系统自带:kCAMediaTimingFunctionEaseInEaseOut (在动画开始和结束的时候速度稍慢些)
    具体效果可参考附件视频

    2017-05-08