一、組件介紹

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

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

1. 兩種布局

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

①網(wǎng)格布局

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

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

②列表布局

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

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

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

2. 卡片樣式

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

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

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

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

3.卡片內(nèi)容

不同類型的商品、不同需求的產(chǎn)品所需要表達(dá)的信息是不同的，但總結(jié)來說有以下這幾類：

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

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

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

4. 不同的使用場景

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

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

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

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

5. 不一樣的商品卡片

①Asos/Massimo Dutti

國外的電商 App，尤其是品牌自己的 App，總是會做得非常極簡，一個標(biāo)題一個價格一張圖片，幾乎做到了商品卡片最簡潔的狀態(tài)，這是品牌氣質(zhì)決定的，也是產(chǎn)品定位決定的。所以國內(nèi)走出海路線的 App 大多也會是這個風(fēng)格，比如 Shein。

②馬蜂窩/飛豬

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

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

三、樣式拓展

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

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

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

搭建設(shè)計規(guī)范的意義

產(chǎn)品側(cè)：?個產(chǎn)品不同分支多個團(tuán)隊完成的時候，可以保證產(chǎn)品團(tuán)隊使用同一份設(shè)計規(guī)范快速完成產(chǎn)品原型設(shè)計。保證可復(fù)用模塊的交互體驗的?致性。

設(shè)計側(cè)：通過設(shè)計規(guī)范去解決大部分需求，極大提高效率解放雙手，讓設(shè)計師能去做一些更發(fā)揮創(chuàng)意和想象力的設(shè)計。

開發(fā)側(cè)：形成開發(fā)資產(chǎn)，可以提升研發(fā)效率，降低維護(hù)成本。開發(fā)工程師無需再重復(fù)開發(fā)同?個組件，只需要去組件庫里調(diào)用即可，配合業(yè)務(wù)邏輯，高效完成界面開發(fā)，做到開箱即用。

測試側(cè)：標(biāo)準(zhǔn)化的設(shè)計規(guī)范，是測試人員最喜歡看到的。例如，設(shè)計規(guī)范規(guī)定彈窗 footer 區(qū)按鈕組居右，那么測試人員只要測到不居右，就可以給產(chǎn)品提優(yōu)化建議了。

二、原子設(shè)計理論

設(shè)計規(guī)范中具像化的環(huán)節(jié)是設(shè)計組件化，最早可以追溯到工業(yè)革命時期，福特創(chuàng)造的流水線生產(chǎn)方式。福特將汽車分解成零部件，再把零部件模塊化組裝，這?創(chuàng)舉極大的提高了生產(chǎn)效率。

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

原子設(shè)計理論最初來源于化學(xué)領(lǐng)域，這一點從名字可以聽出來。在化學(xué)中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機(jī)物，最終形成了宇宙萬物。

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

當(dāng)公司的業(yè)務(wù)產(chǎn)品逐漸擴(kuò)大時，我們就需要制定一套完整的設(shè)計系統(tǒng)，提升設(shè)計和開發(fā)的協(xié)作效率，統(tǒng)一所有設(shè)計師的輸出物。

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

1. 設(shè)計系統(tǒng)搭建—原子

原子是物質(zhì)的基礎(chǔ)組成部分，是構(gòu)成設(shè)計系統(tǒng)的最基礎(chǔ)元素。

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

2. 色彩體系

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

色彩體系

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

3. 文字體系

B端產(chǎn)品的文字系統(tǒng)設(shè)計目標(biāo)：增強(qiáng)閱讀體驗、提升信息獲取效率，字體是體系化界面設(shè)計中最基本的構(gòu)成之一。

字體的大小、字重、色彩區(qū)分體現(xiàn)界面信息的層級關(guān)系。

文字體系

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

4. 陰影、圓角、線條

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

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

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

5. 后臺設(shè)計系統(tǒng)搭建—分子

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

以按鈕為例，文字、色塊、圖標(biāo)和間距這些抽象的原子產(chǎn)生關(guān)聯(lián)組合成分子：圖標(biāo)、文字傳達(dá)含義；顏色、圓角傳遞特性；間距、尺寸定義規(guī)范。

6. 后臺設(shè)計系統(tǒng)搭建—組織

分子+原子組合成更復(fù)雜和可拓展的組織（區(qū)塊組件），如搜索區(qū)、卡片列表區(qū)、表單區(qū)、數(shù)據(jù)統(tǒng)計區(qū)等。

7. 后臺設(shè)計系統(tǒng)搭建—模板

由原子+分子+組織構(gòu)成的更復(fù)雜更專注頁面底層架構(gòu)，并非具體頁面。

8. 后臺設(shè)計系統(tǒng)搭建—頁面

帶業(yè)務(wù)邏輯的場景案例，如標(biāo)注場景、權(quán)限管理、詳情設(shè)置等，將頁面模板填充真實的文字、圖片后形成頁面，即帶交互邏輯的高保真原型圖，真實內(nèi)容使設(shè)計系統(tǒng)有了“生命”。

