如何应对「为什么用这个颜色/字体/按钮」的问题?

作为一名设计师,被质疑简直是家常便饭。相信你们在日常工作中,一定被人问过:“对于这个点,你为什么这样做而不是那样?为什么选这个颜色而不是那个?”之类的问题。其实,这也是面试中的必问问题。乍看起来,确实有点难回答。但每一个问题,其实都有他的思考路线图。今天笔者就来谈谈,如何通过交互的四个维度来入手,巧妙地破解这个问题。你为什么要设计一个白色的登录按钮?为什么选这个字体?


作为一名设计师,被质疑简直是家常便饭。相信你们在日常工作中,一定被人问过:“对于这个点,你为什么这样做而不是那样?为什么选这个颜色而不是那个?”之类的问题。其实,这也是面试中的必问问题。乍看起来,确实有点难回答。但每一个问题,其实都有他的思考路线图。今天笔者就来谈谈,如何通过交互的四个维度来入手,巧妙地破解这个问题。

如何应对「为什么用这个颜色/字体/按钮」的问题?

来,我们举个例子。比如,在面试中,作品集中有这么一个界面,面试官问道:

你为什么要设计一个白色的登录按钮?为什么选这个字体?

对于这种突如其来的问题,很多小伙伴的反应都是当场懵逼。

这么做设计,有可能是为了颜值,也有可能是公司的按钮就是白色系的,甚至可能是根本没想过哪个好看选哪个。

那好,用一分钟想一想,如果你遇到这个问题,你会从哪几个角度回答?

如何应对「为什么用这个颜色/字体/按钮」的问题?

今天这篇文章,就是想借着这个问题,来聊聊交互设计中的认知维度,以及如何利用这几个维度,让我们成功解答面试题,成功完成与程序员PM的“撕逼”战役,以及辅助我们做更好的设计。

对于认知路径这个问题,很多不同的文献里都写过,比如大家都敬爱的Don Norman,早期的Jonh Sweller等等,其实读这些文章的时候,我本人也是崩溃的。大家来体验一下:

如何应对「为什么用这个颜色/字体/按钮」的问题?

本文旨在接地气的分解这些晦涩知识的实际应用,所以我努力不提到晦涩的概念。

绕回到登录界面的问题,现在面试官认出了关于你的登录按钮的问题,到底该怎么办呢?其实从面试官的角度来讲,当我问这个问题的时候,任何一个比较浅的回答,我都不会满意的。我确实是想给你出一个小难题,看看你的临场反应和基本功。

所以,既然面试官希望得到有深度的回答,我们不妨先来看看,用户使用这个按钮的认知路径。

Aware (知觉)

知觉,是用户使用一项功能之前,意识到自己需要此功能的过程。

大家可以回忆一下,当你拿起手机时,是记得自己要干点什么。可是等到解锁了屏幕之后,却想不起自己意图的行为了,是否有过这样的场景?

如何最好的用设计辅助用户的知觉呢?这个说起来很高深的问题,其实很简单。如果你的手机只有一个app,只能做一件事情,你通常忘记自己操作意图的可能性就会减少很多。我们设计能做的,是两方面的工作:一是加强知觉存留的周期,另一个就是通过设计辅助唤醒知觉。

如果回到刚才的登录界面,那么这个过程就是:用户想要登录的时候,就会看到land在了这个页面上,也不会被其他的元素“分了神”,而是能很专注地直接去执行自己想要执行的操作。

如何应对「为什么用这个颜色/字体/按钮」的问题?

集中紧凑的界面,能够辅助用户知觉的存留周期

其实在我们平时的设计中,很难的也是这一步,我们不知道如何做减法,所以无法存留用户珍贵的“知觉”。这一点在B2B的软件中,更加常见。

Perceive, Recognition & Recall (洞察,识别与记起)

在知道自己需要做什么之后,下一步就是判断需要怎么做。通常,用户会经历一个从洞察所需操作,到但识别/记起操作模式的过程。通俗一点来说,就是先看了界面,要么认出来在哪里执行操作,要么想起来怎么执行操作。

好像又有点抽象,那具体对于设计,我们应该如何操作呢?

其实Neilsen十法里面讲过一个非常经典的设计原则,就是说识别是比记起要好的。因为识别是一个模糊的过程,需要的认知空间相对比较小;而记起则是一个精确的过程,需要准确提取信息记忆。说起来,就是你认出一个人是你的熟人,和你记起一个人的名字的区别。

如何应对「为什么用这个颜色/字体/按钮」的问题?

