常見的UI元素是如何演變發展的？我梳理了這4個！

聊一聊習以為常的 UI 元素，其背后曲折的演變過程及設計原理。

小紅點長什么樣？

示能可拖轉的圖標長什么樣？

...

我相信許多人看到上述問題后，腦中浮現的答案都是高度的一致，因為這些 UI 元素的形態似乎已經成為一種“行業共識”，甚至多年前就已被沉淀下來。但在這些已成型的 UI 元素背后，它們又是如何誕生、演變的？是如何從真實世界轉變為界面上的元素，甚至符號的？

一、≡ 拖拽圖標

多行表單右側配置“≡”即隱喻可被拖拽，這是從真實世界中具有相同功能的物品上尋求到的答案——在與施力方向垂直的方向上增加紋理，是真實世界中為了讓用戶更輕易地拖動對象，用來增加摩擦的設計。早期的拖拽符號幾乎是對真實世界的復刻，后來逐漸簡化，演變為既不會和常見符號“=”沖突，又不會讓 Icon 形態過于復雜的三條橫線符號。

二、IOS 人臉 ID 與密碼圖標

此圖標可以追溯至 1982 年 Susan Kare（Apple 的“圖標之母”）為 Apple 個人電腦系列的 Macintosh 設計的圖標“微笑的電腦”，通過抽象后的眼鼻嘴來象征人臉，為大眾陌生的電腦注入積極、親和的元素。

關于圖標之母更詳細的介紹：

Susan Kare 曾提起這個圖標的設計靈感來自《理解漫畫》一書，“簡單的人臉，越是卡通，它描述、代表的人就越多。” Scott McCloud 在書中提到。他認為我們生活在一個以符號為導向的世界中，人們在看漫畫時，大腦編程為識別這個圖標并與我們自己聯系起來，而如果圖像越是具象、帶有越多細節特征，人們越難產生聯結，因為豐富的細節在不停地傳遞一個信息，我（漫畫角色）與你不同。所以他提倡使用抽象的方式繪制人臉，讓圖像具備某種符號化，也具備通用的效果。

Susan Kare 也在另一場講座中表達了自己關于圖標通用性的其他看法，“避免讓圖標看起來像是某個特定的技術產品”，即盡量表達功能性而非技術性特征。因為隨著時間的推移，某些技術可能會過時，一個圖標可以被持久地使用，也是通用性良好的體現。

三、開關

為什么開關是今天我們見到的圓角矩形形態，這不得不聊到 iPhone 上開關的演變過程。iPhone 剛推出時順延了當時在 PC 端較常見的開關樣式，但隨著版本的更新迭代，開關開始悄悄變化。其中最關鍵的兩次變化為 iOS 5 與 iOS 7，iOS 5 發布后，開關（ Apple 稱其 Toggle ）變得更圓潤了一點，更貼合喬布斯提倡的圓角矩形造型風格——元素沒有過于鋒利的邊緣，避免打斷人們使用界面時的思路；iOS 7 Apple 設計風格大變，扁平化和極致的簡潔成為 iOS7 設計風格的主旋律，同期甚至也去掉了“ON/OFF 單詞”，僅通過滑塊的位置與顏色傳遞開關狀態。

但這樣的轉變是完美的嗎？其實，對部分難以通過顏色辨別開關狀態的用戶來說，并沒有那么友好，但 Apple 也通過分支的輔助功能解決了這個問題——可以設置是否顯示開關上的符號，這樣用戶就可以通過符號更明確地獲取開關狀態。

而這個符號也是精心設計而來：早期的開關通過單詞“ON/OFF”來傳遞兩種狀態。但隨著此技術逐漸普遍，相傳二戰期間，為了讓各國的士兵與工人可繞過語言障礙，僅經過簡單訓練就可正確使用各電氣化設備，工程師使用了國際通用的表達方式——二進制代碼中的 “0” 與 “1” 來表達開關的二元狀態，“ON/OFF”被通用符號所取代，圓圈“O”代表開關默認狀態“關”，直線“ | ”代表“開”。

與曲折的造型演變不同，開關的交互模式是相對恒定的：撥動開關后提供即時結果，如同真實世界中撥動開關后燈會立刻亮起，撥動開關后機器能立刻進入開機狀態一樣。同樣的，這也對我們日常使用此元素做設計時起著約束作用。

四、紅點

小紅點是一種用來表達“新消息”的反饋方式。它的來源沒有確切的說法，但它有些類似以前郵遞員如何知道哪些信箱內有信件需要寄出的體驗：郵遞員通常并不會在每個信箱前停留，除非看到了右側臨時豎起的小旗子或懸掛的絲巾（一種客戶和郵遞員約定的信號）。

早在 Windows98 中就能看到類似的用來表達“新消息”的設計——收件箱右側展示數字，來表達電子郵件數量。而在后來“一統天下”的諾基亞塞班系統中，也延續了這種新消息的表達方式。

轉折點是 2007 年 Apple 推出的第一款 iPhone，第一次在移動設備上出現了紅點，后來各大手機系統也追隨了這種方式。

兩年后，Apple 注冊了相關專利，并在 iOS 系統上開始正式使用。在這份專利中 Apple 將其描述為“圖標徽章——應用程序響應于接收到某些通知消息時的表現”，紅點內的內容可以是數字，圖形，文本，動畫，甚至四者的任意組合。

可為什么新消息的通知形式，由純數字、標點符號轉變為帶底色的形式？為什么選擇了紅色？雖較難考究，但結合那段時間新消息反饋形式的演變過程推測，圖形化解法的背后或許有如下考慮：

①更統一&通用的解法，以降低系統的復雜度，塑造穩定的用戶認知。

黑莓在 Blod 9000 中正式選擇“圖標徽章”，在此之前新消息的通知方式仍為圖標左上角的“*”符號；有趣的是在這波更新中，“系統聲音狀態”的反饋形式也得到了升級，并且也使用了“圖標徽章”的形式。可以看出黑莓希望用一種統一、通用的形式整合相似的信息。

而“圖標徽章”相較舊形式最大的差異是增加了底圖，在我看來產生這種變化有可能是為了保證反饋可見性采取的設計手段。

②更易被識別的視覺形態，以節省用戶篩選信息的時間。

紅點是為了向用戶傳遞來自應用程序“重要的”信息，有吸引用戶注意力的目標。從“前注意加工（Pre-attentive Processing）”的角度出發，顏色和位置是用來獲取注意力最有效的屬性，而紅色作為現實生活中常用來傳遞緊急、重要信息的顏色，自然成為了最優的選擇。

而為什么調整至右上角？或許是考慮到紅點的附屬屬性、主流的閱讀方向等原因所做出的設計決策。

寫在最后

上述僅是 UI 元素演變過程的冰山一角，我們身邊仍有許多可被挖掘的故事，比如 Input & Keyboard 組件與打字機之間的關系；隱喻搜索功能的放大鏡如何從眾多符號中脫引而出的，等等。每一個現在熟悉的不能再熟悉的設計元素，都歷經了多年的演變并沉淀下來，探尋其背后的形成過程、邏輯推演過程能夠讓我更深刻地理解它們，并做到真正的知其所以然。

如有紕漏歡迎指出。

歡迎關注作者微信公眾號：「We-Design」