又到了分享界面改版優(yōu)化的時(shí)候了，這次是近期C端學(xué)員做的體育場(chǎng)館預(yù)約平臺(tái)，主要用于在線預(yù)約羽毛球、網(wǎng)球、籃球等場(chǎng)館。

下面是目前的設(shè)計(jì)圖例：

學(xué)員作業(yè)

還是老規(guī)矩，我們從原設(shè)計(jì)的問(wèn)題入手，然后逐步完成對(duì)它的改版優(yōu)化。

問(wèn)題分析：

問(wèn)題的分析從不同維度入手，這里分享個(gè)最簡(jiǎn)單的分析方式，先從基礎(chǔ)樣式分析，再分析組件設(shè)計(jì)。

基礎(chǔ)樣式包含規(guī)范、字體、色彩、圖片四個(gè)要素的分析，而組件設(shè)計(jì)則是檢查樣式的合理性為主。

一、基礎(chǔ)樣式分析

首先基礎(chǔ)樣式的規(guī)范應(yīng)用上，頂部狀態(tài)欄和底部指示器、導(dǎo)航是沒(méi)有太大問(wèn)題的，所以我們可以直接進(jìn)入下一個(gè)環(huán)節(jié)。

在字體應(yīng)用上，問(wèn)題就多起來(lái)了，主要還是特殊標(biāo)題使用太多，且廣告中的標(biāo)題也和下方 UI 元素標(biāo)題沒(méi)有拉開(kāi)差距，看起來(lái)就很別扭。而且大粗黑字體使用過(guò)多，使得信息權(quán)重被分散掉，沒(méi)有對(duì)比性。

有問(wèn)題的部分截圖

在色彩層面，藍(lán)色雖然是主色，但是使用過(guò)于頻繁，且其它色彩的應(yīng)用數(shù)量也過(guò)多，畫(huà)面充斥了讓人眼花繚亂的色彩，尤其色彩多的情況下圖片色彩也豐富，外加一系列漸變色塊，讓場(chǎng)面變得更“錯(cuò)綜復(fù)雜”。

使用的色彩過(guò)多

最后圖片應(yīng)用上，主要問(wèn)題出在廣告圖里，圖例和文字排版看起來(lái)很有年代感，加上瓷片區(qū)內(nèi)的素材用圖，和整體主體的關(guān)聯(lián)性并不好。這里著重強(qiáng)調(diào)， 3D 擬人類(lèi)圖片素材的使用最好局限在特定運(yùn)營(yíng)活動(dòng)物料里，不要作為正式的 UI 元素進(jìn)行引用，怎么做效果都不會(huì)好。

二、組件樣式分析

接著分析組件樣式，因?yàn)檫@次案例框架很簡(jiǎn)單，我們不用太多考慮組件排序依據(jù)還是產(chǎn)品問(wèn)題，只需要每個(gè)組件孤立出來(lái)分析即可。

1 .首頁(yè)頂部組件

主要問(wèn)題就是廣告圖的設(shè)計(jì)，不符合當(dāng)前應(yīng)用的設(shè)計(jì)標(biāo)準(zhǔn)，字體用圖排版都很簡(jiǎn)單。

2.快速入口組件

快速入口上下兩排權(quán)重完全不同，雖然有大小的差異但依舊對(duì)比不夠強(qiáng)烈，且色彩使用混亂。

3.瓷片區(qū)應(yīng)用

兩個(gè)頁(yè)面都有瓷片區(qū)，布局過(guò)于接近，且沒(méi)有實(shí)質(zhì)性的內(nèi)容全是裝飾素材，非常影響點(diǎn)擊欲望和觀感。

4.常去場(chǎng)館卡片

屬于問(wèn)題相對(duì)較小的模塊，但標(biāo)簽的應(yīng)用色彩不合理，而且標(biāo)題也露不全，實(shí)際空間利用率沒(méi)有必要的低。

5.列表卡片

列表卡片的主要問(wèn)題還是和主色按鈕有關(guān)，過(guò)于強(qiáng)調(diào)按鈕的同時(shí)又要突出其它信息元素，就讓卡片看起來(lái)非常聒噪，信息之間是會(huì)起沖突的。

6.底部導(dǎo)航

底部導(dǎo)航設(shè)計(jì)過(guò)于普通，且一般選項(xiàng)選中凸起只適合在首頁(yè)選項(xiàng)中使用。中間添加按鈕的尺寸過(guò)小，和兩側(cè)選項(xiàng)看起來(lái)不對(duì)齊，重心偏移。