那么转化到设计师,我们需要的就是一致的,连贯的设计,以及为用户营造记忆以便于识别的能力。这些年各种Design System兴起,我的母公司salesforce在推出了lightning>设计系统,Material Design>其实也可以算是一种设计系统。可以看出,设计界对于标准和一致的要求,只会越来越高。

如何应对「为什么用这个颜色/字体/按钮」的问题?

那么回到我们的登录界面的问题上,我们要回答的第二步,就是:界面使用了标准的按钮样式,同时但是也加入了阴影,能够最好地帮助用户识别这是一枚按钮,强调增加了affordance(自解释性),减少了记忆负担,告诉用户“我是一枚按钮,你可以点我,快点我!”

Act(行动)

知道了自己要做什么,意识到了自己要怎么做的下一步,就是采取行动。

说起来这一步好像没什么特别的,看到按钮点下去,看到输入框输入一下,总之就是采取一个操作嘛,没什么难的。

然而并不是这么简单的。在我们对于界面的认知和界面的实际操作之间,有两个很重要的认知概念:一个叫Gulf(鸿沟),一个叫Distance(距离)。

Gulf这个概念还是比较好理解的,指的就是我觉得这个按钮应该这么点和这个按钮其实那么点造成的认知上的差异,感觉就是设计师搞砸了,挖了个坑的感觉。基本就是下面这个丑丑的图的感觉:

如何应对「为什么用这个颜色/字体/按钮」的问题?

而所谓的距离,指的就是你的操作和操作之间的距离。可以是一个物理距离,比如你打字的时候手指的位移;或者是屏幕上从一个按钮到另一个按钮之间的距离。这也就是为什么,快捷键对我们来说很重要,因为从键盘到鼠标,也是有距离的。

回到地面来说说具体设计的问题,我们需要做的,就是减少鸿沟和距离,让操作可以顺利的进行。常见的一些设计准则,比如近似原则,比如Affordance,或是使用设计系统,都是为了能解决这个问题。

如何应对「为什么用这个颜色/字体/按钮」的问题?

再看看我们的登录页面,这时候我们的第三步回答,就是:我们的登录按钮,非常清晰的给出了登录这个操作的可点击性,以及点了之后,就会触发下一步系统反应。

Feedback(反馈)

到这里并没有结束(你看累了吗?),因为当你执行了一个操作之后,要期待这个操作给你个反馈对吧。说不定误操作了呢?网络断了呢?系统崩溃了呢?DDoS攻击了呢?

这地方和Signaling也很相关,一般这种反馈是非常重要的,是需要通过信号来用户一个暗示,我目前的状态是什么,有的时候对安抚用户的情绪起到至关重要。

比如,曾经和一位设计无线麦克风上LED灯状态的小伙伴聊过,这里面就全是Signaling的作用。虽然我们经常使用这种产品,对那个不起眼的小灯泡根本没有任何记忆,但是它的作用不同凡反响。

我们可以放在context下面来谈下,当你打开麦克风,怎么判断你的麦克风是开着的?虽然我们有个很小很小的开关,上面也写着开和关,但是LED变成绿的,你就不用戴着老花镜看看到底开关指向什么地方了;而无线麦克风要没电了,黄灯闪烁提示用户,我要没电了快给我充电,这部分可能根据人们对过去事物的认知会延续到这个灯状态的解读;如果我在台上和别人窃窃私语,谈点不相干想干的话题,用如何确定TA的麦克风是不是放在了正确的状态,如果LED变成红色而且在闪烁,用户是不是就可以不用对着麦克风喊“喂喂喂……”来确定自己是不是已经关掉麦克。这种例子不胜枚举,在交互中也是起了非常重要的作用。

如何应对「为什么用这个颜色/字体/按钮」的问题?

曾经MacBook上我最喜欢的设计之一Breathing light

小结

最近经常被小伙伴问到,人人都在做交互,是不是交互设计是一个门槛很低的行业。我倒觉得恰恰相反,交互是一个好入门难精通的行业。没有扎实的理论功底,你如何保证自己能够真正考虑到用户需求和心理的方方面面呢。

所以,如果以后再有人问你“你为什么设计了一个圆角的按钮”,或者“你为什么做了三个并排的图标”,你知道怎么一本正经地回答他们了么?

 

作者:Spell,高级产品设计@Salesforce。曾助力微软,亚马逊,HTC,Citrix及若干创业公司的产品设计。当下乐趣是将UX的知识传递给更多的人,并创立了UXOffer-专注于帮助中国学生获得最好的HCI/交互设计教育机会。

