可變字體在響應(yīng)式網(wǎng)頁設(shè)計(jì)中的應(yīng)用

隨著互聯(lián)網(wǎng)信息技術(shù)與電子工業(yè)技術(shù)的發(fā)展，屏媒成了人們?nèi)粘Ｉ钪蝎@取信息的重要媒介，網(wǎng)頁成了承載信息的主要單元。為了適應(yīng)各式各樣的電子終端，響應(yīng)式網(wǎng)頁設(shè)計(jì)可以根據(jù)用戶的行為和環(huán)境調(diào)整網(wǎng)頁頁面布局的功能。而OpenType可變字體技術(shù)，能夠?qū)崿F(xiàn)同一字體滿足不同需求的動(dòng)態(tài)變化，與響應(yīng)式網(wǎng)頁設(shè)計(jì)的思維具有共通之處。現(xiàn)旨在通過探討可變字體在響應(yīng)式網(wǎng)頁設(shè)計(jì)中的應(yīng)用，思考如何讓網(wǎng)頁設(shè)計(jì)適應(yīng)日漸復(fù)雜的信息傳播環(huán)境，為用戶提供良好的閱讀體驗(yàn)。

中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）在京發(fā)布了第51次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》。該《報(bào)告》顯示，截至2022年12月，我國網(wǎng)民規(guī)模為10.67億，互聯(lián)網(wǎng)普及率達(dá)75.6%，我國網(wǎng)民人均每周上網(wǎng)時(shí)長為26.7個(gè)小時(shí)，這表明網(wǎng)頁已經(jīng)成為人們獲取信息的重要渠道。面對(duì)人們復(fù)雜的信息需求，網(wǎng)頁設(shè)計(jì)也在隨著時(shí)代進(jìn)步而不斷發(fā)展。響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive Web Design）是伊?！ゑR卡特（Ethan Marcotte）在2010年提出的網(wǎng)頁設(shè)計(jì)概念，其秉持著“一次設(shè)計(jì)，普遍適用”的原則，提出了網(wǎng)頁的內(nèi)容布局應(yīng)根據(jù)用戶狀態(tài)及屏幕尺寸靈活變化的方法。這種網(wǎng)頁設(shè)計(jì)的方法能夠讓網(wǎng)頁的內(nèi)容適應(yīng)日漸多樣化的終端設(shè)備，實(shí)現(xiàn)信息的有效傳達(dá)，提升用戶體驗(yàn)感。在網(wǎng)頁信息傳達(dá)的過程中，文字作為信息傳達(dá)的重要載體，文本閱讀的易讀性是響應(yīng)式網(wǎng)頁設(shè)計(jì)需要著重考慮的問題。文本的字體與編排應(yīng)當(dāng)最大程度地適應(yīng)尺寸、分辨率不一的終端設(shè)備，使不同用戶獲得最佳的閱讀體驗(yàn)。

2016年，奧多比公司、蘋果公司、谷歌公司、微軟公司四巨頭發(fā)布了OpenType v1.8字體格式規(guī)范，宣告了可變字體時(shí)代的到來。可變字體使得字體設(shè)計(jì)者能夠?qū)⒓易遄煮w的多個(gè)字形儲(chǔ)存于單一的字體文件中，實(shí)現(xiàn)了字體形式的多樣化。這種變化既可以是靜態(tài)的，也可以是動(dòng)態(tài)的。在網(wǎng)頁應(yīng)用中，可變字體不僅能夠適應(yīng)響應(yīng)式網(wǎng)頁設(shè)計(jì)，實(shí)現(xiàn)隨著用戶行為與屏幕尺寸變化而變化，更能以其動(dòng)態(tài)性與可交互性特征，增強(qiáng)網(wǎng)頁閱讀的沉浸感。本文試圖通過探討可變字體在響應(yīng)式網(wǎng)頁設(shè)計(jì)中應(yīng)用的可能性，為未來網(wǎng)頁設(shè)計(jì)的發(fā)展提供新的理論基礎(chǔ)。

不同終端網(wǎng)頁的文本自適應(yīng)

