文字信息在界面設計中的運用

0 評論 3138 瀏覽 7 收藏 15 分鐘

編輯導語:在界面設計中,文字信息是必不可少的一部分。文字信息不僅僅可以美觀界面,達到圖文結合的視覺效果,還可以幫助我們理解界面,從而完成對圖片的解釋。然而,在界面設計中,并非所有的文字信息都能起到正向作用,如果設計和安排不當,反而會對讀者產品反向的作用。

最近筆者在整理文件夾的時候,翻到了兩年前去UXPA大會學習時做的一份總結材料。那么今天筆者就和大家分享一下當時Workshop講演的內容,主要關于文字在界面設計中的作用,以及什么是能讓用戶閱讀體驗舒適的界面文字設計。

筆者參加的那場workshop的主題是:眼“見”為“實”——探索與發現讓眼睛舒服的界面文字設計。講師來自于Tobiipro 拓比中國,是一家通過眼動追蹤技術與服務,幫助商業與學術研究人員獲得人類行為的深層次洞察結果的科技公司。

在Workshop的開頭,講師對現有眼動技術作了概述(有創:眼電圖法;無創:基于視頻的瞳孔/角膜反射法),并對其主要運用領域進行了介紹(VR/AR、人機交互、網頁布局規劃、個性化廣告推薦、醫療、零售、信息安全、軍事……)

講師當時提到,眼動分析不判定美學價值,僅研究視覺信息的傳達效果與效率。而信息有效傳達的第一要務,則是——被看見。

我們來舉個例子:大家在公交站臺和地鐵站通道的廣告牌上時常能看到一些手機廠商的廣告。

它們一般長這樣??

文字信息在界面設計中的運用

這樣??

文字信息在界面設計中的運用

還有這樣??

文字信息在界面設計中的運用

這樣的設計好看嗎?

平心而論,它不一定是好看的,純色背景配上幾個規矩的大字,大頭人像舉著手機摳出來貼在大字旁邊,就完成了;但另一方面,它被人們看見了嗎?

臉盆大的字加上門板大的臉,那必然是吸引眼球的,多路過幾塊這樣的牌子你就對這個品牌產生了深刻的印象。

在設計這類廣告海報的時候,為了讓用戶在最短的時間內快速get到關鍵信息,設計師選擇使用最少、最大的字展示關鍵詞,同時利用大頭人像抓眼,配合“拍人更美”的文案,體現“拍照功能優秀”的特性。

從美觀性和設計難度來說,設計這樣的海報技術要求并不高,但信息的高效傳達才是這類廣告的關鍵點。

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

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

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

舉個例子,淘寶的店鋪寶貝頁提供了兩種視圖:

文字信息在界面設計中的運用

可以明顯地看到,用戶通過左邊的列表視圖可以一次查看到4件商品的信息,且可以根據更完整的文字描述得到產品材質、設計風格、服裝分類等信息。

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

而在右邊的視圖里,雖然更大的圖片可以讓人看得更清楚,但一頁只能完整地查看兩件商品的首圖,文字信息還被截斷了不少,且用戶可能需要花點兒時間判斷大圖下方的小預覽圖到底表達的是什么信息。

我們不難發現,文字在視覺信息傳達方面有著不可或缺的地位,閱讀仍是用戶獲取有效信息的重要途徑。

當時寫的一張分享材料:

文字信息在界面設計中的運用

那么在App的界面設計中,該如何運用文字信息,使其與圖片和視頻更有效地結合使用呢?

我們在設計不同類型的App的時候有不同的運用規則,通常是由產品屬性和用戶使用意圖決定的,接下來筆者以工具類和信息類兩種App類型來說明一下。

一、工具類

工具類App突出實用性,除了工具屬性以外很少給用戶提供更多的內容。市面上比較常用的工具類App有:用于跟蹤物流數據的(快遞100);用于翻譯資料、查詢單詞的(有道詞典),用于查找目的地、導航路線的(高德地圖)……

為了讓用戶方便快速地得到有效反饋,這類App的主要特點為:

  • 文字簡潔
  • 交互高效
  • 標識直觀

舉個例子:快遞100作為一個老牌快遞物流跟蹤助手,就是典型的工具類App。每個Tab的職能分配都利落鮮明,沒有過多的營銷內容和引流入口。

