萬(wàn)字干貨！寫給界面設(shè)計(jì)師的職場(chǎng)應(yīng)答指南！

遇到跨職能同事對(duì)界面設(shè)計(jì)方案發(fā)出靈魂拷問(wèn)，設(shè)計(jì)師該如何應(yīng)答？本文從理論和應(yīng)用層面，對(duì)不同種問(wèn)題總結(jié)了萬(wàn)字科普，希望有用~

往期干貨：

一、那些年，我遇到的靈魂拷問(wèn)...

我的日常工作嘛，想必和其他從事界面設(shè)計(jì)相關(guān)工作的設(shè)計(jì)師一樣：70%的時(shí)間用來(lái)構(gòu)思設(shè)計(jì)策略和產(chǎn)出設(shè)計(jì)方案、30%的時(shí)間用來(lái)和產(chǎn)品團(tuán)隊(duì)各種各樣的角色打交道：比如需要通過(guò)項(xiàng)目展示，讓產(chǎn)品決策者買賬；或者給開發(fā)工程師解釋設(shè)計(jì)細(xì)節(jié)、跟蹤上線后的品控問(wèn)題。而在這 30%的溝通時(shí)間中，與合作小伙伴們的探（撕）討（逼）設(shè)計(jì)問(wèn)題總是不可避免的一個(gè)環(huán)節(jié)。那在這個(gè)時(shí)候，如何讓他們理解問(wèn)題背景、如何讓他們理解你的設(shè)計(jì)方案、如何讓他們“買賬”......諸如此類問(wèn)題是否能高效溝通，顯得尤為重要。

其實(shí)，對(duì)于一些比較偏產(chǎn)品向的界面設(shè)計(jì)問(wèn)題（比如：為什么支持“批量取消"？為什么有“確認(rèn)頁(yè)”？為什么“全屏展示活動(dòng)圖片”？...等流程、功能、信息展示型問(wèn)題），我們解釋起來(lái)是比較容易的——我們可以對(duì)標(biāo)著產(chǎn)品經(jīng)理制定的產(chǎn)品目標(biāo)，結(jié)合數(shù)據(jù)分析師或用戶研究員總結(jié)出來(lái)的數(shù)據(jù)或用戶事實(shí)，即可快速地合理解釋自己的設(shè)計(jì)方案。但是，如果你的小伙伴恰巧是非常嚴(yán)謹(jǐn)認(rèn)真、刨根問(wèn)底的人，他們可能會(huì)問(wèn)出一些 非 常 微 妙的問(wèn)題，讓設(shè)計(jì)師立時(shí)無(wú)法抓到一個(gè)準(zhǔn)確的論點(diǎn)或論據(jù)展開闡述，往往只能和團(tuán)隊(duì)的小伙伴們相顧無(wú)言。那這些 非 常 微 妙 的問(wèn)題具體指的是什么呢？容我舉個(gè)栗子：

類似于以上的問(wèn)題，想必各位設(shè)計(jì)師在日常工作中并不罕見(jiàn)。然而我每每回答時(shí)，對(duì)話會(huì)進(jìn)入一個(gè)奇妙的怪圈，be like:

“你不覺(jué)得這樣設(shè)計(jì)更清晰/工整/美觀嗎？”

“我不覺(jué)得啊，我覺(jué)得都長(zhǎng)得差不多。”

“可是這樣用戶能更快找到交互目標(biāo)，完成交互任務(wù)，有更好的用戶體驗(yàn)呀。”

“啊？有嗎？為啥？所以呢？”

“......”

所謂“忍一時(shí)越想越氣，退一步越想越虧”。咱就是說(shuō)，每次都不知道如何解釋、眼睜睜看著設(shè)計(jì)被“砍”來(lái)“砍”去可不行。為了讓我自己變成更加“耐撕”的設(shè)計(jì)師，同時(shí)盡可能幫助到遇到類似問(wèn)題的小伙伴們，我嘗試著閱讀、思考、總結(jié)了一些界面設(shè)計(jì)的科普知識(shí)，并以此來(lái)深入淺出地、感同身受地、科學(xué)嚴(yán)謹(jǐn)?shù)亟忉屢幌略O(shè)計(jì)師那些對(duì)于微妙設(shè)計(jì)細(xì)節(jié)的堅(jiān)持，到底是從何而來(lái)的。歡迎各位設(shè)計(jì)師小伙伴給你們身邊發(fā)出類似靈魂拷問(wèn)的跨職能同事分享這個(gè)科普帖；也歡迎剛出新手村的、從事界面設(shè)計(jì)相關(guān)工作的設(shè)計(jì)師小伙伴們，把它當(dāng)作入門級(jí)界面設(shè)計(jì)理（下）論（飯）科普來(lái)閱讀。

1. 呔！靈魂拷問(wèn)挑戰(zhàn)一！

對(duì)于“界面設(shè)計(jì)的工作定義”這個(gè)問(wèn)題，我根據(jù)自己的理解和體悟，嘗試著用更加通俗的方式概括了它的答案：界面設(shè)計(jì)，不僅僅是埋頭把線框圖“從無(wú)到有、從有到優(yōu)”地吭哧吭哧畫出來(lái)就完事兒了，它還包括了解目標(biāo)用戶的特性和需求，了解產(chǎn)品的細(xì)節(jié)和目標(biāo)，并根據(jù)用戶的期望和產(chǎn)品的商業(yè)目標(biāo)，假設(shè)出最“兩全其美”的方案，并用目標(biāo)用戶能“看得到”“看得懂”“能操作”的界面把這個(gè)方案表達(dá)出來(lái)。對(duì)于這個(gè)“兩全其美”的方案本身，比如有什么功能、流程長(zhǎng)什么樣子這些問(wèn)題，相信產(chǎn)品團(tuán)隊(duì)的其他角色會(huì)貢獻(xiàn)一定的想法和決策；而對(duì)于讓用戶能“看得到”“看得懂”“能操作”這個(gè)要求，則是界面設(shè)計(jì)工作中的主要責(zé)任和挑戰(zhàn)，也是我們花費(fèi)了大量時(shí)間去“糾結(jié)”的關(guān)鍵點(diǎn)所在：