以上就是對(duì)問(wèn)題的簡(jiǎn)單總結(jié)，實(shí)際上改版就是圍繞這些問(wèn)題做出調(diào)整，你先分析得出問(wèn)題，才能聚焦到具體設(shè)計(jì)的過(guò)程和細(xì)節(jié)。

三、開(kāi)始界面優(yōu)化

基礎(chǔ)規(guī)范是整體，而我們?cè)O(shè)計(jì)過(guò)程中大多從細(xì)節(jié)出發(fā)，所以我們對(duì)優(yōu)化的內(nèi)容解釋就要反過(guò)來(lái)從組件開(kāi)始。

1.頂部模塊設(shè)計(jì)

首先調(diào)整頂部模塊的設(shè)計(jì)，優(yōu)化圖例，使用比較突出的字體標(biāo)題和更有沖擊力的配圖，符合運(yùn)動(dòng)類(lèi)應(yīng)用的主基調(diào)。同時(shí)因?yàn)橹爸魃锰啵@次頂部直接不加主色類(lèi)背景。

2.快速入口的設(shè)計(jì)

快速入口設(shè)計(jì)上使用兩種圖標(biāo)體系，上方用偏扁平插畫(huà)型的風(fēng)格（素材示意），下方用面性圖標(biāo)風(fēng)格，弱化它們的權(quán)重。同時(shí)第二個(gè)頁(yè)面的快速入口使用攝影圖型圖標(biāo)，避免一直出現(xiàn)不同風(fēng)格的圖標(biāo)。

3.瓷片區(qū)設(shè)計(jì)

瓷片區(qū)做大就需要有內(nèi)容展示，但這些主體值得展示的內(nèi)容并不是太多且需要那么大空間，所以縮小尺寸不會(huì)讓設(shè)計(jì)那么難處理，也讓畫(huà)面更精致一點(diǎn)。

4.其它模塊設(shè)計(jì)

因?yàn)槭醉?yè)上方已經(jīng)有很花哨的模塊了，所以常去場(chǎng)館就不應(yīng)該再花哨下去，可以務(wù)實(shí)點(diǎn)的設(shè)計(jì)，不再用復(fù)雜的外邊框套娃。

第二個(gè)頁(yè)面其它模塊相對(duì)簡(jiǎn)單，拼團(tuán)功能又重要所以可以突出它用包邊型的組件設(shè)計(jì)。

5.列表模塊設(shè)計(jì)

兩個(gè)頁(yè)面下方的列表模塊，都移除原來(lái)主色的按鈕，只保留關(guān)鍵信息，讓卡片視覺(jué)看起來(lái)更簡(jiǎn)約和諧一點(diǎn)。

6.底部導(dǎo)航欄設(shè)計(jì)

放大中間的按鈕，同時(shí)優(yōu)化第一個(gè)選項(xiàng)選中的設(shè)計(jì)，可以更突出（時(shí)間夠就做LOGO進(jìn)去了）更強(qiáng)調(diào)選中。

完成這些處理以后，最后合并起來(lái)可以整體再調(diào)整一番進(jìn)行最終輸出。我們可以看看下面改版前后的對(duì)比，你們可以自己感受是否有差異：

這是純視覺(jué)方向的優(yōu)化，在新手階段，不要過(guò)度去使用色彩和字體，實(shí)現(xiàn)樣式的落差要通過(guò)組件樣式和圖片、素材應(yīng)用的差異來(lái)塑造。

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

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

一、保守派：保留表格形態(tài)，輕量化適配

1. 橫豎屏一鍵切換

• 優(yōu)勢(shì)：實(shí)現(xiàn)成本低，可全局復(fù)用，適配純閱讀場(chǎng)景
• 局限：僅支持查看，無(wú)法做數(shù)據(jù)編輯、批量操作

2. 固定表頭 + 滾動(dòng)指示燈

1. 數(shù)據(jù)對(duì)應(yīng)混亂：凍結(jié)首列表頭，橫向滾動(dòng)時(shí)始終可見(jiàn)關(guān)鍵字段
2. 屏效過(guò)低：適度縮小字體，提升信息密度
3. 滾動(dòng)無(wú)預(yù)期：添加滾動(dòng)指示燈，清晰提示當(dāng)前查看進(jìn)度

• 核心：像給表格加了可視化滾動(dòng)條，降低閱讀認(rèn)知成本

二、激進(jìn)派：重構(gòu)展示形式，貼合移動(dòng)端習(xí)慣

3. 關(guān)鍵字段收折展示