来源:微信公众号【交互设计学堂】

版权声明:人人都是产品经理尊重行业规范,所转载的文章都注明作者和来源,若标注有误,请联系主编QQ:419297645更改。

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

(0)
CatherineCatherine
上一篇 2017-05-15 15:53
下一篇 2017-05-15 17:47

相关推荐

  • 网易游戏交互设计师分享:游戏交互设计做什么及学习的关键性方法

    嘉宾介绍 陈振华,网易游戏做交互设计师 分享主题 游戏交互该如何做,新人该如何入门 交互设计是什么 首先我们来理解下,我们平时认为的交互是什么? ONE. 用户研究,调研 TWO. 功能分析,了解一下我们这个产品,也…

    2015-12-05
  • 交互设计的进阶三重境

    ✨交互设计师的迷茫作为交互设计师,工作几年之后,如果还处在 “从产品接需求输出线框图” 的循环中,或许就会产生一些迷茫:自己的价值和竞争力在哪里?如何突破,进一步提升自己的能力与话语权?迷茫,是因为无法定位自己,寻不得方向,找不到出路。所以,当我们提问该如何提升时,不妨先想一想,【用户体验设计】这座高塔,究竟是个什么模样,而自己又在什么位置。此文中,我根据自己的一些工作经历和理解,将交互设计师的能力成长分出三个阶段:功能完善者、产品推动...

    2018-02-26
  • 【上海实习】上海最TOP实习

    TG实习狗每日发布北上广深最新鲜的实习信息,陪伴你从大学到职场TG旗下媒体:TG实习狗、TG校招狗、TG内推狗▲ 点击图片马上了解 ▲招收15-20名高潜质学员进行为期1-2年系统定制化培养助力高潜质人才进入顶尖名企今日求职贴士发表于1秒前老狗查看:66666回复:233你真的适合咨询行业吗?在我看来任何选择咨询的人都会不可避免的询问自己以下几个问题1.Do I Love Solving Problems?2.Do I Think in...

    2018-04-09
  • APP界面设计流程

    此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的。包括:1、交互流程设计;2、风格定位;3、功能icon设计;4、界面视效整体优化;5、应用icon设计。   来源:G-UIDEA

    2016-05-06
  • The Benefits of Mobile Interaction Design

    Mobile interaction design is the process of creating user interfaces for mobile devices. It involves creating a user experience that is tailored to the device’s size, capabilities, and context. Mobil…

    交互设计 2023-04-03
  • 用户体验促进销售,因为专业,所以放心!

    在激烈的市场竞争中,如何突破胶着的态势,是每一个经销商必须面对的考验,过去的数年我们迎来了婴幼儿纪念产品行业大发展,同时伴随着发展也出现了许多行业的问题,如粗制仿冒产品、过度的市场开发、价格战等,在多年的市场摸索中,我们认为只有坚持品质领先、积聚品牌内涵才能构筑核心竞争能力,才能在激烈的竞争中赢得用户长久的信赖。好的品牌形象与产品如何能让用户充分感知呢?增强用户体验是重要的方法。面临市场上如此多的商家和产品,用户的取舍关键因素在哪里呢?...

    2018-04-18
  • AxureUX企业及通用型网站WEB端原型模板发布

    01作品信息作品名称:AxureUX企业及通用型网站WEB端原型模板作品类型:模板类发布日期:2018-04-02最新版本:v1.0主要适用:Web端软件版本:Axure 8.0文件大小:1.5MB作品编号:TEM007作品售价:¥19.00详细介绍及演示:http://www.axureux.com/home/templateswebgp.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本...

    2018-04-05
  • 让产品经理无言以对的交互设计流程

      首先,要感谢我的 Leader 和师姐,在他们的帮助下,我才理清了这个交互设计流程。   虽不敢说这套方法一定是最优的,但至少是我工作以来一个的专业上里程碑。   话不多说,直接开讲。   日常…

    2017-03-06
  • APP设计当中不容忽视的20个小细节

    APP设计当中不容忽视的20个小细节如下: 1、一致,一致,还是一致 你能做的最重要的事情就是保证用户界面运作的一致性。对于列表框来说,如果双击其中的项,使得某些事件发生,那么双击任何其它列表框中的项,都应…

    2015-04-14
  • App加载动画知识体系:交互、视觉都需要掌握!

    我大胆预测了一下,以后App的加载动画都应该遵循越来越简洁的设计原则,突出内容,去掉无用的、过渡的形式设计。也许无文字提示的加载动画确实是一个流行趋势!

    2017-05-12