很多設(shè)計師在大學(xué)時期都是學(xué)習(xí)繪畫，動畫，或者視覺傳達(dá)類的學(xué)科，大學(xué)里一般也沒有UI的專門學(xué)科。因?yàn)槿藱C(jī)界面交互，用戶體驗(yàn)，都是非常綜合的領(lǐng)域，需要方方面面的知識。

我以前做游戲時，UI更多是憑借視覺感覺?，F(xiàn)在做互聯(lián)網(wǎng)產(chǎn)品時，UI更像是一種接近工業(yè)的學(xué)科。它不是一張海報，一張原畫，或者是動畫短片，強(qiáng)烈的藝術(shù)風(fēng)格可以說明一切。UI在互聯(lián)網(wǎng)十幾年的發(fā)展下，從電腦軟件界面，到手機(jī)移動界面，已經(jīng)形成了標(biāo)準(zhǔn)化視覺。用戶已經(jīng)習(xí)慣，設(shè)計師不必造輪子。拋開交互，在閱讀體驗(yàn)上，比如，信息的排版，網(wǎng)格系統(tǒng)，都需要向已經(jīng)發(fā)展的很成熟的平面設(shè)計學(xué)習(xí)。

搜一搜UI，就像工廠里的零件，這些基本的零件本身的質(zhì)量早已經(jīng)有了行業(yè)標(biāo)準(zhǔn)，通過各種官方規(guī)范文檔就可以了解。

這些零件該如何組裝起來，讓它可以舒服的被人使用；以及如何打造出可以給人留下印象的東西。這是設(shè)計師需要主要思考的地方。

無論是在什么客戶端上，無論是什么類型的UI，平面設(shè)計中基本的，通用的準(zhǔn)則，是每個設(shè)計師都需要具備的知識。

UI設(shè)計 首先要保證信息的清晰呈現(xiàn)，讓信息易讀，讓操作易用。
其次才是在信息清晰呈現(xiàn)的基礎(chǔ)上，加入視覺設(shè)計，增加表現(xiàn)力。讓UI提現(xiàn)產(chǎn)品的氣質(zhì)，風(fēng)格或者文化。

這個主次關(guān)系不可以顛倒。

同時，如果你看過一些設(shè)計書，就會知道在平面設(shè)計領(lǐng)域的四大原則：

• 親密性
• 對齊
• 重復(fù)
• 對比

簡要說明下這四個原則：

親密性

彼此相關(guān)的項(xiàng)應(yīng)當(dāng)靠近，歸組在一起，組成視覺單元
有助于組織信息，減少混亂，為閱讀者呈現(xiàn)清晰的結(jié)構(gòu)

對齊

任何東西都不能在頁面上隨意安放。每個元素都應(yīng)當(dāng)與頁面上的另一個元素有某種視覺聯(lián)系。
能從排版中看到虛擬的“線”和“邊框”

對齊

表格的對齊原則

重復(fù)

視覺要素重復(fù)出現(xiàn)，可以重復(fù)顏色，形狀，材質(zhì)，空間關(guān)系，線寬，字體，大小和圖片等等。
增加條理性和統(tǒng)一性。

重復(fù)代表是經(jīng)過思考的重復(fù)

對比

對比的基本思想是，要避免頁面上的元素太過相似。如果元素不相同，那就讓他們截然不同。
在需要引人注目的地方，一定要加強(qiáng)對比。

字號的對比

色相對比 如互補(bǔ)色對比

同樣也可使用鄰近色，和對比色對比，同一顏色的明度和純度對比。不多加贅述。

排版中的實(shí)例

在實(shí)際排版中，尤其是文字的排版，有一個很重要的概念就是注意行高。

在前端開發(fā)中，文字都有默認(rèn)的行高數(shù)值。在使用PS等設(shè)計工具時，設(shè)計師容易忽略這個數(shù)值的變化， 當(dāng)文字字號變大時，其行高也要相應(yīng)的變化。（PS默認(rèn)的行高多為「自動」，距離較小。當(dāng)文本內(nèi)容較多時，需要手動將行高調(diào)整到字號的1.5~2倍）

行高與行間距

如下圖，當(dāng)我們拿到最左邊這樣的文本內(nèi)容后，雖然它已經(jīng)給標(biāo)題加粗處理了，但是仍然不易閱讀，所以我們需要按照親密性原則，講文本內(nèi)容分組，調(diào)大它們之間的距離。

同時，將加大標(biāo)題字號，加強(qiáng)對比。（此時比較重要的是，當(dāng)文字字號變大時，文字行高也變大了，所以我們要相應(yīng)的加大它的行間距） 這樣就是一個相對舒適的排版了。
也可以考慮增加一些縮進(jìn)來加強(qiáng)從屬關(guān)系。