• 選字規(guī)則：通過(guò)「重要度 + 字段長(zhǎng)度」十字分析，優(yōu)先選短文本、高優(yōu)先級(jí)字段
• 適用場(chǎng)景：字段數(shù)量適中，用戶(hù)需快速識(shí)別數(shù)據(jù)的場(chǎng)景

4. 卡片式列表呈現(xiàn)

• 優(yōu)勢(shì)：符合移動(dòng)端視覺(jué)習(xí)慣，操作路徑更短，是 B 端移動(dòng)端最常用方案
• 適配場(chǎng)景：外勤人員快速查看、一鍵操作的業(yè)務(wù)（如銷(xiāo)售、配送）

5. 全信息詳情卡片

• 優(yōu)勢(shì)：信息一站式展示，減少頁(yè)面跳轉(zhuǎn)，大幅提升操作效率
• 典型場(chǎng)景：配送員訂單、外賣(mài)詳情、銷(xiāo)售客戶(hù)速覽等高頻輕操作場(chǎng)景

最后：移動(dòng)端表格的設(shè)計(jì)邊界

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

1. 品牌與色彩體系

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

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

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

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

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

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

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

一、視覺(jué)設(shè)計(jì)：童趣感拉滿，打造沉浸式學(xué)習(xí)氛圍

1. 核心 IP 貫穿全端

2. 色彩體系適配兒童審美

3. 視覺(jué)風(fēng)格統(tǒng)一且細(xì)節(jié)豐富

二、信息架構(gòu)：全流程學(xué)習(xí)閉環(huán)，貼合兒童學(xué)習(xí)場(chǎng)景

• 注冊(cè)登錄頁(yè)：支持 Facebook/Google/Apple 一鍵登錄 + 郵箱注冊(cè)，操作極簡(jiǎn)，適配家長(zhǎng)代操作場(chǎng)景；
• 課程選擇頁(yè)：按年齡段（4-12 歲兒童 / 12-18 歲青少年）分類(lèi)，搭配 IP 形象與價(jià)格，讓家長(zhǎng) / 孩子快速選擇適配課程；
• 答題學(xué)習(xí)頁(yè)：以趣味選擇題、填空題為主，IP 形象全程陪伴，答題后即時(shí)反饋，強(qiáng)化學(xué)習(xí)成就感；
• 學(xué)習(xí)進(jìn)度頁(yè)：用日歷視圖展示每日學(xué)習(xí)狀態(tài)，聚合學(xué)習(xí)時(shí)長(zhǎng)、專(zhuān)注度、精力值等核心數(shù)據(jù)，讓孩子 / 家長(zhǎng)直觀掌握學(xué)習(xí)進(jìn)度；
• 個(gè)人中心頁(yè)：展示聽(tīng)說(shuō)讀寫(xiě)能力進(jìn)度、學(xué)習(xí)等級(jí)，支持頭像 / IP 形象個(gè)性化定制，滿足孩子的個(gè)性化需求；
• 獎(jiǎng)勵(lì)反饋?lái)?yè)：答題完成后展示學(xué)習(xí)時(shí)長(zhǎng)、進(jìn)度條，用 IP 的開(kāi)心表情強(qiáng)化正向激勵(lì)，形成 “學(xué)習(xí) - 反饋 - 激勵(lì)” 的完整閉環(huán)。

三、交互體驗(yàn)：輕量化 + 趣味化，降低學(xué)習(xí)門(mén)檻

• 極簡(jiǎn)操作流程：所有操作以 “最少步驟” 為原則，一鍵答題、一鍵切換、一鍵登錄，避免復(fù)雜流程干擾學(xué)習(xí)節(jié)奏；
• 即時(shí)正向反饋：答題正確 / 完成學(xué)習(xí)后，用 IP 的開(kāi)心表情、進(jìn)度條增長(zhǎng)、愛(ài)心獎(jiǎng)勵(lì)等方式即時(shí)反饋，強(qiáng)化孩子的學(xué)習(xí)成就感；
• 個(gè)性化交互：支持 IP 形象、頭像、表情的自定義定制，讓孩子打造專(zhuān)屬學(xué)習(xí)伙伴，提升使用粘性；
• 多場(chǎng)景適配：覆蓋注冊(cè)、學(xué)習(xí)、進(jìn)度、個(gè)人中心全場(chǎng)景，操作邏輯簡(jiǎn)單易懂，孩子可獨(dú)立使用，也支持家長(zhǎng)輔助操作。

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

一、閑魚(yú)：AI發(fā)布提效

閑魚(yú)發(fā)閑置功能接入AI，只需上傳商品圖片就可以直接生成描述文案，極大幫助用戶(hù)簡(jiǎn)化發(fā)布流程

