一、組件介紹

商品卡片是一個廣泛存在于電商產品中的組件，不管是狹義上的商品，還是廣義上的所有可交易產品 (包括課程、服務、游戲等虛擬商品)，都需要商品卡片來承載它們的關鍵信息，以方便用戶快速了解商品的核心屬性。

常見的商品卡片有兩種形式，也是電商 App 普遍使用的兩個視圖，即：網格視圖和列表視圖，卡片在這兩種視圖中有著不同的布局，其信息包含能力也有所差異。

1. 兩種布局

如 Part.1 種所說，商品卡片通常有兩種布局形式，分別是網格布局和列表布局。

①網格布局

網格布局可以使用瀑布流，圖片的尺寸相對來說會更單一一些，因為需要嚴格控制卡片的錯落程度，不至于過于雜亂。

當然，并不是只能做成瀑布流，完全對齊的網格布局也很常見，只需要嚴格限制圖片和字段的高度，且為有高度差異的字段 (一般是標題) 留出空間即可。

②列表布局

列表布局通常也會保持所有圖片尺寸一致，但文本區域需不需要與圖片等高，得看具體項目中商品需要露出的信息多寡，像京東這種信息非常多的，文本區域就可以超出圖片的高度范圍。而如果信息量中等，那么等高是一種比較好的選擇。

但如果信息比較少，強行把某一字段與圖片底對齊的做法會導致組件內的間距比組件間的更大，從而影響親密性識別。

這時候可以在兩個商品之間加分割線。

2. 卡片樣式

主要有三種樣式，我稱之為有全包、半包和開放式。

全包：有明確的卡片背景，將圖片和文本全部包括在內部，比較不常見。

半包：圖片部分會撐滿卡片的邊界，而文本依然在卡片內部，比較常見。值得注意的是如果卡片需要做圓角，圖片朝內的兩個角不需要給圓角。

開放式：沒有明確的卡片背景，圖+文本自成卡片區域，在設計上通常會讓文本兩側較之圖片稍微向內縮進一些距離，在讓親密性表現得更舒適。可以兩側縮進，也可以只縮進右側。

3.卡片內容

不同類型的商品、不同需求的產品所需要表達的信息是不同的，但總結來說有以下這幾類：

1. 圖片：商品主圖
2. 主標題：活動標簽+商品名稱
3. 副標題：銷售排名/用戶評價數據等
4. 價格數據：折后價格/折前價格+銷售量
5. 優惠信息：退換政策/優惠券/滿減活動/分期信息
6. 商品規格表：商品核心規格信息
7. 店鋪信息：相關標簽+店鋪名稱
8. 功能按鈕：收藏/購物車

其中，圖片、標題和價格，這三個是最基礎的信息，幾乎每個商品卡片都必不或缺。其余的信息則并不一定每個都要包含在內，不同的 App 會根據自己的展示需求挑選其中幾類排布在卡片內。

信息展示的順序、和權重對比，都會根據實際情況略作調整。例如一些國外的電商 App，會把價格的權重做得比標題更大。而對于網格布局和列表布局，所展示的信息盡可能保持一致。但因為網格視圖不適合展示的過長，所以如果信息真的非常多，那么網格視圖可以適當省略。例如小米有品是一個典型的例子，網格視圖相比列表視圖只少了商品規格表，因為這個字段實在不適合放在網格視圖展示。

4. 不同的使用場景

之所以會把使用場景放在這里，是因為商品卡片的使用場景會影響它所展示的信息類型。舉個例子，淘寶首頁推薦內的商品卡片內所包含的信息，就比搜索出來的完整商品卡片少了一些。

這是因為推薦中的商品信息務求直擊要害，其導購需求遠遠強于展示需求，同時也考慮到推薦頁應同屏展示更多商品，所以會把其他可能會影響用戶獲取核心信息，且可能造成卡片過長的字段全部隱去了。