有人肯定要問(wèn)：但凡是能用智能電子產(chǎn)品看到你這個(gè)界面的人，肯定看得到字、認(rèn)識(shí)字、也知道要點(diǎn)哪兒。為什么說(shuō)“看得到”“看得懂”“能操作”這三點(diǎn)居然是個(gè)“挑戰(zhàn)點(diǎn)”呢？——其實(shí)，“能做到”不一定意味著“做得好”，實(shí)際上人類的知覺(jué)和行為能力是十分有限的。關(guān)于這個(gè)論點(diǎn)，我將用一個(gè)例子來(lái)讓大家深切了解（人類）用戶的認(rèn)知局限性。

請(qǐng)仔細(xì)閱讀下方的視頻截圖中，黑底白字的字幕給你“布置”的“觀察任務(wù)”，之后再點(diǎn)擊下下方的視頻以開始觀看：

(《The Monkey Business Illusion》 - B 站視頻源 點(diǎn)擊下方視頻直接播放，或復(fù)制鏈接跳轉(zhuǎn)到 B 站觀看）：

默數(shù)白衣服的人傳了幾次球

看完這個(gè)視頻，相信大家對(duì)于人認(rèn)知的局限性已經(jīng)有了一定感悟。然而，和“有限”的用戶認(rèn)知相反的是，在實(shí)際的產(chǎn)品規(guī)劃中，（由于不斷更新的商業(yè)目標(biāo)）產(chǎn)品的功能和信息的增量卻是“無(wú)限”的。這對(duì)矛盾意味著，要做到“看得到”“看得懂”“能操作”這三點(diǎn)，團(tuán)隊(duì)中的設(shè)計(jì)角色必須斟酌如何正確引導(dǎo)用戶在海量信息中，按我們預(yù)期的方式和順序去瀏覽和操作：

而這就是，除了“畫界面”——即“把產(chǎn)品經(jīng)理規(guī)劃的功能落實(shí)在界面中”這個(gè)要求之外，界面設(shè)計(jì)的另一個(gè)要求。這也導(dǎo)致了設(shè)計(jì)師在設(shè)計(jì)界面的工作中，會(huì)反復(fù)斟酌一些在跨職能同事眼中顯得“無(wú)足輕重”的細(xì)節(jié)了。

看到這里，各位看官可能會(huì)有進(jìn)一步的疑問(wèn)：誠(chéng)然，“引導(dǎo)用戶按商業(yè)期望并盡量無(wú)痛地操作界面”在上述矛盾點(diǎn)的鋪墊下，確實(shí)顯得十分重要。但是，這難道不該跟“界面結(jié)構(gòu)”“文案”這些更直觀的要素具有關(guān)聯(lián)性嗎？正確的交互引導(dǎo)和設(shè)計(jì)師糾結(jié)來(lái)糾結(jié)去的界面細(xì)節(jié)（比如：元素距離、字體大小、圖標(biāo)元素......等），到底有什么因果關(guān)系呢？

用一個(gè)不那么恰當(dāng)?shù)睦幼鲱惐龋撼绦騿T在模擬環(huán)境下跑代碼之前，雖然沒(méi)有那么確切的證據(jù)能證明這段代碼一定能跑通且無(wú) bug，但是他們往往會(huì)參考以往的經(jīng)驗(yàn)和網(wǎng)上的案例，用最保險(xiǎn)的邏輯和語(yǔ)法至少先碼出一段能跑的代碼，讓它先運(yùn)行起來(lái)再糾錯(cuò)。那么相似地，設(shè)計(jì)師設(shè)計(jì)的界面在上線之前，誰(shuí)也不能保證這個(gè)設(shè)計(jì)一定能達(dá)成設(shè)計(jì)目標(biāo)——商業(yè)目標(biāo)及用戶體驗(yàn)?zāi)繕?biāo)，但起碼我們可以參考行業(yè)公認(rèn)的“共性設(shè)計(jì)規(guī)律”，以及通過(guò)用戶調(diào)研、數(shù)據(jù)分析得來(lái)的更有針對(duì)性的“個(gè)性設(shè)計(jì)規(guī)律”，用最自信的方式先設(shè)計(jì)出一個(gè)達(dá)到開發(fā)和上線標(biāo)準(zhǔn)的界面：

而上述所說(shuō)的“行業(yè)公認(rèn)的共性設(shè)計(jì)規(guī)律”，往往就和那些跨職能容易忽略、但設(shè)計(jì)師卻不停糾結(jié)的界面設(shè)計(jì)細(xì)節(jié)，息息相關(guān)。

那么，這些“行業(yè)公認(rèn)的設(shè)計(jì)規(guī)律”是什么？決定了怎么樣的設(shè)計(jì)細(xì)節(jié)？以下我將挑選最基礎(chǔ)的一些案例，用跨職能小伙伴們常見(jiàn)的“靈魂拷問(wèn)”作為開頭，結(jié)合理論和應(yīng)用場(chǎng)景，幫助大家更快地感受和理解。

