【10分鐘學交互設計精髓】 控制項(1)

Hello，小夥伴萌！大家好，作為一隻產品狗狗，怎麼能不懂點交互呢。如果你是0基礎學習的小白，如果你想提升交互設計的理論知識，那麼就跟著我一起學習交互設計精髓吧，我們爭取10分鐘梳理一個知識點喲！

《交互設計精髓4》堪稱交互設計的葵花寶典。But，這本大頭書實在是太太太大頭了。。。。下面小編給大家梳理知識點，幫助大家快速獲取最重要信息，節省閱讀時間。一個知識點10min，有小夥伴想跟著一起讀的嗎？有任何建議也可以給我留言或者私信么么噠。

今天的主題是控制項。控制項是用戶與各個數字產品溝通的交互語言。就像網頁上那些個按鈕，文本編輯框，滾輪等等都是控制項。這些標準的東西在各個GUI開發庫裡面都有，但存在著被濫用和誤用的情況，今天我們就來看看到底怎麼用控制項吧。

控制項四個類型：

• 命令控制項 imperative control ：用於啟動功能；

• 選擇控制項 selection control ：用於選擇選項或數據；

• 輸入控制項 entry control ：用於輸入數據；

• 顯示控制項 display control: 用於控制應用「如何」及「在哪裡」展示它自己的數據。

  下面我們就來具體說說：

  
  

  1. 命令式控制項

  用動詞來表示的功能控制項。

  按鈕
  按鈕的重點是要告訴用戶此button可以點。扁平化按鈕能按如下左圖這麼設計，是因為用戶長時間習慣了這種方式。其實交互界還是傾向三維的設計方式（如下右圖）。

  

  圖標按鈕

  當按鈕從傳統的對話框移到工具欄的時候，被稱為圖標按鈕。

  但是圖標按鈕的問題在於：用戶很難一下看出圖標到底是幹什麼的。所以需要工具提示（tooltips）。但是另一個問題的，每次都通過提示來表明圖標按鈕的功能未免太啰嗦了，所以採用清晰文字說明的菜單能夠解決這個問題，如微軟的ribbon控制項。

  

  

  超鏈接

  不建議用超鏈接的交互方式來表示一個功能。

  鏈接是一種僅與瀏覽導航密切相關的習慣用法。如果點擊一個鏈接就執行一個動作（例如打開一個對話框），這將是非常令人費解和混亂的。因此，一般來說，鏈接還是應該被用在瀏覽內容上，而在動作和功能上採用按鈕和圖標按鈕。—-《about face 4》

  鏈接用於導航，按鈕用於動作。—-《about face 4》

