北京蘭亭妙微設計專注 UI/UX 體驗設計十六年，在政務、醫(yī)療、企業(yè) SaaS、工業(yè)可視化等項目中，我們已建立完整設計規(guī)范體系，用以提升效率、保證輸出統(tǒng)一。但在真實項目里，客戶個性化需求、特殊業(yè)務場景、跨終端適配等情況，常與規(guī)范產生沖突。

北京蘭亭妙微科技有限公司（藍藍設計）深耕 UI/UX 設計 16 年，專注企業(yè)信息化、大數據、醫(yī)療健康、工業(yè)監(jiān)控等領域的全鏈路體驗設計與優(yōu)化。近期我們完成某企業(yè)級綜合服務平臺可用性測試，現將報告輸出思路完整復盤，供團隊內部復用與同行交流。

在蘭亭妙微，我們服務過金融、醫(yī)療、軍工、智能制造等大量政企與企業(yè)級項目，見過太多設計師「軟件很溜、想法很空、落地很慌」。同樣是做界面，為什么有的人只能當美工，有的人卻能拿高薪、控項目、帶結果？

好的 UI 設計，從來不止是界面美化，而是品牌、場景、體驗三位一體的系統(tǒng)能力。蘭亭妙微深耕 UI/UE 設計 16 年，服務金融、軍工、醫(yī)療、能源、智能制造等多領域，沉淀出一套可復制、可落地的高級 UI 設計方法論。我們認為，真正的高級 UI 設計師，必須具備三大核心特質 ——品牌體系化、場景業(yè)務化、體驗心智化，這也是蘭亭妙微所有項目的底層設計準則。

今天，蘭亭妙微UI設計公司分享的是「常見的交互設計套路」。

不知道大家有沒有過這種體驗，睡前拿起手機刷短視頻，原本打算看幾條視頻就睡覺，結果刷著刷著一兩個小時就過去了。

那么我們?yōu)槭裁磿滩蛔∫恢?ldquo;刷刷刷”呢，這種設計背后藏著哪些交互邏輯。今天就來好好聊聊這個話題。

一、引導用戶沉浸的 4 種典型交互

1. 無限滾動

2. 自動播放

3. 下拉刷新

4. 紅點與消息反饋

二、功能的兩面性：從好體驗到 “操控式設計”

暗黑模式：用界面或交互故意誤導、操縱用戶決策，看似友好，實則誘導點擊、違背用戶意愿。上述沉浸型交互，很容易跨過邊界變成套路。

三、良性引導用戶的 3 個設計原則

1. 提供終點，保留用戶決策權

2. 適度反饋，拒絕過量刺激

3. 少套路，多真誠

結語

作為深耕網頁設計與品牌視覺的專業(yè)團隊，蘭亭妙微在大量 Web 端項目中反復驗證：字體排版是網頁設計的底層骨架，直接決定閱讀舒適度、信息傳遞效率與品牌專業(yè)度。遵循標準化字體排版規(guī)范，既能提升用戶體驗，也能讓設計與前端對接更高效、落地零偏差。

作為專注 UI 與用戶體驗設計的專業(yè)機構，蘭亭妙微在大量 To C、To B 項目中驗證：圖標是界面的視覺語言核心，既承擔功能指引，又傳遞品牌氣質，直接影響用戶認知效率與產品質感。一套科學、統(tǒng)一、高辨識度的圖標體系，能顯著降低理解成本、強化品牌記憶、提升流量轉化效率。

一、什么是幽靈按鈕

二、幽靈按鈕的核心優(yōu)勢

1. 界面輕量化，降低視覺負擔

   

   工具欄、導航欄密集排布圖標 / 文字時，幽靈按鈕無冗余底色與邊框，保持界面簡潔清爽，避免視覺雜亂。
2. 擴大操作熱區(qū)，提升交互準確率

   

    
   解決純文字 / 圖標點擊區(qū)域過小、易誤觸的問題，設計階段明確熱區(qū)范圍，前端可直接落地，適配觸摸屏操作習慣。
3. 清晰視覺反饋，強化操作感知

   

    
   懸停 / 按下時邊框顯現，直觀展示實際可點擊范圍，比單純變色更醒目，讓用戶操作更有安全感。

