手機(jī)文本輸入框的設(shè)計(jì)方法介紹(圖文)

2024-07-11 08:48:20

字體：大中小

供稿：網(wǎng)友

手機(jī)端的文本輸入受到使用環(huán)境、網(wǎng)絡(luò)狀況及設(shè)備本身?xiàng)l件的制約，使其用戶體驗(yàn)的改良成為一個老生常談的話題。如：一直在改進(jìn)的輸入法，新輸入方式的探索(語音輸入)，甚至想盡種種辦法去避免輸入……
　　文本輸入本身是一個從無到有的過程，是讓用戶將空白的輸入框填滿的過程，本文避談一些尚未經(jīng)過易用性測試驗(yàn)證的創(chuàng)新設(shè)計(jì)，從本人的日常積累和實(shí)際經(jīng)驗(yàn)出發(fā)，以文本輸入框作為設(shè)計(jì)對象，從幫助用戶認(rèn)知及簡化用戶操作這兩個維度來探究這些看似簡單空白的小條能否生長出大智慧。
　　無中生有之"引導(dǎo)詞"——幫助用戶認(rèn)知
　　手機(jī)端的界面空間可謂寸土寸金，很少有空白的區(qū)域。而用戶在面對界面中一片空白的區(qū)域時往往會產(chǎn)生緊迫感甚至有些不知所措。如果在這片空白里增加一些"引導(dǎo)詞"(即引導(dǎo)描述型詞條)，用戶就能迅速產(chǎn)生認(rèn)知活動，對將要輸入的內(nèi)容進(jìn)行快速反應(yīng)和判斷。
手機(jī)文本輸入框設(shè)計(jì) 武林網(wǎng)

就登陸界面的設(shè)計(jì)來說，面對無引導(dǎo)詞界面的用戶也許會浪費(fèi)時間在想他的用戶名是什么來著?是他的郵箱還是隨便起的昵稱還是他的手機(jī)號?以及他的密碼是幾位的?甚至還會浪費(fèi)時間在用戶名的書寫格式上。而使用第二個界面的用戶會在第一時間獲知閃爍的光標(biāo)處要輸入郵箱，密碼框里的"小點(diǎn)點(diǎn)"也形象的告知了用戶密碼的顯示形式和長度?？梢娸斎肟蛑性黾颖匾囊龑?dǎo)詞能夠提高用戶的輸入效率。"引導(dǎo)詞"依據(jù)使用功能及使用場景進(jìn)行分類如下：
1.輸入內(nèi)容的模板
　　提供給用戶即將輸入內(nèi)容的模板，用戶無需花費(fèi)更多時間思考如何輸入。

　　you@website.com是約定俗成的郵箱地址的模板，能夠與用戶的心智模型相呼應(yīng)，用戶能夠很快的做出反應(yīng)。
　　2.需要輸入的片段內(nèi)容
　　輸入內(nèi)容中有部分內(nèi)容是用戶經(jīng)常用到或重復(fù)用到的，或者是約定俗成的，那么把這部分內(nèi)容直接作為引導(dǎo)詞，顯示在文本輸入框中，一方面能夠提示用戶接下來將要輸入什么內(nèi)容，一方面能夠省略這部分內(nèi)容的輸入操作，進(jìn)而提高輸入效率。

　　"www."和".com"等是用戶所悉知的網(wǎng)址協(xié)議，在輸入框中增加該引導(dǎo)詞能夠給用戶直觀的提醒這里是要輸入網(wǎng)址的，并且省略了這些字符的輸入。
　　3.輸入內(nèi)容的描述
　　用戶輸入的內(nèi)容不準(zhǔn)確會導(dǎo)致不準(zhǔn)確的操作反饋時，需要增加對輸入內(nèi)容的簡短描述，以降低這種誤操作的風(fēng)險(xiǎn)。

　　如果不提示輸入商家或地點(diǎn)名稱，用戶應(yīng)該不會很快搞清楚這個框子里應(yīng)該輸入些什么，用戶好不容易完成輸入，卻是輸入了一個錯誤的關(guān)鍵詞，得到的是查無結(jié)果，很難想象用戶該有多么的沮喪。
　　4.輸入誘導(dǎo)
　　在多行文字的輸入框中，雖然有光標(biāo)閃爍提示用戶輸入框已被激活，可以輸入了，但是為了消除用戶在面對大片空白區(qū)域而產(chǎn)生緊張感也會增加引導(dǎo)性的文字，引導(dǎo)用戶輸入而不是點(diǎn)返回按鈕退出。

