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

前言

前面幾篇文章主要講了關(guān)于產(chǎn)品知識的部分，從這篇開始就是回顧B端設(shè)計本身的設(shè)計知識。

如果說一個B端產(chǎn)品相當(dāng)于是一個房子，每個1級頁面相當(dāng)于一個小的房間。那接下來我就以產(chǎn)品具象化為房子進(jìn)行講解，方便讀者理解。

一、設(shè)計圖紙——如何學(xué)習(xí)設(shè)計規(guī)范

1. 作用

設(shè)計規(guī)范常見的作用主要體現(xiàn)在3個部分。

1）保證設(shè)計的一致性

主要是從2個角度進(jìn)行拆解。

1. 對內(nèi)角度：多設(shè)計師合作，依然能保證設(shè)計風(fēng)格的統(tǒng)一。
2. 對用戶：提高用戶體驗，加深對產(chǎn)品的記憶，提升操作效率。

2）提升開發(fā)效率

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

3）方便產(chǎn)品迭代

隨著產(chǎn)品在不同的階段和業(yè)務(wù)的變化，能夠發(fā)現(xiàn)一些問題，或者優(yōu)化用戶體驗的時候，可以一鍵修改，十分便捷與高效。

建立之后，設(shè)計規(guī)范的協(xié)作流程：先判斷是否需要進(jìn)行設(shè)計？需要的話組件搭建頁面，新增組件交給開發(fā)，最后是有頁面開發(fā)。不需要的話可以直接進(jìn)行到開發(fā)的流程，設(shè)計師不用參與。

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

在組件庫完善的團(tuán)隊里確實是會出現(xiàn)這種情況，這就是我前面為什么優(yōu)先寫的是關(guān)于產(chǎn)品的知識、以及用戶調(diào)研之類的知識，要知道我們服務(wù)的是誰，來保證設(shè)計師的競爭力，這個才是成為體驗設(shè)計師的的根本。

筆者認(rèn)為設(shè)計師比到最后一定不是設(shè)計，而是對于用戶和業(yè)務(wù)的理解深度。

2. 原則

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

1）清晰：親密，對比，對齊，重復(fù)。

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

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

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

4）可控：就是在時間和空間可以隨時進(jìn)行控制。

• 時間上就是自由——用戶可以進(jìn)行操作，包括：撤銷，回退和終止當(dāng)前合作等等。
• 空間上說的是導(dǎo)航——讓用戶時刻了解到自己當(dāng)前的位置并，可以通過導(dǎo)航輕松回到上一級，下一級。

3. 學(xué)習(xí)方法

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

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

好了現(xiàn)在設(shè)計圖紙出來了，要進(jìn)行施工了。那我們要完成通用組件（磚和水泥）以及布局柵格導(dǎo)航（房梁和柱子）的搭建了。

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

1. 布局分層

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

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

有的后臺內(nèi)容少，還采用版心布局方式。這個時候應(yīng)該怎么處理？

在設(shè)計上，分為最小的頁邊距和自適應(yīng)邊距，當(dāng)屏幕開始縮小的時候，自適應(yīng)頁面邊距的最小值。臨界值達(dá)到斷點之后，內(nèi)容區(qū)發(fā)生變化，間距保持一致，水槽不變。另外說一點，設(shè)計師可以靈活定義式柵格范圍。

2. 房梁——柵格組成

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

• 頁面距：左右2邊的邊距表示出內(nèi)容區(qū)的范圍與其他（比如：擦邊導(dǎo)航欄），方便內(nèi)容進(jìn)行填充。
• 水槽：欄之間間距，主要是用于模塊之間進(jìn)行劃分。
• 欄：由水槽進(jìn)行分割，基本數(shù)量=水槽數(shù)量+1。在進(jìn)行高保真還原的場景，是按照相關(guān)的比例進(jìn)行分割。

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

柵格欄的好處：

柵格欄可以避免設(shè)計師憑著自己的感覺進(jìn)行設(shè)計，設(shè)計團(tuán)隊中多位設(shè)計師能夠做得更加的整齊規(guī)劃。

3. 柱子——導(dǎo)航組件

廣義定義/狹義定義：只要能夠跳轉(zhuǎn)的都是導(dǎo)航（例如：link）——狹義和廣義分類。

這里我們使用的是廣義分類：全局導(dǎo)航，局部導(dǎo)航。主要是以控制范圍的大小來進(jìn)行判斷。

1）全局導(dǎo)航

① 頂部導(dǎo)航

常見的使用場景是：導(dǎo)航數(shù)量比較少，內(nèi)容比較簡單，可以追求沉浸式的閱讀體驗。

