編者話
移動端的用戶體驗是產品經理努力追求改善的方向。其中有一個難題是圖和在移動端的有限的屏幕空間中，進行相對精準的收拾操作。本文主要針對的是文本輸入框的用戶體驗設計，作者Sophie Paxton進行了較爲詳盡的設計探索。
第1種
與傳統的文本輸入框相比，這種輸入框的最大優勢在於：屏幕空間沒有被標籤文字所浪費，因爲移動端的屏幕空間是非常有限的。從用戶體驗角度來看，這種設計非常優秀。因爲當用戶輸入文字的時候，標籤仍然可見，並且和用戶輸入的內容靠在一起。這種做法能夠最大程度上發揮標籤的價值。
第2種慢動畫
或許有人會覺得標籤的動畫有點過了，這可以通過縮短動畫時間來進行優化。
第2種快動畫
改進後的第2種是我最喜歡的方式。我認爲從用戶角度來講，它既發揮了標籤動畫的可用性，又沒讓用戶因爲動畫而過於分心。
第3種
第3種是最古老的節省屏幕空間的方法。它最大的缺點在於，在輸入框上面要預留出一塊空白。當頁面中還有其他形式的表單控件時，（標籤文字的不一致）會給人造成視覺上的不平衡。另外，這種方式也會拉長頁面。
第4種
與第3種傳統方式相比，這種方法是否存在優勢還很難說。我能找到的唯一優勢，就是用戶在輸入文字之前似乎有更大的可點擊區域。但是這個問題本就不存在，因爲即使用戶點擊/輕觸標籤文字，光標也應該能夠自動定位到相關的輸入框中。
第5種標籤並列
當兩個甚至多個文本輸入框並列時，應該考慮的因素有：用戶輸入的內容不會被標籤割裂，標籤和輸入內容之間應該有明顯的區分。
題圖：
Sad Stormtrooper/Memegenerator.net
原文鏈接：
https://medium.com/@sophie_paxtonUX/mobile-textfield-ux-8a5316245ae3