UI設計中常見的10種設計原則

作為一名設計師，我們常常被戲稱為美工，視覺裝飾者，項目中被動執行。遇到甲方或者上級的一些關於設計沒有調性、體驗不友好、你這樣設計的理由是什麼這類問題，常常答不上來只能矇頭去反覆修改，陷入質疑自身的設計能力的困境。

擺脫設計站不住的腳，我們需要去學習一些設計中常見的設計原則，輸出有理有據的設計稿。而設計原則總結有以下三個好處：

1、便於確立目標和方向

2、便於團隊協作和溝通

3、指導設計決策

為大家結合實際案例淺說UI設計中常見的10種設計原則，擺脫設計職場尷尬處境，希望大家喜歡。

01 功能可見性

AFFordance

通過模擬實體世界來暗示用戶系統是如何運作的。常用於界面中的功能設計，運用隱喻等方式，將用戶使用的物品的經驗映射到界面中。如果產品的功能可見性與人們感官的預期相符合，那麼這個設計會有很高的接納率和使用率，同時也會被用戶認為容易操作。

例如：淘票票APP-電影選座，根據現實電影院的座位排列，可以引導用戶明確地購買電影票所處的位子，與用戶的感官預期相符，清晰明確的傳遞自身所表達的含義，用戶選擇無障礙。

02 意元集組

Chunking

為了適應短期記憶，一種把不同的信息集結或歸納成模塊或單位，便於人們對信息盡心解讀和記憶的技巧。我們生活中記憶很多事物時，也應用到了這個原則方法，比如說電話號碼、個人地址等。

例如：招商銀行APP - 銀行的卡號的輸入四個文字成一組 ，容易閱讀審查，也更利於短期記憶。

03 金字塔原理

Minto Pyramid Principle

任何事情都可以歸納出一箇中心點。常用於信息展示的層次區分，強調在第一時間傳遞核心信息。需要注意的是，在信息傳遞感知中，動態事物感知速度大於靜態事物，對色彩的感知速度大於圖形，對圖形的感知速度大於文字。

例如：招商銀行APP - 總資產和數據的突出，運用大面積形狀色塊突出信息，用戶可以在打開該頁面時第一時間感知。

04 梵蕾斯托夫效應

Von Restorff Effect

人們對特殊事件或物體會特別關注並留下印象。常用於突出關鍵重點信息，與周邊信息拉開層次。在設計中我們經常會遇到這樣的質問，這個設計點不夠突出，要大。其實我們在重點信息設計表達的時候，絕對不止大來表現突出信息，可以用特別的元素、反差的色彩、增加形狀、文字引導襯托多種設計表達形式，還有現在常見的動效，方法很多需要多去嘗試用不同形式去表達。

最要注意的一點是，如果全部強調就等於什麼都沒有強調了。

例如：每日優鮮APP - 首頁金剛區圖標上添加促銷文案，並加以動態形式表達，與金剛區其它圖標拉開層次，吸引用戶更多的注意力，引導用戶點擊進入該功能板塊，達到引流促銷的設計目標。

05 二八法則

80/20 Rule

又稱少數關鍵定律或因素稀疏定律，表明80%的結果，由20%的原因產生。常用於引導用戶關注最重要的功能和內容，有具體的用戶使用數據反饋，排定產品功能的優先級，可以幫助提升產品設計的易用性和有效性。

例如：智行火車票APP地點搜索頁，根據用戶個人使用歷史數據與平臺用戶詩句反饋，設計佈局上排定優先級，加快用戶搜索定位、購票流程。

06 AIDMA法則和AISAS模式

消費者從看到廣告到購買之間，經過五個環節：引起注意-產生興趣-激發慾望-強化記憶-促成行動。常用戶促銷以營收為目的的頁面設計。歸納起來可以從三個方面執行：

a 引起注意：表現手法上雨中不同，給訪問者提供驚喜和趣味性

b 產生興趣、激發慾望：重點展示核心賣點和主要內容

c 強化記憶，促成行動：印象深刻的文案以及詳細信息，促成用戶做出決定

例如：網易嚴選APP專題頁促銷。從頭圖的5折促銷信息引起注意 - 紅包贈品熱銷品產生興趣和激發購買慾望 - 折扣文案商品陳列強化記憶最後促成下單消費，完整的流程。在促銷頁面中，這種設計形式流程經常設計者採用。

衍生出來的還有AISAS模式，AISAS模式是由電通公司針對互聯網與無線應用時代消費者生活形態的變化，而提出的一種全新的消費者行為分析模型。強調各個環節的切入，緊扣用戶體驗。在全新的營銷法則中，兩個具備網絡特質的“s”——search（搜索），share（分享）的出現，指出了互聯網時代下搜索（Search）和分享（Share）的重要性，而不是一味地向用戶進行單向的理念灌輸，充分體現了互聯網對於人們生活方式和消費行為的影響與改變。

