2021-7-13 ui設計分享達人
本文是《設計模式周周看·Ant Design 為你講透設計模式》周刊第五期內容，上期內容，我們介紹了一種輔助用戶輸入的設計模式：輸入說明
這一期，我們繼續介紹一種輔助用戶輸入的設計模式：輸入線索。
簡介：「輸入線索」是指用示例輸入或說明文本以占位符（Placeholder）的形式顯示在輸入框中，以幫助用戶理解需要輸入的內容，或給出相關線索的一種設計方式。
例子： 在 Ant Design 輸入框組件 的示例中（如下圖），我們可以看到「輸入線索」可以更好地幫助界面說明輸入字段的內容或解釋輸入字段的功能。
「輸入線索」這種設計模式可以讓界面不言自明。由于輸入線索的內容位于用戶輸入的位置，因此用戶往往不會忽略這個信息。
對比：「輸入線索」VS「輸入說明」
「輸入說明」與「輸入線索」都是輔助用戶輸入的設計模式，這些模式可以幫助用戶明確輸入信息的內容形式。
那么這兩種模式有什么差異性呢？
使用「輸入說明」這種模式時，快速瀏覽用戶界面的用戶可能會輕易地忽略說明信息，因為用戶的目標是盡可能快地完成表單，然后進入下一步操作（雖然有的場景下這也是其中一個設計目標，但在這里不討論）。因此，過多的文本說明也會給用戶帶來較大的心智負擔。
Google 注冊賬號頁是結合使用「輸入說明」與「輸入線索」的一個典型案例。通過使用「輸入線索」告訴用戶需要填寫的內容，通過「輸入說明」來補充填寫信息的相應意圖，進而使得用戶可以清晰地意識到需要填寫什么，并輸入相應信息。
用戶可能不一定清楚需要在輸入框中輸入的內容。在設計上，你可能不希望在輸入框附近上添加更多的字，造成視覺壓迫。還有一種情況，如果界面空間有限，無法使用「輸入說明」時，也可以考慮使用「輸入線索」。當出現下拉菜單或者組合輸入框時，往往需要配合該模式進行使用。
使用條件
· 輸入框要求輸入的內容可能不容易讓人馬上理解；
· 設計上不希望在其他地方補充新的內容；
· 可以承載文本的輸入空間可能沒有太多；
· 配合下拉菜單或者組合輸入框使用；
1. 選擇適當的提示文本
· 對于下拉列表，使用 “選擇”、“選取”等單詞，英文使用 Select Choose 或者 Pick 等；
· 對于文本輸入框，使用“輸入”等單詞，英文使用 Type 或 Enter；
· 盡量使用祈使句，以動詞短語開頭；
· 以描述輸入內容的名詞結尾，例如“選擇狀態”，“在此處輸入消息”或“輸入患者姓名”等；
2. 提示文本的位置
有關文本提示的位置應該和輸入值的位置一致。 比如，提示本身不應該是下拉菜單中的可選值。
用戶需求：用戶登錄功能的預覽與體驗
Ant Design Pro 是一個中后臺開發的模板腳手架，其并不提供真實賬號登錄服務。因此 Ant Design Pro 的開發者為了模擬真實使用環境，提供了一個可正常登錄的賬號，賬號密碼分別 user 和 ant.design ，其余情況下用戶輸入的賬號密碼均會提示不正確。
在這個場景下，通過將正確的賬號密碼以輸入線索的方式顯示在占位符中，巧妙地告訴體驗 Ant Design Pro 的用戶正確的賬號密碼。
用戶需求：登錄賬號
163郵箱登錄頁面的賬號輸入框中的輸入線索非常有用。正常用戶在看到后綴有 @163.com 時可能并不一定能意識到可以輸入手機號碼。而通過在占位符中 顯示「郵箱賬號或手機密碼」，高效便捷地提示了用戶可以直接輸入手機號碼進行登錄。
用戶需求：輸入賬號密碼
「輸入線索」有一種設計上的變體，稱為「浮動標簽」。因為一般來說，當用戶激活輸入框時，占位符文本會消失。而「浮動標簽」不會消失，通過移動位置和更改大小駐留在界面中。這種設計方式可以使得界面變得簡潔、優雅。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務