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