掘金·翻譯計劃｜如何在移動 APP 中設計輸入框

01-26

原文鏈接 : Text Fields in Mobile App

原文作者 : Nick Babich

譯文出自 : 掘金翻譯計劃

譯者 : Zhangjd

校對者: Jasper Zhong, Velacielad

交互設計在移動設備上遇到了許多挑戰。其中一個最具挑戰的問題是：在用戶輸入時如何利用有限的屏幕空間，其關鍵在於產品設計師、開發者和產品經理需要理解對於用戶來說怎麼樣輸入是最為簡單的。

這篇文章列出了三個改善數據輸入體驗的關鍵因素，分別是 改進輸入速度，為用戶提供幫助和支援 和 在用戶輸入時直接指出問題所在。

輸入

根據需要輸入的文本類型匹配鍵盤布局

用戶喜歡那些在輸入文本時能夠提供合適鍵盤布局的應用。不像物理鍵盤，觸摸鍵盤可以隨時調整，根據每個表單域的不同數據類型，為用戶提供不同的鍵盤布局。通常可以進行優化的輸入類型包括：

數字: 電話號、信用卡號、PIN 碼
文本: 固有名稱、用戶名
混合格式: 郵箱地址、街道地址、搜索查詢

確保這些項可以在你的 app 中 持續地 進行優化，而不是只在某些特定任務中優化。

圖片來源：谷歌

合理配置自動大寫功能

如何合理地設置自動大寫，對於移動端表單域的可用性是很重要的。如果語言本身有要求，每個文本框的首字母和每句話的開頭字母都應該大寫。相關例子：

詢問用戶的姓名
包含句子的信息，比如簡訊

但是，要注意不讓電子郵件的文本框開啟自動首字母大寫，當用戶發現時，可能會返回刪除大寫的首字母再改回小寫，因為他們會擔心郵件不能正常發送。

圖片來源：Baymard

當詞典不夠智能時，關閉自動糾錯

用戶反感低效的自動糾錯功能，如果用戶沒有發現這個功能，可能還會造成問題。當用戶發現自動糾錯功能對於那些單詞縮寫、街道名稱、郵箱、人名和一些不在字典的單詞表現非常糟糕的時候，是極其影響用戶體驗的。

在老版本的亞馬遜 app 中，地址欄曾經有自動糾錯功能，卻導致了正確地址被這個功能改寫為錯誤的。

圖片來源：Baymard

這種情況經常會發生，因為用戶通常只關注了他們正在輸入什麼，而不是他們已經輸入的內容。對於地址信息，這樣會導致用戶輸入的有效地址被自動糾錯改成了無效地址，而用戶卻沒有留意到自動糾錯已經發生，最終提交了錯誤的地址。

固定的輸入格式

不要使用固定輸入格式。強制使用固定格式的最常見原因，是受到驗證腳本的限制（難道後端不能確定所需要的格式？）。在大部分情況下，這是開發的責任，而非用戶。與其強迫用戶輸入某些特定格式，比如電話號碼，不如想辦法把用戶輸入轉化為你想要顯示或者存儲的格式。

圖片來源：Google

默認值和自動完成

你應該頻繁預測用戶的選擇項，通過提供智能預測的默認值，或者基於過去輸入內容的提示，使得用戶更加容易地輸入內容。比如，你可以通過用戶的地理位置信息，預測用戶所屬國家。

這個解決方案可以和自動完成功能配合使用，讓用戶輸入速度顯著提升。自動完成會在下拉列表中實時地列出建議，使得用戶可以更加準確和有效地完成輸入。這對於那些語言水平不高或者忘記拼寫的用戶非常有用，尤其是輸入非母語的時候。

帶有提示的文本域。圖片來源：Material Design

標籤和幫助信息

用戶想要知道在輸入框中填入哪種信息，清晰的標籤正是一種讓 UI 更加易於理解的方式。標籤告訴用戶每個輸入框的目的，在表單域獲得焦點甚至完成輸入後，保持其有效性。

你還應該在表單域的上下文提供幫助信息。提供相關的語境信息，可以幫助用戶更加容易地完成操作。

限制單詞數

標籤並非幫助文字，你應當使用簡明扼要的標籤（一兩個單詞），使得用戶可以快速了解你的文本域。

『Phone』, 『Check in』, 『Check out』都是輸入框的標籤