2. 呔！靈魂拷問(wèn)挑戰(zhàn)二！

我們來(lái)抽象和展開這個(gè)問(wèn)題：為什么我們需要對(duì)某些界面模塊進(jìn)行“特別的設(shè)計(jì)”？需要“特別的設(shè)計(jì)”的情景是什么？為了回答這個(gè)問(wèn)題，我想首先介紹一個(gè)界面設(shè)計(jì)的基礎(chǔ)理論給大家：

這個(gè)理論其實(shí)很好理解，無(wú)需再深挖背后的心理或生物學(xué)原理啥的。不過(guò)值得一提的是，這個(gè)理論其實(shí)不僅運(yùn)用在界面設(shè)計(jì)中，在很多其他的藝術(shù)或設(shè)計(jì)創(chuàng)作領(lǐng)域也很常見(jiàn)，我能快速想到的一個(gè)（奇怪的）例子就是，喜劇《唐伯虎點(diǎn)秋香》中唐伯虎初遇秋香時(shí)，唐伯虎端詳了一下秋香的外貌，對(duì)身邊的祝枝山說(shuō)“長(zhǎng)得也是一般的好看而已嘛”，然后祝枝山意味深長(zhǎng)笑了笑、朝著人群大喊：“美女！”，結(jié)果所有華府的女傭都轉(zhuǎn)過(guò)了頭，唐伯虎驚訝地往后一跳，直呼：“哇~秋香果然是國(guó)色天香，超凡出塵！”

如果把唐伯虎想象成目標(biāo)用戶（？），把秋香姐想象成我們想重點(diǎn)推薦的功能（？？），要想讓秋香姐，啊不是，某個(gè)功能對(duì)用戶而言，是引人注目且過(guò)目難忘的，我們需要做出強(qiáng)烈的“對(duì)比”來(lái)凸顯——在界面設(shè)計(jì)中，這個(gè)“對(duì)比”可能是顏色、尺寸、形狀、留白等樣式上的各種不一樣：

讓我們?cè)倩仡^看看這個(gè)靈魂拷問(wèn)：誠(chéng)然，通過(guò)“挑選一個(gè)合適的展示位置”在現(xiàn)有布局中達(dá)到“使模塊呈現(xiàn)最好的曝光量、（重復(fù)）點(diǎn)擊率等表現(xiàn)數(shù)據(jù)”這個(gè)目的是可行的，但是不可否認(rèn)的是，一個(gè)載體界面上最佳的位置是有限的，位置的更改更是對(duì)頁(yè)面其他模塊而言會(huì)牽一發(fā)動(dòng)全身、對(duì)用戶而言會(huì)產(chǎn)生新的學(xué)習(xí)成本。一旦我們想盡量維持其他現(xiàn)有功能的布局、或希望除了位置優(yōu)化之外，窮盡最大所能提升模塊的行為表現(xiàn)時(shí)，為這些模塊做特別的設(shè)計(jì)優(yōu)化是必要且合理的。當(dāng)然，這種“特別的設(shè)計(jì)優(yōu)化”中的具體設(shè)計(jì)細(xì)節(jié)，也要考慮到此處設(shè)計(jì)復(fù)雜度 v.s.研發(fā)周期等“性價(jià)比”問(wèn)題，不能理直氣壯一味追求“特別的視覺(jué)效果“而掉入“過(guò)度設(shè)計(jì)”的怪圈。

3. 呔！靈魂拷問(wèn)挑戰(zhàn)三！

讓我來(lái)進(jìn)一步抽象這個(gè)問(wèn)題：對(duì)于界面中的文字信息，既然可以利用格式（分行、分段）來(lái)區(qū)分其類別和從屬關(guān)系，我們?yōu)槭裁催€需要進(jìn)一步給予文字不同的視覺(jué)權(quán)重呢？在進(jìn)一步解釋其原因之前，讓我們先明白另一個(gè)關(guān)于信息閱讀的“規(guī)律”：

為了更好地理解這句話，讓我們將自己代入一個(gè)例子來(lái)實(shí)際體會(huì)一下所謂的“通過(guò)抓取關(guān)鍵詞判斷全局內(nèi)容”是個(gè)什么情況，請(qǐng)回答以下問(wèn)題：

回想一下，你在以上例子中收集信息的方式是什么樣的？是挨個(gè)閱讀了第一組和第二組中的所有內(nèi)容并做出了判斷？還是跳躍閱讀式提取了和“臺(tái)燈”更相近的關(guān)鍵字并做出了判斷？相信大部分人都更偏向于后者，而后者就是我們所說(shuō)的“通過(guò)抓取關(guān)鍵詞判斷全局內(nèi)容”。

記得之前在閱讀《社會(huì)心理學(xué)》這本書的時(shí)候，我發(fā)現(xiàn)在應(yīng)用層面上，幾乎所有的人類行為動(dòng)機(jī)，其背后都有一個(gè)較根源的規(guī)律：人腦總是傾向于“簡(jiǎn)化提取信息“和“分散認(rèn)知壓力”。那么，當(dāng)我們嘗試著用這個(gè)心理學(xué)現(xiàn)象去反觀“信息線索”這一規(guī)律時(shí)，它似乎變得可以推理和解釋了：當(dāng)我們的界面中堆疊了海量信息和視覺(jué)元素時(shí)，和我們預(yù)想的“用戶會(huì)按順序依次獲取信息并進(jìn)行腦內(nèi)加工”不同，用戶下意識(shí)會(huì)為了簡(jiǎn)化認(rèn)知過(guò)程、分散認(rèn)知壓力，去跳躍式閱讀并“采摘”他們認(rèn)為的關(guān)鍵信息到大腦的“中央處理器”中，進(jìn)行進(jìn)一步加工，以便搞清楚“這個(gè)頁(yè)面是什么？”、“我能否找到我需要的東西？”、“我大概能在哪里通過(guò)什么后續(xù)交互找到它？”...等問(wèn)題。不知道大家是否曾看過(guò)“F 型閱讀順序”這個(gè)用戶閱讀規(guī)律，其實(shí)它的底層邏輯也同樣是“信息線索”。

