一、視覺設(shè)計：專業(yè)與溫度的平衡，打造醫(yī)療級質(zhì)感

1. 品牌與色彩體系

2. 數(shù)據(jù)可視化設(shè)計

3. 全端視覺風(fēng)格統(tǒng)一

二、信息架構(gòu)：全鏈路閉環(huán)，覆蓋健康管理全場景

• 移動端 / 手表端采集頁：支持 ECG 心電圖記錄、心率實時監(jiān)測，界面聚焦核心數(shù)據(jù)，操作極簡，適配用戶日常快速監(jiān)測的場景；
• 用戶數(shù)據(jù)頁：聚合用戶個人信息、歷史監(jiān)測數(shù)據(jù)、健康趨勢分析，數(shù)據(jù)分類清晰，用戶可快速查看單次監(jiān)測結(jié)果與長期健康變化；
• PC 端后臺管理頁：整合多用戶數(shù)據(jù)、設(shè)備管理、歷史記錄查詢等功能，數(shù)據(jù)可視化全面，滿足用戶或醫(yī)護人員的專業(yè)管理需求；
• 注冊登錄頁：采用簡約設(shè)計，兼顧用戶信息安全與使用便捷性，適配醫(yī)療產(chǎn)品的隱私保護需求。

三、交互體驗：精準(zhǔn)適配場景，兼顧專業(yè)性與易用性

• 極簡采集流程：手表端監(jiān)測界面僅保留核心操作按鈕，用戶可一鍵開始 / 停止監(jiān)測，進度條與狀態(tài)提示清晰直觀，避免操作干擾；
• 數(shù)據(jù)即時反饋：監(jiān)測過程中實時顯示心率、監(jiān)測進度，完成后即時呈現(xiàn)數(shù)據(jù)結(jié)果與健康狀態(tài)，降低用戶等待焦慮；
• 多端協(xié)同交互：移動端、手表端、PC 端數(shù)據(jù)實時同步，用戶可在任意設(shè)備查看、管理健康數(shù)據(jù)，操作體驗連貫；
• 輕量化操作設(shè)計：界面布局簡潔克制，核心數(shù)據(jù)突出展示，減少冗余信息，讓用戶快速獲取關(guān)鍵健康信息，適配不同年齡段用戶的使用習(xí)慣。

四、設(shè)計總結(jié)

那好話不多說，我們正式開始～

在開始之前先來說說 什么是 B 端產(chǎn)品，我們通常也叫做管理后臺。

這里會有兩個問題：“它管理什么？到底如何管理？”給大家三秒鐘可以思考一下。

首先它管理的是數(shù)據(jù)，無論是 ERP 系統(tǒng)的訂單數(shù)據(jù)、CRM 的客戶數(shù)據(jù)、OA 的流程數(shù)據(jù)，你都會發(fā)現(xiàn)管理后臺就是在不停的對數(shù)據(jù)進行補充、整合。

那到底應(yīng)該如何管理？簡單來說就是 數(shù)據(jù)的“增刪改查”，篩選其實就是查詢的一種重要方式。

比如一個客戶關(guān)系管理系統(tǒng)（CRM），銷售人員去拜訪客戶就會提前查詢客戶信息，來了解客戶關(guān)注內(nèi)容進而去組織銷售話術(shù)。

那這里的篩選應(yīng)該如何設(shè)計？怎樣設(shè)計既能高效便利，同時也具備擴展性？那今天我們系統(tǒng)盤點篩選組件究竟應(yīng)該如何設(shè)計？

一、篩選與搜索的差別

這里我們先來講講篩選的鄰居“搜索”，因為很多同學(xué)其實對于這兩者之間的差別不太了解，只知道它們都是在工具欄當(dāng)中，都是在做查詢數(shù)據(jù)的工作。但在功能上是有明顯的區(qū)分：

搜索是對系統(tǒng)的關(guān)鍵詞進行精準(zhǔn)匹配，比如用戶 ID、手機號、昵稱、地址等信息內(nèi)容

篩選則是給出產(chǎn)品的固定條件選項，比如歸屬人、狀態(tài)、類型 等，你可以按需勾選條件，就能得出對應(yīng)數(shù)據(jù)

這里稍微多說一句，因為所有的 B 端系統(tǒng)都是由字段組成，而在大的分類上，字段主要包含有輸入、選擇、上傳三大類型。

