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

小紅點(diǎn)長(zhǎng)什么樣？

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

...

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

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

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

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

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

關(guān)于圖標(biāo)之母更詳細(xì)的介紹：

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

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

三、開關(guān)

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

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

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

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

四、紅點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

寫在最后

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

如有紕漏歡迎指出。

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