B端通用視覺規(guī)范
作者：一只雞腿
前言
前面幾篇文章主要講了關(guān)于產(chǎn)品知識的部分，從這篇開始就是回顧B端設(shè)計本身的設(shè)計知識。如果說一個B端產(chǎn)品相當于是一個房子，每個1級頁面相當于一個小的房間。那接下來我就以產(chǎn)品具象化為房子進行講解，方便讀者理解。
設(shè)計圖紙-如何學習設(shè)計規(guī)范
作用
設(shè)計規(guī)范常見的作用主要體現(xiàn)在3個部分：
保證設(shè)計的一致性：主要是從2個角度進行拆解，對內(nèi)角度--多設(shè)計師合作，依然能保證設(shè)計風格的統(tǒng)一。對用戶--提高用戶體驗，加深對產(chǎn)品的記憶，提升操作效率。
提升開發(fā)效率：在于前端同學溝通的有效的工具，能夠提高設(shè)計的還原度，降低對接的成本。在開發(fā)側(cè)可以建立公共組件庫，有效的可以提高開發(fā)效率.在開發(fā)完成4分之3的時候，走查小組進行還原度測試的時候，能減少問題的發(fā)生。
方便產(chǎn)品迭代：隨著產(chǎn)品在不同的階段和業(yè)務(wù)的變化，能夠發(fā)現(xiàn)一些問題或者優(yōu)化用戶體驗的時候可以一鍵修改，十分便捷與高效。
建立之后，設(shè)計規(guī)范的協(xié)作流程：先判斷是否需要進行設(shè)計？，需要的話組件搭建頁面，新增組件交給開發(fā)，最后是有頁面開發(fā)。不需要的話可以直接進行到開發(fā)的流程，設(shè)計師不用參與。這樣的話就會帶來一個問題：這樣的設(shè)計師會不會沒有存在感？
在組件庫完善的團隊里面的話確實是會出現(xiàn)這種情況，這就是我前面為什么優(yōu)先寫的是關(guān)于產(chǎn)品的只是以及用戶調(diào)研之類的知識，要知道我們服務(wù)的是誰，來保證設(shè)計師的競爭力，這個才是成為體驗設(shè)計師的的根本。
筆者認為設(shè)計師比到最后一定不是設(shè)計。而是對于用戶和業(yè)務(wù)的理解深度。
原則
常見的4個設(shè)計原則是：清晰，高效，友好，可控。
清晰：親密，對比，對齊，重復。
高效：通常會有的特征是一致性，便捷性。高效性要求B端設(shè)計盡可能的較少跳轉(zhuǎn)（原位>展開>氣泡展示>抽屜>新建）。
友好：友好原則涉及到了操作的前中后。操作前：給到適時的幫助與引導，減輕用戶迷茫（例子：新手幫助、探照燈、幫助中心）。操作中通過界面樣式和交互動效讓用戶可以清晰的感知到自己的操作（例子：拖拽特效）。操作后：通過頁面元素的清晰變化地展現(xiàn)當前流轉(zhuǎn)狀態(tài)（例子：跳轉(zhuǎn)詳情頁，輕提示）
可控：就是在時間和空間可以隨時進行控制，時間上的話就是自由---用戶可以進行操作，包括：撤銷，回退和終止當前合作等等?？臻g上的話說的是導航---讓用戶時刻了解到自己當前的位置并，可以通過導航輕松回到上一級，下一級。
學習方法
學習方法有很多種，我就分享下我自己的學習方法：小到大，搭建順序與使用場景分類
小到大（原子理論）：原子，分子，組件，模塊，頁面
搭建順序與使用場景：基礎(chǔ)元件，展示組件，錄入組建，反饋組建，反饋組建，頁面模式庫
好了現(xiàn)在設(shè)計圖紙出來了，要進行施工了。那我們要完成通用組件（磚和水泥）以及布局柵格導航（房梁和柱子）的搭建了。
房梁與柱子-布局與柵格
布局分層
我們將整體布局分為4層：
背景層：最底部的背景，通常指的是背景層。
全局控制層：導航，也是就是能夠支撐整個產(chǎn)品的柱子。
內(nèi)容層：承載內(nèi)容的部分，柵格欄主要是用于這一層。
臨時層：彈窗，氣泡，文字提示輕提示等等
有的后臺內(nèi)容少，還采用版心布局方式。這個時候應(yīng)該怎么處理？
在設(shè)計上，分為最小的頁邊距和自適應(yīng)邊距，當屏幕開始縮小的時候自適應(yīng)頁面邊距的最小值。臨界值達到斷點之后，內(nèi)容區(qū)發(fā)生變化，間距保持一致，水槽不變。另外說一點設(shè)計師可以靈活定義式柵格范圍。
房梁-柵格組成
柵格的組成：頁邊距，水槽，欄
頁面距：左右2邊的邊距表示出內(nèi)容區(qū)的范圍與其他（比如：擦邊導航欄），方便內(nèi)容進行填充。
水槽：欄之間間距，主要是用于模塊之間進行劃分。
欄：由水槽進行分割，基本數(shù)量=水槽數(shù)量+1。在進行高保真還原的場景，是按照相關(guān)的比例進行分割。
計算的欄的寬度：若頁面距取20，水槽取16.那每一欄的寬度=「內(nèi)容區(qū)寬度-23*16-2*20」
柵格欄的好處
柵格欄可以避免設(shè)計師憑著自己的感覺進行設(shè)計，設(shè)計團隊中多位設(shè)計師能夠做得更加的整齊規(guī)劃。
柱子-導航組件
廣義定義/狹義定義：只要能夠跳轉(zhuǎn)的都是導航（例如：link）----狹義和廣義分類
這里我們使用的是廣義分類：全局導航，局部導航。主要是以控制范圍的大小來進行判斷。
全局導航
頂部導航
常見的使用場景是：導航數(shù)量比較少，內(nèi)容比較簡單，可以追求沉浸式的閱讀體驗。
優(yōu)點：
占用屏幕空間小，為內(nèi)容留出更多的更大的空間
對視覺的干擾小，符合上到下的閱讀習慣
缺點也很明顯：
隨著業(yè)務(wù)的發(fā)展，拓展性變差
二三級點擊后隱藏，不方便用戶記憶
側(cè)邊導航
常見的使用場景是：更加適用于更專注功能和快速操作的系統(tǒng)，大多數(shù)用于復雜的系統(tǒng)。
優(yōu)點：
拓展性比較強
層級清晰，1級2級3級導航可以按照流程展示
操作效率高，用戶在操作和瀏覽中可以快速的進行定位，和切換當前的定位
缺點也很明顯：
視覺分隔較為明顯，內(nèi)容區(qū)沉浸感不是很強
視覺動線左右來回移動，比頂部導航還要疲憊
內(nèi)容區(qū)的排版空間更小，需要考慮適配的問題
混合導航
常見的使用場景是：適用于功能架構(gòu)特別復雜的，結(jié)構(gòu)復雜的產(chǎn)品，日常多用于政府的網(wǎng)站。
優(yōu)點：
拓展性比較強
缺點也很明顯：
操作難度上升，操作動線更加的復雜
內(nèi)容區(qū)的展現(xiàn)收到了更大的影響
總結(jié)
從頂部導航欄到混合導航欄之間的設(shè)計，發(fā)生了3個變化：
復雜度變高
沉浸式體驗逐件變差
內(nèi)容的區(qū)的適配性逐件變差
局部導航
面包屑導航
常見的使用場景是：2級以上的層級，最好不要超過5級。
常見的位置：
導航
內(nèi)容
背景
面包屑導航注意點：
面包屑導航優(yōu)先級高于標簽欄導航
面包屑導航的中的每一次點擊都必須有相應(yīng)的頁面承載
面包屑導航層級過于復雜時候，中間層級顯示可以用“......”呈現(xiàn)
標簽
標簽頁可以幫助用戶在同一個頁面快速地進行切換不同的類型內(nèi)容，提高單個頁面的拓展性。一般和時間狀態(tài)扭轉(zhuǎn)先關(guān)
常見的樣式：
基礎(chǔ)樣式
卡片樣式
膠囊樣式
分頁
分頁器常用的場景是為了避免表格數(shù)據(jù)加載壓力以及減少用戶等到加載的焦慮，從而將表格按照每一頁固定的進行展示，當用戶查看下一頁或者是選擇特定的頁數(shù)時候選擇的交互方式。
優(yōu)點：可以降低系統(tǒng)的數(shù)據(jù)加載壓力，可以讓用戶等待的時間減少。
缺點：用戶無法一眼看到全部信息需要翻頁操作，而且在需要定向選擇操作時候也是比較復雜的
步驟條
主要場景是用于將復雜復雜并存在先后關(guān)系，將其拆分為一系列的步驟，從而減輕用戶側(cè)的操作負擔。通常用于新增商品以及修改密碼等場景。
磚頭與水泥-通用組件
在B端常見的“磚頭水泥”包含色彩，字體，字號，行高，間距，圓角，分割線以及按鈕。
色彩
常規(guī)分類是：主色板，功能色板，中性色板。主色使用場景：選中態(tài)，可點擊，可交互，logo變化，可視化，情感插畫等場景。
主色板的使用主要是兩點：
盡量不要選擇紅色：一方面避免錯誤，與警告色沖突，會產(chǎn)生歧義。同時冷色系包含了理性，上午，科技等語義。更符合B端產(chǎn)品的調(diào)性。如果實在是紅色主色改不動（參考黨政風格），那么在按鈕的處理上可以用灰色進行處理。
避免高亮色：高亮和熒光色，用戶長時間使用容易產(chǎn)生視覺疲勞?；艺{(diào)對的顏色容易顯臟，視覺品質(zhì)感差。作為按鈕的字，辨識度會降低。即使是作為文字鏈接也會不清晰。
功能色板
成功色：常規(guī)是綠色，因為綠色在人們的印象是--生命清新，暢通安全
警告色：常規(guī)是橙色，因為橙色在人們的印象中是---危險，警告，焦慮，不安全
錯誤色：常規(guī)是紅色，因為紅色在人們的印象中的是--錯誤，暴力，停止，失敗
中性色板
常用與文字、背景分割線等顏色。常規(guī)分類N1-N9:
N1: 標題文字，1級正文文字
N2: 二級正文文字
N3: 輔助，說明文字
N4: disable,提示文字等
N6: 輸入線，按鈕線框
N7: 分組邊框，分割線
N8: 背景色（內(nèi)容色塊）
N9:背景色（底層背景，輸入框灰色背景）
如何保證文字的可讀性？
推薦一個查看顏色對比的網(wǎng)址：https://color.review/
字體
常見的字體：
IOS:中文--pingfang,英文---san franciso
WIN:中文--microsoft,英文--arial
數(shù)字：din(商業(yè)需要購買正本)
常見字重：如何與前端溝通
蘋果：regular mesium semibold
win: 400 500 600
字號
在B端和C端不一樣，在用字上面要講究極度的克制，盡可能的“顏色》字重》字號”。正文字體為14號字，整體的閱讀效率最佳。
在日常的辦公場景，人眼測距得到的結(jié)果是人眼距離是50cm,14號字閱讀效果最佳。
行高
行高主要是用于計算多行文字高度時候使用，常規(guī)的計算是字號的1.5倍的偶數(shù)（例如：14號字的推薦行高是22）。
間距
我是SaaS出身，我們常適配的是1440。有的自研CRM的話有的配的是1024，針對OA辦公人群的話1920能夠更適合于辦公人群。
間距最好選擇8的倍數(shù)，常見的補充數(shù)值：4，12
圓角
分場景：
按鈕/輸入框推薦值：2px
用于卡片推薦值：4px
思考：為什么不用圓角？
不利于下拉場景
與輸入框風格格格不入
連續(xù)排列里面的一致性
按鈕
常見的分類方式：
大小：通常分為大--用于頁面內(nèi)，中--用于彈唱，小--用于小氣泡
長度：大于最小寬度設(shè)置padding值
狀態(tài)：主按鈕，文字按鈕，功能按鈕
按鈕怎么放呢？
一般的：分為右上角，左右相隨，上下相隨，右下角
閱讀順序：根據(jù)位置不同講述順序不同
右上角、右下角：右往左
左下角：左往右
跟隨：左往右
居中：右往左（右手操作習慣）
什么是好的規(guī)范？---約束且規(guī)則
總結(jié)
B端產(chǎn)品設(shè)計一般是比較枯燥的，如果是以具象化的思路理解整個產(chǎn)品的設(shè)計思路會比較的輕松，理解成本也會比較低。上面講了房梁，柱子和水泥樁頭，之后會將里面的箱子衣柜逐步拆解開來，方便給大家去理解。
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）