同理，商品卡片在購物車中的信息也不一樣，考慮到存在于購物車中的商品都是用戶已經了解過大部份信息的商品，所以設計時要抓住用戶在這種場景下最關注的內容——價格和規格，所以購物車中的卡片會多出一些價格變動、規格重選、數量修改等信息。

總之，商品的使用場景很大程度上會影響展示信息的選擇，最核心的要點是一定要考慮用戶在不用的場景下，最核心的信息訴求是什么，不同 App 對此可能有不同的做法，我在這里也無法一概而論。

5. 不一樣的商品卡片

①Asos/Massimo Dutti

國外的電商 App，尤其是品牌自己的 App，總是會做得非常極簡，一個標題一個價格一張圖片，幾乎做到了商品卡片最簡潔的狀態，這是品牌氣質決定的，也是產品定位決定的。所以國內走出海路線的 App 大多也會是這個風格，比如 Shein。

②馬蜂窩/飛豬

舉這兩個例子并不是因為兩者的組件設計得有多精妙，而是因為它們有著另一種不同的商品，以及所呈現出來的不同的組件——酒店。

我在這里想要說明的是，不同的商品類型可能也會有其特有的字段類型，尤其是服務型商品，不同的服務所呈現出來的組件會有很大不同。

三、樣式拓展

這里收集了一些商品卡片的線上案例，也可以作為設計時的參考：

轉載自優設網

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

搭建設計規范的意義

產品側：?個產品不同分支多個團隊完成的時候，可以保證產品團隊使用同一份設計規范快速完成產品原型設計。保證可復用模塊的交互體驗的?致性。

設計側：通過設計規范去解決大部分需求，極大提高效率解放雙手，讓設計師能去做一些更發揮創意和想象力的設計。

開發側：形成開發資產，可以提升研發效率，降低維護成本。開發工程師無需再重復開發同?個組件，只需要去組件庫里調用即可，配合業務邏輯，高效完成界面開發，做到開箱即用。

測試側：標準化的設計規范，是測試人員最喜歡看到的。例如，設計規范規定彈窗 footer 區按鈕組居右，那么測試人員只要測到不居右，就可以給產品提優化建議了。

二、原子設計理論

設計規范中具像化的環節是設計組件化，最早可以追溯到工業革命時期，福特創造的流水線生產方式。福特將汽車分解成零部件，再把零部件模塊化組裝，這?創舉極大的提高了生產效率。

根據資料顯示，T型車是世界第一款大量使用通用零部件，并進行大規模流水線裝配的汽車。這種方式極大地提高了T型車生產效率，降低了生產成本。1914年，福特已經可以做到93分鐘生產一輛汽車，而同期其他所有汽車廠商的生產能力總和也不及于此。到了1920年代，T型車的價格甚至降到300美元一輛（問世之初T型車的售價僅需850美元，而同期的競爭對手則通常為2000-3000美元一輛）。

原子設計理論最初來源于化學領域，這一點從名字可以聽出來。在化學中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。

2013年前端工程師BradForst將此理論運用在界面設計中，形成一套設計系統，包含5個層面：原子、分子、組織、模板、頁面。

當公司的業務產品逐漸擴大時，我們就需要制定一套完整的設計系統，提升設計和開發的協作效率，統一所有設計師的輸出物。

總之，將設計拆分成一些基本元素，例如一個按鈕、一個彈窗，再根據業務需求、產品邏輯重新組裝，形成最終的產品，這就是原子設計理論（組件化設計），區別于整體設計制造的一種新的工作流程。

1. 設計系統搭建—原子

原子是物質的基礎組成部分，是構成設計系統的最基礎元素。

在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線、間距、圓角、陰影等。

2. 色彩體系

中后臺產品的色彩體系主要分為3類：品牌色、功能色、中性色。

色彩體系

