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

小紅點長什么樣？

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

...

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

一、≡ 拖拽圖標(biāo)

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

二、IOS 人臉 ID 與密碼圖標(biāo)

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

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

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

三、開關(guān)

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

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

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

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

四、紅點

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

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

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

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

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

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

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

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

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

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

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

寫在最后

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

如有紕漏歡迎指出。

歡迎關(guān)注作者微信公眾號：「We-Design