五十路熟妇高熟无码视频,无码簧片,亚洲大尺度无码无码专线,亚洲欧美日韩国产自偷,jizz无码在线观看视频,av色综合,99精品国产成人一区二区,亚洲粉嫩av一区二区黑人

首頁

蘭亭秒微|探究 UI 設計中形狀的創意與應用

濤濤 B端ui設計文章及欣賞

在蘭亭秒微服務企業級產品、移動端 App、品牌視覺界面的全流程設計中,形狀是貫穿視覺表達、交互體驗與品牌識別的核心語言。形狀不只是界面裝飾,更是引導用戶認知、傳遞產品氣質、強化品牌記憶的關鍵載體。結合實戰案例,我們系統拆解形狀在 UI 中的設計原則、應用場景與落地方法。

蘭亭妙微帶您欣賞ECO 礦山自動駕駛系統 UI/UX 設計

藍藍設計的小編 系統UI設計文章及欣賞

 

一、視覺設計:專業感與場景感的極致統一

ECO 系統的視覺體系完全貼合礦山工業場景,以深邃的暗黑為基底,搭配高辨識度的科技綠作為主色調,既凸顯了工業系統的嚴謹性,又通過高對比度讓核心數據、車輛狀態、區域標識一目了然,完美適配礦山復雜的監控與操作需求。
 
  • 3D 礦山地形可視化,真實還原礦區道路、裝載區、限速區等場景,讓調度人員直觀掌握全局;
  • 用綠、黃、紅三色區分車輛健康狀態、區域風險等級,用綠色雷達圈標注車輛感知范圍,視覺預警清晰直觀;
  • 全端視覺風格高度統一,從全局調度、單車監控到地圖編輯,保持一致的色彩規范、字體圖標與布局邏輯,強化品牌專業感。
 

二、信息架構:全流程覆蓋,服務礦山核心場景

系統的信息架構圍繞礦山自動駕駛全流程搭建,層級清晰、功能完整,覆蓋調度、監控、管理全場景:
 
  • 全局調度頁:聚合全礦區車輛位置、運行狀態、設備數據,用標簽分類運輸設備、采礦設備、輔助設備,讓調度人員一眼掌握全局;
  • 單車監控頁:聚焦單臺車輛的實時位置、行駛速度、車輛姿態、周邊環境,搭配多視角攝像頭畫面,實現精準監控;
  • 地圖編輯頁:提供礦區道路、區域、錨點的可視化編輯功能,支持合規性校驗與狀態管理,滿足礦區動態規劃需求;
  • 車輛狀態頁:用卡片式布局展示每臺車輛的健康度、運行狀態,搭配快捷操作按鈕,實現高效管理。

三、交互體驗:高效便捷,適配工業操作需求

交互設計完全服務于礦山調度的專業場景,兼顧安全性與高效性:
 
  • 多視角切換功能,支持全局 3D 視圖、單車近景視圖、分屏聯動視圖,滿足不同監控需求;
  • 快捷操作欄集成緊急停止、遠程接管、限速設置等核心功能,一鍵觸達,保障礦山作業安全;
  • 可視化倒計時、狀態進度條、合規性校驗提示,讓操作狀態清晰可感知,降低操作失誤風險;
  • 多端適配設計,適配電腦端大屏調度與移動端便攜監控,實現全場景操作無縫銜接。

 


 

四、蘭亭妙微實踐延伸

 
蘭亭妙微深耕工業 B 端、企業級產品 UI/UX 設計多年,擁有豐富的全端產品設計、改版、重構經驗。近期,蘭亭妙微完成了上市公司競業達教育軟件三端(平臺端、教室端、移動端)UI/UE 全案重構,實現三端風格高度統一、體驗一體化,獲得客戶高度認可。
 
蘭亭妙微始終堅持以用戶為中心的設計理念,無論是礦山自動駕駛這類工業 B 端產品,還是教育類 C 端產品,都以貼合場景、提升效率、保障安全為核心,打造專業、易用的界面設計。如果您有工業系統、企業軟件的 UI/UE 設計、產品改版需求,歡迎與蘭亭妙微對接,我們將以專業設計能力,為您打造貼合場景、體驗優質的產品解決方案。
 

 

五、設計總結

 
ECO 礦山自動駕駛系統的設計,完美詮釋了工業 B 端產品的核心設計邏輯:視覺貼合場景、架構服務流程、交互保障安全。它不僅是一套功能完善的礦山調度系統,更通過優秀的 UI/UX 設計,讓復雜的工業技術變得直觀、易用,為同類工業產品提供了優質的設計范本。
 

蘭亭妙微(藍藍設計)www.wtxcl.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

 

image.png

蘭亭秒微|UI 設計中的網格系統:讓界面秩序與體驗雙升級

濤濤 B端ui設計文章及欣賞

在蘭亭秒微為企業級軟件、移動端 App、數據可視化平臺等項目做 UI 設計時,我們始終把網格系統作為界面規范的核心底層框架。很多團隊容易把網格當成 “輔助線”,卻忽略它是統一視覺節奏、提升協作效率、保障多端還原度的關鍵工具。結合十六年行業實戰經驗,我們把網格系統的原理、構成與落地方法,整理成一套可直接復用的設計標準。

一篇講透!設計師必看的交互基礎術語全解,蘭亭妙微UI設計公司

清陽 交互設計及用戶體驗

本文聚焦交互設計核心認知,清晰區分UI 設計、交互設計、UX 體驗設計,并逐一拆解高頻交互術語,蘭亭妙微UI設計公司幫你快速建立完整的交互知識體系。

image.png

二、交互設計核心認知:分清 UI / 交互 / UX

 
很多剛入行的設計師,容易混淆 UI、交互、UX 三者的邊界,先把核心定義與關系理清楚。

image.png

1. 三者核心定義

 

  • UI 界面設計:聚焦產品最終視覺呈現,負責排版布局、色彩、圖標、視覺樣式等落地工作,核心是把界面做美觀、規整
  • 交互設計(IXD):制定界面操作規則與功能使用流程,比如外賣下單步驟、提醒設置邏輯、AI 對話交互方式等,核心是讓用戶會用、好用。
  • UX 體驗設計:以提升整體用戶體驗為目標,覆蓋需求分析、交互設計、UI 設計、用戶測試等全流程,是包含交互與視覺的頂層設計。
 

2. 最簡單的區分方法