搜索服務(wù)于輸入類字段，比如剛才講到了 用戶 ID、手機號、昵稱、地址等 都是得讓用戶自行輸入才會得到，因此在表單里輸入，在表格當(dāng)中也是輸入搜索，所以系統(tǒng)是關(guān)聯(lián)的。

篩選則是選擇類字段，也就是歸屬人、狀態(tài)、類型 等，在 B 端系統(tǒng)當(dāng)中，選擇字段尤為重要，所以在表單處選擇同樣在篩選處也是相同邏輯。

理解篩選與搜索的差異后，我們再來說說篩選～

二、篩選的邏輯

在篩選的過程當(dāng)中，有著非常多重要的邏輯需要提前掌握，我們通過簡單的快問快答，幫助大家快速拆解。

第一題：什么是 且、或、非

這是篩選當(dāng)中必須要了解的基礎(chǔ)運算條件。

且就是篩選的條件必須同時滿足才能出結(jié)果，比如一個電商數(shù)據(jù)分析師，需要篩選潛在高意向客戶，在篩選條件為「時間在近 30 天有支付訂單、近 30 天累計消費金額≥800 元、近 30 天訂單次數(shù)≥2 次」，必須同時滿足才會滿足用戶需求。

或就是這些條件滿足任意一個就能出結(jié)果，比如還是電商數(shù)據(jù)，需要尋找對產(chǎn)品有興趣的潛在客戶，就需要篩選「近 90 天內(nèi)有過人工咨詢記錄、近 30 天內(nèi)訪問產(chǎn)品詳情頁≥6 次、近 180 天內(nèi)提交過試用申請」，三個條件滿足任意一個，這樣就能涵蓋更為全面。

非就是這些條件必須排除掉才能出結(jié)果，比如電商數(shù)據(jù)，因為涉及到刷單、退款的情況，需要將其進行清洗，因此在篩選條件上就需要滿足「訂單狀態(tài)≠測試訂單、支付狀態(tài)≠已退款、客戶類型≠內(nèi)部員工」，需要同時排除這些數(shù)據(jù)。

所以對應(yīng)的篩選運算規(guī)則，其實背后都是用戶在使用時需要深度分析使用的最為重要的工具～

第二題：在B端系統(tǒng)當(dāng)中多個篩選條件默認(rèn)的運算規(guī)則是什么？

A：且 B：或 C：非

在 B 端系統(tǒng)當(dāng)中，最常用的運算規(guī)則就是且，也就是取多個篩選當(dāng)中的交集。

比如下面這三個篩選項，所計算的呈現(xiàn)規(guī)則就是 「銷售負(fù)責(zé)人是李強」且「銷售時間是 近一個月」且「價值為高價值」的客戶，這樣就是一個典型的且的關(guān)系。

因為這種思維方式是最符合用戶的思考邏輯，這也是眾多 B 端系統(tǒng)當(dāng)中的常見邏輯。

第三題：且、或、非可以同時存在于一個篩選組合當(dāng)中嗎？

A.可以

B.不可以

它們可以出現(xiàn)在同一個篩選組合當(dāng)中，因為實際的業(yè)務(wù)往往是“多條件、多邏輯” 的復(fù)合場景。

比如在教育管理系統(tǒng)當(dāng)中，班主任要篩選 初三年級且數(shù)學(xué)月考不及格 或 非 住校生 的學(xué)生，來針對這兩類人群進行重點管理與監(jiān)控。

但在篩選的設(shè)計當(dāng)中，為了讓用戶理解邏輯，我們需要通過 條件組（如括號、層級縮進、虛線框）讓用戶直觀感知分組關(guān)系，避免依賴抽象的優(yōu)先級規(guī)則。

第四題：如果你是一個設(shè)計師，應(yīng)該如何降低成本表達這個關(guān)系？

因為邏輯較為復(fù)雜，所以在篩選時有些基礎(chǔ)辦法可以降低門檻。

① 可視化展示篩選運算，如果用戶對于且、或邏輯不太了解，可以使用圖標(biāo)快速表示

② 實時校驗邏輯規(guī)則，不要出現(xiàn)相互矛盾的篩選邏輯

這個功能其實不太好做，但 ONES 做了一個最簡單的邏輯判斷。在且條件當(dāng)中，同一篩選條件不得選擇兩次，這樣用于避免在且條件當(dāng)中經(jīng)常出現(xiàn)的相互矛盾的篩選邏輯。

三、篩選的類型

好的，準(zhǔn)備工作已經(jīng)完成，我們就可以順利了解篩選的類型。