那么讓我們回到開頭的靈魂拷問(wèn)：為什么需要給界面上的某些文字進(jìn)行視覺(jué)權(quán)重的處理，也就是加黑、加粗、加大、加行距等等？其實(shí)答案已經(jīng)不言而喻了——為了把我們想傳遞給用戶的信息，像喂飯一樣“喂”到總是跳躍式閱讀、可能會(huì)遺漏關(guān)鍵信息的用戶的“嘴”中，讓他們找到他們想找到的、或者我們想呈現(xiàn)給他們的信息。舉兩個(gè)栗子：

4. 呔！靈魂拷問(wèn)挑戰(zhàn)四！

用簡(jiǎn)單的話來(lái)復(fù)述這個(gè)問(wèn)題，就是：利用額外的動(dòng)態(tài)控件去傳遞信息，它的必要性是什么？對(duì)于這個(gè)問(wèn)題的答案，讓我從一張圖片開始，為大家展開闡述。如下圖所示，請(qǐng)你嘗試盯著圖片中心的藍(lán)色圓形，并嘗試用余光去辨別距離這個(gè)圓形由近及遠(yuǎn)的物體分別是什么：

你是否有如下感覺(jué)：距離圓形，即我們的視焦點(diǎn)越遠(yuǎn)的物體，越難以辨別是什么形狀？那么請(qǐng)你再嘗試盯著下面這張動(dòng)圖的圖片中心的圓形，并嘗試用余光去辨別最遠(yuǎn)處那個(gè)不停運(yùn)動(dòng)的物體是什么：

對(duì)于這張圖片，那個(gè)動(dòng)起來(lái)的、距離圓形較遠(yuǎn)的物體，好像沒(méi)有靜態(tài)的時(shí)候那么模糊了？以上這兩個(gè)例子，其實(shí)都涉及到一個(gè)關(guān)于人類視覺(jué)的普遍規(guī)律：

這個(gè)規(guī)律實(shí)際上和我們眼球構(gòu)造導(dǎo)致的視覺(jué)特性有關(guān)，如下圖所示：

人的眼球視覺(jué)可分為“主要視覺(jué)”和“次要視覺(jué)”。其中，“主要視覺(jué)”分布在中心區(qū)域且范圍較小，由“視錐細(xì)胞”產(chǎn)生圖像，而“視錐細(xì)胞”對(duì)于光線充足條件下的靜態(tài)目標(biāo)的色彩和形狀細(xì)節(jié)都十分敏感，在白晝時(shí)是人類主要使用的視覺(jué)細(xì)胞；“次要視覺(jué)”則圍繞“主要視覺(jué)”分布在其周圍且范圍較大，由“視桿細(xì)胞”產(chǎn)生圖像，“視桿細(xì)胞”對(duì)于亮度和動(dòng)態(tài)十分敏感，是黑夜中在“視錐細(xì)胞”失靈時(shí)的主要視覺(jué)補(bǔ)充方式。

其實(shí)，不僅是人類，很多其他以捕獵為生的哺乳動(dòng)物的眼球也有同樣的視覺(jué)特征。“主要視覺(jué)”能幫助捕獵者更好獲取在視覺(jué)中心的獵物的一舉一動(dòng)，“次要視覺(jué)”則能幫助捕獵者快速獲取周圍環(huán)境中潛在的危險(xiǎn)或捕獵競(jìng)爭(zhēng)者的動(dòng)向變化。

這就解釋了為什么當(dāng)你在光線充足的屏幕上，盯著上面那張靜態(tài)圖片中的圓形時(shí)，你的“主要視覺(jué)”只能支持你看清視覺(jué)焦點(diǎn)范圍內(nèi)的很小一圈的事物，比如距離圓形最近的外星人頭像；而對(duì)于那些距離圓形較遠(yuǎn)的形狀，則因?yàn)槁湓诹恕按我曈X(jué)”中，而隨距離變得越來(lái)越模糊。

那上面這個(gè)視覺(jué)規(guī)律和本環(huán)節(jié)的靈魂拷問(wèn)又有著怎樣的關(guān)系呢？首先我們要明白的一點(diǎn)是，人類只有一雙眼睛、一個(gè)視覺(jué)焦點(diǎn)（動(dòng)線）。那么，當(dāng)這唯一的視覺(jué)焦點(diǎn)隨著我們正在進(jìn)行的交互，移動(dòng)到界面中的某個(gè)位置時(shí)，可能某些比較重要的、距離視覺(jué)焦點(diǎn)較遠(yuǎn)（而坐落在了“次要視覺(jué)”區(qū)域內(nèi)）的信息，正在隨著交互的進(jìn)行更新了部分內(nèi)容，那用戶很可能就錯(cuò)過(guò)了這個(gè)重要信息的更新。那么，設(shè)計(jì)師能做什么來(lái)防止這種情況發(fā)生呢？

