設計手機文本輸入框:手機端高效的文本輸入框設計

文章描述：“無中生有” 手機端高效的文本輸入框設計.

手機端的文本輸入受到使用環境、網路狀況及裝置本身條件的制約，使其使用者體驗的改良成為一個老生常談的話題。如：一直在改進的IME，新輸入方式的探索（語音輸入），甚至想盡種種辦法去避免輸入……

文本輸入本身是一個從無到有的過程，是讓使用者將空白的輸入框填滿的過程，本文避談一些尚未經過易用性測實驗證的創新設計，從本人的日常積累和實際經驗出發，以文本輸入框作為設計對象，從協助使用者認知及簡化使用者操作這兩個維度來探究這些看似簡單空白的小條能否生長出大智慧。

無中生有之“引導詞”——協助使用者認知

手機端的介面空間可謂寸土寸金，很少有空白的地區。而使用者在面對介面中一片空白的地區時往往會產生緊迫感甚至有些不知所措。如果在這片空白裡增加一些“引導詞”（即引導描述型詞條），使用者就能迅速產生認知活動，對將要輸入的內容進行快速反應和判斷。

就登陸介面的設計來說，面對無引導詞介面的使用者也許會浪費時間在想他的使用者名稱是什麼來著？是他的郵箱還是隨便起的暱稱還是他的手機號？以及他的密碼是幾位的？甚至還會浪費時間在使用者名稱的書寫格式上。而使用第二個介面的使用者會在第一時間獲知閃爍的游標處要輸入郵箱，密碼框裡的“小點點”也形象的告知了使用者密碼的顯示形式和長度。可見輸入框中增加必要的引導詞能夠提高使用者的輸入效率。

“引導詞”依據使用功能及使用情境進行分類如下：

1．輸入內容的模板

提供給使用者即將輸入內容的模板，使用者無需花費更多時間思考如何輸入。

you@website.com是約定俗成的郵箱地址的模板，能夠與使用者的心智模型相呼應，使用者能夠很快的做出反應。

2．需要輸入的片段內容

輸入內容中有部分內容是使用者經常用到或重複用到的，或者是約定俗成的，那麼把這部分內容直接作為引導詞，顯示在文本輸入框中，一方面能夠提示使用者接下來將要輸入什麼內容，一方面能夠省略這部分內容的輸入操作，進而提高輸入效率。

“www.”和“.com”等是使用者所悉知的網址協議，在輸入框中增加該引導詞能夠給使用者直觀的提醒這裡是要輸入網址的，並且省略了這些字元的輸入。

3．輸入內容的描述

使用者輸入的內容不準確會導致不準確的操作反饋時，需要增加對輸入內容的簡短描述，以降低這種誤操作的風險。

如果不提示輸入商家或地點名稱，使用者應該不會很快搞清楚這個框子裡應該輸入些什麼，使用者好不容易完成輸入，卻是輸入了一個錯誤的關鍵詞，得到的是查無結果，很難想象使用者該有多麼的沮喪。

4．輸入誘導

在多行文字的輸入框中，雖然有游標閃爍提示使用者輸入框已被啟用，可以輸入了，但是為了消除使用者在面對大片空白地區而產生緊張感也會增加引導性的文字，引導使用者輸入而不是點返回按鈕退出。

“說點兒什麼吧……”“吼一句”這些引導詞會讓使用者有親切感，引起使用者情感上的共鳴，激發使用者的操作慾望。

[1] [2]  下一頁