手機文本輸入框的設計方法介紹(圖文)

2024-07-11 08:25:53

字體：大中小

來源：轉載

供稿：網友

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

就登陸界面的設計來說，面對無引導詞界面的用戶也許會浪費時間在想他的用戶名是什么來著?是他的郵箱還是隨便起的昵稱還是他的手機號?以及他的密碼是幾位的?甚至還會浪費時間在用戶名的書寫格式上。而使用第二個界面的用戶會在第一時間獲知閃爍的光標處要輸入郵箱，密碼框里的"小點點"也形象的告知了用戶密碼的顯示形式和長度。可見輸入框中增加必要的引導詞能夠提高用戶的輸入效率。"引導詞"依據使用功能及使用場景進行分類如下：
1.輸入內容的模板
　　提供給用戶即將輸入內容的模板，用戶無需花費更多時間思考如何輸入。

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