image.png
  • 只做視覺落地、滿足產品需求 → UI 設計
  • 制定操作流程、定義使用方式 → 交互設計
  • 以體驗為目標,統籌視覺與交互 → UX 體驗設計
 

3. 三者關系與工作流

 
三者并非孤立,而是高度關聯、相互影響:

image.png

  1. UX 包含交互與 UI,先定交互方案,再做 UI 視覺是標準工作流;
  2. 交互邏輯直接影響用戶體驗與 UI 布局,UI 設計也必須適配交互操作;
  3. 好設計要兼顧操作流暢視覺協調,不能顧此失彼。
 

4. 交互設計的交付與工作場景

image.png

  • 核心產出:線框圖 / 原型圖,配合流程連線、邏輯備注說明交互規則;
  • 常見誤區:不必死磕高保真可交互原型(Axure/Figma 動效),核心是輸出清晰可落地的方案
  • 職場現狀:簡單需求可在 UI 設計中同步完成交互;復雜功能 / 邏輯(尤其 B 端)必須獨立做交互設計,減少改稿、提升效率。
 

 

三、交互核心術語掃盲(一文看懂)

 

1. 基礎概念類

image.png

  • 人機交互(HCI):人與機器 / 軟件的所有互動行為總稱,開關機、點擊、輸入、鼠標操作等都屬于此,界面交互是其子集。
  • 交互設計(IXD):特指軟件界面的操作規則與流程設計。
  • 交互界面(UI):可觸發操作、獲得反饋的可視界面,純靜態圖片 / 視頻不屬于交互界面。
  • 交互原型:分靜態(線框圖,表達邏輯)與動態(可操作演示,用于驗證)兩類。
  • 交互文檔:記錄項目交互邏輯、規則、細節的團隊協作文件,用于信息同步與存檔。
 

2. 流程與行為類

 
  • 交互流程(User Flow):用戶完成一個目標的完整步驟,如首頁→選品→下單→支付的全路徑。
  • 交互事件:用戶單次操作 + 系統反饋的完整過程,包含觸發、行為、反饋、動效,是 Figma 等工具的交互基礎單位。
  • 交互方式(Trigger):界面預設的觸發規則,移動端以手指操作為主(點擊、長按、拖拽、重壓),PC 端以鼠標 / 快捷鍵為主。
  • 交互操作(User Action):用戶實際做出的操作行為,與 “交互方式” 匹配才能正常觸發功能。
  • 交互反饋(Action):用戶操作后系統給出的響應,如頁面跳轉、彈窗關閉、支付成功提示等。
  • 交互動效(Animation):反饋的視覺動畫形式,如頁面滑入、彈窗彈出、點擊動效等。
 

3. 評價與體驗類

  • 交互體驗:用戶使用功能時的操作感受,僅聚焦產品交互環節,不含定價、客服等外部因素。
  • 交互可用性(Usability):衡量交互是否好用、易上手的核心標準,決定設計方案的優劣。

蘭亭妙微(藍藍設計)www.wtxcl.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計UI咨詢、高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

 

image.png

好設計歷久彌新!蘭亭妙微UI設計公司聊聊那些百年未變的經典產品設計

清陽 用戶研究

一、全文速覽圖

image.png

“Good design is durable.” 迪特 · 拉姆斯的設計十誡提到,好的設計應該是歷久彌新、不會輕易過時的。

在 20 世紀,大多數日常用品都經歷過顛覆式的變革、簡化或技術迭代,比如電話、筆、黑膠唱片機等。然而有少數物品,它們已問世超過百年,形態與結構卻跟設計之初別無二致,且還能較好地滿足當下的需要。這些產品是如何誕生的?為什么他們能在時間的長河中維持恒定不變?蘭亭妙微UI設計公司與您一起來學習。

 

二、這些百年產品的誕生

1. QWERTY鍵盤布局  1874年

1941 年,世界上第一臺電子計算機誕生;1968 年,第一只鼠標原型問世。然而,與它們共同構成人機交互基礎的 QWERTY 鍵盤,其布局早在 1874 年就已獲得大規模應用。

如今我們已有語音、觸摸屏、甚至是腦機接口等多種輸入方式,卻還是高度依賴著與 150 年前首批打字機外觀相似的鍵盤。

QWERTY鍵盤的發明

1868 年,肖爾斯(Christopher Latham Sholes)和他的同事們將他們的第一臺打字機運往芝加哥,首位客戶是芝加哥波特電報學院的校長愛德華(Edward Payson Porter)。這臺打字機有 28 個琴鍵式按鍵,外形似鋼琴,與波特學院使用的休斯·菲爾普斯印字電報機相似。其鍵盤按字母表順序排列:A 至 N 從左向右排布,O 至 Z 則從右向左延伸。

image.png

 

在會見了多名客戶后,根據反饋,肖爾斯與其同事對鍵盤的構造與布局進行了多次改進。最終在 1872 年,《科學美國人》在頭版以大幅版畫形式報道了這臺打字機,畫面中清晰展示了其鍵帽結構,此時的打字機已配備 42 個按鍵,包含大寫字母、數字 2 至 9,以及連字符、逗號、句號、問號等常用標點符號。

image.png

 

1874 年,肖爾斯發明的打字機由槍械制造商雷明頓公司(E. Remington and Sons)推向市場,并逐漸演變成為鍵盤的行業標準。其按鍵布局已與今天我們普遍使用的 QWERTY 鍵盤幾乎完全相同,是當今世界上應用最廣泛的鍵盤布局。盡管不同國家會因語言習慣在鍵位安排上做些微調,但整體結構仍遵循著這一經典設計。

image.png

 

撲朔迷離的鍵盤布局起源

這其中耐人尋味的是,肖爾斯是如何想出這種鍵盤排列方式的。

因其印刷行業的背景及報紙出版商的經歷,肖爾斯應當熟悉排字工根據使用頻率排列字盤的做法。有一種廣為流傳的理論認為 QWERTY 鍵盤的布局是為了限制打字者的速度:其核心原則是將高頻使用的字母分隔開(盡管像 E 和 R 仍被放在一起),以此減少打字時連動桿的相互碰撞而導致的故障。換而言之,這是一種以暫時性的輸入效率,換取機械運行的長期可靠性的妥協。