快遞100的三大主要功能為:物流跟蹤、快遞查詢和下單寄件。我們可以發現,相關界面的主要信息均是由文字體現的,僅在一些功能入口使用icon使模塊更生動。用戶通過文字描述即可高效觸達自己需要的信息,不用花時間辨認圖形和icon的意思。

文字信息在界面設計中的運用

通過不同的字體大小和顏色文字信息,可以體現出內容的主次。比如在物流跟蹤頁,用戶最關注的就是“我買的xx現在到了哪里“。用戶第一眼就能讀到最大號字的包裹內容和次一級的物流狀態,而物流公司標識則打了一個小小的配合,提高品牌辨識度。

文字信息在界面設計中的運用

二、信息類

我們每天都在從互聯網獲取源源不斷的信息,而手機中的App就是我們的信息源。

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

  1. 明白自己要看什么,快速定位所需信息;
  2. 慢慢瀏覽收到的推送信息,隨機發現興趣點。

用戶出于何種意圖去選擇一個產品是根據他們的根本需求決定的;而各類產品也會依據自己的產品屬性,去精準地解決用戶痛點,提供合適的用戶體驗。

那么怎樣從界面呈現的角度來理解這兩種不同的使用意圖呢?

想必大家都已經對微信的訂閱號功能十分熟悉了,訂閱號消息首頁與列表頁就能很好地幫我們理解如何從界面設計來滿足兩種不同的用戶意圖:

文字信息在界面設計中的運用

1. 訂閱號信息首頁

當用戶進入消息頁的時候,通常是希望瀏覽一下發布了哪些新文章,發現感興趣的就會點進去看。那么設計師要考慮的就是如何體現一張信息卡片的價值,使其能在短時間內抓住用戶的眼球,提升點擊率。

從左圖可以發現,大卡片的設計放慢了用戶的瀏覽速度,保證用戶目光在單一訂閱號卡片上停留的時間更長,同時利用大封面與大字號標題的結合引起用戶的興趣,引導用戶閱讀和點擊。

2. 訂閱號關注列表頁

而用戶從首頁右上角點擊進入關注列表頁,主要是為了查看自己關注了多少個訂閱號,或者是為了找某一個他需要的訂閱號,而不是為了殺時間。

從右圖可以發現,這時候使用List可以在一屏內顯示更多的內容,方便用戶快速定位,極大保障了用戶的搜索效率;用戶在此頁獲取的文字信息相對更多,方便用戶二次確認“這確實是我要找的訂閱號”。

文字信息在界面設計中的運用

Workshop的最后一個環節的主題為“文字信息三問”,進一步展示了文字信息在界面設計中的一些具體實施例:

1)文字信息是否可以作為一個交互入口?

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

文字信息在界面設計中的運用

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

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

2)沒有點擊數據的文字信息如何評價效率?

最直接的評判標準,就是這段文字是否易讀,我們可以比較一下不同的字體對閱讀的影響:

另外,從眼動追蹤的數據中可以發現,用戶在界面中停留的時間長短,以及此界面中的信息是否需要用戶重復閱讀,用戶在單點信息上停留是否較久,都可以作為信息傳達有效性的判斷標準。

我們再來看一下在讀大白話與文言文時,對閱讀體驗的差別:

文字信息在界面設計中的運用

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

3)如何合理評估文字信息的傳達價值?

  • 準確性:一些重要的功能說明、需要用戶仔細閱讀的條例等,對文字表達的準確性有極高的要求,比如下圖的功能介紹和協議草案。

文字信息在界面設計中的運用

  • 效率性:一些需要用戶決策的信息、服務開啟的提示內容,都對文字描述的長度和易讀性、易理解性都有高要求,比如下方的通訊錄關聯提示和服務條款提示。

文字信息在界面設計中的運用

  • 生動性:在一些場景的設計中,更生動的文字描述可以幫助用戶更好地理解信息內容,快速做出決策,比如下方VSCO和華為圖庫的濾鏡命名對比。

文字信息在界面設計中的運用

最后,我們來總結一下這場Workshop要表達的核心內容:

  • 信息有效傳達的第一要務是被看見,需要注意明確信息層級的劃分;
  • 輕量化的、易讀的文字使用戶更容易理解任務,縮短反饋時間;
  • 文字在場景中的運用與用戶當下的意圖有關,具體情況需要具體分析。

以上就是筆者今天關于文字設計的分享,歡迎大家一起交流討論~

 

作者:你柴;公眾號:你柴的aCupOfTea

本文由 @你柴 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自 Pexels,基于 CC0 協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!