• 2. 選擇控制項

  選擇控制項和輸入控制項是用名詞來表示的。常見的選擇控制項有：

  • 複選框 check box
  • 列表框 list box
  • 下拉列表 drop-down box
  • 彈出列表 pop-up box

  

  那麼問題來了，既然是個名詞性的選擇控制項，名詞是否要觸發動作？這個需要看是在用戶選擇後，再點擊命令按鈕看到結果；還是用戶點擊完，立馬需要看到結果。
  複選框

  一般為方形，可以選擇多個，並且點擊後可以取消某個的按鈕。其缺點是，用戶需要閱讀旁邊的文本，有些浪費時間，且占屏幕空間。

  

  開關按鈕

  點擊的時候凹下去，就等於開啟；再次點擊的時候凸起來，表示關閉。用圖標的方式表達，節省了屏幕控制項，但是需要tooltips來幫助用戶理解。

  

  狀態切換按鈕

  減少使用狀態切換按鈕，因為沒有辦法告訴用戶當前的狀態是什麼。

  

  單選按鈕

  一般為圓形。相斥的選擇按鈕，只能選擇一個。單選按鈕可以節省屏幕空間，經驗豐富的用戶可以通過空間記憶和模式識別來分辨它們。

  開關

  

  組合圖標按鈕

  在下拉列表中，用單選圖標按鈕來取代圖標按鈕，就行成了一個組合圖標按鈕。

  另外有種變體，把向下的箭頭變成向右的箭頭，主要也是節省屏幕空間。

  

  3. 列表控制項

  列表控制項就是有一串下拉字元串可以供用戶選擇，每個字元串代表了命令、屬性或對象

  

  列表控制項的擴展和改良
  1. 列表控制項的擴展有滾筒控制項，如下：

  

  1. 改良的列表控制項：在文字字元串前面加上圖標；或者在列出選擇的時候，也列出了預覽視圖

  

  1. 列表內容通過托拉拽的方式，直接到輸入框裡面
  2. 組合框（combo box）：幾種列表方式的組合，如輸入框+下拉列表選擇框。優勢是有效節省屏幕控制項，動態增加項目能力

  

  1. 樹形控制項：用來表達層次關係的數據，條目可以展開或者摺疊。可用於文件系統導航。但是會阻礙用戶去思考層次之間的關係

  列表的排序

  • 按屬性排序 支持按照文件名稱，文件類型，修改日期，文件大小等進行排序
  • 按點擊數排序支持按照用戶的點擊次數進行排序
  • 支持文件置頂 按用戶的需求支持文件置頂功能
  • 下次登錄默認之前設置 記住每個session的設置

  列表控制項的交互方式

  • 選中設置當用戶選擇某個文字字元串的時候，會用突出的顏色來顯示
  • 單選的時候，如果文字字元串太多，當用戶選擇一個，滾動後，再選擇一個，他並不知道上一個已經被取消
  • 複選 但是如果文字字元串是多選的情況。如果多選的內容是可以一屏看到的話，可以突出選中圖標的交互；但是如果多選的內容不是一屏可以看到的話，（1）如果用滾動條，會導致用戶看中了下一條，想取消上一條的時候找不到在哪裡。所以多選的情況，要對應多選框來區分，不要再用單選的圓形按鈕了。
  • 滾屏當用戶需要拖拽的文字字元串超出當前視圖，則要實現能夠在不放下拖動對象的情況下滾動視圖列表
  • 列表水平滾動 不要讓文本列表水平滾動，如果發生了，有以下幾個辦法可以解決：（1）將文本換行處理；（2）列表中截斷該文本，用tooltip顯示全量信息

  列表裡的操作

  • 現場編輯（edit-in-place） 考慮是否可以直接編輯
  • 下拉列表（drop-down list）和彈出列表（pop-up list）

  4. 輸入控制項

  輸入控制項可以讓用戶輸入新的信息，或設置一個值。任何允許用戶輸入數字的控制項也是輸入控制項，包括微調器（spinner）、標尺（gauges）、滑塊（slider）和旋鈕（knob）等都屬於此類。

  有界輸入和無界輸入

  限制用戶輸入值範圍的是有界控制項，反之為無界控制項（unbounded entry control）。如果輸入的值是有界限的話，那麼就應該使用有界控制項。否則用戶輸入之後再報錯，是非常糟糕的用戶體驗。

  具體來說說有哪些有界控制項吧。
  1. 微軟使用軌道條（trackbar）來提供輸入的限制

  

  1. 微調器(spinner)
     如下圖所示，在輸入框內還有兩個半高的按鈕。它有一個加號鍵和一個減號鍵。但是它的問題但是，小箭頭是有界的，但是輸入值卻是無界限的。用戶輸入值超過範圍的時候會報錯。

  

  1. 刻度盤（dial）和滑塊（slider）
     借鑒了機械時代的交互方式。刻度盤操作起來較難，適合專業的獨佔式應用，這樣可以讓用戶逐漸熟練並適應其操作。而滾動條則相對好操作一些。

  

  1. 拇指輪（thumbwheels）

     是刻度盤的變體，不過比刻度盤容易使用。普遍用在三維應用中，是一種無界控制項。

  2. 其他
     一些新的視覺化和手勢化的用法，如：

  

  無界控制項
  這類主要用於文本編輯控制項（text edit controls）。但是如果是有限的文本編輯器，（1）要麼做成列表控制項讓用戶選擇；（2）要麼需要添加驗證輸入控制項（比如限制用於不能輸入數字，並且總數在30個字母以內）。驗證輸入控制項

  驗證用戶輸入的正確性，對於有些場景還是需要驗證的，比如用戶輸入銀行卡號這種有效輸入數字很大的情況。包括日期、電話號碼、郵政編碼、社會保險號等的驗證。

  驗證的關鍵
  1. 給用戶提供充分的反饋
  2. 實時發現並處理錯誤
  3. 了解為什麼錯，並主動修復

  驗證控制項的設計要點

  與非驗證控制項主動分區，包括字體，不同的邊界顏色，欄位本身不同的背景色等

  驗證控制項類別
  1. 主動驗證
     表示為主動拒絕用戶輸入，比如不能輸入數字，則用戶無法輸入進去。
  2. 被動驗證
     當控制項失去焦點/下一個對話框/提交的時候進行驗證。交互可以通過顏色來傳達錯誤信息。
  3. 暗示
     類似於tooltip的小彈框來提示用戶的輸入範圍。此提示只有游標在控制項上停留了一會兒才出現。或者在用戶輸入錯誤的時候，出現該提示。

  

  驗證控制項處理方式
  1. 報錯，告訴用戶如何改正
  2. 幫助用戶進行轉換。如輸入英文的9，nine，幫助用戶轉換成9
  3. 幫助用戶識別單位，如輸入5mm，程序能夠識別是5毫米等。在財務分析軟體中，5m可以識別為5百萬。
  4. 不要使用文本編輯控制項輸出

  5. 顯示控制項

  顯示控制項用於顯示和管理屏幕上信息的視覺展現。包括：滾動條（scrollbar），屏幕分割線（screen splitters）。管理對象在屏幕上的視覺展現控制項和靜態顯示只讀信息的控制項都屬於這一類，包括頁面計數器（paginator），標尺（ruler），導向圖（guidelines），網格（grid），分組框控制項（group box），以及那些 凹進和凸起的線條。

  文本控制項

  它在屏幕的某個位置顯示固定信息，只是用來做其他控制項的標籤或者輸出一些不能或者不應該由用戶改變的數據。

  但是效果並不是太好，如果是可以更改的文本，為什麼不可以給用戶編輯呢？
  滾動條

  滾動條非常常見，它可以：

  1. 顯示總共多少頁
  2. 滾動時，顯示頁數/記錄數/圖形數
  3. 滾動時，顯示每頁的縮略圖
  4. 在移動端，用戶需要滾動的時候才出現
  5. 在web端，也可以將滾動條隱藏起來，滑鼠接近它的時候再顯示出來
     還可以優化的地方：
  6. 根據頁數/章/節/關鍵詞為我們提供向前跳轉的按鈕
  7. 提供跳轉到文章開始和末尾的按鈕
  8. 設置可快速返回的書籤工具
  9. 帶有注釋的滾動條，可以在滾動條的背景上顯示出被搜索詞語的位置
     滾動條的變體就是文本導航器（document navigator），用一個小縮略圖來表示整個文檔控制項，提供文檔某個部分的視圖，如下圖。這種適合和時間有關的文檔編輯。但是不適合較大的文本文檔，如果較大，可以採用提綱等結構的表達方式來替代滾動條。

  

  分割線

  將獨佔式應用分為多個相關窗格的有用工具，每個窗格的信息都可以瀏覽、操作或者變換。在窗格需要摺疊的情況下，抽屜可能是更好的習慣用法。

  抽屜

  抽屜是在獨佔式應用中可以用一次動作打開或者關閉的窗格。用於存放不常用的控制項和功能。抽屜的好處是，它不像對話框那樣會遮住主要工作區。屬性細節、可搜索的對象列表或組件和歷史都非常適合放入抽屜。

  ------------------

  未經授權，請勿轉載。首發於公眾號【一隻產品狗的生活意見】，歡迎關注交流。

推薦閱讀：