然而,京都大學的研究人員³提出,QWERTY 鍵盤布局的誕生可能與早期核心用戶——電報員的工作習慣密切相關。研究中以 E、S 、Z 這三個字母在鍵盤上的布局為例來闡明這個觀點。

當時,美國電報員需要把聽到的摩爾斯電碼實時轉譯成字母。在美國使用的電碼中,字母 Z 與常用組合 SE 的編碼恰好相同,均為“···  ·”(滴滴滴  滴)。當聽到這樣的電碼序列,尤其是在缺乏上下文的單詞的開頭時,接收者無法立即判斷是 Z 還是 SE,只能根據后續聽到的電碼來綜合判斷。這種不確定性會嚴重影響輸入效率:在傳統的 A-Z 順序鍵盤上,若電報員開始輸入 Z,之后發現應為 SE,手指就不得不在相距較遠的鍵位之間移動并修改。

而 QWERTY 鍵盤布局的調整是,把 Z、SE 這兩組容易引起混淆的字母安排在了彼此相鄰的位置。這樣一來,即使電報員在聽到“滴滴滴  滴”時無法立刻判斷,手指也能在緊鄰的區域中快速選擇或更正,而不必在全鍵盤上尋找?;蛟S正是這類針對電報場景的優化,最終塑造了我們今天所熟知的 QWERTY 鍵盤格局。

image.png

 

雖然原因至今尚無定論,且無論是為了避免機械故障還是適配摩爾斯電碼的輸入習慣,都跟當下的使用場景有所不同,但至今為止也沒有任何一種其他布局方式來取代它。

2. 回形針 1901年

19 世紀,木漿制漿技術與工業造紙廠的出現讓廉價紙張得以廣泛流通。面對隨之產生的大量零散紙張,人們開始使用手邊常見的別針來加以固定——這被視為回形針的前身。盡管別針價格低廉、使用方便且用后即棄,但其缺點也十分明顯:不僅容易生銹,還會刺穿紙張,留下難看的銹跡與孔洞。

image.png

 

最早的回形針專利記錄來自挪威人約翰·瓦勒(Johan Vaaler),他在 1901 年提交了申請。專利摘要中寫道,這是一種“由彈簧材料彎曲成矩形、三角形或其他形狀的環,金屬絲兩端形成并排且方向相反的部件或舌片”。相比別針,回形針不需要通過刺穿紙面來固定紙張,并排的金屬絲結構也提供了更多的固定方式。

image.png

 

1899 年,威廉·米德爾布魯克(William D. Middlebrook)獲得了回形針制造機械的設計專利,隨后他將專利賣給了一家辦公用品制造商,該公司將其注冊為“寶石回形針”(Gem clip)。其有著標志性的雙橢圓形環圈設計,通常采用鍍鎳或彩色塑料包裹的材質,不僅有效防銹,也兼顧外觀的美感。

相比約翰·瓦勒的設計,寶石回形針將紙張與回形針接觸的位置處理得更圓潤,減少了刺破紙張的風險。螺旋狀的鋼絲具有一定的柔韌性,可輕松張開以便放入紙張,同時又有足夠的彈性來夾緊文件。

image.png

幾年后,喬治·W·麥吉爾(George W McGill)對寶石回形針做出了改良,進一步增大了內環的弧度,使其更明顯地上翹。相比初代寶石回形針平緩的環圈末端,這種上揚的開口形成了更清晰的“示能”——直觀地提示用戶“此處可拉開并插入紙張”。在結構上,它也實現了更省力的開合體驗。正是這一改良版本,逐漸演變成了今天最常見、最廣泛使用的回形針。

image.png

 

回形針作為“固定文件”的工具這一認知,也自然而然地從現實世界延伸到了數字世界。在圖形用戶界面中,當我們想要將文件添加至郵件或文檔時,常常能看到那枚熟悉的回形針圖標。

image.png

 

3. 螺旋蚊香 1902年

中國最早的蚊香可追溯至宋代,一本記錄民間生產技術的古籍《格物粗談》中記載:“端午時,收貯浮萍,陰干,加雄黃,作紙纏香,燒之,能祛蚊蟲”。這段記載中所述的制品可視為早期形態的“蚊香”,其外形類似于帶芯的線香。換而言之,最初的蚊香是直的。

蚊香的螺旋形演變可以追溯到 19 世紀末的日本。當時,人們將除蟲菊粉與鋸末混合燃燒用于驅蚊。日本企業家上山英一郎(うえやま えいいちろう)生產了一種混合了淀粉和除蟲菊的香,雖然驅蚊效果良好,但存在明顯缺陷:不僅燃燒時間短,不到四十分鐘便燃盡,而且與普通線香一樣質地較脆,遇風易折。

image.png

 

1895 年,上山英一郎正致力于尋找延長蚊香燃燒時間的方法。期間,他的妻子在倉庫中偶然看見一條盤踞的蛇,由此獲得靈感,建議他將蚊香制成螺旋形狀。這一設計在工程上極為巧妙:螺旋結構以最小的面積延展了蚊香長度(相比線狀蚊香延長約 4 倍),也設置了一個單點、穩定、緩慢的燃燒路徑,讓蚊香既不會熄滅也不會因為香條過寬而燃燒太快。1902 年,可持續燃燒約七小時的螺旋狀蚊香問世,并被命名為“金鳥蚊香”,其有著標志性的深綠色外觀與印有紅色公雞頭的包裝設計。

如今我們使用的螺旋盤香,基本都是采用了這個結構,在保證單盤燃燒時間 7-8 小時的前提下,既能節省包裝空間,又能在運輸中互相支撐,防止斷裂。

image.png

 

4. 拉鏈  1911年

在拉鏈發明之前,人們用以拉緊衣物的工具繁多,包括系帶、紐扣、別針、搭扣、腰帶與松緊帶等。紐扣是其中歷史最久、使用最廣的一種,但其使用效率較低,解開與扣上均需時間,且在耐用性上存在不足,時有脫落之虞。

image.png

 

19 世紀末,在追求“效率”的工業時代背景下,拉鏈應運而生。發明家惠特科姆(Whitcomb Judson)想解決傳統的系帶式高幫靴穿脫過于繁瑣這個問題,在芝加哥世界博覽會上展示了名為鉤鎖(clasp locker)的裝置,它的核心目標很明確:用一次滑動,替代逐個系扣的繁瑣過程,節省時間。但當時這種拉鏈依賴手工制作,成本較高,且質量不夠穩定,最終因為結構缺陷及成本問題退出了市場。

