中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導讀：文本框的出現幾乎可以追溯到可視化交互誕生的源頭，是一個再經典不過的“鼻祖”控件了。我們每天都在和文本框打交道，不論你是產品設計者還是用戶。然而，越是顯而易見的東西越容易被我們忽略掉細節。今天作者就和大家一起來梳理一下文本框，一起來看看~

一、文本框的拆解

文本框（Text Fields）根據 Material Design 指導規范，被拆解為七個部分。分別是：

1. 容器（Container）
2. 前導圖標（Leading icon）
3. 標簽文本（Label text）
4. 輸入文本（Input text）
5. 尾隨圖標（Trailing icon）
6. 激活指示器（Activation indicator）
7. 幫助文本（Helper text）

當然，MD為我們展示的是已經經過其團隊長期摸索之后，基于其平臺規范下的標準樣式。想要探索文本框的交互演變，我們還是要回溯到文本框最初的模樣。

這就是一個文本框最基礎的樣式了，一個標簽文本+容器，已經基本可以確保向用戶傳遞文本框最直觀的信息。

但如今的文本框已經演變出了形形色色的樣式和交互形式，究竟MD的文本框是如何演變到今天這番樣子？下面我根據個人的拙見，一步一步從場景進行分析。

二、基礎的文本框布局方式

我自認為，激勵設計師不停探索文本框新的交互形式的根本原因之一，一定包含總讓人頭疼的排版問題。在解決了基本視覺問題之后，才是思考如何設計文本框來提升用戶的填寫和使用效率。

例如前面我們所看到的最基礎的文本框樣式，如果簡單地進行單列布局，自然而然會出現讓眾多設計師糾結的一個問題：標簽文本究竟應該如何對齊？

如果標簽文本采用右對齊，標簽文本的長短問題容易導致左側的視覺隱形邊界錯亂，用戶的規律眼動容易被打亂；

如果標簽文本采用左對齊，文本的長短問題又會導致部分較短標簽文本與容器間距增大，讓用戶從左至右瀏覽的效率降低，并且看起來不夠協調。

于是乎文本框的布局方式有了進一步的演變：標簽文本與容器頂端對齊。

頂端對齊的方式使得用戶眼動變得十分規律，豎直向下瀏覽可以便捷地理解標簽文本并進行填寫，文本的長短問題不再成為干擾設計師進行排版的一個糾結點。

但縱向布局的的方式只是把問題遷移到了另一個維度，那就是在表單數據量過多時，縱向布局會使得縱向空間耗損增加，用戶需要不停地滑動頁面才能實現表單的完整填寫。

這么看來，文本框的布局需要多方位評估標簽文本長度、表單數據量等問題，才能對具體場景進行有效設計。

三、文本框的改良

當文本框橫向布局或是縱向布局都很難解決具體場景問題的時候，更新穎的文本框交互形式就出現了。

最初的演變形式是眾多的應用開始采用前導圖標來替代標簽文本，使用圖標可以有效地解決標簽文本導致的排版錯落問題。

這種方案在輕量表單中較為常見，一般都是在表單內容少、用戶對于場景的熟悉度較高的情景當中（例如登錄場景）。

因為每個用戶對于圖標的認知性存在差異，在生疏場景或表單內容過多的情況下，圖標容易導致用戶對文本框信息產生更多的認知成本。所以用圖標來代替標簽文本的普適性其實并不高。

于是后來 iOS人機交互規范 和 MD規范 都給設計師提出了一條指導建議：當占位符字段中不包含必要內容時，可以合理地使用占位符來承載標簽文本。

例如 iOS 通訊錄新增聯系人，就采用了占位符承載標簽文本的方式。

但這種形式同樣也存在一個弊端：用戶一旦輸入內容之后，占位符就被內容文本填充覆蓋了，有時用戶會忘記所填寫的信息是關于什么內容，必須要清空文本進行重新確認。對于表單內容繁多或重要內容需要謹慎填寫的場景，這樣的交互其實還是有一些不妥。

于是乎，類似MD的指導規范下這樣普適性較高的文本框形式就誕生了。采用占位符承載標簽文本，并且在用戶填寫信息時，標簽文本始終可見，由占位符轉移到文本框頂部。

這一文本框交互形式的誕生，不論是對于排版空間的節省、遵循用戶眼動習慣、微動效提升文本框趣味性等方面，都得到了一定提升。并且許多應用開始進行借鑒效仿。

其實像以上這種巧用占位符的場景已經越來越常見了，占位符已經不再僅僅用來承載無用信息或提示性信息，也可以用于承載默認值，幫助用戶自動填充，提高用戶填寫信息的效率（例如手游當中，創建賬號時系統幫玩家默認填充一個可用昵稱）。

但填充默認值的手法也不僅僅局限于提升用戶體驗和填寫效率，甚至也被運用到了一些商業場景中。

例如淘寶、京東等電商平臺，將商品名稱作為占位符填充在搜索欄中，一方面給所推薦商品增加了曝光；另一方面，在用戶直接點擊搜索時，將會以當前占位符內容進行搜索，達到為所推薦商品引流的效果。

四、合理的反饋

合理的反饋機制對于提升用戶填寫文本框效率也起著重要的作用，MD規范中的幫助文本不僅僅是告訴設計者可以用于指導用戶該如何正確填寫文本框信息，也為反饋提示提供了展示空間。

MD的反饋狀態可以歸納為以下幾種：

在這里我大概總結了一下文本框的負反饋提示信息，希望在你設計表單的時候，能夠幫助到你對負反饋提示狀態進行走查（可能不全，歡迎補充）：

• 內容是否為空（例：必填項不能為空）
• 二次確認內容是否一致（例：確認密碼與首次輸入不一致）
• 內容是否合規 （例：昵稱中包含不文明詞語）
• 內容格式是否合規（例：昵稱中不能包含特殊字符）
• 內容長度是否合規（例：手機號輸入不足11位）
• 內容的是否符合唯一性（例：驗證碼輸入錯誤）

及時給予用戶負反饋，可以讓用戶清晰地排查所發生的錯誤。但交互設計講究“以人為本”，在某些場景中，當用戶所填寫的信息是合理的，及時地展示正向反饋也是有必要的。

例如，部分應用在用戶創建賬號的場景中，當用戶輸入賬號信息后，系統將立刻檢索用戶的賬號是否已存在在當前數據庫中，避免用戶忘記已創建過該賬號而進行重復創建的徒勞步驟。

所以不要狹隘地認為MD所給到的幫助文本只能用于“批評”用戶（負反饋），當用戶做了正確的事時，也應該適當地激勵用戶，這也正符合了尼爾森可見性原則。

#專欄作家#

UCD耍家，公眾號：UCD耍家（ID：ucdplayer），人人都是產品經理專欄作家。

本文由 @UCD耍家 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議