前言

UI設(shè)計(jì)的核心是‘美學(xué)’，以前兩篇向大家介紹了如何提升審美能力和界面排版，本文將結(jié)合自己的工作經(jīng)驗(yàn)，向大家分享一些UI界面排版設(shè)計(jì)的技巧，希望能給想要提升排版能力的設(shè)計(jì)師帶來(lái)一些幫助與啟發(fā)。

 

為什么需要學(xué)習(xí)排版？

排版是每一個(gè)設(shè)計(jì)師都必須具備的能力，也是UI界面設(shè)計(jì)中最難的一部分。它以各種形式存在界面中，如：純文本排版、圖文排版等等。是設(shè)計(jì)師在做設(shè)計(jì)時(shí)接觸多的地方，卻也是初中級(jí)設(shè)計(jì)師忽視細(xì)節(jié)最多的地方。好的排版，能快速有效的將界面中的重要信息傳遞給用戶。因此希望能通過(guò)本文，能讓大家對(duì)排版有一個(gè)新的認(rèn)識(shí)。

 

目前運(yùn)動(dòng)端主要布局樣式有哪些？

 

關(guān)于排版設(shè)計(jì)，我總結(jié)歸納了6個(gè)設(shè)計(jì)技巧（還有許多技巧），當(dāng)然這些方法不是絕對(duì)，但是如果能融合貫通的將這些技巧運(yùn)用到排版設(shè)計(jì)中，對(duì)界面設(shè)計(jì)感將有很大的提升。

 

分別是：

選擇合適的字體

對(duì)齊原則

親密性原則

具備呼吸感的力量

合理運(yùn)用留白

對(duì)比的力量

 

選擇合適的字體

 

同的字體有不同的性格屬性，字體選擇對(duì)界面排版設(shè)計(jì)具有非常重要的作用。所以我們?cè)谧鲈O(shè)計(jì)時(shí)間時(shí)，首先需要考慮產(chǎn)品的的屬性，目標(biāo)用戶，不同的產(chǎn)品與人群適用于不同的字體。如黑體粗體字醒目突出，適用于畫(huà)面感強(qiáng)烈，突出強(qiáng)調(diào)信息的用途、細(xì)體字精致簡(jiǎn)潔，適用于女性行業(yè)、時(shí)尚、科技、餐飲等類型內(nèi)容；宋體、粗體字醒目突出，適用于畫(huà)面感強(qiáng)烈，突出強(qiáng)調(diào)信息的用途等。如下圖不同的產(chǎn)品屬性使用不同的字體。

最后提醒一下大家，在同一款A(yù)PP中，最好不要超過(guò)兩種字體。

 

對(duì)齊原則

 

在做界面設(shè)計(jì)時(shí)，需要保持界面上的所有元素都存在一種視覺(jué)聯(lián)系，而不是將元素隨意擺放在界面上。對(duì)齊會(huì)讓界面排版井然有序，閱讀起來(lái)會(huì)非常流暢。常用的對(duì)齊方式有：左對(duì)齊、居中對(duì)齊、右對(duì)齊。

 

我們做界面設(shè)計(jì)時(shí)，需要根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景去選擇合適的對(duì)齊方式，形成統(tǒng)一的視覺(jué)流。

 

 

親密性原則

 

親密性就是在設(shè)計(jì)時(shí)將相關(guān)的項(xiàng)組織在一起，這些相關(guān)的項(xiàng)可被看作成一體的，一組的。從而吸引讀者的目光，能夠順暢的理解我們所表達(dá)的意思。這樣的設(shè)計(jì)可使使頁(yè)面變得有條理、閱讀邏輯清晰、頁(yè)面留白變得有組織感。

在做設(shè)計(jì)時(shí)，我們只要充分理解界面中各元素之間的關(guān)系，就會(huì)合理性的去運(yùn)用它，掌握它。

 

 

具備呼吸感

 