　　"說點(diǎn)兒什么吧……""吼一句"這些引導(dǎo)詞會讓用戶有親切感，引起用戶情感上的共鳴，激發(fā)用戶的操作欲望。
　　無中生有之"附加控件"——簡化用戶操作
　　為了使文本的輸入效率更高，文本輸入框可以與一些控件進(jìn)行關(guān)聯(lián),依靠這些控件來簡化或方便用戶對輸入文本的編輯操作。歸納幾種輸入框常用的附加控件如下：
　　1.單位控件
　　某些特定條件的輸入內(nèi)容本身就是一個單位，如收件人的郵箱地址，收信人的電話，好友的名稱等。將每個單位轉(zhuǎn)化為控件按鈕，可以方便用戶對單位信息進(jìn)行編輯操作。

　　添加收件人的輸入操作中，輸入的每個收件人名字自成一個單位，以分號隔開顯示，當(dāng)輸入框再次獲得焦點(diǎn)時每個單位文字變成控件按鈕。編輯時可以就某個單位進(jìn)行單獨(dú)編輯，或刪除，提高整體輸入效率。
　　單位控件的樣式需結(jié)合具體的輸入內(nèi)容進(jìn)行設(shè)計(jì)，可以是按鈕形態(tài)，也可以是其他形態(tài)。位置可以在輸入框內(nèi)部也可以在外部，依具體情況而定。
　　2.刪除控件
　　在手機(jī)上輸入文字困難，刪除大段的不必要文字同樣困難，在設(shè)計(jì)時需要根據(jù)用戶的使用情景充分考慮這一需求，使輸入框附加一鍵刪除按鈕。

　　瀏覽器地址欄中的"地址輸入框"常常需要用戶將其清空重新輸入新的地址，因此當(dāng)已有內(nèi)容的地址欄獲得焦點(diǎn)時，在輸入框內(nèi)增加一個清除按鈕，方便用戶快速的清空現(xiàn)有內(nèi)容，開始新的內(nèi)容輸入。

　　在微博的編寫過程中，用戶常常輸入了一段文字后感覺并不是合適的，需要重新輸入，此時輸入框中的清除按鈕就可以讓用戶快速清除當(dāng)前輸入的所有文字。
　　刪除控件多位于輸入框末端。在單行文本輸入框內(nèi)為了節(jié)省空間刪除控件可以是隱藏的，與文本選擇進(jìn)行關(guān)聯(lián)。
　　3.提醒控件
　　手機(jī)中關(guān)于文字輸入的字?jǐn)?shù)有很多限制，比如每條手機(jī)短信限制160個字符，微博限制140個漢字等等，用戶常常會因?yàn)椴恢老拗茥l件或者忘記了限制條件而進(jìn)行了誤操作，浪費(fèi)了時間。那么在輸入框中增加提醒控件，提醒用戶目前還有多少個字符可以輸入，避免用戶輸入超出字?jǐn)?shù)限制。

該控件多內(nèi)嵌于輸入框中的右下腳，并與輸入內(nèi)容本身在顏色或字體大小上做區(qū)分設(shè)計(jì)，不能喧賓奪主，打擾用戶的輸入過程。結(jié)論：
　　設(shè)計(jì)手機(jī)文本輸入框時，以用戶需求為出發(fā)點(diǎn)，結(jié)合使用場景，在空白的輸入框樣式中增加引導(dǎo)詞、附加一些小控件的設(shè)計(jì)手段可以幫助用戶對將要輸入的內(nèi)容有更好的理解和把握，減少用戶在輸入過程中產(chǎn)生的錯誤，方便用戶對已輸入的內(nèi)容進(jìn)行編輯和修改，達(dá)到提高用戶輸入效率的目的。
　　當(dāng)然這些"無中生有"的設(shè)計(jì)策略，在實(shí)施時要注意樣式的展示和交互上的細(xì)節(jié)，盡量做到簡潔、低調(diào)，因?yàn)檩斎氲奈淖植攀怯脩粼谳斎脒^程中需要重點(diǎn)關(guān)注的對象，不要讓復(fù)雜的設(shè)計(jì)打擾用戶。

上一篇：移動互聯(lián)網(wǎng)網(wǎng)設(shè)計(jì)之碎片時間里的高效設(shè)計(jì)

下一篇：網(wǎng)頁設(shè)計(jì)經(jīng)驗(yàn)之杜絕設(shè)計(jì)中的視覺噪音(圖文)