好的設計作品總有這樣那樣的設計原則，而優秀的設計師則需要將設計原則根植于心，靈活應運于日常的設計中。通過對大量作品的揣摩和提煉，本文總結了以下四個在 UI 界面設計中至關重要的設計原則。只要仔細思考，反復推敲，必然會打通任督二脈，設計能力穩步提升！
推薦閱讀：
對齊即秩序、秩序即美
秩序，名詞，意思是有條理地、有組織地安排各構成部分以求達到正常的運轉或良好的外觀的狀態。
提取關鍵詞：秩序、有組織、良好的外觀狀態。
生活中漂亮的建筑、整潔的街道、日常看到的事物無處不透露著因秩序帶來的美感，給人以愉悅的感受。
UI 界面設計中的秩序即對齊，相關的內容對齊之后，就為整體的設計奠定了一個良好的基礎，不會雜亂無章，無從下手。
1. 不同內容的對齊需做到：
- 文字與文字，文字與數字對齊
- 文字與圖片對齊
- 圖片與圖片對齊
- 不同內容模塊之間相互對齊
圖 1 給人感覺則更加嚴謹、規律，視覺上也更加美觀。圖 2 中對齊不夠嚴謹，給人感受則完全不同。
2. 對齊需保持間距的一致性
UI 頁面設計中，間距建議以 4 或者 8 的倍數為標準（設計圖為 1 倍圖），間距=Xa，a=4 或者 8；
實際案例：
上圖中微信左右間距為 16pt，京東左右間距為 12pt，均為 4 的倍數。因京東為電商平臺，左右間距略小，可以給內容留出更多空間。
遠近親疏關系明確，用戶可快速清晰地獲取內容
格式塔原理分為以下幾個類別：親密性，相似性，連續性，封閉性，對稱性，主體/背景。
親密性：接近或鄰近的物體會被認為是一個整體，相互靠近的元素比相隔較遠的元素則給人感覺會更有聯系。
上圖中人們會優先的認為方塊分為兩列，每一列聯系則更接近，即使第二列中間圖形顏色不一致。
實際案例：
日常工作中，第一種設計就比第二種準確、合理，易于理解。
相似性：物體的形狀、大小、顏色、強度等物理屬性方面比較相似時，這些物體就容易被組織起來而構成一個整體。
看到上面 5 個相似的圖形，顏色一樣的色塊則給人傳達出他們更接近，功能更相似。
實際案例：
支付寶應用中心不同功能模塊中屬性類似的功能 icon 在顏色的選用上也更加接近。
連續性：如果一個圖形的某些部分可以被看作是連接在一起的，那么這些部分就相對容易被我們認為是一個整體。
下圖中的三角形線條是沒有閉合的，瀏覽者都會傾向于從視覺上封閉那些開放或未完成的輪廓，把他們當作一個整體。
實際案例：
上圖中兩個知名的公司 logo 都不是完整的，但人們還是會將他們聯想成一個完整的圖形。
封閉性：一組元素通常被視為一個可識別的形式或圖形。當對象不完整或部分對象未封閉時，也會視為封閉。
實際案例：
知名音樂 APP 中分類專區、精選視頻第二個內容在當前頁面均沒有展示完整，但我們都知道它是完整的。
對稱性：對稱元素往往被視為屬于彼此，會給我們一種穩固和有序的感受。
實際案例：
上圖知名應用市場的 PC 頁面，兩個紅色框的內容在設計上相互對稱，又互為整體。
主體/背景：這就是一個主次層級的關系，當一個畫面中一個物體很大，或在視覺中心的情況下，我們會不自覺的把它當作主體。
實際案例：
彈窗設計很好的詮釋了主體與背景的關系，突出內容的重要性。
呼吸感即間距，間距對則萬物適
現代人都在追求遠離都市，親近自然。親近自然的本質還是人們可以擁有更廣闊的視野，更多自由空間，擺脫了城市的局促和擁擠。
實際案例：
上面 2 張圖的呼吸感給人感覺就很舒適。
精美的配圖、精細的 icon 給頁面錦上添花
1. 配圖
設計圈非常流行一句話：設計一小時，找圖 40 分，可見配圖的重要性。
好的配圖，整體的構圖、光、影、層次關系都很優秀，本身就是很有品質的作品，放在我們的設計中，效果自然不言而喻。
2. 圖標
圖標通常都是功能的入口，好的圖標設計，功能明確，設計精細，可以在很大程度上引導和吸引用戶的點擊，促進轉化。
而設計意圖不明確的圖標，會使用戶產生疑惑，不利用產品信息的表達，直接造成部分客戶的流失。
推薦大家使用圖標盒子來規范 icon 的設計
提供 PSD 和 Sketch 兩個格式，附件下載。
以上就是 UI 設計師必須掌握的四個設計原則，希望對大家有幫助，謝謝。
歡迎關注作者微信公眾號：「西城門設計」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 羅琪