三、幽靈按鈕的落地痛點

1. 設計成本與感知不對等

   

   視覺效果極簡，但需精細化調整邊框、間距，付出雙倍設計成本，易被誤解為 “工作量不足”。
2. 存量產品改造成本高
    
   替換現有圖標 / 文字鏈接為幽靈按鈕，需重構層級、間距結構，易影響頁面其他區(qū)域，不適合大幅改動框架。
3. 設計精度要求極高
    
   需單獨配置按鈕邊框，精準把控內邊距、組件間距，打破傳統(tǒng)對稱、對齊的設計邏輯，調試難度大。

四、幽靈按鈕的核心設計難點

1. 視覺對稱≠實際邊距對稱

   

    
   文字 + 圖標組合的按鈕，若默認邊距完全對稱，圖標側會顯空曠；需微調邊距，讓視覺平衡優(yōu)先于數值對稱。
2. 視覺對齊≠實際位置對齊

   

    
   文字與圖標看似對齊，懸停顯示邊框后會出現偏移；需刻意調整位置，保證默認態(tài)整潔、交互態(tài)規(guī)整。

五、應用現狀與大廠案例

今天蘭亭妙微UI設計公司，來講解 B 端產品界面的視覺風格，聊聊在整個行業(yè)當中視覺風格的變化與目前的現狀。以及給大家說說未來應該如何選擇自己產品的視覺風格～

我們會將整體分為行業(yè)初期，萌芽期、成長期、野蠻發(fā)展期、新階段 ，每一個階段給大家總結一個最為流行的風格，并分析這個風格出現的原因，方便大家進行理解。

一、行業(yè)初期-經典傳統(tǒng)風

我們把時間拉回到 2012 年。在那時，Ant Design 還沒有出現，也沒有什么 Element、Semi Design，行業(yè)當中最早的 B 端系統(tǒng)都是以客戶端的形式進行呈現。

整體風格也非常老舊，像是那會兒的 Office、SAP、Salesforce，你可以看到都是他們青澀的模樣。

在經典傳統(tǒng)的設計風格當中，會使用大面積的白色作為底色，同時在頁面中用灰色進行分割，使得整個頁面散亂搶眼，導致整體的視覺很難被大眾所接受，總體感覺信息較散，難以進行聚焦。

而在早期，出現這些老舊風格主要有三個原因：

1.技術框架限制：因為當中成熟的前端框架較少，沒有太多技術棧提供給到開發(fā)進行使用，因此沒有精力將頁面做得漂亮

2.認知不足：設計師對于客戶端、網頁端的設計理解認知本身不夠，做得較為粗糙，比如當時的 Office 的界面設計也大致是如此的模樣

3.風格一致：早期 Windows 系統(tǒng)就是這樣的風格，與 Windows 一致更容易被大眾所接受，因此就很難進行創(chuàng)新

關于這類風格的產品，大家不要覺得這夸張，其實在目前依舊有很多產品會延續(xù)這個風格。比如 醫(yī)療類產品、工業(yè)生產類系統(tǒng)，對于他們而言，能用即可，不必糾結太多。

但隨著時間的推移，行業(yè)中對于 B 端設計的要求也在逐漸變高。

二、萌芽期-清爽整潔風

我們將時間推移到 2015 年前后，隨著行業(yè)不斷發(fā)展，在國外 Fiori、Salesforce 的出現讓大家意識到，這類型的 B 端產品也是需要設計的。

因此國內外的很多系統(tǒng)都是在這一時間面世，像是 Ant Design 、Element 都相繼發(fā)布。

由于這些設計系統(tǒng)的誕生，你會發(fā)現大家對于整個 B 端設計有了一點自己的想法。

在設計上，會去考慮使用 區(qū)塊劃分，將整個頁面進行規(guī)整呈現。

比如 SAP 在使用了 Fiori 過后，就會使整個界面更干凈。

同樣非常老牌的 Salesforce 在2015年的時候。也帶來了相當大的視覺變化。整體都能感受到，整個頁面會通過不斷的分層顏色的劃分通過黑白灰的方式去呈現頁面當中的基本信息。

三、成長期-沉穩(wěn)側黑風

