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

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

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

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

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

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

圖1 Aktiv Grotesk可變字體項目的展示網(wǎng)頁

（圖片來源：https://www.daltonmaag.com）

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

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

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

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

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

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

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

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

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

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

圖2 DEMO動態(tài)藝術(shù)節(jié)宣傳網(wǎng)頁

（圖片來源：https://studiodumbar.com/work/demo）

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

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

圖3 HarmonyOS Sans可變字體在深色模式中的響應(yīng)式調(diào)節(jié)

（圖片來源：https://www.hanyi.com.cn/custom-font）

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

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