如果將B端產品看作房子，如何理解B端設計的視覺通用規範？

如何有效地搭建B端產品？在搭建設計策略時，也許你可以將產品看作一個“房子”，並從房屋打造的視角，來理解產品的整體設計思路。本篇文章裏，作者用相對具象化的方式，講述了他對B端產品設計的思考，一起來看看吧。

前言

前面幾篇文章主要講了關於產品知識的部分，從這篇開始就是回顧B端設計本身的設計知識。

如果説一個B端產品相當於是一個房子，每個1級頁面相當於一個小的房間。那接下來我就以產品具象化為房子進行講解，方便讀者理解。

一、設計圖紙——如何學習設計規範

1. 作用

設計規範常見的作用主要體現在3個部分。

1）保證設計的一致性

主要是從2個角度進行拆解。

1. 對內角度：多設計師合作，依然能保證設計風格的統一。
2. 對用户：提高用户體驗，加深對產品的記憶，提升操作效率。

2）提升開發效率

對於前端同學溝通的有效的工具，能夠提高設計的還原度，降低對接的成本。在開發側可以建立公共組件庫，可以有效地提高開發效率。在開發完成4分之3的時候，走查小組進行還原度測試的時候，能減少問題的發生。

3）方便產品迭代

隨着產品在不同的階段和業務的變化，能夠發現一些問題，或者優化用户體驗的時候，可以一鍵修改，十分便捷與高效。

建立之後，設計規範的協作流程：先判斷是否需要進行設計？需要的話組件搭建頁面，新增組件交給開發，最後是有頁面開發。不需要的話可以直接進行到開發的流程，設計師不用參與。

這樣的話就會帶來一個問題：這樣的設計師會不會沒有存在感？

在組件庫完善的團隊裏確實是會出現這種情況，這就是我前面為什麼優先寫的是關於產品的知識、以及用户調研之類的知識，要知道我們服務的是誰，來保證設計師的競爭力，這個才是成為體驗設計師的的根本。

筆者認為設計師比到最後一定不是設計，而是對於用户和業務的理解深度。

2. 原則

常見的4個設計原則是：清晰，高效，友好，可控。

1）清晰：親密，對比，對齊，重複。

2）高效：通常會有的特徵是一致性，便捷性。高效性要求B端設計儘可能的較少跳轉（原位>展開>氣泡展示>抽屜>新建）。

3）友好：友好原則涉及到了操作的前中後。

• 操作前：給到適時的幫助與引導，減輕用户迷茫（例子：新手幫助、探照燈、幫助中心）。
• 操作中：通過界面樣式和交互動效讓用户可以清晰地感知到自己的操作（例子：拖拽特效）。
• 操作後：通過頁面元素的清晰變化，展現當前流轉狀態（例子：跳轉詳情頁，輕提示）。

4）可控：就是在時間和空間可以隨時進行控制。

• 時間上就是自由——用户可以進行操作，包括：撤銷，回退和終止當前合作等等。
• 空間上説的是導航——讓用户時刻了解到自己當前的位置並，可以通過導航輕鬆回到上一級，下一級。

3. 學習方法

學習方法有很多種，我就分享下我自己的學習方法：小到大，搭建順序與使用場景分類。

• 小到大（原子理論）：原子，分子，組件，模塊，頁面。
• 搭建順序與使用場景：基礎元件，展示組件，錄入組建，反饋組建，反饋組建，頁面模式庫。

好了現在設計圖紙出來了，要進行施工了。那我們要完成通用組件（磚和水泥）以及佈局柵格導航（房梁和柱子）的搭建了。

二、房梁與柱子——佈局與柵格

1. 佈局分層

我們將整體佈局分為4層：

1. 背景層：最底部的背景，通常指的是背景層。
2. 全局控制層：導航，也是就是能夠支撐整個產品的柱子。
3. 內容層：承載內容的部分，柵格欄主要是用於這一層。
4. 臨時層：彈窗，氣泡，文字提示輕提示等等。

有的後台內容少，還採用版心佈局方式。這個時候應該怎麼處理？