我們的時間來到 2018 年前后，在這個時間節(jié)點，很多產品都推出了自己的設計系統(tǒng)，對于 B 端設計風格而言，也會提出更高的要求。

比如 Teambition 產品當中，它們提供了自己的設計系統(tǒng)的內容去指導整個產品來進行迭代和優(yōu)化。同樣 Ant Design它們也推出了自己的 Ant Design Pro 來演示使用設計系統(tǒng)過后，能夠搭建出什么樣的產品。

同樣，這個時段很多產品也開始進行自己產品的視覺優(yōu)化，這時候整體的風格是以：黑色側邊導航為主，然后內容形態(tài)進行延展。

比如像有贊、Coding、微盟、飛書，之前都是這樣的設計風格來進行呈現。

你會發(fā)現它們在整體的設計上都會更加重視頁面的分塊顏色的區(qū)隔，整體頁面的識別效率。同時這段時間爆發(fā)出來非常多的 B 端產品，隨后國內都會按照側邊黑色導航的樣式進行進一步設計，這一定程度上提高了國內 B 端設計的下限～

四、野蠻發(fā)展期-新擬態(tài)風

我們隨后將時間推移到 2019 年后，在這時誕生了新擬態(tài)設計風格。

它最早是烏克蘭設計師 Alexander Plyuto 在追波和 ins 發(fā)布的一副系列作品，隨后大家發(fā)現非常奇特，所以得到廣泛的關注。

新擬態(tài)的設計風格是以立體效果與浮雕元素，呈現更為三維立體的效果，會給人一種奇特、夢幻的界面體驗。

隨后就會有很多產品都開始進行跟進，比如 智能家居的產品、金融類產品都有所涉及，甚至很多B端產品也勇敢嘗試，但大多數設計師設計完過后，整體評價都不算太高。

為什么沒有大規(guī)模的推行，我覺得有 3 點原因：

1.因為新擬態(tài)風格整體所占面積較大，比較浪費空間。像是一個按鈕，都需要使用較大空間才能呈現。

2.需要大面積的留白，但是對于 B 端設計來說無法做到，因此很難進行使用。

3.同時很多用戶剛開始覺得好看，但隨著時間的推移，出現審美疲勞，因此就不太喜歡。

現在還會使用新擬態(tài)風格的界面設計越來越少，大多數只會在官網設計的局部進行使用，這樣可以轉換視覺感受，給到用戶更好的視覺沖擊～

五、新階段-灰白風

時間來到 2022-2024 年左右，你會發(fā)現很多產品都開始在這個時間節(jié)點進行更新。

像我們熟知的 飛書、有贊、微盟、ONES、Coding，再到 Ant Design 、Salesforce，你會發(fā)現非常多的產品都在進行界面風格上的迭代。

對于這個風格，我們愿意叫它為 灰白風。

整體頁面是以 灰色和白色 進行的頁面劃分，在分布上灰色占據弱側信息，白色占據核心信息，進而形成對頁面內容的劃分。

聊到這里，可能有部分同學不太理解，這里我們以飛書管理后臺的迭代作為示例，給大家進行講解。

在 2018年，飛書管理后臺的第一個版本，采取的就是沉穩(wěn)側黑風，

在 2022 年，飛書的管理后臺開始改變?yōu)榛野罪L格

由于業(yè)務的疊加，2023 年時，在此基礎上增加了頂部導航的業(yè)務維度，最終形成了現在這樣的界面。

為什么這類型的風格會大受追捧，我覺得有以下幾個原因

1.減少信息層級，給用戶減負：之前沉穩(wěn)側黑風格，會發(fā)現頁面明顯進行大面積的分割，導致視覺感受出現較大差異?，F在只用灰色作為底，去區(qū)分主副信息這樣會更簡單的突出主要信息內容。

2.平臺型產品更容易嵌入：因為國內 B 端產品大多需要依附“釘釘、企微、飛書”三大平臺，因此使用灰白風能夠讓自己產品快速嵌入，不需要過多調整。如果你的產品是沉穩(wěn)側黑風，那結果想都不敢想…

3.更容易進行適配：針對多產品的業(yè)務，也能夠使用同一套業(yè)務完整呈現才會更加合理。比如飛書的灰白風，在飛書的其他很多產品里面也會存在

轉載：人人都是產品經理

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