image.png

 

1912 年,森貝克(Gideon Sundback)取得了突破性進展,他將惠特科姆發明的易崩開的鉤環結構改成了穩定咬合的齒牙結構,實現凹凸完全咬合,使拉鏈閉合更牢固,開合也更加順滑流暢。一百多年過去,如今金屬拉鏈仍然在沿用這種工藝制造。

image.png

 

1923 年,百路馳(B.F. Goodrich)公司將森貝克設計的拉鏈用于一款女式橡膠靴,因其開合時會發出“滋滋”的摩擦聲,公司便形象地將其命名為 “ZIPPER”。這個朗朗上口的名字隨后逐漸被大眾廣泛采用,“拉鏈”也因此得名并沿用至今。

拉鏈與紐扣的爭端

在時尚界,關于在服裝上用拉鏈或是紐扣還引起過一場關乎功能、形式甚至是倫理上的論戰。

從效率上而言,拉鏈無疑更勝一籌,其便利性也更符合我們現代快節奏生活的需要。紐扣的使用需要一定的技巧,而且會增加衣物的厚度,對于如今流行的緊身牛仔褲來說,紐扣可能使面料更容易鼓起或撕裂;而拉鏈則能通過“收緊并向上拉”的方式來解決這個問題。

但是,拉鏈更容易損壞和卡住,更難修理。它們也存在一定的安全隱患:在戰場上,軍服就曾發生過因拉鏈卡死耽誤急救而導致傷亡的事件;反之,紐扣在意外拉扯下更易整體脫落而非卡死。

紐扣的另一個好處在于美觀:隨著時間的推移,紐扣與衣服的摩擦會形成獨特的色落與磨損痕跡,對于牛仔愛好者來說是一個理想的特性。

還有一部分來自復古派的道德質疑,批評者稱拉鏈簡化衣物穿脫的特性會助長輕率行為,敗壞社會風氣。因此,盡管拉鏈技術早已成熟,直到 1947 年李維斯才將其應用于牛仔褲上。

最終在 1937 年,拉鏈在這場論戰中擊敗紐扣,鞏固了其在服裝設計中的地位。如今,這個一百多年前的發明無處不在,被廣泛應用于服裝、行李箱和無數其他物品中,YKK(全球市場份額第一的拉鏈制造商)每年生產的拉鏈足以繞地球 50 圈。

三、何以百年不變

面對技術的百年巨變,為何這些產品能不被淘汰,甚至其基本形態都與百年前最初發明時大體相同?值得肯定的是,他們的設計的確超越了同期其他產品,呈現出一些寶貴的特質。

簡單精妙的結構

例如經典的寶石回形針,其雙橢圓形結構在同期的其他設計中脫穎而出,以簡潔優雅的形態高效實現了“不傷紙”這一核心需求;而螺旋形的蚊香設計,既延長了燃燒時間,又通過嚴絲合縫的嵌套,兼顧了節省包裝空間和運輸穩固性。

image.png

 

易用性

拉鏈和回形針是典型的無意識設計,它們形態與功能高度統一、無需學習曲線。即使是年幼的孩童,也能憑直覺學會使用拉鏈:20 世紀 30 年代拉鏈推廣初期,拉鏈款童裝就常常以“幫助幼兒學會自己穿衣,培養自理能力”作為賣點。

易工業化、標準化

回形針只需彎曲三次并剪斷即可制成,易于自動化生產;螺旋形蚊香可通過鋼制模具一次沖壓成型,一臺機器每分鐘可生產數百盤蚊香,整個過程可高度標準化。規模化生產有效降低了成本,使其在市場上更容易取得價格優勢,進而推動廣泛普及。

然而,歷經百年技術發展與社會變遷,新生需求與問題層出不窮。這些經典產品,是否真的一如誕生之初那般,顯得全然不過時?或許,讓它們保持不變的還有更深層的原因。

四、已是最優解,還是懶于改變?

去年 11 月的香港大埔火災事故造成了重大人員傷亡,令人痛心。在對這場事故的追責中,首當其沖地便是香港建筑行業的竹棚工程。許多人指出,竹材燃點僅為 265°C,遠低于鋼材,可能加劇火勢蔓延。此外,竹棚的結構強度也相對不足——過去香港曾多次發生棚架坍塌事故。以香港的經濟發展水平,完全有能力推動行業向鋼材升級。但網絡上仍有許多支持者聲稱:竹棚搭建技藝自清朝便出現在香港,已有上百年歷史,具有文化傳承價值‌,也是長久以來的行業慣例。

image.png

 

同樣的,歷史上也有其他證據表明 QWERTY 鍵盤并非最佳的鍵盤布局,比如美國心理學家發明的德沃拉克鍵盤布局(Dvorak keyboard layout):這一布局基于字母使用頻率和手的生理結構設計,擁有打字更快、更易學習和降低疲勞的特點。二戰時一項研究表明,德沃拉克布局的打字員速度要比 QWERTY 布局打字員快 74%。即使是 QWERTY 鍵盤的發明人——肖爾斯本人也沒那么篤定:盡管他很早就將設計賣給了雷明頓公司,但他終其一生都在不斷改進布局,并創造出各種替代方案,在他去世的前一年,他還為自己的 XPMCH 鍵盤申請了專利。

image.png

 

螺旋蚊香的使用體驗也沒那么理想:其嵌套結構導致在拆分時比較困難,一不小心可能直接掰斷,且必須依賴專用底座才能使用。這本質上是一種便利工業化生產而非優化用戶體驗的設計。然而,即使有了電蚊香這種更方便、健康、安全的替代品,螺旋蚊香仍憑借低廉的成本、成熟的產業鏈以及簡易的倉儲運輸要求,在市場中占據著一席之地。

在歷史較短的互聯網領域也有類似的案例——比如搜索引擎結果頁的布局與交互模式。自 2000 年代初谷歌確立“頂部搜索框 + 藍色鏈接標題 + 簡短摘要”的模式以來,其核心框架在近二十年間保持高度一致,并成為行業標準,不管是在網頁端還是移動端。然而在移動端上,固定于屏幕頂部的輸入框常位于手指的自然操作范圍之外,用戶需特意伸展才能觸及,體驗不夠便捷。而“標題用藍色表示超鏈接” 這個設計也稍顯過時,在用戶已基本認知“搜索結果標題可點擊”的今天,整屏的藍色可能帶來不必要的視覺干擾,增加閱讀負擔。

