聊一聊在APP開發時表單的設計

今天我們聊一聊在APP開發時表單的設計。

創建表單時，交互設計師總是會面臨一個選擇，選用哪種UI元素來表示可選項的操作。當然，我們每個人都有自己的法則。但是，在選用可選項控件時，仍然要多加考慮。

 

可選項可以用勾選框、開關、單選框和下拉菜單表示。選擇得當的話，任何一種都非常出色。本文中，我們重點關注勾選框和開關。

 

勾選框用在一系列選項中，用戶可以選擇任意數量，包括0個、1個，或者許多個。換言之，每個勾選框在列表中都是相互獨立的，勾上一個框并不會取消其他選項。

 

開關組件是在仿照物理開關，讓用戶打開或關閉某個項目。開關提供了兩種簡單直接的對立選項，通常用于表現一個動作(例如開始或停止某個操作)。它類似于電燈開關。

 

勾選框應當是一個小方框，選中時有一個勾，或者一個叉。

用戶在操作各種控件時，應當提供清晰的視覺反饋。細微的動畫能讓體驗更細致——在移動應用中尤其如此，比如iOS7/8的開關按鈕。

縱向展示列表，每行一個選項。這對于開關和勾選框都有效。如果一定要橫向排列，一行有多個選項，就要調整好按鈕和標簽的距離，哪個選項對應哪個標簽清晰明了。下面的例子中，元素之間的距離都太近了。

 

勾選框要使用肯定的文案。使用肯定、有效的文案作為勾選框的標簽，用戶就很清楚如果勾上選框會發生什么。避免“不要給我發郵件”這樣的否定文案，這就意味著用戶要勾上選框來阻止某些事發生。

勾選框永遠都應該使用肯定的指令，不能用否定文案，例如“請勿……”勾選框使用Label標簽，增大操作區域。所有的勾選框都有標簽，但并非都使用label標簽。勾選框本質上很小，但是根據費茨定律，它們就很難點擊或者點按。要增大操作區域，讓用戶在點擊或點按標簽與相關文字時就能選中選項，而不僅僅是那個小方框。

 

設計界面時，交互元素的選擇要保持一致、可預期。遵循設計標準，能讓用戶更好預測控件的功能、如何操作。相反，違背標準會讓界面感覺很脆弱——好像會毫無預兆發生任何事情。