現實生活中的視覺符號

簡評：將 UX 和界面設計原則擴展到數字產品之外

視覺符號（Visual indicators）用於使物體更加醒目，它們不需要用戶採取主動行動，而是充當一種「通信工具」來提示需要注意的事情。

視覺符號並不總是存在，它們一般會在某些特定條件下出現。為了完成傳達，符號可以採用圖標、印刷風格、尺寸、顏色變化或者動畫等形式。

在數字世界中，符號無處不見。比如：

• Gmail 使用回形針圖標來顯示包含附件的郵件，黃色星號用於標記保存
• Todoist 用戶通過複選框的顏色指示項目的優先順序，並能輕易地看到評論歷史記錄
• 更新 App 時，進度指示器覆蓋 iOS 上的 App 圖標，以此顯示剩餘下載時間

UX 和 界面設計工作中很有趣的一點是，它的原理和元素不僅限於數字產品，在我們周圍的世界同樣有跡可循。例如，可視指示符可以用來傳達有關它們所代表的實體信息，最常見的一種方式是「添加文本」，超市中促銷用的「降價 20%」就是一例。

當然，對於非文本指示符，還有使用顏色、方向甚至移動來進行信息傳達， 而不僅僅是添加文字。

狀態

「系統狀態的可見性」是 Jakob Nielsen 10 種用戶界面設計可用性啟發之一，其中規定任何系統應該始終讓用戶了解正在發生的事情。

在現實物理世界中也具有類似的，視覺符號是溝通的常用手段。

• 項目：郵箱
• 符號：標記在「向上」的位置
• 對象：郵政工作者
• 信息：這裡有郵件需要收集

• 項目：餐廳賬單
• 符號：卡片出現在賬單錢包 [支付狀態]
• 對象：等待員工
• 信息 ：付款方式已準備好

• 項目：飛機渦輪發動機
• 符號：運動中的螺旋圖形 [開/關狀態]
• 對象：機場地勤人員
• 信息：小心！這架飛機的發動機正在運轉。
• 備註： 這個符號也有助於規避鳥類！

進程

數字產品中的進度指示器非常普遍，用於傳達用戶距離結束還剩餘多少時間或步驟。在物理世界中，它們表現為傳達剩餘增量或時間的標記，直到達到狀態或需要採取行動。

• 項目：書
• 符號：將書籤放置在特定頁面中 [完成進度]
• 對象：讀者
• 信息：看看你還剩多少頁就看完這本書了

• 項目：自行車剎車片
• 符號：凹槽磨損量 [可用剩餘量]
• 對象：騎自行車的人
• 信息：這些磨損溝槽幾乎消失了。需要更換新的剎車片了！

• 項目：鱷梨
• 符號：莖幹下面的顏色 [Ripeness Spectrum]
• 對象：顧客和商家
• 信息：綠色 = 已經成熟，可以吃了；棕色 = 熟透了

其他

生活中一些不經意的小事其實也利用了視覺符號傳達的功用，比如預測人們可能會尋找什麼，然後利用這個信息來設計一個符號去消除可能的混亂，從而在不用說一句話的前提下就完成了信息的傳遞。

• 項目：啤酒罐
• 符號：瓶身上用力擠壓的凹陷 [代表所有權]
• 對象：任何可能錯拿我啤酒的人
• 信息：這不是你的啤酒。

• 項目：餐廳茶壺
• 符號：蓋子的傾斜放置 [Empty / Full Status]
• 對象：服務員
• 信息：茶壺空了，可以幫我加點水嗎？

• 項目：衣領
• 符號：衣架掛鉤朝向 [清潔/穿過狀態]
• 對象：我！
• 信息：衣架朝外 = 這件襯衫很乾凈。 衣架朝內 = 至少穿了一次。

像這樣的符號還有很多，在正確的情境下，這些視覺線索可以幫助用戶區分一個項目的不同狀態，用戶利用這個信息做什麼取決於他們的即使需求或最終目標。

不論在數字世界或者物理世界中，簡明的視覺符號都能提供直觀清晰的幫助。

原文鏈接：

• An exploration of visual indicators in real life

推薦閱讀：

迅速提高設計美感的 7 個小技巧?

zhuanlan.zhihu.com

極光日報，極光開發者旗下媒體。

每天導讀三篇英文技術文章。