1. 品牌色：大型公司往往都會有專屬色號的品牌色，比如阿里橙色、美團黃色和騰訊藍色，以體現產品特性、傳播理念。在界面中主要體現在關鍵行動點、選中狀態、重要信息和插畫元素等。
2. 功能色：旨在表示某種狀態提示，這類顏色往往是深入人心的，比如綠色代表成功，紅色代表失敗等等。
3. 中性色：還有一種是不需要傳遞顏色代表的特殊含義的，稱為中性色，即黑白灰。B 端網站體現理性和效率特性，往往會使中性色占據九成以上，應用在背景、邊框、文本和分割線。

3. 文字體系

B端產品的文字系統設計目標：增強閱讀體驗、提升信息獲取效率，字體是體系化界面設計中最基本的構成之一。

字體的大小、字重、色彩區分體現界面信息的層級關系。

文字體系

1. 整體思路：在同一個系統的UI設計中先建立體系化的設計思路，對主、次、輔助、標題、展示等類別的字體做統一的規劃，再落地到具體場景中進行微調，最終確定建立體系化的設計思路，有助于強化字體落地的一致性。
2. 少即是多：在視覺展現上能夠用盡量少的樣式去實現設計目的。避免毫無意義的使用大量字階、顏色、字重強調視覺重點或對比關系，提高字體應用的性價比，減少不必要的樣式浪費。
3. 拉開對比：在需要拉開差距的時候可以嘗試在字階表中跳躍地選擇字體大小，會令字階之間產生一種微妙的韻律感。

4. 陰影、圓角、線條

陰影：在B端界面中，有些特殊的元素會使用到陰影，從陰影中我們可以看出物體距離平面的高度，距離平面越高的物體陰影越大；

圓角：從直角到圓角給人帶來從嚴謹冰冷到柔和親切的心理感受，在B端界面中，常用2-8px圓角；

線條：分割模塊及輔助定位。

5. 后臺設計系統搭建—分子

在界面中，分子是按照規律組合起來的元素，如：按鈕、搜索框、選擇器等。

以按鈕為例，文字、色塊、圖標和間距這些抽象的原子產生關聯組合成分子：圖標、文字傳達含義；顏色、圓角傳遞特性；間距、尺寸定義規范。

6. 后臺設計系統搭建—組織

分子+原子組合成更復雜和可拓展的組織（區塊組件），如搜索區、卡片列表區、表單區、數據統計區等。

7. 后臺設計系統搭建—模板

由原子+分子+組織構成的更復雜更專注頁面底層架構，并非具體頁面。

8. 后臺設計系統搭建—頁面

帶業務邏輯的場景案例，如標注場景、權限管理、詳情設置等，將頁面模板填充真實的文字、圖片后形成頁面，即帶交互邏輯的高保真原型圖，真實內容使設計系統有了“生命”。

三、Design Token

雖然通過設計規范可以對產研流程提效，但在開發還原中還是會經常遇到一些棘手的問題。

1. 開發還原準確度難以保證，走查幾輪還有有細節問題沒有修復；
2. 領導要求開發暗色模式，或者客戶要求換一套主題色，找到替換的工作量巨大；
3. 設計一處變更，涉及多個頁面模塊，維護工作量大。

為了解決和優化上述的問題，DesignToken應運而生。它可以解決產品設計和開發過程中的細節、變更和風格一致性的問題，有效提高產研團隊設計質量和協作效率。

1. Design Token 介紹

“Token”原本的意思是“令牌，指令”，與Design連在一起指“設計變量”。在工程邏輯中用于用戶身份與服務器端進行驗證，而在設計體系中，DesignToken則可以簡單理解為封裝的視覺樣式參數。它通過規定樣式參數，并通過一套符合設計師、工程師理解的統一的命名規則，為這些樣式參數的定義名稱。

2. Design Token 優勢

① 設計語義更易理解

幫助設計師和開發建立統一語言，設計方案更加一致。

從下到上的Design Token 命名思路

②主題皮膚一鍵替換

