用戶界面設(shè)計中字體應(yīng)用的交互屬性研究

摘? 要：在信息時代驅(qū)使下用戶界面中的字體設(shè)計突破維度的局限，實(shí)現(xiàn)多維度表現(xiàn)，由靜態(tài)走向了動態(tài)。用戶界面設(shè)計中字體應(yīng)用的交互屬性研究是在信息設(shè)計語境下探討用戶界面中文字的交互屬性的表現(xiàn)形式，分析文字交互構(gòu)成因素，指出字體作為用戶界面的基礎(chǔ)元素，其交互屬性表現(xiàn)為靜態(tài)交互與動態(tài)交互相結(jié)合的交互形式。最后提出未來字體設(shè)計發(fā)展趨勢為虛擬性形成的作品，具有沉浸式的強(qiáng)互動交互屬性。

關(guān)鍵詞：用戶界面;字體設(shè)計;交互屬性;動態(tài)字體

5G互聯(lián)網(wǎng)時代，我們獲取信息的渠道和方式都不可避免的要通過用戶界面這個媒介來完成。目前關(guān)于用戶界面的各類研究收獲頗豐，但是在界面設(shè)計中，字體設(shè)計被忽略了，對于用戶界面設(shè)計中字體設(shè)計的研究還停留在淺層次的規(guī)范上。因?yàn)槲覀儽桓黝愐?guī)范、尤其是蘋果和安卓系統(tǒng)默認(rèn)的那些字體給禁錮了。由于受信息技術(shù)發(fā)展的影響，信息傳播的方式，由單一視覺媒介渠道向跨界多渠道展開，從二維向多維、由靜態(tài)向動態(tài)、從被動接受到主動參與的互動性轉(zhuǎn)變，那么，字體即界面設(shè)計的基石，最重要的信息視覺符號、信息的重要組成部分、信息傳播過程中最準(zhǔn)確、最有效的途徑，也應(yīng)該具備信息傳播過程中的各類現(xiàn)象及屬性。在以信息設(shè)計為主導(dǎo)的UI中，字體設(shè)計絕對不是靜態(tài)表現(xiàn)，而是具有交互屬性的互動形式。用戶通過一系列的交互行為與交互對象的文字互動時，可以獲得文字的交互反饋，這樣完成了用戶與文字的交互過程。在這個簡單的過程中，研究文字的交互反饋則是本文的主要內(nèi)容[1]。

一、字體設(shè)計的交互屬性概述

（一）用戶界面中閱讀文本的交互設(shè)計

在屏顯模式下我們獲取信息主要是通過閱讀完成。信息傳播過程中每一個文字、字母、數(shù)字都是至關(guān)重要。文字作為界面設(shè)計的一個元素，字體的選擇非常重要，它會對閱讀體驗(yàn)產(chǎn)生重要影響。為了提升閱讀交互體驗(yàn)，用戶界面的字體設(shè)計遵循著基本規(guī)則和技巧。

界面設(shè)計中字體的辨識度是需要考慮的首要因素，字體要清晰、可辨認(rèn)。在閱讀的過程中字體的可讀性和辨識度依靠字體的整體輪廓決定，這就是被稱為“伯馬形（Bouma shape）”理論。但是在屏顯模式下更應(yīng)該重視字形本身以及更多細(xì)微層面的細(xì)節(jié)設(shè)計。比如針對拉丁字母的大小寫最適合的閱讀范圍，維多利亞大學(xué)心理學(xué)院進(jìn)行了一次實(shí)證研究，給出的結(jié)論是字母的辨識度取決于線條的終止方式。還有研究發(fā)現(xiàn)，為了增加文字的辨識度可以把細(xì)長的字拉寬一些，同時對X字符高度的字母可以改變其升部或者降部。比如之前被推崇的Helvetica字體，對UI設(shè)計來講并不是最好的體驗(yàn)，大寫字母I和小寫的l字母辨識度不高，幾乎一摸一樣，如MILLILITER（milliliter）、ILLITERATE（illiterate）大寫后辨認(rèn)上非常困難。這樣的效果在很多無襯線字體上都有出現(xiàn)，當(dāng)然，Helvetica字體本身就是針對傳統(tǒng)印刷而開發(fā)的字體。后面為了規(guī)避這樣的體驗(yàn)，開發(fā)了為屏幕而生的San Francisco字體和今天主流的PingFang SC，尤其是后者有著更寬的字距，文本更容易辨認(rèn)。由此，在字體設(shè)計的時候更應(yīng)該把精力放到可讀性和辨識度這一區(qū)域上。在紙本閱讀下，為了提升效率，通常會選擇性跳讀也就是掃視，忽略掉一些功能輔助文字。但是在用戶界面上，由于字的獨(dú)立以及控件功能性，跳讀掃視并不適合屏顯模式。具體到字形上，筆畫要平順，過度裝飾筆畫讓識別變得困難。字符要有寬比例，字符的寬度比值越大，越能帶來清晰的用戶體驗(yàn)。字間距的平衡、字符周圍的空間非常重要，優(yōu)秀的UI字體應(yīng)該給字與字之間留有充分的呼吸空間，建立起穩(wěn)定的節(jié)奏。相距太近讀起來費(fèi)勁，間距過大則打破連貫性。當(dāng)然最好選擇的字體支持OpenType功能，這樣具有較好的兼容性，滿足不同語言和特殊字符，在體驗(yàn)上帶來視覺自由[2]。