1. 零門(mén)檻發(fā)布，降低發(fā)布時(shí)間成本

解決非專(zhuān)業(yè)用戶(hù) “不會(huì)寫(xiě)文案、不懂專(zhuān)業(yè)術(shù)語(yǔ)” 的痛點(diǎn)，自動(dòng)提取商品特征，組合成規(guī)范文案；相比傳統(tǒng)發(fā)布流程的耗時(shí)編輯文案、核對(duì)信息，更高效快捷。

2. 優(yōu)化內(nèi)容，提升交易轉(zhuǎn)化

自動(dòng)生成符合當(dāng)前市場(chǎng)熱點(diǎn)的文案表述，更能多文風(fēng)轉(zhuǎn)換，一鍵轉(zhuǎn)為趣味的 “抽象文學(xué)”“黛玉文學(xué)”等，提升內(nèi)容點(diǎn)擊率。

二、支付寶：廣告位游戲化包裝

支付寶的首頁(yè)Banner通過(guò)游戲化的包裝，快速吸引注意力，驅(qū)動(dòng)用戶(hù)主動(dòng)點(diǎn)擊探索，高效地為活動(dòng)頁(yè)面引流。

1. 互動(dòng)機(jī)制強(qiáng)化用戶(hù)參與感

采用懸念式互動(dòng)設(shè)計(jì)，button以 “猜猜是什么” 這類(lèi)問(wèn)答形式，激發(fā)用戶(hù)好奇心，通過(guò)游戲化場(chǎng)景的營(yíng)造，降低參與門(mén)檻，驅(qū)動(dòng)用戶(hù)主動(dòng)點(diǎn)擊探索。

2. 場(chǎng)景氛圍營(yíng)造提升吸引力

在以功能入口為主的首頁(yè)，該模塊具有游戲化趣味性的氛圍營(yíng)造，從視覺(jué)上差異化的呈現(xiàn)，相比傳統(tǒng)的靜態(tài)廣告位，更能有效抓住用戶(hù)眼球，高效地為活動(dòng)頁(yè)面引流。

三、去哪兒：退票時(shí)挽留場(chǎng)景設(shè)計(jì)

當(dāng)有中轉(zhuǎn)單的用戶(hù)在點(diǎn)擊退票時(shí)，用挽留浮層及時(shí)給用戶(hù)彈出更優(yōu)的解決方案，并在方案中量化利益點(diǎn)，同時(shí)保證原有票的安全感。整體通過(guò) “先抓痛點(diǎn)→再給解決方案→最后引導(dǎo)操作” 的路徑，優(yōu)化了用戶(hù)出行體驗(yàn)。

1. 量化利益點(diǎn)

除了直達(dá)更方便之外，直達(dá)還有更省時(shí)間、金錢(qián)，保底票免費(fèi)退等更多的利益點(diǎn)

2. 有兜底有安全感

用當(dāng)前的中轉(zhuǎn)作為保底，先搶票，搶到了還能再退票。讓用戶(hù)安心下單，在未搶到心儀票的時(shí)候能有中轉(zhuǎn)的替補(bǔ)票，可以緩解用戶(hù)的焦慮情緒，有兜底的保障安全感

四、療愈類(lèi)App Endel：引導(dǎo)充值會(huì)員的動(dòng)畫(huà)

通過(guò)一個(gè)巧妙的互動(dòng)行為“搖動(dòng)手機(jī)”，降低用戶(hù)對(duì)會(huì)員充值廣告的反感。

1. 提升用戶(hù)參與感與趣味性

“搖一搖”互動(dòng)將被動(dòng)觀看廣告轉(zhuǎn)變?yōu)橹鲃?dòng)參與，用戶(hù)通過(guò)簡(jiǎn)單的物理動(dòng)作即可觸發(fā)折扣，這種即時(shí)反饋機(jī)制增強(qiáng)了趣味性，降低了傳統(tǒng)廣告的侵入感。

2. 降低付費(fèi)決策的心理門(mén)檻

通過(guò)互動(dòng)行為展示折扣，巧妙地將付費(fèi)流程包裝成一種“獎(jiǎng)勵(lì)”而非強(qiáng)制推銷(xiāo)。用戶(hù)感受到的是“主動(dòng)獲取優(yōu)惠”的成就感，而非被廣告打擾的抵觸情緒，從而更愿意接受付費(fèi)選項(xiàng)。

五、小宇宙：創(chuàng)新列表設(shè)計(jì)