主題皮膚的替換可以用在兩個維度，一是淺色模式和暗色模式的替換，二是不同品牌色之間的替換。我們可以將不同主題的同一個場景下的顏色使用同一個Token命名，達到一鍵換膚的效果適配不同客戶方案。

③設計變更高效維護

替代傳統工作流一鍵替換效果。例如修改二級文本的顏色，傳統工作流需要先修改設計規范，修改設計稿，然后輸出給開發，開發逐一更新代碼，完成后提交給設計師進行走查驗收。而當使用Token之后，只需要更新Token參數，就可以直接導出JSON給開發，一鍵自動更新。提高效率不止一點點。

④設計效果精準還原

代碼編輯器自動化提示顏色選擇，如不正確則產生報錯。

使用Token開發和傳統開發的對比

總結一下使用 Token 開發的優勢：

1. 設計語言 更易理解
2. 主題皮膚 一鍵替換
3. 設計變更 高效維護
4. 設計成果 精準還原

3. Design Token 應用流程

第一步：提煉 token 元素；第二步：定義命名規則；第三步：整理 Design Token 資產表；第四步：開發與應用。

Design Token 應用實踐

接下來具體說說如何為 Design Token 命名，命名方式目前并沒有絕對統一的要求，不過有一定的邏輯規則，可以由設計師找前端開發一起商量出一個都能通俗易懂便于理解的命名規則，舉個例子：

1. Token 名稱由大到小排序，中間用“-”分隔；
2. Token 前綴可自定義添加公司簡稱，如“--el-xx” 、“--ant-xx”、“--td-xx”。

命名規則示意

為了更好的統一規范，應用 Token，建議成熟的互聯網公司設計團隊搭建自己的低代碼平臺。一鍵更換主題，盡在指尖。

轉載自優設網

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

做UI/UX設計的同學幾乎每天都要和切換類組件打交道，但很多人總會在開關、復選框、單選按鈕之間踩坑——要么用錯場景，要么給用戶造成認知混淆，甚至引發操作失誤。

蘋果HIG (人機界面指南) 里明確把開關、復選框、單選按鈕這三類，都歸為「切換開關」組件。它們的核心共性是讓用戶在對立的狀態間做選擇，通過差異化的視覺形態清晰區分選中/未選中的狀態。

一、開關（Switch）

開關是用來瞬間切換單個功能/設置的開啟/關閉狀態的組件，一次只能控制一個設置的開關，工作邏輯和我們家里的物理電燈開關完全一致，能讓用戶一眼看清當前的生效狀態。

1. 開關核心結構

開關的結構非常簡潔，核心分為3個部分：

1. 軌道（背景）：開關的背景區域，也是手柄滑動的路徑，通常會用顏色差異區分開/關狀態，直觀告訴用戶當前是否激活
2. 手柄：用戶可以點擊、拖動的可交互按鈕部分，手柄上可添加對勾、叉號、圓圈等輔助圖標
3. 圖標（可選）：用來強化狀態認知的輔助元素

2. 開關使用規范

如果要添加輔助圖標，必須選表意清晰、強二元對立的樣式，千萬別用含義模糊、沒有明確正反屬性的圖標（比如月亮、編輯圖標），用戶沒法一眼對應開/關狀態。

開關的核心交互邏輯是操作后立即生效，不需要用戶額外點擊確認按鈕，切換狀態時，可配合手柄尺寸的微動效強化操作反饋。

開關必須和描述控制功能的標簽搭配使用，標簽要簡潔直白，不要把文字放到開關內部。這樣會壓縮視覺空間，還會破壞組件通用性，增加用戶識別成本。

二、復選框（Checkbox）

復選框的核心定位，是支持用戶對一組關聯選項，做單項或多項的選中/取消操作。

記住一個核心原則：當用戶可以在一個列表里選擇多個選項時就用復選框，不用開關或單選按鈕。單選按鈕的語義是「請選其中一個」，而復選框的語義是「可以選多個，也可以全不選」，二者的底層邏輯不同。

1. 復選框核心結構

