編輯導(dǎo)語(yǔ)：在界面設(shè)計(jì)中，文字信息是必不可少的一部分。文字信息不僅僅可以美觀界面，達(dá)到圖文結(jié)合的視覺效果，還可以幫助我們理解界面，從而完成對(duì)圖片的解釋。然而，在界面設(shè)計(jì)中，并非所有的文字信息都能起到正向作用，如果設(shè)計(jì)和安排不當(dāng)，反而會(huì)對(duì)讀者產(chǎn)品反向的作用。

最近筆者在整理文件夾的時(shí)候，翻到了兩年前去UXPA大會(huì)學(xué)習(xí)時(shí)做的一份總結(jié)材料。那么今天筆者就和大家分享一下當(dāng)時(shí)Workshop講演的內(nèi)容，主要關(guān)于文字在界面設(shè)計(jì)中的作用，以及什么是能讓用戶閱讀體驗(yàn)舒適的界面文字設(shè)計(jì)。

筆者參加的那場(chǎng)workshop的主題是：眼“見”為“實(shí)”——探索與發(fā)現(xiàn)讓眼睛舒服的界面文字設(shè)計(jì)。講師來自于Tobiipro 拓比中國(guó)，是一家通過眼動(dòng)追蹤技術(shù)與服務(wù)，幫助商業(yè)與學(xué)術(shù)研究人員獲得人類行為的深層次洞察結(jié)果的科技公司。

在Workshop的開頭，講師對(duì)現(xiàn)有眼動(dòng)技術(shù)作了概述（有創(chuàng)：眼電圖法；無(wú)創(chuàng)：基于視頻的瞳孔/角膜反射法），并對(duì)其主要運(yùn)用領(lǐng)域進(jìn)行了介紹（VR/AR、人機(jī)交互、網(wǎng)頁(yè)布局規(guī)劃、個(gè)性化廣告推薦、醫(yī)療、零售、信息安全、軍事……）

講師當(dāng)時(shí)提到，眼動(dòng)分析不判定美學(xué)價(jià)值，僅研究視覺信息的傳達(dá)效果與效率。而信息有效傳達(dá)的第一要?jiǎng)?wù)，則是——被看見。

我們來舉個(gè)例子：大家在公交站臺(tái)和地鐵站通道的廣告牌上時(shí)常能看到一些手機(jī)廠商的廣告。

它們一般長(zhǎng)這樣?

這樣?

還有這樣?

這樣的設(shè)計(jì)好看嗎？

平心而論，它不一定是好看的，純色背景配上幾個(gè)規(guī)矩的大字，大頭人像舉著手機(jī)摳出來貼在大字旁邊，就完成了；但另一方面，它被人們看見了嗎？

臉盆大的字加上門板大的臉，那必然是吸引眼球的，多路過幾塊這樣的牌子你就對(duì)這個(gè)品牌產(chǎn)生了深刻的印象。

在設(shè)計(jì)這類廣告海報(bào)的時(shí)候，為了讓用戶在最短的時(shí)間內(nèi)快速get到關(guān)鍵信息，設(shè)計(jì)師選擇使用最少、最大的字展示關(guān)鍵詞，同時(shí)利用大頭人像抓眼，配合“拍人更美”的文案，體現(xiàn)“拍照功能優(yōu)秀”的特性。

從美觀性和設(shè)計(jì)難度來說，設(shè)計(jì)這樣的海報(bào)技術(shù)要求并不高，但信息的高效傳達(dá)才是這類廣告的關(guān)鍵點(diǎn)。

在一張界面中，人們獲取信息的途徑有三種：

1. 文字
2. 圖片
3. 視頻

最近兩年，我們正慢慢從“讀圖時(shí)代”往“視頻時(shí)代”過渡，但文字信息的力量依舊無(wú)可替代。在Workshop上講師分享了一組數(shù)據(jù)，在App界面設(shè)計(jì)中，32%的文字信息比例帶來了48%的關(guān)注度。

舉個(gè)例子，淘寶的店鋪寶貝頁(yè)提供了兩種視圖：

可以明顯地看到，用戶通過左邊的列表視圖可以一次查看到4件商品的信息，且可以根據(jù)更完整的文字描述得到產(chǎn)品材質(zhì)、設(shè)計(jì)風(fēng)格、服裝分類等信息。

通過較完整的文字描述，用戶在了解了服飾的樣式同時(shí)，還可以更精準(zhǔn)地判斷“這件衣服是不是我需要的“，以決定是否要點(diǎn)擊查看商品詳情。