通過(guò)擬物化的卡牌堆疊形態(tài)，將傳統(tǒng)的平面信息流轉(zhuǎn)變?yōu)榫哂锌臻g縱深感和探索趣味的交互式敘事焦點(diǎn)

1. 視覺(jué)層次突破傳統(tǒng)束縛

通過(guò)卡片堆疊、傾斜，在二維屏幕上創(chuàng)造出三維空間感。不對(duì)稱(chēng)的布局打破了傳統(tǒng)設(shè)計(jì)的呆板，賦予界面動(dòng)感與活力，能有效抓住用戶(hù)視線，對(duì)抗“橫幅盲視效應(yīng)”

2. 建立擬物化的趣味交互

模擬物理世界卡牌的操作體驗(yàn)，配合流暢的滑動(dòng)動(dòng)畫(huà)，讓用戶(hù)產(chǎn)生"翻閱卡片"的愉悅感，這種情感化設(shè)計(jì)能顯著提升用戶(hù)的操作滿足感和停留時(shí)長(zhǎng)

3. 內(nèi)容暗示激發(fā)探索行為

堆疊效果露出部分內(nèi)容作為預(yù)覽，能有效刺激用戶(hù)的好奇心，主動(dòng)進(jìn)行滑動(dòng)探索，提升內(nèi)容消費(fèi)深度

六、QQ音樂(lè)：個(gè)人中心下拉觸發(fā)金幣中心

該設(shè)計(jì)通過(guò) “貼合用戶(hù)習(xí)慣的交互 + 強(qiáng)引導(dǎo) + 積分激勵(lì)” 的組合策略，實(shí)現(xiàn)簽到轉(zhuǎn)化與用戶(hù)留存

1. 交互設(shè)計(jì)貼合用戶(hù)固有習(xí)慣

采用下拉觸發(fā)模式，無(wú)需額外學(xué)習(xí)成本，降低用戶(hù)參與簽到的操作門(mén)檻，提升即時(shí)轉(zhuǎn)化效率

2. 視覺(jué)設(shè)計(jì)強(qiáng)化引導(dǎo)與目標(biāo)感知

以金幣掉落清晰的視覺(jué)元素突出金幣中心入口，讓用戶(hù)快速捕捉核心功能，減少尋找成本，縮短 “看到 - 參與” 的路徑

3. 激勵(lì)設(shè)計(jì)構(gòu)建留存閉環(huán)

用 “金幣” 作為即時(shí)激勵(lì)，滿足用戶(hù)即時(shí)反饋的心理需求，驅(qū)動(dòng)次日復(fù)訪，同時(shí)聯(lián)動(dòng)積分體系，將單次簽到轉(zhuǎn)化為長(zhǎng)期行為

最后要說(shuō)的話

本期的設(shè)計(jì)分享就到這里啦。

文章中的案例與思考來(lái)自于UED同學(xué)的日常分享。

后續(xù)我們將持續(xù)深度體驗(yàn)產(chǎn)品，挖掘更多值得分享、學(xué)習(xí)的設(shè)計(jì)案例。努力將其中的方法理論應(yīng)用到后續(xù)的產(chǎn)品設(shè)計(jì)中。

愿我們的努力為你帶來(lái)更好的體驗(yàn)。下次見(jiàn)。

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

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

前言

一、先搞懂：篩選是什么？為什么要用？

1. 篩選的定義

2. 篩選 vs 搜索（核心區(qū)別）

• 篩選：系統(tǒng)提供條件，用戶(hù)被動(dòng)選擇 → 縮小范圍
• 搜索：用戶(hù)主動(dòng)輸入明確關(guān)鍵詞 → 精準(zhǔn)查找

3. 什么時(shí)候必須加篩選？

1. 系統(tǒng)定義篩選（一級(jí)篩選）
    

   

   大方向快速切換，如：訂單（待支付 / 待發(fā)貨）、優(yōu)惠券（未使用 / 已過(guò)期）。
2. 用戶(hù)自定義篩選（二級(jí) / 精細(xì)化篩選）
    
   在一級(jí)結(jié)果里進(jìn)一步精準(zhǔn)，如：價(jià)格、品牌、發(fā)貨地、評(píng)分等。

二、5 種最常用篩選樣式（直接對(duì)應(yīng)場(chǎng)景）

1. Tab 篩選

• 形態(tài)：橫向 / 縱向常駐展示
• 優(yōu)點(diǎn)：一目了然、隨時(shí)切換、無(wú)學(xué)習(xí)成本
• 場(chǎng)景：內(nèi)容大類(lèi)劃分（新聞?lì)l道、視頻分類(lèi)、商品一級(jí)類(lèi)目）
• 缺點(diǎn)：結(jié)果偏模糊，需搭配二次篩選