由于篩選的類型眾多，我們會按照 業(yè)務(wù)復(fù)雜度、容器差異 兩個維度，來對篩選進行歸類。
通過業(yè)務(wù)復(fù)雜度，將其分為：基礎(chǔ)篩選、高級篩選、自定義篩選

按照容器差異，將其分為：標(biāo)簽篩選、折疊篩選、浮窗篩選、抽屜篩選、表頭篩選、AI 篩選

1. 基礎(chǔ)篩選

基礎(chǔ)篩選是將 高頻使用（使用頻率≥80%）的篩選條件進行固定，一直保持在頁面中的核心位置，不折疊、不隱藏，讓用戶能夠直接看到的篩選類型。

這是一個最為基礎(chǔ)的篩選方式，在常見的 Ant Design、Arco Design 的頁面模板當(dāng)中都會有基礎(chǔ)篩選的身影。

使用基礎(chǔ)篩選最為重要的便是 快速觸達，用戶打開頁面就會查看篩選條件，不需要點擊“更多”“展開” 等入口，這能滿足 B 端用戶 高效完成日常操作 的核心需求。

在使用基礎(chǔ)篩選時，我們需要注意以下問題：

① 基礎(chǔ)篩選條件的數(shù)量不宜過多，一般 3-4 個最為合適

因為篩選條件過多，就失去了常駐的意義。但在實際業(yè)務(wù)當(dāng)中，我們也需要考慮 5 個、7 個這類極端場景，畢竟常駐是最為基礎(chǔ)的方案，難免會遇到特殊情況。（需要在篩選的規(guī)則當(dāng)中進行梳理，將交互邏輯呈現(xiàn)清楚）

② 基礎(chǔ)篩選當(dāng)中，排序規(guī)則會非常重要

一般按照 高頻-低頻 的方式，從左到右依次排列，對于高頻低頻的獲取方式，我們可以數(shù)據(jù)埋點、卡片分類、問卷調(diào)研等多種方式進行搜集。

③ 篩選基礎(chǔ)，樣式就不基礎(chǔ)

基礎(chǔ)篩選有著較多的篩選樣式，大家可以結(jié)合自身業(yè)務(wù)進行選擇，這里推薦樣式一與二，因為展示效率更高～

這里列舉一些常見的基礎(chǔ)篩選產(chǎn)品，大家可以一并查看：

2. 高級篩選

高級篩選是較為復(fù)雜的篩選形式，它為了滿足更多 低頻、復(fù)雜、個性 的業(yè)務(wù)需求，通常會提供相對獨立篩選面板，展示更多的篩選條件。

獨立面板也就是我們后續(xù)會提到的 浮窗篩選、抽屜篩選、表頭篩選...，所以它們的關(guān)系也會相對復(fù)雜。

高級篩選與基礎(chǔ)篩選最大的區(qū)別在于：

基礎(chǔ)篩選只能覆蓋 3 個左右的高頻篩選，而高級篩選可支持 10 + 維度的靈活組合；常駐只能使用且的邏輯相對簡單，而高級可以有條件組嵌套支持復(fù)雜業(yè)務(wù)邏輯；常駐位置較為固定，而高級則有面板加持，可以更為靈活。

其實選擇高級篩選或者基礎(chǔ)篩選，最大的話語權(quán)還是場景。

如果你的篩選是簡單篩選幾個條件，那基礎(chǔ)篩選就已經(jīng)足夠，反之對篩選條件、篩選效率有著更高要求，我們則會考慮更為復(fù)雜的篩選方式。

在使用高級篩選時，這些問題尤為重要：

① 因為高級篩選需要訪問獨立面板，因此在入口的設(shè)計就會尤為重要。一般會用文字鏈接或者圖標(biāo)來提示用戶，便于尋找。

② 基礎(chǔ)篩選與高級篩選可以并存，因為角色不同、使用場景不同，常駐可以作為高頻使用的固定模塊，高級則作為特定角色需要更多篩選的補充，這部分放在下面 篩選的原則-篩選角色化 給大家詳細(xì)說明。

這里列舉一些常見的高級篩選產(chǎn)品，大家可以一并查看：

3. 自定義篩選

自定義篩選則是在高級篩選的基礎(chǔ)上，進一步業(yè)務(wù)化。

它是為了滿足 字段不固定、需求差異化 的業(yè)務(wù)場景，用戶能夠自定義選擇 篩選字段，配置字段的篩選規(guī)則。