文字排版中的間距

另一組實(shí)例

以下是一個抽獎轉(zhuǎn)盤的活動規(guī)則頁面。

某活動規(guī)則頁面案例

• 首先這種長文本一般不適用于第二張圖的居中，閱讀視線會非常忙亂。
• 第三張圖是公司的實(shí)習(xí)生交給我的成品，當(dāng)時看了強(qiáng)迫癥就要犯。文字沒有分組，同時各種不對齊，（另外亂打AAABBB是很不好的習(xí)慣，因?yàn)橛袝r候字間距和標(biāo)點(diǎn)也是要考慮的）
• 第四張圖調(diào)整了文字和對齊和行間距，閱讀體驗(yàn)好了很多。
• 第五張圖則更加加強(qiáng)了標(biāo)題的對比，弱化分割線，利用文本的分組和對比來做區(qū)分，更好一步。

文本排布過于松散平均時，可按照親密性縮小間距，上下留白加大，形成視覺單元

親密性與視覺單元

利用移動端8px原則，設(shè)置網(wǎng)格

網(wǎng)格系統(tǒng)有秩序之美，在傳統(tǒng)書籍平面中，網(wǎng)格是排版的基礎(chǔ)。而在界面設(shè)計中，我們可以將網(wǎng)格設(shè)置成我們需要的像素單元，實(shí)現(xiàn)有規(guī)律的對齊。

8px原理由來
1.由于IOS技術(shù)開發(fā)是以320*480px為標(biāo)準(zhǔn)開發(fā)的，所以設(shè)定此尺寸為1，算出各個尺寸的比例。
2.各個尺寸比例的值乘以4時，各個尺寸都能夠滿足是整數(shù)，且保證開發(fā)時不會模糊。
3.設(shè)計稿尺寸為開發(fā)尺寸的2倍，所以我們選擇為最小尺寸單位。

8px基準(zhǔn)

利用網(wǎng)格布局

字號推薦

相比網(wǎng)頁而言，手機(jī)屏幕小，信息集中。所以字號不宜過小，而且現(xiàn)在也有流行大字的趨勢。很多新聞類APP的內(nèi)容也已經(jīng)有雜志化的走向，標(biāo)題文字都會相應(yīng)加大。
還是那句強(qiáng)調(diào)，文字加大時，間距一定也要加大。要留足空間。

再看一組綜合實(shí)例

排版細(xì)節(jié)變化的設(shè)計思路

• 圖1乍一眼看沒什么毛病，但是仔細(xì)看，排版間距略平均，標(biāo)題無對比，閱讀視線無重點(diǎn)。
• 圖2 調(diào)整了間距親密關(guān)系，讓新聞列表區(qū)域作為整體，靠的更近，同時加強(qiáng)了標(biāo)題文字的顏色對比。
• 圖3 進(jìn)一步加強(qiáng)文字對比，弱化板塊標(biāo)題，將視線重點(diǎn)留在 “晨報”和新聞標(biāo)題上。同時將新聞列表間距更加靠近。
• 圖4 為了使界面排版更加簡潔，將縮略圖邊距去掉，并放大圖片尺寸，圖片所帶來的垂直空間，可以幫助標(biāo)題文本拉出空間，不至于像圖3過度擁擠。

設(shè)計中同樣可以利用網(wǎng)格。快速完成準(zhǔn)確的布局。然后在此基礎(chǔ)上再做進(jìn)一步的需求化，風(fēng)格化調(diào)整。

在此主要分享了一些最基本的平面設(shè)計的小注意點(diǎn)，這些細(xì)節(jié)看似簡單易懂，但是實(shí)際設(shè)計中很容易被忽略無視，新人設(shè)計師更是會信馬由韁，全憑感覺。UI設(shè)計不是學(xué)幾個軟件，抄幾個界面，做幾個ICON就可以了。
僅僅從平面視覺的易讀性來講，需要學(xué)習(xí)平面設(shè)計原理；
另一個層面，為了易用性，在產(chǎn)品需求，人機(jī)交互，用戶感官心理方面需要不斷研究；
進(jìn)一步實(shí)現(xiàn)藝術(shù)和創(chuàng)意的表現(xiàn)，體現(xiàn)產(chǎn)品的風(fēng)格，品牌和文化。

扯兩句名言：
設(shè)計是為了解決問題；
真正的設(shè)計并非令人從表象察覺到有何不同，而在于無形中從設(shè)計上受益。

當(dāng)然，我們不是要被這些規(guī)則限死，從而讓所有的設(shè)計都看起來一樣。
而是在打破規(guī)則之前，首先明白規(guī)則是什么。