2. 彈窗式篩選

• 形態(tài)：入口隱藏，點(diǎn)擊蒙層彈出
• 優(yōu)點(diǎn)：省空間、多維度平鋪、不占頁(yè)面
• 場(chǎng)景：電商列表、外賣(mài)、出行等高頻精細(xì)化篩選
• 適用：條件不多、操作快

3. 折疊式篩選

• 形態(tài)：入口隱藏，點(diǎn)擊展開(kāi)、常駐頁(yè)面
• 優(yōu)點(diǎn)：比 Tab 省空間，比彈窗更可控
• 場(chǎng)景：中度篩選需求，需反復(fù)調(diào)整條件

4. 高級(jí)篩選（新頁(yè)面）

• 形態(tài)：跳轉(zhuǎn)到獨(dú)立頁(yè)面
• 優(yōu)點(diǎn)：無(wú)干擾、可放大量細(xì)顆粒條件
• 場(chǎng)景：汽車(chē)、房產(chǎn)、招聘、復(fù)雜 B 端篩選
• 適用：條件多、層級(jí)深、需專(zhuān)注操作

5. 篩選 + 排序組合（移動(dòng)端標(biāo)配）

• 形態(tài)：篩選按鈕 + 綜合 / 價(jià)格 / 銷(xiāo)量等排序
• 優(yōu)點(diǎn)：一步完成 “縮小范圍 + 重新排列”
• 場(chǎng)景：幾乎所有商品 / 內(nèi)容列表
• 代表：美團(tuán)、餓了么、淘寶、京東

三、3 個(gè)篩選維度（決定怎么布局）

1. 單維度篩選

• 一次只選一個(gè)條件，觸發(fā)即生效
• 標(biāo)簽簡(jiǎn)短（≤5 字）、語(yǔ)義清晰
• 場(chǎng)景：訂單狀態(tài)、內(nèi)容分類(lèi)

2. 多維度篩選

• 支持單選 / 多選 / 區(qū)間 / 滑塊
• 需配：確定 + 重置按鈕
• 移動(dòng)端建議：一級(jí)維度≤9 個(gè)，多余整合到二級(jí)

3. 多等級(jí)篩選

• 層級(jí)：一級(jí)分類(lèi) → 二級(jí)屬性 → 三級(jí)參數(shù)
• 移動(dòng)端最多 3 級(jí)，避免迷路
• 適合：類(lèi)目復(fù)雜的電商、后臺(tái)系統(tǒng)

四、篩選設(shè)計(jì) 3 大核心準(zhǔn)則（必遵守）

1. 以用戶(hù)效率為目標(biāo)

• 不知道要什么的用戶(hù)：靠分類(lèi) + 篩選引導(dǎo)
• 知道要什么的用戶(hù)：靠精準(zhǔn)條件快速鎖定
• 最終目標(biāo)：降低時(shí)間成本，提升轉(zhuǎn)化與留存

2. 按產(chǎn)品類(lèi)型定制條件

• 電商：品牌、價(jià)格、銷(xiāo)量、評(píng)分、服務(wù)
• 新聞 / 內(nèi)容：熱度、時(shí)間、偏好、標(biāo)簽
• 工具 / B 端：狀態(tài)、時(shí)間區(qū)間、負(fù)責(zé)人、關(guān)鍵字

3. 按使用頻率排優(yōu)先級(jí)

• 買(mǎi)手機(jī)：品牌→內(nèi)存→容量→價(jià)格
• 買(mǎi)日用品：價(jià)格→銷(xiāo)量→（品牌放高級(jí)）

五、總結(jié)（一句話記住）

• 簡(jiǎn)單分類(lèi) → Tab
• 常規(guī)精篩 → 彈窗
• 復(fù)雜深篩 → 高級(jí)頁(yè)面
• 列表標(biāo)配 → 篩選 + 排序

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

一、Aurora AI 設(shè)計(jì)亮點(diǎn)：AI 工具的體驗(yàn)標(biāo)桿

1. 視覺(jué)設(shè)計(jì)：科技感與溫度感的平衡

2. 信息架構(gòu)：極簡(jiǎn)高效，全流程閉環(huán)

3. 交互體驗(yàn)：多模態(tài)適配，個(gè)性化賦能

一、先懂?dāng)?shù)據(jù)：列表設(shè)計(jì)的 3 個(gè)核心要素

1. 屬性字段：明確要展示的信息點(diǎn)

