控制元件作為組織介面最基礎的元素，相信大家都不會陌生，今天想談談這個不起眼的話題。文章從現實的控制元件過渡到軟體介面，再用三大輸入法的控制元件作為實際案例解說，全文乾貨滿滿，來收！
一、現實世界的控制元件
“放學鈴一響，小明立刻飛奔回家，到家後一手換鞋一手開燈，隨即又躺在沙發上將風扇調至最大檔。”
開門進屋、撥動開關、調節風速……一連串動作中的門把、燈摯、旋鈕都是我們所說的控制元件。那控制元件究竟是什麼呢？從字面上解釋，控制元件（Widgets/Controls）就是可以通過直接操作而實現控制的物件。
如果從具體的屬性出發，控制元件應具備以下兩個基礎特徵：
– 可接觸的
– 可改變狀態的
而友好、易用的控制元件還應是：
– 無害的
– 不費勁的
– 有反饋的
– 愉悅的
對應諾曼提出的三個層次：
– 可接觸的+可改變狀態的——>可用的（Usable）
– 無害的+不費勁的+有反饋的——>易用的（Useful）
– 愉悅的——>吸引的（Engaged）
可接觸與無害相互依存——當還是孩子的時候我們就被教導警惕危險的訊號：有毒的、尖銳的、滾燙的……使用刀具時我們都會本能地握住刀背而非刀刃，因為圓潤無害的物體更易吸引到主動的接觸。
那所謂的三個層次又是怎麼回事呢？請看下面這三種卸妝油：
– 同樣是200ml的卸妝油，使用Muji（左）時需要將整個瓶子傾斜才能倒出（有點麻煩，但依舊是可用的）；
– DHC（中）使用小泵輕輕向下擠壓即可，操作成本更低更方便（暫不考慮對擠出量的要求，相對而言更易用）；
– Fancl（右）除了按壓式的抽取裝置外，還附帶一個卡住頂部的小部件——它考慮到女士攜帶卸妝油外出的場景，優雅地解決了意外溢位的問題，小小的部件讓人感到安全又貼心。
注：以上全為日本國際品牌，絕非廣告。
我們身邊還有非常多優秀的控制元件，比如隨處可見的汽水瓶瓶蓋：
- 當拿到一瓶汽水時，我們會很自然地擰動圓形的塑料瓶蓋（可接觸的+無害的）；
- 根據過往的經驗，首次開啟需要花費更大的力氣。這種相對困難就暗示著：“這是一瓶全新的汽水，沒人喝過，可以放心飲用”（有反饋的）；
- 為了增大摩擦力，瓶蓋外側往往印有規則的凹凸紋路（不費勁的）；
- 順利扭開瓶蓋時，泡沫迅速上升併發出“ci——”的聲響（有反饋的+愉悅的）；
- 最後汽水可以從瓶中倒出（可改變狀態的）。
整個開啟過程非常簡短，前後只是2-3秒的時間，卻能給飲用者帶來非常愉悅的體驗。可樂、雪碧等飲料廣告最大的共同點就是：無論劇情如何變化，“開啟瓶蓋”的鏡頭一定會有！
如果你有興趣發掘更多物理控制元件，但一時間又無從下手，我強烈建議你去一趟IKEA：各式各樣的控制元件讓人看著好興奮！
二、軟體世界的控制元件
人是非常聰明的動物，總能通過舉一反三的方法來降低工作成本。從輸入命令列的DOS到使用圖形介面的Windows，現實世界的控制元件被巧妙地運用到軟體介面中。
一開始，UI設計師藉助隱喻的方法，以現實的物件和操作為藍本仿造出各種圖示和控制元件；慢慢地，又利用軟體獨有的特性，歸納和抽象出更為直觀和高效的控制元件。日常生活中的『tab標籤』用於分門別類，而軟體中的『tab標籤』除了組織內容和快速索引外，還能對介面空間進行有效的擴充套件。
如果按功能劃分，控制元件可歸為以下5類：
– 觸發操作：按鈕、滾動條、手柄…
– 資料錄入：文字框、核取方塊、滑塊…
– 資訊展示：氣球提醒、載入器、進度條、啟動頁、工具提示…
– 容器：視窗、tab標籤頁…
– 導航：麵包屑、導航條、分頁器…
其中，操作類和資料錄入類有著更豐富的互動，選取幾個比較有代表性的：
1. 中規中矩輸入框
我們能輕易地聯想到輸入框的原型，因為它無論外形上還是操作上都保留著現實世界的影子：
– 填補空缺資訊 vs 表單中「標籤+輸入框」的組合
– 空白處可填寫，留白空間的大小視情況而定 vs 文字框可輸入資訊，根據資訊的型別選用不同的寬度（比如輸入年齡、網址、程式碼等）
– 下筆前將筆尖挪到空位處 vs 點選文字框，游標在起始位置閃爍
– 內容過多時溢位 vs 輸入資訊超出寬度時自動縮排
軟體介面設計很奇妙的一點是工作模型不必受物理上的限制，然後輸入框還能這樣玩：
– 未填寫時：框內用顏色飽和度較低的文字/圖示提示程式期待的內容；
– 滑鼠滑過時：指標變成游標，暗示可進行輸入操作；
– 滑鼠聚焦時：邊框高亮；提示資訊被清除；游標閃爍；
– 輸入內容：邊框持續高亮；密碼非明文顯示；實時反饋密碼安全等級、有效性；
– 輸入完成：高亮消失；輸入內容的顏色飽和度高，可快速區分未填和已填。
另外輸入框內的資訊還可按需選擇不同的對齊方式；在右側安排「×」圖示用於內容的快速清除；還能根據使用者輸入的關鍵詞實時聯想……
2. 抽象好用核取方塊
單選按鈕和核取方塊都無法在真實生活中找到對應的原型。它們不是一目瞭然的元件，都必須經過學習；同時又非常容易學習，一旦使用過就不會忘記，是利用“習慣用法”設計的典型例子：
– 5個基本狀態：未選（可用）、選中（可用）、未選（禁用）、選中（禁用）、聚焦
– 2個方向：核取方塊常以多個組合出現，其排布方式有：
縱向：適用於選項內容較多或資訊長度差異較大的情況；
優點：嚴格對齊，佈局美觀；勾選多個時滑鼠移動距離短；
缺點：佔用較多空間，把表單拉長。
橫向：適用於選項數量多且內容簡短的情況；
優點是佔位少，缺點是選項間距離較遠，同時需要考慮一些細節問題：
a. 如果單個選項的寬度固定，超出的資訊如何展示？
b. 如果不固定，如何避免佈局混亂？
– 互動：
小小的方形對指標瞄準的精確度要求較高。為了方便操作，將選框和文字繫結以擴大點選區域，同時從視覺上給使用者提供預期：例如當滑鼠滑過時，將兩者作為整體進行反饋。
另外，當使用者選擇多個時，有什麼辦法能減少點選、快速選中多個呢？在windows中「框選」可一次性選中多個檔案；在photoshop中按住滑鼠左鍵不放並滑動可快速隱藏多個圖層。
3. 褒貶不一開關鍵
前面兩個控制元件在ui界的重要地位毋庸置疑，與它們相比，開關鍵爭議不少。
Apple Watch 互動指南中對開關的描述是：
定義：代表兩種互斥的選擇或狀態
特徵：
1. 指示二元狀態
2. 通常包含標籤
適用於：讓使用者在兩個選項中選擇的其中一項，比如on/off，yes/no
我第一次接觸開關是在移動應用的介面上，有非常長的一段時間都很困惑：這究竟是狀態還是操作？
這個困惑跟手機輸入法早期的「中英文切換」有點類似：當使用全鍵盤時，我一直無法判斷將要輸入的語言。切換按鈕上“英文”的意思是：
a. “好啦，現在開始輸入英文。” 抑或 b. “想換成英文輸入法請點我！”
很多次傳送資訊時，快速按下多個字母后才反應過來當前是英文狀態。然後不得不逐個地刪除鍵入的內容，切換為中文再很沮喪地重新輸入一遍。後來很多廠商都對此進行了優化：
– 搜狗：切換語言時有toast提示狀態，切換按鈕改成【英/中】的樣式，突出當前語言，弱化點選操作後的語言；
-百度：在空格鍵處顯示當前輸入方式「百度拼音」，點選左側的【ABC】可切換成英文，切換後按鈕文案變成【返回】；
-谷歌：舊版使用標籤頁切換中英文，新版點選「地球」圖示可以直接切換到原生英文輸入法，取消了中英文切換按鈕。
總的來說，要指示二元狀態開關鍵是個不錯的選擇（優於單個checkbox），但使用時必須明確地區分“狀態”與“操作”，我總結了比較關鍵的兩點：
1. 規範標籤文案。動詞、形容詞的屬性應做到一目瞭然，比如使用「開啟」和「已開啟」，而不是既用「開啟」表動作，又用「開啟」表狀態；
2. 使用合適的心理模型。說到這裡不得不提粵語中某些字詞的妙用：需要消耗能源的物件的停止運作廣府人通常稱為「熄」，比如「熄電話」、「熄電腦」、「停車熄匙」……「熄」是一個視覺化的文字，使聽者彷彿看到了這樣的畫面——摁下按鈕後電腦開始退出程式，直至最後螢幕變黑了、指示燈也滅了。Macbook鍵盤上CapsLock鍵的設計也跟「熄」的心理模型不謀而合，目前很多開關鍵的視覺設計都使用了類似的隱喻。
雖然開關鍵已被廣泛地運用到了軟體介面中，但據我瞭解還是有相當一部分人有使用障礙，你是怎麼看的呢？
三、繼續深入控制元件
介面設計從業者都有必要花時間瞭解圖形介面誕生的歷史，以及被使用者熟練使用的控制元件在不同版本的變化。在我們公司，每位新來的設計師都需要完成一個任務：臨摹不同平臺的核心控制元件。
或許你會說：Axure、Sketch 自帶的控制元件已經非常豐富了為什麼還要重複做？這不是自討苦吃嗎？
確實，主流的原型製作軟體已覆蓋到大部分常用的控制元件，一拖一放即可，輕鬆簡便。但也正是太輕鬆，太信手拈來，以致在很多設計師眼裡控制元件就是這麼理所當然。常說互動設計師應認真閱讀不同平臺的互動指南，但又有多少人讀過譯文或“精華版”就上陣設計了？
有沒有想過Android的Navigation Bar選單為什麼要放在邊界處？是費茨定理的應用嗎？為什麼是左側而不是右側？喚出選單的操作方式、過渡的顏色變化、跳轉的動畫細節又是基於什麼考慮？在臨摹的過程中仔細推敲，品味控制元件的視覺層次結構和隱含的認知心理學，思考為何它能被廣泛應用？為何能得到使用者認可？是否還有不盡人意的地方？（從4.x 到Material Design設計規範都在不斷地調整）
我司開發的是面向企業客戶的網際網路營銷工具，需要實時監測和量化全流程營銷中每個節點的效果。在資料包表佔據螢幕大部分空間的情況下，還要保證運營人員/優化師能便捷且快速地使用豐富的功能來進行資料分析。這就要求設計師對海量功能進行合理整合，並在非常有限的空間內組織布局。產品中再細小的元素都經過深思熟慮，每個模組都經過謹慎安排，真正做到聚焦最核心的使用者場景。
在系統中新建RTB廣告活動可以從多個維度精準定向人群，下面是地域定向投放的原型方案之一，其中混合了7種基礎控制元件：
1，列表
– 利用斑馬行分組，使使用者不會混淆行與行之間的資料（格式塔的相似性與封閉性原理）；
– 點選首列被加粗的選項，可快速選中組內的多個省市；
– 右側的省份利用對齊和留白代替豎線進行分隔。
2，下拉選單：曾想過使用開關鍵來表示包含/排除，但最終決定選擇下拉選單。除了因為開關操作模稜兩可，還考慮到以後會增加更多規則，下拉選單更利於擴充套件。
3，搜尋：輸入關鍵詞、按下Enter鍵後進入搜尋狀態（圖略）
4，標籤欄
– 標籤間增加“或”的文案，消除“多選一”的歧義；
– 旗下選項有被勾選時，在標籤右上方標明選中的個數。
5，文字按鈕：提供城市等級、反選、清空的快捷選項
6，核取方塊
– 區分三種狀態：未選、部分選中、全選，部分選中在右側說明佔比；
– 有細分城市和地區的省份使用不同的顏色區分，暗示使用者有二級選單。
7，嵌入彈層：滑鼠滑過選項時顯示
其他方案還包括：樹表+字母索引、雙皮膚選擇檢視……這類 to b 的產品有著既定的業務邏輯和相對複雜的資訊架構，設計過程中不能隨意地做減法。枯燥的臨摹訓練是一個磨刀的過程，但磨刀不誤砍柴工，設計師只有對控制元件有了深刻理解才能對其進行不斷的加工和優化，進而設計出能滿足業務需求的複雜控制元件。
四、寫到最後
『 Designing Interface 』一書收錄了大量的介面設計模式，互動設計圈估計是人手一本了，作者 Jenifer Tidwell在書中把「控制元件」比喻成「設計詞彙量」，他說道：
擴大詞彙量有助於提高你在某種語言上的表達能力，擴大「設計詞彙量」可以幫助你更好地進行設計。但要記住，介面設計真正的藝術在於：解決正確的問題。
我們在學生時代都背過不少成語和詩句，期待著能運用到寫作中增加「閃光點」；但我們也知道有一類低分作文叫「堆砌辭藻、言而無物」。介面設計也如此，熟讀「控制元件字典」只意味著可以靈活呼叫合適的控制元件拼湊表單，終究不能做出深入人心的設計。
試想一下，當使用者與機器互動的媒介不再是鍵盤和滑鼠；當使用者只能通過編碼來進行資料交換；甚至連螢幕都沒有（比如10086的語音選單）……那設計師該怎麼做？
讓我們都回歸到設計的本質吧。