使用自定義字段最重要的核心要素就是 突破固定字段限制，因為高級篩選是針對產(chǎn)品預(yù)設(shè)好的固定字段進行篩選，自定義則是用戶可以自行選擇字段，用于適配更為靈活、多變的業(yè)務(wù)場景，如 CRM 的客戶自定義字段、OA 的流程表單（因為不同的公司對于 流程、客戶信息的管理不太相同，因此需要提供自定義字段進行支持）

在設(shè)計自定義篩選時，我們的方案選擇主要受到“篩選頻率、條件復(fù)雜度、界面空間”的影響。

① 小入口+大彈窗，以篩選圖標(biāo)作為入口，點擊過后彈窗展示所有篩選條件。這種方式適合 中低頻（每天 1-3 次）使用篩選，界面空間緊張用大彈窗容納復(fù)雜配置

② 展開收起式，當(dāng)用戶點擊篩選后，將表格與工具欄之間的部分展開，用于呈現(xiàn)篩選條件。它能夠避免彈窗的跳轉(zhuǎn)感，篩選時用戶的視線可以無需離開表格區(qū)域，適用于 篩選條件數(shù)量多、高頻使用的場景

③ 固定常駐式，在頂部區(qū)域固定，默認(rèn)展開，這樣就無需點擊入口，這樣更適合“篩選是核心工作流” 的場景

自定義篩選是最難設(shè)計的，在使用過程中會有 四大基本元素。

篩選入口：需要讓用戶快速找到入口，同時不干擾主界面。

邏輯運算區(qū)：主要就是 且、或 邏輯的展示，只是在運算區(qū)域里面，需要考慮切換時究竟應(yīng)該如何做？

神策數(shù)據(jù)是通過文字方式，快速展示 且、或 邏輯，并且支持手動直接切換，這個方案目前看來是用戶最容易理解的。

字段選擇區(qū)：選擇你所需要篩選的字段，點擊 添加、選擇，整體邏輯較為簡單。

條件組管理區(qū)：篩選條件全部展示過的后續(xù)動作，比如保存，批量錄入 等相關(guān)動作都可以放在條件組管理當(dāng)中，進行呈現(xiàn)。

4. 標(biāo)簽篩選（外露篩選）

接下來的 標(biāo)簽篩選、折疊篩選、浮窗篩選、抽屜篩選，都是對容器進行分類。因此我們需要進行展開講解，窮舉一下不同容器的形式和變化。

先來說說標(biāo)簽篩選（外露篩選）

標(biāo)簽篩選是將重要的篩選選項設(shè)計成“可點擊的標(biāo)簽按鈕”，將篩選過程當(dāng)中的選項直接來進行展示，目的是為了能夠讓篩選條件，直接暴露出來給到用戶進行使用。

它最重要的是提升效率，針對高頻使用的篩選維度將其外露展示，將多步操作壓縮為 一步點擊，同時能夠凸顯當(dāng)前的篩選狀態(tài)，避免用戶忘記自己選了什么。

在使用標(biāo)簽篩選時，需要注意這些內(nèi)容：

1. 在標(biāo)簽的設(shè)計上，因為存在的樣式相對較多，所以我們可以根據(jù)自身產(chǎn)品的視覺層級，進行逐一選擇。
2. 涉及到多角色使用標(biāo)簽篩選時，需要重點考慮角色化的差異，因為其常駐，如果內(nèi)容都不是用戶關(guān)注的點，標(biāo)簽常駐的意義也不會很大。
3. 當(dāng)標(biāo)簽選項超過 7 個時，則需要考慮對此篩選內(nèi)容是否需要進行單獨處理，因為選項過多，用戶使用標(biāo)簽篩選也不會特別清晰。

比如我想外露的內(nèi)容是各種狀態(tài)，我就可以將其放在頂部，進行指標(biāo)圖+篩選功能的雜糅，像在小紅書千帆系統(tǒng)當(dāng)中，對于訂單的多種狀態(tài)，就會使用這一技巧，進行呈現(xiàn)。

5. 折疊篩選

折疊篩選則是用隱藏的方式，按照使用頻率將篩選條件分層。高頻條件平鋪展示、低頻條件收折在面板當(dāng)中，點擊展開的篩選類型。

它最重要的價值是要平衡“空間與效率”的問題，當(dāng)篩選條件 4-8 個時，如果全部平鋪頁面就會過于冗余，如果全部隱藏又會增加操作步驟，折疊篩選通過 “高頻展示 + 低頻折疊”，讓用戶既能快速操作高頻條件，又能按需調(diào)用低頻條件，兼顧 “便捷性” 與 “功能完整性”。

