万字干货!写给界面设计师的职场应答指南!

遇到跨职能同事对界面设计方案发出灵魂拷问,设计师该如何应答?本文从理论和应用层面,对不同种问题总结了万字科普,希望有用~

往期干货:

一、那些年,我遇到的灵魂拷问...

我的日常工作嘛,想必和其他从事界面设计相关工作的设计师一样:70%的时间用来构思设计策略和产出设计方案、30%的时间用来和产品团队各种各样的角色打交道:比如需要通过项目展示,让产品决策者买账;或者给开发工程师解释设计细节、跟踪上线后的品控问题。而在这 30%的沟通时间中,与合作小伙伴们的探(撕)讨(逼)设计问题总是不可避免的一个环节。那在这个时候,如何让他们理解问题背景、如何让他们理解你的设计方案、如何让他们“买账”......诸如此类问题是否能高效沟通,显得尤为重要。

其实,对于一些比较偏产品向的界面设计问题(比如:为什么支持“批量取消"?为什么有“确认页”?为什么“全屏展示活动图片”?...等流程、功能、信息展示型问题),我们解释起来是比较容易的——我们可以对标着产品经理制定的产品目标,结合数据分析师或用户研究员总结出来的数据或用户事实,即可快速地合理解释自己的设计方案。但是,如果你的小伙伴恰巧是非常严谨认真、刨根问底的人,他们可能会问出一些 非 常 微 妙的问题,让设计师立时无法抓到一个准确的论点或论据展开阐述,往往只能和团队的小伙伴们相顾无言。那这些 非 常 微 妙 的问题具体指的是什么呢?容我举个栗子:

万字干货!写给界面设计师的职场应答指南!

类似于以上的问题,想必各位设计师在日常工作中并不罕见。然而我每每回答时,对话会进入一个奇妙的怪圈,be like:

“你不觉得这样设计更清晰/工整/美观吗?”

“我不觉得啊,我觉得都长得差不多。”

“可是这样用户能更快找到交互目标,完成交互任务,有更好的用户体验呀。”

“啊?有吗?为啥?所以呢?”

“......”

所谓“忍一时越想越气,退一步越想越亏”。咱就是说,每次都不知道如何解释、眼睁睁看着设计被“砍”来“砍”去可不行。为了让我自己变成更加“耐撕”的设计师,同时尽可能帮助到遇到类似问题的小伙伴们,我尝试着阅读、思考、总结了一些界面设计的科普知识,并以此来深入浅出地、感同身受地、科学严谨地解释一下设计师那些对于微妙设计细节的坚持,到底是从何而来的。欢迎各位设计师小伙伴给你们身边发出类似灵魂拷问的跨职能同事分享这个科普帖;也欢迎刚出新手村的、从事界面设计相关工作的设计师小伙伴们,把它当作入门级界面设计理(下)论(饭)科普来阅读。

1. 呔!灵魂拷问挑战一!

万字干货!写给界面设计师的职场应答指南!

对于“界面设计的工作定义”这个问题,我根据自己的理解和体悟,尝试着用更加通俗的方式概括了它的答案:界面设计,不仅仅是埋头把线框图“从无到有、从有到优”地吭哧吭哧画出来就完事儿了,它还包括了解目标用户的特性和需求,了解产品的细节和目标,并根据用户的期望和产品的商业目标,假设出最“两全其美”的方案,并用目标用户能“看得到”“看得懂”“能操作”的界面把这个方案表达出来。对于这个“两全其美”的方案本身,比如有什么功能、流程长什么样子这些问题,相信产品团队的其他角色会贡献一定的想法和决策;而对于让用户能“看得到”“看得懂”“能操作”这个要求,则是界面设计工作中的主要责任和挑战,也是我们花费了大量时间去“纠结”的关键点所在:

万字干货!写给界面设计师的职场应答指南!

有人肯定要问:但凡是能用智能电子产品看到你这个界面的人,肯定看得到字、认识字、也知道要点哪儿。为什么说“看得到”“看得懂”“能操作”这三点居然是个“挑战点”呢?——其实,“能做到”不一定意味着“做得好”,实际上人类的知觉和行为能力是十分有限的。关于这个论点,我将用一个例子来让大家深切了解(人类)用户的认知局限性。

请仔细阅读下方的视频截图中,黑底白字的字幕给你“布置”的“观察任务”,之后再点击下下方的视频以开始观看:

万字干货!写给界面设计师的职场应答指南!

(《The Monkey Business Illusion》 - B 站视频源 点击下方视频直接播放,或复制链接跳转到 B 站观看):

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

万字干货!写给界面设计师的职场应答指南!

默数白衣服的人传了几次球

看完这个视频,相信大家对于人认知的局限性已经有了一定感悟。然而,和“有限”的用户认知相反的是,在实际的产品规划中,(由于不断更新的商业目标)产品的功能和信息的增量却是“无限”的。这对矛盾意味着,要做到“看得到”“看得懂”“能操作”这三点,团队中的设计角色必须斟酌如何正确引导用户在海量信息中,按我们预期的方式和顺序去浏览和操作:

万字干货!写给界面设计师的职场应答指南!

而这就是,除了“画界面”——即“把产品经理规划的功能落实在界面中”这个要求之外,界面设计的另一个要求。这也导致了设计师在设计界面的工作中,会反复斟酌一些在跨职能同事眼中显得“无足轻重”的细节了。

看到这里,各位看官可能会有进一步的疑问:诚然,“引导用户按商业期望并尽量无痛地操作界面”在上述矛盾点的铺垫下,确实显得十分重要。但是,这难道不该跟“界面结构”“文案”这些更直观的要素具有关联性吗?正确的交互引导和设计师纠结来纠结去的界面细节(比如:元素距离、字体大小、图标元素......等),到底有什么因果关系呢?

用一个不那么恰当的例子做类比:程序员在模拟环境下跑代码之前,虽然没有那么确切的证据能证明这段代码一定能跑通且无 bug,但是他们往往会参考以往的经验和网上的案例,用最保险的逻辑和语法至少先码出一段能跑的代码,让它先运行起来再纠错。那么相似地,设计师设计的界面在上线之前,谁也不能保证这个设计一定能达成设计目标——商业目标及用户体验目标,但起码我们可以参考行业公认的“共性设计规律”,以及通过用户调研、数据分析得来的更有针对性的“个性设计规律”,用最自信的方式先设计出一个达到开发和上线标准的界面:

万字干货!写给界面设计师的职场应答指南!

而上述所说的“行业公认的共性设计规律”,往往就和那些跨职能容易忽略、但设计师却不停纠结的界面设计细节,息息相关。

那么,这些“行业公认的设计规律”是什么?决定了怎么样的设计细节?以下我将挑选最基础的一些案例,用跨职能小伙伴们常见的“灵魂拷问”作为开头,结合理论和应用场景,帮助大家更快地感受和理解。

2. 呔!灵魂拷问挑战二!

万字干货!写给界面设计师的职场应答指南!

我们来抽象和展开这个问题:为什么我们需要对某些界面模块进行“特别的设计”?需要“特别的设计”的情景是什么?为了回答这个问题,我想首先介绍一个界面设计的基础理论给大家:

万字干货!写给界面设计师的职场应答指南!

这个理论其实很好理解,无需再深挖背后的心理或生物学原理啥的。不过值得一提的是,这个理论其实不仅运用在界面设计中,在很多其他的艺术或设计创作领域也很常见,我能快速想到的一个(奇怪的)例子就是,喜剧《唐伯虎点秋香》中唐伯虎初遇秋香时,唐伯虎端详了一下秋香的外貌,对身边的祝枝山说“长得也是一般的好看而已嘛”,然后祝枝山意味深长笑了笑、朝着人群大喊:“美女!”,结果所有华府的女佣都转过了头,唐伯虎惊讶地往后一跳,直呼:“哇~秋香果然是国色天香,超凡出尘!”

万字干货!写给界面设计师的职场应答指南!

如果把唐伯虎想象成目标用户(?),把秋香姐想象成我们想重点推荐的功能(??),要想让秋香姐,啊不是,某个功能对用户而言,是引人注目且过目难忘的,我们需要做出强烈的“对比”来凸显——在界面设计中,这个“对比”可能是颜色、尺寸、形状、留白等样式上的各种不一样:

万字干货!写给界面设计师的职场应答指南!

让我们再回头看看这个灵魂拷问:诚然,通过“挑选一个合适的展示位置”在现有布局中达到“使模块呈现最好的曝光量、(重复)点击率等表现数据”这个目的是可行的,但是不可否认的是,一个载体界面上最佳的位置是有限的,位置的更改更是对页面其他模块而言会牵一发动全身、对用户而言会产生新的学习成本。一旦我们想尽量维持其他现有功能的布局、或希望除了位置优化之外,穷尽最大所能提升模块的行为表现时,为这些模块做特别的设计优化是必要且合理的。当然,这种“特别的设计优化”中的具体设计细节,也要考虑到此处设计复杂度 v.s.研发周期等“性价比”问题,不能理直气壮一味追求“特别的视觉效果“而掉入“过度设计”的怪圈。

3. 呔!灵魂拷问挑战三!

万字干货!写给界面设计师的职场应答指南!

让我来进一步抽象这个问题:对于界面中的文字信息,既然可以利用格式(分行、分段)来区分其类别和从属关系,我们为什么还需要进一步给予文字不同的视觉权重呢?在进一步解释其原因之前,让我们先明白另一个关于信息阅读的“规律”:

万字干货!写给界面设计师的职场应答指南!

为了更好地理解这句话,让我们将自己代入一个例子来实际体会一下所谓的“通过抓取关键词判断全局内容”是个什么情况,请回答以下问题:

万字干货!写给界面设计师的职场应答指南!

回想一下,你在以上例子中收集信息的方式是什么样的?是挨个阅读了第一组和第二组中的所有内容并做出了判断?还是跳跃阅读式提取了和“台灯”更相近的关键字并做出了判断?相信大部分人都更偏向于后者,而后者就是我们所说的“通过抓取关键词判断全局内容”。

记得之前在阅读《社会心理学》这本书的时候,我发现在应用层面上,几乎所有的人类行为动机,其背后都有一个较根源的规律:人脑总是倾向于“简化提取信息“和“分散认知压力”。那么,当我们尝试着用这个心理学现象去反观“信息线索”这一规律时,它似乎变得可以推理和解释了:当我们的界面中堆叠了海量信息和视觉元素时,和我们预想的“用户会按顺序依次获取信息并进行脑内加工”不同,用户下意识会为了简化认知过程、分散认知压力,去跳跃式阅读并“采摘”他们认为的关键信息到大脑的“中央处理器”中,进行进一步加工,以便搞清楚“这个页面是什么?”、“我能否找到我需要的东西?”、“我大概能在哪里通过什么后续交互找到它?”...等问题。不知道大家是否曾看过“F 型阅读顺序”这个用户阅读规律,其实它的底层逻辑也同样是“信息线索”。

那么让我们回到开头的灵魂拷问:为什么需要给界面上的某些文字进行视觉权重的处理,也就是加黑、加粗、加大、加行距等等?其实答案已经不言而喻了——为了把我们想传递给用户的信息,像喂饭一样“喂”到总是跳跃式阅读、可能会遗漏关键信息的用户的“嘴”中,让他们找到他们想找到的、或者我们想呈现给他们的信息。举两个栗子:

万字干货!写给界面设计师的职场应答指南!

4. 呔!灵魂拷问挑战四!

万字干货!写给界面设计师的职场应答指南!

用简单的话来复述这个问题,就是:利用额外的动态控件去传递信息,它的必要性是什么?对于这个问题的答案,让我从一张图片开始,为大家展开阐述。如下图所示,请你尝试盯着图片中心的蓝色圆形,并尝试用余光去辨别距离这个圆形由近及远的物体分别是什么:

万字干货!写给界面设计师的职场应答指南!

你是否有如下感觉:距离圆形,即我们的视焦点越远的物体,越难以辨别是什么形状?那么请你再尝试盯着下面这张动图的图片中心的圆形,并尝试用余光去辨别最远处那个不停运动的物体是什么:

万字干货!写给界面设计师的职场应答指南!

对于这张图片,那个动起来的、距离圆形较远的物体,好像没有静态的时候那么模糊了?以上这两个例子,其实都涉及到一个关于人类视觉的普遍规律:

万字干货!写给界面设计师的职场应答指南!

这个规律实际上和我们眼球构造导致的视觉特性有关,如下图所示:

万字干货!写给界面设计师的职场应答指南!

人的眼球视觉可分为“主要视觉”和“次要视觉”。其中,“主要视觉”分布在中心区域且范围较小,由“视锥细胞”产生图像,而“视锥细胞”对于光线充足条件下的静态目标的色彩和形状细节都十分敏感,在白昼时是人类主要使用的视觉细胞;“次要视觉”则围绕“主要视觉”分布在其周围且范围较大,由“视杆细胞”产生图像,“视杆细胞”对于亮度和动态十分敏感,是黑夜中在“视锥细胞”失灵时的主要视觉补充方式。

其实,不仅是人类,很多其他以捕猎为生的哺乳动物的眼球也有同样的视觉特征。“主要视觉”能帮助捕猎者更好获取在视觉中心的猎物的一举一动,“次要视觉”则能帮助捕猎者快速获取周围环境中潜在的危险或捕猎竞争者的动向变化。

这就解释了为什么当你在光线充足的屏幕上,盯着上面那张静态图片中的圆形时,你的“主要视觉”只能支持你看清视觉焦点范围内的很小一圈的事物,比如距离圆形最近的外星人头像;而对于那些距离圆形较远的形状,则因为落在了“次要视觉”中,而随距离变得越来越模糊。

那上面这个视觉规律和本环节的灵魂拷问又有着怎样的关系呢?首先我们要明白的一点是,人类只有一双眼睛、一个视觉焦点(动线)。那么,当这唯一的视觉焦点随着我们正在进行的交互,移动到界面中的某个位置时,可能某些比较重要的、距离视觉焦点较远(而坐落在了“次要视觉”区域内)的信息,正在随着交互的进行更新了部分内容,那用户很可能就错过了这个重要信息的更新。那么,设计师能做什么来防止这种情况发生呢?

根据上文提到的视觉原理,这里应该有两种思路:1. 把关键信息的静态文案,放置在当前交互(视觉)焦点附近 2. 如果 1.的解决方案在当前界面布局规范中不被允许,那么我们可以利用“视杆细胞对动效敏感“的特性,动态展示关键信息。

万字干货!写给界面设计师的职场应答指南!

最后,让我通过总结上文的内容,来快速回答一下本环节的灵魂拷问:当你想强调的信息和当前的交互(视觉)焦点较远的时候,由于视觉的局限性,我们很难感知到其变化。如果这种“不被用户感知”的概率很大、且其造成的体验或商业后果让人难以接受时,将该信息重复强调在焦点附近、或者用动效引起用户的注意,都是必要且合理的设计手段。

5. 呔!灵魂拷问挑战五!

万字干货!写给界面设计师的职场应答指南!

同样,首先让我尝试转译和展开这个问题:在内容能够完整传递信息的情况下,为什么我们还要增加额外的视觉要素?对于这个问题,和前面的环节相同,让我先引入一个和答案有关的设计规律:

万字干货!写给界面设计师的职场应答指南!

单纯看字面的意思或许有些抽象,为了方便大家理解,同样我将用一个实际的例子来让大家亲身感受一下这个规律。如下图,请分别大声朗读出两个组中的所有词汇,朗读时记得尽量快速并保持正确(想挑战更高难度的小伙伴,也可以尝试朗读每个词汇的字体颜色名称):

万字干货!写给界面设计师的职场应答指南!

你是否发现自己在识别和朗读第一组内容的时候,速度是快于第二组的?那原因又是什么呢?如果你仔细研究上面两组词汇,就会发现:第一组词汇的字面意思和字体颜色名称是一致的,比如:“粉红色”三个字的字体颜色也是“粉红色”;而第二组的上述两个要素,却是错位的。其实,在这个例子中,(如果你挑战的是朗读词汇本身)字体颜色就是一种“环境刺激物”,当人们对“环境刺激物”和目标识别物本身的信息认知是一致或者相似的时候(正如第一组所展示),就如本规律所说,人的辨识速度会更加快;反之则减慢。接下来,让我再例举一个和界面设计更贴脸的例子,让大家快速感受一下:

万字干货!写给界面设计师的职场应答指南!

如上图所示的三组提示,你阅读时长最短的是哪一组?你能最正确地 get 到弹框信息的又是哪一组?想必大多数人的答案都是第三组,因为其提示中的文字和辅助刺激物(颜色、图标)传递的信息是一致的,因而能使人们更快更正确 get 到信息。其实这个例子也体现了界面设计中,最常见的“环境刺激物”是什么——比如:颜色、图标、插图......这种视觉类刺激物;其他一些不常见的“环境刺激物”包括了:声音、震动这些和其他四感相关的刺激物(写到这里突然想到windows系统里,当警告框莫名其妙连续弹出时,那一连串的“噔噔噔噔噔”,就算现在回想都能吓到炸毛的程度...):

万字干货!写给界面设计师的职场应答指南!

当然了,选择“环境刺激物”时也不一定非要挑选被文化或普遍认知刻进我们 DNA 的那些元素,诸如:红色=警示、感叹号=有问题......,它也可以来自特定产品领域、甚至完全来自你的产品本身:通过在交互中的不断重复和保持一致,将新的“刺激物+含义”组合刻进用户的潜意识中。比如,在填写密码/验证码等口令类输入的情境下,弹出框的震动会让人甚至都不用看错误提示,就意识到“填写错误”这个信息。这是因为某些聊天和金融类 APP 已经通过不断应用该“环境刺激物”在相应的场景,来让我们下意识把“震动”和“填写错误”联系起来:

万字干货!写给界面设计师的职场应答指南!

好的,有点扯远了......让我们回到这个问题。已知人在与界面交互时,注意力是线性的+有信息量上限的,当设计师面临:

  1. 用户正在最重要的任务或者信息流中,且不应该被打断并转移注意力到次要信息线上。但同时,获取该次要信息对于用户后续的操作决策而言,又是必要的;
  2. 用户正在主信息流中获取某个信息,但 ta 需要花更少的专注力成本在这个信息上,以便于将注意力“花在刀刃上”。

在这两个情况下,用视觉权重适当的、含义一致的“环境刺激物”去辅助呈现对应的信息模块,是合理且有必要的设计手段。

万字干货!写给界面设计师的职场应答指南!

这是否给你带来了一些颠覆原来认知的、对界面设计的启示?——有的时候,界面设计上的“多设计”,反而是为了用户“少阅读”。

6. 呔!灵魂拷问挑战六!

万字干货!写给界面设计师的职场应答指南!

同样,让我转译一下这个问题:在分割界面信息模块上,多样的空白行、多余的分割线,他们存在的意义是什么?在回答这个问题前,同样让我们从一些由实验结果总结而来的“规律”作为前情铺垫:

万字干货!写给界面设计师的职场应答指南!

这个规律其实很简单直观,大家可以回想一下自己欣赏各种平面艺术作品时,是否都是按照简单几何形去拆解构图的?或者反过来思考,在阅读过的平面设计构图教程中,是否大多数构图法则也都是以简单几何线/形作为基础的,比如:三角形、圆形、正方形、梯形、对角线、放射线等等...从正反两个方向来看,都有事实印证这个规律的正确性。

在界面设计中,由于“传递信息”这个关键目的,带来了“布局的复杂度必须较低”的局限,同时也是考虑到技术投入和实现难度等问题,当设计组件或信息模块时,我们通常会采用的形状仅有方形和圆形:

万字干货!写给界面设计师的职场应答指南!

其中,圆形常用于偏视觉的元素(比如:图标,图标按钮等),我们暂且不展开。接下来,让我们聚焦在常应用于控件或文字模块的“方形”上。这时候就不得不引入一个在界面设计领域,大家最熟悉的理论之一——“格式塔”理论了。这里为了让解释更加好理解一些,让我直接选取一些和本环节问题最相关的两个“子理论”来为大家展开阐述。第一个“子理论”是“邻近性原则”:

万字干货!写给界面设计师的职场应答指南!

上图其实把这个原则体现得淋漓尽致,我就不再为大家举另外的栗子展开解释了。其实,这个原则就回答了“信息间的空白空间”存在的必要性——你是否还记得前文提到的“信息线索”这个规律?既然人们的界面阅读习惯是“快速扫描”、“跳跃获取信息”,那么,和“文字权重的多样性”类似,“空白空间”往往能让人在扫描信息时,下意识推理出信息结构(即信息的从属、分组关系),从而使得这种“跳跃式获取信息”的行为更加快速和准确。比如:当用户看到一整块被空白分割出来的、较独立的部分时,会下意识去扫描第一行——他们往往会认为那一行是标题。通过这种方式,他们可以了解这个信息模块是关于什么的、有没有仔细阅读的必要......等等关键信息。

万字干货!写给界面设计师的职场应答指南!

那么,如果“有层次的空白空间”就能在视觉上帮助分割界面的信息层级了,为什么有时候设计师还会应用分割线/框呢?首先需要从另一个“格式塔”的“子理论”——“同域原则”说起:

万字干货!写给界面设计师的职场应答指南!

这个规律说明了“分割线”也同样能帮助信息分组。并且,在设计实践中,“分割线”这种更为强烈的视觉元素,其分割信息的视觉强度是大于“空白空间”的——这意味着在以下两个情况下,分割线是有存在必要的:

  1. 当在界面中的某层平级元素里,有最最需要重点强调的单个信息组时,需要用分割线/框强调之;
  2.  当界面中的某类平级元素,因为内含的子元素太多太杂导致“分无可分”时,需要引入视觉上观感更强烈的分割线/框来强化分组。

万字干货!写给界面设计师的职场应答指南!

当然,还有其他例外的情况也会使用到分割线/框,它们和视觉分组无关但和交互引导息息相关,比如:“带边框的信息模块”可用于暗示该模块可点击、且点击都指向同一个目的地页面;“一列带框的信息卡片被屏幕边缘隐藏一部分”,能用于暗示该卡片列是可横向滑动的......等等,这些常见的使用场景相信大家都不陌生,就不展开讨论了。

所以总结并回答一下本环节的问题:“空白”的多样性,能帮助用户在扫视界面时,更快理解界面中的信息的分组关系、子母集关系,从而提升当用户跳跃式阅读界面时,其找关键字的准确性和速度;而分割线/框,作为“空白”的补充手段,既能在视觉上强调单个信息模块,又能帮助在层级过多、元素过杂的情况下,让信息的分组显得更清晰。因此,在信息较多、层级较复杂的界面中,设计师合理地利用多种数值的空白间距、分割线/框,是一种能帮助用户在阅读信息时“大脑减负”的常见方式。

7. 呔!灵魂拷问挑战七!

万字干货!写给界面设计师的职场应答指南!

上述问题中提及的,无论是“菜单”还是“筛选”,本质上都是为目标选项池新增属性维度,并按这些维度分别分组,基于此让用户“按组定位”逐渐找到目标选项的一种交互方式。所以,让我们转译一下本环节的问题:和让用户直接阅读选项信息并决策相比,为什么我们需要通过(多层)分组的方式,让用户决策的过程从“一次性选择到目标”到“通过层层筛选、慢慢锁定目标”?它应该被应用在什么情景中?

因为这个问题解释起来也有些复杂,因此,同样地,让我从人类“决策行为”的剖析开始阐述。人的决策行为,本质上分为“感知”和“思维”两个步骤:先“感知”一个可选项、理解它的内容、并将以上内容“存储”在自己的“短时记忆”中,然后接着“感知”下一可选项并同样存储在“短时记忆”中......然后通过“思维”快速判断自己对每个可选项的主观喜好、客观利弊,最后做出决策。

从上述的“决策行为”方式中,我们可以看到承上启下的关键点是“把选项储存在'短时记忆'中”。说的有点悬乎,举个通俗的栗子来讲就是:当你上班摸鱼,思考中午吃啥的时候,你得先在脑内回忆一下今天食堂的菜谱有啥,才能基于这个信息纠结一小下下,最后决定吃什么。那可能有人又会问:这“短时记忆”又是什么?为什么选项会被存储在“短时记忆”、而不是其他什么什么的记忆里呢?

好的,那让我们进一步展开这个话题,来探讨一下“短时记忆”这个概念。让我快速用一张图片来给大家科普一下什么是“短时记忆”,以及它的兄弟“长时记忆”:

万字干货!写给界面设计师的职场应答指南!

一般,在我们采集到信息中的关键内容后,它会被首先放入“短时记忆”中,只有当我们不断复习(刺激)该信息到某个临界值,它才会被放入“长时记忆”库中,拥有“长时记忆”的特性:

万字干货!写给界面设计师的职场应答指南!

一个事实是:大多数的选择决策往往都是一次性的。这就决定了它们只会存在在“短时记忆”中,并拥有“短时记忆”的局限性——留存时间短,最关键的是,可留存的信息量少。那到底这个“少”又是多么地“少”呢?这时候就不得不提到继“格式塔原则”之后另一个界面设计中最常被提及的定律——“米勒定律”了:

万字干货!写给界面设计师的职场应答指南!

那么,基于上面提到的两个关键点(即“记住可选项是决策的关键点”、“能记住的可选项的容量十分有限”),我们可以引出一个和用户决策行为相关的界面设计中的规律——“席克定律”:

万字干货!写给界面设计师的职场应答指南!

下面我将举一个栗子,让大家感受一下这个规律将如何作用于我们的决策行为中。假设此时你正准备吃中饭,那么请分别在下面 A-C 组的菜谱中决定你想吃的东西。你可以尝试计时,自己从开始阅读菜谱到最后决定吃什么共用了多久:

万字干货!写给界面设计师的职场应答指南!

体验完上述的栗子后,请试着回想一下:是否从 A 到 C 组的决策时长有个非常明显的增长趋势(如果你有一丢丢选择恐惧症,那么这种增长会更加明显)?这就是“席客定律”想告诉我们的规律。

那么在设计实操中,如果可选项过多(超过 9 个),且这种决策对用户而言是必要的、不可跳过的,我们怎么减少用户在进行该决策时的思考负荷呢?在本环节的开始,我曾提到过,人类的决策过程分为“感知”和“思维”两个步骤,因此我们的优化方案也可以从分别优化这两个环节入手:

  1. 优化“感知”的处理负荷,即帮助用户剔除非必要的可选项,可用的手段有自动筛选、自动排序,以及手动筛选框、手动排序等功能;
  2. 优化“思维”的处理负荷,即将决策的关键因素拆解成不同的维度(组),并将信息多层次地分组放置,形成各种样式的“菜单”,手风琴菜单、下拉菜单、侧边菜单...等等。

万字干货!写给界面设计师的职场应答指南!

当然,解决措施有意义的前提是想解决的问题是有意义的,因此我们可以逆推,上述 1.和 2.的解决措施的应用场景为:选项库在做决策的当下,只会存在于用户的“短时记忆”中——毕竟正因为如此,才有了决策能力的局限性,才引发了后续问题和解决思路。那么,到底是哪些具体的应用场景符合上述条件呢?我罗列了一下能想到的场景:

  1. 动态变化的选项库,比如:商品搜索结果列表、活跃用户列表、最热门的歌曲列表等等;
  2. 非用户定制的、使用频率较低的选项库,比如:工具类软件的某些功能列表,系统设置选项列表等等。

万字干货!写给界面设计师的职场应答指南!

而一旦选项库是静态的、使用频率较高的、用户定制的,在这种情况下,选项库大概率已经坐落在了“长时记忆”的区间中,所谓“自动脑补”。在这种情况下,设计师可以不用考虑优化决策体验的问题。这时候,设计师使用“菜单”或者“筛选框”等控件的考量,更多应该是基于用户的心智模型、竞品的常规处理方式、它本身或其他同界面入口的曝光量影响等问题了。

二、灵魂的拷问?灵性的应答!

虽然,贯穿本文的始终是一个个“规律”和“理论”,但引用这些“规律”“理论”的本意是为了佐证本文中各种观点的合理性(毕竟“理论”和“规律”都是多次实际实验后总结出来的、在当前情景下最可能发生、最普适的现象),而非真的让大家在实际解决问题的时候,去咬文嚼字般地用似是而非的语言营造自己的权威感。

让我们开个脑洞换位思考一下:当你在和程序员交流的时候,他们直接甩出代码开始和你讨论数据结构;当你在和数据分析师交流的时候,他们直接把公式和 XX 定理摆在你面前高谈阔论......在这些情况下,你非但不会觉得他们很专业,反而会一头雾水地当场无语,对吧?推己及人,我建议大家在实际的跨职能沟通中,能够更多以这些“理论”“规律”中较表象、容易理解的信息作为起点,结合实际的问题情景、设计方案去解释和沟通:

万字干货!写给界面设计师的职场应答指南!

以上就是基于我在实际工作中跨职能小伙伴们常问我的灵魂拷问,深度研究和思考后总结出的一些理论依据和应用方法,希望对你无论是审视自己的设计作品、还是回答跨职能同事的问题,都有参考价值。最后,感谢大家阅读本文,也欢迎各种点赞评论收藏,栓 Q~

欢迎关注作者的微信公众号:「应谋鬼计」

万字干货!写给界面设计师的职场应答指南!

点赞 20
收藏 41

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。