在蘭亭秒微服務(wù)企業(yè)級產(chǎn)品、移動端 App、品牌視覺界面的全流程設(shè)計中，形狀是貫穿視覺表達(dá)、交互體驗與品牌識別的核心語言。形狀不只是界面裝飾，更是引導(dǎo)用戶認(rèn)知、傳遞產(chǎn)品氣質(zhì)、強(qiáng)化品牌記憶的關(guān)鍵載體。結(jié)合實戰(zhàn)案例，我們系統(tǒng)拆解形狀在 UI 中的設(shè)計原則、應(yīng)用場景與落地方法。

一、視覺設(shè)計：專業(yè)感與場景感的極致統(tǒng)一

• 3D 礦山地形可視化，真實還原礦區(qū)道路、裝載區(qū)、限速區(qū)等場景，讓調(diào)度人員直觀掌握全局；
• 用綠、黃、紅三色區(qū)分車輛健康狀態(tài)、區(qū)域風(fēng)險等級，用綠色雷達(dá)圈標(biāo)注車輛感知范圍，視覺預(yù)警清晰直觀；
• 全端視覺風(fēng)格高度統(tǒng)一，從全局調(diào)度、單車監(jiān)控到地圖編輯，保持一致的色彩規(guī)范、字體圖標(biāo)與布局邏輯，強(qiáng)化品牌專業(yè)感。

二、信息架構(gòu)：全流程覆蓋，服務(wù)礦山核心場景

• 全局調(diào)度頁：聚合全礦區(qū)車輛位置、運(yùn)行狀態(tài)、設(shè)備數(shù)據(jù)，用標(biāo)簽分類運(yùn)輸設(shè)備、采礦設(shè)備、輔助設(shè)備，讓調(diào)度人員一眼掌握全局；
• 單車監(jiān)控頁：聚焦單臺車輛的實時位置、行駛速度、車輛姿態(tài)、周邊環(huán)境，搭配多視角攝像頭畫面，實現(xiàn)精準(zhǔn)監(jiān)控；
• 地圖編輯頁：提供礦區(qū)道路、區(qū)域、錨點(diǎn)的可視化編輯功能，支持合規(guī)性校驗與狀態(tài)管理，滿足礦區(qū)動態(tài)規(guī)劃需求；
• 車輛狀態(tài)頁：用卡片式布局展示每臺車輛的健康度、運(yùn)行狀態(tài)，搭配快捷操作按鈕，實現(xiàn)高效管理。

三、交互體驗：高效便捷，適配工業(yè)操作需求

• 多視角切換功能，支持全局 3D 視圖、單車近景視圖、分屏聯(lián)動視圖，滿足不同監(jiān)控需求；
• 快捷操作欄集成緊急停止、遠(yuǎn)程接管、限速設(shè)置等核心功能，一鍵觸達(dá)，保障礦山作業(yè)安全；
• 可視化倒計時、狀態(tài)進(jìn)度條、合規(guī)性校驗提示，讓操作狀態(tài)清晰可感知，降低操作失誤風(fēng)險；
• 多端適配設(shè)計，適配電腦端大屏調(diào)度與移動端便攜監(jiān)控，實現(xiàn)全場景操作無縫銜接。

四、蘭亭妙微實踐延伸

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

在蘭亭秒微為企業(yè)級軟件、移動端 App、數(shù)據(jù)可視化平臺等項目做 UI 設(shè)計時，我們始終把網(wǎng)格系統(tǒng)作為界面規(guī)范的核心底層框架。很多團(tuán)隊容易把網(wǎng)格當(dāng)成 “輔助線”，卻忽略它是統(tǒng)一視覺節(jié)奏、提升協(xié)作效率、保障多端還原度的關(guān)鍵工具。結(jié)合十六年行業(yè)實戰(zhàn)經(jīng)驗，我們把網(wǎng)格系統(tǒng)的原理、構(gòu)成與落地方法，整理成一套可直接復(fù)用的設(shè)計標(biāo)準(zhǔn)。

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

二、交互設(shè)計核心認(rèn)知：分清 UI / 交互 / UX

1. 三者核心定義

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

2. 最簡單的區(qū)分方法

• 只做視覺落地、滿足產(chǎn)品需求 → UI 設(shè)計
• 制定操作流程、定義使用方式 → 交互設(shè)計
• 以體驗為目標(biāo)，統(tǒng)籌視覺與交互 → UX 體驗設(shè)計

3. 三者關(guān)系與工作流

1. UX 包含交互與 UI，先定交互方案，再做 UI 視覺是標(biāo)準(zhǔn)工作流；
2. 交互邏輯直接影響用戶體驗與 UI 布局，UI 設(shè)計也必須適配交互操作；
3. 好設(shè)計要兼顧操作流暢與視覺協(xié)調(diào)，不能顧此失彼。

4. 交互設(shè)計的交付與工作場景