復選框的結構清晰，核心就是選擇容器+選中狀態圖標，通過勾選/未勾選的視覺差異，直觀傳遞用戶的選擇結果。

2. 復選框使用規范

如果選項列表較長，建議添加「全選父復選框」提升操作效率，它的交互邏輯有明確的行業規范：

1. 父復選框勾選，所有子復選框自動全部勾選；
2. 父復選框取消勾選，所有子復選框自動全部取消勾選；
3. 子復選框僅部分被勾選時，父復選框需顯示「半選（不確定）」狀態，點擊半選的父復選框，會自動全選所有子項。

   

處理一組有關聯的多選項時優先用復選框，而非一堆獨立的開關。

一方面，復選框能天然傳遞「選項之間互相關聯」的語義，另一方面，它比開關占用的視覺空間更小，頁面會更整潔有序。

三、單選按鈕（Radio Button）

單選按鈕的核心是互斥單選。在一組選項里，用戶有且只能選擇一個，選中新選項后之前選中的選項會自動取消。

它的語義非常明確：這一組選項里，「你必須、只能選一個」和復選框的「可多選、可全不選」形成了清晰的邊界。

1. 單選按鈕核心結構

單選按鈕的結構核心是選中/未選中的狀態圖標+對應的選項標簽。行業通用的視覺規范是：用實心圓點表示選中，空心圓圈表示未選中，保證用戶的視覺識別度。

2. 單選按鈕使用規范

不能打破互斥單選的核心邏輯，更不能讓單選按鈕出現布局重疊，否則會完全顛覆用戶的固有認知，造成操作混亂。

如果選項數量較多、屏幕空間有限，可用下拉菜單替代單選按鈕。

但要注意：下拉菜單需要用戶多一步點擊展開的操作，會增加交互成本，也沒法讓用戶一眼看到全量選項，降低認知效率。因此選項較少時，優先用單選按鈕。

單選按鈕優先垂直排列，不建議水平排列。

垂直排列時每個選項的圖標和標簽對應關系更清晰，用戶不會看錯；水平排列不僅容易讓頁面擁擠、可讀性下降，還會破壞布局一致性，在響應式適配中也更容易出問題。

四、一張表搞懂：三者到底怎么選？

前面講了每個組件的細節，這里給大家整理了最簡使用規則，設計時直接對照即可。

開關、復選框、單選按鈕，都是設計里最基礎、最常用的組件。設計時要先看場景、定語義，再選對應的組件，而不是憑感覺、看顏值隨便亂用。

當然，我們也會看到一些特殊的設計案例，比如iOS在深色模式的選擇里，用了圓形復選框，和我們今天說的常規用法不一樣。這種情況，要么是為了整個系統的設計語言統一，要么是有特殊的產品考量，不建議盲目照搬。對于設計師來說，先搞懂這些基礎組件的用法、可用性底層邏輯，才是做好設計的根基！

轉載自 優設網

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

一般用戶在登錄后臺管理系統后，后臺首頁就成為了用戶與產品交互的第一個頁面，這某種程度上也凸顯了這一頁面的重要性。那么，后臺管理系統的首頁設計可以遵循哪些策略？本文作者結合實戰項目發表了他的想法，一起來看看吧。

很久沒有更新文章了，一方面文章選題困難，公眾號的閱讀量真是有點慘不忍睹，寫作的動力有所下降。另一方面工作確實比較忙，時間精力有限，最近參加了多個工作項目一直在加班。

今天總結下項目過程中，關于后臺管理系統首頁設計引發的一些思考。

主要的內容包括：

1. 后臺首頁的作用；
2. 首頁的設計方向；
3. 首頁內容的思考。

一、后臺首頁的作用

后臺首頁是用戶登錄后，與產品交互的第一個頁面，信息內容非常重要，作用也非常明顯。一方面可以幫助用戶宏觀了解系統的整體運行狀態，洞察業務問題。另一方面可以幫助用戶快速處理業務問題，不需要到專門的功能頁面操作，縮短用戶的操作路徑。