正因為這樣的特性，所以很多基礎(chǔ)固定的篩選一旦變多后，通常就會使用折疊的方式進行呈現(xiàn)。

6. 浮窗篩選

浮窗其實是將篩選包起來，用浮窗進行承載，臨時喚起，用完即走。

在設(shè)計時首先會有一個統(tǒng)一的篩選入口，浮窗彈出后設(shè)置對應(yīng)條件，然后點擊確認(rèn)、取消，浮窗自動收起，不占用頁面只提示有篩選條件。

對于系統(tǒng)而言，它為什么需要浮窗篩選？本質(zhì)上會有三個原因：

1. 節(jié)約空間，因為在列表當(dāng)中，如果把篩選條件進行常駐會擠壓核心內(nèi)容，列表當(dāng)中的屏效相對較低，這時候篩選則會呈現(xiàn)為隱藏-喚起的模式，我們列表所展示的信息數(shù)量就會變多。
2. 降低頁面復(fù)雜度，當(dāng)篩選條件是常駐時，條件多了過后就會導(dǎo)致使用起來異常困難，特別是針對那些使用頻率本身偏低的用戶來說，更是無效信息，因此收納起來就能降低復(fù)雜度，使用戶的專注度能夠更加聚焦于核心任務(wù)當(dāng)中。
3. 更強的適配性，假如在需要設(shè)計移動端的篩選，也可以復(fù)用統(tǒng)一的交互，并且用戶點擊篩選圖標(biāo)已形成記憶。

我們之前就有相同的業(yè)務(wù)，需要將桌面端的部分移植到 Pad 端與移動端，使用浮窗性價比就會更高。

7. 抽屜篩選

抽屜篩選就是浮窗篩選的另一種表達，它主要是平衡 篩選條件與界面空間 的另一種選擇。
但確實會發(fā)現(xiàn)現(xiàn)在的抽屜篩選已經(jīng)沒有當(dāng)年的雄風(fēng)，感覺大家就避之不談，基本不會使用它。其實也會有幾個原因：

1. 抽屜需要來回滑動，操作上不如彈窗直接高效，視覺上也缺乏彈窗的簡潔與高級感；
2. 展開時內(nèi)容常偏向主屏幕一側(cè)，容易造成明顯的視覺偏移，影響整體體驗

很多之前沿用抽屜篩選的產(chǎn)品，現(xiàn)在都在調(diào)整自己的交互方案。

并且因為抽屜的不穩(wěn)定性，我們其實不太建議同學(xué)們使用抽屜進行選擇自己的選項條件。

8. 表頭篩選

表頭篩選是一種相對特殊的篩選形式，它是將篩選入口放置在頭部，提供給到用戶進行快捷的篩選操作。

本質(zhì)上是在滿足長時間使用 Excel 用戶的使用習(xí)慣，因為在 Excel 當(dāng)中表格眾多，對于篩選只能使用一種影響較小，最為通用的做法，隨著 B 端產(chǎn)品的發(fā)展，也會發(fā)現(xiàn)很多設(shè)計方式都被得到了延續(xù)。

在理解表頭篩選時，會有兩種使用場景：

① 空間較少，使用表頭篩選可以進行輕量的篩選動作。

這樣點擊篩選過后便可直接選擇篩選選項，執(zhí)行篩選操作。你可以看到飛書文檔，在主頁列表中就會這樣設(shè)計便可以輕量滿足篩選需求。

② 字段太多，需要表頭篩選帶入更多篩選值，進行篩選安排。

這種方案本質(zhì)上是針對高級篩選的體驗補充，記住！是需要高級篩選 or 自定義篩選時才會用到篩選策略。

因為在這兩種篩選當(dāng)中，需要選擇篩選字段，有大量的選項，這對用戶來說會十分影響其正常使用，通過表頭處的點擊，就能夠?qū)⒆侄文J(rèn)帶入，縮短篩選路徑，提高篩選效率。

這種方案的表頭篩選也會有相應(yīng)弊端，首先是表頭空間問題，因為表頭本身需要展示的信息就相對較多，比如凍結(jié)、排序、等等，過多的操作會導(dǎo)致表頭過于復(fù)雜，如果還加上篩選，表頭空間就會更大，更不適合進行使用。

其次用戶理解成本也會相對過高，因為很多行業(yè)屬性相對較為簡單的 B 端產(chǎn)品并不會使用這類篩選，對于用戶初次使用也會有不小的負(fù)擔(dān)。但表頭篩選目前的普及率仍然比較低，使用比較頻繁的便是紛享銷客。

