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