不會排版做什么UI設(shè)計(jì)師

　　新手UI設(shè)計(jì)師做設(shè)計(jì)工作很苦惱，為什么辛辛苦苦做出來的頁面沒有設(shè)計(jì)感?大多數(shù)情況下不是能力不行，而是對細(xì)節(jié)沒有掌控好，職場中可能還會被懟：不會排版做什么UI設(shè)計(jì)師，我們怎么才能讓頁面更具設(shè)計(jì)感呢?
 

　　UI設(shè)計(jì)中的第一個基礎(chǔ)原則就是親密原則，設(shè)計(jì)前對內(nèi)容進(jìn)行信息分層，屬于一個層級分為一組，有關(guān)聯(lián)的內(nèi)容會離的更近，這樣的間距規(guī)律還會讓我們清晰的區(qū)分開每一條信息，不會導(dǎo)致信息干擾。

 

　　我們很容易將1.2分成一組，而將3.4分成-組，因?yàn)?.2者離的更近。

　　圖中內(nèi)容有三塊: 上間距，內(nèi)容區(qū)域，和下間距，因此我們可以判斷內(nèi)容區(qū)內(nèi)間距一定小于上下間距，因?yàn)楦鶕?jù)親密性原則，有關(guān)聯(lián)內(nèi)容會離的更近，標(biāo)題和價格又分為2個模塊，其中價格優(yōu)惠之間信息屬于一個內(nèi)容，所以它們間距相對就比較小。

 

　　很難一眼看出圖片屬于上邊還是下邊，親密原則就是區(qū)分哪塊和哪塊是整體， 加上間距區(qū)分上下文關(guān)系。
 

　　UI設(shè)計(jì)中的第二個原則就是對比原則，重要信息和次要信息通過顏色對比、粗細(xì)對比、形狀對比、疏密對比，大小對比使我們聚焦在需要關(guān)注的信息上，在進(jìn)行對比排版的時候，需要多維度考慮，找到合適的解決方案。

　　以上APP都是通過字號，粗細(xì)，以及間距大小通過對比原則來區(qū) 分信息和信息之間關(guān)系，讓整個頁面動線看起來更加流暢閱讀節(jié)奏舒適。

　　有的設(shè)計(jì)雖然運(yùn)用了親密原則但是看起來還是很混亂，原因是界面信息內(nèi)容看起來對比不強(qiáng)烈。重要信息和次要信息要對比強(qiáng)烈，通過大小，字重突出標(biāo)題信息讓用戶焦點(diǎn)聚焦在標(biāo)題。

 

　　UI設(shè)計(jì)中的第三個原則就是平衡原則，它是界面排版布局的首要原則，大到整個官網(wǎng)，小到一張圖文，都需要我們對頁面視覺平衡有很好節(jié)奏控制。為了避免左側(cè)行動點(diǎn)過多不平衡，設(shè)計(jì)師采用分享按鈕放置于頁面右側(cè)達(dá)到左右平衡

　　為了保持平衡，Pin在feed設(shè)計(jì)上，保持了頭像左視覺焦點(diǎn)，右側(cè)入口按鈕互相平衡

　　ebay為了避免信息過于偏平衡，設(shè)計(jì)師在列表設(shè)計(jì)時候采用加大右側(cè)信息間距以及顏色自重來保持平衡

　　嚴(yán)選在設(shè)計(jì)時候?yàn)榱吮３衷O(shè)計(jì)平衡在標(biāo)題上面兩側(cè)加上線條讓頁面更加舒適。
 

　　UI設(shè)計(jì)中的第四個原則就是相似原則，同樣的內(nèi)容用同樣的視覺表達(dá)方式，讓用戶更容易去理解，這也是設(shè)計(jì)中經(jīng)常運(yùn)用到的原則。

 

　　Fancy在頁面中所有和點(diǎn)擊相關(guān)的無論氣泡還我按鈕還是鏈接都采用品牌藍(lán)色作為行動。

 

　　Airbnb頁面中，只要是可以點(diǎn)擊的都是綠色文字

 

　　ebay的頁面中所有能操作的頁面，按鈕，圖標(biāo)，行動點(diǎn)全部采用藍(lán)色作為行動點(diǎn)

 

　　Facebook頁面中，能點(diǎn)擊的圖標(biāo)，文字，按鈕，都是灰藍(lán)色來協(xié)調(diào)統(tǒng)一。
 

