現實生活中的視覺符號

Aceyclee發表於2018-03-21

將 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

相關文章