根據(jù)上文提到的視覺(jué)原理，這里應(yīng)該有兩種思路：1. 把關(guān)鍵信息的靜態(tài)文案，放置在當(dāng)前交互（視覺(jué)）焦點(diǎn)附近 2. 如果 1.的解決方案在當(dāng)前界面布局規(guī)范中不被允許，那么我們可以利用“視桿細(xì)胞對(duì)動(dòng)效敏感“的特性，動(dòng)態(tài)展示關(guān)鍵信息。

最后，讓我通過(guò)總結(jié)上文的內(nèi)容，來(lái)快速回答一下本環(huán)節(jié)的靈魂拷問(wèn)：當(dāng)你想強(qiáng)調(diào)的信息和當(dāng)前的交互（視覺(jué)）焦點(diǎn)較遠(yuǎn)的時(shí)候，由于視覺(jué)的局限性，我們很難感知到其變化。如果這種“不被用戶感知”的概率很大、且其造成的體驗(yàn)或商業(yè)后果讓人難以接受時(shí)，將該信息重復(fù)強(qiáng)調(diào)在焦點(diǎn)附近、或者用動(dòng)效引起用戶的注意，都是必要且合理的設(shè)計(jì)手段。

5. 呔！靈魂拷問(wèn)挑戰(zhàn)五！

同樣，首先讓我嘗試轉(zhuǎn)譯和展開這個(gè)問(wèn)題：在內(nèi)容能夠完整傳遞信息的情況下，為什么我們還要增加額外的視覺(jué)要素？對(duì)于這個(gè)問(wèn)題，和前面的環(huán)節(jié)相同，讓我先引入一個(gè)和答案有關(guān)的設(shè)計(jì)規(guī)律：

單純看字面的意思或許有些抽象，為了方便大家理解，同樣我將用一個(gè)實(shí)際的例子來(lái)讓大家親身感受一下這個(gè)規(guī)律。如下圖，請(qǐng)分別大聲朗讀出兩個(gè)組中的所有詞匯，朗讀時(shí)記得盡量快速并保持正確（想挑戰(zhàn)更高難度的小伙伴，也可以嘗試?yán)首x每個(gè)詞匯的字體顏色名稱）：

你是否發(fā)現(xiàn)自己在識(shí)別和朗讀第一組內(nèi)容的時(shí)候，速度是快于第二組的？那原因又是什么呢？如果你仔細(xì)研究上面兩組詞匯，就會(huì)發(fā)現(xiàn)：第一組詞匯的字面意思和字體顏色名稱是一致的，比如：“粉紅色”三個(gè)字的字體顏色也是“粉紅色”；而第二組的上述兩個(gè)要素，卻是錯(cuò)位的。其實(shí)，在這個(gè)例子中，（如果你挑戰(zhàn)的是朗讀詞匯本身）字體顏色就是一種“環(huán)境刺激物”，當(dāng)人們對(duì)“環(huán)境刺激物”和目標(biāo)識(shí)別物本身的信息認(rèn)知是一致或者相似的時(shí)候（正如第一組所展示），就如本規(guī)律所說(shuō)，人的辨識(shí)速度會(huì)更加快；反之則減慢。接下來(lái)，讓我再例舉一個(gè)和界面設(shè)計(jì)更貼臉的例子，讓大家快速感受一下：

如上圖所示的三組提示，你閱讀時(shí)長(zhǎng)最短的是哪一組？你能最正確地 get 到彈框信息的又是哪一組？想必大多數(shù)人的答案都是第三組，因?yàn)槠涮崾局械奈淖趾洼o助刺激物（顏色、圖標(biāo)）傳遞的信息是一致的，因而能使人們更快更正確 get 到信息。其實(shí)這個(gè)例子也體現(xiàn)了界面設(shè)計(jì)中，最常見(jiàn)的“環(huán)境刺激物”是什么——比如：顏色、圖標(biāo)、插圖......這種視覺(jué)類刺激物；其他一些不常見(jiàn)的“環(huán)境刺激物”包括了：聲音、震動(dòng)這些和其他四感相關(guān)的刺激物（寫到這里突然想到windows系統(tǒng)里，當(dāng)警告框莫名其妙連續(xù)彈出時(shí)，那一連串的“噔噔噔噔噔”，就算現(xiàn)在回想都能嚇到炸毛的程度...）：

當(dāng)然了，選擇“環(huán)境刺激物”時(shí)也不一定非要挑選被文化或普遍認(rèn)知刻進(jìn)我們 DNA 的那些元素，諸如：紅色=警示、感嘆號(hào)=有問(wèn)題......，它也可以來(lái)自特定產(chǎn)品領(lǐng)域、甚至完全來(lái)自你的產(chǎn)品本身：通過(guò)在交互中的不斷重復(fù)和保持一致，將新的“刺激物+含義”組合刻進(jìn)用戶的潛意識(shí)中。比如，在填寫密碼/驗(yàn)證碼等口令類輸入的情境下，彈出框的震動(dòng)會(huì)讓人甚至都不用看錯(cuò)誤提示，就意識(shí)到“填寫錯(cuò)誤”這個(gè)信息。這是因?yàn)槟承┝奶旌徒鹑陬?APP 已經(jīng)通過(guò)不斷應(yīng)用該“環(huán)境刺激物”在相應(yīng)的場(chǎng)景，來(lái)讓我們下意識(shí)把“震動(dòng)”和“填寫錯(cuò)誤”聯(lián)系起來(lái)：

好的，有點(diǎn)扯遠(yuǎn)了......讓我們回到這個(gè)問(wèn)題。已知人在與界面交互時(shí)，注意力是線性的+有信息量上限的，當(dāng)設(shè)計(jì)師面臨：