回望這些產品或設計,其“不變”與其說是源于解決問題的完美,不如說是因為它們早早確立了“行業標準”,獲得了先發優勢,培養了牢固的用戶習慣,進而形成了強大的路徑依賴。一旦從用戶到產業鏈的“慣性”形成,任何改變都將面臨難以估量的轉換成本。正因如此,即便它們存在一定的缺陷,市場往往也會接受,畢竟這是性價比相對較高的策略。

總結

一些產品能歷經百年而保持不變,固然有其設計上的優越性,但更值得深思的是不變的背后隱藏著的路徑依賴與行業慣性的強大力量。百年的不變或許只是暫時的,可能是顛覆性的技術尚未誕生,或是缺少一個推動行業變革的契機。

歸根結底,設計無法時刻去尋求那個完美的終極方案,而是在多重約束條件下尋找平衡——既要權衡用戶習慣與使用體驗,又要兼顧商業成本、行業發展情況與規?;枨?,甚至還要回應文化傳承與社會倫理的爭議。同時,作為設計師也需要保持對行業規范與慣例的審視與批判意識,警惕將“長期不變”等同于“無可優化”,在考慮用戶習慣轉換成本的前提下,積極探索更適配當下需求的創新方案。

轉載:優設

蘭亭妙微(藍藍設計)www.wtxcl.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計APP界面設計、圖標定制用戶體驗設計、交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

 

image.png

蘭亭妙微UI設計公司:超全面的B端設計指南:樹形選擇

清陽 設計思維

在 B 端系統的選擇錄入場景里,樹形選擇是承載層級化數據的核心組件,常用于組織架構、權限分配、分類篩選等場景。這篇指南從基礎概念、結構組成、類型差異、設計要點到常見誤區,完整梳理樹形選擇的設計邏輯,蘭亭妙微ui設計公司幫你高效落地合規、易用的樹形組件。
 

一、先搞懂:樹狀結構的核心概念

 
樹狀結構是倒置的層級化數據表達形式,頂端為根、向下延伸分支與葉子,清晰呈現數據的從屬、并列關系,是 B 端結構化信息展示的最優解之一。

image.png

1. 核心節點定義

 
  • 根節點:樹的唯一起點,樹形選擇中常隱藏,以標題 / 選項文本替代,避免視覺冗余。
  • 子節點:根節點以下的所有節點,無數量限制,是樹形選擇的核心展示內容。
  • 葉節點:無下級子節點的末端節點,是傳統單選樹的唯一可選對象。
  • 分支:節點間的連接關系,可通過線條顯隱強化層級感知。
 

2. 關鍵屬性

image.png

  • 節點層級:根節點為 1 級,向下依次遞增,直觀區分數據隸屬關系。
  • 節點高度:當前節點到最底層葉節點的層級數量。
  • 節點深度:當前節點到根節點的路徑長度,與層級概念相近。
 
日常場景中,字典檢索、省市縣地址、公司組織架構、課程分類,都是典型的樹狀結構應用,核心價值是快速定位、結構化管理、高效增刪改查
 

二、樹形選擇的基礎組成

 
樹形選擇的結構設計直接影響操作效率,核心由 4 部分構成,每部分都有明確的設計規范:
 

1. 層級縮進

 
統一用8px作為下級節點的縮進基準,清晰區分層級;
 
數據量大、層級復雜時,搭配分支線條強化結構,避免視覺混亂。
 

2. 折疊圖標

 
分為兩種樣式,適配不同層級場景:
 
  • 三角折疊:適合層級≤3 級的簡單場景,輕量化、易理解。
  • 方形折疊:搭配分支線條使用,適合 4 級及以上的多層級場景,層級辨識度更高。

image.png

3. 選擇控件

 
分單選、多選兩類,遵循「簡化操作、明確狀態」原則:
 
  • 單選:默認隱藏控件,以整個選項文本為熱區,點擊即選中。
  • 多選:必顯復選框,置于折疊圖標左側,預留后續功能拓展空間(新增、刪除、拖拽等),同時降低前端開發成本、減少 BUG。
 

4. 選項文本

 
控制字符長度,超長文本用省略號截斷,hover 時展示完整內容,保證界面整潔。
 

三、樹形選擇的三大類型(核心差異)

 
樹形選擇按交互邏輯分為三類,單選節點樹、多選節點樹為主流,傳統單選樹已極少使用
 

1. 單選樹(淘汰型)

 
僅支持選擇葉節點,需逐層展開才能操作,選擇熱區小、理解成本高、效率低,僅適用于極特殊的定制場景,不推薦通用設計使用。
 

2. 單選節點樹(主流)

 
支持選擇任意子節點,選中即代表該節點及下級所有數據,大幅提升效率;
 
交互拆分為兩個獨立熱區:

image.png

  • 左側:折疊圖標,僅控制展開 / 收起。
  • 右側:整個選項區域,點擊即選中當前節點。
     
    ?? 必須添加 hover 狀態,通過光標變化提示可點擊,降低操作認知成本。
 

3. 多選節點樹(最常用)

 
在單選節點樹基礎上增加復選框,支持批量選擇多個節點 / 分支;
 
理論上的「多選樹」(僅選葉節點)無實際業務價值,完全可被多選節點樹替代;
 
?? 動態數據場景慎用:如「部門權限自動同步新員工」這類動態關聯需求,樹形選擇無法清晰傳遞邏輯,需單獨做關聯配置,避免用戶誤解。
 

四、樹形選擇的核心優勢

 
  1. 易理解:樹狀結構認知成本低,用戶無需學習即可快速上手。
  2. 快瀏覽:大數據量下,可按層級快速篩選,比普通下拉選擇效率更高。
  3. 顯結構:清晰呈現數據層級關系,幫助用戶快速理解業務框架。
 

五、設計必避:3 大常見誤區

 

1. 忽視數據量承載

 
數據量過大時,必須做異步加載、分頁、搜索篩選,避免一次性渲染導致卡頓,同時優化滾動體驗。
 

2. 全選功能設計草率

 
大數據量場景下,全選需增加 **「半選」狀態 **(僅選中部分子節點),并明確提示選中數量,避免用戶誤操作。
 