• 核心產(chǎn)出：線框圖 / 原型圖，配合流程連線、邏輯備注說明交互規(guī)則；
• 常見誤區(qū)：不必死磕高保真可交互原型（Axure/Figma 動效），核心是輸出清晰可落地的方案；
• 職場現(xiàn)狀：簡單需求可在 UI 設(shè)計中同步完成交互；復(fù)雜功能 / 邏輯（尤其 B 端）必須獨(dú)立做交互設(shè)計，減少改稿、提升效率。

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

1. 基礎(chǔ)概念類

• 人機(jī)交互（HCI）：人與機(jī)器 / 軟件的所有互動行為總稱，開關(guān)機(jī)、點(diǎn)擊、輸入、鼠標(biāo)操作等都屬于此，界面交互是其子集。
• 交互設(shè)計（IXD）：特指軟件界面的操作規(guī)則與流程設(shè)計。
• 交互界面（UI）：可觸發(fā)操作、獲得反饋的可視界面，純靜態(tài)圖片 / 視頻不屬于交互界面。
• 交互原型：分靜態(tài)（線框圖，表達(dá)邏輯）與動態(tài)（可操作演示，用于驗證）兩類。
• 交互文檔：記錄項目交互邏輯、規(guī)則、細(xì)節(jié)的團(tuán)隊協(xié)作文件，用于信息同步與存檔。

2. 流程與行為類

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

3. 評價與體驗類

• 交互體驗：用戶使用功能時的操作感受，僅聚焦產(chǎn)品交互環(huán)節(jié)，不含定價、客服等外部因素。
• 交互可用性（Usability）：衡量交互是否好用、易上手的核心標(biāo)準(zhǔn)，決定設(shè)計方案的優(yōu)劣。

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

一、全文速覽圖

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

在 20 世紀(jì)，大多數(shù)日常用品都經(jīng)歷過顛覆式的變革、簡化或技術(shù)迭代，比如電話、筆、黑膠唱片機(jī)等。然而有少數(shù)物品，它們已問世超過百年，形態(tài)與結(jié)構(gòu)卻跟設(shè)計之初別無二致，且還能較好地滿足當(dāng)下的需要。這些產(chǎn)品是如何誕生的？為什么他們能在時間的長河中維持恒定不變？蘭亭妙微UI設(shè)計公司與您一起來學(xué)習(xí)。

二、這些百年產(chǎn)品的誕生

1. QWERTY鍵盤布局  1874年

1941 年，世界上第一臺電子計算機(jī)誕生；1968 年，第一只鼠標(biāo)原型問世。然而，與它們共同構(gòu)成人機(jī)交互基礎(chǔ)的 QWERTY 鍵盤，其布局早在 1874 年就已獲得大規(guī)模應(yīng)用。

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

QWERTY鍵盤的發(fā)明

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

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

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

撲朔迷離的鍵盤布局起源

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

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

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

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

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

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

2. 回形針 1901年

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

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

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

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

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

回形針作為“固定文件”的工具這一認(rèn)知，也自然而然地從現(xiàn)實世界延伸到了數(shù)字世界。在圖形用戶界面中，當(dāng)我們想要將文件添加至郵件或文檔時，常常能看到那枚熟悉的回形針圖標(biāo)。

3. 螺旋蚊香 1902年

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

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

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

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

4. 拉鏈  1911年

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

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

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

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

拉鏈與紐扣的爭端

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

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

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

紐扣的另一個好處在于美觀：隨著時間的推移，紐扣與衣服的摩擦?xí)纬瑟?dú)特的色落與磨損痕跡，對于牛仔愛好者來說是一個理想的特性。

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

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

三、何以百年不變

面對技術(shù)的百年巨變，為何這些產(chǎn)品能不被淘汰，甚至其基本形態(tài)都與百年前最初發(fā)明時大體相同？值得肯定的是，他們的設(shè)計的確超越了同期其他產(chǎn)品，呈現(xiàn)出一些寶貴的特質(zhì)。

簡單精妙的結(jié)構(gòu)

例如經(jīng)典的寶石回形針，其雙橢圓形結(jié)構(gòu)在同期的其他設(shè)計中脫穎而出，以簡潔優(yōu)雅的形態(tài)高效實現(xiàn)了“不傷紙”這一核心需求；而螺旋形的蚊香設(shè)計，既延長了燃燒時間，又通過嚴(yán)絲合縫的嵌套，兼顧了節(jié)省包裝空間和運(yùn)輸穩(wěn)固性。

易用性

拉鏈和回形針是典型的無意識設(shè)計，它們形態(tài)與功能高度統(tǒng)一、無需學(xué)習(xí)曲線。即使是年幼的孩童，也能憑直覺學(xué)會使用拉鏈：20 世紀(jì) 30 年代拉鏈推廣初期，拉鏈款童裝就常常以“幫助幼兒學(xué)會自己穿衣，培養(yǎng)自理能力”作為賣點(diǎn)。

