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

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

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

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

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

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

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

一、篩選與搜索的差別

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

搜索是對系統(tǒng)的關(guān)鍵詞進(jì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ù)，因為涉及到刷單、退款的情況，需要將其進(jìn)行清洗，因此在篩選條件上就需要滿足「訂單狀態(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é)生，來針對這兩類人群進(jìn)行重點管理與監(jiān)控。

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

第四題：如果你是一個設(shè)計師，應(yīng)該如何降低成本表達(dá)這個關(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ù)雜度、容器差異 兩個維度，來對篩選進(jìn)行歸類。
通過業(yè)務(wù)復(fù)雜度，將其分為：基礎(chǔ)篩選、高級篩選、自定義篩選

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

1. 基礎(chǔ)篩選

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

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

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

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

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

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

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

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

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

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

這里列舉一些常見的基礎(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ǔ)上，進(jìn)一步業(yè)務(wù)化。

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

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

在設(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)中，進(jìn)行呈現(xiàn)。

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

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

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

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

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

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

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

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

5. 折疊篩選

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

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

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

6. 浮窗篩選

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

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

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

1. 節(jié)約空間，因為在列表當(dāng)中，如果把篩選條件進(jìn)行常駐會擠壓核心內(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. 抽屜篩選

抽屜篩選就是浮窗篩選的另一種表達(dá)，它主要是平衡 篩選條件與界面空間 的另一種選擇。
但確實會發(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é)們使用抽屜進(jìn)行選擇自己的選項條件。

8. 表頭篩選

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

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

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

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

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

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

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

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

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

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

9. AI 篩選

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

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

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

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

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

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

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

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計）m.dzxscac.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。

一、視覺語言：科技感與品牌符號的高度統(tǒng)一

• 暗黑模式基底：以深黑為底色，搭配漸變霓虹色（紫 / 藍(lán) / 綠），既契合區(qū)塊鏈行業(yè)的未來感調(diào)性，又讓核心信息（文字、3D 圖標(biāo)）更突出，符合北京蘭亭妙微 “專業(yè)場景下的視覺聚焦” 設(shè)計理念。
• 品牌符號復(fù)用：將 “gooey blobs（流體氣泡）” 作為核心視覺符號，既象征區(qū)塊鏈資產(chǎn)的流動性，又貫穿于 Logo、圖標(biāo)、背景裝飾中，形成強烈的品牌記憶點，與北京蘭亭妙微擅長的 “品牌化視覺系統(tǒng)” 思路高度一致。
• 3D 視覺表達(dá)：用 Spline 制作的漸變 3D 圖標(biāo)（如原子交換、支付、錢包），將抽象的區(qū)塊鏈概念具象化，同時通過漸變光澤強化科技質(zhì)感，降低用戶對復(fù)雜技術(shù)的理解門檻。

二、信息架構(gòu)：專業(yè)嚴(yán)謹(jǐn)與高效瀏覽的平衡

• 層級清晰：桌面端頁面以大標(biāo)題統(tǒng)領(lǐng)核心價值（“Unifying all financial ecosystems”），下方用模塊化卡片展示 Use Cases 與技術(shù)優(yōu)勢，移動端則簡化為核心標(biāo)題 + 關(guān)鍵模塊，保證跨端信息傳遞的一致性。
• 數(shù)據(jù)可視化：將 “10+ Blockchains”“40+ Partners” 等關(guān)鍵數(shù)據(jù)以大號字體突出，用流程圖展示技術(shù)架構(gòu)，讓專業(yè)用戶快速感知項目實力，同時保持界面清爽，避免信息過載。
• 轉(zhuǎn)化引導(dǎo)：全場景固定 “Get Started”“Start Building” 按鈕，在專業(yè)信息傳遞中自然植入行動入口，符合科技金融類產(chǎn)品 “先建立信任，再引導(dǎo)轉(zhuǎn)化” 的邏輯。

三、交互與技術(shù)：流暢體驗與跨端適配

• 微交互設(shè)計：卡片切換、圖標(biāo)懸浮等動效細(xì)膩克制，既提升頁面活力，又不干擾核心信息閱讀，體現(xiàn) “交互服務(wù)于功能” 的原則。
• 跨端適配：桌面端側(cè)重信息深度，移動端側(cè)重操作便捷，同時保留品牌視覺與核心功能，實現(xiàn) “大屏專業(yè)復(fù)盤 + 小屏快速訪問” 的體驗閉環(huán)，這與北京蘭亭妙微在跨端產(chǎn)品設(shè)計中強調(diào)的 “體驗連貫性” 理念不謀而合。
• 技術(shù)落地：通過 Spline API+three.js 實現(xiàn) 3D 效果，同時為低端設(shè)備提供視頻替代方案，兼顧視覺效果與性能兼容，體現(xiàn)了專業(yè)設(shè)計的工程思維。

四、設(shè)計總結(jié)與專業(yè)視角

蘭亭妙微（藍(lán)藍(lán)設(shè)計）m.dzxscac.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。

今天，蘭亭妙微 ui 設(shè)計公司分享的是「等待時刻的交互體驗」。打開 APP 一直在加載轉(zhuǎn)圈、快遞位置長時間不更新、預(yù)計時間到了外賣還沒送達(dá) —— 這些時刻是不是讓你越等越煩躁？這些場景一旦卡住，我們都會很著急：系統(tǒng)怎么沒反應(yīng)？繼續(xù)等下去有用嗎？

告別轉(zhuǎn)圈焦慮！5 個核心技巧優(yōu)化產(chǎn)品等待時刻的用戶體驗

一、先做分類：精準(zhǔn)設(shè)計的前提是區(qū)分兩種等待類型

1. 可預(yù)測型等待：核心是 “準(zhǔn)確可視化，承諾要靠譜”

• 進(jìn)度條：直觀展示操作進(jìn)行狀態(tài)與完成進(jìn)度，適合有明確完成節(jié)點的場景；
• 計時器：用于等待時間短、能精準(zhǔn)計算的場景，如廣告 “5 秒后可跳過”；
• 文字說明：展示打車、外賣、快遞等場景的預(yù)估時間 / 距離，如 “預(yù)計 19:20 送達(dá)，距你 1.8km”；

  

• 步驟條：提示任務(wù)當(dāng)前進(jìn)度與整體步驟，常與進(jìn)度條搭配使用，引導(dǎo)用戶按流程完成操作。

  

2. 不可預(yù)測型等待：核心是 “持續(xù)給反饋，告知在運行”

• 加載器：表示操作正在進(jìn)行但無具體進(jìn)度，分環(huán)形（短時間加載，如點擊按鈕、打開彈窗）和線性（長時間加載，如下載大文件），又可細(xì)分為無限型（無起點終點，適用于服務(wù)器響應(yīng)不確定的臨時卡頓）和有限型（進(jìn)度條逐步填充，適用于有預(yù)估范圍但無精確數(shù)字的場景，給予 “馬上完成” 的心理暗示）。

  

   
  進(jìn)階設(shè)計可融入品牌元素，打造個性化加載器，如美團將 IP 形象奔跑動畫融入加載動效，強化品牌體驗的同時增加趣味性；
• 骨架屏：以灰色占位框提前展示頁面排版結(jié)構(gòu)，搭配閃爍動效營造動態(tài)加載感，讓用戶預(yù)判加載內(nèi)容的呈現(xiàn)形式。既適用于 APP 首次打開的整頁加載，也可用于列表、卡片、個人主頁等模塊的局部加載，比單純的轉(zhuǎn)圈加載更能減少 “等待漫長” 的感知。

二、核心優(yōu)化：5 個設(shè)計技巧，讓用戶不再怕等

1. 即時反饋：杜絕 “無響應(yīng)”，點擊即有回應(yīng)

2. 組件搭配：靈活組合，讓進(jìn)度更清晰

3. 貼合預(yù)期：保守預(yù)估，制造 “超預(yù)期” 體驗

4. 提供備選：釋放用戶時間，緩解等待壓力

• 功能層面：增加 “完成后通知我” 按鈕，用戶無需停留在當(dāng)前頁面，后續(xù)可通過消息接收完成提醒；
• 服務(wù)層面：如客服場景，在人工排隊時推薦 AI 智能客服，讓用戶優(yōu)先通過 AI 解決基礎(chǔ)問題，既節(jié)省用戶時間，也降低產(chǎn)品的人工服務(wù)成本。

5. 利用時間：讓等待成為 “有價值的學(xué)習(xí)時刻”

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

優(yōu)秀的 UI 設(shè)計從來不是單純的視覺美化，而是基于用戶心理的邏輯表達(dá)。蘭亭妙微設(shè)計團隊深耕商業(yè) UI 設(shè)計多年，結(jié)合格式塔心理學(xué)、色彩心理學(xué)、形狀心理學(xué)等核心理論，提煉出 12 個大廠通用的 UI 設(shè)計法則，從視覺引導(dǎo)、元素組織、心理感知三個維度拆解設(shè)計邏輯，讓設(shè)計不僅美觀，更能精準(zhǔn)引導(dǎo)用戶行為、提升產(chǎn)品體驗，成為設(shè)計師落地商業(yè)項目的實用指南。

在人機交互體驗不斷升級的當(dāng)下，UI 設(shè)計早已突破單純的功能性與視覺性邊界，情感化設(shè)計成為連接產(chǎn)品與用戶的核心紐帶。蘭亭妙微設(shè)計團隊深耕用戶體驗設(shè)計多年，結(jié)合經(jīng)典設(shè)計理論與商業(yè)項目實戰(zhàn)經(jīng)驗，拆解 UI 情感化設(shè)計的底層邏輯、核心價值與落地方法，讓設(shè)計不止于美觀，更能觸達(dá)用戶內(nèi)心，打造有溫度、有記憶點的產(chǎn)品體驗。

UI 設(shè)計中，文案作為信息傳遞的核心載體，其排版方式與視覺處理直接影響用戶的閱讀體驗和信息接收效率。蘭亭妙微設(shè)計團隊結(jié)合日常商業(yè)設(shè)計實戰(zhàn)，提煉出 UI 文案排版與視覺優(yōu)化的核心實用技巧，聚焦文案對齊方式、投影處理兩大高頻設(shè)計痛點，用簡單易懂的方法規(guī)避設(shè)計誤區(qū)，讓文案設(shè)計既美觀又實用。

這套蘭亭妙微自研的質(zhì)感彈窗設(shè)計方法論，手把手教你打造高吸睛的 APP 運營彈窗，掌握后輕松提升彈窗點擊率！

一、移動端界面：醫(yī)療嚴(yán)謹(jǐn)與視覺清晰的平衡

• 數(shù)據(jù)可視化：采用點陣式心電圖替代傳統(tǒng)折線圖，既保留醫(yī)學(xué)專業(yè)感，又通過紅色高亮讓用戶直觀識別心律狀態(tài)，同時避免了復(fù)雜線條帶來的閱讀壓力，契合北京蘭亭妙微 “專業(yè)信息輕量化呈現(xiàn)” 的設(shè)計理念。
• 狀態(tài)反饋：左側(cè)界面清晰標(biāo)注 “Stressful” 狀態(tài)與 “Normal ECG” 結(jié)論，右側(cè)測量頁以粒子動效強化實時感，配合進(jìn)度條與操作按鈕，讓用戶清晰感知測量進(jìn)程，降低醫(yī)療類產(chǎn)品的使用焦慮。
• 信息層級：核心數(shù)據(jù)（心率 bpm）以大號像素字體突出，輔助信息（測量時長、設(shè)備狀態(tài)）置于次要位置，符合移動端 “一眼獲取關(guān)鍵信息” 的使用場景，與北京蘭亭妙微擅長的 “重點突出、層級分明” 設(shè)計邏輯高度一致。

二、穿戴端界面：極簡交互適配腕上場景

• 適配小屏：手表端界面極致簡化，僅保留核心心率數(shù)字、測量進(jìn)度與停止按鈕，避免信息過載，完全貼合腕上設(shè)備的快速操作需求，體現(xiàn)了 “少即是多” 的交互設(shè)計原則。
• 視覺聯(lián)動：延續(xù)移動端的紅色粒子動效，實現(xiàn)跨設(shè)備視覺一致性，讓用戶在手機與手表間切換時無需重新適應(yīng)，這與北京蘭亭妙微在跨端產(chǎn)品設(shè)計中強調(diào)的 “體驗連貫性” 理念不謀而合。

三、桌面端 / 平板端：專業(yè)管理與數(shù)據(jù)復(fù)盤

• 大屏信息整合：桌面端界面將用戶信息、ECG 數(shù)據(jù)、設(shè)備狀態(tài)、健康趨勢等模塊有序排布，既滿足專業(yè)用戶的深度復(fù)盤需求，又通過卡片式布局保持視覺清爽，是北京蘭亭妙微在企業(yè)級數(shù)據(jù)產(chǎn)品中常用的 “高效信息聚合” 設(shè)計思路。
• 功能閉環(huán)：從賬號創(chuàng)建、設(shè)備連接到數(shù)據(jù)查看、報告導(dǎo)出，全流程在桌面端完整呈現(xiàn)，同時保留與移動端一致的交互邏輯（如底部導(dǎo)航、數(shù)據(jù)卡片樣式），實現(xiàn)了 “移動端便捷操作 + 桌面端專業(yè)管理” 的產(chǎn)品閉環(huán)。

四、設(shè)計總結(jié)與專業(yè)視角

• 用視覺化手段降低醫(yī)學(xué)數(shù)據(jù)的理解門檻，同時保留專業(yè)嚴(yán)謹(jǐn)性；
• 跨端設(shè)計高度統(tǒng)一，保證了用戶在不同設(shè)備間的流暢體驗；
• 色彩與動效的運用克制且精準(zhǔn)，既傳遞情緒（如壓力狀態(tài)提示），又不干擾核心功能。