2021-9-1 ui設(shè)計分享達人
簡介：模糊輸入是一種用于文本輸入的模式，使用這種模式后，可以讓用戶輸入文本內(nèi)容時不用關(guān)心格式或語法，從而輕松達到預(yù)期目標(biāo)。
例子： Google 搜索輸入框
簡介： 結(jié)構(gòu)化格式是指用戶在輸入時，不僅僅使用純文本輸入，而是使用一組反映數(shù)據(jù)結(jié)構(gòu)的字段，引導(dǎo)用戶進行輸入。
例子： Apple 雙重驗證碼輸入界面：
簡介：「語句填空」使用一組短語字段將用戶需要錄入的信息，如文本、數(shù)字等串聯(lián)為一句有指示意義的溝通語句。
例子： Visualeyes Design 網(wǎng)站的用戶信息錄入:
簡介：「輸入說明」是指在空白文本字段的旁邊或下方，放置一個短語或示例，以解釋此處需要輸入的內(nèi)容或提供關(guān)于此內(nèi)容的詳細(xì)要求及信息。
例子： 使用 Ant Design 組件-表單 搭建的創(chuàng)建小程序頁面中的輸入說明：
簡介：「輸入線索」是指用示例輸入或說明文本以占位符（Placeholder）的形式顯示在輸入框中，以幫助用戶理解需要輸入的內(nèi)容，或給出相關(guān)線索的一種設(shè)計方式。
例子： 在 Ant Design 輸入框組件 的示例中（如下圖），我們可以看到「輸入線索」可以更好地幫助界面說明輸入字段的內(nèi)容或解釋輸入字段的功能。
簡介：「密碼強度計」即在輸入新密碼時，立即向用戶反饋密碼的有效性和強度。
例子： 百度網(wǎng)盤的用戶注冊頁面，紅色文字代表不合格，白色文字代表已合格。
簡介：「自動完成」即在輸入內(nèi)容過程中，向用戶推薦與已輸入內(nèi)容相關(guān)的信息，把輸入行為變?yōu)檫x擇行為。
例子： Ant Design 官網(wǎng)的全局搜索功能，用戶只需要輸入部分內(nèi)容，下拉列表展示可能的結(jié)果，把錄入行為變?yōu)楦憬莸倪x擇行為。
簡介：「下拉選擇」即通過使用下拉菜單或彈出式面板，來擴展菜單，使得菜單中可以包含更復(fù)雜的選擇功能。
例子： Ant Design 官網(wǎng)的下拉菜單：
簡介： 列表構(gòu)建器是從較大的數(shù)據(jù)集中創(chuàng)建較小的數(shù)據(jù)集的一種模式。列表生成器的「數(shù)據(jù)源」和「結(jié)果」在同一個組件中可見。這允許用戶通過按鈕或拖放在它們之間移動項目。這種模式也常常稱為兩列多選擇器。
例子： Ant Design 的 Transfer 穿梭框 組件就是基于這一模式的設(shè)計組件。
簡介：「合理預(yù)設(shè)」是指系統(tǒng)提供默認(rèn)選項，這些默認(rèn)選項不需要用戶做任何操作，可以節(jié)省用戶完成表單的時間和精力。
這些默認(rèn)選項來的數(shù)據(jù)源包括: 先前輸入的會話數(shù)據(jù)、來自用戶帳戶的信息、當(dāng)前位置、當(dāng)前數(shù)據(jù)和時間等等。
案例 ：釘釘?shù)摹按k事項”設(shè)置功能，可以自動抓取到語句中的時間信息，自動幫助用戶默認(rèn)填寫時間，減少用戶的操作時長：
簡介： 「錯誤提示」是表單出現(xiàn)輸入錯誤時，為用戶展示的一條引人注目的解釋性消息，該消息可能描述用戶如何修復(fù)錯誤。
案例： Ant Design 提供了多種表單錯誤校驗樣式：
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://bouu.cn