（二）規(guī)范字體下的交互

規(guī)范也是交互的一種體現(xiàn)。在最近新發(fā)布的非開源iOS15系統(tǒng)中，較前版本內(nèi)容更新比較少，尤其是對文字規(guī)范幾乎還是沿用之前的規(guī)定。文字的規(guī)范讓設(shè)計師了解系統(tǒng)設(shè)計思路，在后期文字應(yīng)用部分能夠事半功倍，清晰明了地傳播信息的同時，做好各類交互及兼容性，滿足響應(yīng)式設(shè)計。

在GUI下文字涉及到的內(nèi)容包括：大標(biāo)題、一級標(biāo)題、二級標(biāo)題、三級標(biāo)題、內(nèi)容提要、正文、插圖編號、副標(biāo)題、腳注、一級說明文字、二級說明文字等11個部分。對文本尺寸還做了響應(yīng)規(guī)范，以供用戶選擇自己喜歡的文本大小，實(shí)現(xiàn)最佳交互及體驗(yàn)，這也是在規(guī)范下的一種靈活互動。目前的尺寸有：很小尺寸、小尺寸、中尺寸、大尺寸（默認(rèn)）、非常大尺寸、特別大尺寸，最后除了以上6個標(biāo)準(zhǔn)的動態(tài)類型大小，還為特殊用戶提供5個更大的類型，分別從AX1到AX5，比如老年人可以設(shè)置符合自己閱讀習(xí)慣的文本大尺寸。

以大尺寸（默認(rèn)）各類參數(shù)做解釋（如圖1），在iOS中文用的是蘋方/Pingfang SC字體，設(shè)計中標(biāo)題的字體大小是32px，加粗居中。正文字就要小一些，字體大小為17，不會加粗。輔助性字體一、二、三級標(biāo)題大小一般20-28。說明文字內(nèi)容提要一般不會小于22，最小腳注設(shè)置為13，再小就無法閱讀。但是，無論變得多大，所有的字號設(shè)置保持偶數(shù)倍，比如36px、66px，同時上下級內(nèi)容字號極差關(guān)系為2-4號。

當(dāng)然，為了獲得最佳交互，基于字體的平衡感，在規(guī)范當(dāng)中讓用戶實(shí)現(xiàn)自定義字體的輔助功能，如放大文本、加粗字體等。在閱讀體驗(yàn)上，內(nèi)容很重要，但并不是所有內(nèi)容信息都重要，用戶所關(guān)心的內(nèi)容才是最重要的，希望關(guān)注的部分能夠醒目放大，不是每一個字都大，這是在響應(yīng)文本大小的最佳方案。在APP上減少字體種類，避免支離破碎和凌亂，使界面更加精簡，最好考慮一種字體，在大小和變體上做選擇。對于信息的等級劃分依靠粗細(xì)體來區(qū)分重要信息和次要信息，字體顏色一般用深灰色和淺灰色，很少使用黑色。文字的規(guī)范在內(nèi)容上保持最優(yōu)的易讀性，為合理的版式設(shè)計提供引導(dǎo)，界面具有規(guī)劃性，視覺上整體，增加了界面的平衡感，操作起來流暢簡潔[3]。

二、用戶界面中字體設(shè)計的交互屬性分析

（一）文字的交互設(shè)計意義