3. 缺失鍵盤交互映射

 
B 端高效操作需支持鍵盤快捷鍵,規范如下:
 
  • ↑:切換上一同級節點,從子節點返回父節點。
  • ↓:切換下一同級節點,進入已展開的首個子節點。
  • ←:關閉當前節點,返回父節點。
  • →:展開子節點,進入首個子節點。
  • 回車:確認選中當前聚焦節點。
 

六、總結

 
樹形選擇是 B 端層級數據選擇的最優組件,設計核心是簡化層級認知、拆分操作熱區、適配業務場景:優先用單選 / 多選節點樹,放棄傳統單選樹;多層級加分支線條,大數據量加異步加載,同時補齊鍵盤交互,最終實現「易看、易點、易懂、高效」的使用體驗。
 

蘭亭妙微(藍藍設計)www.wtxcl.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

 

image.png

蘭亭妙微逐圖解析移動端APP多場景 UI/UX 設計案例

藍藍設計的小編 移動端UI設計文章及欣賞

這組圖片覆蓋了區塊鏈工具、心理健康、B 端營銷、項目管理、銷售數據、健康飲食六大不同賽道的產品界面,我們逐一拆解設計亮點與核心邏輯:

圖 1:區塊鏈域名注冊流程界面

這是 Web3 領域的域名注冊操作流界面,核心亮點是流程可視化 + 風險提示清晰:
  • 用步驟條(Commit → 等待 60 秒 → 二次交易)完整展示注冊全流程,每一步都標注操作說明,讓用戶清晰掌握進度;
  • 用綠色對勾、進度條實時反饋操作狀態,同時明確展示 Gas 費、注冊費用等關鍵數據,避免用戶踩坑;
  • 倒計時設計既符合區塊鏈防搶注的技術邏輯,又通過可視化倒計時讓用戶直觀感知等待時長,降低操作焦慮。

圖 2:Mindro 心理健康 App 界面

這是面向 C 端用戶的心理健康管理工具,設計核心是情緒可視化 + 陪伴感營造:
  • 以柔和的淡紫漸變為底色,搭配 3D 大腦視覺元素,弱化工具的冰冷感,傳遞溫暖、舒緩的情緒氛圍;
  • 核心數據(目標進度 65%、壓力水平 70%)以卡片形式突出展示,用直觀的數字讓用戶快速掌握自身狀態;
  • 問候語 Hello, Sara How are you feeling today? 強化陪伴感,貼合心理健康產品 情緒關懷 的核心定位。

圖 3:AdvisorWorld 金融營銷 B 端平臺界面

這是面向金融顧問的獲客營銷平臺,設計核心是轉化導向 + 信息高效傳遞:
  • 用高飽和藍、綠為主色調,強化專業感與信任感,同時用大尺寸 CTA 按鈕(Start Getting Leads、Book a Call)引導轉化;
  • 模塊化布局清晰劃分客戶證言、核心價值、數據指標、資源入口等模塊,讓金融顧問快速獲取核心信息;
  • 用數據(轉化率 + 35%、客單價 + 25%)強化產品價值,搭配真實客戶案例,提升 B 端用戶的信任度,促進轉化。

圖 4:RelationHub 項目管理 App 界面

這是面向團隊的項目協作工具,設計核心是數據聚合 + 高效管理:
  • 首頁聚合活躍項目數、待處理項目、團隊成員、客戶線索等核心數據,讓管理者一眼掌握項目全局;
  • 用標簽篩選(Branding、Website、UI/UX)快速分類線索,搭配客戶信息、金額、時間等明細,提升管理效率;
  • 用正負百分比展示項目環比變化,直觀呈現業務增長 下滑趨勢,幫助團隊快速決策。

圖 5:銷售數據管理 App 界面

這是面向銷售團隊的業績管理工具,設計核心是數據可視化 + 多端協同:
  • 用深色模式 + 高對比度圖表,清晰展示銷售額、收入、訂單等核心數據,折線圖、柱狀圖直觀呈現業績趨勢;
  • 分屏展示個人業績與團隊業績,滿足銷售個人復盤與團隊管理的雙重需求;
  • 底部導航欄(Home、Orders、Analytics、Profile)簡化操作路徑,讓銷售隨時查看業績,適配移動辦公場景。

圖 6:FitBite 健康飲食 App 界面

這是面向 C 端用戶的飲食健康管理工具,設計核心是場景化引導 + 數據激勵:
  • 啟動頁用新鮮食材視覺元素,搭配 Your Daily Guide to Smarter Eating 的 slogan,傳遞健康飲食的產品定位;
  • 首頁聚合周進度、步數、飲水量、三餐熱量等核心數據,用環形進度條直觀展示完成情況,強化正向激勵;
  • 底部導航欄(Home、Progress、Rewards、Menu)清晰劃分功能,用綠色主色調傳遞健康、活力的氛圍,貼合產品屬性。

補充:蘭亭妙微實踐延伸

蘭亭妙微深耕全賽道 UI/UX 設計,無論是區塊鏈、心理健康等 C 端產品,還是金融營銷、項目管理等 B 端工具,都能基于用戶場景打造專業、易用的界面設計。如果您有各類產品的 UI/UX 設計、改版需求,歡迎與蘭亭妙微對接。

設計如何為用戶「節省時間」?蘭亭妙微UI設計公司總結了這 5 個高效方法

清陽 設計思維

在交互設計里,幫用戶省時間是提升體驗與留存的核心邏輯。好的設計不是讓用戶多操作,而是用最少步驟、最低成本完成目標。結合主流產品實戰案例,蘭亭妙微ui設計公司,整理出 5 個最實用的省時設計方法,直接可落地。

一、高效信息抓?。鹤屜到y替用戶 “讀” 與 “填”

 

主動抓取關鍵信息,減少用戶手動查找、輸入、核對的成本。
 
  • 釘釘代辦:自動識別文本中的時間,一鍵完成日程設置

    image.png

  • 微信圖片文字識別:指尖滑動即可選中、復制、轉發,告別手動打字

    image.png

  • 閑魚 × 淘寶:訂單數據互通,一鍵同步已購商品,自動給出估價

    image.png

  • 支付寶綁卡:拍照識別卡號與開戶行,免去逐位輸入

    image.png

 
核心思路:把信息提取權交給系統,用戶只做確認。
 

 

