在UI設(shè)計(jì)中，界面排版同樣很重要，將有效的信息傳遞給用戶這才是用戶界面的功能，下面小千就給大家介紹五個(gè)能夠提升你的設(shè)計(jì)高級(jí)感的小技巧，學(xué)到就是賺到！
1、強(qiáng)化層次結(jié)構(gòu)來提升UI的清晰度
將必要的文本內(nèi)容集合起來，重新組織，有意識(shí)地梳理視覺層次結(jié)構(gòu)，要讓用戶能夠清晰地感知到內(nèi)容。對于信息層級(jí)，通常會(huì)按照標(biāo)題、副標(biāo)題、正文、引用說明等常見的文本元素構(gòu)成。
而清晰的文本層次結(jié)構(gòu)，是依托于符合文本本身所屬層次的響應(yīng)的樣式，這樣才能確保可讀性。大標(biāo)題應(yīng)當(dāng)突出，正文應(yīng)當(dāng)清晰明了，副標(biāo)題起到的是對標(biāo)題的輔助說明作用，所以應(yīng)當(dāng)適當(dāng)縮小，這樣一來，文本元素之前的大小關(guān)系，位置關(guān)系都更加清晰了。
一個(gè)經(jīng)驗(yàn)法則是，通過修改字號(hào)大小的加倍和減半來快速理清相互關(guān)系。比如，如標(biāo)題字使用了 32px，那么正文字體使用 16 px 來創(chuàng)建這個(gè)對比度。
在更加復(fù)雜多變的使用場景中，普通正文標(biāo)題使用正文的2倍字號(hào)，標(biāo)題中需要突出顯示話，那么可以使用正文的3倍字號(hào)，而在特別的專題或者需要著重強(qiáng)調(diào)說明的場景之下，使用正文的4倍字號(hào)來呈現(xiàn)。
2、有意識(shí)地創(chuàng)造具有呼吸感的排版
字間距、行高、行長是在進(jìn)行排版的時(shí)候，最常調(diào)整的屬性。缺少足夠的間距，可能會(huì)讓文本難以閱讀，但是間接過多，可能會(huì)讓用戶在閱讀的時(shí)候感到稀疏難受。
行高
在不同的地方，可能會(huì)使用不同的術(shù)語來表述「行高」的概念，比如 PS 當(dāng)中會(huì)使用「行距」來描述它，本質(zhì)上，它們描述的是同一個(gè)東西——兩行文本的垂直間距大小。
行高本身并不存在一個(gè)標(biāo)準(zhǔn)的數(shù)值，它通常取決于字體本身的特征以及設(shè)計(jì)需求。一般而言，很多設(shè)計(jì)當(dāng)中，傾向于將行高設(shè)置為字體高度的 1.5倍，在實(shí)際的設(shè)計(jì)當(dāng)中，會(huì)根據(jù)字體本身的設(shè)計(jì)特征和應(yīng)用場景（移動(dòng)端閱讀可能會(huì)適當(dāng)增加，智能手表這種使用場景上可能會(huì)設(shè)置得更高），進(jìn)行合理的調(diào)整。如果你的正文使用的是 16 號(hào)字體的話，那么這個(gè)規(guī)則可以直接拿來用——這是久經(jīng)驗(yàn)證的。
字間距
字間距指的是文本在橫向上的間距。很少有人會(huì)在橫向的字間距的設(shè)置上花費(fèi)太多的時(shí)間，但是它確實(shí)是會(huì)對閱讀產(chǎn)生影響的。在英文字體當(dāng)中，字間距通常會(huì)遵循下面的準(zhǔn)則：
使用大寫字母的時(shí)候，需要增加字間距
字號(hào)增加的時(shí)候，需要適當(dāng)減小字間距
增大字體粗細(xì)的時(shí)候，需要適當(dāng)減小字間距
行長
行長本質(zhì)上說的是文本段落的寬度，文本每行的長度。通常，文本的行長要控制得相對短一點(diǎn)，這樣易于閱讀。在大屏幕上，比如 1440px 寬度的筆記本電腦屏幕上，使用每行 60~80 字符的長度（中文通常控制在每行 35~42 個(gè)字之間），但是，如果在是移動(dòng)端的屏幕上，那么每行的字符數(shù)要縮短到 35~45 這個(gè)范疇（中文則可以控制在20~25個(gè)字即可）。
3、根據(jù)內(nèi)容來選取字體
在選取文本字體的時(shí)候，需要考慮到潛在讀者的體驗(yàn)。不同的字體能夠給界面和體驗(yàn)帶來截然不同的體驗(yàn)，字體的選擇能夠影響用戶對于界面的第一印象。
注：英文字體通常不會(huì)有很大的選擇空間，在這方面中日韓三國在文本字體上，存在的問題明顯會(huì)更多一些。不過在移動(dòng)端 APP 上，不少應(yīng)用可以選擇非系統(tǒng)默認(rèn)的第三方字體，而在網(wǎng)頁上，要實(shí)現(xiàn)起來會(huì)麻煩很多，所以通常只會(huì)調(diào)用本地的字體。
正確的字體選擇，能夠在信息和視覺兩個(gè)層面給用戶傳遞信息，錯(cuò)誤的選擇會(huì)導(dǎo)致誤解和混亂的結(jié)果。
4、使用同一字體家族
如果你在不同字體的搭配上，并沒有足夠豐富的經(jīng)驗(yàn)，那么使用同一字體族的字體來進(jìn)行設(shè)計(jì)，總是最為安全的選擇。通常，一個(gè)字體族是為一個(gè)明確的目標(biāo)來設(shè)計(jì)的。它們有著更為統(tǒng)一的、富有凝聚力的外觀，在設(shè)計(jì)使用過程中，會(huì)更加便捷。
使用字體族的另外一個(gè)好處在于，它可以更快適配不同文本元素在排版上的需求，你可以更快地通過調(diào)整字體大小、粗細(xì)、文字大小、色彩來制造相應(yīng)的對比，呈現(xiàn)不同的視覺效果。
另外，同一字體族當(dāng)中，通常會(huì)附帶有相應(yīng)的斜體、等寬字體等等，這可以應(yīng)對一些相對特殊的需求，而不用手工去修改。
5、盡可能使用左對齊來提高可讀性
在世界上絕大多數(shù)的國家和地區(qū)，所使用的文字排版都是從左到右的（比如阿拉伯語就是反過來的），閱讀順訊是自上而下的。這決定了左對齊是確?？勺x性的重要基準(zhǔn)。
左對齊給人的雙眼提供了一個(gè)掃讀時(shí)候的基準(zhǔn)位置，在大量、長時(shí)間閱讀的過程在，極大地減小了閱讀壓力——而居中對齊則明顯做不到這一點(diǎn)。
另外，還要額外注意一點(diǎn)，就是要避免在段落的最后一行只有一個(gè)字，單字成行在排版中叫「寡字」，這是需要避免的。
以上就是五個(gè)提升界面感的小技巧了，最后歡迎對UI設(shè)計(jì)感興趣的同學(xué)來到千鋒UI設(shè)計(jì)培訓(xùn)班參加我們的UI設(shè)計(jì)培訓(xùn)課程的學(xué)習(xí)，現(xiàn)在更有海量報(bào)名優(yōu)惠和全套UI設(shè)計(jì)學(xué)習(xí)資料可以領(lǐng)取，過了這村沒這店了哦。
京公網(wǎng)安備 11010802030320號(hào)