優(yōu)點：

• 占用屏幕空間小，為內(nèi)容留出更多的更大的空間；
• 對視覺的干擾小，符合上到下的閱讀習(xí)慣。

缺點也很明顯：

• 隨著業(yè)務(wù)的發(fā)展，拓展性變差；
• 二三級點擊后隱藏，不方便用戶記憶。

② 側(cè)邊導(dǎo)航

常見的使用場景是：更加適用于更專注功能和快速操作的系統(tǒng)，大多數(shù)用于復(fù)雜的系統(tǒng)。

優(yōu)點：

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

缺點也很明顯：

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

③ 混合導(dǎo)航

常見的使用場景是：適用于功能架構(gòu)特別復(fù)雜的，結(jié)構(gòu)復(fù)雜的產(chǎn)品。

優(yōu)點：

拓展性比較強。

缺點也很明顯：

• 操作難度上升，操作動線更加的復(fù)雜；
• 內(nèi)容區(qū)的展現(xiàn)收到了更大的影響。

④ 總結(jié)

從頂部導(dǎo)航欄到混合導(dǎo)航欄之間的設(shè)計，發(fā)生了3個變化：

1. 復(fù)雜度變高；
2. 沉浸式體驗逐件變差；
3. 內(nèi)容區(qū)的適配性逐件變差。

2）局部導(dǎo)航

① 面包屑導(dǎo)航

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

常見的位置：

• 導(dǎo)航；
• 內(nèi)容；
• 背景。

面包屑導(dǎo)航注意點：

• 面包屑導(dǎo)航優(yōu)先級高于標(biāo)簽欄導(dǎo)航；
• 面包屑導(dǎo)航的中的每一次點擊都必須有相應(yīng)的頁面承載；
• 面包屑導(dǎo)航層級過于復(fù)雜時候，中間層級顯示可以用“……”呈現(xiàn)。

② 標(biāo)簽

標(biāo)簽頁可以幫助用戶在同一個頁面快速地切換不同的類型內(nèi)容，提高單個頁面的拓展性。一般和時間狀態(tài)扭轉(zhuǎn)相關(guān)。

常見的樣式：

• 基礎(chǔ)樣式；
• 卡片樣式；
• 膠囊樣式。

③ 分頁

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

• 優(yōu)點：可以降低系統(tǒng)的數(shù)據(jù)加載壓力，可以讓用戶等待的時間減少。
• 缺點：用戶無法一眼看到全部信息，需要翻頁操作，而且在需要定向選擇操作時，也是比較復(fù)雜的。

④ 步驟條

主要場景是用于復(fù)雜并存在先后關(guān)系，將其拆分為一系列的步驟，從而減輕用戶側(cè)的操作負(fù)擔(dān)。通常用于新增商品以及修改密碼等場景。

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

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

1. 色彩

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

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

盡量不要選擇紅色：一方面避免錯誤，與警告色沖突，會產(chǎn)生歧義。同時冷色系包含了理性、商務(wù)、科技等語義。更符合B端產(chǎn)品的調(diào)性。

如果實在是紅色主色改不動，那么在按鈕的處理上可以用灰色進(jìn)行處理。

避免高亮色：高亮和熒光色，用戶長時間使用容易產(chǎn)生視覺疲勞?；艺{(diào)對的顏色容易顯臟，視覺品質(zhì)感差。作為按鈕的字，辨識度會降低。即使是作為文字鏈接也會不清晰。

1）功能色板

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

2）中性色板

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

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

如何保證文字的可讀性？

推薦一個查看顏色對比的網(wǎng)址：https://color.review/

2. 字體

1）常見的字體

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

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

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

3. 字號

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

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

4. 行高

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

5. 間距

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

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

6. 圓角

1）分場景

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

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

• 不利于下拉場景；
• 與輸入框風(fēng)格格格不入；
• 連續(xù)排列里面的一致性。

6. 按鈕

常見的分類方式：

• 大小：通常分為大——用于頁面內(nèi)，中——用于彈唱，小——用于小氣泡；
• 長度：大于最小寬度設(shè)置padding值；
• 狀態(tài)：主按鈕，文字按鈕，功能按鈕。

按鈕怎么放呢？

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

閱讀順序：根據(jù)位置不同講述順序不同。

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

什么是好的規(guī)范——約束且規(guī)則。

四、總結(jié)

B端產(chǎn)品設(shè)計一般是比較枯燥的，如果是以具象化的思路理解整個產(chǎn)品的設(shè)計思路會比較輕松，理解成本也會比較低。

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