二、避免重復閱讀與操作:跳過無效流程

 
用戶最煩重復看、重復點,設計要記住用戶狀態,直接定位到 “未完成”。
 
  • 愛奇藝劇集:一鍵跳過片頭,支持整劇默認跳過

    image.png

  • 微信朋友圈:重返時一鍵 “跳到未看位置”,不重復瀏覽

    image.png

  • 微信群未讀:標記未讀條數,點擊直達最新消息位置

    image.png

 
核心思路:記住用戶進度,砍掉重復路徑。
 

 

三、降低出錯概率:提前預判,減少返工

 
錯誤會大幅浪費時間,設計要前置規避,而不是事后補救。
 
  • 美團配送:惡劣天氣先派單給騎手,再通知商家,避免無人配送

    image.png

  • 高德地圖:提前預警擁堵路段,給用戶決策時間

    image.png

  • 微信紅包 / 轉賬:超時提醒,一鍵定位對應聊天,防止遺漏

    image.png

  • 美團單車:App 內關鎖,杜絕忘鎖、折返鎖車

    image.png

     

 
核心思路:把問題消滅在發生前,降低用戶試錯成本。
 

 

四、用選擇代替輸入:少打字、多點選

 
輸入成本遠高于選擇,用預設、標簽、快捷選項替代手動輸入。
 
  • 餓了么備注:歷史備注一鍵選用,不用重復編輯image.png
  • 攜程拼音:姓名一鍵轉拼音,多音字自動提供選項

    image.png

  • 京東評價:預設評價標簽,快速完成評分

    image.png

  • 微信零錢通:“全部轉入” 快捷按鈕,不用輸入金額

    image.png

 
核心思路:能選就不填,能默認就不手動。
 

 

五、提供下一步路徑:連貫操作,不用折返

 
完成當前動作后,直接給出下一場景入口,形成閉環體驗。
 
  • 高德地圖:查路線后,直接顯示單車 / 地鐵掃碼入口
  • 支付寶出行:地鐵支付成功,一鍵喚起網約車

    image.png

  • 螞蟻森林:“找能量” 直達可收取好友界面,高效偷取

    image.png

  • 得到 / 大眾點評:截屏自動彈出分享按鈕,一步分享image.png
 
核心思路:預判用戶下一步,把入口前置。
 
轉載:優設
 

蘭亭妙微(藍藍設計)www.wtxcl.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計、APP界面設計圖標定制、用戶體驗設計、交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

 

image.png

蘭亭妙微ui設計公司:6個產品細節剖析,看看高手是如何做設計的!

清陽 移動端UI設計文章及欣賞

UI設計的精髓在細節,蘭亭妙微(藍藍設計)作為深耕UI/UE領域16余年的專業團隊,以專業實力成為行業標桿。本文聚焦其6個產品設計細節,拆解高手設計邏輯與實操方法,為UI從業者、產品人提供可借鑒的設計參考,解鎖頂尖UI設計密碼。
蘭亭妙微ui設計公司:6個產品細節剖析,看看高手是如何做設計的!

一、閑魚:AI發布提效

閑魚發閑置功能接入AI,只需上傳商品圖片就可以直接生成描述文案,極大幫助用戶簡化發布流程

1. 零門檻發布,降低發布時間成本

解決非專業用戶 “不會寫文案、不懂專業術語” 的痛點,自動提取商品特征,組合成規范文案;相比傳統發布流程的耗時編輯文案、核對信息,更高效快捷。

2. 優化內容,提升交易轉化

自動生成符合當前市場熱點的文案表述,更能多文風轉換,一鍵轉為趣味的 “抽象文學”“黛玉文學”等,提升內容點擊率。

image.png

 

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

支付寶的首頁Banner通過游戲化的包裝,快速吸引注意力,驅動用戶主動點擊探索,高效地為活動頁面引流。

1. 互動機制強化用戶參與感

采用懸念式互動設計,button以 “猜猜是什么” 這類問答形式,激發用戶好奇心,通過游戲化場景的營造,降低參與門檻,驅動用戶主動點擊探索。

2. 場景氛圍營造提升吸引力

在以功能入口為主的首頁,該模塊具有游戲化趣味性的氛圍營造,從視覺上差異化的呈現,相比傳統的靜態廣告位,更能有效抓住用戶眼球,高效地為活動頁面引流。

image.png

 

三、去哪兒:退票時挽留場景設計

當有中轉單的用戶在點擊退票時,用挽留浮層及時給用戶彈出更優的解決方案,并在方案中量化利益點,同時保證原有票的安全感。整體通過 “先抓痛點→再給解決方案→最后引導操作” 的路徑,優化了用戶出行體驗。

1. 量化利益點

除了直達更方便之外,直達還有更省時間、金錢,保底票免費退等更多的利益點

2. 有兜底有安全感

用當前的中轉作為保底,先搶票,搶到了還能再退票。讓用戶安心下單,在未搶到心儀票的時候能有中轉的替補票,可以緩解用戶的焦慮情緒,有兜底的保障安全感

image.png

 

四、療愈類App Endel:引導充值會員的動畫

通過一個巧妙的互動行為“搖動手機”,降低用戶對會員充值廣告的反感。

1. 提升用戶參與感與趣味性

“搖一搖”互動將被動觀看廣告轉變為主動參與,用戶通過簡單的物理動作即可觸發折扣,這種即時反饋機制增強了趣味性,降低了傳統廣告的侵入感。

2. 降低付費決策的心理門檻

通過互動行為展示折扣,巧妙地將付費流程包裝成一種“獎勵”而非強制推銷。用戶感受到的是“主動獲取優惠”的成就感,而非被廣告打擾的抵觸情緒,從而更愿意接受付費選項。

image.png

五、小宇宙:創新列表設計

通過擬物化的卡牌堆疊形態,將傳統的平面信息流轉變為具有空間縱深感和探索趣味的交互式敘事焦點

1. 視覺層次突破傳統束縛

通過卡片堆疊、傾斜,在二維屏幕上創造出三維空間感。不對稱的布局打破了傳統設計的呆板,賦予界面動感與活力,能有效抓住用戶視線,對抗“橫幅盲視效應”

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

模擬物理世界卡牌的操作體驗,配合流暢的滑動動畫,讓用戶產生"翻閱卡片"的愉悅感,這種情感化設計能顯著提升用戶的操作滿足感和停留時長

3. 內容暗示激發探索行為

堆疊效果露出部分內容作為預覽,能有效刺激用戶的好奇心,主動進行滑動探索,提升內容消費深度

