萬字干貨!寫給界面設計師的職場應答指南!

遇到跨職能同事對界面設計方案發出靈魂拷問,設計師該如何應答?本文從理論和應用層面,對不同種問題總結了萬字科普,希望有用~

往期干貨:

一、那些年,我遇到的靈魂拷問...

我的日常工作嘛,想必和其他從事界面設計相關工作的設計師一樣: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~

歡迎關注作者的微信公眾號:「應謀鬼計」

萬字干貨!寫給界面設計師的職場應答指南!

收藏 118
點贊 30

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。