隨著時(shí)代的發(fā)展，屏幕媒介的種類日漸多樣化。從大到小，從高分辨率到低分辨率，各式各樣的屏幕媒介出現(xiàn)在人們的日常生活中。小到智能手表，大到城市LED廣告屏，網(wǎng)頁內(nèi)容不斷地適應(yīng)著不同的終端設(shè)備。自伊桑·馬卡特提出響應(yīng)式網(wǎng)頁設(shè)計(jì)的概念以來，國內(nèi)外學(xué)者對(duì)此概念進(jìn)行了專門的研究，推動(dòng)響應(yīng)式網(wǎng)頁設(shè)計(jì)從概念走向現(xiàn)實(shí)。響應(yīng)式網(wǎng)頁設(shè)計(jì)的觀念打破了實(shí)體終端設(shè)備對(duì)網(wǎng)頁的限制，可以更好地面對(duì)未來復(fù)雜數(shù)字環(huán)境。國內(nèi)越來越多的熱門網(wǎng)站也開始應(yīng)用響應(yīng)式網(wǎng)頁設(shè)計(jì)，如故宮博物院官網(wǎng)、騰訊官網(wǎng)、新浪官網(wǎng)等。而可變字體能夠更好地適配響應(yīng)式網(wǎng)頁設(shè)計(jì)。

響應(yīng)式網(wǎng)頁設(shè)計(jì)中最常見的影響因素是空間的可用性。當(dāng)網(wǎng)頁的空間布局受限時(shí)，內(nèi)容的呈現(xiàn)必須要進(jìn)行相應(yīng)的優(yōu)化；在文本排版方面，為了最大程度地利用有限的空間，并確保文本的易讀性，網(wǎng)頁文本的行長通常會(huì)相應(yīng)縮短，頁面留白被最小化，元素之間的大小對(duì)比也被減弱?；诖?，字體的細(xì)微優(yōu)化能顯著提升文本的易讀性。其中，優(yōu)化字體空間比例最顯著的方法是利用可變字體中的寬度可變軸。字體的寬度變化能夠允許每行包含更多的字符，也能使其更加適應(yīng)行寬。對(duì)可變軸參數(shù)進(jìn)行細(xì)微調(diào)節(jié)，可以把握文本易讀性與空間利用率的最佳平衡點(diǎn)。Dalton Maag字廠的Aktiv Grotesk可變字體項(xiàng)目的展示網(wǎng)頁運(yùn)用了字寬可變的特性，實(shí)現(xiàn)了網(wǎng)頁寬度變化時(shí)字體寬度的無極變化，在最大程度上保證了文本的易讀性，如圖1。

終端設(shè)備的分辨率也是影響文本閱讀效果的重要因素。例如高對(duì)比度的襯線體，如Didot、Garamond在高分辨率設(shè)備上也許能夠得到較好的呈現(xiàn)，但是在低分辨率的設(shè)備上襯線體較細(xì)部分的視覺效果不佳。為了使高低不同分辨率設(shè)備上文本的顯示效果最優(yōu)，可以通過可變字體光學(xué)尺寸的可變軸，動(dòng)態(tài)改變文本的對(duì)比度。如此在高分辨率設(shè)備上，可以以更豐富的字體細(xì)節(jié)實(shí)現(xiàn)高清的閱讀效果；而在低分辨率的設(shè)備上，文本則需要盡可能低的筆觸對(duì)比度，避免字體失真影響閱讀效果。

用戶畫像與網(wǎng)頁字體的響應(yīng)式變化

在“體驗(yàn)至上”的時(shí)代，應(yīng)加強(qiáng)可變字體與網(wǎng)頁用戶畫像的緊密結(jié)合。面對(duì)不同的用戶，可變字體應(yīng)當(dāng)發(fā)揮其“可變”屬性，根據(jù)不同用戶的需求，發(fā)揮不同的功能，達(dá)到不同的視覺效果。

可變字體的核心是參數(shù)化的設(shè)計(jì)思維。參數(shù)化意味著內(nèi)容和形式會(huì)根據(jù)“變量”的變化而變化，從而使得根據(jù)用戶需求實(shí)現(xiàn)響應(yīng)式網(wǎng)頁成為可能。響應(yīng)式網(wǎng)頁能夠通過大數(shù)據(jù)，根據(jù)用戶特征，自動(dòng)調(diào)整為適合其閱讀瀏覽的版面。