易工業(yè)化、標(biāo)準(zhǔn)化

回形針只需彎曲三次并剪斷即可制成，易于自動化生產(chǎn)；螺旋形蚊香可通過鋼制模具一次沖壓成型，一臺機(jī)器每分鐘可生產(chǎn)數(shù)百盤蚊香，整個過程可高度標(biāo)準(zhǔn)化。規(guī)模化生產(chǎn)有效降低了成本，使其在市場上更容易取得價格優(yōu)勢，進(jìn)而推動廣泛普及。

然而，歷經(jīng)百年技術(shù)發(fā)展與社會變遷，新生需求與問題層出不窮。這些經(jīng)典產(chǎn)品，是否真的一如誕生之初那般，顯得全然不過時？或許，讓它們保持不變的還有更深層的原因。

四、已是最優(yōu)解，還是懶于改變？

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

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

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

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

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

總結(jié)

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

歸根結(jié)底，設(shè)計無法時刻去尋求那個完美的終極方案，而是在多重約束條件下尋找平衡——既要權(quán)衡用戶習(xí)慣與使用體驗，又要兼顧商業(yè)成本、行業(yè)發(fā)展情況與規(guī)模化需求，甚至還要回應(yīng)文化傳承與社會倫理的爭議。同時，作為設(shè)計師也需要保持對行業(yè)規(guī)范與慣例的審視與批判意識，警惕將“長期不變”等同于“無可優(yōu)化”，在考慮用戶習(xí)慣轉(zhuǎn)換成本的前提下，積極探索更適配當(dāng)下需求的創(chuàng)新方案。

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

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

一、高效信息抓取：讓系統(tǒng)替用戶 “讀” 與 “填”

• 釘釘代辦：自動識別文本中的時間，一鍵完成日程設(shè)置

  

• 微信圖片文字識別：指尖滑動即可選中、復(fù)制、轉(zhuǎn)發(fā)，告別手動打字

  

• 閑魚 × 淘寶：訂單數(shù)據(jù)互通，一鍵同步已購商品，自動給出估價

  

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

  

二、避免重復(fù)閱讀與操作：跳過無效流程

• 愛奇藝劇集：一鍵跳過片頭，支持整劇默認(rèn)跳過

  

• 微信朋友圈：重返時一鍵 “跳到未看位置”，不重復(fù)瀏覽

  

• 微信群未讀：標(biāo)記未讀條數(shù)，點(diǎn)擊直達(dá)最新消息位置

  

三、降低出錯概率：提前預(yù)判，減少返工

• 美團(tuán)配送：惡劣天氣先派單給騎手，再通知商家，避免無人配送

  

• 高德地圖：提前預(yù)警擁堵路段，給用戶決策時間

  

• 微信紅包 / 轉(zhuǎn)賬：超時提醒，一鍵定位對應(yīng)聊天，防止遺漏

  

• 美團(tuán)單車：App 內(nèi)關(guān)鎖，杜絕忘鎖、折返鎖車

  

   

四、用選擇代替輸入：少打字、多點(diǎn)選

• 餓了么備注：歷史備注一鍵選用，不用重復(fù)編輯
• 攜程拼音：姓名一鍵轉(zhuǎn)拼音，多音字自動提供選項

  

• 京東評價：預(yù)設(shè)評價標(biāo)簽，快速完成評分

  

• 微信零錢通：“全部轉(zhuǎn)入” 快捷按鈕，不用輸入金額

  

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

• 高德地圖：查路線后，直接顯示單車 / 地鐵掃碼入口
• 支付寶出行：地鐵支付成功，一鍵喚起網(wǎng)約車

  

• 螞蟻森林：“找能量” 直達(dá)可收取好友界面，高效偷取

  

• 得到 / 大眾點(diǎn)評：截屏自動彈出分享按鈕，一步分享

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

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

1. 零門檻發(fā)布，降低發(fā)布時間成本

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

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

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

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

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

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

采用懸念式互動設(shè)計，button以 “猜猜是什么” 這類問答形式，激發(fā)用戶好奇心，通過游戲化場景的營造，降低參與門檻，驅(qū)動用戶主動點(diǎn)擊探索。

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

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

三、去哪兒：退票時挽留場景設(shè)計

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

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

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

2. 有兜底有安全感

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

四、療愈類App Endel：引導(dǎo)充值會員的動畫

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后要說的話

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

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

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

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

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

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

前言

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

1. 篩選的定義

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

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

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

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

   

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

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

1. Tab 篩選

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

2. 彈窗式篩選

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

3. 折疊式篩選

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

4. 高級篩選（新頁面）

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

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

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

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

1. 單維度篩選

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

2. 多維度篩選

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

3. 多等級篩選

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

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

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

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

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

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

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

• 買手機(jī)：品牌→內(nèi)存→容量→價格
• 買日用品：價格→銷量→（品牌放高級）

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

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

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