編輯導語：想要做好UI設計，或許你需要掌握一些心理學知識。在這篇文章中，作者分享了五個心理學知識，并從背景定義、重點解析、設計運用、詳細案例4個次元進行了深度的解析，一起看看吧。
一、前言
本次内容以表現層為主，我還是那句話，無論是定律還是原則最終都是為設計賦能，一是能夠為産品帶來良好的體驗性，二是能夠展現設計師的價值，不同的定律原則所運用的場景不同，它們之間也會穿插或者并列存在，文章内的案例也是心理學中的一部分，應用場景不止于此，希望大家能夠通過我的案例解析學習到這些原則定律的基本邏輯。
本次繼續分享5個心理學的知識，同樣從背景定義、重點解析、設計運用、詳細案例4個次元進行深度解析。
二、圖優效應
1. 什麼是圖優效應
指圖檔對使用者的記憶大于文字，用圖檔代替語言，心理學上把這種現象稱為《圖優效應》，在記憶時，圖檔的優勢較大，心理學家通過分析得知因為記憶的好壞取決于可提供大腦記憶選擇的數目，圖檔和形象又能在人們觀看時被命名，也就是說圖檔是可以代替語言去幫助我們記憶。
舉個例子，在工作中我們與同僚聊天是不是都會遇到聊了半天，發現兩個人聊的不是同一個事情，或者兩個人不在一個緯度上，特别是做設計的我們來說經常會遇到這種事情，這時候往往發一張圖檔對方馬上就能get到這個事情的點，兩人也能站在同一個緯度上溝通。
設計師們肯定遇到過這樣的場景，在溝通一個需求的時候，業務方經常會說要一個什麼樣什麼樣的風格，然而是雙方聊了半天發現都沒有結果，這時候給業務方發幾個案例讓他們選擇，把抽象的事情具象化很快就可以确定目标，圖優效應不僅是能夠增加使用者記憶，很多時候同樣能夠代替語言來傳達資訊。
2. 圖檔記憶優點
人的記憶分為圖像記憶、文字記憶、聲音記憶，而圖像記憶是最符合人的大腦運作模式的記憶法，然後通過結合文字能夠很輕松的記憶某個事情或者某個畫面。
為什麼說符合人的大腦運作方式，因為圖像識别能力是與生俱來的，人類在文字誕生之前的幾百上千萬年裡，一直通過圖像辨識事物，而文字的傳承隻有幾千年跟人類曆史比起來隻是其中的一小段，而圖像結合文字能夠使記憶更輕松。
3. 他是怎麼來的
1973年美國認知心理學家斯坦丁做了一個關于記憶的實驗，斯坦丁找了5名大學生，他們的智力水準大緻相同。另外他還制作了10000張圖檔，其中一半圖檔為普通圖檔，上面畫着一些事物的基本特征，就好像我們闆着面孔照出來的一寸照片一樣;另外一半圖檔是一些帶有生動情節的圖檔，就好比是我們的生活照。
斯坦丁要求他們每個人都同時記憶1000個單詞、1000張普通圖檔和1000張有生動情節的圖檔。如單詞為“狗”，普通圖檔為“一條狗”，有生動情節的圖檔為“一條嘴裡含着煙鬥的狗”。大學生們顯然對那些有生動情節的圖檔更感興趣。
兩天以後斯坦丁又找來了這5名大學生，讓他們觀看印有單詞的圖檔、普通圖檔和有生動情節的圖檔，共計5000張，其中包括兩天前他們看過的那3000張。這次的任務是要求他們指出哪些圖檔是曾經看過的。結果發現他們平均記住的生動圖檔為880張，普通圖檔為770張，單詞為615個。
這說明圖檔比起單詞來容易記，而情節生動的圖檔就更容易記憶，心理學上把這種現象稱做“圖優效應”，即在記憶時，圖檔的優勢更大。
4. 網頁中的應用
在網頁設計中最主要的組成就是圖檔和文字，在不同的産品中根據頁面的承載資訊進行圖文搭配資訊效率傳達更加有效，在複雜的網頁中，使用者如果單通過文字找到一個目标資訊效率上會大大降低，但是在進行圖文後展示不同的功能資訊對于使用者來講能夠大大的提升效率，對于老使用者而言能夠通過大面積的圖檔快速定位到目标資訊。
下面示例中的“騰訊雲”和“京東雲”官網中，以圖檔為設計主體強調入口，在圖檔中添加文案，使用圖文組合的方式提升使用者的篩選效應，如果隻是在諾大的網頁中放一些圖示跟文字，使用者尋找起來時間非常漫長，他們就利用了《圖優效應》的優點，提升使用者使用效率。
圖優效應利用最多的應該是國内電商平台，對使用者傳達資訊主要是依賴商品圖檔，當使用者使用時往往會被一些好看的商品主圖所吸引，進而點選進行檢視，試想一下如果打開一個電商網站裡面密密麻麻的全是文字，那麼我們還有興趣去檢視商品詳情嗎。
5. 移動端中的應用
由于螢幕尺寸的原因，移動端展示空間較小，圖檔使用頻率沒有網頁那麼多，但是在移動端更多的是以圖示、插圖等方式來作為增加資訊記憶點的手段。
一般在移動端中能夠使用大面積圖檔的産品除了上面講的電商産品，還有一些社交形式的産品如小紅書、快手等是以圖檔為核心吸引使用者消費的。
例如下面的“豐巢”存放快遞的場景，因為快遞櫃會有很多尺寸，我們線上上下單時往往是對櫃子大小沒有概念，而豐巢這個頁面就非常好的利用插圖把大中小的櫃子樣式線上上具像化，使用者進到頁面後能夠有很直覺的認知，在下面“社群産品“的首頁中也是利用明确的插圖來告知使用者功能的作用，使用者隻需要看到圖檔後就能夠了解，圖優效應雖然說記憶效應，但是在實際的産品設計中我們設計師可以靈活運用，它不僅能夠強化記憶，同時也能夠提升使用者的篩選效率。
通過把資訊具像化，以插圖的方式表達，對于新老使用者都能夠形成認知習慣，不需要閱讀文字就能夠快速定位資訊。
6. 需要避免的問題
有正向就有反向，雖然在網頁和移動端設計中圖檔的優勢很大，但是也有弊端，如果在設計時處理不好就會造成反面影響。
圖文和文字要具有關聯性，如果圖檔與文字内容呼應不上，便會造成使用者的猜疑之心，圖檔是引導使用者進行觀看資訊的開始，文字是解釋這個子產品的作用，是以在設計中要避免這個問題。
例如下圖這種，這些配圖雖然跟文案有點關系，但是不夠直覺，單通過圖檔無法聯想到該子產品的内容想要表達什麼，需要仔細閱讀文字才能夠了解，第三張頁面中的配圖也是不足以表達資訊的，該内容想要表達談論西方節日，但是配圖是一個插圖人物在看書，看到圖檔的時候無法聯想到西方節日。
圖檔的清晰度在圖優效應中影響也是比較嚴重的，圖檔目的是傳遞資訊如果圖檔都無法看清楚，那就會影響使用者信任，就以電商平台為例子，商品圖檔覺得商品的細節，如果不清晰就影響産品的真實性，特别是在網頁這種高分辨的顯示中，很大程度會影響傳遞效果。
圖檔與色彩或者整個頁面的風格關系緊密，如果圖檔與文字使用疊加方式就要注意識别性，一旦發生重疊效果，那麼圖檔文字都會無法識别，如果是純色的背景圖就需要考慮是否與整個頁面的風格保持一緻，否則使用者在使用時就會跳脫産品。
7. 總結
圖優效應雖然說記憶效應，但是在實際的産品設計中我們設計師可以靈活運用，它不僅能夠強化記憶同時也能夠提升使用者的篩選效率和資訊識别度，是以在進行設計頁面時不僅要考慮它的優點，也要避免它的缺點。
三、形式服從功能
1. 什麼是形式服從功能
《形式服從功能》是一種根據使用者認知而衍生的設計法則，一種是美感描述，把沒有感情的功能具象化，傳遞給使用者，另一種是美感規範，美感是基于功能而存在的，隻有把功能表達清楚其次才能考慮美感。
2. 他是怎麼來的
形式服從功能從石器時代就存在，當第一把石斧的出現它的目的就是為了劈砍東西，為了能夠更好的使用，進而延伸出各式各樣的斧頭，目的都是為了能夠更好的利用。
真正普及是19世紀後期的工業時代，在這個階段設計上很大一種程度就是為了功能去考慮，它的核心是以功能實用為主，而不是傳統的以好看來确定物品的形式，真正提出這個概念的是在1896年第一批設計“摩天大樓”的建築師之一的路易斯·沙利文，他在文章《從藝術角度考慮的高層辦公樓》中寫道：
“無論是飛翔的鷹，還是開放的蘋果花、勞苦的馱馬、快樂的天鵝、枝桠的橡樹、底部蜿蜒的溪流、飄動的雲朵，在所有奔騰的太陽上，形成永遠遵循功能，這就是規律。功能不變，形式不變……它是所有有機物和無機物，所有物質和形而上學，所有人類和所有超人，所有頭部和心髒的真實表現的普遍規律，靈魂，生命在其表達中是可識别的，形式永遠遵循功能。這是法律。”
什麼功能，就比如椅子，它的作用是讓人做在上面，如果形式追随功能而不是服從功能，那麼椅子可能就會失去它原本的作用，看下圖中雖然椅子很美觀，但是卻失去了原本的作用，鋒利的棱角無法讓我們坐在上面。
3. 設計中的應用
網易音樂大家都用過，它的核心功能是播放音樂，也是頻率最高的一個頁面，在這個頁面中網易雲音樂使用了一張旋轉的唱片和留聲機唱針，并且會随着播放暫停調整唱針位置，這一設計完全遵循了形式服從功能的原則，把舊時代的唱片通過設計運用到網際網路産品中，也象征着對音樂的極緻主球，使用者通過頁面就能夠看到唱片，無論時場景化設計還是使用者的沉浸式體驗都做到了極緻。
當然形式服從功能有很多場景可以遇到，在ui設計中最常見的就是金剛區等重要入口的圖示設計，在網際網路産品中最典型的就是大衆點評和自如租房，面對衆多功能入口通過具象化的圖示進行表示，特别是自如app對于很多初入職場的年輕人分不清各種房型、較高價的電梯大廈、驿站等概念，而自如就在每個功能入口處通過小插圖的方式進行表達，在具有美感的同時，很大程度降低了使用者了解成本。
還有一種工具形的産品場景，在我們點外賣過程中會在配送畫面看到具象化的騎手，這種情感化的表達方式也是遵循了形式服從功能的原則展示給使用者，另一種是打車場景已經3dVR場景使用也是較多，比如滴滴打車頁面可以看到司機開車的形象來接我們，比如得物得VR看鞋的功能……
形式服從功能我了解不止是功能也可以是業務，例如舉辦一些概念形的活動的時候，就可以把主視覺通過具象化的形式進行繪制，讓使用者最快的了解活動的主題，也符合使用者的心理認知。
4. 我的設計經驗
前幾年在京東做的醫療頁面，在其中就會出現各種疾病科室，很多疾病科室其實對于不經常看病的使用者來講是陌生的，是以在設計科室和疾病入口時統一把它們具象化展示給使用者，降低使用者的了解成本，同時又能夠保證基本的美觀。
5. 總結
我的了解是我們在做設計時一定要先考慮功能性，不要為了美感而損失産品原本的意義，另一方面形式服從功能是設計的基礎原則，但它也是一個基本的邏輯，它的使用方式不局限于此，我提到最多的話就是不管是心理學還是原理法則，都隻是邏輯上的概念，我們在做設計時可以通過這個基礎的邏輯去靈活運用。
四、架構效應
1. 什麼是架構效應
架構效應屬于認知偏差，使用者會根據産品的表達方式所受影響，而不是資訊本身，架構效應決定的不是說什麼，而是怎麼說。
根據理性決策理論（包括期望效用理論），人們的決策應該是描述不變的，也就是說，呈現選項的方式不應該影響選擇，當一個問題被呈現為收益時，人們往往會規避風險，而當同樣的問題被呈現為損失時，人們往往會冒險，但是理論終究是忽略了人是情感動物這個事情，同樣的事情通過不同的表達方式也會影響人們的決策。
我們可以把一句話或一段話看作一個架構，同一個問題可以用兩種不同的話術來表達，也就是說同一個問題可以用兩個不同的架構來表達。
一段話中有積極因素或詞語，或者有受人喜歡的詞語，我們就說它是積極架構。
一段話中有消極因素或詞語，或者有受人厭惡的詞語，我們就說它是消極架構。
假如我們去購買清潔劑，貨架上同樣品牌的清潔劑，一個上面寫着清除90%的細菌，另一個寫着讓10%的細菌存活，相信大多人都會選擇買清除90%，這兩種文案傳遞的核心意思是相同的都是為來清除細菌，但是通過不同的話術資訊進行表達，我們所看到的感受也不同。
例如我們去超市買牛肉，兩個相同的牛肉擺放在一起，一個上面寫着70%的瘦肉，另一寫着30%肥肉那麼相信大多人會選擇瘦肉，因為人們更喜歡瘦肉，而肥肉本身是被排斥的，是以人們會在”70%的瘦肉“這個架構裡去思考。
2. 他是怎麼來的
此效應由兩位以色列心理學家尼爾·卡尼曼（Daniel Kahneman）和阿摩司·特沃斯基（Amos Tversky）于 1981 年提出，他們研究了相同資訊的不同表達方式如何影響了人的決策，他們通過兩個案例驗證了該效應。
架構效應存在的理論依據為前景理論、認知理論、動機理論：
- 前景理論論證了人們更容易受到損失可能的影響，并且影響程度大于收益（跟禀賦效應類似）；
- 認知理論則注重研究衡量得失的認知過程；
- 動機理論是一種愉悅壓力的結果，在恐懼和希望中會更加偏向恐懼，從恐懼中選擇希望，這3個理論形成架構效應。
美國心理學家丹尼爾·卡尼曼做過的一個實驗，假設為預防一種罕見疾病的爆發準備，預計這種疾病會使600人死亡，現在有2種方案：
- 可以救活200人；
- 有三分之一可能救活600人，三分之二可能一個救不了。
根據調查顯示大多人更願意選擇方案1，因為對于人的情感而言，救人是一種收益，在架構效應裡屬于積極架構，人無法接受損失的風險。
另一種方案是：
- 400人會死亡；
- 三分之一的可能無人死亡，三分之二的可能是600人全部死亡。
調查結果顯示人們更傾向于方案2，因為在2個方案中都屬于損失，人們不願意接受損失，是以會選擇冒風險的方案2，其實2個調查都是同一個背景，這就是積極架構和消極架構所影響人的決策思考。
3. 設計中如何用
（1）提升轉化率
我們怎麼通過架構效應提升轉化率進而賦予設計價值呢，這裡舉個例子例如我們在做一個桌面端的衍生産品，這個産品的目的是為了學習，在這之前使用者都是通過網站進行學習，我們需要引導使用者下載下傳桌面端，那麼如何引導才能提升這個下載下傳的轉化率呢，我們就可以通過架構效應去進行賦能，正常下載下傳軟體的時候都會有下載下傳彈窗或者是安裝彈窗，以此作為二次确認，身為設計師我們就可以在彈窗上做文章，像上面講的使用者更喜歡積極效應，我們在彈窗展示的話術上加以引導，就可以提升使用者操作下一步的轉化，同時也能夠展現設計的價值。
同樣在移動端也可以适用，例如我們需要使用者進行APP版本更新，但是很多使用者不願意去更新他們嫌麻煩，往往都是直接關閉更新提示，因為更新提示上内容衆多并且使用者很難了解，常見的就是“提升了體驗”“優化了幾項問題”等等，試問一下你看到會去更新嗎，那假如我們利用架構效應在這個基礎上把它的文案變成正向的資料，是不是就可以促進使用者的更新了呢。
在使用哈啰app時無意間看到一個非常适合架構效應的例子，在哈啰首頁大家都知道目的是為了掃碼騎車，但在其他子產品會有一些商業化的入口和引流的入口，我們看下面這個圖中哈啰打車想在哈啰app中引流下載下傳，他的打車宣傳語是“哈啰打車，省時又便宜”那這樣的文案太常見了，省了多長時間？便宜了多長時間？使用者都不清楚為什麼要下載下傳呢，如果把文案改成資料化形式，如哈啰打車，效率提升70%，每單節省10%，是不是更能激起下載下傳欲望呢。
（2）作品集中的作用
架構效應不止運用到産品設計中，在我們平常的求職面試中也可以用到，這裡有感而發，近期公司招實習生，但是我發現很多實習生的履歷或者作品集寫了衆多内容，并且在面對履歷時我完全看不到重點，比如很多人會寫我會什麼什麼軟體，我會什麼什麼設計。
那麼問題來了，這麼多軟體中你是都精通還是都不精通，這個我不清楚的，難道還要面試的過程中問軟體基礎麼，這個我覺得太浪費時間了，明明可以在履歷中或者作品集裡去避免這個問題，我們可以在做履歷或者技能說明的時候，可以在某一欄進行突出表現，以此來告訴面試官你擅長什麼，并且面試官也會根據你擅長的領域進行問你，當問到你其他領域的時候，你不會也情有可原，畢竟你提前告訴面試官你并不精通這個。
4. 總結
架構效應應用場景非常多，商品的售賣、日常的溝通、産品資訊的表達等等，作為設計師我們要根據實際的場景去靈活運用，我曾經在京東，去做自驅需求溝通的時候往往就會碰壁無法推進，後來就學會了一個技巧，不要說你要獲得什麼，而是先告訴他們能獲得什麼，這樣他們會被這種積極架構效應給束縛，之後在去講你需要什麼，這樣需求推動起來更加容易，這就是在溝通上運用的架構效應。
五、漸進呈現
1. 什麼是漸進呈現
漸進呈現是一種互動設計技術，它可以在多個螢幕上對資訊和動作進行排序，給使用者提供引導作用，它遵循從抽象到具體将資訊或者選擇項分為多個部分組成，以此來達到循序漸進的過程。
官方定義是“将複雜且不常用的選項從主界面移動到輔助界面中，讓更多重要的資訊觸手可及”。
聽起來比較複雜，其實很簡單，就像我們小時候上學學習漢字，我們要從拼音字母的發音開始學習，之後在學習字母組成的全拼，最後學習字的發音，組成詞彙、成語，最後我們就學習課本的閱讀了解等等，這一系列過程就是漸進呈現在生活中的映射。
在比如說一個從來沒有健身的人突然想去練腹肌，那他肯定是從基礎開始練逐漸把強度增加後才能達到最後練成腹肌的目标。
2. 他是怎麼來的
漸進呈現是1980年代初存在的概念，該概念在 IBM 的 John M. Carroll 和 Mary Rosson 的實驗室工作中引起了使用者界面專家的注意（Carroll 1983），他們發現早期隐藏進階功能會導緻以後使用它的成功率增加，被稱為“訓練輪”（Carroll 1984）的方法是驗證該概念的唯一參考文獻之一，但是這個概念IBM并沒有進行實際的案例論證，是以具有很多争議。
直到2006年Nielsen 引入了一種混合到漸進式披露的方法，稱為“分階段呈現”，其特點是“向導”（後退下一個）互動概念，然而，與IBM團隊的概念相似，在特定的環境會削弱漸進呈現的效果，但是“分階段呈現”也剛好證明了在不同的場景中他的使用方法不同。
從曆史上論證結果看，漸進呈現是一個偏向軟體可用性的概念，在軟體上應用比在網頁中應該更有效應，這可能是為什麼很少有基于網頁的漸進呈現案例，在軟體中，互動是在對話和“固定狀态”互動之間，在 Web 上，由于超文本是一種非線性媒體，互動是混亂的、随機的和動态的，但是随着現狀技術的發展，網頁的底層技術架構也更新了許多，很大程度上是可以做到仿軟體的互動效果。
可以讓使用者在接受複雜的資訊前就能夠使用産品，簡單點就是一下把所有資訊給到使用者，使用者可能會因為産品太過複雜不去使用，先把簡單的資訊提供給使用者，讓使用者在使用上沒有困難，其次對于産品而言也能夠控制功能的數量。
3. 産品中的應用
最核心的原則是要對功能劃分等級，確定剛接觸産品的使用者看到的是符合他目标的功能，讓使用者注意力集中在重要的功能上。
4. 動态設計中的運用
漸進呈現表面意思聽起來就跟動作相關，我們在做UI的時候往往都會涉及到動效的處理，那就需要我們去注意當動效的内容過多時，就要規範有序的進行呈現，如果一個動效一次性把所有内容都呈現出來，那其實就有點像閃圖了。
除了頁面之間的跳轉動效，還有一些UI中常用的微動效，那麼多元素，什麼時間先展示什麼，後展示什麼都要提前規劃好，保證動效的流程度。
tab動效同樣需要注意，每個tab都處于同一層級，是以他們在變換的過程也應該保持同一個節奏。
小結：漸進呈現在動效中目的一是為了保證動效效果，讓頁面更加流暢；二是增強使用者對功能的記憶點，統一秩序的動效才能形成記憶效果。
5. 區分功能優先級
在界面中的設計更重要的是讓使用者使用到核心功能，例如在app中很多産品的“個人 中心”頁通常會區分功能頁和内容頁，使用者從首頁切換到“個人”的時候應該看到哪個頁面呢，這個可以根據産品的功能優先級來定義，例如下圖中馬蜂窩的個人頁，使用者切換後看到的是個人主态頁面，其次可以在主态裡去使用其他功能，如設定、資料編輯等等，因為馬蜂窩定位是内容形産品，是以在個人頁裡需要把内容頁前置給使用者進行使用。
在大衆點評産品上使用者切換至“我的”頁面中看到的是功能頁，其次可以在功能裡進入個人首頁，它與馬蜂窩不同的是，大衆點評核心功能是探店、下單等，與使用者目标關聯性更強的是訂單、優惠券、達人等級等功能，反而社交頁面它的使用者價值并沒有功能頁高。
6. 網頁中也能應用
開始講的論證問題說過，網頁中不建議使用，但是在設計内雖然不太能使用，但在商業化價值上是能夠運用到漸進呈現的，例如我們在浏覽新聞網站或者一些商品網站時，通常都會添加翻頁功能，因為在網頁很少做feed流，那麼就可以在首屏的幾個子產品内添加廣告，以此來達到商業化目的，但是這種做法會影響使用者體驗。
7. 總結
漸進呈現更多時偏向于互動政策方向的方法，他既有好處也有壞處，好處是可以幫助使用者按照他們的預期來進行使用産品，強化使用者粘性，減少認知負載，提升使用者使用效率，壞處是如果我們的政策與使用者目标不比對那可能會流失使用者，其次是會限制使用者看到内容，是以要求産品政策與使用者目标的比對精準度要非常高。
六、共同命運原則
1. 什麼是共同命運原則
人在看到相同軌迹并以相同速度移動的對象時會将對象視為一個組，這是一種心理現象，屬于格式塔原則之一。《視覺傳播》的作者保羅·馬丁·萊斯特（Paul M. Lester）給此原則這樣的解釋：「人們會在心裡将指向天空的 5 根手指看作一個組，因為它們都指向一個方向。當有根手指指向反方向時會形成對立，進而使人們不能夠将那根手指視作整體中的一部分。」
簡單了解就是使用者看到多個點同時變換的時候，會把他們認定為一個組織。
共同命運的原則對于我們了解我們周圍的事物如何互相關聯或不互相關聯至關重要，我們在生活的幾乎每一個方面都使用這一原則的機制，而不僅僅是在我們對設計的享受和辨識中。
假如我們在開車，當在路上行駛時，看到同向行駛的周圍汽車時，在反向道路行駛的司機看到的時候同向行駛的所有汽車其實就是一個組，因為都在朝向一個方向行駛。
共同命運原則對于我們了解周圍事物之間的關系至關重要，我們在生活的各個方面都使用這個原則，甚至沒有注意到它。
2. 他是怎麼來的
此共同命運原則是格式塔六大原則中的第四個，由心理學家馬克斯·韋特海默（Max Wertheimer）、科特·考夫卡（Kurt Koffka）和沃爾夫岡·苛勒（Wolfgang Kohler）提出。保羅·馬丁·萊斯特（Paul M. Lester）在《視覺傳播》中提到：「人們會在心裡将指向天空的 5 根手指看作一個組，因為它們都指向一個方向。當有根手指指向反方向時會形成對立，進而使人們不能夠将那根手指視作整體中的一部分。」
3. 産品中的應用
其實格式塔原則本身在設計中就經常見到，共同命運原則作為格式塔原則的其中一部分，無論在網頁中還是移動端中我們都經常看到，人們對“動作”中的物體是極其敏感的，我們可以利用這個一點結合共同命運原則的概念幫助我們做到更好的體驗設計。
（1）網站下拉導航
我們經常在網頁中看到的下拉菜單導航等功能就是采用共同命運原則，例如下圖中的站酷首頁，我們在操作頂部下拉時會展開二級導航入口，二級導航入口進入到我們的可視區域時，他們是以一個組的形式出現，這個就是共同命運原則的關聯性，假設我們在網速過慢的情況打開網站進行導航操作時，這些二級導航會以單個形式出現在可視範圍，那麼整體的體驗性就非常差，這就是違背了共同命運原則的定論。
再比如說一些網站會在導航處添加css動效，當hover一級導航時二級導航内容并不會一次全部出來，而是通過動效方式有序的出現，這個其實也是遵循了共同命運原則，通過動效的方式告知使用者這是一個組，與網絡波動情況不同的是，網絡波動雖然也是一個一個出現，但是出現的時機并沒有達到統一，是以體驗會略差。
（2）引導使用者
共同命運原則另一個使用場景是通過引導使用者達成目标，如果兩個對象指向相同的方向，則方向線在布局中占主導地位，是以如果一個項目正在移動或指向相同的方向，我們可以将所需的消息放在目标點，這種方法在網站設計中也經常用到。
可以看下面例子，我們可以看到一個管道工用他的扳手指着管道公司的電話号碼，通過扳手引導使用者閱讀電話，扳手與電話存在一條視覺水準線，這個區域就是一個引導組。
包括下面的網站也是同樣的道理，通過模特的視覺觀看方向引導使用者觀看标題。
（3）移動端的應用
在移動端跳轉頁面時，經常會出有骨架屏出現，一方面骨架屏是為了緩解使用者焦慮，另一方面則是為了讓下一級頁面更完整的展現給使用者，讓使用者看到的是一個整體，如果一些産品不加骨架屏就會出現頁面中每個子產品都會單獨加載出來毫無順序，無法向使用者傳達同組的關系。
還有一種常見的是頂部tab切換，目前市場上打多app都采用頂部導航，以此來承載更多的功能，那麼在滑動tab時下面的内容通常都會向統一的方向進行移動，通過頁面移動動效告知使用者這些内容是同組關系。
4. 我是怎麼做的
今年初的時候為公司web c工具形産品做過一個優化，産品主要針對的是技術類使用者，其中就有一個功能是通過網站練習寫代碼的功能，我們都知道工作中技術同學一般都是使用桌面端的軟體去完成工作，那麼在做網站仿桌面軟體時就要保證使用者的操作習慣。
我們當時遇見一個問題，很多使用者回報說我們的刷題工具其中一個功能流程度不好（技術類使用者比較嚴謹），這個功能呢對于我們來講其實經常見，他類似于下拉菜單功能，隻不過在技術刷題場景他是一個《自動補全》的功能，即使用者在編輯器裡輸入代碼的前幾個字母就能夠聯想出與該字母所比對的選項，但是當時我們的補全功能很久沒有優化過，樣式上比較老舊，互動上也不合理。
雖然功能簡單但是在優化的時候也用到了很多難點，當時的優化流程首先是調研了不同技術崗位所使用的開發軟體，我自己體驗一遍後選擇出流暢度最高的産品，以此做仿生。
為什麼要放到共同命運原則說呢，因為其中有個問題是自動補全功能聯想的代碼條數并不是成組出現，而是一行一行出現，這樣的問題就會造成使用者在使用過程中的效率，另一方面就是無法向使用者傳達組的概念。
是以在優化完視覺方面後，也對齊互動進行優化。
5. 總結
共同命運原則在設計中屬于基礎原則，基本在做任何産品時都會使用，而且是無法避免的，如果不使用那就會出現體驗問題，他的目的是為了讓使用者更好的閱讀資訊、了解資訊，我們越了解原則，越能做出好的體驗産品。
作者：愛吃貓的魚；公衆号：防脫發藥水
本文由 @愛吃貓的魚 原創釋出于人人都是産品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協定