后臺首頁需要依托整個產品的功能體系，根據用戶角色的職能、權限、業務范圍，提取關鍵的用戶關心的業務功能點搭建頁面內容。所以一般是在業務功能完成之后再進行首頁設計。這就要求產品經理能夠從全局視角理解用戶和場景，才能做出有效的設計方案。

另外首頁不屬于具體的業務領域，所以一般不會安排固定的產品經理，而是由產品經理兼任。如果產品設計沒有整體規劃，首頁就容易被忽略，成為「三不管」地帶。

二、首頁設計的方向

根據以往的設計經驗，我總結了以下四點：

1. 內容與用戶角色

首頁設計要求產品經理對用戶角色的分類、業務職能有比較深入的了解，否則產品設計就可能變成內容堆砌。

通常后臺系統需要面向管理層和執行層兩類用戶，他們對于信息需求存在比較大的差異。管理層更關注宏觀層面的統計信息，方便了解業務動態，從而制定工作決策等，所以各類可視化圖表就成為首頁重要的內容組成。

對于執行層用戶，主要是完成具體的工作任務，所以更加關注明細數據。除此之外，適當地增加一些統計數據，可以更全面了解系統狀態，也便于對上匯報，減少人工統計的工作量。

B 端產品了解用戶和場景并不容易，如果只靠“猜測”做設計，就會發現首頁設計有很多種可能，怎么做似乎都對，怎么做似乎都不對。而且參與的人越多，想法也會越多。

所以在項目中，需要盡可能地收集用戶場景信息加以分析完成設計，即使存在一部分“猜測”信息，也需要能夠自圓其說，才能更好的推進產品設計落地。

2. 場景/主題化

對于小的業務系統，單獨的一個頁面就可以涵蓋所有的業務信息，內容也會比較清晰簡單。

對于比較大的業務系統，首頁包含的消息會比較多，例如阿里云、騰訊云等產品，一個頁面內容無法承載所有的信息。因此需要根據場景/主題拆分首頁內容，便于用戶有目標地快速查看信息。比如阿里云采用的是資源管理、安全管理、成本管理等主題去劃分首頁內容。

3. 實用性

1）串聯內容，縮短路徑

某些場景下，首頁要滿足用戶快速處理業務工作的需求，例如待辦事項，審批操作等，通過明細列表的展示，結合抽屜等詳情信息展示，用戶可以在首頁直接處理工作任務，無需進入到功能頁面。

「常用功能」也是首頁的常見組件，類似操作系統桌面的快捷方式一樣。可以將一些二級甚至三級功能作為常用功能放在首頁中，用戶不需要通過菜單逐級點擊，即可進入功能頁面，對縮短用戶操作路徑也有很大幫助。

2）高頻常用功能信息聚合

首頁的價值在于幫助用戶簡單、高效的認知系統，是高頻常用功能的信息聚合。因此需要盡量減少花哨、不實用、看似高大上的功能，或者改變展示形式，保證重要信息的優先展示。

有些 B 端產品的門檻比較高，為了降低認知成本，于是有人希望在首頁中增加系統介紹、系統架構圖的形式來展示產品的功能流程，在產品演示是可以更好的讓用戶理解產品功能。

這些本來應該是在 PPT 中展示的信息，卻要放到首頁中展示。看似酷炫的一張圖，實際上在應用階段對用戶的工作沒有任何幫助。因為用戶根本不關心你的系統架構是什么，需要的是產品幫助他解決工作中的問題，帶來的效率提升。

即使用戶需要了解這些信息，也不是每天打開首頁就要一眼看到，可以采用其他的呈現方式。比如用戶引導，或者與業務信息關聯，既可以呈現出業務流程，也可以展示業務信息，又或者首頁增加入口、引導在幫助中心查看。

4. 定制化

