日韩久久久久久无码精品,日本欧美大码一区二区免费看

<blockquote id="55jvp"></blockquote>

設(shè)計(jì)模式｜輸入線索：如何讓用戶清楚該輸入什么？

2021-7-13 ui設(shè)計(jì)分享達(dá)人

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

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

What 是什么

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

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

Why 為什么

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

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

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

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

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

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

When 什么時候使用

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

使用條件

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

· 設(shè)計(jì)上不希望在其他地方補(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ù)覽與體驗(yàn)

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

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

案例二：163郵箱登錄頁面

用戶需求：登錄賬號

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

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

用戶需求：輸入賬號密碼

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

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