為了體現文本框設計形式的科學性，其實 Google Design（下文簡稱GD） 團隊在之前曾分享過一篇用戶研究文獻，是與高級用戶體驗研究員 Michael Gilbert 共同合作撰寫的關于文本框的真實用戶可用性研究報告。

「耍好控件」剛好談到了文本框，我想借此機會和大家分享GD團隊的該項研究幕后過程。看到最后，你會發現所得到的結論不僅僅只限于使用在文本框控件上。

最關鍵的是：從GD團隊所披露的研究過程和結論，我發現其實再高深的用戶設計/研究團隊，都會在前期做一些“失敗”的設計，這并不可怕。所以在探索過程中的我們，不要輕易感到沮喪。多去模擬大型團隊的方法和理念，勇于輸出自己的新觀點才是最重要的。

一、為什么需要優化？

文本框是用戶在表單和對話框中輸入、編輯文本的最常用控件之一，本質與關鍵是應該讓用戶清楚：這是一個可交互的控件。

先來看看MD規范早期文本框的樣式（2017年前）：

對于舊版文本框，GD團隊發現部分用戶并不知道可以與之交互。因為舊文本框下的線條寓意并不清晰，容易讓某些用戶將這條線與分隔線（分割作用）混淆。標簽文本（Label text）和輸入內容也容易與正文混淆，尤其是在密集文字排版中。

GD團隊的優化目標是改進文本框，使其具有更高的辨識度、易見性，從而更易被理解，這樣用戶才能夠正確、快速地使用。

于是團隊開始進行用戶實驗研究，剖析究竟是哪些要素在干擾用戶判斷。

整個用戶研究實驗分為兩個測試階段。

  · 測試項目一：158名參與者（ 45名飛行員）  

第一項測試是將原文本框與其他三種不同設計形式的文本框原型進行比較，放在簡單/復雜/真實使用場景當中，讓用戶完成指定的任務（例如要求參與者找到特定的“ Item L”文本框）。

為了確保參與者無法提前學習和預測在測試過程中文本框可能出現的位置，團隊將顯示這些文本框的順序隨機打亂。

GD團隊通過記錄不同的文本框設計形式在不同的場景中，被參與者找到并進行準確點擊的時間，來判斷用戶是否能清晰地認知文本框。以此得到一個理論量化值。

然后在感性層面，GD團隊還讓參與者按照自己的視覺偏好來對四種文本框設計進行喜好度排名。

通過理論和感性兩個層面綜合得出較優的文本框形式，再進一步細化細節，投入到測試項目二中。

· 測試項目二：400名參與者  

通過測試項目一確定了設計方向后，測試項目二為了更進一步地確定文本框的細節設計，GD團隊創建了一個自定義工具。

團隊從文本框控件中提煉出了7個特征（例如標簽位置、背景顏色對比度、邊框樣式等），通過這個自定義工具進行特征組裝，最后組裝出了140多個文本框樣式。

1. 通過「正確點擊次數與錯誤點擊次數」量化可識別性；
2. 通過「參與者查找并點擊所任務要求文本框所花費的時間」量化文本框可被查找性；
3. 通過「參與者對每個文本字段的變體進行排序」量化用戶視覺偏好。

二、主要發現

兩項實驗的結果表明，文本框的以下特征最能影響到用戶判斷：

• 矩形（框形）樣式的封閉文本框的性能優于僅帶有線條的文本框；
• 文本框應該帶有有色填充和底部線條；或者空白填充，但需要有色描邊；
• 文本框的底部線條與背景的顏色對比度最小應為3：1（關于顏色對比度相關話題，我會在后面寫一篇文章細致講解）；
• 標簽文本應放置在文本框范圍內；
• 文本框應具有圓角（用戶視覺喜愛度更偏好）。

于是通過這個實驗，就有了如今的MD規范中的文本框樣式。也被借鑒運用到了許多其他規范與場景當中。

三、總結

GD團隊重新探索文本框控件設計的實驗涉及到了兩名設計師、一名研究員和大約600名參與者。得出了在MD規范中，「文本框控件」細則開篇便給出的三個原則：易見、清晰、高效。可能以前對MD規范還算關注的你，也是知其然，不知其所以然。

新的文本框規范已經應用在了Google的各產品線當中，從帳戶登錄頁面到Google表單。其實使用上面的實驗，GD團隊不僅解決了舊版文本框的易用性問題，通過前人種樹得到的結論，我們還可以將這些手法運用到許多其他的場景當中，來輔助我們排查控件的可用性：例如對比、親密性、用戶視覺偏好等等，都值得被借鑒。希望這個實驗的分享可以幫助到你。