本文是《設(shè)計模式周周看·Ant Design 為你講透設(shè)計模式》周刊第五期內(nèi)容，上期內(nèi)容，我們介紹了一種輔助用戶輸入的設(shè)計模式：輸入說明

這一期，我們繼續(xù)介紹一種輔助用戶輸入的設(shè)計模式：輸入線索。

What 是什么

簡介：「輸入線索」是指用示例輸入或說明文本以占位符（Placeholder）的形式顯示在輸入框中，以幫助用戶理解需要輸入的內(nèi)容，或給出相關(guān)線索的一種設(shè)計方式。

例子：  在 Ant Design 輸入框組件 的示例中（如下圖），我們可以看到「輸入線索」可以更好地幫助界面說明輸入字段的內(nèi)容或解釋輸入字段的功能。

Why 為什么

「輸入線索」這種設(shè)計模式可以讓界面不言自明。由于輸入線索的內(nèi)容位于用戶輸入的位置，因此用戶往往不會忽略這個信息。

對比：「輸入線索」VS「輸入說明」

「輸入說明」與「輸入線索」都是輔助用戶輸入的設(shè)計模式，這些模式可以幫助用戶明確輸入信息的內(nèi)容形式。

那么這兩種模式有什么差異性呢？

使用「輸入說明」這種模式時，快速瀏覽用戶界面的用戶可能會輕易地忽略說明信息，因為用戶的目標(biāo)是盡可能快地完成表單，然后進(jìn)入下一步操作（雖然有的場景下這也是其中一個設(shè)計目標(biāo)，但在這里不討論）。因此，過多的文本說明也會給用戶帶來較大的心智負(fù)擔(dān)。

Google 注冊賬號頁是結(jié)合使用「輸入說明」與「輸入線索」的一個典型案例。通過使用「輸入線索」告訴用戶需要填寫的內(nèi)容，通過「輸入說明」來補(bǔ)充填寫信息的相應(yīng)意圖，進(jìn)而使得用戶可以清晰地意識到需要填寫什么，并輸入相應(yīng)信息。

When 什么時候使用

用戶可能不一定清楚需要在輸入框中輸入的內(nèi)容。在設(shè)計上，你可能不希望在輸入框附近上添加更多的字，造成視覺壓迫。還有一種情況，如果界面空間有限，無法使用「輸入說明」時，也可以考慮使用「輸入線索」。當(dāng)出現(xiàn)下拉菜單或者組合輸入框時，往往需要配合該模式進(jìn)行使用。

使用條件

· 輸入框要求輸入的內(nèi)容可能不容易讓人馬上理解；

· 設(shè)計上不希望在其他地方補(bǔ)充新的內(nèi)容；

· 可以承載文本的輸入空間可能沒有太多；

· 配合下拉菜單或者組合輸入框使用；

How 如何使用

1. 選擇適當(dāng)?shù)奶崾疚谋?

· 對于下拉列表，使用 “選擇”、“選取”等單詞，英文使用 Select Choose 或者 Pick 等；

· 對于文本輸入框，使用“輸入”等單詞，英文使用 Type 或 Enter；

· 盡量使用祈使句，以動詞短語開頭；

· 以描述輸入內(nèi)容的名詞結(jié)尾，例如“選擇狀態(tài)”，“在此處輸入消息”或“輸入患者姓名”等；

2. 提示文本的位置

有關(guān)文本提示的位置應(yīng)該和輸入值的位置一致。 比如，提示本身不應(yīng)該是下拉菜單中的可選值。

Example 案例

案例一：Ant Design Pro 登錄功能預(yù)覽

用戶需求：用戶登錄功能的預(yù)覽與體驗

Ant Design Pro 是一個中后臺開發(fā)的模板腳手架，其并不提供真實賬號登錄服務(wù)。因此 Ant Design Pro 的開發(fā)者為了模擬真實使用環(huán)境，提供了一個可正常登錄的賬號，賬號密碼分別 user 和 ant.design ，其余情況下用戶輸入的賬號密碼均會提示不正確。

在這個場景下，通過將正確的賬號密碼以輸入線索的方式顯示在占位符中，巧妙地告訴體驗 Ant Design Pro 的用戶正確的賬號密碼。

案例二：163郵箱登錄頁面

用戶需求：登錄賬號

163郵箱登錄頁面的賬號輸入框中的輸入線索非常有用。正常用戶在看到后綴有 @163.com 時可能并不一定能意識到可以輸入手機(jī)號碼。而通過在占位符中 顯示「郵箱賬號或手機(jī)密碼」，高效便捷地提示了用戶可以直接輸入手機(jī)號碼進(jìn)行登錄。

案例三：小米賬號登錄頁面

用戶需求：輸入賬號密碼

「輸入線索」有一種設(shè)計上的變體，稱為「浮動標(biāo)簽」。因為一般來說，當(dāng)用戶激活輸入框時，占位符文本會消失。而「浮動標(biāo)簽」不會消失，通過移動位置和更改大小駐留在界面中。這種設(shè)計方式可以使得界面變得簡潔、優(yōu)雅。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)