• 設(shè)計(jì)前要梳理全字段，不遺漏關(guān)鍵信息
• 給字段劃分權(quán)重與分類(lèi)，優(yōu)先突出核心信息，次要信息弱化或隱藏

2. 字段值：確定信息的展示形式

• 明確字段值的限制：文本長(zhǎng)度、圖片尺寸、狀態(tài)類(lèi)型
• 統(tǒng)一轉(zhuǎn)化規(guī)則：比如 VIP 等級(jí)用金銀銅圖標(biāo)替代文字，提升視覺(jué)效率

3. 字段狀態(tài)：適配不同場(chǎng)景的顯示邏輯

• 場(chǎng)景示例：外賣(mài)列表的配送標(biāo)簽（快送 / 專(zhuān)送 / 自配）、配送時(shí)間樣式差異
• 設(shè)計(jì)全覆蓋：正常態(tài)、高亮態(tài)、禁用態(tài)、空態(tài)，確保所有場(chǎng)景適配

二、再定框架：列表頁(yè)的標(biāo)準(zhǔn)結(jié)構(gòu) + 2 種布局

列表頁(yè)標(biāo)準(zhǔn)框架

• 運(yùn)營(yíng)模塊控制篇幅，避免擠壓列表首屏展示
• 可在列表中插入運(yùn)營(yíng)廣告、內(nèi)容推薦，平衡信息與轉(zhuǎn)化

移動(dòng)端 2 種核心列表布局

1. 單列列表：一行一個(gè)數(shù)據(jù)項(xiàng)

• 引導(dǎo)型：核心目的是跳轉(zhuǎn)詳情，比如商品、酒店、外賣(mài)列表，突出封面與核心信息
• 展示型：直接呈現(xiàn)完整內(nèi)容，無(wú)需跳轉(zhuǎn)，比如朋友圈、消息列表

2. 多列列表：一行多個(gè)數(shù)據(jù)項(xiàng)

• 等高布局：每條數(shù)據(jù)高度統(tǒng)一、對(duì)齊規(guī)整，適合字段統(tǒng)一、差異小的場(chǎng)景（如電商商品、圖集）
• 瀑布流布局：數(shù)據(jù)高度自適應(yīng)，靈活度高，適合內(nèi)容長(zhǎng)短不一、視覺(jué)差異化大的場(chǎng)景（如筆記、穿搭、短視頻封面）

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

健身健康類(lèi) App：數(shù)據(jù)可視化 + 陪伴感，打造高效健康管理工具

 

這款健身 App 的設(shè)計(jì)，精準(zhǔn)貼合用戶(hù) “科學(xué)健身、高效管理” 的核心需求，亮點(diǎn)突出：

 

1. 視覺(jué)風(fēng)格溫暖有活力：以暖橙色為主色調(diào)，搭配柔和的米白底色，弱化工具的冰冷感，營(yíng)造出積極、陪伴的健身氛圍，讓用戶(hù)在使用中獲得愉悅的情緒體驗(yàn)；
2. 信息層級(jí)清晰直觀：首頁(yè)以體重、步數(shù)為核心視覺(jué)錨點(diǎn)，用卡片式布局聚合健康指標(biāo)、運(yùn)動(dòng)計(jì)劃、營(yíng)養(yǎng)數(shù)據(jù)，核心數(shù)據(jù)（如體重 72.5kg、步數(shù) 82641）突出展示，讓用戶(hù)一眼獲取核心狀態(tài)，快速掌握健身進(jìn)度；
3. 交互便捷高效：“+” 號(hào)快速錄入健康數(shù)據(jù)、“STOP” 一鍵暫停運(yùn)動(dòng)，操作路徑極簡(jiǎn)，貼合健身場(chǎng)景 “快速記錄、高效管理” 的需求；同時(shí)用曲線圖表直觀展示體重、步數(shù)趨勢(shì)，讓用戶(hù)清晰感知運(yùn)動(dòng)成果，強(qiáng)化堅(jiān)持動(dòng)力。

   

   

   

    

    

 

（二）Chegg Study 學(xué)習(xí)類(lèi) App：趣味化交互 + 學(xué)習(xí)閉環(huán)，讓學(xué)習(xí)更輕松

 

Chegg Study 作為學(xué)習(xí)類(lèi) App 的優(yōu)質(zhì)范本，設(shè)計(jì)邏輯精準(zhǔn)匹配學(xué)生用戶(hù)需求：

 