在設計上，分為最小的頁邊距和自適應邊距，當屏幕開始縮小的時候，自適應頁面邊距的最小值。臨界值達到斷點之後，內容區發生變化，間距保持一致，水槽不變。另外説一點，設計師可以靈活定義式柵格範圍。

2. 房梁——柵格組成

柵格的組成：頁邊距，水槽，欄。

• 頁面距：左右2邊的邊距表示出內容區的範圍與其他（比如：擦邊導航欄），方便內容進行填充。
• 水槽：欄之間間距，主要是用於模塊之間進行劃分。
• 欄：由水槽進行分割，基本數量=水槽數量+1。在進行高保真還原的場景，是按照相關的比例進行分割。

計算的欄的寬度：若頁面距取20，水槽取16.那每一欄的寬度=「內容區寬度-23*16-2*20」

柵格欄的好處：

柵格欄可以避免設計師憑着自己的感覺進行設計，設計團隊中多位設計師能夠做得更加的整齊規劃。

3. 柱子——導航組件

廣義定義/狹義定義：只要能夠跳轉的都是導航（例如：link）——狹義和廣義分類。

這裏我們使用的是廣義分類：全局導航，局部導航。主要是以控制範圍的大小來進行判斷。

1）全局導航

① 頂部導航

常見的使用場景是：導航數量比較少，內容比較簡單，可以追求沉浸式的閲讀體驗。

優點：

• 佔用屏幕空間小，為內容留出更多的更大的空間；
• 對視覺的干擾小，符合上到下的閲讀習慣。

缺點也很明顯：

• 隨着業務的發展，拓展性變差；
• 二三級點擊後隱藏，不方便用户記憶。

② 側邊導航

常見的使用場景是：更加適用於更專注功能和快速操作的系統，大多數用於複雜的系統。

優點：

• 拓展性比較強；
• 層級清晰，1級2級3級導航可以按照流程展示；
• 操作效率高，用户在操作和瀏覽中可以快速的進行定位，和切換當前的定位。

缺點也很明顯：

• 視覺分隔較為明顯，內容區沉浸感不是很強；
• 視覺動線左右來回移動，比頂部導航還要疲憊；
• 內容區的排版空間更小，需要考慮適配的問題。

③ 混合導航

常見的使用場景是：適用於功能架構特別複雜的，結構複雜的產品。

優點：

拓展性比較強。

缺點也很明顯：

• 操作難度上升，操作動線更加的複雜；
• 內容區的展現收到了更大的影響。

④ 總結

從頂部導航欄到混合導航欄之間的設計，發生了3個變化：

1. 複雜度變高；
2. 沉浸式體驗逐件變差；
3. 內容區的適配性逐件變差。

2）局部導航

① 麪包屑導航

常見的使用場景是：2級以上的層級，最好不要超過5級。

常見的位置：

• 導航；
• 內容；
• 背景。

麪包屑導航注意點：

• 麪包屑導航優先級高於標籤欄導航；
• 麪包屑導航的中的每一次點擊都必須有相應的頁面承載；
• 麪包屑導航層級過於複雜時候，中間層級顯示可以用“……”呈現。

② 標籤

標籤頁可以幫助用户在同一個頁面快速地切換不同的類型內容，提高單個頁面的拓展性。一般和時間狀態扭轉相關。

常見的樣式：

• 基礎樣式；
• 卡片樣式；
• 膠囊樣式。

③ 分頁

分頁器常用的場景是為了避免表格數據加載壓力以及減少用户等待加載的焦慮，從而將表格按照每一頁固定地進行展示，當用户查看下一頁或者是選擇特定的頁數時選擇的交互方式。

• 優點：可以降低系統的數據加載壓力，可以讓用户等待的時間減少。
• 缺點：用户無法一眼看到全部信息，需要翻頁操作，而且在需要定向選擇操作時，也是比較複雜的。

④ 步驟條

主要場景是用於複雜並存在先後關係，將其拆分為一系列的步驟，從而減輕用户側的操作負擔。通常用於新增商品以及修改密碼等場景。

