百度MUX設(shè)計(jì):優(yōu)化閱讀體驗(yàn)可尋的三三兩兩
此文僅僅針對(duì)文字這一視覺設(shè)計(jì)中的單一要素,探討一些關(guān)于優(yōu)化閱讀體驗(yàn)方面可以拿出來(lái)說(shuō)一說(shuō)的方法和經(jīng)驗(yàn)。
限制字體選擇增加簡(jiǎn)潔感
首先解釋兩個(gè)概念無(wú)襯線體和襯線。無(wú)襯線體(Sans-serif)專指西文中沒有襯線的字體,與漢字字體中的黑體相對(duì)應(yīng)。與襯線字體相反。該類字體通常是機(jī)械的和統(tǒng)一線條的,它們往往擁有相同的曲率,筆直的線條,銳利的轉(zhuǎn)角。在字體排印學(xué)里,襯線指的是字母結(jié)構(gòu)筆畫之外的裝飾性筆畫。有襯線的字體叫襯線體(serif);沒有襯線的字體,則叫做無(wú)襯線體(sans-serif)。
當(dāng)每個(gè)文字都能容易識(shí)別,不需要太多猜測(cè)時(shí),這個(gè)字體就是具有可讀性的。紙媒通常使用的字體是襯線體,讀起來(lái)視覺感受會(huì)更舒適,但是在移動(dòng)設(shè)備數(shù)字環(huán)境下就不一定了。長(zhǎng)文本情況下字體聚合密集,襯線裝飾在像素點(diǎn)陣的排布中顯示的并不均勻,邊角的裝飾會(huì)讓字體有破邊的感覺,因此這種情況需要選擇無(wú)襯線體,讓文字的邊緣看起來(lái)更清晰而易于閱讀。
在選擇可讀性字體的前提下,我們又通常會(huì)對(duì)頁(yè)面包括功能相同的文字內(nèi)容分組和設(shè)定相同的字體,但是分組區(qū)別對(duì)待過多就會(huì)使原本易于閱讀的內(nèi)容造成視覺干擾,影響文字本身傳遞的信息內(nèi)容。因此限定字體同時(shí)出現(xiàn)的數(shù)量選擇,可以讓頁(yè)面在易度的基礎(chǔ)上更簡(jiǎn)潔。
當(dāng)然對(duì)與非長(zhǎng)文本的內(nèi)容,比如海報(bào)或者banner宣傳中,為了凸現(xiàn)風(fēng)格、夸張效果達(dá)到吸引用戶的眼球的目的,需要采用不同文字的選擇,甚至重新設(shè)計(jì)字體。易讀性的優(yōu)先級(jí)會(huì)在這里有所調(diào)整。
#p#
正確應(yīng)用顏色和字號(hào)有效劃分信息層級(jí)
我們對(duì)不同內(nèi)容的文字進(jìn)行區(qū)分時(shí),通常做法是改變文字顏色、改變字體、改變排布和分行等。其中最易懂的就是改變字號(hào)和顏色,當(dāng)然文字顏色的改變也不是無(wú)規(guī)則的任意為之。
當(dāng)使用色彩時(shí),字體與背景間的充分對(duì)比是必須的,這樣才能創(chuàng)造出最佳的可讀性。如果色彩的明度和飽和度對(duì)比過弱,文字就很難看到。因?yàn)轭伾珜?dǎo)致閱讀體驗(yàn)變差的情況,例如黃色背景搭配白色文字、紅色背景搭配粉色文字等。掌握一些基礎(chǔ)的配色規(guī)則并且合理運(yùn)用,顏色也可以提高閱讀體驗(yàn)。
對(duì)于功能不同的內(nèi)容假如設(shè)定了相同的屬性,就會(huì)很難快速凸顯重點(diǎn)。而標(biāo)題和正文字號(hào)倘若區(qū)別對(duì)待就要有明顯差別,微弱的差別使人很難判斷兩者是否是不同的內(nèi)容。例如下圖左,正文14號(hào)字,標(biāo)題16號(hào)字,兩者差別不大,很難判斷有一個(gè)明確的區(qū)分。為了避免這種不徹底的處理方式,應(yīng)該將標(biāo)題突出,也就是字號(hào)增大,與內(nèi)容明確的區(qū)別開。
#p#
采用網(wǎng)格體系創(chuàng)造有序和諧的閱讀氛圍
柵格系統(tǒng)大家應(yīng)該都不陌生,其實(shí)柵格系統(tǒng)就是紙媒中常用的傳統(tǒng)意義上的網(wǎng)格體系。對(duì)于任何平臺(tái)的設(shè)計(jì)來(lái)說(shuō),網(wǎng)格體系的使用,可以讓信息呈現(xiàn)更加美觀易讀。
根據(jù)內(nèi)容的安排套嵌網(wǎng)格引導(dǎo)閱讀視線
變換規(guī)矩的套嵌形式讓頁(yè)面更富節(jié)奏感
網(wǎng)格體系為我們提供了一個(gè)基礎(chǔ)結(jié)構(gòu),文字依托有形或無(wú)形網(wǎng)格可以創(chuàng)造出超乎想像的空間格局。
#p#
改變依賴默認(rèn)值的習(xí)慣,去除不協(xié)調(diào)
已有字體都是以設(shè)計(jì)了該字體設(shè)計(jì)師所認(rèn)為的最美的形狀構(gòu)成的。但是在排版過程中,一定會(huì)存在覺得某個(gè)字或者符號(hào)不協(xié)調(diào)的情況。這個(gè)時(shí)候就需要變通的改善和解決。
以我們常用的一款綜藝體為例,上圖符號(hào)與換行文字默認(rèn)狀態(tài)并不是左對(duì)其的,通過調(diào)整間距或者更換符號(hào)字體來(lái)達(dá)到視覺的對(duì)齊或統(tǒng)一。
上述幾點(diǎn)只作為個(gè)人經(jīng)驗(yàn)的引子,舉一反三,實(shí)踐的過程中大家肯定也有自己的一套處理方法,熟練掌握并運(yùn)用好一定會(huì)讓你的設(shè)計(jì)更有條理,內(nèi)容呈現(xiàn)更加易懂,當(dāng)然最重要的就是讓我們的閱讀體驗(yàn)持續(xù)的優(yōu)化讓用戶受益。