從用戶參與性的角度來說，交互設(shè)計的目的之一是讓產(chǎn)品易用，讓人獲得愉悅感。交互設(shè)計必須了解目標(biāo)用戶，明白用戶的期望，熟悉用戶的各類行為，包括與產(chǎn)品交互時人機(jī)之間的行為。這一切都必須從“人”本身的心理和行為出發(fā)。最后還要掌握各種有效的交互方式，對其加以利用，提高人們的體驗(yàn)過程。

基于用戶體驗(yàn)以及符合當(dāng)下審美的角度，界面下的字體設(shè)計首先是輔助用戶完成各類操控及任務(wù)，不給體驗(yàn)上帶來麻煩。用戶的多樣化、應(yīng)用場景的豐富化，各種不同的媒介帶來不同的用戶體驗(yàn)，為了適應(yīng)這些變量，在UI字體設(shè)計及選擇上應(yīng)該具有較高的靈活度，字體定制化的出現(xiàn)支持盡可能多的使用場景，帶來良好用戶體驗(yàn)。這正是交互性在字體設(shè)計視覺空間的表現(xiàn)，增加了視覺變量和新鮮感，與用戶發(fā)生關(guān)系，誘發(fā)體驗(yàn)者產(chǎn)生觸發(fā)式的視覺聯(lián)想。比如界面設(shè)計中最簡單的提示文案如果利用好了會提高用戶的微感受。微感受帶給用戶對產(chǎn)品細(xì)節(jié)的感知，產(chǎn)品細(xì)節(jié)越極致帶給用戶更多沉浸式體驗(yàn)的好感。由此可見一個小小的提示文案都具備交互屬性，可以清晰地把產(chǎn)品理念傳達(dá)給用戶，讓用戶感到易用、快捷、方便、減少認(rèn)知成本。

（二）文字應(yīng)用的動態(tài)化表現(xiàn)

界面下各類信息傳播都存在時間維度和運(yùn)動維度，文字也受到時間和運(yùn)動軌跡的影響，呈現(xiàn)出獨(dú)特的視覺效果。界面下文字在視覺上存在變量，比如隨著影像內(nèi)容的改變文本也追隨節(jié)奏發(fā)生變化，文本與影像變化的時間線是匹配的，這是文字最基本的時間維度。具有互動性的彈幕文字也是時間的反映，文字由小到大、由靜止到運(yùn)動也是時間變化。界面下文字的運(yùn)動維度，體現(xiàn)在自定義的交互屬性上。通過觸控，對字體進(jìn)行設(shè)置獲得最佳閱讀體驗(yàn)感，字體形態(tài)上改變，字族上有了選擇，肌理、方向、大小、顏色都可以改變。界面下文本從規(guī)范下不變的視覺元素，變成可以設(shè)計的內(nèi)容。

界面下字體與視覺各類元素都動起來了，成為動效的關(guān)鍵幀，開始從二維到2.5維、三維立體。動態(tài)化字體被大量應(yīng)用到主圖標(biāo)、廣告頁、Banner條、控件按鈕等各組成部分。文件格式滿足各類播放平臺，體量小，采用無限循環(huán)的運(yùn)動規(guī)律進(jìn)行播放傳播（如圖2）。

除了圖形化文字的動效屬性，界面設(shè)計下大篇幅的段落文字，在編排設(shè)計上也依靠動態(tài)化提高信息轉(zhuǎn)化率，讓用戶將注意力放在閱讀文字上，文字變得越來越主動了[4]。

三、字體設(shè)計中交互性的表現(xiàn)形式

（一）文字設(shè)計的交互思路

隨著屏顯技術(shù)的發(fā)展，界面下的字體也在不斷進(jìn)步與演化發(fā)展，為了設(shè)計出優(yōu)秀的字體，它一定是基于用戶場景及用戶體驗(yàn)而產(chǎn)生的。

界面下字體設(shè)計基于以往的字設(shè)計思路進(jìn)行拓展，帶來的是漢字設(shè)計表現(xiàn)手法上的多樣性。其基本思路首先基于文字的字形展開，遵循漢字的字意來實(shí)現(xiàn)對字體形狀的設(shè)計，極大地提升動態(tài)漢字的美學(xué)效果，亦會讓公眾感受到視覺層面的沖擊，更加悅目。其次界面下對文字實(shí)施動態(tài)設(shè)計，將動畫效果賦予文字，拓展了文字表現(xiàn)，把握好動態(tài)字體的運(yùn)動速率和節(jié)奏，獲得更多的設(shè)計靈感和設(shè)計途徑[5]。最后，在漢字字體特質(zhì)的基礎(chǔ)之上，合理地遴選和搭配色彩，讓色彩也結(jié)合動態(tài)字體動起來。日本設(shè)計師井口皓太認(rèn)為，“賦予文字動畫，是為了通過視覺交流更加打動人心”。比如他的作品《漢字城市》（如圖3），由竹、石、傘、木等16個漢字構(gòu)成，賦予文字動畫之美，描繪了迷人的京都。