如果有需要可以對錶單域提供更多信息，當用戶面對有用的信息，可以用於消除困惑或者減少潛在的錯誤。

在『Phone』表單域下面的信息就是幫助文本。圖片來源: Google

語言簡單化

從用戶的角度出發。 未知的術語和片語會增大用戶的認知成本。清晰的傳達方式和實用性應該總是優先於專業術語和品牌信息。

左邊：非傳統的術語可能讓用戶感到迷惑。右邊：術語更加清晰和易於理解。

內聯標籤

內聯標籤（或者佔位符文本）對於簡單的表單域非常合適，比如用戶名或者密碼。

圖片來源: snapwi

但是當頁面超過兩個表單域時，用佔位符文本來代替分離的文本標籤就不合適了。佔位符確實非常流行，看起來也不錯，但是它有兩個嚴重的問題：

一旦用戶點擊了文本域，標籤就消失了，因此用戶不能再次檢查輸入內容是不是表單要求填寫的。
當用戶看見文本框有內容的時候，可能會以為這個地方預先填充了內容，並因此而忽略填寫。

其中一個佔位符的優化方案是 浮動標籤 — 當用戶填寫這個表單域時，可浮動的內聯標籤就會移到表單域的上方。

浮動內聯標籤。來源: Dribbble

建議： 不要只依賴於佔位符或者標籤。一旦文本域被填寫了內容，佔位符文字就看不見了。你可以使用浮動標籤，以確保用戶可以知道他們填寫的內容是否正確。

標籤顏色

標籤顏色應該和 app 的配色方案相關，同時應該有合適的對比度（不應該太亮或者太暗）。

圖片來源: Material Design

驗證

表單域驗證是為了和用戶對話，並引導他們處理錯誤和不確定信息。其輸出內容應該是感性而非純技術的。在數據處理中，其中一個最重要但是通常不被人喜愛的部分就是數據處理。犯錯是人之常情，你輸入的內容也不例外。如果做得好的話，驗證可以把模糊不清的交互步驟變得更加清晰。

實時驗證

用戶可不喜歡當他們填完了所有信息，最後點擊提交的時候，才發現信息有錯誤。告知用戶輸入內容是否正確的最佳時機，是在用戶填完內容後立刻告知用戶。

實時內聯驗證可以馬上告知用戶輸入的正確性。這個方法讓用戶更快地改正錯誤，而不需要等到他們按下提交按鈕。錯誤狀態可以使用對比色，比如暖色調的紅色或者橙色。

提交時驗證 vs 實時驗證。圖片來源: Google

驗證過程不僅應該告訴用戶他們做錯了，還應該告訴用戶他們做的不錯。這樣可以給用戶信心來完成餘下的輸入過程。

圖片來源: Dribbble

清晰的反饋

對於用戶問題——「剛才發生了什麼？為什麼會這樣？」，應該直接給出答案，有效的回答應該清晰說明：

發生了什麼錯誤，可能原因是什麼。
用戶應該做什麼來改正錯誤。

再次提醒，應該避免出現技術術語。這個原則很簡單，但是有時候很容易忽略。

正確的顏色

顏色是設計驗證時的最佳工具之一。 由於人的視覺本能，紅色錯誤信息、黃色警告信息、綠色成功信息都是非常易於識別的。下圖是驗證密碼強度一個很好的示例：

密碼錶單域的警告狀態

另一個例子是用於表單域字元限制的提示顏色。字數計數器和邊框線條變紅的時候，說明字數超過了限制。

圖片來源: Material Design

但是不要只依賴於顏色來反饋驗證信息！確保界面對於用戶是可理解的，這對於視覺設計執行而言，是一個非常重要的方面。

結論

你應該讓數據輸入的過程儘可能簡單。每一個微小的工作，比如自動大寫轉換或者指明每個表單域填寫什麼信息，都可以有效提高表單域的可用性和交互設計的質量。深入思考用戶實際上是如何使用應用和輸入內容的。當設計 app 時，確保沒有遺漏上述提及的問題。

插播一條廣告，由猿圈主辦的程序員王牌挑戰賽決賽將於 6 月 6 日正式打響，本次大賽決賽環節將讓參賽者調用七牛，ping++，百度音樂，Teambition 的 SDK 撰寫應用，贏取萬元大獎，如果你也對本次大賽感興趣的話，點擊這裡了解詳情吧。