三、Design Token

雖然通過設(shè)計規(guī)范可以對產(chǎn)研流程提效，但在開發(fā)還原中還是會經(jīng)常遇到一些棘手的問題。

1. 開發(fā)還原準(zhǔn)確度難以保證，走查幾輪還有有細(xì)節(jié)問題沒有修復(fù)；
2. 領(lǐng)導(dǎo)要求開發(fā)暗色模式，或者客戶要求換一套主題色，找到替換的工作量巨大；
3. 設(shè)計一處變更，涉及多個頁面模塊，維護(hù)工作量大。

為了解決和優(yōu)化上述的問題，DesignToken應(yīng)運而生。它可以解決產(chǎn)品設(shè)計和開發(fā)過程中的細(xì)節(jié)、變更和風(fēng)格一致性的問題，有效提高產(chǎn)研團(tuán)隊設(shè)計質(zhì)量和協(xié)作效率。

1. Design Token 介紹

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

2. Design Token 優(yōu)勢

① 設(shè)計語義更易理解

幫助設(shè)計師和開發(fā)建立統(tǒng)一語言，設(shè)計方案更加一致。

從下到上的Design Token 命名思路

②主題皮膚一鍵替換

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

③設(shè)計變更高效維護(hù)

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

④設(shè)計效果精準(zhǔn)還原

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

使用Token開發(fā)和傳統(tǒng)開發(fā)的對比

總結(jié)一下使用 Token 開發(fā)的優(yōu)勢：

1. 設(shè)計語言 更易理解
2. 主題皮膚 一鍵替換
3. 設(shè)計變更 高效維護(hù)
4. 設(shè)計成果 精準(zhǔn)還原

3. Design Token 應(yīng)用流程

第一步：提煉 token 元素；第二步：定義命名規(guī)則；第三步：整理 Design Token 資產(chǎn)表；第四步：開發(fā)與應(yīng)用。

Design Token 應(yīng)用實踐

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

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

命名規(guī)則示意

為了更好的統(tǒng)一規(guī)范，應(yīng)用 Token，建議成熟的互聯(lián)網(wǎng)公司設(shè)計團(tuán)隊搭建自己的低代碼平臺。一鍵更換主題，盡在指尖。

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

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

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

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

一、開關(guān)（Switch）

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

1. 開關(guān)核心結(jié)構(gòu)

開關(guān)的結(jié)構(gòu)非常簡潔，核心分為3個部分：

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

2. 開關(guān)使用規(guī)范

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

開關(guān)的核心交互邏輯是操作后立即生效，不需要用戶額外點擊確認(rèn)按鈕，切換狀態(tài)時，可配合手柄尺寸的微動效強(qiáng)化操作反饋。

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

二、復(fù)選框（Checkbox）

復(fù)選框的核心定位，是支持用戶對一組關(guān)聯(lián)選項，做單項或多項的選中/取消操作。

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

1. 復(fù)選框核心結(jié)構(gòu)

復(fù)選框的結(jié)構(gòu)清晰，核心就是選擇容器+選中狀態(tài)圖標(biāo)，通過勾選/未勾選的視覺差異，直觀傳遞用戶的選擇結(jié)果。

2. 復(fù)選框使用規(guī)范

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

1. 父復(fù)選框勾選，所有子復(fù)選框自動全部勾選；
2. 父復(fù)選框取消勾選，所有子復(fù)選框自動全部取消勾選；
3. 子復(fù)選框僅部分被勾選時，父復(fù)選框需顯示「半選（不確定）」?fàn)顟B(tài)，點擊半選的父復(fù)選框，會自動全選所有子項。

   

處理一組有關(guān)聯(lián)的多選項時優(yōu)先用復(fù)選框，而非一堆獨立的開關(guān)。

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

三、單選按鈕（Radio Button）

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

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

1. 單選按鈕核心結(jié)構(gòu)

單選按鈕的結(jié)構(gòu)核心是選中/未選中的狀態(tài)圖標(biāo)+對應(yīng)的選項標(biāo)簽。行業(yè)通用的視覺規(guī)范是：用實心圓點表示選中，空心圓圈表示未選中，保證用戶的視覺識別度。

2. 單選按鈕使用規(guī)范

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

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

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

單選按鈕優(yōu)先垂直排列，不建議水平排列。

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

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

前面講了每個組件的細(xì)節(jié)，這里給大家整理了最簡使用規(guī)則，設(shè)計時直接對照即可。

開關(guān)、復(fù)選框、單選按鈕，都是設(shè)計里最基礎(chǔ)、最常用的組件。設(shè)計時要先看場景、定語義，再選對應(yīng)的組件，而不是憑感覺、看顏值隨便亂用。

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

轉(zhuǎn)載自 優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍(lán)藍(lán)設(shè)計）m.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)后，后臺首頁就成為了用戶與產(chǎn)品交互的第一個頁面，這某種程度上也凸顯了這一頁面的重要性。那么，后臺管理系統(tǒng)的首頁設(shè)計可以遵循哪些策略？本文作者結(jié)合實戰(zhàn)項目發(fā)表了他的想法，一起來看看吧。

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

