為行動裝置打造美好的輸入框（上）
輸入框（Input / Text field）是常見的介面交互元件，提供給用戶輸入資料給服務，多用於對話、登入註冊、資料表單等設計中。除了有單一輸入框的型態，也有與其他元件如圖示或按鈕的組合型態。
與其他交互元件相比，用戶在與輸入框互動時會花上更多的時間，也更容易產生不悅的感受。因此我們不能只是設計漂亮的輸入框，更要進一步思考用戶的使用情境與行為，也要避免在行動裝置上沿用桌機的經驗。
以下幾點建議是我認為在設計行動裝置的服務時，可以為輸入框加強的細節。同時為各個要點提供相對應的案例截圖，讓各位能更理解內容。
一、隨著內容增長
一般來說，聊天介面的輸入框預設會設計為一行文字的高度，不過很常會遇到多行內容或使用換行。為了讓用戶可以順利檢視已經輸入的內容，我們可以將輸入框的高度設計為動態的，當文字超過一行便會向上延展高度，至少要可以顯示三至五行，超過則不用再變動。這其中有兩點要注意：
- 輸入框上方邊界盡可能不要完全切齊文字，故意露出文字下半部可以引導用戶知道有更多文字在上方。
- 要讓用戶可以上下捲動內容，避免溢出框外的內容無法再被檢視。
二、顯示字數限制
有字數限制的服務中最知名的有 Twitter 以及微博（目前 Twitter 僅部分開放，微博已全面取消字數限制），也常見於暱稱與訊息功能。若你的設計也有相同限制，最好在輸入框附近顯示剩餘字數，並且當字數超出限制時，用更顯眼的樣式提示用戶，不要讓他們疑惑為什麼無法進一步操作。
三、自動聚焦並喚起鍵盤
如果用戶即將進入到一個預期要輸入文字的介面，可以在進入後直接讓輸入框獲得焦點並喚起鍵盤，減少用戶要再次點擊輸入框的操作。例如：進入搜尋頁面或登入頁面。
然而此種設計會讓鍵盤在一開始就阻擋到頁面下方多數區域，因此必須加入其他操作方式讓用戶可以收下鍵盤，例如點擊或滑動輸入框外的區域，才不會影響整個使用體驗。
四、避免讓鍵盤遮蔽到主要按鈕
延續上個要點，這類問題常發生於設計師或產品經理在規劃頁面時未妥善考慮，開發後才發現送出按鈕會被鍵盤完全遮蓋，甚至也沒設計其他方式可以收下鍵盤，導致用戶無法送出資料，也影響到轉換率。
若你的輸入框設計在介面中間或靠下的部分，請在鍵盤喚起同時將頁面上推，讓輸入框與按鈕保持在可點擊的範圍，但這會需要工程師花更多的時間去開發。因此很多登入頁的設計是把輸入框和按鈕放在頁面上方，如此不論鍵盤是否被喚起，頁面佈局都不會變動。這樣的設計在體驗上仍有些瑕疵，因為輸入框在很上方時，會讓用戶難以單手點擊。
五、提供清楚的說明
當用戶在填寫表單時，通常會想先知道需要輸入哪些內容，以及在輸入後確認內容是否匹配該欄位，因此我們需要為輸入框提供清楚的說明。
標籤（Label）是最常用的設計，通常擺放在輸入框上方或左側。有些時候為了美觀，設計師會使用圖示（Icon）來取代標籤，但這種作法僅適合用在常出現且易懂的輸入框，例如搜尋、帳號、Email 等。
然而標籤並不是一段說明訊息，應當簡短且具有描述性，好讓用戶可以快速瀏覽所有的輸入框的需求。
佔位文本（Placeholder）是列於輸入框內的說明文字，也是很常見的設計。在行動裝置上常為求排列整齊以及畫面較小的因素，會直接使用佔位文本做說明。但這存在兩個問題：
- 當用戶開始填寫文字，佔位文本就會消失，因此用戶難以再次檢查所輸入的內容是否符合需求。
- 當用戶在輸入框中看到提示文字，可能誤認為這個輸入框已經被預填而忽略它。
有個解決佔位文本問題的好方法是設計動態的標籤， 當用戶開始填寫當前某輸入框時，佔位文本即浮動到輸入框頂部變標籤，如此便可使用戶隨時確認他們填寫的內容是否正確。
小結
下篇我將繼續介紹另外五點可以優化輸入框互動的建議，這些都是透過經驗累積與學習的心得，希望能幫助大家減少設計失誤與開發時間，如果你有更多看法歡迎在下方留言給我。
繼續閱讀（下）篇：