1. 用戶正在最重要的任務(wù)或者信息流中，且不應(yīng)該被打斷并轉(zhuǎn)移注意力到次要信息線上。但同時(shí)，獲取該次要信息對(duì)于用戶后續(xù)的操作決策而言，又是必要的；
2. 用戶正在主信息流中獲取某個(gè)信息，但 ta 需要花更少的專注力成本在這個(gè)信息上，以便于將注意力“花在刀刃上”。

在這兩個(gè)情況下，用視覺(jué)權(quán)重適當(dāng)?shù)摹⒑x一致的“環(huán)境刺激物”去輔助呈現(xiàn)對(duì)應(yīng)的信息模塊，是合理且有必要的設(shè)計(jì)手段。

這是否給你帶來(lái)了一些顛覆原來(lái)認(rèn)知的、對(duì)界面設(shè)計(jì)的啟示？——有的時(shí)候，界面設(shè)計(jì)上的“多設(shè)計(jì)”，反而是為了用戶“少閱讀”。

6. 呔！靈魂拷問(wèn)挑戰(zhàn)六！

同樣，讓我轉(zhuǎn)譯一下這個(gè)問(wèn)題：在分割界面信息模塊上，多樣的空白行、多余的分割線，他們存在的意義是什么？在回答這個(gè)問(wèn)題前，同樣讓我們從一些由實(shí)驗(yàn)結(jié)果總結(jié)而來(lái)的“規(guī)律”作為前情鋪墊：

這個(gè)規(guī)律其實(shí)很簡(jiǎn)單直觀，大家可以回想一下自己欣賞各種平面藝術(shù)作品時(shí)，是否都是按照簡(jiǎn)單幾何形去拆解構(gòu)圖的？或者反過(guò)來(lái)思考，在閱讀過(guò)的平面設(shè)計(jì)構(gòu)圖教程中，是否大多數(shù)構(gòu)圖法則也都是以簡(jiǎn)單幾何線/形作為基礎(chǔ)的，比如：三角形、圓形、正方形、梯形、對(duì)角線、放射線等等...從正反兩個(gè)方向來(lái)看，都有事實(shí)印證這個(gè)規(guī)律的正確性。

在界面設(shè)計(jì)中，由于“傳遞信息”這個(gè)關(guān)鍵目的，帶來(lái)了“布局的復(fù)雜度必須較低”的局限，同時(shí)也是考慮到技術(shù)投入和實(shí)現(xiàn)難度等問(wèn)題，當(dāng)設(shè)計(jì)組件或信息模塊時(shí)，我們通常會(huì)采用的形狀僅有方形和圓形：

其中，圓形常用于偏視覺(jué)的元素（比如：圖標(biāo)，圖標(biāo)按鈕等），我們暫且不展開。接下來(lái)，讓我們聚焦在常應(yīng)用于控件或文字模塊的“方形”上。這時(shí)候就不得不引入一個(gè)在界面設(shè)計(jì)領(lǐng)域，大家最熟悉的理論之一——“格式塔”理論了。這里為了讓解釋更加好理解一些，讓我直接選取一些和本環(huán)節(jié)問(wèn)題最相關(guān)的兩個(gè)“子理論”來(lái)為大家展開闡述。第一個(gè)“子理論”是“鄰近性原則”：

上圖其實(shí)把這個(gè)原則體現(xiàn)得淋漓盡致，我就不再為大家舉另外的栗子展開解釋了。其實(shí)，這個(gè)原則就回答了“信息間的空白空間”存在的必要性——你是否還記得前文提到的“信息線索”這個(gè)規(guī)律？既然人們的界面閱讀習(xí)慣是“快速掃描”、“跳躍獲取信息”，那么，和“文字權(quán)重的多樣性”類似，“空白空間”往往能讓人在掃描信息時(shí)，下意識(shí)推理出信息結(jié)構(gòu)（即信息的從屬、分組關(guān)系），從而使得這種“跳躍式獲取信息”的行為更加快速和準(zhǔn)確。比如：當(dāng)用戶看到一整塊被空白分割出來(lái)的、較獨(dú)立的部分時(shí)，會(huì)下意識(shí)去掃描第一行——他們往往會(huì)認(rèn)為那一行是標(biāo)題。通過(guò)這種方式，他們可以了解這個(gè)信息模塊是關(guān)于什么的、有沒(méi)有仔細(xì)閱讀的必要......等等關(guān)鍵信息。

那么，如果“有層次的空白空間”就能在視覺(jué)上幫助分割界面的信息層級(jí)了，為什么有時(shí)候設(shè)計(jì)師還會(huì)應(yīng)用分割線/框呢？首先需要從另一個(gè)“格式塔”的“子理論”——“同域原則”說(shuō)起：

這個(gè)規(guī)律說(shuō)明了“分割線”也同樣能幫助信息分組。并且，在設(shè)計(jì)實(shí)踐中，“分割線”這種更為強(qiáng)烈的視覺(jué)元素，其分割信息的視覺(jué)強(qiáng)度是大于“空白空間”的——這意味著在以下兩個(gè)情況下，分割線是有存在必要的：

1. 當(dāng)在界面中的某層平級(jí)元素里，有最最需要重點(diǎn)強(qiáng)調(diào)的單個(gè)信息組時(shí)，需要用分割線/框強(qiáng)調(diào)之；
2. ?當(dāng)界面中的某類平級(jí)元素，因?yàn)閮?nèi)含的子元素太多太雜導(dǎo)致“分無(wú)可分”時(shí)，需要引入視覺(jué)上觀感更強(qiáng)烈的分割線/框來(lái)強(qiáng)化分組。

