產品經理的UX——移動端的輸入操作設計

1 評論 10013 瀏覽 125 收藏 9 分鐘

UX是User experience的縮寫,指用戶體驗,UX設計指以用戶體驗為中心的設計。UX Planet (uxplanet.org)上面討論很多關于移動設計里做好UX的技巧,很多觀點都非常具有指導意義。

一.用戶的輸入

在移動端的UX設計有很多挑戰,你需要在一個什么有限的屏幕大小下去處理各種輸入。因此在設計的時候要能夠讓用戶可以通過非常簡單直觀的方式去完成輸入,并提供給用戶完整但簡潔的提示。

1.文本輸入框

文本輸入框(Text Field)最常用的一種輸入方式。一個體驗好的文本輸入,要能夠讓用戶快速地完成輸入,在用戶輸入時為用戶提供幫助、在用戶出錯的時候要能夠讓用戶明白錯在那里。

用戶輸入時,要求輸入的數據類型應該和當前的鍵盤相匹配。比如要用戶輸入手機號碼,那么焦點落到輸入框時,彈出來的應該數字鍵盤。這樣減少了用戶切換鍵盤的麻煩。

1

還有一個提升輸入速度的方式那就是自動切換大小寫,即首字母為大小,第二個字母開始為小寫。這個適用于在英文的輸入中,比如輸入英文名,或者英文句子的首行。

提供缺省值和自動完成

缺省值提示可以幫助用戶快速完成輸入,這個缺省值可以是用戶之前輸入過的文本,或者系統提供的一些熱門詞匯。

自動完成是在用戶輸入的過程里,根據用戶的輸入來給出建議。用戶可以通過系統的建議來自動完成輸入。當然這依賴于系統建議的精準度。

2

輸入提示信息

用戶在輸入過程中應該給予用戶足夠多的幫助。這種幫助包括對輸入項的解析,以及對輸入信息的提示。同時,任何一個標題(Label)都應該是簡潔明了的。

除了常規的在輸入框左上角寫明Label外,有一種簡潔的做法是使用Inline Label。

3

當然這種做法雖然簡潔,但不好的地方是當用戶開始輸入之后,就看不到這個提示內容了。甚至有些用戶可能會誤認為這已經填寫內容了。

用戶Floating Label的交互方式可以解決這個問題:

4

輸入驗證

用戶是有可能輸入出錯的,系統應該給予用戶及時的反饋——如果我做對了,請讓我知道;如果我做錯了,告訴我錯在那里。

給予用戶的提示不應該中斷用戶當前的操作。不要用彈出框讓用確認的方式,在恰當地位置(比如輸入框下面)給出說明即可。

5

同時提示也應該有對提示的顏色區分。一般情況下,紅色對應錯誤,綠色對應正確,黃色對應警告。

而對于有字符數限制的輸入,當用戶輸入超過限制的字符時,還應該紅色標記用戶輸入的字符數和限制字符數。有些系統在處理這個問題的時候,是直接不讓用戶繼續輸入,或者只提示用戶輸入的字符超出限制了,這都是不好的做法,前者讓用戶摸不著頭腦,而后者則需要用戶不斷嘗試減少多少才不超出。

6

2.Radio按鈕

7

Radio按鈕用于在用戶有多個選項,但用戶只能選擇其中一個的時候。讓用戶進行有限選擇,而非直接輸入的方式,可以比較有效地減少用戶輸入錯誤的數據。

當需要用戶進行設置的時候,使用Radio來讓用戶進行操作是一種比較好的做法。

在使用Radio的時候,需要注意的幾個關鍵點是:

  • 選項的排序應該按邏輯排列,不要簡單地按字母順序來排。當然有時候這個也有例外,比如在國家選擇里,你要選擇中國(China),在按字母順序排列的選項了用戶可以非??旖莸赝ㄟ^定位到“C”開頭的選項來找到”China”。
  • 選項的說明應該簡短易懂,這個文案的功夫。
  • 進行默認選擇,以及None選項(在用戶可以不選擇的情況下)。

8

  • ?選項垂直排列,不要水平排列。下面這種是糟糕的做法。

629728-6c70c7c38aecc877

當然這個也不是絕對,但如果你要將選項水平排列的話,選項應該盡可能少,并且可點擊的區域足夠大,比如下面這種:

9

  • Radio的點擊區域要包含整個Radio區域(按鍵和標簽),即右邊這種方式:

10

  • 不要在選項之下,還有選項。

11

  • 你當然也可以用下拉列表做選擇選項,但如果選項數量少的時候,用Radio是更好的做法。

12

3.Slider滑桿

13

滑桿輸入其實也是數值輸入。當我們對輸入精確的數值不那么在意的時候,采用滑桿的方式更加方便、體驗更好。

14

比如音量的輸入,我們當然不在意音量的精確數值是多少,我們在意的是現在的音量是高了還是低了,我們想要調高還是調低。

15

當然, 如果有時候還需要在調整完畢之后,查看下當前狀態的數值,我們可以將對應的數值標示出來。

16

作者:陳小健

來源:http://www.jianshu.com/p/89f83a369901

本文由@陳小健 授權發布于人人都是產品經理,未經作者許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 正好工作中有用到,很有啟發。非常感謝。

    回復