用戶界面設計中字體應用的交互屬性研究

摘? 要：在信息時代驅使下用戶界面中的字體設計突破維度的局限，實現多維度表現，由靜態走向了動態。用戶界面設計中字體應用的交互屬性研究是在信息設計語境下探討用戶界面中文字的交互屬性的表現形式，分析文字交互構成因素，指出字體作為用戶界面的基礎元素，其交互屬性表現為靜態交互與動態交互相結合的交互形式。最后提出未來字體設計發展趨勢為虛擬性形成的作品，具有沉浸式的強互動交互屬性。

關鍵詞：用戶界面;字體設計;交互屬性;動態字體

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

一、字體設計的交互屬性概述

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

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

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

（二）規范字體下的交互

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

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

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

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

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

（一）文字的交互設計意義

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

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

（二）文字應用的動態化表現

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

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

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

三、字體設計中交互性的表現形式

（一）文字設計的交互思路

隨著屏顯技術的發展，界面下的字體也在不斷進步與演化發展，為了設計出優秀的字體，它一定是基于用戶場景及用戶體驗而產生的。

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

（二）新技術影響下字體的交互設計

新技術、新設備的應用提升了文字動態表現的效果，設計領域大幅拓寬，豐富了文字表現的承載媒介。比如運用可視化網絡獲得技術、影像技術、信息采集技術等，將能確保字體設計能夠被應用于不同的媒介平臺之上。媒介的豐富反過來又提升了文字表現的空間。

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

（三）人工智能下的字體設計

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

（四）虛擬化背景下的字體設計

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

（五）NUI下的字體設計

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

四、結語

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

參考文獻：

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

[2]席佳斌.數字媒體境遇下的漢字動態化設計[D].西安：西安美術學院，2017.

[3]徐宜佳，王巖.淺析動態字體設計的視覺表達[J].工業設計，2021（1）：81-82.

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

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

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

作者簡介：張俊，碩士，北京理工大學珠海學院設計與藝術學院講師。研究方向：視覺傳達設計。