兒童、成年人與老年人的生活習(xí)慣與生理結(jié)構(gòu)特征均有所不同，因此其閱讀的習(xí)慣與目的也有很大區(qū)別。一方面，兒童對(duì)新鮮有趣的事物充滿好奇，因此在版面視覺與交互控件方面，擬人化、擬物化的處理能夠更好地吸引兒童與文本進(jìn)行“對(duì)話”，打開兒童的內(nèi)心世界，提高其深度閱讀的能力。另一方面，兒童對(duì)文本的識(shí)別能力較弱，因此文本的字體、字間距、行距等設(shè)計(jì)應(yīng)充分考慮兒童閱讀的需求，例如閱讀字號(hào)相對(duì)更大，字間距與行距較為疏朗等。兒童閱讀的文字以標(biāo)準(zhǔn)方形字為佳，文字適當(dāng)以圓角處理，表現(xiàn)出柔和的視覺效果。

成年人對(duì)閱讀的效率有很高的要求，因此文本的設(shè)計(jì)應(yīng)當(dāng)盡可能幫助其提高閱讀效率，加快閱讀速度。文本過大、行距過寬會(huì)使得同一頁面承載內(nèi)容過少，導(dǎo)致其閱讀效率降低；而文本過緊、行距過窄又會(huì)使得閱讀速度降低。而可變字體的應(yīng)用可以根據(jù)使用者的需求，通過字體、字重、字號(hào)、字距等的變化來動(dòng)態(tài)改變網(wǎng)頁的信息層級(jí)，讓人們?cè)陂喿x的過程中更加輕松愉悅。

而對(duì)于老年人而言，生理機(jī)能的衰退使得其接收信息的能力變?nèi)酢＞W(wǎng)頁文本應(yīng)當(dāng)以無障礙閱讀為出發(fā)點(diǎn)，簡單明了地呈現(xiàn)出最重要的信息，使老年人能夠更輕松地閱讀與理解網(wǎng)頁信息。針對(duì)老年群體，網(wǎng)頁的交互行為需要更加簡潔與明晰，復(fù)雜的變化與操作會(huì)阻礙老年人對(duì)網(wǎng)絡(luò)的接觸與了解。

用戶行為與網(wǎng)頁字體的交互式變化

網(wǎng)頁閱讀是一種交互式閱讀。在PC端，其是光標(biāo)與頁面的交互；在移動(dòng)端，其是手指與屏幕的交互。交互行為需要相應(yīng)的視覺反饋，而可變字體為文本的視覺反饋提供了更多的可能性?？勺冏煮w允許文本在風(fēng)格、變體之間流暢地混合，使其成為簡單、輕量的交互動(dòng)畫。理論上，任何輸入都可以影響可變字體的參數(shù)，如用戶的鼠標(biāo)位置、頁面滾動(dòng)、移動(dòng)傾斜傳感器等。

網(wǎng)頁中最普遍的交互形式是功能控件的交互行為。在常規(guī)控件的懸停交互中，文本的變化是開關(guān)式的，交互效果較為生硬。而可變字體能夠?qū)崿F(xiàn)懸停文本字體平滑的過渡效果。這種變化是連續(xù)的，而不只是在兩極之間的跳躍變化。除了常規(guī)的字重變化外，可變字體能夠?qū)崿F(xiàn)更加多元化的交互效果。這種復(fù)雜的交互視覺效果是傳統(tǒng)家族字體無法實(shí)現(xiàn)的。交互性是用戶體驗(yàn)設(shè)計(jì)的核心之一，可變字體為網(wǎng)頁交互控件的變化形式提供了豐富的選擇。在第一屆DEMO動(dòng)態(tài)藝術(shù)節(jié)的官方網(wǎng)站中，設(shè)計(jì)師以光標(biāo)與可變字體交互的形式，實(shí)現(xiàn)了生動(dòng)有趣的交互動(dòng)態(tài)效果。用戶用光標(biāo)移動(dòng)控制可變字體字形進(jìn)行向心式運(yùn)動(dòng)，闡釋了動(dòng)態(tài)藝術(shù)節(jié)的主題特色，如圖2。

