輯導語：想要做好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 年提出，他們研究了相同信息的不同表達方式如何影響了人的決策，他們通過兩個案例驗證了該效應。

框架效應存在的理論依據為前景理論、認知理論、動機理論：

1. 前景理論論證了人們更容易受到損失可能的影響，并且影響程度大于收益（跟稟賦效應類似）；
2. 認知理論則注重研究衡量得失的認知過程；
3. 動機理論是一種愉悅壓力的結果，在恐懼和希望中會更加偏向恐懼，從恐懼中選擇希望，這3個理論形成框架效應。

美國心理學家丹尼爾·卡尼曼做過的一個實驗，假設為預防一種罕見疾病的爆發準備，預計這種疾病會使600人死亡，現在有2種方案：

1. 可以救活200人；
2. 有三分之一可能救活600人，三分之二可能一個救不了。

根據調查顯示大多人更愿意選擇方案1，因為對于人的情感而言，救人是一種收益，在框架效應里屬于積極框架，人無法接受損失的風險。

另一種方案是：

1. 400人會死亡；
2. 三分之一的可能無人死亡，三分之二的可能是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協議

G動畫的介紹

基礎知識講解：

1、什么情況下用AE做剪輯（結合簡單的需求進行評估）

如果說只是簡單的錄屏演示剪輯，（添加字幕或者簡單文字等提示）則選用PR或者剪映；如果是PPT修改動畫/MG動畫等需要將頁面中內容做動畫的話，我覺得AE相對要更方便些。

PR軟件參照：

1、先通過配音軟件將字幕錄制出來

2、結合聲音進行錄屏

3、將聲音放在網易見外工作室生成字幕文件，修改字幕中的每一段文字，保證和原文件進行統一

4、將聲音，視頻，字幕在PR中進行匯總即可完成。

2、做動畫的一些流程

動畫前期需求的調研

1、確定主題（確定視頻主題方向與風格--需求方/我們可以給提供一些參考）

2、制作腳本（需求方確定需要呈現的內容（主要就是素材和字幕，當然有些可能會給我們比較詳細的動畫說明，這最好了），包括視頻時長/需要我們最后做一下把關，預估時間是否可行--一般就是將字幕進行AI配音，看時長是否能滿足要求）---參照模版

注意：動畫不建議時間太長，要用簡短的視頻讓用戶快速了解內容，并達到高效記憶的效果。

3、項目計劃（完成時間預估）

動畫詳細設計

1、靜態分鏡頭制作（靜幀制作，定稿之后再進行其他內容）

2、動畫制作（制作動畫）

3、轉場和片頭片尾制作

4、添加音效/bgm/配樂等（如果客戶方有素材庫，那就非常棒了）--這個一般是我們提供

5、添加字幕（網易見外工作臺生成字幕文件導入pr中制作字幕-對AE很有用）

字幕生成器：網易見外工作臺 https://jianwai.youdao.com/index/0

字幕配音網站：（建議導入到PR進行添加）

https://www.6pian.cn/peiyin/44.html

http://www.51taojinge.com/include/voice/voice.php

6、項目交付和總結

3、動效/MG動畫設計的目的及方向有哪些？

4、動效/MG動畫常用的動畫

5、AE做動畫用到的軟件和插件講解

用到的軟件：sketch/AI/AE/adobe media Encoder（導出文件）/Total Video Converter Pro（壓縮軟件）

用到的插件：導入插件、動畫流暢插件、粒子插件（其實我們用不到，這個特別費電腦，而且特別卡），還有一些提高速度的插件等等

導入插件：對于psd文件來說，可以和AE完美銜接

AEUX(導入SKETCH文件插件)、Overlord（導入AI文件插件）

動畫流暢插件：

Motion 2（該插件可以成功的完成緩入緩出、彈跳、錨點居中等一些動畫，大家可以看它的專業知識）

https://www.jianshu.com/p/6e7e894a6fce

合成和內容大小統一：

Auto Crop：預合成裁切

飄動效果

Auto Sway

教程

A：1、先打錨點，選中錨點；2、apply即可普通生成