　　UI設(shè)計(jì)中的第五個是簡單原則，簡單原則分好幾種，其中一個就是sketch中對齊產(chǎn)生小數(shù)點(diǎn)，尤其是位置，經(jīng)常我們執(zhí)行過程中不愛看圖層和大小，會導(dǎo)致位置的數(shù)值經(jīng)常出現(xiàn)小數(shù)點(diǎn)或者奇數(shù)，從而使整個界面元素的間距、位置都不夠規(guī)范。
 

　　數(shù)字簡單，很容易產(chǎn)生小數(shù)點(diǎn)，間距的小數(shù)點(diǎn)，從而會讓頁面不嚴(yán)謹(jǐn)，正確做法對齊每個像素， 位置

　　規(guī)則簡單：平面設(shè)計(jì)的經(jīng)驗(yàn)中，一個平面設(shè)計(jì)的字體種類不宜太多、對齊方式不宜太多，因?yàn)橐?guī)則太過繁瑣會讓設(shè)計(jì)變得復(fù)雜，甚至臃腫不堪。而界面設(shè)計(jì)也是一樣的，能用一個規(guī)則解決的問題，就盡量不要使用兩個。

　　間距規(guī)則簡單一致，復(fù)用。由于親密原則，我們知道上下間距(紅色高度) 一定大于內(nèi)容區(qū)間距(綠色高度)，但是為了規(guī)則的簡潔，內(nèi)容區(qū)的所有間隔(綠色高度)可以采用同一個規(guī)則，而上下間距(紅色高度)也可以相同，這樣4個距離，我們僅僅只用了2個規(guī)則就解決了問題，F(xiàn)acebook為了保持頁面關(guān)系簡潔，間距都采用一個規(guī)則解決，并且不失美感。

 

　　4個間距規(guī)則，繁瑣缺乏統(tǒng)一

 

　　簡化規(guī)則，從4個調(diào)整為2個

　　樣式簡單，有一個趨勢就是“無線化分隔”。將分隔線去掉，這就一種樣式上的簡潔，這種技法分場景使用。

　　采用簡潔的分隔樣式，這樣的排版方法使整個頁面看著輕量，干凈，大氣，更加突出內(nèi)容，甚至能夠增加用戶的欣賞時間。

　　起伏邊緣簡單，起伏邊緣是一段文字的邊緣。當(dāng)視線從行尾跳至下一行首時，大腦最好要能判斷出下一次跳躍的角度和距離把每次跳躍都想象成跑過跳板，如果間距保持一致，就會快很多。

 

　　在英文的段落排版中， 通常是左側(cè)對齊，而讓右側(cè)自然形成起伏邊(rag) eaby和谷歌做法保持左右邊緣對齊，方便閱讀，網(wǎng)易新聞也是采用左右兩側(cè)對齊，比較協(xié)調(diào)。

　　右側(cè)鋸齒嚴(yán)重，左右兩側(cè)對齊，減少鋸齒

　　右側(cè)鋸齒嚴(yán)重參差不齊

 

　　UI設(shè)計(jì)中的第六個就是封閉原則了，將兩個部分的內(nèi)容用線框封閉起來后，就可以更容易的區(qū)分二者了。在我們的移動端界面排版時，最常使用的封閉表現(xiàn)形式就是“卡片”，用來區(qū)分各部分獨(dú)立的信息。

 

　　同一組信息用卡片封閉

 

　　這張列表，由于間隔和顏色的原因，導(dǎo)致我們更傾向于縱向閱讀，這時候我們也可以使用封閉原則，將內(nèi)容封閉起來。用封閉原則，將內(nèi)容封閉起來(每隔一條信息使用深色背景)這樣，不僅可以讓我們傾向于橫向閱讀，而且可以更好的區(qū)分開每條獨(dú)立的信息內(nèi)容。

　　沒有人想被別人說：不會排版做什么UI設(shè)計(jì)師，作為一個UI設(shè)計(jì)師，專業(yè)設(shè)計(jì)技能必不可少，排版的重要性也是不言而喻的。大到頁面的整體布局，小到一個按鈕的位置，字體的顏色，都會影響到用戶體驗(yàn)，進(jìn)而決定UI設(shè)計(jì)師的設(shè)計(jì)作品的成敗。