今天總結(jié)下項目過程中，關(guān)于后臺管理系統(tǒng)首頁設(shè)計引發(fā)的一些思考。

主要的內(nèi)容包括：

1. 后臺首頁的作用；
2. 首頁的設(shè)計方向；
3. 首頁內(nèi)容的思考。

一、后臺首頁的作用

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

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

另外首頁不屬于具體的業(yè)務(wù)領(lǐng)域，所以一般不會安排固定的產(chǎn)品經(jīng)理，而是由產(chǎn)品經(jīng)理兼任。如果產(chǎn)品設(shè)計沒有整體規(guī)劃，首頁就容易被忽略，成為「三不管」地帶。

二、首頁設(shè)計的方向

根據(jù)以往的設(shè)計經(jīng)驗，我總結(jié)了以下四點：

1. 內(nèi)容與用戶角色

首頁設(shè)計要求產(chǎn)品經(jīng)理對用戶角色的分類、業(yè)務(wù)職能有比較深入的了解，否則產(chǎn)品設(shè)計就可能變成內(nèi)容堆砌。

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

對于執(zhí)行層用戶，主要是完成具體的工作任務(wù)，所以更加關(guān)注明細(xì)數(shù)據(jù)。除此之外，適當(dāng)?shù)卦黾右恍┙y(tǒng)計數(shù)據(jù)，可以更全面了解系統(tǒng)狀態(tài)，也便于對上匯報，減少人工統(tǒng)計的工作量。

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

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

2. 場景/主題化

對于小的業(yè)務(wù)系統(tǒng)，單獨的一個頁面就可以涵蓋所有的業(yè)務(wù)信息，內(nèi)容也會比較清晰簡單。

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

3. 實用性

1）串聯(lián)內(nèi)容，縮短路徑

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

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

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

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

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

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

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

4. 定制化

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

當(dāng)然系統(tǒng)的定制化并不是讓用戶從零定制，而是在系統(tǒng)初始內(nèi)容基礎(chǔ)上，重新組織頁面內(nèi)容、調(diào)整頁面布局等。否則定制化反而會帶給用戶更差的體驗。

三、首頁內(nèi)容應(yīng)該追求簡潔還是豐富呢？

在項目設(shè)計中，就碰到了這個問題。有同事認(rèn)為首頁應(yīng)該簡單點，避免過多的信息量增加用戶的學(xué)習(xí)成本。

當(dāng)然這個問題需要根據(jù)產(chǎn)品定位具體分析。不過總的來說，我個人認(rèn)為首頁應(yīng)該豐富一些。

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

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

而且B 端產(chǎn)品經(jīng)過多年的發(fā)展，單從布局和表現(xiàn)形式上看，首頁已經(jīng)有比較成熟的設(shè)計模式了，大多數(shù)企業(yè)用戶也形成了統(tǒng)一的認(rèn)知和習(xí)慣。卡片風(fēng)格是首頁最常見的展現(xiàn)形式，卡片可以讓頁面分割更加清晰，方便信息讀取，有助于弱化信息量帶來的復(fù)雜感。即使不采用卡片分割， 可以通過間距、標(biāo)題等引導(dǎo)用戶視線，劃分頁面內(nèi)容。

四、總結(jié)

簡單總結(jié)下：

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

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

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

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

你是否想系統(tǒng)掌握移動 UI 設(shè)計，卻苦于知識零散、沒有成體系的學(xué)習(xí)路徑？作為專注 UI 與體驗設(shè)計的蘭亭秒微，我們結(jié)合站酷經(jīng)典書籍《術(shù)與道：移動應(yīng)用 UI 設(shè)計必修課》核心內(nèi)容，為你整理出從基礎(chǔ)到進(jìn)階、從規(guī)范到實戰(zhàn)的完整移動 UI 設(shè)計體系，幫你打通設(shè)計邏輯，快速成長為專業(yè)移動 UI 設(shè)計師。

設(shè)計核心定位

視覺體系設(shè)計

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

交互功能設(shè)計

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

品牌基因融合

設(shè)計落地工具

蘭亭妙微學(xué)習(xí)感悟

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

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

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

01 卡片疊加式設(shè)計

02 相冊式產(chǎn)品卡片設(shè)計

03 中間圖標(biāo) + 方形卡片設(shè)計

04 IP 形象 + 方形卡片設(shè)計

05 擬人化表情圖標(biāo) + 異形卡片設(shè)計

06 圖標(biāo) + 空氣彈框設(shè)計

07 簡約插畫組合 + 方形彈框設(shè)計

08 信封式彈框設(shè)計

09 IP 配標(biāo)題文字 + 空氣彈框設(shè)計

10 無定式彈框設(shè)計

11 底部彈出式插畫彈窗

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

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

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

   關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā).

   我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

    

   

4.