B：1、選中多圖層，設置錨點位置；2、點擊apply

C：2、通過tool將圖層進行分層；2、選中所有圖層；3點擊apply；4、Z-axle 選中（可以在Z軸有一個動畫）；5調整Z軸方向

如何做動畫（實操）

1、如何將別人的視頻變成我們自己的（這個很關鍵/我們大多數動畫使用素材是最方便的）

這個就簡單了，一般分為這些情況

1、找到對應的位置，把需要替換的文件替換掉，通過簡單調整，改成我們自己的（這個最簡單）

2、將需要的序列導入我們自己的工程里，有能力的話，只把我們需要的留下。

3、將自己想要的內容單獨導出，然后放置在我們自己的文件中。（最提倡的，這樣既節省了渲染速度，我們自己的工程也不會太亂）

2、如何獲取素材（BGM/圖片/動畫素材）

一般是從包圖網上下載

3、常用到的一些快捷操作

內容和合成大小統一：

在素材處于選中的狀態下，在合成窗口點擊鼠標右鍵，選擇彈出菜單“變換”列表中的適合復合”或“適合復合寬度”、“適合復合高度”來進行調整。

合成和內容大小統一：

Auto Crop：預合成裁切

幀定格

視頻無縫排序

將合成先拖入新合成中，選中需要排序的圖層(注意順序，最先選的最前面)，選擇動畫>關鍵幀輔助>序列圖層，選擇彈出的內容即可進行無縫排序

將一段視頻分為兩段

ctrl(Command) shift d

多圖層對齊時間線

【 / 】

轉場

這個直接用默認動畫進行修改即可

快速查看動畫幀

U健

如何給圖層修改顏色/調整顏色

如何處理人錄制的聲音（我們現在一般都是AI錄音）

一般是在AU中進行處理

如果無法連接到adobe media Encoder如何做處理？/如何對視頻做壓縮

1、先通過AE自帶的渲染工具高質量渲染出來，當然這個時間會很長，同時文件會很大，要保證電腦有足夠大的空間哦

2、通過Total Video Converter Pro進行壓縮（可以壓縮兩次，先壓縮一個高質量的，再通過高質量的壓縮一個超小文件的），壓縮配置如下：主要修改視頻編碼方式/幀速率/比特率

最后的對比圖：

原圖（190M）：

修改后的小文件（32M）：

視頻做完之后需要做什么？

我們視頻做完之后源文件內容的位置盡量不要進行移動和刪除，方便我們后續進行調整。

常用快捷鍵

五大基礎變換屬性

在對應圖層使用這五個快捷鍵，即可快速展開或收起對應屬性。

• 位置：P（Position）

• 縮放：S（Scale）

• 旋轉：R（Rotation）

• 不透明度：T（Transparency）

• 錨點：A（Anchor）

常用工具選擇

• 選擇工具：V

• 形狀工具：Q

• 鋼筆工具：P

• 攝像機工具：C

關鍵幀操作

• 快速添加關鍵幀：Option + Shift + “ * ”（ *=對應屬性快捷鍵）

• 緩動關鍵幀：F9

時間指針操作

• 定位到上一可見關鍵幀：J

• 定位到下一可見關鍵幀：K

• 定位到圖層入點：I

• 定位到圖層出點：O

• 設置當前為工作區開始：B

• 設置當前為工作區結束：N

圖層操作

• 將圖層拆分 ：Shift + Command + D

• 裁去時間線左側圖層：Option + [

• 裁去時間線右側圖層：Option + ]

• 設置當前為入點： [

• 設置當前為出點： ]

• 復制圖層：Command + D

其他常用操作

• 展開/收起帶關鍵幀的屬性：U

• 展開/收起所有屬性：UU

• 展開/收起遮罩屬性：M

• 展開/收起音頻屬性：L

• 轉為預合成：Shift + Command + C

表達式（感興趣的可以研究研究）：

https://www.zcool.com.cn/article/ZMTE3MDM2OA==.html

（大部分都是我個人覺得好用的內容，如果有更好的可以一起交流哦）