現實生活中的視覺符號

將 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

個人知乎：@Aceyclee | 個人微博：@Aceyclee