9. AI 篩選

來到重點，AI 篩選。它不僅僅是未來篩選設(shè)計的大趨勢，更是能夠在產(chǎn)品層面解決 篩選復(fù)雜化的問題。

比如剛才的高級篩選、自定義篩選，無疑都是在增加用戶的操作層面，他們需要不斷的選擇，才會得到自己想要的結(jié)果。而 AI 篩選的價值在于它解決了 用戶自然語言與程序邏輯執(zhí)行 之間的壁壘，讓篩選能夠響應(yīng)用戶的自然語言訴求。

比如我想篩選最近一個月的高價值客戶，就只需要在 AI 輸入框中說出自己想法，然后就能得到篩選結(jié)果。

程序邏輯執(zhí)行，程序就可以根據(jù)自身知識庫，對高價值客戶進行拆解，邏輯變?yōu)?客戶時間為：最近創(chuàng)建一個月客戶、類型為高價值。

這樣一來，其得到的結(jié)果就會更為簡單合理，但是在設(shè)計 AI 篩選時，它的難度還是會相對較大。

因為 AI 的結(jié)果可能會出現(xiàn)差錯，那對應(yīng)的修改策略就會極為重要。

所以我們可以看到，像 Jira 對于 AI 篩選就會有更多的修改入口讓用戶對于篩選結(jié)果進行快速修正，同時在入口上也需要做更多的設(shè)計進行提示。

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

在數(shù)字化產(chǎn)品設(shè)計愈發(fā)注重用戶體驗的當(dāng)下，界面反饋早已不是單純的“操作提示”，而是串聯(lián)用戶行為、產(chǎn)品功能與體驗感知的核心紐帶，更是決定產(chǎn)品易用性、專業(yè)性與用戶留存度的關(guān)鍵細(xì)節(jié)。作為深耕UI/UE全鏈路設(shè)計十余年的專業(yè)團隊，蘭亭妙微UI設(shè)計公司（藍藍設(shè)計）長期聚焦B端后臺管理、大數(shù)據(jù)可視化、工業(yè)軟件、智能設(shè)備界面等多元場景，累計服務(wù)數(shù)百家中大型企業(yè)與行業(yè)龍頭客戶，在各類實戰(zhàn)項目中沉淀了一套完整、可落地的反饋設(shè)計方法論。

在界面設(shè)計中， 反饋（Feedback）是系統(tǒng)對用戶操作做出的即時、可感知的回應(yīng) 。系統(tǒng)通過界面元素、動效、聲音或震動等方式，告知當(dāng)前操作已被識別、系統(tǒng)狀態(tài)如何，以及后續(xù)可采取的行動。

•  

  溝通方式：

  感性溝通——傳達“我能讓你變得很有品位”的概念，向他們兜售一個關(guān)于“理想之家”的筑夢工具；
•  

  設(shè)計目標(biāo)：

  希望能第一時間抓住用戶眼球，讓用戶感知到這是一家高級的公司；
•  

  風(fēng)格調(diào)研：

  在本地用戶投票調(diào)研中拿到了不俗的票數(shù)，說明成功地引發(fā)了用戶“共鳴”；
•  

  差異化：

  在普遍SaaS網(wǎng)站中，風(fēng)格比較獨特鮮明；
•  

  總結(jié)：

  通過大面積的留白、克制的和風(fēng)配色、以及嚴(yán)謹(jǐn)?shù)木W(wǎng)格系統(tǒng)和銳利的直角，去傳遞產(chǎn)品的專業(yè)與品位，旨在先與用戶建立情感共鳴。

   

   

•  

  溝通方式：

  理性溝通——傳達“我們很厲害”的概念，告訴用戶我們在賣一個“解決方案”；
•  

  信賴感強：

  藍色主色搭配黃色的輔助色，配合線條插畫，是日本SaaS網(wǎng)站建立用戶信任的“標(biāo)配”元素；
•  

  風(fēng)格清晰：

  明確的SaaS風(fēng)格，降低用戶認(rèn)知成本，同樣在本地用戶投票調(diào)研中拿到了不俗的票數(shù)；
•  

  總結(jié)：

  符合日本主流SaaS網(wǎng)站的設(shè)計范式，開門見山地展示了軟件的核心功能、客戶案例墻、增長數(shù)據(jù)，通過“理性溝通”，用最快的速度告訴用戶“相信我，我能幫你解決問題”；

一、色彩設(shè)計心理學(xué)：精準(zhǔn)契合 “穩(wěn)重 + 創(chuàng)新” 的核心需求