而在右邊的視圖里，雖然更大的圖片可以讓人看得更清楚，但一頁(yè)只能完整地查看兩件商品的首圖，文字信息還被截?cái)嗔瞬簧?，且用戶可能需要花點(diǎn)兒時(shí)間判斷大圖下方的小預(yù)覽圖到底表達(dá)的是什么信息。

我們不難發(fā)現(xiàn)，文字在視覺信息傳達(dá)方面有著不可或缺的地位，閱讀仍是用戶獲取有效信息的重要途徑。

當(dāng)時(shí)寫的一張分享材料：

那么在App的界面設(shè)計(jì)中，該如何運(yùn)用文字信息，使其與圖片和視頻更有效地結(jié)合使用呢？

我們?cè)谠O(shè)計(jì)不同類型的App的時(shí)候有不同的運(yùn)用規(guī)則，通常是由產(chǎn)品屬性和用戶使用意圖決定的，接下來筆者以工具類和信息類兩種App類型來說明一下。

一、工具類

工具類App突出實(shí)用性，除了工具屬性以外很少給用戶提供更多的內(nèi)容。市面上比較常用的工具類App有：用于跟蹤物流數(shù)據(jù)的（快遞100）；用于翻譯資料、查詢單詞的（有道詞典），用于查找目的地、導(dǎo)航路線的（高德地圖）……

為了讓用戶方便快速地得到有效反饋，這類App的主要特點(diǎn)為：

• 文字簡(jiǎn)潔
• 交互高效
• 標(biāo)識(shí)直觀

舉個(gè)例子：快遞100作為一個(gè)老牌快遞物流跟蹤助手，就是典型的工具類App。每個(gè)Tab的職能分配都利落鮮明，沒有過多的營(yíng)銷內(nèi)容和引流入口。

快遞100的三大主要功能為：物流跟蹤、快遞查詢和下單寄件。我們可以發(fā)現(xiàn)，相關(guān)界面的主要信息均是由文字體現(xiàn)的，僅在一些功能入口使用icon使模塊更生動(dòng)。用戶通過文字描述即可高效觸達(dá)自己需要的信息，不用花時(shí)間辨認(rèn)圖形和icon的意思。

通過不同的字體大小和顏色文字信息，可以體現(xiàn)出內(nèi)容的主次。比如在物流跟蹤頁(yè)，用戶最關(guān)注的就是“我買的xx現(xiàn)在到了哪里“。用戶第一眼就能讀到最大號(hào)字的包裹內(nèi)容和次一級(jí)的物流狀態(tài)，而物流公司標(biāo)識(shí)則打了一個(gè)小小的配合，提高品牌辨識(shí)度。

二、信息類

我們每天都在從互聯(lián)網(wǎng)獲取源源不斷的信息，而手機(jī)中的App就是我們的信息源。

一個(gè)好的信息類App能幫助我們更好地搜索信息，獲取資訊。信息類App也有各種不同的屬性，比如閱讀屬性（微信讀書），資訊屬性（今日頭條），社交屬性（新浪微博）等，用戶在使用信息類App時(shí)通常有兩種意圖：

1. 明白自己要看什么，快速定位所需信息；
2. 慢慢瀏覽收到的推送信息，隨機(jī)發(fā)現(xiàn)興趣點(diǎn)。

用戶出于何種意圖去選擇一個(gè)產(chǎn)品是根據(jù)他們的根本需求決定的；而各類產(chǎn)品也會(huì)依據(jù)自己的產(chǎn)品屬性，去精準(zhǔn)地解決用戶痛點(diǎn)，提供合適的用戶體驗(yàn)。

那么怎樣從界面呈現(xiàn)的角度來理解這兩種不同的使用意圖呢？

想必大家都已經(jīng)對(duì)微信的訂閱號(hào)功能十分熟悉了，訂閱號(hào)消息首頁(yè)與列表頁(yè)就能很好地幫我們理解如何從界面設(shè)計(jì)來滿足兩種不同的用戶意圖：

1. 訂閱號(hào)信息首頁(yè)

當(dāng)用戶進(jìn)入消息頁(yè)的時(shí)候，通常是希望瀏覽一下發(fā)布了哪些新文章，發(fā)現(xiàn)感興趣的就會(huì)點(diǎn)進(jìn)去看。那么設(shè)計(jì)師要考慮的就是如何體現(xiàn)一張信息卡片的價(jià)值，使其能在短時(shí)間內(nèi)抓住用戶的眼球，提升點(diǎn)擊率。