字體行間距、行間距、行長(zhǎng)是我們進(jìn)行排版設(shè)計(jì)時(shí)，調(diào)節(jié)最頻繁的屬性。間距過(guò)短，會(huì)讓用戶難以閱，間距過(guò)長(zhǎng)、會(huì)讓用戶閱讀起來(lái)比較稀疏，只有創(chuàng)造具備呼吸感的文字排版、才會(huì)用戶閱讀起來(lái)保持愉悅的心情。

 

行間距：行間距本身沒(méi)有一個(gè)標(biāo)準(zhǔn)的數(shù)值，在設(shè)計(jì)時(shí)我們通常會(huì)根據(jù)字體的屬性與運(yùn)用場(chǎng)景去設(shè)置（一般而言，很多時(shí)候我們?cè)谠O(shè)計(jì)時(shí)，通常將行間距設(shè)置為字體的1.5倍），增加文字的呼吸感。

字間距：字間距指的是文本在橫向上的間距。雖然很少有設(shè)計(jì)師在字間距花費(fèi)較多的時(shí)間，但在文本的閱讀上起到非常大的作用。如字間距過(guò)于擁擠時(shí)，將會(huì)降低文本的可讀性。

 

行長(zhǎng)：行長(zhǎng)是指文本每行的長(zhǎng)度，在不同的平臺(tái)，需要保持不同的文本長(zhǎng)度。單行文字如果包含的字?jǐn)?shù)太多，將會(huì)導(dǎo)致用戶閱讀起來(lái)感到疲憊。合理的行長(zhǎng)會(huì)使用戶在閱讀時(shí)很順暢，反之則會(huì)使閱讀成為一種負(fù)擔(dān)。

 

 

合理運(yùn)用留白

 

留白是設(shè)計(jì)師老生常談的事情，存在頁(yè)面布局中的各個(gè)元素之間。留白能夠突出頁(yè)面中的主要元素，制造頁(yè)面的視覺(jué)焦點(diǎn)，吸引用戶的注意，提升頁(yè)面的體驗(yàn)感。

留白能夠使得元素之間的關(guān)系更為清晰，更容易被感知，增加頁(yè)面的呼吸感，顯得更為和諧。

 

 

對(duì)比的力量

 

對(duì)比的目的是營(yíng)造視覺(jué)感官上的變化，避免頁(yè)面排版單調(diào)，增強(qiáng)視覺(jué)效果。合理運(yùn)用對(duì)比原則，能在很大程度上提升頁(yè)面中文字排版的層次感與設(shè)計(jì)感，還可以組織信息、清晰層級(jí)、在頁(yè)面上指引讀者，并且制造視覺(jué)焦點(diǎn)。

大小對(duì)比：視覺(jué)元素體量之間的差異，能夠制作視覺(jué)沖突的效果，使頁(yè)面的視覺(jué)層次更為清晰，體量越大則層級(jí)越大，也就越突出。

 

 

顏色對(duì)比：顏色在排版設(shè)計(jì)中起著很大的作用，能起到點(diǎn)睛之筆。合理運(yùn)用色彩對(duì)比可以有效地突出重點(diǎn)、區(qū)分信息，還可以起到裝飾畫(huà)面的作用。

 

此外常見(jiàn)的對(duì)比有：材質(zhì)對(duì)比、形態(tài)對(duì)比、空間對(duì)比等等。

 

結(jié)語(yǔ)

 

排版是數(shù)字時(shí)代每個(gè)設(shè)計(jì)師都需要學(xué)習(xí)和掌握的重要技能，無(wú)論你的設(shè)計(jì)項(xiàng)目是什么樣的，這些基本的規(guī)則總能給你的設(shè)計(jì)帶來(lái)更好的效果。不過(guò)這些排版技巧都還只是非?；A(chǔ)的部分，在實(shí)際的設(shè)計(jì)當(dāng)中，還會(huì)涉及到很多更加復(fù)雜的排版布局——但是這些基礎(chǔ)，始終是最重要的事情。

作者：三只石頭聊設(shè)計(jì)
鏈接：https://www.zcool.com.cn/article/ZMTE0NTA0OA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(m.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。