二、打破科技色慣例：在同質(zhì)化中實現(xiàn)差異化突圍

三、數(shù)字場景 “天生百搭色”：適配多場景使用需求

一、B 端設(shè)計師該懂哪些技術(shù)？

1. 前端界面的實現(xiàn)邏輯
2. 后端的功能框架和服務(wù)
3. 前后端聯(lián)調(diào)的過程
4. 產(chǎn)品的部署和運維
5. AI 的生成和處理流程

二、各技術(shù)方向核心解析與學(xué)習(xí)建議

（一）前端界面的實現(xiàn)邏輯

（二）后端的功能框架和服務(wù)

（三）前后端聯(lián)調(diào)的過程

（四）產(chǎn)品的部署和運維

（五）AI 的生成和處理流程

1. 計算機視覺模型：對圖像進行生成、檢測、分類，文生圖是最常見的應(yīng)用；
2. 自然語言處理模型：對文字進行分析并返回文字結(jié)果，ChatGPT 是典型代表；
3. 語音處理模型：實現(xiàn)語音識別、合成、輸出，如短視頻的合成人聲；
4. 多模態(tài)模型：處理圖文、音視頻等多種混合數(shù)據(jù)，應(yīng)用于圖文檢索、視頻總結(jié)等場景。

三、結(jié)語

一、項目背景與核心目標(biāo)

二、三大交互范式的場景化落地應(yīng)用

2.1 嵌入式交互：復(fù)雜表單的靈活填寫助手

1. 填充識別類：針對規(guī)則明確、AI 可通過識別提取關(guān)鍵信息輸出穩(wěn)定答案的字段（如商品屬性），采用系統(tǒng)自動填入模式，搭配 “AI 預(yù)填” 標(biāo)簽提示狀態(tài)。例如 AI 可從商家上傳的商品包裝圖中識別 “風(fēng)干”“盒裝” 等信息，自動填入食品工藝、包裝方式模塊，同時提示商家檢查確認(rèn)，以自動化替代手動錄入，最大化縮短填寫時間。
2. 推薦優(yōu)化類：針對需依托 AI 優(yōu)化素材、提升購買吸引力的內(nèi)容（如商品主圖、標(biāo)題），因存在 AI 創(chuàng)作內(nèi)容不符商家預(yù)期的可能，采用 “主動提供結(jié)果但不預(yù)先填入” 的模式，支持商家對 AI 結(jié)果進行調(diào)優(yōu)，待符合預(yù)期后再手動錄入。靈活的交互設(shè)計既滿足不同商家的個性化需求，也有效降低人工審核時長。

2.2 伴隨式交互：全場景的主動診斷助手

1. 主動觸達：AI 助手入口設(shè)計 “流光呼吸感” 動效，搭配輪播詞條實時推送與當(dāng)前任務(wù)相關(guān)的關(guān)鍵信息（如 “今日店鋪訪問量增長 20%”），實現(xiàn)輕量視覺吸引；當(dāng)商家停留于具體任務(wù)頁面時，助手可基于頁面內(nèi)容與業(yè)務(wù)邏輯，主動識別潛在問題并推送輕量提醒（如 “商品主圖尺寸可能影響點擊率”），在商家未發(fā)起提問前即主動觸發(fā)服務(wù)。
2. 連續(xù)洞察：AI 助手在輸出建議或數(shù)據(jù)時，會附帶清晰的思考過程與來源摘要，實現(xiàn) “可解釋的 AI”，打消商家疑慮；同時能基于當(dāng)前對話主動預(yù)判后續(xù)需求，智能推薦下一步操作（如 “進一步分析體驗分下降的原因”），將單點查詢轉(zhuǎn)化為系統(tǒng)性的經(jīng)營問題排查與解決鏈路，大幅降低商家獲取完整決策依據(jù)的綜合成本。

2.3 托管式交互：隱式服務(wù)的安心管家

1. 可視化配置，構(gòu)建信任基礎(chǔ)：為消除商家對 AI “黑盒操作” 的疑慮，將抽象的 AI 能力轉(zhuǎn)化為可預(yù)判的具體結(jié)果，我們提供直觀的策略配置面板與 C 端頁面預(yù)覽圖，商家可針對售前咨詢（商品咨詢、催促下單等）、售后維護（退款申請等）不同場景設(shè)置回復(fù)規(guī)則，并實時查看 AI 執(zhí)行的示意效果。“配置即所見” 的設(shè)計讓 AI 能力變得具體可感知，讓商家從配置起點建立對自動化系統(tǒng)的可控感。

    

   