B 端產品業務功能是面向用戶角色的，同一角色的用戶具有相同的工作任務。但是首頁則有所不同，同一類角色的不同用戶，關注點也不完全相同。尤其是業務系統內容較多時，首頁內容可定制就成為了滿足不同用戶信息需求的方式。

當然系統的定制化并不是讓用戶從零定制，而是在系統初始內容基礎上，重新組織頁面內容、調整頁面布局等。否則定制化反而會帶給用戶更差的體驗。

三、首頁內容應該追求簡潔還是豐富呢？

在項目設計中，就碰到了這個問題。有同事認為首頁應該簡單點，避免過多的信息量增加用戶的學習成本。

當然這個問題需要根據產品定位具體分析。不過總的來說，我個人認為首頁應該豐富一些。

首頁是信息聚合頁面，天然就會有較多的信息內容，用戶需要通過信息傳遞了解系統的狀態和變化，人為的過濾掉內容后會影響信息的全面性。

其次用戶有信息選擇權，通過一定時間的摸索，可以形成自己的信息查看軌跡，或者個性化定制首頁內容過濾掉工作中冗余的信息。

而且B 端產品經過多年的發展，單從布局和表現形式上看，首頁已經有比較成熟的設計模式了，大多數企業用戶也形成了統一的認知和習慣。卡片風格是首頁最常見的展現形式，卡片可以讓頁面分割更加清晰，方便信息讀取，有助于弱化信息量帶來的復雜感。即使不采用卡片分割， 可以通過間距、標題等引導用戶視線，劃分頁面內容。

四、總結

簡單總結下：

1. 首頁考慮的設計因素比較多，每種用戶角色可能會有不同的需求，需要針對性的設計，而業務功能的用戶角色更加明確；
2. 首頁設計需要對系統有全面了解，業務功能則比較聚焦；
3. 首頁是系統第一個頁面，會受到更高的關注度，往往設計分歧也會比較大；產品設計需要做深入的分析，故事性要求也會更高；否則被噴和被 Pass的可能性會非常大；
4. 首頁設計的內容需要注重實用性，避免各種信息的無效堆砌。

轉載：人人都是產品經理

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

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

• 3D 礦山地形可視化，真實還原礦區道路、裝載區、限速區等場景，讓調度人員直觀掌握全局；
• 用綠、黃、紅三色區分車輛健康狀態、區域風險等級，用綠色雷達圈標注車輛感知范圍，視覺預警清晰直觀；
• 全端視覺風格高度統一，從全局調度、單車監控到地圖編輯，保持一致的色彩規范、字體圖標與布局邏輯，強化品牌專業感。

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

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

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

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

四、蘭亭妙微實踐延伸

五、設計總結

你是否想系統掌握移動 UI 設計，卻苦于知識零散、沒有成體系的學習路徑？作為專注 UI 與體驗設計的蘭亭秒微，我們結合站酷經典書籍《術與道：移動應用 UI 設計必修課》核心內容，為你整理出從基礎到進階、從規范到實戰的完整移動 UI 設計體系，幫你打通設計邏輯，快速成長為專業移動 UI 設計師。

設計核心定位

視覺體系設計

1. 以星云、星座為核心視覺靈感（nebula/constellation 為設計核心標簽），打造沉浸式視覺氛圍，深色調基底搭配細膩的動態光影效果，契合林肯「靜謐之旅」理念，也讓科技感與高級感相融，與豪華車型內飾風格高度統一；
2. 采用極簡現代的界面布局，弱化冗余視覺元素，以清晰的信息層級、簡潔的視覺符號構建界面，實現「視覺減負」，讓駕駛過程中信息獲取更高效，這與我們在 HMI 設計中堅持的「高效視覺表達」原則高度契合。

交互功能設計