例如：拼多多APP - 拼團與砍價，拼多多的成功絕對離不開它這個拼，低價優惠吸引用戶，依靠病毒式的拼團砍價模式的傳播方式裂變，促進大規模用戶知曉 - 低價興趣 - 購買消費 - 分享拼團砍價，閉合循環。

07 尼爾森F模型

The F-Pattern Eye-Tracking

在瀏覽頁面時，用戶會不自主地以【F】形狀的模式閱讀，這種用戶傳統的從左向右、從上到下的閱讀習慣決定了頁面呈現F形的信息展示。常見設計方法如下：

a 將重要內容放在最前面，讓用戶能夠快讀觸達

b 結構化地展示信息，講大段內容分成小塊

c 提供簡短的標題，讓用戶能夠快速定位到感興趣的內容

例如：京東APP商品詳情頁信息層級展示，將商品信息結構化，簡短標題，最重要的價格信息放在最前面紅色加粗顯示，讓用戶能快速知曉。

08羊群效應

The Effect of Sheep Floc

羊群是一種很散亂的組織，但一旦一隻羊動起來，其他的羊也會不假思索地一哄而上，全然不顧前面可能有狼或者不遠處有更好的草。

比喻人都有一種從眾心理。適用於帶有引導性的設計，可以通過以下方法達到“羊群效應”：

a 利用刺激性的關鍵詞製造領頭羊，如“瘋搶”、“秒殺”等

b 利用“領頭羊”營造活躍氛圍，如提示已有多少用戶參加活動、下載、購買

c 設計好友氛圍，當用戶看到自己的好友正在參與，自己參與的可能性更大

例如：淘寶APP首頁雙11預熱 ，20億紅包、免息、豪禮的刺激性信息，還有每次預熱的養成類活動拉好友組隊，每年的雙11這樣玩法設計都屢次不爽。

09格式塔原理

Gestalt Psychology

人在觀看事物時眼腦是共同作用的，不是一開始就區分事物的各個部分，而是將各個部分組合起來，使之成為一個更易於理解的整體。常用於設計中的信息結構與界面佈局，使之更加合理性。

a 相近：彼此靠近被看做是一個整體

b 相似：把具有共同特性的事物當成一個整體

c 封閉：人的大腦可以對圖形實現腦補，實現統一整體

d 連續：連續是通過一種視覺聯繫讓畫面之間形成一個整體

e 簡單：將設計簡化，複雜圖形幾何化，在複雜信息環境中，構建更易懂的整體

例如：自如APP首頁佈局。租房類簡潔圖標表意功能，同功能板塊信息間距小，不同板塊信息間距大，同板塊如新人福利、畢業生專區一欄不同信息用卡片+右下角色塊圓的統一設計形式感，串聯起來構成一個整體，裡就涉及到了格式塔原理的簡單、相近、連續，界面。

10奧卡姆剃刀定律

Occam’s Razor

如果有兩個功能相似的設計，那麼選擇最簡單易懂的。適用於主要功能、重要信息提取，剔除不必要的干擾功能、信息。對於項目評審多個功能或需求時，要求設計師專注於用戶核心需求，產品為用戶提供的核心功能，去除不必。

根據奧卡姆剃刀定律，我們可以採取的設計方法有：

a 只放置必要的東西：簡潔的設計最重要的一個方面是隻展示有作用的東西，其他的都隱藏。這並不意味著不能提供給用戶很多的信息，可以採用“瞭解更多”的鏈接來實現這些。

b 減少點擊次數：讓用戶通過很少的點擊就能找到他們想要的東西

c 給予更少的選項：做過多的選擇也是一種壓力，減少選擇可以減少用戶的思維負擔，這樣就會使體驗更順暢。

例如：

花瓣APP - 首頁佈局，輕量化設計，聚焦於平臺的核心功能搜圖找圖上，減輕用戶認知負擔與自身平臺運營維護成本。抖音APP的登錄界面也是如此，減少用戶的不必要的操作，快速登錄成功進入APP。

END.

以上整理的UI設計中經常會遇到的10個設計原理，是自己通過一些設計理論學習後的思考總結。通過這些理論知識的學習減少主工作中的主觀臆斷，使設計方案更有依據，更容易明確設計目標和方向，有利於項目團隊成員的協作與溝通順暢。另外，這些理論並不侷限於UI設計，在其它領域的設計，甚至我們生活中也能經常遇到，留心觀察說不定在遇到一些問題時也能作為指導並解決。