UI設(shè)計中如何更好的運用排版法則

　　排版在平面設(shè)計領(lǐng)域極為重要，它不只在海報、廣告中使用，在制作UI的作品集、UI界面設(shè)計、網(wǎng)頁設(shè)計、運營設(shè)計也要注重設(shè)計排版，今天由AAA教育郭老師給大家分享一些版式設(shè)計法則，通過這些法則來規(guī)范移動UI設(shè)計，并提升作品的精品感和品質(zhì)感。

 

　　視覺設(shè)計排版：
 

　　第一步，先把文字內(nèi)容做好排版;
 

　　第二步，思考場景設(shè)計與信息層級處理;
 

　　第三步，進行排版設(shè)計的布局;
 

　　第四步，最后做好色彩和細(xì)節(jié)的優(yōu)化，從整體出發(fā)到細(xì)節(jié)處理再回歸整體性的原則，做好包裝的設(shè)計展示。

 

　　一 格式塔原理在排版中的應(yīng)用

 

　　格式塔原理是 20 世紀(jì)早期的德國心理學(xué)家研究小組發(fā)現(xiàn)的人類視覺工作原理。人類視覺是整體性的，我們會對看到的事物自建結(jié)構(gòu)，并且在神經(jīng)系統(tǒng)層面上感知形狀，圖形和物體?！感螤?、區(qū)域」在德語中是 Gestalt，所以這些理論也就叫做視覺感知的格式塔原理。
 

　　格式塔原理的設(shè)計原則如下：
 

　　1. 鄰近性原則
 

　　物體之間的相對距離會影響我們認(rèn)知它們的關(guān)系。相互靠近的元素被認(rèn)為是一組，那些距離較遠(yuǎn)的則自動劃分為組外。整體看來，距離近的關(guān)聯(lián)性更緊密。
 

　　下面左圖中的圓相互之間在水平方向比垂直距離近，那樣我們看到了4排圓點，而右圖看成2列。

 

　　如何應(yīng)用于UI設(shè)計：
 

　　鄰近性原則，在網(wǎng)頁端或移動端的排版布局中有非常廣泛的應(yīng)用。設(shè)計師應(yīng)用此原則，調(diào)整距離或者用分割線等來分開不同設(shè)計模式的構(gòu)建。此原理應(yīng)用在設(shè)計中，界面層級好，視覺清晰。
 

　　按照原理，我們會將內(nèi)容相似的元素位置放置得更接近，在 UI 設(shè)計中的卡片化設(shè)計，列表組合等信息整合設(shè)計都會應(yīng)用到此原理。
 

　　并且不同內(nèi)容之間我們使用分割線，留白，卡片區(qū)分等方式來使不同的內(nèi)容區(qū)分更為明顯。

 

　　2. 相似性原則
 

　　格式塔原理中的相似性通常和鄰近性原則一起運用在產(chǎn)品設(shè)計中。它指出了影響我們感知分組的另外一個原則：有共同視覺元素的物體看起來更有關(guān)聯(lián)性。我們傾向于將看起來相似的對象視為一組或者一個模式，并且將它們與特定含義或者功能聯(lián)系在一起。
 

　　如何應(yīng)用于UI設(shè)計：
 

　　利用顏色，形狀，大小，方向，以及紋理等視覺元素，組成相近的樣式。UI 設(shè)計規(guī)范中的控件組合成的組件，大部分都會使用到相似性原則，統(tǒng)一視覺樣式，來表達(dá)統(tǒng)一的功能性。

 

　　3. 封閉性
 

　　人的眼睛在觀看時，大腦并不是在一開始就區(qū)分各個單一的組成部分，而是將各個部分組合起來，使之成為一個更容易理解的統(tǒng)一體。
 

　　這個統(tǒng)一體是我們?nèi)粘Ｉ钪谐Ｒ姷男蜗?，如正方形、圓形、三角形等，讓用戶容易理解。

 

　　如何應(yīng)用于UI設(shè)計：
 

　　這個原則也非常適用于圖形用戶界面的圖標(biāo)設(shè)計或界面設(shè)計中

 

　　4. 連續(xù)性原則
 

　　人的視覺具備一種運動的慣性，會追隨一個方向的延伸，以便把元素連接在一起成為一個整體。下圖是兩個交叉的圓弧軌跡，人們往往傾向于使視覺流跟隨著相同顏色的軌跡，而不會被干擾，我們能夠感知這是兩條弧線。
 

　　如何應(yīng)用于UI設(shè)計：
 

　　連續(xù)性目前在 app 產(chǎn)品中應(yīng)用非常廣泛。比如在電商產(chǎn)品中 banner 區(qū)域的左右滑動交互模塊，滑動組件和進度條展示。
 

　　主要應(yīng)用范圍如下：
 

　　1 導(dǎo)航欄中的連續(xù)性設(shè)計
 

　　2 卡片模塊中的連續(xù)性設(shè)計
 

　　3 模塊的連續(xù)性設(shè)計

 

　　5. 主體/背景
 