1. 適配多聯屏硬件布局，打造分屏協同、全屏切換的操作邏輯，支持主駕控車、副駕娛樂 / 導航的獨立操作與信息一鍵流轉，最大化發揮多屏硬件優勢，這為我們在多屏車載交互場景的設計中，提供了實操性極強的參考方向；
2. 遵循車載交互的安全性與便捷性原則，簡化操作路徑，摒棄復雜文字菜單，采用卡片式交互布局，支持常用功能自定義與快捷手勢操作，減少駕駛中的操作干擾，這也是北京蘭亭妙微在 HMI 設計中始終堅守的核心原則；
3. 打造場景化交互模式，結合通勤、休閑、運動等不同駕乘場景設計對應界面主題與功能組合，讓交互更具針對性，為我們的場景化車載 HMI 設計帶來新的靈感啟發。

品牌基因融合

設計落地工具

蘭亭妙微學習感悟

視覺引導是 UI 設計的核心技法之一，涵蓋色彩引導、動效引導、操作引導、視覺心理等多個維度，而真正優秀的設計，從來都是設計思路先行于設計技法。蘭亭妙微設計深耕 UI/UX 設計領域，始終秉持「形式追隨功能」的核心設計理念，在實際項目中通過科學的設計思路落地視覺引導技法。本次我們將以一個汽車問答測評 H5 的實戰案例，拆解視覺引導的設計邏輯與落地技巧，分享從問題分析到方案優化的全流程設計思路。

在日常的數字產品設計中，彈窗雖小，卻往往承擔著轉化用戶、傳遞信息、引導行為的關鍵角色。一個恰到好處的彈窗，能讓用戶體驗如絲般順滑；而一個設計粗糙的彈窗，則可能成為用戶流失的導火索。

基于上百個真實的實戰案例深度拆解，蘭亭妙微ui設計公司總結出 12 種超實用的彈窗設計切入點。每一種都附有真實案例與核心優點，既好上手又具備延展性。無論你是想介紹產品功能、推送運營活動，還是引導用戶互動，都能在這里找到適配方案，助你快速擺脫靈感瓶頸，讓小小彈窗既好看又好用。

01 卡片疊加式設計

02 相冊式產品卡片設計

03 中間圖標 + 方形卡片設計

04 IP 形象 + 方形卡片設計

05 擬人化表情圖標 + 異形卡片設計

06 圖標 + 空氣彈框設計

07 簡約插畫組合 + 方形彈框設計

08 信封式彈框設計

09 IP 配標題文字 + 空氣彈框設計

10 無定式彈框設計

11 底部彈出式插畫彈窗

12 底部彈出式空氣插畫彈窗

1. 胸腔影像診療頁（Thoracic Imaging）：聚焦患者胸腔部位的影像診療場景，是提升醫療影像診療效率的實用設計。
    
   • 3D 影像展示區：清晰呈現胸腔骨骼（如 Columna vertebralis thoracica）、膈肌等解剖結構，還支持點擊 “Run 3D environment” 開啟 3D 交互環境，讓醫護人員更直觀地觀察病灶，這正是醫療 3D 影像交互系統的優勢體現。
   • 患者信息卡片：同步展示患者 Magnus Stephenson 的基礎信息與 “Medical History” 入口，方便醫護人員快速調取病史，助力精準診療，是優化患者診療信息查詢流程的關鍵設計。
   • 健康指標模塊：實時更新血壓（128/82）、心率（74 bpm）等核心體征數據，讓醫護人員隨時掌握患者狀態，為及時調整診療方案提供依據，這也是醫療實時體征監控系統的重要功能。
    
2. 診療日程與歷史管理區：高效整合預約與診療記錄，是醫療門診日程管理系統的典型設計。
    
   • Appointment Schedule：以日歷形式呈現 2026 年 1 月的預約安排，標注不同類型的診療項目，還能快速查看下一場（1 月 19 日）肺科醫生的會診信息，幫助醫護人員合理規劃診療時間。
   • Appointment History：匯總已完成 / 待安排的診療記錄，清晰展示醫護人員、科室及診療類型，便于追溯患者診療流程，提升醫療診療記錄管理效率。

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

   關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發.

   我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

    

   

4.