三、磚頭與水泥——通用組件

在B端常見的“磚頭水泥”包含色彩，字體，字號，行高，間距，圓角，分割線以及按鈕。

1. 色彩

常規分類是：主色板，功能色板，中性色板。主色使用場景：選中態，可點擊，可交互，logo變化，可視化，情感插畫等場景。

主色板的使用主要是兩點：

儘量不要選擇紅色：一方面避免錯誤，與警吿色衝突，會產生歧義。同時冷色系包含了理性、商務、科技等語義。更符合B端產品的調性。

如果實在是紅色主色改不動，那麼在按鈕的處理上可以用灰色進行處理。

避免高亮色：高亮和熒光色，用户長時間使用容易產生視覺疲勞。灰調對的顏色容易顯髒，視覺品質感差。作為按鈕的字，辨識度會降低。即使是作為文字鏈接也會不清晰。

1）功能色板

• 成功色：常規是綠色，因為綠色在人們的印象是——生命清新，暢通安全。
• 警吿色：常規是橙色，因為橙色在人們的印象中是——危險，警吿，焦慮，不安全。
• 錯誤色：常規是紅色，因為紅色在人們的印象中的是——錯誤，暴力，停止，失敗。

2）中性色板

常用與文字、背景分割線等顏色。常規分類N1-N9：

• N1：標題文字，1級正文文字
• N2：二級正文文字
• N3：輔助，説明文字
• N4：disable，提示文字等
• N6：輸入線，按鈕線框
• N7：分組邊框，分割線
• N8：背景色（內容色塊）
• N9：背景色（底層背景，輸入框灰色背景）

如何保證文字的可讀性？

推薦一個查看顏色對比的網址：http://color.review/

2. 字體

1）常見的字體

• IOS：中文——pingfang，英文——san franciso
• WIN：中文——microsoft，英文——arial
• 數字：din（商業需要購買正本）

2）常見字重：如何與前端溝通

• 蘋果：regular mesium semibold
• win：400 500 600

3. 字號

在B端和C端不一樣，在用字上面要講究極度的剋制，儘可能的“顏色>字重>字號”。正文字體為14號字，整體的閲讀效率最佳。

在日常的辦公場景，人眼測距得到的結果是人眼距離是50cm，14號字閲讀效果最佳。

4. 行高

行高主要是用於計算多行文字高度時候使用，常規的計算是字號的1.5倍的偶數（例如：14號字的推薦行高是22）。

5. 間距

我是SaaS出身，我們常適配的是1440。有的自研CRM的話有的配的是1024，針對OA辦公人羣的話1920能夠更適合於辦公人羣。

間距最好選擇8的倍數，常見的補充數值：4，12。

6. 圓角

1）分場景

• 按鈕/輸入框推薦值：2px
• 用於卡片推薦值：4px

2）思考：為什麼不用圓角？

• 不利於下拉場景；
• 與輸入框風格格格不入；
• 連續排列裏面的一致性。

6. 按鈕

常見的分類方式：

• 大小：通常分為大——用於頁面內，中——用於彈唱，小——用於小氣泡；
• 長度：大於最小寬度設置padding值；
• 狀態：主按鈕，文字按鈕，功能按鈕。

按鈕怎麼放呢？

一般的：分為右上角，左右相隨，上下相隨，右下角。

閲讀順序：根據位置不同講述順序不同。

• 右上角、右下角：右往左；
• 左下角：左往右；
• 跟隨：左往右；
• 居中：右往左（右手操作習慣）.

什麼是好的規範——約束且規則。

四、總結

B端產品設計一般是比較枯燥的，如果是以具象化的思路理解整個產品的設計思路會比較輕鬆，理解成本也會比較低。

上面講了房梁，柱子和水泥樁頭，之後會將裏面的箱子衣櫃逐步拆解開來，方便給大家去理解。

本文由 @一隻雞腿 原創發佈於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平台僅提供信息存儲空間服務。

給作者打賞，鼓勵TA抓緊創作！