1. IP 化視覺(jué)貫穿全端：以可愛(ài)的 AI 機(jī)器人為品牌 IP，搭配 3D 卡通學(xué)生形象、趣味數(shù)學(xué)符號(hào)插畫(huà)，將抽象的學(xué)習(xí)工具轉(zhuǎn)化為有溫度的陪伴角色，弱化學(xué)習(xí)的枯燥感，緩解學(xué)生的學(xué)習(xí)焦慮；
2. 全流程學(xué)習(xí)閉環(huán)搭建：從啟動(dòng)頁(yè)引導(dǎo)、學(xué)科分類(lèi)、多入口提問(wèn)（文字 / 拍照 / 語(yǔ)音），到題庫(kù)管理、歷史問(wèn)題復(fù)盤(pán)，完整覆蓋學(xué)生 “遇到問(wèn)題→獲取答案→復(fù)盤(pán)學(xué)習(xí)” 的全流程，操作路徑極簡(jiǎn)，大幅降低使用門(mén)檻；
3. 正向激勵(lì)強(qiáng)化粘性：個(gè)人中心聚合提問(wèn)數(shù)、已解決數(shù)、收藏?cái)?shù)等核心數(shù)據(jù)，用可視化成果強(qiáng)化學(xué)生的學(xué)習(xí)成就感，形成正向激勵(lì)，有效提升用戶(hù)留存與使用頻次。

 

---

  

蘭亭妙微深耕 C 端產(chǎn)品 UI/UX 設(shè)計(jì)多年，擁有豐富的健身、教育類(lèi)產(chǎn)品設(shè)計(jì)、改版、重構(gòu)經(jīng)驗(yàn)。近期，蘭亭妙微成功完成上市公司競(jìng)業(yè)達(dá)教育軟件事業(yè)部重點(diǎn)產(chǎn)品的 UI/UE 全案重構(gòu)，覆蓋教師端、學(xué)生端、教室端、平臺(tái)端全系列軟件，圓滿交付并獲得客戶(hù)高度認(rèn)可。

 

本次改版圍繞 “貼合教育場(chǎng)景、提升教學(xué)效率、優(yōu)化用戶(hù)體驗(yàn)” 三大核心目標(biāo)，蘭亭妙微對(duì)全系列產(chǎn)品進(jìn)行了全方位升級(jí)：視覺(jué)上實(shí)現(xiàn)全端風(fēng)格統(tǒng)一，兼顧教師端的專(zhuān)業(yè)性與學(xué)生端的親和性；信息架構(gòu)上重構(gòu) “教 — 學(xué) — 管” 全流程，讓各端功能布局更合理、操作路徑更簡(jiǎn)潔；交互體驗(yàn)上貼合課堂教學(xué)、課后學(xué)習(xí)、教學(xué)管理等不同場(chǎng)景，優(yōu)化觸控適配、數(shù)據(jù)展示、快捷操作等細(xì)節(jié)，真正實(shí)現(xiàn) “全場(chǎng)景覆蓋、多端一體化” 的使用體驗(yàn)，助力競(jìng)業(yè)達(dá)教育軟件提升產(chǎn)品競(jìng)爭(zhēng)力。

 

蘭亭妙微始終堅(jiān)持 “以用戶(hù)為中心” 的設(shè)計(jì)理念，無(wú)論是健身類(lèi)產(chǎn)品的陪伴感打造，還是教育類(lèi)產(chǎn)品的學(xué)習(xí)閉環(huán)搭建，都以 “提升用戶(hù)體驗(yàn)、賦能業(yè)務(wù)增長(zhǎng)” 為核心。如果您有健身、教育類(lèi) App 的 UI/UE 設(shè)計(jì)、產(chǎn)品改版、界面重構(gòu)等需求，歡迎隨時(shí)與蘭亭妙微對(duì)接，我們將以專(zhuān)業(yè)的設(shè)計(jì)能力，為您打造貼合場(chǎng)景、體驗(yàn)優(yōu)質(zhì)的產(chǎn)品解決方案。

 

---

 

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

 

無(wú)論是健身類(lèi) App 的 “數(shù)據(jù)可視化 + 陪伴感”，還是學(xué)習(xí)類(lèi) App 的 “趣味交互 + 學(xué)習(xí)閉環(huán)”，都印證了 C 端產(chǎn)品 UI/UX 設(shè)計(jì)的核心邏輯：視覺(jué)貼合用戶(hù)場(chǎng)景、信息架構(gòu)服務(wù)核心流程、交互體驗(yàn)強(qiáng)化使用價(jià)值。蘭亭妙微將持續(xù)深耕 C 端產(chǎn)品設(shè)計(jì)，以專(zhuān)業(yè)能力為不同賽道的產(chǎn)品賦能，打造更有溫度、更高效的用戶(hù)體驗(yàn)。

 

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