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

小紅點長什么樣？

示能可拖轉(zhuǎn)的圖標長什么樣？

...

我相信許多人看到上述問題后，腦中浮現(xiàn)的答案都是高度的一致，因為這些 UI 元素的形態(tài)似乎已經(jīng)成為一種"行業(yè)共識"，甚至多年前就已被沉淀下來。但在這些已成型的 UI 元素背后，它們又是如何誕生、演變的？是如何從真實世界轉(zhuǎn)變?yōu)榻缑嫔系脑?，甚至符號的?/p>

一、≡ 拖拽圖標

多行表單右側(cè)配置"≡"即隱喻可被拖拽，這是從真實世界中具有相同功能的物品上尋求到的答案——在與施力方向垂直的方向上增加紋理，是真實世界中為了讓用戶更輕易地拖動對象，用來增加摩擦的設計。早期的拖拽符號幾乎是對真實世界的復刻，后來逐漸簡化，演變?yōu)榧炔粫统Ｒ姺?quot;="沖突，又不會讓 Icon 形態(tài)過于復雜的三條橫線符號。

二、IOS 人臉 ID 與密碼圖標

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

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

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

三、開關

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

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

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

與曲折的造型演變不同，開關的交互模式是相對恒定的：撥動開關后提供即時結果，如同真實世界中撥動開關后燈會立刻亮起，撥動開關后機器能立刻進入開機狀態(tài)一樣。同樣的，這也對我們?nèi)粘Ｊ褂么嗽刈鲈O計時起著約束作用。

四、紅點

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

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

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

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

可為什么新消息的通知形式，由純數(shù)字、標點符號轉(zhuǎn)變?yōu)閹У咨男问?？為什么選擇了紅色？雖較難考究，但結合那段時間新消息反饋形式的演變過程推測，圖形化解法的背后或許有如下考慮：

①更統(tǒng)一&通用的解法，以降低系統(tǒng)的復雜度，塑造穩(wěn)定的用戶認知。

黑莓在 Blod 9000 中正式選擇"圖標徽章"，在此之前新消息的通知方式仍為圖標左上角的"*"符號；有趣的是在這波更新中，"系統(tǒng)聲音狀態(tài)"的反饋形式也得到了升級，并且也使用了"圖標徽章"的形式?？梢钥闯龊谳Ｍ靡环N統(tǒng)一、通用的形式整合相似的信息。

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

②更易被識別的視覺形態(tài)，以節(jié)省用戶篩選信息的時間。

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

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

寫在最后

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

如有紕漏歡迎指出。

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