深聊軟件設計中最基礎的控件元素

 　　控件作為組織界面最基礎的元素，相信大家都不會陌生，今天想談談這個不起眼的話題。文章從現實的控件過渡到軟件界面，再用三大輸入法的控件作為實際案例解說，全文干貨滿滿，來收!

　　一、現實世界的控件

　　“放學鈴一響，小明立刻飛奔回家，到家後一手換鞋一手開燈，隨即又躺在沙發上將風扇調至最大檔。”

　　開門進屋、撥動開關、調節風速……一連串動作中的門把、燈摯、旋鈕都是我們所說的控件。那控件究竟是什麼呢?從字面上解釋，控件(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.