藍(lán)藍(lán)設(shè)計(jì)的小編 移動(dòng)端UI設(shè)計(jì)文章及欣賞
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
那好話不多說(shuō)，我們正式開始～
在開始之前先來(lái)說(shuō)說(shuō) 什么是 B 端產(chǎn)品，我們通常也叫做管理后臺(tái)。
這里會(huì)有兩個(gè)問(wèn)題：“它管理什么？到底如何管理？”給大家三秒鐘可以思考一下。
首先它管理的是數(shù)據(jù)，無(wú)論是 ERP 系統(tǒng)的訂單數(shù)據(jù)、CRM 的客戶數(shù)據(jù)、OA 的流程數(shù)據(jù)，你都會(huì)發(fā)現(xiàn)管理后臺(tái)就是在不停的對(duì)數(shù)據(jù)進(jìn)行補(bǔ)充、整合。
那到底應(yīng)該如何管理？簡(jiǎn)單來(lái)說(shuō)就是 數(shù)據(jù)的“增刪改查”，篩選其實(shí)就是查詢的一種重要方式。
比如一個(gè)客戶關(guān)系管理系統(tǒng)（CRM），銷售人員去拜訪客戶就會(huì)提前查詢客戶信息，來(lái)了解客戶關(guān)注內(nèi)容進(jìn)而去組織銷售話術(shù)。
那這里的篩選應(yīng)該如何設(shè)計(jì)？怎樣設(shè)計(jì)既能高效便利，同時(shí)也具備擴(kuò)展性？那今天我們系統(tǒng)盤點(diǎn)篩選組件究竟應(yīng)該如何設(shè)計(jì)？
這里我們先來(lái)講講篩選的鄰居“搜索”，因?yàn)楹芏嗤瑢W(xué)其實(shí)對(duì)于這兩者之間的差別不太了解，只知道它們都是在工具欄當(dāng)中，都是在做查詢數(shù)據(jù)的工作。但在功能上是有明顯的區(qū)分：
搜索是對(duì)系統(tǒng)的關(guān)鍵詞進(jìn)行精準(zhǔn)匹配，比如用戶 ID、手機(jī)號(hào)、昵稱、地址等信息內(nèi)容
篩選則是給出產(chǎn)品的固定條件選項(xiàng)，比如歸屬人、狀態(tài)、類型 等，你可以按需勾選條件，就能得出對(duì)應(yīng)數(shù)據(jù)
這里稍微多說(shuō)一句，因?yàn)樗械?B 端系統(tǒng)都是由字段組成，而在大的分類上，字段主要包含有輸入、選擇、上傳三大類型。
搜索服務(wù)于輸入類字段，比如剛才講到了 用戶 ID、手機(jī)號(hào)、昵稱、地址等 都是得讓用戶自行輸入才會(huì)得到，因此在表單里輸入，在表格當(dāng)中也是輸入搜索，所以系統(tǒng)是關(guān)聯(lián)的。
篩選則是選擇類字段，也就是歸屬人、狀態(tài)、類型 等，在 B 端系統(tǒng)當(dāng)中，選擇字段尤為重要，所以在表單處選擇同樣在篩選處也是相同邏輯。
理解篩選與搜索的差異后，我們?cè)賮?lái)說(shuō)說(shuō)篩選～
在篩選的過(guò)程當(dāng)中，有著非常多重要的邏輯需要提前掌握，我們通過(guò)簡(jiǎn)單的快問(wèn)快答，幫助大家快速拆解。
第一題：什么是 且、或、非
這是篩選當(dāng)中必須要了解的基礎(chǔ)運(yùn)算條件。
且就是篩選的條件必須同時(shí)滿足才能出結(jié)果，比如一個(gè)電商數(shù)據(jù)分析師，需要篩選潛在高意向客戶，在篩選條件為「時(shí)間在近 30 天有支付訂單、近 30 天累計(jì)消費(fèi)金額≥800 元、近 30 天訂單次數(shù)≥2 次」，必須同時(shí)滿足才會(huì)滿足用戶需求。
或就是這些條件滿足任意一個(gè)就能出結(jié)果，比如還是電商數(shù)據(jù)，需要尋找對(duì)產(chǎn)品有興趣的潛在客戶，就需要篩選「近 90 天內(nèi)有過(guò)人工咨詢記錄、近 30 天內(nèi)訪問(wèn)產(chǎn)品詳情頁(yè)≥6 次、近 180 天內(nèi)提交過(guò)試用申請(qǐng)」，三個(gè)條件滿足任意一個(gè)，這樣就能涵蓋更為全面。
非就是這些條件必須排除掉才能出結(jié)果，比如電商數(shù)據(jù)，因?yàn)樯婕暗剿巍⑼丝畹那闆r，需要將其進(jìn)行清洗，因此在篩選條件上就需要滿足「訂單狀態(tài)≠測(cè)試訂單、支付狀態(tài)≠已退款、客戶類型≠內(nèi)部員工」，需要同時(shí)排除這些數(shù)據(jù)。
所以對(duì)應(yīng)的篩選運(yùn)算規(guī)則，其實(shí)背后都是用戶在使用時(shí)需要深度分析使用的最為重要的工具～
第二題：在B端系統(tǒng)當(dāng)中多個(gè)篩選條件默認(rèn)的運(yùn)算規(guī)則是什么？
A：且 B：或 C：非
在 B 端系統(tǒng)當(dāng)中，最常用的運(yùn)算規(guī)則就是且，也就是取多個(gè)篩選當(dāng)中的交集。
比如下面這三個(gè)篩選項(xiàng)，所計(jì)算的呈現(xiàn)規(guī)則就是 「銷售負(fù)責(zé)人是李強(qiáng)」且「銷售時(shí)間是 近一個(gè)月」且「價(jià)值為高價(jià)值」的客戶，這樣就是一個(gè)典型的且的關(guān)系。
因?yàn)檫@種思維方式是最符合用戶的思考邏輯，這也是眾多 B 端系統(tǒng)當(dāng)中的常見邏輯。
第三題：且、或、非可以同時(shí)存在于一個(gè)篩選組合當(dāng)中嗎？
A.可以
B.不可以
它們可以出現(xiàn)在同一個(gè)篩選組合當(dāng)中，因?yàn)閷?shí)際的業(yè)務(wù)往往是“多條件、多邏輯” 的復(fù)合場(chǎng)景。
比如在教育管理系統(tǒng)當(dāng)中，班主任要篩選 初三年級(jí)且數(shù)學(xué)月考不及格 或 非 住校生 的學(xué)生，來(lái)針對(duì)這兩類人群進(jìn)行重點(diǎn)管理與監(jiān)控。
但在篩選的設(shè)計(jì)當(dāng)中，為了讓用戶理解邏輯，我們需要通過(guò) 條件組（如括號(hào)、層級(jí)縮進(jìn)、虛線框）讓用戶直觀感知分組關(guān)系，避免依賴抽象的優(yōu)先級(jí)規(guī)則。
第四題：如果你是一個(gè)設(shè)計(jì)師，應(yīng)該如何降低成本表達(dá)這個(gè)關(guān)系？
因?yàn)檫壿嬢^為復(fù)雜，所以在篩選時(shí)有些基礎(chǔ)辦法可以降低門檻。
① 可視化展示篩選運(yùn)算，如果用戶對(duì)于且、或邏輯不太了解，可以使用圖標(biāo)快速表示
② 實(shí)時(shí)校驗(yàn)邏輯規(guī)則，不要出現(xiàn)相互矛盾的篩選邏輯
這個(gè)功能其實(shí)不太好做，但 ONES 做了一個(gè)最簡(jiǎn)單的邏輯判斷。在且條件當(dāng)中，同一篩選條件不得選擇兩次，這樣用于避免在且條件當(dāng)中經(jīng)常出現(xiàn)的相互矛盾的篩選邏輯。
好的，準(zhǔn)備工作已經(jīng)完成，我們就可以順利了解篩選的類型。
由于篩選的類型眾多，我們會(huì)按照 業(yè)務(wù)復(fù)雜度、容器差異 兩個(gè)維度，來(lái)對(duì)篩選進(jìn)行歸類。
通過(guò)業(yè)務(wù)復(fù)雜度，將其分為：基礎(chǔ)篩選、高級(jí)篩選、自定義篩選
按照容器差異，將其分為：標(biāo)簽篩選、折疊篩選、浮窗篩選、抽屜篩選、表頭篩選、AI 篩選
基礎(chǔ)篩選是將 高頻使用（使用頻率≥80%）的篩選條件進(jìn)行固定，一直保持在頁(yè)面中的核心位置，不折疊、不隱藏，讓用戶能夠直接看到的篩選類型。
這是一個(gè)最為基礎(chǔ)的篩選方式，在常見的 Ant Design、Arco Design 的頁(yè)面模板當(dāng)中都會(huì)有基礎(chǔ)篩選的身影。
使用基礎(chǔ)篩選最為重要的便是 快速觸達(dá)，用戶打開頁(yè)面就會(huì)查看篩選條件，不需要點(diǎn)擊“更多”“展開” 等入口，這能滿足 B 端用戶 高效完成日常操作 的核心需求。
在使用基礎(chǔ)篩選時(shí)，我們需要注意以下問(wèn)題：
① 基礎(chǔ)篩選條件的數(shù)量不宜過(guò)多，一般 3-4 個(gè)最為合適
因?yàn)楹Y選條件過(guò)多，就失去了常駐的意義。但在實(shí)際業(yè)務(wù)當(dāng)中，我們也需要考慮 5 個(gè)、7 個(gè)這類極端場(chǎng)景，畢竟常駐是最為基礎(chǔ)的方案，難免會(huì)遇到特殊情況。（需要在篩選的規(guī)則當(dāng)中進(jìn)行梳理，將交互邏輯呈現(xiàn)清楚）
② 基礎(chǔ)篩選當(dāng)中，排序規(guī)則會(huì)非常重要
一般按照 高頻-低頻 的方式，從左到右依次排列，對(duì)于高頻低頻的獲取方式，我們可以數(shù)據(jù)埋點(diǎn)、卡片分類、問(wèn)卷調(diào)研等多種方式進(jìn)行搜集。
③ 篩選基礎(chǔ)，樣式就不基礎(chǔ)
基礎(chǔ)篩選有著較多的篩選樣式，大家可以結(jié)合自身業(yè)務(wù)進(jìn)行選擇，這里推薦樣式一與二，因?yàn)檎故拘矢摺?/strong>
這里列舉一些常見的基礎(chǔ)篩選產(chǎn)品，大家可以一并查看：
高級(jí)篩選是較為復(fù)雜的篩選形式，它為了滿足更多 低頻、復(fù)雜、個(gè)性 的業(yè)務(wù)需求，通常會(huì)提供相對(duì)獨(dú)立篩選面板，展示更多的篩選條件。
獨(dú)立面板也就是我們后續(xù)會(huì)提到的 浮窗篩選、抽屜篩選、表頭篩選...，所以它們的關(guān)系也會(huì)相對(duì)復(fù)雜。
高級(jí)篩選與基礎(chǔ)篩選最大的區(qū)別在于：
基礎(chǔ)篩選只能覆蓋 3 個(gè)左右的高頻篩選，而高級(jí)篩選可支持 10 + 維度的靈活組合；常駐只能使用且的邏輯相對(duì)簡(jiǎn)單，而高級(jí)可以有條件組嵌套支持復(fù)雜業(yè)務(wù)邏輯；常駐位置較為固定，而高級(jí)則有面板加持，可以更為靈活。
其實(shí)選擇高級(jí)篩選或者基礎(chǔ)篩選，最大的話語(yǔ)權(quán)還是場(chǎng)景。
如果你的篩選是簡(jiǎn)單篩選幾個(gè)條件，那基礎(chǔ)篩選就已經(jīng)足夠，反之對(duì)篩選條件、篩選效率有著更高要求，我們則會(huì)考慮更為復(fù)雜的篩選方式。
在使用高級(jí)篩選時(shí)，這些問(wèn)題尤為重要：
① 因?yàn)楦呒?jí)篩選需要訪問(wèn)獨(dú)立面板，因此在入口的設(shè)計(jì)就會(huì)尤為重要。一般會(huì)用文字鏈接或者圖標(biāo)來(lái)提示用戶，便于尋找。
② 基礎(chǔ)篩選與高級(jí)篩選可以并存，因?yàn)榻巧煌⑹褂脠?chǎng)景不同，常駐可以作為高頻使用的固定模塊，高級(jí)則作為特定角色需要更多篩選的補(bǔ)充，這部分放在下面 篩選的原則-篩選角色化 給大家詳細(xì)說(shuō)明。
這里列舉一些常見的高級(jí)篩選產(chǎn)品，大家可以一并查看：
自定義篩選則是在高級(jí)篩選的基礎(chǔ)上，進(jìn)一步業(yè)務(wù)化。
它是為了滿足 字段不固定、需求差異化 的業(yè)務(wù)場(chǎng)景，用戶能夠自定義選擇 篩選字段，配置字段的篩選規(guī)則。
使用自定義字段最重要的核心要素就是 突破固定字段限制，因?yàn)楦呒?jí)篩選是針對(duì)產(chǎn)品預(yù)設(shè)好的固定字段進(jìn)行篩選，自定義則是用戶可以自行選擇字段，用于適配更為靈活、多變的業(yè)務(wù)場(chǎng)景，如 CRM 的客戶自定義字段、OA 的流程表單（因?yàn)椴煌墓緦?duì)于 流程、客戶信息的管理不太相同，因此需要提供自定義字段進(jìn)行支持）
在設(shè)計(jì)自定義篩選時(shí)，我們的方案選擇主要受到“篩選頻率、條件復(fù)雜度、界面空間”的影響。
① 小入口+大彈窗，以篩選圖標(biāo)作為入口，點(diǎn)擊過(guò)后彈窗展示所有篩選條件。這種方式適合 中低頻（每天 1-3 次）使用篩選，界面空間緊張用大彈窗容納復(fù)雜配置
② 展開收起式，當(dāng)用戶點(diǎn)擊篩選后，將表格與工具欄之間的部分展開，用于呈現(xiàn)篩選條件。它能夠避免彈窗的跳轉(zhuǎn)感，篩選時(shí)用戶的視線可以無(wú)需離開表格區(qū)域，適用于 篩選條件數(shù)量多、高頻使用的場(chǎng)景
③ 固定常駐式，在頂部區(qū)域固定，默認(rèn)展開，這樣就無(wú)需點(diǎn)擊入口，這樣更適合“篩選是核心工作流” 的場(chǎng)景
自定義篩選是最難設(shè)計(jì)的，在使用過(guò)程中會(huì)有 四大基本元素。
篩選入口：需要讓用戶快速找到入口，同時(shí)不干擾主界面。
邏輯運(yùn)算區(qū)：主要就是 且、或 邏輯的展示，只是在運(yùn)算區(qū)域里面，需要考慮切換時(shí)究竟應(yīng)該如何做？
神策數(shù)據(jù)是通過(guò)文字方式，快速展示 且、或 邏輯，并且支持手動(dòng)直接切換，這個(gè)方案目前看來(lái)是用戶最容易理解的。
字段選擇區(qū)：選擇你所需要篩選的字段，點(diǎn)擊 添加、選擇，整體邏輯較為簡(jiǎn)單。
條件組管理區(qū)：篩選條件全部展示過(guò)的后續(xù)動(dòng)作，比如保存，批量錄入 等相關(guān)動(dòng)作都可以放在條件組管理當(dāng)中，進(jìn)行呈現(xiàn)。
接下來(lái)的 標(biāo)簽篩選、折疊篩選、浮窗篩選、抽屜篩選，都是對(duì)容器進(jìn)行分類。因此我們需要進(jìn)行展開講解，窮舉一下不同容器的形式和變化。
先來(lái)說(shuō)說(shuō)標(biāo)簽篩選（外露篩選）
標(biāo)簽篩選是將重要的篩選選項(xiàng)設(shè)計(jì)成“可點(diǎn)擊的標(biāo)簽按鈕”，將篩選過(guò)程當(dāng)中的選項(xiàng)直接來(lái)進(jìn)行展示，目的是為了能夠讓篩選條件，直接暴露出來(lái)給到用戶進(jìn)行使用。
它最重要的是提升效率，針對(duì)高頻使用的篩選維度將其外露展示，將多步操作壓縮為 一步點(diǎn)擊，同時(shí)能夠凸顯當(dāng)前的篩選狀態(tài)，避免用戶忘記自己選了什么。
在使用標(biāo)簽篩選時(shí)，需要注意這些內(nèi)容：
比如我想外露的內(nèi)容是各種狀態(tài)，我就可以將其放在頂部，進(jìn)行指標(biāo)圖+篩選功能的雜糅，像在小紅書千帆系統(tǒng)當(dāng)中，對(duì)于訂單的多種狀態(tài)，就會(huì)使用這一技巧，進(jìn)行呈現(xiàn)。
折疊篩選則是用隱藏的方式，按照使用頻率將篩選條件分層。高頻條件平鋪展示、低頻條件收折在面板當(dāng)中，點(diǎn)擊展開的篩選類型。
它最重要的價(jià)值是要平衡“空間與效率”的問(wèn)題，當(dāng)篩選條件 4-8 個(gè)時(shí)，如果全部平鋪?lái)?yè)面就會(huì)過(guò)于冗余，如果全部隱藏又會(huì)增加操作步驟，折疊篩選通過(guò) “高頻展示 + 低頻折疊”，讓用戶既能快速操作高頻條件，又能按需調(diào)用低頻條件，兼顧 “便捷性” 與 “功能完整性”。
正因?yàn)檫@樣的特性，所以很多基礎(chǔ)固定的篩選一旦變多后，通常就會(huì)使用折疊的方式進(jìn)行呈現(xiàn)。
浮窗其實(shí)是將篩選包起來(lái)，用浮窗進(jìn)行承載，臨時(shí)喚起，用完即走。
在設(shè)計(jì)時(shí)首先會(huì)有一個(gè)統(tǒng)一的篩選入口，浮窗彈出后設(shè)置對(duì)應(yīng)條件，然后點(diǎn)擊確認(rèn)、取消，浮窗自動(dòng)收起，不占用頁(yè)面只提示有篩選條件。
對(duì)于系統(tǒng)而言，它為什么需要浮窗篩選？本質(zhì)上會(huì)有三個(gè)原因：
我們之前就有相同的業(yè)務(wù)，需要將桌面端的部分移植到 Pad 端與移動(dòng)端，使用浮窗性價(jià)比就會(huì)更高。
抽屜篩選就是浮窗篩選的另一種表達(dá)，它主要是平衡 篩選條件與界面空間 的另一種選擇。
但確實(shí)會(huì)發(fā)現(xiàn)現(xiàn)在的抽屜篩選已經(jīng)沒(méi)有當(dāng)年的雄風(fēng)，感覺大家就避之不談，基本不會(huì)使用它。其實(shí)也會(huì)有幾個(gè)原因：
很多之前沿用抽屜篩選的產(chǎn)品，現(xiàn)在都在調(diào)整自己的交互方案。
并且因?yàn)槌閷系牟环€(wěn)定性，我們其實(shí)不太建議同學(xué)們使用抽屜進(jìn)行選擇自己的選項(xiàng)條件。
表頭篩選是一種相對(duì)特殊的篩選形式，它是將篩選入口放置在頭部，提供給到用戶進(jìn)行快捷的篩選操作。
本質(zhì)上是在滿足長(zhǎng)時(shí)間使用 Excel 用戶的使用習(xí)慣，因?yàn)樵?Excel 當(dāng)中表格眾多，對(duì)于篩選只能使用一種影響較小，最為通用的做法，隨著 B 端產(chǎn)品的發(fā)展，也會(huì)發(fā)現(xiàn)很多設(shè)計(jì)方式都被得到了延續(xù)。
在理解表頭篩選時(shí)，會(huì)有兩種使用場(chǎng)景：
① 空間較少，使用表頭篩選可以進(jìn)行輕量的篩選動(dòng)作。
這樣點(diǎn)擊篩選過(guò)后便可直接選擇篩選選項(xiàng)，執(zhí)行篩選操作。你可以看到飛書文檔，在主頁(yè)列表中就會(huì)這樣設(shè)計(jì)便可以輕量滿足篩選需求。
② 字段太多，需要表頭篩選帶入更多篩選值，進(jìn)行篩選安排。
這種方案本質(zhì)上是針對(duì)高級(jí)篩選的體驗(yàn)補(bǔ)充，記住！是需要高級(jí)篩選 or 自定義篩選時(shí)才會(huì)用到篩選策略。
因?yàn)樵谶@兩種篩選當(dāng)中，需要選擇篩選字段，有大量的選項(xiàng)，這對(duì)用戶來(lái)說(shuō)會(huì)十分影響其正常使用，通過(guò)表頭處的點(diǎn)擊，就能夠?qū)⒆侄文J(rèn)帶入，縮短篩選路徑，提高篩選效率。
這種方案的表頭篩選也會(huì)有相應(yīng)弊端，首先是表頭空間問(wèn)題，因?yàn)楸眍^本身需要展示的信息就相對(duì)較多，比如凍結(jié)、排序、等等，過(guò)多的操作會(huì)導(dǎo)致表頭過(guò)于復(fù)雜，如果還加上篩選，表頭空間就會(huì)更大，更不適合進(jìn)行使用。
其次用戶理解成本也會(huì)相對(duì)過(guò)高，因?yàn)楹芏嘈袠I(yè)屬性相對(duì)較為簡(jiǎn)單的 B 端產(chǎn)品并不會(huì)使用這類篩選，對(duì)于用戶初次使用也會(huì)有不小的負(fù)擔(dān)。但表頭篩選目前的普及率仍然比較低，使用比較頻繁的便是紛享銷客。
來(lái)到重點(diǎn)，AI 篩選。它不僅僅是未來(lái)篩選設(shè)計(jì)的大趨勢(shì)，更是能夠在產(chǎn)品層面解決 篩選復(fù)雜化的問(wèn)題。
比如剛才的高級(jí)篩選、自定義篩選，無(wú)疑都是在增加用戶的操作層面，他們需要不斷的選擇，才會(huì)得到自己想要的結(jié)果。而 AI 篩選的價(jià)值在于它解決了 用戶自然語(yǔ)言與程序邏輯執(zhí)行 之間的壁壘，讓篩選能夠響應(yīng)用戶的自然語(yǔ)言訴求。
比如我想篩選最近一個(gè)月的高價(jià)值客戶，就只需要在 AI 輸入框中說(shuō)出自己想法，然后就能得到篩選結(jié)果。
程序邏輯執(zhí)行，程序就可以根據(jù)自身知識(shí)庫(kù)，對(duì)高價(jià)值客戶進(jìn)行拆解，邏輯變?yōu)?客戶時(shí)間為：最近創(chuàng)建一個(gè)月客戶、類型為高價(jià)值。
這樣一來(lái)，其得到的結(jié)果就會(huì)更為簡(jiǎn)單合理，但是在設(shè)計(jì) AI 篩選時(shí)，它的難度還是會(huì)相對(duì)較大。
因?yàn)?AI 的結(jié)果可能會(huì)出現(xiàn)差錯(cuò)，那對(duì)應(yīng)的修改策略就會(huì)極為重要。
所以我們可以看到，像 Jira 對(duì)于 AI 篩選就會(huì)有更多的修改入口讓用戶對(duì)于篩選結(jié)果進(jìn)行快速修正，同時(shí)在入口上也需要做更多的設(shè)計(jì)進(jìn)行提示。
轉(zhuǎn)載：優(yōu)設(shè)
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
在數(shù)字化產(chǎn)品設(shè)計(jì)愈發(fā)注重用戶體驗(yàn)的當(dāng)下，界面反饋早已不是單純的“操作提示”，而是串聯(lián)用戶行為、產(chǎn)品功能與體驗(yàn)感知的核心紐帶，更是決定產(chǎn)品易用性、專業(yè)性與用戶留存度的關(guān)鍵細(xì)節(jié)。作為深耕UI/UE全鏈路設(shè)計(jì)十余年的專業(yè)團(tuán)隊(duì)，蘭亭妙微UI設(shè)計(jì)公司（藍(lán)藍(lán)設(shè)計(jì)）長(zhǎng)期聚焦B端后臺(tái)管理、大數(shù)據(jù)可視化、工業(yè)軟件、智能設(shè)備界面等多元場(chǎng)景，累計(jì)服務(wù)數(shù)百家中大型企業(yè)與行業(yè)龍頭客戶，在各類實(shí)戰(zhàn)項(xiàng)目中沉淀了一套完整、可落地的反饋設(shè)計(jì)方法論。
在界面設(shè)計(jì)中， 反饋（Feedback）是系統(tǒng)對(duì)用戶操作做出的即時(shí)、可感知的回應(yīng) 。系統(tǒng)通過(guò)界面元素、動(dòng)效、聲音或震動(dòng)等方式，告知當(dāng)前操作已被識(shí)別、系統(tǒng)狀態(tài)如何，以及后續(xù)可采取的行動(dòng)。
用戶完成任務(wù)所需的關(guān)鍵反饋節(jié)點(diǎn)
用戶在過(guò)程中可能產(chǎn)生的系統(tǒng)判斷或用戶選擇其導(dǎo)致的反饋分支
狀態(tài)反饋：系統(tǒng)對(duì)用戶主動(dòng)操作的即時(shí)狀態(tài)確認(rèn)，消除用戶對(duì)操作是否生效的疑慮。
進(jìn)度反饋：當(dāng)操作無(wú)法即時(shí)生效且需一定時(shí)間處理時(shí)，通過(guò)進(jìn)度反饋告知用戶當(dāng)前任務(wù)進(jìn)度。
確認(rèn)反饋：對(duì)可能產(chǎn)生負(fù)面后果的操作，可以通過(guò)確認(rèn)反饋向用戶提供上下文信息來(lái)解釋操作的后果，向用戶進(jìn)行確認(rèn)，從而防止發(fā)生錯(cuò)誤。
結(jié)果反饋：用戶完成任務(wù)節(jié)點(diǎn)后，系統(tǒng)明確告知操作成功或失敗。
及時(shí)：反饋應(yīng)在操作后即刻發(fā)生，讓用戶感知到系統(tǒng)已響應(yīng)。
清晰：反饋信息應(yīng)準(zhǔn)確無(wú)誤，一目了然，明確告知“發(fā)生了什么”及“下一步行動(dòng)”。
適度：反饋強(qiáng)度應(yīng)與信息重要程度相匹配，避免過(guò)度干擾。
視覺反饋：通過(guò)界面元素的視覺變化傳達(dá)系統(tǒng)狀態(tài)，例如顏色變化、動(dòng)畫效果、圖標(biāo)提示、文字提示及高亮標(biāo)記。
聽覺反饋：通過(guò)聲音信號(hào)增強(qiáng)用戶感知，例如系統(tǒng)音效、操作音效及語(yǔ)音提示。
觸覺反饋：通過(guò)設(shè)備震動(dòng)提供物理層面的反饋，例如短震確認(rèn)、長(zhǎng)震警告。
接下來(lái)我“創(chuàng)作者音色復(fù)刻”項(xiàng)目中以兩個(gè)具體場(chǎng)景來(lái)真實(shí)項(xiàng)目中設(shè)計(jì)反饋表現(xiàn)的應(yīng)用以上原則的設(shè)計(jì)與決策過(guò)程：
朗讀錯(cuò)誤的具體位置在哪里？
下一步應(yīng)該做什么？
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
智能家居開關(guān)面板的界面設(shè)計(jì)，核心是 “場(chǎng)景化交互、輕量化視覺、多感官反饋、生態(tài)化適配”.
頭部品牌界面設(shè)計(jì)核心特點(diǎn)與代表案例
|
品牌 |
界面設(shè)計(jì)核心特點(diǎn) |
代表系列 / 功能 |
界面設(shè)計(jì)亮點(diǎn) |
|
華為鴻蒙智家 |
鴻蒙分布式 UI + 蒙德里安美學(xué)，卡片化場(chǎng)景優(yōu)先 |
蒙德里安系列、智能中控屏 |
1. 引力動(dòng)效 + 膠囊 / 卡片組件，視覺統(tǒng)一；2. 金繕 / 月輝系列界面與面板材質(zhì)呼應(yīng)；3. 背光隨環(huán)境光自適應(yīng)，低飽和配色 |
|
施耐德電氣 |
極致簡(jiǎn)約 +“減感空間”，觸控與實(shí)體雙反饋 |
致鉑系列 |
1. 4.3mm 超薄面板 + 窄邊框，界面輕量化；2. 觸控按鍵僅操作時(shí)高亮，平時(shí)隱形；3. 1.5° 微動(dòng)擺角，操作 “有感無(wú)聲” |
|
綠米 Aqara |
米家生態(tài)適配 + 場(chǎng)景化快捷入口 |
智能墻壁開關(guān) H1 Pro |
1. 層級(jí)≤2 層，場(chǎng)景卡片（如 “回家 / 離家”）一鍵觸達(dá)；2. 圖標(biāo)直觀（太陽(yáng) = 照明、月亮 = 睡眠）；3. 狀態(tài)色標(biāo)低飽和，避免視覺干擾 |
|
羅格朗 |
藝術(shù)與科技融合，界面適配家裝風(fēng)格 |
Arteor 系列 |
1. 異形面板 + 裝飾化界面（如時(shí)鐘 / 溫度嵌入）；2. 啞光涂層 + 同色系配色，弱化設(shè)備感；3. 場(chǎng)景模式替代多按鍵，操作元素少 |
|
公牛 |
性價(jià)比 + 易用性，適配大眾家裝 |
G56 系列 |
1. 大字體 / 圖標(biāo)（≥8mm×8mm），適配老人 / 兒童；2. 黑白灰中性色，適配北歐 / 極簡(jiǎn)風(fēng)；3. 觸控 + 實(shí)體旋鈕雙兼容， |
操作邏輯：1 步觸達(dá)核心功能
設(shè)計(jì)避坑與落地建議
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).
我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
B 端界面的本質(zhì)是 “業(yè)務(wù)流程的數(shù)字化延伸”，15 年服務(wù)經(jīng)驗(yàn)讓我們明確：其設(shè)計(jì)趨勢(shì)始終圍繞 “降本增效、賦能業(yè)務(wù)” 展開 —— 通過(guò)預(yù)判用戶需求、簡(jiǎn)化操作層級(jí)、顯性化核心信息，讓工具從 “負(fù)擔(dān)” 變?yōu)?“助力”。
若您的企業(yè)正面臨 B 端系統(tǒng)效率低、用戶使用率差、業(yè)務(wù)適配性不足等問(wèn)題，蘭亭妙微可提供定制化界面升級(jí)方案，結(jié)合行業(yè)特性與業(yè)務(wù)需求，打造 “貼合場(chǎng)景、高效易用” 的 B 端產(chǎn)品體驗(yàn)。
配圖 2：8dp 網(wǎng)格系統(tǒng)示意圖，展示 4/8/16/24/32dp 間距的視覺層級(jí)，用不同顏色的矩形模塊排列，標(biāo)注 “Material Design 3 間距標(biāo)準(zhǔn)”，底部配手機(jī)界面應(yīng)用示例。
配圖 3：層級(jí)留白策略圖，分宏觀（界面邊緣 20pt 安全邊距）、中觀（模塊間距 24dp）、微觀（按鈕內(nèi)邊距 16dp）三級(jí)，用手機(jī)界面剖面圖展示，不同層級(jí)留白區(qū)域用不同透明度的藍(lán)色填充。
配圖 4：響應(yīng)式間距對(duì)比圖，左側(cè)為 320px 窄屏（16dp 基礎(chǔ)間距），右側(cè)為 1024px 平板屏（24dp 基礎(chǔ)間距），展示相同界面在不同設(shè)備上的間距適配效果，用紅色箭頭標(biāo)注間距變化。
配圖 5：反常識(shí)設(shè)計(jì)案例，左側(cè)為 VS Code 代碼編輯區(qū)（最小行間距、零邊距），右側(cè)為 Spotify 播放界面（專輯封面與按鈕間距 20dp，按鈕組間距 16dp 的非對(duì)稱設(shè)計(jì)），用對(duì)比箭頭連接。
配圖 6：案例解析綜合圖，包含 Figma 工具欄間距（24dp）、Notion 段落排版（行高 1.5 倍）、Airbnb 搜索頁(yè)間距（搜索框與標(biāo)簽 32dp），三個(gè)局部界面拼圖，用黃色線條標(biāo)注關(guān)鍵間距數(shù)值。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wtxcl.cn
