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

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


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

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

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

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

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

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

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

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

今天这篇文章,就是想借着这个问题,来聊聊交互设计中的认知维度,以及如何利用这几个维度,让我们成功解答面试题,成功完成与程序员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

相关推荐

  • 百度糯米店铺设计思考:以用户思维去创造设计需求

    设计应该是创造新事物新方向的引导者,不仅要主动的思考产品和业务需求,更要通过用户思维去创造设计需求,给产品和业务带来更大的影响,给用户创造更多的价值。『世界就是你所塑造的模样,成为变革者而非跟随者。—–Alex Osterwalder』

    2017-05-11
  • 移动端UX设计9条黄金法则

    在设计移动端APP的时候,最重要的事情就是要确保APP的可用性和易用性。如果一款APP可用性很低,没有什么实际价值,用户没有任何理由去使用它。如果一款APP是有使用价值的,但是需要用户花上大量的时间去学习如何使用,用户也不会使用。

    2017-05-21
  • 【产品分析】微信拼手气红包的贪嗔痴

    春节期间火爆的“拼手气”红包,让用户疯狂点击拼手速网速,拼rp看金额,每一个环节都深深戳着用户的G点,高潮迭起。“拼手气”就是拼人品,那么,最佳手气者是不是有机可循呢?微信红包这样的设计目的在何处? Aaron毛…

    2015-03-05
  • 视觉冲击 | 颜色vs反差,哪一个更能吸引眼球?

    大多数的人们都熟悉色彩心理学;成百上千的文章、案例研究、甚至是从不同角度进行分析的图表。颜色对我们的影响,将影响我们决策过程中的每一个选择。这点是毫无争议的。但是,我们不应该盲目的遵循某一个原则去辨别。今天,我们就一起来测试对比度在吸引关注中的作用。

    2017-06-04
  • 交叉学科-交互设计春季周末班课程计划

    开课时间:本周末4.14日开课,可预约免费试听。请单独联系教务老师。联系方式:教务老师微信二维码上课地址:北京海淀区北四  环保福寺桥南  恒兴大厦10层E室

    2018-04-11
  • 如何制作交互组件库

    曾几何时,每次交互稿都是徒手画,或者截个图在现有的界面上改造。渐渐感到同一平台,每个版本都有很多重复劳动,是时候做个交互组件库了~ 什么是组件库? 就是类似axure左侧栏的这一坨标准控件,方便直接拖拽使用…

    2017-07-24
  • 来自腾讯交互设计师的分享:交互微动效设计指南

    本设计指南适用于UI界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了一些通用的设计建议,帮助设计师理清动效设计思路,提高设计效率。

    2017-05-02
  • Design is not about the pixels — or why the lean approach rocks

    For a while now, I focused on building partnerships with my freelance clients. A couple of pages taken out of lean UX book helped a lot. While talking with potential clients, especially coming from D…

    2015-06-02
  • 我们深挖的那些设计小惊喜 【UXRen译#151】

    作者: Cosima Mielke |  翻译:Sherry ,校审:佳歧 & Teenie     CodePen网站已成为开发者的游乐场。那是一个你可以驰骋想象、开发创造的沙盘。里面既有实践的东西,也有实验性的概念——是个激发灵感的宝库。…

    交互专题 2017-08-07
  • 资讯类APP竞品分析报告

    一、摘要 为了能深入了解主流新闻客户端在「功能模块」、「内容运营」以及「界面交互」上的特点,我对Zaker、今日头条、网易新闻这3款APP进行了对比分析,并得出结论: Zaker定位于具备明确新闻需求的用户,整体较…

    2015-03-17