當(dāng)然，還有其他例外的情況也會(huì)使用到分割線/框，它們和視覺(jué)分組無(wú)關(guān)但和交互引導(dǎo)息息相關(guān)，比如：“帶邊框的信息模塊”可用于暗示該模塊可點(diǎn)擊、且點(diǎn)擊都指向同一個(gè)目的地頁(yè)面；“一列帶框的信息卡片被屏幕邊緣隱藏一部分”，能用于暗示該卡片列是可橫向滑動(dòng)的......等等，這些常見(jiàn)的使用場(chǎng)景相信大家都不陌生，就不展開討論了。

所以總結(jié)并回答一下本環(huán)節(jié)的問(wèn)題：“空白”的多樣性，能幫助用戶在掃視界面時(shí)，更快理解界面中的信息的分組關(guān)系、子母集關(guān)系，從而提升當(dāng)用戶跳躍式閱讀界面時(shí)，其找關(guān)鍵字的準(zhǔn)確性和速度；而分割線/框，作為“空白”的補(bǔ)充手段，既能在視覺(jué)上強(qiáng)調(diào)單個(gè)信息模塊，又能幫助在層級(jí)過(guò)多、元素過(guò)雜的情況下，讓信息的分組顯得更清晰。因此，在信息較多、層級(jí)較復(fù)雜的界面中，設(shè)計(jì)師合理地利用多種數(shù)值的空白間距、分割線/框，是一種能幫助用戶在閱讀信息時(shí)“大腦減負(fù)”的常見(jiàn)方式。

7. 呔！靈魂拷問(wèn)挑戰(zhàn)七！

上述問(wèn)題中提及的，無(wú)論是“菜單”還是“篩選”，本質(zhì)上都是為目標(biāo)選項(xiàng)池新增屬性維度，并按這些維度分別分組，基于此讓用戶“按組定位”逐漸找到目標(biāo)選項(xiàng)的一種交互方式。所以，讓我們轉(zhuǎn)譯一下本環(huán)節(jié)的問(wèn)題：和讓用戶直接閱讀選項(xiàng)信息并決策相比，為什么我們需要通過(guò)（多層）分組的方式，讓用戶決策的過(guò)程從“一次性選擇到目標(biāo)”到“通過(guò)層層篩選、慢慢鎖定目標(biāo)”？它應(yīng)該被應(yīng)用在什么情景中？

因?yàn)檫@個(gè)問(wèn)題解釋起來(lái)也有些復(fù)雜，因此，同樣地，讓我從人類“決策行為”的剖析開始闡述。人的決策行為，本質(zhì)上分為“感知”和“思維”兩個(gè)步驟：先“感知”一個(gè)可選項(xiàng)、理解它的內(nèi)容、并將以上內(nèi)容“存儲(chǔ)”在自己的“短時(shí)記憶”中，然后接著“感知”下一可選項(xiàng)并同樣存儲(chǔ)在“短時(shí)記憶”中......然后通過(guò)“思維”快速判斷自己對(duì)每個(gè)可選項(xiàng)的主觀喜好、客觀利弊，最后做出決策。

從上述的“決策行為”方式中，我們可以看到承上啟下的關(guān)鍵點(diǎn)是“把選項(xiàng)儲(chǔ)存在'短時(shí)記憶'中”。說(shuō)的有點(diǎn)懸乎，舉個(gè)通俗的栗子來(lái)講就是：當(dāng)你上班摸魚，思考中午吃啥的時(shí)候，你得先在腦內(nèi)回憶一下今天食堂的菜譜有啥，才能基于這個(gè)信息糾結(jié)一小下下，最后決定吃什么。那可能有人又會(huì)問(wèn)：這“短時(shí)記憶”又是什么？為什么選項(xiàng)會(huì)被存儲(chǔ)在“短時(shí)記憶”、而不是其他什么什么的記憶里呢？

好的，那讓我們進(jìn)一步展開這個(gè)話題，來(lái)探討一下“短時(shí)記憶”這個(gè)概念。讓我快速用一張圖片來(lái)給大家科普一下什么是“短時(shí)記憶”，以及它的兄弟“長(zhǎng)時(shí)記憶”：

一般，在我們采集到信息中的關(guān)鍵內(nèi)容后，它會(huì)被首先放入“短時(shí)記憶”中，只有當(dāng)我們不斷復(fù)習(xí)（刺激）該信息到某個(gè)臨界值，它才會(huì)被放入“長(zhǎng)時(shí)記憶”庫(kù)中，擁有“長(zhǎng)時(shí)記憶”的特性：

一個(gè)事實(shí)是：大多數(shù)的選擇決策往往都是一次性的。這就決定了它們只會(huì)存在在“短時(shí)記憶”中，并擁有“短時(shí)記憶”的局限性——留存時(shí)間短，最關(guān)鍵的是，可留存的信息量少。那到底這個(gè)“少”又是多么地“少”呢？這時(shí)候就不得不提到繼“格式塔原則”之后另一個(gè)界面設(shè)計(jì)中最常被提及的定律——“米勒定律”了：

那么，基于上面提到的兩個(gè)關(guān)鍵點(diǎn)（即“記住可選項(xiàng)是決策的關(guān)鍵點(diǎn)”、“能記住的可選項(xiàng)的容量十分有限”），我們可以引出一個(gè)和用戶決策行為相關(guān)的界面設(shè)計(jì)中的規(guī)律——“席克定律”：

下面我將舉一個(gè)栗子，讓大家感受一下這個(gè)規(guī)律將如何作用于我們的決策行為中。假設(shè)此時(shí)你正準(zhǔn)備吃中飯，那么請(qǐng)分別在下面 A-C 組的菜譜中決定你想吃的東西。你可以嘗試計(jì)時(shí)，自己從開始閱讀菜譜到最后決定吃什么共用了多久：