從左圖可以發(fā)現(xiàn)，大卡片的設(shè)計(jì)放慢了用戶的瀏覽速度，保證用戶目光在單一訂閱號(hào)卡片上停留的時(shí)間更長(zhǎng)，同時(shí)利用大封面與大字號(hào)標(biāo)題的結(jié)合引起用戶的興趣，引導(dǎo)用戶閱讀和點(diǎn)擊。

2. 訂閱號(hào)關(guān)注列表頁(yè)

而用戶從首頁(yè)右上角點(diǎn)擊進(jìn)入關(guān)注列表頁(yè)，主要是為了查看自己關(guān)注了多少個(gè)訂閱號(hào)，或者是為了找某一個(gè)他需要的訂閱號(hào)，而不是為了殺時(shí)間。

從右圖可以發(fā)現(xiàn)，這時(shí)候使用List可以在一屏內(nèi)顯示更多的內(nèi)容，方便用戶快速定位，極大保障了用戶的搜索效率；用戶在此頁(yè)獲取的文字信息相對(duì)更多，方便用戶二次確認(rèn)“這確實(shí)是我要找的訂閱號(hào)”。

Workshop的最后一個(gè)環(huán)節(jié)的主題為“文字信息三問”，進(jìn)一步展示了文字信息在界面設(shè)計(jì)中的一些具體實(shí)施例：

1）文字信息是否可以作為一個(gè)交互入口？

我們看過了五花八門的icon設(shè)計(jì)，在Tab選擇、目錄分類和各種點(diǎn)擊按鈕上都有體現(xiàn)。然而文字按鈕也是一個(gè)重要的控件，盡管樸素，但對(duì)用戶來說在許多場(chǎng)景下它比圖片更為重要。

如上圖所示，這種開屏廣告即使只有短短四五秒，但很多用戶依舊是不愿意等的。此時(shí)用戶的目光通常會(huì)在界面的右上角或右下角搜索【跳過】按鈕，希望能快速進(jìn)入App首頁(yè)。

即使“跳過”兩個(gè)字在整個(gè)廣告頁(yè)面只占了不到5%的面積，卻能吸引用戶90%以上的注意力。

2）沒有點(diǎn)擊數(shù)據(jù)的文字信息如何評(píng)價(jià)效率？

最直接的評(píng)判標(biāo)準(zhǔn)，就是這段文字是否易讀，我們可以比較一下不同的字體對(duì)閱讀的影響：

另外，從眼動(dòng)追蹤的數(shù)據(jù)中可以發(fā)現(xiàn)，用戶在界面中停留的時(shí)間長(zhǎng)短，以及此界面中的信息是否需要用戶重復(fù)閱讀，用戶在單點(diǎn)信息上停留是否較久，都可以作為信息傳達(dá)有效性的判斷標(biāo)準(zhǔn)。

我們?cè)賮砜匆幌略谧x大白話與文言文時(shí)，對(duì)閱讀體驗(yàn)的差別：

大家從這兩張圖中感受到了哪種表達(dá)方式的易讀性更高了嗎？

3）如何合理評(píng)估文字信息的傳達(dá)價(jià)值？

• 準(zhǔn)確性：一些重要的功能說明、需要用戶仔細(xì)閱讀的條例等，對(duì)文字表達(dá)的準(zhǔn)確性有極高的要求，比如下圖的功能介紹和協(xié)議草案。

• 效率性：一些需要用戶決策的信息、服務(wù)開啟的提示內(nèi)容，都對(duì)文字描述的長(zhǎng)度和易讀性、易理解性都有高要求，比如下方的通訊錄關(guān)聯(lián)提示和服務(wù)條款提示。

• 生動(dòng)性：在一些場(chǎng)景的設(shè)計(jì)中，更生動(dòng)的文字描述可以幫助用戶更好地理解信息內(nèi)容，快速做出決策，比如下方VSCO和華為圖庫(kù)的濾鏡命名對(duì)比。

最后，我們來總結(jié)一下這場(chǎng)Workshop要表達(dá)的核心內(nèi)容：

• 信息有效傳達(dá)的第一要?jiǎng)?wù)是被看見，需要注意明確信息層級(jí)的劃分；
• 輕量化的、易讀的文字使用戶更容易理解任務(wù)，縮短反饋時(shí)間；
• 文字在場(chǎng)景中的運(yùn)用與用戶當(dāng)下的意圖有關(guān)，具體情況需要具體分析。

以上就是筆者今天關(guān)于文字設(shè)計(jì)的分享，歡迎大家一起交流討論~

作者：你柴；公眾號(hào)：你柴的aCupOfTea

本文由 @你柴 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議