image.png

 

六、QQ音樂:個人中心下拉觸發金幣中心

該設計通過 “貼合用戶習慣的交互 + 強引導 + 積分激勵” 的組合策略,實現簽到轉化與用戶留存

1. 交互設計貼合用戶固有習慣

采用下拉觸發模式,無需額外學習成本,降低用戶參與簽到的操作門檻,提升即時轉化效率

2. 視覺設計強化引導與目標感知

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

3. 激勵設計構建留存閉環

用 “金幣” 作為即時激勵,滿足用戶即時反饋的心理需求,驅動次日復訪,同時聯動積分體系,將單次簽到轉化為長期行為

image.png

最后要說的話

本期的設計分享就到這里啦。

文章中的案例與思考來自于UED同學的日常分享。

后續我們將持續深度體驗產品,挖掘更多值得分享、學習的設計案例。努力將其中的方法理論應用到后續的產品設計中。

愿我們的努力為你帶來更好的體驗。下次見。

轉載:優設

蘭亭妙微(藍藍設計)www.wtxcl.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計APP界面設計圖標定制、用戶體驗設計交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

 

image.png

蘭亭妙微ui設計公司帶您了解篩選功能設計

清陽 移動端UI設計文章及欣賞

前言

 
“少即是多” 是設計的常用理念,但產品簡化到一定程度,必然會出現不可簡化的復雜性
 
諾曼曾說:復雜是世界的一部分,但它不應該令人困惑
 
篩選控件,就是讓用戶自主管理復雜信息的核心工具 —— 只要符合用戶行為,合理的復雜反而會被用戶接受。
 
蘭亭妙微UI設計公司從類型、場景、維度、準則五個維度,完整拆解移動端篩選設計,幫你快速選對、用好篩選控件。
 

 

一、先搞懂:篩選是什么?為什么要用?

 

1. 篩選的定義

 
篩選 = 用戶通過一個 / 多個條件,在海量內容里快速縮小范圍,隱藏不匹配信息,高效找到目標。
 
篩選是過濾器,屬于搜索框架的一部分。
 

2. 篩選 vs 搜索(核心區別)

image.png

 
  • 篩選:系統提供條件,用戶被動選擇 → 縮小范圍
  • 搜索:用戶主動輸入明確關鍵詞 → 精準查找

image.png

 

image.png

簡單記:搜索找結果,篩選縮范圍。
 

3. 什么時候必須加篩選?

 
  1. 系統定義篩選(一級篩選)
     

    image.png

    大方向快速切換,如:訂單(待支付 / 待發貨)、優惠券(未使用 / 已過期)。
  2. 用戶自定義篩選(二級 / 精細化篩選)
     
    在一級結果里進一步精準,如:價格、品牌、發貨地、評分等。
 
最佳組合:一級分類 + 二級精細化 + 排序
 

 

二、5 種最常用篩選樣式(直接對應場景)

 

1. Tab 篩選

 

image.png

  • 形態:橫向 / 縱向常駐展示
  • 優點:一目了然、隨時切換、無學習成本
  • 場景:內容大類劃分(新聞頻道、視頻分類、商品一級類目)
  • 缺點:結果偏模糊,需搭配二次篩選
 

2. 彈窗式篩選

image.png

 
  • 形態:入口隱藏,點擊蒙層彈出
  • 優點:省空間、多維度平鋪、不占頁面
  • 場景:電商列表、外賣、出行等高頻精細化篩選
  • 適用:條件不多、操作快
 

3. 折疊式篩選

  • 形態:入口隱藏,點擊展開、常駐頁面
  • 優點:比 Tab 省空間,比彈窗更可控
  • 場景:中度篩選需求,需反復調整條件
 

4. 高級篩選(新頁面)

image.png

 
  • 形態:跳轉到獨立頁面
  • 優點:無干擾、可放大量細顆粒條件
  • 場景:汽車、房產、招聘、復雜 B 端篩選
  • 適用:條件多、層級深、需專注操作
 

5. 篩選 + 排序組合(移動端標配)

image.png

 
  • 形態:篩選按鈕 + 綜合 / 價格 / 銷量等排序
  • 優點:一步完成 “縮小范圍 + 重新排列”
  • 場景:幾乎所有商品 / 內容列表
  • 代表:美團、餓了么、淘寶、京東
 

 

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

 

1. 單維度篩選

 

image.png

  • 一次只選一個條件,觸發即生效
  • 標簽簡短(≤5 字)、語義清晰
  • 場景:訂單狀態、內容分類
 

2. 多維度篩選

image.png

 
  • 支持單選 / 多選 / 區間 / 滑塊
  • 需配:確定 + 重置按鈕
  • 移動端建議:一級維度≤9 個,多余整合到二級
 

3. 多等級篩選

 

image.png

  • 層級:一級分類 → 二級屬性 → 三級參數
  • 移動端最多 3 級,避免迷路
  • 適合:類目復雜的電商、后臺系統
 

 

四、篩選設計 3 大核心準則(必遵守)

 

1. 以用戶效率為目標

image.png

 
篩選的本質不是 “好看”,而是幫用戶更快找到
 
  • 不知道要什么的用戶:靠分類 + 篩選引導
  • 知道要什么的用戶:靠精準條件快速鎖定
  • 最終目標:降低時間成本,提升轉化與留存
 

2. 按產品類型定制條件

 

image.png

不要抄通用模板:
 
  • 電商:品牌、價格、銷量、評分、服務
  • 新聞 / 內容:熱度、時間、偏好、標簽
  • 工具 / B 端:狀態、時間區間、負責人、關鍵字
 

3. 按使用頻率排優先級

 

image.png

高頻條件前置,低頻條件隱藏 / 后置。
 
  • 買手機:品牌→內存→容量→價格
  • 買日用品:價格→銷量→(品牌放高級)
 

 

五、總結(一句話記?。?/h2>
 
篩選的核心價值:用最簡單的交互,幫用戶最高效縮小信息范圍
 
選型只看兩點:用戶需求 + 使用場景。
  • 簡單分類 → Tab
  • 常規精篩 → 彈窗
  • 復雜深篩 → 高級頁面
  • 列表標配 → 篩選 + 排序

蘭亭妙微(藍藍設計)www.wtxcl.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

 

image.png

日歷

鏈接

個人資料

藍藍設計的小編 http://www.wtxcl.cn

存檔