（二）新技術(shù)影響下字體的交互設(shè)計

新技術(shù)、新設(shè)備的應(yīng)用提升了文字動態(tài)表現(xiàn)的效果，設(shè)計領(lǐng)域大幅拓寬，豐富了文字表現(xiàn)的承載媒介。比如運(yùn)用可視化網(wǎng)絡(luò)獲得技術(shù)、影像技術(shù)、信息采集技術(shù)等，將能確保字體設(shè)計能夠被應(yīng)用于不同的媒介平臺之上。媒介的豐富反過來又提升了文字表現(xiàn)的空間。

文字的交互是在新技術(shù)的影響下，從人機(jī)交互、文化傳播、設(shè)計心理方面出發(fā)，是字體與交互設(shè)計融合的過程。文字貫徹出現(xiàn)在移動端、交互裝置藝術(shù)、可穿戴設(shè)備上等，同時與交互技術(shù)匹配。選擇合適的交互方式是字體設(shè)計在界面設(shè)計應(yīng)用的關(guān)鍵步驟。物理層面的交互是通過推、拉、扭三個基本動作完成人物對話的，目前界面設(shè)計的基礎(chǔ)交互涉及到導(dǎo)航、指令、交通、瀏覽等。但是在漢字交互設(shè)計中應(yīng)該把生活中的物理交互方式以及新媒體的交互方式結(jié)合起來使用，在繼承傳統(tǒng)交互方式的同時減少交互學(xué)習(xí)成本。比如對物理開關(guān)的開啟關(guān)閉，我們需要使用簡單的動作——按，就可以完成操控，同樣對于字體的交互，指令也不易復(fù)雜繁瑣，能夠讓用戶得到良好的體驗(yàn)。交互方式除了保留傳統(tǒng)，還需創(chuàng)新，新的方式改變我們的行為方式和思維方式。

（三）人工智能下的字體設(shè)計

人工智能介入到設(shè)計中，為設(shè)計提供多種可能性。人工智能的應(yīng)用，字體設(shè)計整合智能算法，依靠數(shù)據(jù)分析，字體智能后對不同場景進(jìn)行自動識別。這在設(shè)計領(lǐng)域已有所作為，如阿里的鹿班設(shè)計、金山軟件的“極墨”系統(tǒng)、上海博物館利用人工智能技術(shù)識別神秘的西夏文字等。2021世界人工智能大會上“合合信息”人工智能公司通過智能文字識別技術(shù)，識別出3600年前中華文明的古老文字——甲骨文。同時國內(nèi)的字體公司，方正、漢儀都在結(jié)合人工智能進(jìn)行字體開發(fā)，提高工作效率，節(jié)省時間和開發(fā)成本，以滿足用戶界面下字體多領(lǐng)域交叉的跨界應(yīng)用。目前開發(fā)一款字體只需要設(shè)計原始120個字符，通過對文字筆畫特征采樣，依靠AI智能便計算編程出9000多個獨(dú)立文字。人工智能讓設(shè)計師從重復(fù)、調(diào)試、大量的繁雜勞動中解放出來，這個過程也是人機(jī)交互的過程。人工智能參與字體設(shè)計是科技與藝術(shù)的完美結(jié)合，帶給字體表現(xiàn)形式的諸多可能和更多空間。人工智能與文字在界面設(shè)計中的交互作用，體現(xiàn)在它的自我學(xué)習(xí)、自動適應(yīng)、以及自我優(yōu)化。降低層級關(guān)系便于用戶查找體驗(yàn)，優(yōu)化界面版面布局，做好信息梳理及分類，建立相應(yīng)的信息結(jié)構(gòu)。這些唯一的目的就是用戶獲得舒服的交互體驗(yàn)。

（四）虛擬化背景下的字體設(shè)計

