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

　　新手UI設(shè)計(jì)師做設(shè)計(jì)工作很苦惱，為什么辛辛苦苦做出來(lái)的頁(yè)面沒(méi)有設(shè)計(jì)感?大多數(shù)情況下不是能力不行，而是對(duì)細(xì)節(jié)沒(méi)有掌控好，職場(chǎng)中可能還會(huì)被懟：不會(huì)排版做什么UI設(shè)計(jì)師，我們?cè)趺床拍茏岉?yè)面更具設(shè)計(jì)感呢?
 

　　UI設(shè)計(jì)中的第一個(gè)基礎(chǔ)原則就是親密原則，設(shè)計(jì)前對(duì)內(nèi)容進(jìn)行信息分層，屬于一個(gè)層級(jí)分為一組，有關(guān)聯(lián)的內(nèi)容會(huì)離的更近，這樣的間距規(guī)律還會(huì)讓我們清晰的區(qū)分開(kāi)每一條信息，不會(huì)導(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)容會(huì)離的更近，標(biāo)題和價(jià)格又分為2個(gè)模塊，其中價(jià)格優(yōu)惠之間信息屬于一個(gè)內(nèi)容，所以它們間距相對(duì)就比較小。

 

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

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

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

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

 

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

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

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

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

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

 

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

 

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

 

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

 

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

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

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

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

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

 

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

 

　　簡(jiǎn)化規(guī)則，從4個(gè)調(diào)整為2個(gè)

　　樣式簡(jiǎn)單，有一個(gè)趨勢(shì)就是“無(wú)線化分隔”。將分隔線去掉，這就一種樣式上的簡(jiǎn)潔，這種技法分場(chǎng)景使用。

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

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

 

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

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

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

 

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

 

　　同一組信息用卡片封閉

 

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

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