2. 明確狀態(tài)標(biāo)識，實現(xiàn)流暢人機接力：為保障人機協(xié)同的順暢性，界面中對接待狀態(tài)進行全方位清晰標(biāo)識：全局接待狀態(tài)置頂實時更新、會話列表按狀態(tài)動態(tài)分組、單人接待狀態(tài)（接待中 / 暫停接待）強化并自動同步。當(dāng) AI 無法解答復(fù)雜訴求、用戶負(fù)面情緒等問題時，會話將自動流轉(zhuǎn)至 “待人工回復(fù)” 分組，通過動態(tài)高亮 + 聲音預(yù)警提醒人工快速接管；人工回復(fù)后，AI 將自動暫停并更新接待狀態(tài)，同時生成會話摘要，幫助工作人員快速了解溝通前因后果，將決策焦點從 “梳理問題” 轉(zhuǎn)向 “解決問題”。此外，客服可主動設(shè)置 “恢復(fù)托管”，AI 也會在識別新會話時自動恢復(fù)接待，形成閉環(huán)的人機協(xié)同機制。

三、構(gòu)建全鏈路智能化感知體系

四、設(shè)計核心與價值沉淀

智能家居開關(guān)面板的界面設(shè)計，核心是 “場景化交互、輕量化視覺、多感官反饋、生態(tài)化適配”.

頭部品牌界面設(shè)計核心特點與代表案例

操作邏輯：1 步觸達核心功能

• 層級不超過 2 層，用 “場景卡片” 替代 “設(shè)備羅列”，比如 “觀影模式” 一鍵關(guān)閉主燈、打開氛圍燈 + 電視；
• 圖標(biāo)用通用符號（如云朵 = 空調(diào)、雨滴 = 窗簾），避免抽象圖形，降低學(xué)習(xí)成本。

• 

• 視覺呈現(xiàn)：輕量化 + 易讀性
• 字體 / 圖標(biāo) “大且清晰”，建議≥8mm×8mm，適配不同年齡用戶；
• 色彩用 “低飽和底色 + 高對比文字”（如淺灰底 + 深灰字），既柔和又易讀，避免高飽和工業(yè)色。

• 

• 交互適配：觸控 + 實體雙兼容
• 觸控界面：按鈕區(qū)域足夠大，避免誤觸；操作后視覺（圖標(biāo)變色）、觸覺（震動）、聽覺（輕提示音）三重反饋；
• 實體旋鈕 / 按鍵：界面參數(shù)與物理操作同步，比如旋鈕轉(zhuǎn)動時，溫度 / 亮度實時變化。
• 場景響應(yīng)：動態(tài)適配環(huán)境
• 亮度自適應(yīng)：界面背光隨環(huán)境光調(diào)節(jié)（白天變暗、夜晚調(diào)柔），避免光污染；
• 狀態(tài)可視化：設(shè)備異常時，用醒目但不刺眼的提示（如淺紅底色 + 故障圖標(biāo)），不干擾日常視覺。

設(shè)計避坑與落地建議

• 避免信息過載：只展示 “當(dāng)前狀態(tài) + 關(guān)鍵操作”，比如溫度、時間、設(shè)備快捷圖標(biāo)，其余功能隱藏在二級菜單；
• 適配家居風(fēng)格：極簡風(fēng)用無彩色系 + 窄邊框，原木風(fēng)用淺木色 + 啞光涂層，輕奢風(fēng)用金屬質(zhì)感 + 低飽和配色；
• 多感官反饋：操作后配合背光亮起、輕微震動、提示音，強化確認(rèn)感，避免重復(fù)操作。

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

B 端界面的本質(zhì)是 “業(yè)務(wù)流程的數(shù)字化延伸”，15 年服務(wù)經(jīng)驗讓我們明確：其設(shè)計趨勢始終圍繞 “降本增效、賦能業(yè)務(wù)” 展開 —— 通過預(yù)判用戶需求、簡化操作層級、顯性化核心信息，讓工具從 “負(fù)擔(dān)” 變?yōu)?“助力”。
若您的企業(yè)正面臨 B 端系統(tǒng)效率低、用戶使用率差、業(yè)務(wù)適配性不足等問題，蘭亭妙微可提供定制化界面升級方案，結(jié)合行業(yè)特性與業(yè)務(wù)需求，打造 “貼合場景、高效易用” 的 B 端產(chǎn)品體驗。