　　我們的大腦將視覺區(qū)域分為主體和背景 2 個部分。這個特征有利于我們對重要信息和次要信息的感知。
 

　　主體和背景的區(qū)別可以從以下兩個方面來控制：
 

　　1 場景大?。何覀儍A向于將處于大場景中的中間小區(qū)域部分視為主體，而大場景視為背景;
 

　　2 層級關(guān)系：如果在同一個平面中，我們傾向于將處于視覺第一層級的物體視為主體。
 

　　如何應(yīng)用于UI設(shè)計：
 

　　此原則可以幫助設(shè)計師在設(shè)計界面的過程中抓住用戶注意力，并且讓用戶優(yōu)先看到我們想讓他們看到的事物。
 

　　比如重要信息的彈窗提示，以及弱化背景從而突出內(nèi)容等界面中都有運用到此原則。

 

　　二 移動端版式設(shè)計原則

 

　　版式設(shè)計，在有限的版面空間中，將版面構(gòu)成元素，如：文字、圖片、線條和顏色等，根據(jù)特定的內(nèi)容，進行組合排列，并運用造型要素及形式原則，把構(gòu)思與計劃以視覺的形式美感，表達(dá)出來。
 

　　一個優(yōu)秀的排版要考慮到用戶的閱讀習(xí)慣和設(shè)計美感，幫助用戶區(qū)分重點、提升可讀性。遵循平面設(shè)計原理，排版中的對齊、對比、重復(fù)、親密性 4 大原則。
 

　　對齊原則
 

　　對齊是版式設(shè)計的最重要的原則之一，對齊可以建立一種整齊的外觀，帶給用戶舒服的一致性的瀏覽體驗。
 

　　基于從上到下，從左到右的閱讀習(xí)慣，應(yīng)用在界面設(shè)計中，一般是左對齊、居中對齊和右對齊，同時同一豎線上的元素，要保持居中對齊。

 

　　對比原則
 

　　做排版設(shè)計時，重點的元素通過尺寸、色彩、造型等引起用戶關(guān)注，這樣重點內(nèi)容，才會突出出來。設(shè)計要有輕重緩急之分，不要讓用戶去找重點，Don't let users think，讓用戶順利的接受重要信息。
 

　　例如：圖片大小的對比，讓用戶感受到最重要的信息。

 

　　親密性原則
 

　　根據(jù)親密的原則來組織復(fù)雜的信息，將彼此相關(guān)的同一類的元素靠近，同時把遠(yuǎn)離不相關(guān)的元素，這樣就可以大大提高界面設(shè)計的可讀性。

 

　　三 作品集排版法則

 

　　設(shè)計排版法則：
 

　　1 左對齊
 

　　在頁面排版時，將你的文字設(shè)置為左對齊。為什么?在西方文化中，人們的閱讀習(xí)慣是從上到下，從左到右的。
 

　　通過左對齊文字，眼睛能夠更容易地找到邊緣，更易于閱讀。避免因為這個原因縮進段落的第一行。
 

　　2 使用一種字體
 

　　優(yōu)秀的設(shè)計師在排版設(shè)計中能夠完美使用兩種字體，是因為他們能夠把握和了解所選的字體的類型，并保證他們是互補的。但是一般情況下，避免使用兩種相同類型的字體。例如，不要使用兩種以上的非襯線體、粗襯體或手寫體。
 

　　使用一種字體，直到你能夠很好的運用和掌握它。如：蘋方字體或Dinner字體。
 

　　3 跳過一個字重
 

　　在改變字體權(quán)重時，從細(xì)體到粗體，或者從中粗體到超粗體。大師級的設(shè)計關(guān)鍵就是對比。
 

　　粗體和細(xì)體對比的標(biāo)題字體組合，獲得最大的對比。
 

　　4 雙倍字號尺寸
 

　　當(dāng)改變字號大小時，一個好的經(jīng)驗法則是，你使用的字號大小是現(xiàn)有字號的兩倍或一半。
 

　　5 對齊到一個軸線
 

　　沿著一個主坐標(biāo)構(gòu)建你的字體排版，并將字體元素對齊到網(wǎng)絡(luò)線。無論文字類型或大小如何，在垂直軸上，字體對齊軸線的左邊緣。
 

　　在水平軸上，尋找最佳水平元素，或?qū)R文字的大寫字母字高，或?qū)R文字基線即可。
 

　　6 使用條框分類
 

　　使用形狀/線條將相關(guān)的內(nèi)容信息塊進行分類編組。這樣會使不同的元素排列很有順序。
 

　　7 注意間距
 

　　段落排版中到處都是間距。如果文字左對齊。右側(cè)會出現(xiàn)文字的參差不齊、起伏留白等。避免在段落的最后一行出現(xiàn)單字成行的情況，切勿使用強制對齊設(shè)置。注意段落右側(cè)的起伏形狀，在一個句子中標(biāo)點符號之間使用單個空格，以避免形狀和角度不美觀。
 

　　間距的重要性。越是間距接近的元素，讀者就會假設(shè)在不同的信息塊之間存在這一種關(guān)系。
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。