可變字體作為內(nèi)嵌式文本，除了能夠?qū)崿F(xiàn)功能交互控件的響應(yīng)式變化以外，還能夠與網(wǎng)頁的信息內(nèi)容進(jìn)行深度結(jié)合。通過可變字體表現(xiàn)內(nèi)容，既提升了用戶的閱讀體驗(yàn)，也增強(qiáng)了網(wǎng)頁內(nèi)容的傳播效果。因此，網(wǎng)頁設(shè)計(jì)應(yīng)將情感化的設(shè)計(jì)要素融入其中，使用戶更加理解內(nèi)容，從而吸引更多的用戶?？勺冏煮w讓文本情感化成為可能，這種變化不局限于傳統(tǒng)家族字體的變化范疇，而是能夠根據(jù)實(shí)際的情感化需求，將可變字體以各種動(dòng)態(tài)交互表現(xiàn)方式融入網(wǎng)頁版式的設(shè)計(jì)中。

作為外部條件，用戶所在的環(huán)境同樣對(duì)閱讀網(wǎng)頁文本有巨大的影響。為了提升用戶在不同光照環(huán)境下的閱讀體驗(yàn)，興起了黑暗模式。不同光照下屏幕的顯示效果不同，而文本也需要根據(jù)實(shí)際情況調(diào)整布局與字體。而可變字體則為這種隨著環(huán)境光照變化而調(diào)整字體的思路提供了可能。在深淺變化的背景上，通過參數(shù)化的設(shè)計(jì)自動(dòng)調(diào)整可變字體的字重屬性，使其具有更加廣泛的易讀性。不論是戶外的強(qiáng)光環(huán)境還是室內(nèi)的昏暗環(huán)境，可變字體都能夠智能化地作出響應(yīng)合理的視覺修正。如華為手機(jī)的品牌定制可變字體HarmonyOS Sans，其可以使文本內(nèi)容根據(jù)環(huán)境的光照情況實(shí)現(xiàn)最優(yōu)的版面細(xì)節(jié)調(diào)整，如圖3。

在跨媒介傳播時(shí)代，屏幕成為人們獲取信息的主要方式。技術(shù)變革帶來的字體設(shè)計(jì)創(chuàng)新在響應(yīng)式網(wǎng)頁設(shè)計(jì)中具有優(yōu)勢(shì)，可以增強(qiáng)信息傳播效果?？勺冏煮w對(duì)響應(yīng)式網(wǎng)頁設(shè)計(jì)的影響是多維的，在載體中介層面，可變字體能夠進(jìn)一步優(yōu)化不同終端網(wǎng)頁版式，以適應(yīng)不同大小、分辨率的設(shè)備；在用戶畫像層面，可變字體能夠使網(wǎng)頁設(shè)計(jì)秉持以人為本的理念，通過大數(shù)據(jù)分析手段，讓網(wǎng)頁的文本處理適應(yīng)不同類型的人群，實(shí)現(xiàn)因人制宜的效果；在用戶行為層面，可變字體可以突破傳統(tǒng)交互控件的限制，以情感化交互設(shè)計(jì)的方式引導(dǎo)用戶，根據(jù)用戶所處的環(huán)境實(shí)現(xiàn)文本的細(xì)節(jié)調(diào)整。基于可變字體的視角，探索響應(yīng)式網(wǎng)頁設(shè)計(jì)在未來的發(fā)展道路，是適應(yīng)數(shù)智時(shí)代的需求?？勺冏煮w作為時(shí)代的新生產(chǎn)物，在網(wǎng)頁中的應(yīng)用仍有諸多未知的可能性，急需學(xué)者與設(shè)計(jì)師進(jìn)行多角度的研究與更廣泛的實(shí)踐。

教育部高校學(xué)生司第二期供需對(duì)接就業(yè)育人項(xiàng)（項(xiàng)目編號(hào)20230110157）；浙江省教育廳一般科研項(xiàng)目資助，項(xiàng)目編號(hào)：Y202250382。