隨著信息數(shù)據(jù)傳播的高速暢通，未來的設(shè)計一定是基于數(shù)據(jù)流量的視覺可視化。可視化顯示依靠VR虛擬現(xiàn)實(shí)Virtual Reality、AR增強(qiáng)現(xiàn)實(shí)Augmented Reality、MR混合現(xiàn)實(shí)Mix Reality等與三維技術(shù)的結(jié)合，為用戶提供全面的立體化的視覺感受。界面設(shè)計下的字體應(yīng)用形式也在創(chuàng)新變革，向多領(lǐng)域設(shè)計發(fā)展，跨界性趨勢非常明顯，都具備一定的虛擬現(xiàn)實(shí)性[6]。再仔細(xì)分析《漢字城市》這幅作品（如圖4），每個字體從字本身的含義與字形相結(jié)合設(shè)計，形神兼?zhèn)?，借用動畫手段生成具有縱深空間的立體圖形，在無限循環(huán)中傳達(dá)設(shè)計理念。如“寺”字本身就以舉世聞名的京都寺廟的建筑為原型，將字每部分拆分為梁木結(jié)構(gòu)，通過透視剖面圖，進(jìn)一步給動態(tài)影像創(chuàng)造了互動空間。觀眾一邊騎自行車，一邊進(jìn)入變幻莫測的三維字體世界中暢游城市。

（五）NUI下的字體設(shè)計

在NUI下，機(jī)器與人以最自然的交流方式（如語言和文字）進(jìn)行互動，無需要鼠標(biāo)、鍵盤等輔助硬件設(shè)備，而通過全新的觸控技術(shù)使交互變得更加人性化、自然直觀。目前移動端設(shè)備擁有Multi-Touch多點(diǎn)觸控的功能，模仿現(xiàn)實(shí)中的操作手勢與屏幕內(nèi)容交互。觸控手勢帶來的是自然用戶界面，降低對操作屏幕對象的認(rèn)知障礙，被全年齡層及不同技能水平的人所使用。體感設(shè)備也是用戶在不依靠任何設(shè)備的背景下，通過感應(yīng)器，接收人們的動作或語音信息，從而可以完成交互。以上新技術(shù)的運(yùn)用導(dǎo)致字體設(shè)計三維化、動效化、控件化。早在2015年，井口皓太在米蘭世博會做的“未來餐廳”裝置，被授予設(shè)計類金獎（如圖5）。該裝置作品通過多點(diǎn)觸控技術(shù)，模仿現(xiàn)實(shí)中筷子夾菜的操作，文字被解構(gòu)三維立體化的同時參與到交互互動中，文字具備控件功能。簡單字體元素經(jīng)過互動屬性的添加具有了超強(qiáng)的視覺沖擊和韻律感，瞬間變得繽紛多彩。

四、結(jié)語

字體設(shè)計作為界面設(shè)計的主要元素受信息設(shè)計、新技術(shù)的影響，其藝術(shù)形式也與時俱進(jìn)。從規(guī)范字體的交互體驗(yàn)到動態(tài)多元化字體的互動屬性，都本著交互的基本原則。信息技術(shù)時代的到來對于字體設(shè)計提出更高要求，借助新技術(shù)產(chǎn)出優(yōu)秀作品，其造型從靜態(tài)組合變成了動態(tài)、虛擬、互動，讓用戶獲得優(yōu)質(zhì)的閱讀體驗(yàn)和高效的信息資源，享受沉浸式、強(qiáng)互動交互，這也是未來字體設(shè)計的發(fā)展趨勢。人機(jī)互動拓展了字體設(shè)計新思路，提供新的構(gòu)想空間，延伸文字的內(nèi)涵和意義。

參考文獻(xiàn)：

[1]三度出版有限公司.屏幕時代的字體設(shè)計[M].武漢：華中科技大學(xué)出版社，2019：155-228.

[2]席佳斌.數(shù)字媒體境遇下的漢字動態(tài)化設(shè)計[D].西安：西安美術(shù)學(xué)院，2017.

[3]徐宜佳，王巖.淺析動態(tài)字體設(shè)計的視覺表達(dá)[J].工業(yè)設(shè)計，2021（1）：81-82.

[4]錢浩.做字[M].北京：電子工業(yè)出版社，2019：134-237.

[5]施耐德曼，普拉.用戶界面設(shè)計——有效的人機(jī)交互策略[M].郎大鵬，等譯.北京：電子工業(yè)出版社出版，2017：42-72.

[6]廖宏勇.信息設(shè)計[M].北京：北京大學(xué)出版社，2017：81-122.

作者簡介：張俊，碩士，北京理工大學(xué)珠海學(xué)院設(shè)計與藝術(shù)學(xué)院講師。研究方向：視覺傳達(dá)設(shè)計。