體驗(yàn)完上述的栗子后，請(qǐng)?jiān)囍叵胍幌拢菏欠駨?A 到 C 組的決策時(shí)長(zhǎng)有個(gè)非常明顯的增長(zhǎng)趨勢(shì)（如果你有一丟丟選擇恐懼癥，那么這種增長(zhǎng)會(huì)更加明顯）？這就是“席客定律”想告訴我們的規(guī)律。

那么在設(shè)計(jì)實(shí)操中，如果可選項(xiàng)過(guò)多（超過(guò) 9 個(gè)），且這種決策對(duì)用戶而言是必要的、不可跳過(guò)的，我們?cè)趺礈p少用戶在進(jìn)行該決策時(shí)的思考負(fù)荷呢？在本環(huán)節(jié)的開始，我曾提到過(guò)，人類的決策過(guò)程分為“感知”和“思維”兩個(gè)步驟，因此我們的優(yōu)化方案也可以從分別優(yōu)化這兩個(gè)環(huán)節(jié)入手：

1. 優(yōu)化“感知”的處理負(fù)荷，即幫助用戶剔除非必要的可選項(xiàng)，可用的手段有自動(dòng)篩選、自動(dòng)排序，以及手動(dòng)篩選框、手動(dòng)排序等功能；
2. 優(yōu)化“思維”的處理負(fù)荷，即將決策的關(guān)鍵因素拆解成不同的維度（組），并將信息多層次地分組放置，形成各種樣式的“菜單”，手風(fēng)琴菜單、下拉菜單、側(cè)邊菜單...等等。

當(dāng)然，解決措施有意義的前提是想解決的問(wèn)題是有意義的，因此我們可以逆推，上述 1.和 2.的解決措施的應(yīng)用場(chǎng)景為：選項(xiàng)庫(kù)在做決策的當(dāng)下，只會(huì)存在于用戶的“短時(shí)記憶”中——畢竟正因?yàn)槿绱耍庞辛藳Q策能力的局限性，才引發(fā)了后續(xù)問(wèn)題和解決思路。那么，到底是哪些具體的應(yīng)用場(chǎng)景符合上述條件呢？我羅列了一下能想到的場(chǎng)景：

1. 動(dòng)態(tài)變化的選項(xiàng)庫(kù)，比如：商品搜索結(jié)果列表、活躍用戶列表、最熱門的歌曲列表等等；
2. 非用戶定制的、使用頻率較低的選項(xiàng)庫(kù)，比如：工具類軟件的某些功能列表，系統(tǒng)設(shè)置選項(xiàng)列表等等。

而一旦選項(xiàng)庫(kù)是靜態(tài)的、使用頻率較高的、用戶定制的，在這種情況下，選項(xiàng)庫(kù)大概率已經(jīng)坐落在了“長(zhǎng)時(shí)記憶”的區(qū)間中，所謂“自動(dòng)腦補(bǔ)”。在這種情況下，設(shè)計(jì)師可以不用考慮優(yōu)化決策體驗(yàn)的問(wèn)題。這時(shí)候，設(shè)計(jì)師使用“菜單”或者“篩選框”等控件的考量，更多應(yīng)該是基于用戶的心智模型、競(jìng)品的常規(guī)處理方式、它本身或其他同界面入口的曝光量影響等問(wèn)題了。

二、靈魂的拷問(wèn)？靈性的應(yīng)答！

雖然，貫穿本文的始終是一個(gè)個(gè)“規(guī)律”和“理論”，但引用這些“規(guī)律”“理論”的本意是為了佐證本文中各種觀點(diǎn)的合理性（畢竟“理論”和“規(guī)律”都是多次實(shí)際實(shí)驗(yàn)后總結(jié)出來(lái)的、在當(dāng)前情景下最可能發(fā)生、最普適的現(xiàn)象），而非真的讓大家在實(shí)際解決問(wèn)題的時(shí)候，去咬文嚼字般地用似是而非的語(yǔ)言營(yíng)造自己的權(quán)威感。

讓我們開個(gè)腦洞換位思考一下：當(dāng)你在和程序員交流的時(shí)候，他們直接甩出代碼開始和你討論數(shù)據(jù)結(jié)構(gòu)；當(dāng)你在和數(shù)據(jù)分析師交流的時(shí)候，他們直接把公式和 XX 定理擺在你面前高談闊論......在這些情況下，你非但不會(huì)覺(jué)得他們很專業(yè)，反而會(huì)一頭霧水地當(dāng)場(chǎng)無(wú)語(yǔ)，對(duì)吧？推己及人，我建議大家在實(shí)際的跨職能溝通中，能夠更多以這些“理論”“規(guī)律”中較表象、容易理解的信息作為起點(diǎn)，結(jié)合實(shí)際的問(wèn)題情景、設(shè)計(jì)方案去解釋和溝通：

以上就是基于我在實(shí)際工作中跨職能小伙伴們常問(wèn)我的靈魂拷問(wèn)，深度研究和思考后總結(jié)出的一些理論依據(jù)和應(yīng)用方法，希望對(duì)你無(wú)論是審視自己的設(shè)計(jì)作品、還是回答跨職能同事的問(wèn)題，都有參考價(jià)值。最后，感謝大家閱讀本文，也歡迎各種點(diǎn)贊評(píng)論收藏，栓 Q~

歡迎關(guān)注作者的微信公眾號(hào)：「應(yīng)謀鬼計(jì)」