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