一類支持有C端前臺，支持前臺產品管理各種資源。第二類服務企業，提高企業工作效率和營收。
1.監控運營：時效性強，旨在實時反饋異常情況，快速判斷下達命令，回復信息、多用于數據控制中心。
2.數據分析：數據結果的對比和分析趨勢，時效性要求并不高，了解整體和各部分數據水平，助力決策。
3.記錄管理類：主要用于人員、設備、資產等增刪改查，文本信息容量大，頻繁便捷的操作。
4.系統配置：權限配置、設備功能配置，操作為主。
淺色：
適合文本信息多密集的表單列表類后臺，淺色更符合人眼白底黑字的閱讀習慣，瀏覽速度更快，信息獲取效率更高。
深色：
圖像信息密集的后臺適合圖片、數據可視化圖表等；深色對彩色的圖像信息襯托更強。信息獲取速度較慢，長時間可能視疲勞。
較常見
優點：市面最常見的風格，普世性高，大多數用戶可快速接受，層次分明
缺點：視覺缺乏記憶點
優點：視覺清新明快更年輕化更輕量，對其他文本及圖形展示包容性高，就像A4白紙一樣容器存在感弱
缺點：純白色導航+頁面層次略曖昧。
適合：適合科技屬性強的產品界面，圖像圖形展示
缺點：對其他色彩信息有干擾，持續性長時間觀看易視覺疲勞
優點：對色彩表現力強
缺點：密集文本信息獲取速度會下降，持續性長時間觀看易視覺疲勞
比如美妝和科技行業的整體設計基調就不太相同。
理性可靠 or 簡潔輕松輕量 or 關懷普世 or 酷炫吸睛….這個可以和相關產品經理、銷售共同商討
根據目標用戶的性別、年齡層、受教育水平，審美水平考量（可能包含多種角色，選取1.2個核心角色為參考）帶入目標用戶工作場景及愛用物常用物品味，去判斷基調。
如主要用戶群：40+男性用戶，本科以上受教育水平，使用windows電腦進行專業管理操作，審美傾向明確內斂。
如主要用戶群：20-40歲，男女比例約6：4；大專；操作水平參差
例如：最常使用數據分析管理，需要快速閱覽多條數據，對數據進行比對，更適合淺色風格展示表單數據。
獨立開發的，可以采取更獨特設計。若平臺很大需要不同外包公司的合作屬于整合類平臺則更注重設計的包容性。
“731配色比例”70%的面板色，30%的導航面板色，10%的強調色。（這里的用色比例可以根據內容具體再去調節只是大概比例）品牌色或重點色：強調行動關鍵點、重要信息高亮、圖形化說明等。強調色用就要用的像蛋糕上的櫻桃。起到畫龍點睛作用即可。
后臺高頻出現的圖標，值得我們花時間去統一設計打磨，調整圓角粗細疏密，符合整體界面氣質。從圖標庫里拖出的圖標很多在線條粗細上是不統一的，好的設計在細節處也要動人。
B端工具類圖標識別性第一，美觀性第二。B端導航圖標更多是在基礎造型上打磨，不需要加花里胡哨的漸變、投影，導航圖標一般在24px-16px大小，太復雜反而看不清。在區分狀態的時候可以考慮加點品牌色
空狀態插畫是B端設計師少有能發揮自己繪畫天賦小巧思的地方。
圖形化狀態語言，輔助用戶理解內容?？梢詫a品機械蒼白的文案設計表現的更加具有溫度，具有引導性。讓乏味的工作出現一些共情小彩蛋，有趣的插圖動畫可以緩解等待的焦慮。
純色背景卡片式：簡單大方更聚焦登錄操作
插畫背景：場景化展示產品的功能及亮點，讓用戶更有心理預期
幾何圖形背景：最后和品牌圖形相關，加深用戶對產品的品牌印象。
照片背景：相關場景或產品類型，具象圖片信息更直觀
不同大小的圓角傳達產品不同的氣質，大圓角親和、小圓角精致、中等圓角大眾中庸。
優化信息層級，區分信息主次可以使閱讀更快，操作更快，界面更有節奏感。
這時候你就是那個考前畫重點的老師
判斷一個頁面里最重要的是那些信息或操作，強化它！并弱化輔助信息；
判斷一個模塊里那些是重要信息，強化它！
1.追求炫酷的視覺效果舍棄操作效率。比如追波風滿屏花里胡哨的卡片及面板，滿屏大投影及高飽和色彩。對于B端界面來說信息噪音太多，反而干擾信息獲取效率。
2.反常規用戶習慣的操作。尊重用戶習慣，不要為了個性化去嘗試改變，不要妄圖改變用戶的操作和認知的慣性。慣性思維大于設計思維，曾經遇到過產品因為右手操作所以要把導航放在右邊的離譜例子。
3.數量多，動靜大的夸張的動效。B端與C端不同的地方在于希望操作者沉浸式工作，遵循非必要不打擾。之前看過一個反面例子后臺，在每一步操作后都出現大的場景動效鼓勵完成，如果作為一個長期使用的工作者，我會覺得每次完成任務都需要等待動畫完成可能只需要2-3s也很浪費我的時間。
4.新人建議多看Antdesign和Element等成熟的組件，創新類組件樣式，最好和和開發商量是否能夠實現。
5.在確定主要風格及2-5張主要頁面后，就應該著手基礎規范（色彩字體等，不然后面越做越亂）。
6.一段時間一個審美，同一界面中的元素風格不統一。
7.避免大面積使用高飽和高明度的色彩，及曖昧含糊的臨近色彩。長時間使用眼睛會累，產生不耐煩焦躁的負面情緒。
餓了么官方組件庫：https://element.eleme.cn/#/zh-CN/component/installation
layui 官方組件庫：https://www.layui.com/admin/std/dist/views/
iviewui官方組件庫：https://www.iviewui.com/components/menu
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
很多時候既讓初入B端行業的設計師感到一絲絲迷茫，因為不同的B端系統也就意味著，它的業務一定就會有所不同。比如CRM系統當中的客戶生命周期管理，OA的辦公自動化，特定的行業往往都會蘊含著不同的業務類型
而作為設計師，如果只了解設計模式、設計組件，不去分析設計最后的業務訴求，其實是沒有任何意義。因此想要通過B端設計指南，和大家一起聊聊B端業務，以及背后所牽涉的具體邏輯。今天就簡單聊聊最為常見的 審批
開始之前，還得再多說兩句，因為一個系統當中，業務本身就不是獨立存在的。因此在去講述審批的過程，一定會涉及到 流程、權限、表單配置 等一些基礎內容，建議可以先做初步了解，再結合文章進行閱讀
雖然在說起源，其實我更想給大家講清楚 審批在B端系統 當中的重要性
審批字面意思是審查并加以批示，通常指對 下級呈報上級的公文進行審查批示，報請上級審批
現如今，任何事情一定都會有分工協作，而使用審批的好處是可以
規范員工行為
提高企業運轉效率
系統存檔便于溯源
保護環境（畢竟減少了紙張浪費）
當然在不同的階段的公司，對于審批的訴求是不太一樣
小公司：因為審批的決策路徑短、流程上都非常簡單，但因此就會缺乏規范保障。比如在外出辦公時，看似只需要與老板當面進行口頭上的溝通即可，但是在外出出現意外時，由于缺乏外出辦公的相關證據，員工的權益則很難得到保障
大公司：因為審批的決策路徑長，流程上都極其復雜，因此會在多人協作下完成整個流程審批。比如想要申請購買辦公用品時，會由 行政、Leader、財務 層層審批，從提交審批到最終落實可能需要十天半個月，但是這樣的流程，能夠確保企業在清查財務狀況時，更加有理有據
審批的演變，就是從最開始的規章制度而來。比如在早期去政務機構辦理各種業務時，會讓你去填寫各種紙質表單。在審核過程中，則需要有各個機關的蓋章及批準，而這種形式正是政府對于普通市民的自上而下的管理方式
審批其實是整個B端系統的靈魂，因為在B端系統當中，企業想要使用系統的一大痛點便是 核心的管控
因此你會發現，只要一個獨立的系統，一定會存在獨立的審批模塊。因為B端管理系統當中企業的最終目的，是管理手中的人，而審批便是最為常見的一種手段
審批在如今的B端系統當中，可以理解為它是一組消息，在這一組消息當中會有：“具體的文本、對應的附件、以及照片視頻”這些內容都是輔佐 申請人 去講訴你需要申請的內容
比如我們在申請病假時，往往需要出示 三甲醫院所開設的證明，對于這個證明，如何在表單當中出現，你會發現最為常見的便是拍攝證明圖片，然后上傳到表單當中（這個與字段屬性緊密相連，我就不做不過介紹）
審批的這組消息還會有些特殊，因為它非常重要，你可以理解為它是一則“加急消息”會提醒審批人快速的進行處理，同時會告知相關的參與人（處理人、抄送人）審批的進度、并且無論成功與否，都會在系統當中留下 足跡，因此它起到了 “追蹤、通知、留存” 三個非常重要的作用，我們首先對于審批進行一個基礎的拆解
如果把審批單獨拿出來，你會發現審批會牽涉到 發起人、處理人、抄送人
審批的發起人，也是整個審批流程的歸屬人，他最關心整個審批進展
因為在發起人的角度，創建完審批事項后，可能還需要進入審批頁面，完善 后續附加信息、及時了解審批狀態、催促審批人的審核、處理駁回意見 等等，因此站在發起人的角度，審批需要盡可能詳細的展示 當前審批的狀態、完整的審批流程、駁回信息的快速操作、成功信息的必要通知
審批的處理人主要在審批過程做出決策，因此他更在乎的是審批申請內容的信息。比如 審批的信息內容、直接的審批操作、多條審批的管理
當然，在一些大型的集團企業當中，會將審批分為審批「直接處理人」與「間接處理人」（后文以 直處人、間處人 簡稱）
「直處人」作為審批的第一處理人，也就意味著他的意見至關重要，如果「直處人」通過過后，相對而言整條審批的通過幾率會大大增加。通常「直處人」是作為申請人的直系領導居多，因此多數情況下可以理解為直屬領導進行 “把關”
「間處人」作為審批的后續處理人，同樣在流程當中也十分重要。但在有些情況下，比如一些偏平化管理的企業，「間處人」更多像是“權利”的象征，因為權利已經下放給「直處人」，而「間處人」起到知曉審批以及企業的規章制度要求
審批抄送人主要起到通知對應角色的作用，因為一條審批的出現，會造成諸多影響，假設今天你需要申請事假，如何通知同部門的其他成員呢？
發送即時消息，顯得過于簡單；每個打電話，又有些麻煩；發送企業郵件，又怕他們沒有看到
這時候抄送人會顯得尤為關鍵
通常抄送會有企業流程上管理員配置的固定抄送人，以及發起人選擇的自行抄送人 兩種類型
固定抄送人 角色通常與管理員配置整個流程有關，他是角色當中 管理員 所配置的重要通知人，比如今天你的請假信息，肯定會告知行政，像這類默認的通知流程，則可以將其設為固定抄送人
自行選擇抄送人 則是提供給發起人自行選擇，該條審批可能會影響到的相關人群。比如就是發送給同事，讓他們知曉今天你不在崗位上，因此自行選擇可以增加審批抄送的靈活性
這里肯定會有很多讀者會問，我選擇抄送人與我發消息給同事，有什么區別么？
看似完全相同，實則有明確的區分
通過消息，將審批內容傳達，本質上是你自行將內容發送給對方，對方會對于你這個消息的真實性會產生疑問？你是否通知了
而選擇抄送，更為權威，更能體現你這條消息的真實性，并且整個流程都已經由領導進行批準，因此不會存在太大問題
其實審批的本質就是一組消息，而這一組消息當中，申請人 通過 表單配置 去獲取需要補充的消息內容，而流程會根據企業所配置的流程方式將這一組消息進行合并轉發給對應人，而審批人則需要對這一組消息進行回復“通過、駁回” 來讓整個流程繼續延續
審批當中，最主要的便是流程。因為你可以通過查看流程圖，去了解整個企業的組織架構、規章制度、員工管理方式
串行審批主要是指當一個審核節點通過后，才能進入下一個審核節點。如果節點駁回，則可以根據業務實際需要，配置駁回的返回路徑，會有：撥回到發起人、駁回到上一個節點、或駁回之前任意一個節點 重新審批
并行審批是指一個審批節點存在多個角色同時審批，這里會存在兩種情況
任何一個人審批通過，則可以進入下個節點，這也就是系統當中常說的 「或簽」
所有審批人員通過，才能進入下個節點，這也是系統當中常說的 「會簽」
條件審批就是將企業當中的規章制度映射到實際的項目當中，通常就是某個審批內容會根據 金額多少、實際數量 等 進而選擇哪個角色進行審批
比如銷售人員在申請一個合同審批時，會根據合同金額的不同，審批人也會有所差異
當金額小于8000時，合同直接由財務專員進行審批，進而讓流程進行快速審批
當金額大于8000時，合同會由銷售主管進行審批，讓銷售主管能夠掌握企業的重要合同
通過發起人選定一個審批事項后，將自主選擇后續的審批內容，進而實現審批的后續選擇。這是一種較為靈活的審批流程，當企業尚未形成標準化流程時，自主的核心就是當發起人發起一個審批，提交時需要自行選擇下一個環節的審批人。而下一個環節的審批人審批通過后，可以選擇繼續流轉到再下一個人去審批，或者結束這個流程
審批的背后，它映射的其實是企業的一條條管理制度，而它的設計一定是要滿足企業的實際需求。因為你負責的產品不是為某一家企業提供的服務（定制化產品），并且企業管理制度的變動其實是家常便飯，你需要去考慮一個通用的解決方案，這個解決方案拆解下來會分為三個內容，分別是：申請表單、流程配置、更多配置 進行講解
審批表單是最為一個“簡單”的用戶可配置化表單，因為現如今大多數B端產品都是以 SaaS 作為基礎（如果是定制化產品 它的審批內容、流程也不會是固定不變的）也就意味著審批表單需要為企業提供“DIY”的方式，通過表單提供不同的字段類型，去構建審批的實際要求
比如在一個選擇請假時，年假、事假、病假、婚假 等的要求都會有所不同
如何知道他們的差別，其實可以根據《勞動法》的相關規定 以及 各個其實的實際公司制度，進行個性化的處理
在申請婚假時，需要上傳你的結婚證，以證明其真實性；在病假時，需要有3甲醫院的病情證明；在年假時，則需要有你的剩余年假天數。而這些特殊訴求，其實都需要在表單當中進行各種定制化表單
當然這只是極為常見的 請假 場景，而在實際業務當中的復雜場景（更多需要將 審批與其他系統關聯）一個簡單的表單是沒有辦法進行滿足
這也是很多企業會發現，無論是飛書、釘釘、企業微信，都沒有辦法滿足其實際流程需求。又沒有辦法改變自身流程，只能夠自研、定制化 產品，這也是為什么即便各行各業都有了初具規模的 SaaS 產品，但是還是會有很多企業愿意自行研發軟件
企業可以根據自身的系統流程，在流程配置當中去定制特定的流程。在這個頁面的設計上，需要注意不同參與人的狀態，以及復雜流程時如何才能夠進行清晰的閱讀，因此增加了 顏色區分（發起人、審批人、抄送人）+ 視圖縮放 功能
顏色自然不必多說，整個系統需要統一，因此不能夠只考慮在管理后臺的顏色，是一定要在詳情頁當中也能過保證顏色的一致。這樣才能夠滿足實際業務所需
視圖縮放只是小小提一下，常見的視圖縮放會放在左側，至于為什么，自己稍稍揣摩揣摩
由于流程配置的屬性頁面會涉及很多表單的復雜邏輯，這個只能夠留在我的 訓練營的課程 當中進行拆解，這里就不過多贅述
更多配置項則是審批在實際情況下的特殊處理，比如：申請人修改審批的具體時間、能夠將審批轉發給其他人、出現多次相同的審批人是否去重 等等... 其實就是將審批的設計方案進行“賦能”，去滿足更多企業在實際場景當中的需求，感興趣的同學可以去 釘釘、飛書 了解詳情
審批，核心還是提高企業運轉效率，如果在審批之間，還需要不同角色私下反復溝通，本質上就失去了審批的意義。而審批本身，就是一個典型的B端產品 從場景到需求，進而研發功能，最后又回歸場景，你設計的好與壞，落地到真實的場景當中，試試便知
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
老齡化社會已經到來，如何讓中老年群體更好地使用互聯網產品是當今的熱門話題。貓眼演出設計團隊負責的一個 B 端項目的使用人群需覆蓋到中老年用戶，也屬于適老化的涵蓋范疇。
在前期調研和設計環節中，我們收集了一些相關的文獻及案例，并且結合項目實踐有所思考和沉淀，在這里與大家分享。
世界衛生組織根據現代人生命狀況，提出了人生階段年齡的新劃分。45~59 歲為中年人；60~74 歲為年輕老年人；75~89 歲為老年人；90 歲以上為長壽老人。[1]
隨著年齡的增長，人們的身體機能、心理狀態、認知能力等都會出現衰退的情況。
適老化設計是無障礙設計中的一種。無障礙設計于 1974 年由聯合國組織提出，設計中需要充分考慮具有不同程度生理傷殘缺陷者和正常活動能力衰退者（如殘疾人、老年人）的使用需求。[2]
目前互聯網產品中大多數的適老化設計，主要是集中在 C 端。針對不同障礙（視覺、肢體、聽覺、認知障礙）[3]，目前普適的適老化設計原則有：
1. “強烈“好于“柔和”
針對視覺障礙，常見做法有增大字體大小，使用非襯線體字體，提高顏色對比度等。
相比原版的 App，百度大字版 App 和支付寶長輩模式修改了 UI 界面，每個功能模塊都用了明亮的大色塊、加大字體的設計。
2. 善用“輔助”和“替代”
針對聽覺障礙，常見的做法有通過視覺輔助，將聲音轉化成文字、擴大音量、降低語速等。
Google 安卓系統推出了 Live Caption 功能，可自動將手機上播放的內容轉換成字幕。Live Transcribe-「Sound Notification 聲音通知」功能，可識別特定聲音（比如煙霧警報器、嬰兒啼哭、敲門聲等），并轉化成文字及視覺符號推送至手機，方便聽障用戶辨別生活當中一些重要的聲音信號。
3. “點擊”好于“滑動”
針對肢體障礙，減少頁面信息的密度，避免使用過小的按鈕以及復雜的交互手勢。
有研究表明，老年群體在操作時難以瞄準物體，在瀏覽圖片時，由于視力衰退導致無法對焦，他們會不斷地用兩只手指放大/縮小并反復點擊屏幕。[4]
平安銀行 App 關懷模式采用卡片拼接的設計方式，將間距放大，保證每個信息有更大的展示空間，同時也放大按鈕點擊熱區，提高操作的準確率。
4. “具象”好于“抽象”
針對認知障礙，避免使用不易識別的圖標，盡可能配有圖標或圖片，簡化信息內容。
有研究表明，文字+圖標為主的設計有助于提升老年新手用戶對新 ATM 使用的學習效率和記憶。[5]
滴滴 App 關懷模式針對老年人進行功能精簡，滿足高優先級核心訴求，首頁只放「一鍵打車」，操作簡單，大字、無廣告。
在很多行業中，中老年人因為擁有豐富的經驗在崗位上更具競爭優勢，譬如教師、醫生、律師、會計等職業，工作年限長、經驗足是優勢，可以提供更好的服務。他們既會使用 C 端產品，也有使用 B 端產品的場景。
隨著時代變遷，2015 年世界衛生組織提出了“健康老齡化”理念[6]，倡導改變過去“老了就要退出社會生活”的消極認識。
從“老有所依”到“老有所為”，很多的 B 端場景都覆蓋了中老年用戶，如何提升中老年用戶的辦公用戶體驗是重要課題。
另外我們看下 C 端與 B 端的主要差別：
C 端 App 中時常將簡單作為適老設計宣傳點。追求簡單有一部分原因是，C 端用戶是在自己的場域操作且幾乎無時間壓力。而 B 端產品卻相反，業務邏輯復雜，用戶要長時間使用而且要求效率。B 端面向企業定制化，針對特定人群、情景，使得在適老化設計中要解決的問題更清晰。
留意生活中的零售行業，如餐廳、商場、藥局、便利店的服務人員，往往能看到中老年人的身影。
POS 系統是 B 端場景中使用率最高的產品之一，POS 系統的英文全名為 Point of Sale，中文名為銷售時點信息系統。[7]它由硬件與軟件組成，根據產業和店面類型的不同，會有功能上的差異。
最近團隊參與了一個改造 POS 系統的項目，使用人群覆蓋到了中老年用戶，提升他們的辦公用戶體驗是其中一個產品目標。
本次項目主要是 POS 界面的更新，完整的 POS 體驗不僅有軟件本身，有更大的部分在于實體環境與設備，例如：結賬區的控件、店面的擺設、掃描槍，讀卡器等，而 POS 界面是連結上述元素的節點。
在對 POS 系統進行改造時，我們是按照以下設計思路進行的：
第 1 步:沿用舊系統規則與結構
B 端系統背后往往由成熟的業務場景和復雜的業務邏輯構成。B 端系統往往不是一個從 0-1 全新的系統，而是存在一個被使用了很多年的系統。
在這種情況下，企業服務的每個用戶都是趨向于規避風險的。人們可能已經習慣了原有的解決方案（盡管不好用，但是大家都會用了），但新的方案如果不好用，他們的生產力反而會因為不知道如何使用新方案而降低。
這就意味著在做 B 端設計時，現行的方案會產生很大的習慣引力。
當設計師要引入一個新方案時，取消或改變某些功能及操作行為將有難度，不能霸道性更改，取代需要合理性。
設計思路：
第 2 步：理清主要用戶與使用場景
想要了解使用者的真實痛點，需從場景出發。
第 3 步:用適老化設計原則去解決場景中的問題
POS 使用場景有很多，這里列舉 3 個常見的使用情境：
可能存在的障礙：無法聚焦信息內容，難做到邊看屏幕邊與顧客交流。
設計目標：確保信息在復雜的環境中，信息內容清晰可讀。
設計思路：
1. 放大信息內容
服務至上，POS 使用者在工作時需保持端莊熱情的姿態，不能只專注看 POS 屏幕信息而不顧顧客。
內容大小的確立由設備分辨率、環境燈光、字體、視距等因素決定，在復雜的現場環境中，信息內容要清晰易讀。
2. 色彩對比度符合 WCAG 標準
參照 WCAG 有 AA 和 AAA 的對比度標準，界面中的信息與其背景間的關系對比度至少在 4.5:1 之上，保證信息易讀性。
WCAG 全稱是 Web Content Accessibility Guidlines(網頁內容無障礙指南)。這是一套由無障礙功能專家編輯的指南，有若干國家在其網絡無障礙功能法律要求中明令必須使用這些指南。[8]
一些設計插件可以幫助我們檢驗色彩對比度是否符合 WCAG 標準，給大家推薦 2 款：Sketch 插件 Cluse，Figma 插件 A11y-Color Contast Checker。
3. 設計有意義的動畫
通過動效來表達靜態視覺效果無法準確傳達的信息，如反饋、引導下一步、狀態表達等。好的動效與視覺設計是互補而成系統的。
比如用動畫來展示商品被加進購物車的狀態，引導下一步操作。
4. 加大點擊熱區
提高使用者點擊操作的準確率和速度。
5. 一屏策略
在這次的項目中存在一個場景，除了銷售端服務員看到的屏幕，顧客也會有一個客顯屏，即服務人員看到的界面，顧客也會看到。
對于頁面信息框架以及布局盡量“一屏”展示，確保雙方的視線和注意力一致，便于溝通交流。但這時會有挑戰：字放大、按鈕放大，信息和功能在一屏上怎么放得下？
解決思路：
可能存在的障礙：在顧客的“催促”下，使用者也會著急，對事物表現出茫然的情緒，定位當前位置困難。
設計目標：追求信息的有效表達和操作的直覺性與效率。
設計思路：
1. 避免使用不易識別的圖標
B 端系統中會有些功能很難用一個圖標去表達其含義，此時文字+圖標按鈕優于純圖標按鈕，能幫助 POS 使用者更好地理解語意并做出操作。
2. 信息的呈現符合用戶眼動規律，操作軌跡越短越好
可運用古騰堡圖表法 Diagonal Balance，它由 14 世紀西方活字印刷術的發明人約翰·古騰堡提出。他發現人們視覺閱讀規律，左上角是視覺第一落點區，右下角是視覺最終落點區，右上角和左下角都是一個視覺落盲點，大多數情況容易被忽略。
在進行信息排布時，可根據用戶習慣性的眼動規律，將最重要的信息放在左上角，右上角和左下角添加輔助元素，右下角作為整個視覺落點可以展示重要操作。
可能存在的障礙：百忙之中，應變能力下降，容易發生誤操作的情況。
設計目標：預防不當行為，提升容錯率，反饋要及時有效且清晰。
設計思路：
1. 通過二次確認避免誤操作
在產品設計時，要把各種可能性考慮進去，通過模態對話框讓用戶二次確認來避免誤操作行為。
當有重要操作時需告知用戶處理結果，狀態反饋信息采用的顏色需要遵守用戶對色彩的基本認知，如紅色代表警示，黃色代表警告、綠色代表成功等。
上述舉例的設計原則是啟發但不是限制，每個設計提案最后都要經過用戶調研，看是否符合使用者的使用習慣，是否真能解決業務與工作中的痛點。
附上總結圖：
其實設計到后面會發現，起初為了方便中老年用戶使用 POS 運用的設計原則，最終都能給多數人帶來很大便利。
這是因為我們每個人在某些時候都會遇到各種臨時的無障礙需求。
適老化設計，不僅僅只是為中老年群體做設計，更是一種新的設計思維方式，去挖掘更多普適的場景痛點，來指導我們做方案設計。
市面上很多適老化設計方法為 B 端產品提供了借鑒，但 B 端產品不能為了適老而適老，理清相關工作情境和要解決的問題很重要；不能霸道性更改，取代需要合理性，因為 B 端產品現行的方案會產生很大的習慣引力。
以上是近期對 B 端引入適老化設計的一些思考和沉淀，是開始，也將繼續，適老化設計還有很多值得深究和驗證的內容。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
以下內容主要分成兩大部分，第一是聊聊響應式和自適應的區別和原理，以及我們應該如何去設計響應式界面；第二部分也是比較關鍵的B端系統設計的核心，B端設計中臺完整構建過程的具體步驟，以及應用到的格式塔原則，和命名的一些注意事項，內容較多，大家可以根據上述目錄來選擇性閱讀。
簡單概括多端兼容設計的發展史，最早是桌面端，比如桌面的一些應用；后來出現了移動端，針對移動端大家用的都是WAP，指一種無線應用協議，大家在用手機瀏覽一些網站，會把網站翻譯成一種低流量的瀏覽方式，比如去掉圖片大圖，只剩全文字，因為當時網絡不好，早在3G和2G時代移動端用的都是WAP；在2008年之后出現了響應式，也就是做一套代碼可以兼容三端（網頁、移動端、iPad）設備，在發展的同時也遇到很多問題，但響應式同時也遇到了很多問題；于是又出現了自適應，指不同的設備打開不同的頁面進行自適應，自適應能增加效率，但需要增加工作量；2017年以后直到現在看到最常用的就是漸進式，類似完整的像在使用一個APP。這是多端兼容設計的整體的發展。
可以理解成用戶在手機、電腦、ipad打開同一個界面，所呈現的界面是一樣的。需要考慮移動端設計和網頁端怎么通過一套代碼進行兼容。
自動布局算是響應式的一種，但平時看到很多響應式其實并不是真正的響應式，而是自動布局，因為界面在不同的設備用的是不同的模板，當我們用電腦打開呈現的是一套模板，而用手機打開則是另外一套模板，這種看起來是響應式，其實不是。因為當我在開發者模式下調節不同設備展示時，就會發現，其實是換了一個網址來根據不同的設備進行自適應的，而真正的響應式是不需要刷新的，在拖小窗口的時候就會變成手機端的那個樣子。
漸進式布局是近幾年比較新起的，這種布局設計，很像一個網站或者本身它就是一個網站，但用起來就像一個APP一樣，看到這里大家很容易相到，小程序就是漸進式布局得一種，小程序明顯是一個網頁，但通過技術的一些嵌入和一些接口或者緩存的方式的操作，讓用戶在使用的時候感覺小程序就是一個APP，但核心技術還是web網頁。
響應式的原理是通過定位的方式來做響應式的各種開發，需要在頁面中至少標出這十個點：中心點，上下左右點，上左上右點和下左下右點，這幾個點其實就代表了做響應式和做布局相應的位置。這樣可能大家不容易理解，其實結合figma來看，這些點對應的就是這樣（如下圖），在figma中的布局點。設計師通過調節圖形的布局點，可以做到在頁面拉伸時，讓想動的元素跟隨變化，不動的元素靜止不動，這就是響應式的原理。換言之，我們做響應式布局的原理也就是通過figma或者sketch中的布局約束這個功能來實現的。
01、響應式
如下圖是響應式的優點和缺點。響應式其實就是只開發一套頁面，這個頁面兼容三端。雖然做了響應式，但如何響應是需要設計師去設計的。比如我們設計了一個移動端界面，然后全部做好對應的自動布局，再進行頁面拉伸，內容隨之會發生變化，比如當拉伸到1024*768的時候，也就是iPad的尺寸，就會發現局部在設計上有些不合實際情況，這時就需要設計師在對應尺寸的設計稿上進行內容上的微調，比如按鈕不可能那么長，就把按鈕設計的短一點。當繼續進行拉伸到1440網頁的寬度時，然后再酌情針對網頁尺寸的呈現樣式，局部進行尺寸的調整，比如文字和按鈕被拉伸到網頁版都需要居中對齊，電腦端的樣式就需要設計師重新排版了。
通常在B端系統，設計師需要做響應式設計時，往往是從大往小做設計，這也取決于這個B端產品是否需要進行移動端的設計，《B端設計總概二》中提到過什么情況下進行設計B端移動端。如果需要設計B端移動端，就需要我們將網頁改成移動端設計，比如B端的側邊欄導航在拉伸到移動端時，就會變成用一個折疊懸浮的iocn來替代等等這樣設計上的改變。在figma中，做三端拉伸時候，可以用斷點插件來進行演示，通過對斷點插件的設置，就可以完美的看到頁面在三端不同情況的適配呈現，斷點插件用來做演示非常方便。
02、自適應
如下圖是自適應的優點和缺點，其實就是一個項目開發三個頁面，分別做定制設計，網頁端、移動端和Ipad端。
我們都知道2021年也就是今年是我國新基建的元年，十四五規劃2035遠景目標里提到重點發展傳統企業數字化轉型，尤其是今年我們設計師更能深刻體會，C端和B端已經是完全兩個不同的行業，C端發展近十年，已經很難再做到創新上的突破，該做的功能和創新都已經做了，而B端這片藍海才剛剛開始發力，很多企業也都在考慮B端系統的搭建，降本提效率成了很多公司新的指標，因此數字化轉型重點在于B端系統探索，B端重點在于中臺的搭建！設計師通過設計中臺，構建出基本的業務類型，再分類到業務中，構建出不同的業務界面，所以設計中臺非常關鍵，很多公司經常會用這兩個系統去構建，Antdesign和Elemnet就是設計中臺，我們會發現用Antdesign可以做出很多的系統，那怎么進行設計中臺的設計呢？和我們設計師有什么樣的關聯度呢？帶著這個問題，我們深度探索B端設計中臺的落地！
概念：中臺是互聯網的術語，一般應用于大型企業，中國互聯網的變革永遠是從大型互聯網開始，大型互聯網公司引發了技術的變革，這也是中臺的興起，一般指搭建一個靈活快速應對變化的架構，快速實現前端提的需求，避免重復建設，達到提高工作效率目的。
作用：降本提效。如果沒有組件庫，普通設計師一天最多做十個頁面，再多就不太可能了，如果有組件化得產生，一天可以做一百個左右的界面。在面對B端系統這樣幾千個頁面的巨大的工作量前，組件庫的作用尤為重要。但如果落地，就需要前端工程師的密切配合，因為設計師設計的組件只是一個樣式，而前端需要把組件進行代碼化，所以組件一定是代碼化的，也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復用，和前端代碼的復用，可以大大提高設計師的工作效率。
基本庫指的是一些色彩系統、字體系統、圖標系統、柵格系統、間距系統等等，之所以強調系統兩個字，有系統就要統一規則和統一規范，然后進行調用應用在系統中的各個地方，比如我們想調用一個顏色，不是去隨選用一個顏色，應該嚴格的從色彩系統中去調用，如果系統組件庫里沒有這個顏色，我們也絕對不可以使用，可以先用替代色做或者根據業務再進行補充顏色進組件庫為了后續的調用，這是一種比較嚴謹的使用方式。所以在建立組件庫的時候我們要考慮全面，組件庫中如果沒有相應的組件，我們應該試著反推一下，是否要加進組件庫中去，來進行系統的調用。在做中臺的過程中，我們一直使用Antdesign，我們對組件的名稱，組件的分類其實一點都不陌生，其實Antdesign也在借鑒國外的Bootstrap組件庫（大家感興趣可以下載Bootstrap組件庫進行查看），所以并不是Antdesign組件庫形成了一定的規則，它也是在沿用別人的規則，而這些規則也需要不斷的有大公司去繼承出來，所以慢慢衍生出來現在這樣的組件庫，那中臺設計，首先要搭建基本庫，把基本庫里的基礎一些系統搭建好后，我們繼續去做擴展庫。
如下圖，擴展庫中包含了很多內容，比如分了四類，導航系統，數據錄入，數據展示和反饋系統。其中導航系統又包含了，面包屑導航、下拉菜單、導航菜單、頂部導航等等，包括后面的數據錄入、數據展示、反饋系統也包含了很多內容。我們做這樣的擴展庫，也不需要做成像Antdesign的組件庫里包含的那么多，或者和新出得字節Arco組件庫，因為它們面向的是系統級的解決方案，各行各業都可以用它，它面向的是一個大系統，也許我們只涉及到了其中的20%，因為也沒有一個系統能用到它所有的組件，所以我們自己在設計組件庫的時候，一定是按照我們自己項目的范圍去做組件庫，而不是做一個大而全的，大而全的組件庫對我們也沒有意義。它們做的是公共平臺，而我們要做的是一個專屬平臺。
形成完基本庫和擴展庫后，第三步是建立方法庫。方法庫告訴我們的是什么時候用，比如我做了一個多選框，這個多選框應該什么時候用，是不是只要遇見一個選擇就去用多選框，肯定不是，應該加以說明什么時候用這個多選框。類似于是組件的設計說明。
最后再做一個案例庫，最佳實踐庫，具體組件什么時候用我們知道了，接著案例庫就是在告訴我們應該如何正確的使用，或者說的方法是什么。比如標簽的左對齊和右對齊，這種情況都對，什么時候用頂對齊，什么時候用左對齊，什么時候用右對齊呢？那么根據眼動儀實驗數據數據來看，并且結合給出一些工作中業務中的最佳實踐得案例放進去，給使用的人去做指引。
所以設計師做的事情，不僅僅是應用組件庫和創造組價庫，還應該指導其他設計師，指導開發人員在去復用每個頁面組件的的時候，應該怎么正確的使用，這也是在B端設計中一個關鍵的環節，同時我們的視覺系統一定也是和業務有關聯度的，所以在B端中做設計一定也不會脫離業務去做，我們一定要聯系到實際的業務場景中，這個業務場景指的就是業務和視覺的結合，在做C端的時候，業務場景一定不會比B端多，C端的業務場景大多是定制化的業務場景，它要求的是個性化，不要求通用，盡量得個性化，比如圖標、按鈕、頁面，而B端需要統一化，中臺組件庫的落地，可以大大提高設計師的工作效率和開發人員的協同效率，嚴謹的調用組件使用組件，可以使得系統頁面保持高度的一致。
如圖1：可以看出縱列的關系更緊密，因為縱間距小于行間距。
如圖2：可以看出行間距大于列間距，它得橫向關系更加緊密。通過圖中這樣的視覺設計為什么會感覺間距更加緊密呢？這屬于用戶心理學的應用，如果元素相鄰的更近，元素之間的關系就會更加的緊密。
如圖3：如果元素相鄰的關系都是保持一樣的，那么它們的關系是相對對等的。
由此可以得出結論，如果相鄰的關系越近，它們的關聯度就越近，如果相鄰的越遠，它們的關聯度就越遠。
應用案例：如圖4卡片中得標題和內容，設計中把標題和內容進行區分，所以我們會做大量的留白，這樣的留白就會讓信息結構具有層次感，層次感就是指它們信息結構的關聯度，如果想讓它們有關聯度，就讓它們距離近一點不要做區分，如果不想讓它們有關聯度，或者關聯度出現一個等級的區分，那么就可以加一條線，讓它們之間的關聯度分隔開。這就是格式塔接近性的應用。
如圖5：如果去區分右邊的形狀，通常我們會根據形狀進行區分，因為人的潛意識會認為相似的形狀會更有相關的分類性。這就是格式塔中的相似性原則。
應用案例：如果文字的標題大小是保持一致的，包括它有統一的大小，統一的色彩，統一的字號，那系統中的其他同樣功能的地方，都應該用統一的文字，這就是格式塔相似性的應用，比如圖標也是一樣，只有用了相似的圖形大小，相似的顏色，在相同的位置，用相同的圖標進行表達，圖標之間的設計才具有相似性。
如圖6：可以看到有一個L，是主體與背景進行了區分，如果在設計的時候讓L看的更加明顯，我們采用的辦法就是將主體的色彩或者形狀變的更加獨特，或者將背景的顏色變得更加分明，這樣就可以做到那個L看的更加明顯。這就是主題與背景區分原則。
應用案例：比如警告彈出，可以用色彩去區分，目標就是讓用戶看的更加得清晰，當警告的時候給用戶一個警告的信息，當成功的時候給用戶一個成功的信息。還有類似對話框的彈出，采用背景變暗和加陰影的方式，都使用到了格式塔的主體與背景變化關系的原理。因此應用在我們設計系統中，前景和背景進行區分的時候，我們就可以通過色彩進行區分，色彩的區分要保持統一，比如背景色彩透明度50%同時加一些背景模糊，其他的背景也需要保持一致，陰影也是一樣，如果把陰影放在一個平面上，距離平面越近，它得陰影越短，距離平面越遠，它得陰影越長，這也是陰影的層級關系。
如圖7：可以看出這是一個四分之一的圓形。
如圖8：這個圖可以看出是一個五角星。
封閉性應用案例：當一個形狀被另外一個形狀或者被另外一個色彩阻斷的時候，并不影響人們對這個形狀額外得認知，一定會腦補出另外一個形狀，這個原則和我們UI的關系是什么呢？比如一個loading，半圓一直在旋轉，或者圖表中的圓占比，我們就可以判斷出誰大誰小，誰多誰少，判斷出當前的進程和位置，封閉性原則通常應用在圖標的設計，圖表的設計和步驟條的設計中。
如圖9：可以看出用一些簡單得形狀來體現，其中三角形具有明顯的指向性，三角形箭頭指向右邊，上面五個是一組，可以看出它們具有連續性；另外一組三角形箭頭指向右下角，可以看出它們是連續的一組。不同的形狀會有連續性，箭頭也特別有指向性，這就是為什么返回和前要進放在不同的位置，當我們的數據需要有連續的時候，我們也要使用相似的形狀來表達，這就是連續性原則的應用。
同理如圖10：連續性一定是要有連續等階的變化，從左上角開始，向下和向右我們可以看出有明顯的顏色連續等階變化，通過色彩的透明度也可以做到連續性。
很多公司或者不同公司有不同的命名方式，這個需要和團隊開發提前做溝通，主要以方便開發習慣操作為主，如果不命名也不能非得說成是錯誤的，命名可以理解成是一件錦上添花的事情，因為一切都以效率優先，命名自然會影響工作效率，通常情況，組件的命名可以分成組件的名稱、級別、尺寸、狀態，這樣的命名順序來進行，這樣命名開發使用也比較方便，因為是按照了開發的統一規則來進行命名的。如圖所示：
當英文不好的時候，推薦大家記常用組件英文名，以及常用狀態名、級別名、內部名、尺寸名和位置名，那這些英文也幾乎涵蓋了工作中80%的英文詞匯，收藏記憶哦~
至此B端系統設計總概系列為終結篇，回顧第一篇主要內容是如何正確設計組件庫，B端業務調研的具體過程步驟，以及視覺規范的建立，可以看出第一篇屬于B端設計的方法論或者設計指導，也是為開展B端設計前的一些準備工作；回顧第二篇總概主要內容是如何設計表單、表格、圖標、儀表盤這些經常用到的設計難點，第二篇更加講究設計落地過程中遇到的疑難雜癥，專業技法；回顧當前總概三，主要內容就是中臺規范的建立和自適應、響應式適配的難點，主要是成系統的B端設計步驟。我們都知道B端市場剛剛打開，而且當下對B端設計師的需求還遠遠不能滿足我國現代化建設，數字化推進這么的大市場，作為UIUX，更早的拓寬一條路是我們當下必要的選擇，謝謝閱讀，祝愿各位2022乘風破浪，B端設計學有所成，如虎生翼！
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
寫在前面
B端產品和C端產品作為兩種很不一樣的產品形態一直服務著廣大的用戶。它們各有各的作用，有很多B端產品還是一個非常龐大的系統工程，甚至有很多的公司就是專注于開發B端產品，我從業以來曾經參與過很多的（兩位數）B端產品項目，有的是從0到1的開發，也有的是在原基礎上更新優化，下面就從我個人的設計經驗整理出一些觀點。
什么是B端和C端產品
概念：B端面向商家和公司，組織；C端面向普通的大眾用戶；
B端是指：business--泛指生意，商業，公司和組織； To B即是面向商家和公司，組織，是給專職專業的用戶使用的產品，例如微信公眾平臺給制定的公眾號持有人使用，某公司的指揮調度系統，某停車管理系統，以及相關的后臺管理系統等。C端是指：consumer--消費者，顧客，用戶，是指被設計為能給普通大眾使用的產品；To C即是面向普通的老百姓用戶，例如微博，QQ，微信，新聞客戶端，淘寶等；
幾乎男女老少都會使用的微信
面向專職崗位人員使用的后臺管理系統
兩者的不同點
C端產品追求極致的體驗，；B端產品追求簡約、高效的完成工作
C端產品是為了滿足用戶某一主要的、固定 的核心需求，因此設計的目標是圍繞著這個核心需求，簡單直接解決用戶的需求，追求的是極致的用戶體驗，因為對C端產品而言，產品不好用，體驗不好，用戶就流失了，也就沒有盈利的可能了。
B端產品的目標是幫助用戶把大量的復雜的工作，整理歸納，使得他們能高效便捷的完成工作，追求的是產品的簡約實用，提高效率，能很好的處理工作，有時候為了達成業務目標，甚至不惜犧牲部分用戶體驗。
To B端界面的設計應該要重點注意什么
很多新手設計師在接到新的需求的時候會沒有頭緒，不知道如何開展工作，在不了解業務的前提下很多時候被產品牽著鼻子走。那么問題來了，是拿到產品給過來的原型之后就開始設計了嗎？又或者沒有原型只有一些簡單的描述，又該如何開展呢。以下是我的幾個建議
1，要了解業務
因為B類產品不同于C類產品，并不是大多數人日常都會很普及用到的，所以就需要設計師主動的去了解行業，了解業務需求，不同的行業有不同流程和規則，甚至是一些特殊的需求；啟動用戶群體調研和用戶使用場景調研，有條件的可以開展用戶問卷調研甚至面對面訪談，整理出用戶的使用流程，調研后要求設計師自己能非常清楚這個產品的作用、用戶人群、和在特定的使用場景下的使用目標、和不同情境下的操作流程等。
2，交互流程設計
B端產品往往包含了比較復雜的業務，那在復雜的業務背景下如何通過設計來提高用戶的工作效率，這就對設計師有比較高的要求。在交互流程上要整理出一些操作路徑，要考慮它們的層級關系，先后順序，行業習慣等。通過操作體驗給用戶留下明確的印象，可以降低用戶的學習成本，提高產品的易用性。
To B端界面的視覺設計
①、界面布局，分固定的和自適應的分辨率兩種，一般來說自適應的布局比較適合操作和展示內容比較多的系統，固定的寬度的分辨率的布局一般多用1200px以適應適配更多低分辨率的顯示器，現在的大屏幕設備非常普及了，很多系統轉為以1400px的寬度來設計，至于用哪一種的布局要取決于產品的功能了。
界面布局視覺上的區分；當我們設計一個系統的主頁到時候，B端產品通常會分為很多功能模塊，即便產品經理會提供原型給UI設計師，他們有時候往往會在原型按照他們的想法來布局，這時候設計師需要主動地去了解業務去弄清楚各個模塊的主次之分。通過調研后，整理歸類任務模塊，按照業務流程和規則來區分模塊優先級。（圖例）
②、顏色，B端系統的界面顏色也非常考究，按照系統的功能特性來定，一般常規的系統界面都是以白色底色配以一種主色調的顏色來搭配的；第二深色的底色界面，深色界面能起到一種很好的襯托界面內容（如大量文字，數據，圖形，視頻等）的作用，深色界面再附以一些點線面和光的元素就能營造出一種炫酷的科技感。三是現在流行漸變色，漸變色和純色會給人一種繽紛，輕松愉悅，有活力的年輕的感覺，所以大家在設計不同的B端系統界面的時候要考慮產品的功能性質來選擇用顏色。
③、導航，導航可以解決用戶在訪問頁面時：在哪里，去哪里，怎樣去的問題。一般導航會有「側欄導航」和「頂部導航」2 種類型。一：側欄導航：可將導航欄固定在左側，提高導航可見性，方便頁面之間切換；頂部可放置常用工具，如搜索條、幫助按鈕、通知按鈕等。適用于復雜的、功能多的中后臺的管理型、工具型網站。二：頂部導航，順應了從上至下的正常瀏覽順序，方便瀏覽信息；頂部寬度限制了導航的數量和文本長度
④、按鈕，通常B端產品分為較多的功能模塊，也對應有很多不同的按鈕，在設計按鈕的時候，我們第一要分清楚哪些按鈕對應哪些功能，在設計上要做出區分。
⑤、表格，表格的設計遵循簡潔和易讀性為主，表里面的文字內容是主要的設計重點，例如信息層次的明確、對齊的原則等。
⑥、彈窗，不僅有操作反饋的作用，同時又是一個承載更多的操作功能的容器，彈窗的設計要有規范性，組件化。
視覺設計方面除了常規的設計流程，我想說的是綜合考慮和相關的系統銜接，體驗的一致，視覺風格的統一和品牌的建設。
設計師還能做些什么
雖然設計師和產品經理以及開發已經溝通過相關的業務需求，但設計師一定要懂得切換角度來看待問題，一方面設計師的視角相對注重視覺上和交互上的設計細節；第二我們也要懂得站在開發和產品的角度考慮，哪些效果能不能實現，也是需要我們和開發同事密切配合的；另一方面要更加注重代入用戶的角度來思考，這樣才能做出合理適用的設計，甚至能挖掘新的需求，提出一些很好的建議，給產品和項目帶來加分和利好。
總結
因為B端產品業務需求，用戶目標，使用場景和用戶群體都不相同，所以設計師接到B端產品的設計需求時一定要先了解清楚業務，做好前期調研，其次要多站在用戶的角度來看待和設計產品。其實C端和B端產品，它們都要求要簡單實用和有效準確，都是為了更好的滿足用戶的需求，解決用戶的痛點。做好了以上這些關鍵點，無論遇到多么復雜的B端產品，我相信所有問題都會迎刃而解。
設計規范是指對設計的具體技術要求，是設計工作的指導規則。一般包括總體目標的技術描述、功能的技術描述、技術指標的技術描述,以及限制條件的技術描述等。
Design System 最開始是 Guide 演化而來，Guide 是一套可指導、可延續、可擴展、可統一的、可區分的視覺指引手冊，指導相關設計結構完成統一性與對外區分性。具象層，它是一種設計方法；抽象層，它是一種思考模型。
設計規范一般會具體到公司級別、某一類產品線、某個產品等。今天主要講具體某個產品的設計規范，主要是為該產品制定統一的用戶體驗、品牌、視覺等方面的規范，當然是在滿足以上公司級別和某一類產品線層次的設計規范的基礎上。
設計規范由設計原則、設計語言和組件庫構成，在設計原則的指導下使用設計語言和組件庫創建體驗一致的用戶界面。
設計原則是指：整個設計體系所要遵循的全局原則，是為我們設計提供方向指導的。
設計語言：是指設計所包含的語言體系。具體包含了：色彩、字體、圖標、布局等。
組件庫：相當于積木玩具的一個個積木，每個組件就是一塊積木，通過組件的拼搭可以迅速搭建出一個個頁面。下面我會具體說明組件庫。組件庫具體包括：按鈕、導航、表單、數據等等。
B端產品和C端產品制定設計規范差別還是蠻大的，最主要的差異大致是：
C端產品的設計規范：目標幾乎都是為了更好的打磨用戶體驗的一致性和標準化；
B端產品設計規范：由于用戶體驗更復雜，學習成本更高，所以它的目標側重點是：除了布局的不同外， 相同業務場景下，相同產品功能需要有一致的，標準化的體驗，降低學習成本，提高工作效率，即統一體驗。
創建原型時可直接調用組件庫，能搭建出高保真的原型。
與設計師和前端溝通更加順暢，小的修改可以直接和開發溝通不需要通過設計師出圖，極大增加了前期的節奏，提升溝通效率。
對于只有一個設計師的項目：可以讓那個設計更加規范，有些簡單功能迭代可以直接個研發溝通，不用再單獨出圖，減少重復性的工作。
對于同一個項目由多個設計師共同協作時：可保證設計各方面包含體驗、設計、交互等等的統一性。減少設計成本，提升設計及溝通效率。
對于接手新項目，能盡快的了解產品，快速入手。
對于開發完成驗收走查，有了前期的規范及比較詳細的設計尺寸，開發的設計還原度會更高，減少重復及沒必要的設計走查。
開發可以按照設計規范建立好公共組件庫，極大的提升開發效率。
可復用的東西確定了下來不會頻繁改動，設計走查的問題也會逐漸減少。
對于模棱兩可的交互可以有地方看交互樣式了，不需要再詢問設計師。有更多的時間專注于測試功能上的問題了。
通用的組件前期測試后了以后，后續就不需要重復測試，極大的提升工作效率，避免重復工作。
前期制定及評審設計規范以后，有一套筆記明確的規范，可減少各個職位方面的溝通成本，提高溝通效率。
目前市面上有很多多的第三方設計規范，比如：antdesign，element，那有人就會問有必要自己重復造輪子做一遍嗎？
我覺得是非常有必要的，為什么呢？
1、每個產品有各自獨有的品牌調性，如果都用第三方 的設計規范，那同質化會很嚴重，很難做到差異化，也就很難在競爭中脫穎而出。
2、 世上本沒有萬能的設計規范，那些設計規范的組件并不能100%滿足我們產品的需求。另外一方面使用封裝好的第三方設計規范，在此基礎上進行修改，效率很低，適配的復雜度和重新開發相差無幾。
3、第三方的的成熟的組件庫，我認為應該把它當成模式，在他們的基礎上去做自己的設計規范。
個人工作中總結出兩個比較建議的規范建立時間點，探索期和成長期。
產品在導入階段，產品還在處于極大變動的時候，這個時候做設計規范，其中就蘊含可極大的風險。但是也不是不做規范，這階段規范主要涉及到色彩，字體，間距，布局，柵格等通用設計原則以及常用業務組件的定制。此階段搭建的規范具備高效性以及靈活性的特點。
不適合搭建特殊的業務組件，比如：當領導想要突然調轉方向也不會很慌，改動較小就可以完成整體的規范轉向）此時搭建規范組件庫需要考慮到預留后續更改的空間。
當產品進入成長期處于較為穩定的版本，整個團隊對業務的理解也都很熟悉了，這個適合創建符合業務場景的組件庫，有了前期的積累這個組件庫會更加符合產品及業務邏輯。
在制定規范前，設計師需要明確產品中主要有哪幾種分類，將最基礎的分類定義好方便后續針對分類內容進行整理。B端產品與C端產品既有共同性也有著很大的差異化，可以借鑒但是切忌生搬硬套C端的設計規范。
Ant Design是由螞蟻集團體驗技術部經過大量的項目實踐與總結，逐步打磨出來的，基于「自然」、「確定性」、「意義感」、「生長性」四大設計價值觀，通過模塊化解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗，是非常完整的一套設計規范。
TDesign是騰訊企業級設計體系，也是去年才發布的。雖然才發布，但是作為一款誕生于騰訊內部開源，卻是經過了超500項內部業務檢驗的企業級設計體系，TDesign 匯集了騰訊眾多優秀組件庫能力和設計研發經驗。
內含豐富可復用的設計組件資源，如色彩體系、文字系統、動效設計等，覆蓋支持 Axure、Sketch、Figma、Adobe XD 等各大產品設計軟件?？梢园凑招枨蟛榭磳M件的使用教程和代碼演示，只需簡單的引入操作，即可搭建屬于自己的產品界面。
Element是由餓了么公司前端團隊開源一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的組件庫，提供了配套設計資源。4、AT-UIAT-UI 是一款基于 Vue 2.x 的前端 UI 組件庫，主要用于快速開發 PC 網站產品，在眾多的的組件庫中，AT-UI 屬于視覺風格比較清新的一款。
是有贊 PC 端 Web UI 規范的 React 實現版本，提供了一整套基礎的 UI 組件以及常用的業務組件。通過 Zent，可以快速搭建出風格統一的頁面，提升開發效率。目前有 50+ 組件，這些組件都已經在有贊的各類 PC 業務中廣泛使用。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標是創造一個將經典的設計原則和科技、創新相結合的設計語言，并且在不同設備上提供一致的體驗底層系統，并同時支持觸摸、語音、鼠標、鍵盤等輸入方式。
iOS 的人機規范指南，保持了蘋果一貫的風格。雖然沒有 Material Design 規范那么細致全面，但是核心的設計原則在每個組件的設計說明中都有滲透。作為 iOS 系統的設計基礎，建議每個設計師都需要仔細研究。
Vant 是有贊前端團隊開源的移動端組件庫，于 2017 年開源，已持續維護 4 年時間。Vant 對內承載了有贊所有核心業務，對外服務十多萬開發者，是業界主流的移動端組件庫之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。
NutUI-JDL 是一套基于京東物流視覺規范的移動端組件庫，包含了36+高質量組件和詳盡的文檔和實例。
設計師在開始準備設計規范時，首先需要確定設計風格和設計尺寸，頁面布局是做居中固定式，還是全屏響應式。如果是全屏響應式的網頁設計，那要選擇怎么樣的屏幕來做效果？等等這些問題
接下來分別來展開說明。
純白風（網頁大背景是純白色;文字背景是線框，輕淡色（灰）;文字一般用深色）
輕淡風 (網頁大背景是淺灰色;文字背景是白色;文字一般用深色）；
深色風（網頁大背景是深色;文字背景是帶有透明度的純色；文字一般用白色）
我們在開始設計之前，要確定好使用哪種風格，一旦確定下來，后面的所有頁面和元件的設計，都得基于這個風格來設計。
據數據顯示，目前市面上比較流行的是：輕淡色背景風+全屏響應式的設計風格，也是相對比較保守安全的設計。
接下來需要考慮尺寸是做居中固定式，還是全屏響應式。全屏響應式的網頁設計，選擇怎么樣的屏幕來做效果。
設計規范中，分辨率尺寸的問題，一直以來是我們設計師討論最多的。
決定產品設計尺寸分辨率大小的因素大致包含以下兩點：
目前市面上主流的排在前3的屏幕分辨率為1920*1080，1440*900，1366*768。
做B端產品時，現在市場上的設計師一般都會采用的是1440*900。為什么不用市場占有率最高的1920*1080和1366*768呢？
1、由于B端產品的特殊性，它的尺寸分辨率大小，是取決于用戶使用的電腦設備條件。由于員工電腦顯示屏大部分都是統一采購的，尺寸也就大致統一，所以開發適配的分辨率可以按這個統一尺寸進行設計。
2、因為它的兼容能力會比較強，向上適配或者向下適配誤差會比較小，不管是市場占比最高的主流1920*1080尺寸，還是一般般的1366*768尺寸，都完全可兼容。
注意：別忘了設計出極端情況（寬度為1280，以及寬度為1920）的效果圖，力求前端開發實現的效果和高保真設計圖誤差最小。
假如你產品的用戶用的設備主要是市面上占有率最高的24寸辦公室顯示器，也就是1920*1080分辨率的話，那毫無疑問，在選擇設計尺寸上，直接選擇1920*1080分辨率。
比如我現在做的產品，除了移動辦公，web基本都是固定辦公，管理人員使用的辦公設備（電腦）屏幕一般都是臺式電腦，那這個時候，我們在設計時就會同時考慮它的占有率和兼容能力。所以我們采用的是：1920*1080分辨率。
所以設計師們在選擇尺寸上，一定要靈活使用，不能一味的認死理只選擇1920 或1440某一尺寸，而是要對您的產品用戶的具體情況做好分析，從而得出最適合你們產品的設計稿的尺寸。
注意點：
如果希望設計稿完全還原程度高的話，還特別要考慮瀏覽器的適配，比如說它的頂部固定區域（當前網址，書簽欄等的高度）必須排除在外，剩余的部分才是我們設計稿的真實高度。
拿我們常用的谷歌瀏覽器舉例，如下面公式所示：設計實際高度=電腦分辨率 -（網址欄+書簽欄+頁簽高度)
上下布局包括："頂部菜單欄、主體內容"兩大區域。其中頂部菜單欄是固定不變的，主體內容根據不同分辨率進行自適應動態縮放。另外還需要把主體內容左右兩邊空白區域最小值確定好；
優勢：內容區域可操作空間大。
劣勢：導航區域限制數量，如果導航選項內容比較多，用頂部橫向導航的話，就會顯得很擁擠。另外，橫向導航一般有“展開”，“折疊”，和“收起”三種狀態，加上內容很多的情況下，橫向導航就特別難做到尺寸適配。
左右布局包括："左側菜單欄、頂部欄、主體內容"三大區域。其中頂部菜單欄、左側菜單欄是固定不變的，右側主體內容根據分辨率進行自適應動態縮放。
左右布局時，左側菜單是支持收縮或展開，收縮狀態下也需要有固定的寬度。
優勢：導航部分可擴展性強，適合導航選項內容都是比較多的情況。且只有“展開“和”收起”兩種狀態，在不同屏幕情況下，寬度的自適應也能更加得心應手。
劣勢：相對內容區域空間變少。
現在很多后臺管理系統采用，"頂部一級導航欄、左側二級菜單欄、主體內容"三大區域。其中頂部菜單欄、左側菜單欄是固定不變的，右側主體內容根據分辨率進行自適應動態縮放。
優勢：結構更清晰?？沙休d更多層級內容。更適用于復雜且層級多的產品。
所以，可以得出結論：設計師在選頁面布局的時候，要全局考慮產品框架及內容。
1、如果導航選項內容比較多的話，或者不確定有多少內容的情況，從美觀和操作難易程度、可用性來評估的話，選擇第二種左側導航是最適合B端產品使用的。
2、如果內容選項確定很少，就沒那么多限制，“左側縱向”"頂部橫向"都好使
特別要注意
1、同一個產品需要考慮它的統一性，不能這里使用頂部橫向，那里用左側縱向。
2、如果是個更新迭代的版本，就還得考慮老用戶之前的使用習慣，避免引起不必要的麻煩。
在確定好導航的布局后，就基本上能確定整個產品的頁面布局了。
B端產品，一般會在整個頁面的左上角放企業的LOGO，頂部欄高度48+8n，側邊欄寬度200+8n。
我常用的是頂部欄高度：56px或80px，側邊欄寬度：200px，側邊欄收縮狀態寬度：56px或80px，右側的側浮窗寬度：400px。（具體高度寬度尺寸，設計師可根據具體情況來定，不需要按部就班這么死板）。
同時需要確定好主體內容的上下左右邊距，以及主體內容區域中各模塊的安全距離，內容超出區域的，通過滾動查閱更多。
Windows系統：中文Microsoft YaHei(微軟雅黑），英文Arial；
Mac字體：中文PingFang SC（平方字體），英文 Helvetica；
常見的字體大小為：12px、14px、16px、18px、20px、24px、26px、28px、30px（一般都是采用偶數字號，文字大小12+4n）。
注意：
在設計過程中，設計師對字號應該有一個全局觀，在同一個界面內，盡量少用大小太接近的字號。比如一個頁面中，如果同時用了12px、13px、14px、15px、16px、18px排版，文字的層級對比會比較弱，沒有主次之分，用戶閱讀困難，視覺效果也顯得凌亂。
所以，剛接觸B端產品的小白設計師，如果不知道怎么運用不同字號字體的情況下，可以直接以這組字號12px、14px、16px、20px、34px的字號為參考使用，這樣的分布會層次明晰，能夠有個比較不錯的布局結構。
“行高”根據文字大小和使用場景來定，公式如下，
行高=文字大小+8px（或6px，視情況而定，我常用8）
例如：12號字體的行高=12+8=20px
同一個界面中，一定不要出現多個不同字體。盡量選擇用戶設備里自帶的字體來進行設計，比如說WIN系統默認用系統自帶的“微軟雅黑”，不能使用特殊字體。
如果必須要用特殊字體，建議用圖片替代。如果用戶的設備里沒有你使用的這些字體的話，會默認顯示設備的系統自帶字體，最終效果就會和你的設計稿相差很多。
從視覺方面來講，為了讓整體界面更簡潔具有美感，體驗感更好，在使用字體方面，一般字體種類不超過2種，越少越好。因為頁面的層次感主要是靠字號大小及顏色拉開層次，如果字號在變，字體種類也各種變化，整體就會感覺很凌亂，沒有統一性。
顏色規范包含“品牌色”、“輔助色”、“中性色、圖表色”四部分。
品牌色系：即產品主色調，主色調的設定直接影響產品氣質和直觀感受，也是產品的對外的形象。品牌色是根據這個產品的特征和定位、用戶群，以及使用場景等綜合考慮最后確定的。
品牌色的一般用于LOGO 、操作狀態、按鈕顏色、其他一些可操作圖標等。
1、品牌色一般建議選擇冷色系。這樣有效避免與“錯誤提醒”的紅色、黃色相沖突，讓人誤解。但要是被硬性要求必須選暖色系作為主色調，就得格外注意調節好主色調與錯誤提醒的區別了。
2、注意選的品牌色（主色調）不要太刺眼。要保證用戶長時間使用也不至于顏色太亮太刺眼，而產生的視覺疲勞。
輔助色系：輔助色一般用于“提示”。類似：成功、失敗、警告、無效等內容等。
中性色系：中性色涵蓋黑、白、灰三個不同層級，通常在文本、背景、邊框、分割線用到它們。同一色相，只要改變它的透明度就能表現出不同的層級。
B端產品的文字中，一般會有：一級標題、二級標題、一級正文、二級正文、提示文字、輔助文字、說明文字等。
為了區分層級，提升用戶的閱讀體驗感，通常會根據具體需求，把字體顏色的深淺，大致分成3到5個層級。常見的有#333333、#666666、#999999這個組合，這個組合的層級區分比較分明，適應性比較廣，設計師在設計時可以直接作為參考。
圖表色：我們常見的后臺管理類產品， 像數據可視化、統計圖、多個標簽的不同配色方案，所以一般還會設定圖表的顏色。
按鈕是任何用戶界面不可或缺的交互元素，B端產品中用到按鈕的場景特別多，類似：登錄注冊，保存，表單，彈窗，導航，提交，確認等等。
常見的按鈕形式包含這六大類：圖標文字組合的按鈕 ，主按鈕，次按鈕（線性按鈕），按鈕菜單，文字按鈕，圖標按鈕。
常見的按鈕交互狀態包含六種：
正常狀態、聚焦狀態（使用Tab鍵或方向鍵來對網頁進行訪問輸入的聚焦狀態，在設計時很多設計師都會把這一狀態忘記，導致用戶無法用方向鍵控制光標位置，會降低用戶的使用體驗感）
懸停狀態（鼠標正在按鈕上，但不點擊，需要注意的是平板電腦和移動端設備上不會展示懸停狀態，因為手指跟光標不一樣，無法在屏幕上進行懸停 ）
激活狀態（點擊按下狀態）
加載狀態（等待期間不可操作，在B端產品中Loading狀態特別重要，能緩解用戶的焦慮情緒）
禁用狀態（不可操作狀態，置灰顯示和透明度（40%）代表不可操作狀態）
按鈕圓角：在開始設計產品之前，設計師都需要對按鈕圓角有具體的規劃。按鈕四角都是直角會比較有距離感和強烈的引導性，容易分散用戶注意力，所以我們一般會采用視覺上給人比較柔和親近感覺的圓角按鈕。
但按鈕的圓角并不是越大越好，因為在相同尺寸下，按鈕圓角小的，操作熱區會更大，頁面的使用效率也會更高，更容易操作。同時還要特別考慮到下拉菜單的設計，所以圓角大小一般采用偶數：2px,4px,6px,8px,16px為宜，不宜過大（這里的圓角弧度的值有一定的倍數關系或基數關系，例如：4/8/16, 4/6/8，4/8/12，都是可行的）。
注意：圓角大小也會跟著按鈕尺寸的大小有相應的變化。
在B端產品中，當確定好網格基數時（通常網格設定為：4px。按鈕的高度會分兩種情況：
1、一種是寬度為高度的倍數關系。
2、第二種是如果寬度為高度的倍數關系，從視覺上看達不到想要的效果的話，設計師就可以靈活設置。
討論到按鈕的尺寸，我們需要大致知道如何設置網格基數。
在設計中，我們需要在常用的繪圖軟件（如：Ps、Sketch）里找到我們的網格功能，設定好一個數為基數，然后按照這個基數來進行按鈕的繪制，按鈕就相對比較規范了。
那如何用繪圖工具設置網格基數呢？方法如下：在Sketch繪圖工具中找到：【視圖】-【畫布】-【網格設置】- 彈出網格設置對話框進行設置就好了
把網格基數設置為【4】的原因：它是谷歌Material Design繪制小組件的規范，模塊之間定義的基數就是【8】。
假設我們定這個基數為4，那采用的尺寸數值就需要是基數4的倍數。比如B端產品中，常用的按鈕高度尺寸有：24px、32px、36px 、40px、48px，這些都是可以整除基數4的值。例如：32/4=8，40/4=10，這里的4為基數。
按鈕的寬度尺寸，一般是確定好文字到邊框左右兩邊的距離（例如如圖Padding值為12px)后，開發會根據文字內容的多少自適應的。
按鈕間距，按鈕之間的間距也遵循基數為4的倍數，比如：16，24，32，40，48等。這里的基數定為偶數（一般為4或8）
從廣義的定義來講，表單是指用于數據錄入的一切形式。從狹義上來講，表單在大家更廣泛的認知印象中，表單則是一類包含輸入框、下拉選擇框等常見控件的組合形式的頁面才屬于表單。表單的本質核心是提交數據，所以凡是具備采集數據并完成采集后提交數據的交互形式均可稱之為表單。
表單在設計上的結構有：1、標題；2、表單標簽；3、占位符；4、表單域；5、提示信息；6、操作按鈕；
表單的設計必須優先考慮為用戶減負，提高效率并簡化填寫流程。另外表單中組件的選擇需要依據具體的數據類型和具體的業務場景進行合理正確的選用，為用戶提供高效的數據錄入表單，降低用戶操作成本、認知負擔，并提高數據采集效率才是表單設計的根本目的。
可交互輸入域，是構成表單的核心內容，是表單用來采集數據的入口。輸入區是用戶交互最多也是最能影響使用體驗的區域，不同類型數據選擇與之相應的錄入方式，對提高表單操作效率和用戶體驗大有裨益。
表單并不是把一些不同類型的輸入框排排版、標清楚必填非必填、哪些表單比較復雜適當的加個說明就完了
其實，表單設計遠遠不止這些，表單本身也是一個小產品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶的心理模型；從表單的產生到表單在頁面上如何呈現，再到使用表單時與表單之間的交互，每一步都需要投入大量的思考來做好表單。
后面我會專門有一篇16000+的文章聊聊這個B端產品中比較核心的表單，有興趣的朋友可以關注一下，大概五月份就會發。
表格在整個B端產品比較常見的，它的地位也是相當重要的，我們在設計表格時需要注意一下幾點：
一般以左對齊為準。與左邊表格邊距盡量保持在10px以上的間距。（特別注意：金額和操作的標題和內容需要右對齊）
默認展示的列數為3-8列，如果需要展示更多列數，則需要優先固定展示重要列，其余的列的內容會以滾動條滑動而展展示出來。
寬度的尺寸大小自適應，但需要根據文字的重要性顯示，重要文字內容優先完整顯示。
字符不要多，最多可輸入8個。如果文字太多，就需要做文字信息精簡化。
表格內容超過一屏，就需要顯示豎向滾動條，注意：表頭需要固定，但表格內容可滾動展示。
表格的某些單元格無數據內容時，需要用“—”表示，需要區別于“0”。
標題欄高度（標準高度為56px）；內容欄（標準高度為56px，偏大的標題欄高度為80px），內容區和標題欄水平居中對齊。
列的對齊方式（垂直方向）除了需要始終保持“右對齊”的：金額，最右側操作列內容外，其他的內容可自行左對齊或右對齊。行的對齊方式（水平方向）
當表格欄的高度尺寸小于80px 時，一般只有一排內容，內容水平需要居中對齊。當表格欄的高度尺寸大于80px時，如果是有兩排內容，所有的內容需要頂對齊；但是如果既有一排內容 又有多拍內容的話 ，內容水平則需要居中對齊。
表格中的內容，會根據字段的長短定義所占的百分比，完成表格占比，從而達到希望實現的最佳效果。
滾動條分為橫豎兩種，當表格內容超過一屏時，就需要顯示滾動條。豎向滾動條時， 需要固定表頭標題欄和頁碼。只需滾動表格內容部分即可。橫向滾動條時， 需要固定第一列 和 正在操作的項列。只滾動表格內容部分即可。
僅提示用戶相關內容，不需要用戶做任何交互動作。類似：toast弱提示通知提示等彈窗（（一般3-5秒會自動消失：包含普通信息，成功信息，失敗信息，警告信息）。
另外還有，鼠標經過的時候即可出現而不用點擊的彈窗（這個彈窗通常會設計一個浮動帶有陰影效果的框，不需要遮罩）。比如提示說明，顯示更多信息，鼠標移過后立即消失，它不會影響下一層（當前頁面內容）頁面的視覺效果和操作。弱彈窗尺寸一般根據文字多少自行適配。
第二種是強彈窗。它是一個需要用戶必須對這個對話框進行操作后才可以離開。
例如彈出的列表，詳情，表單等的確認信息彈窗、錯誤提示彈窗。這些強彈窗一般會對下面一層的頁面做一些遮罩處理，例如添加上一層有透明度（例如30%，50%都可以）的黑色/白色，給下一層頁面的內容做模糊濾鏡等等；
在寫彈框規范時，應了解各自項目中需使用彈框的有哪些內容，給出相關大小彈框的比例，哪些為固定尺寸，哪些為適配比例。以及對于通知提示給出停留多少時間后自動消失，彈窗彈出狀態等等相關的交互規范。
缺省頁是互聯網中常見的場景，當遇到網絡不好、頁面中沒有內容數據、暫無資料等等情況，所導致的空白頁面。
大致分可為：系統類缺省頁，信息類缺省頁，空白類缺省頁。
遇到這些情況時，設計師一般采用一些插畫&文字的組合放置本來空白的頁面中提示或引導用戶進行下一步操作，以緩解用戶的焦慮情緒。（也就是我們常說的情感化設計的一種方式）
設計規范很大一部分是組件庫，所以就把組件庫單獨拎出來聊聊。
做一個比喻，組件庫相當于積木玩具的一個個積木，每個組件就是一塊積木，通過組件的拼搭可以迅速搭建出一個頁面，而設計規范就相當于搭建的“說明書”。
通常我們將組件庫分為基礎組件和業務組件兩大類，前者是系統通用組件（圖標/按鈕/輸入框等），后者是由業務決定的相對更復雜的組件模塊。
而對于B端產品和C端產品，二者的組件庫又有些許差異。C端的組件庫更追求極致的交互和視覺體驗，因此需要考慮視覺、性能、實現、兼容性，另一方面，C端會根據活動、節日切換不同的主題，也要考慮組件視覺上的個性化擴展。對于B端而言，組件庫更看重可復用性和穩定性，保證可以支持業務快速迭代。另外B端會涉及到各種各樣的數據錄入與展示，因此相對更高的要求是大而全，覆蓋面廣。
在業務已經發展到一定體量情況下，需要將項目中具備復用性及拓展性的模塊進行拆解，對于B端產品來說篩選的時候會依據之前迭代的版本內容，把頁面一一羅列出來，將可替換與相似的模塊提取，并利用思維導圖的方式統一歸納，并做成可以被替換的組件。組件的替換建議合成一個大的排期進行替換，避免了線上組件不一致導致體驗問題。
以我們現在的產品為例：依據產品類型將組件拆分為：基礎組件 、業務組件、數據可視化組件、常用模塊。
將產品拆分后，此時得到很多可復用組件。我們再依據原子設計理論針對性進行拆解直至拆分出5個層面：
從原子開始重新依據定好的視覺規范進行更改，再由原子組成新的分子。
在與開發溝通設計規范制定的過程中，常提到他們寫CSS樣式的時候是采用盒子（box）去寫的。通過一個個盒子填充來將我們的組件元素放入其中，最終形成前端展示的頁面。
走查時使用瀏覽器我們也可以看到開發寫的盒子，了解盒子也可以方便我們走查時知道問題在哪。
搭建組件庫的步驟
對于新產品來說，業務體量較小，較難抽取共性，組件也不全面，因此較好的方式是參考大廠的組件庫確定要做哪些組件，它們的相對成熟，參考價值較高。
對于已經成熟的產品來說，我們可以直接全面體驗查看頁面，找出所有用到的組件，除基礎組件外，提煉出復用率高的業務組件進行結構化和組件制定。
以提示彈窗為例，演示單個組件的建立方法。
1. 定義組件：根據業務定義提示彈窗使用場景，用于重要信息的提醒，且需要用戶自己關閉操作。
2. 拆分組件：這一步是將組件拆分為元件。對提示組件進行拆分后得到如下：
3. 重組輸出根據業務場景，我們把各個元件重組為組件，建成組件集，并定義各種組件的使用規則。
在組件庫建立完成后，只有在日常設計中真正使用組件庫，提高組件庫在設計稿中的覆蓋率，才能真正達到組件庫的效果。這就要求我們要輸出一份完整的組件庫描述文檔，在團隊中進行推廣，加強設計團隊的公用意識。設計團隊內部可以直接維護一套組件庫，設計師設計時直接調用公共組件庫組件使用。
另外，我們還要與開發工程師配合逐步完成現有頁面的組件替換。
組件庫的內容并非一成不變，而是在不斷地更新，以保證所包含的組件都是最新和有用的。與其他數據一樣，組件也會有增刪改。我們需要定期對組件庫進行維護。
增加：當有新的組件產生時，我們需要通過判斷它的拓展性和復用率，以確定是否將它入庫。
刪除：隨著產品的不斷升級迭代，如果某個組件已經不用或復用率很低時，我們可以考慮是否要將它刪除。
改：不可避免的，組件會隨著業務而進行升級，我們可以通過數據埋點和A/B test的方式來確定某個組件是否要進行改動。
組件擴展性弱：
有時候設計師做出來的組件雖然看著很好，但是實際上使用時，適配效率很低，用組件去擴展和重新做的效率差不多。
大部分時候設計師手中都有任務，于是這個任務就落在了相對不是那么忙的設計師手里（一般是新設計師），但是新設計了解業務相對來說是不夠的，做出來的東西就像是是空中樓閣，拋開業務談設計規范的都是很難落地的。
設計師不了解開發的實現方式，可能會做出來以后，開發較難實現，然后開發也就不會做。
首先，設計規范的作用是巨大而延遲的，不能即時產出很大的價值，另外一方面，設計規范的落地會增加開發工程師很多的工作量，且無法量化成果。這也導致很多時候設計師無法爭取到足夠的開發資源來做這件事，所以，很難導致達到預期的效果。
設計師需要更加全面的了解產品及業務流程。
前期需要做好用戶畫像，弄明白產品的目標用戶的差異，不同用戶的使用場景。只有弄清楚各個角色的關系以及功能設計的邏輯，具體用戶年齡，解決什么問題，才可以產出更符合用戶需求的設計。
如果是新的產品，那就需要去詳細的看類似的競品的功能及業務流，并且了解公司產品的定位及方向，所以就大致清楚設計的大方向。
系統整理產品情況，最好是做思維導圖形式，可以更好的梳理同類型的產品功能及組件，也就能更好的提高組件的復用性。
在制定規范前，需要明確產品中主要有哪幾種分類，將最基礎的分類定義好方便后續針對分類內容進行整理。
團隊溝通其實是一門藝術，那需要如何做呢？
首先，寫一份設計規范的價值的提案給領導，爭取到足夠的資源，包含設計資源、開發資源。如果領導的主導參與，那這個事情就好推動多了。
然后，把設計規范的設計工作交給熟悉業務的設計師來做，通過業務提煉復用率高的典型元素，優先開發，最大化投入產出比。
搭建設計規范和我們日常處理工作需求類似，并非輸出一份文檔就結束了。我們還需要將做好的設計規范推廣給各個職能部門的同事包括設計小伙伴，PM和開發小伙伴的團隊內外，并且需要得到團隊內的一致認可才算是初步完成。
召開專門的設計規范會議，以清晰明確且有效的方式把詳細的內容傳達給各個相關人員，在一致認可規范的情況下，以達到內容的傳達到位。同時，這個時候，就可以依據開發人員的反饋，做落地的修改規范文檔。
1、如何推廣給PM
利益點：提升協作效率，減少工作成本
在啟動設計規范的整理之前，內部宣講讓PM對于設計規范的搭建已經有了一個基礎的概念。然后爭取到更多的開發資源。否則PM不會分配資源給予時間去搭建整體的設計規范。
可以從提升PM與設計的效率和降低原型搭建成本作為切入點，通過組件庫以及通用模版的搭建，PM只需要極低的成本學習一下組件庫怎么使用，即可搭建高保真的原型界面。甚至完善好組件庫后直接不需要設計的參與，開發通過原型組件庫搭建頁面。
利益點：提升設計效率，減少人力損耗，保持體驗一致性
設計規范一般由團隊內小伙伴共同制定，基本上已經對規范的優勢達成共識。因此主要講講如何更好在團隊內部使用規范。
團隊設定主要負責維護的設計人員，其他人員在設計時候，通過Sketch Library 共享組件庫可以直接調用組件，并建立更新日志規范項目流程提升效率，定期維護的時候其他人員統一告知負責維護的設計人員，統一定期修改更新升級維護。
利益點：封裝組件，更少的更改，提高驗效率，縮短研發流程
需要研發團隊認可設計規范，前期前端的參與是必不可少的。
在制作規范時設計師了解了前端開發的一些簡單原理，前端開發也能及時了解設計師的想法，大家不再是各司其職而是串聯起來共同協作，當規范確認下來前端就不會頻繁改動組件，而且在有限的項目時間中。設計規范的統一極大縮短了設計和前端開發所需的時間，為后面的項目爭取了空間。
一套完整的規范包含內容是非常多的，難以在1個版本迭代里面修改完。
因此可以采用敏捷開發的思想，小步迭代快速推進，將設計規范的覆蓋放在每次迭代過程中。設計師需要將自己作為設計規范這個項目的產品經理，針對現有的需求進行拆分，并排出優先級分版本迭代進產品里面。
可以依據從大到小的原則進行優先級排序。對產品設計風格影響大的先排，影響小的后排。
設計規范的制定不單單是對于設計師，在嵌入版本里面要隨時與產品和開發多溝通，以便達到更好的落地效果。
接近1.5萬的文字梳理，感謝你看到了最后。接近尾聲了，制定及梳理設計規范對于設計師來說個人成長有哪些方面呢？我個人覺得可以從這幾個方面來說；
通過整理規范，需要收集目標用戶，使用場景、前期調研、產品功能梳理等眾多資料，這期間我們需要去發現信息以及整理信息。龐大的信息收集，那對于個人的收集整理信息的能力是一個很好的提升，同時對產品會有更全面的認識。
歸納總結能力
將收集好的信息進行分類整理，這要求需要一定對邏輯性。在設計基礎框架時合理對分類可以協助我們處理好每個控件對層級，這項能力無論實在工作還是日常中都有著巨大對好處，可以幫助我們從一堆繁雜的事物中“提綱挈領”，換言之就是“化整為零”，做減法，提取出最關鍵對因素。
將信息歸納整理好后，需要對全局進行思考，全局的設計及交互都需要考慮到位，比如什么情況下適合跳轉頁面，什么情況下適合給與用戶彈窗。大體符合什么交互原則。
除了對大體交互需要考慮到位，細節上也不可以忽視，比如異常情況，極端情況該如何去處理，組件之間該怎么去配合等。在日常工作中我們也可以逐漸有意識去培養此類技能，對項目全局思考的越多，那么對整體項目對把控能力也就越強，與他人合作也會越顯得專業。
在整個推廣設計規范的過程，就是提升溝通表達能力的過程。
另外，整理設計規范時，難免會遇到模凌兩可舉棋不定的時候。此時可以尋求向上或者向下的資源尋求幫助，具備良好的表達能力能迅速幫助我們將問題闡述清楚，表達能力是設計師需要具備的重要技能之一。
我們每次在求助他人或向他人匯報，都需要在全面復盤問題過后做到心里有數，將問題自己復述一次是否有漏洞或者沒考慮清楚的地方。長此以往你表達的事情會更清晰，別人也更容易聽懂你說的事情快速理解內在邏輯，那么說服別人推動工作的難度也會越小。同事對自己的邏輯思維，表達能力都是很好的鍛煉。
這里總結了幾個工作中與上下游溝通的小技巧希望能幫助到小伙伴們：在開始與他人溝通之前我們需要搞清楚我們溝通的原因與對象
原因里面包含：
對象里面包含：
當然在溝通時還需要考慮方式和語氣，這些都需要好后斟酌。如果遇到情緒不太好的開發，這個時候反倒我們更不能將情緒激化，一般這些情緒化對態度過一會都會消散，可以采取冷處理等情緒過后換一種方式溝通看看。
在 B 端設計領域中，不管是內部用戶、產品、設計師、開發，還是外部產品、設計師等，總能聽到關于界面「屏效」方面的訴求或吐槽。
「屏效」狹義理解是「界面過度留白」；廣義理解，「屏效」源自諧音“坪效”，指的是每坪的面積可以產出多少營業額(營業額/專柜所占總坪數）。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率提升。
為了探索在 B 端產品中用戶為何對「界面過度留白」或「屏效」問題如此敏感，于是我們展開了「屏效」專題的設計探索與實踐?！钙列А箤ｎ}探索主要以「探索」與「實踐」相結合的方式展開，將實踐過程中反復驗證有效的設計策略沉淀成設計手冊，同步將部分功能進行工程化，確保可以開箱即用。
用戶聲音｜不同的故事相似的訴求
面向內部設計師和終端用戶投放的《高屏效訴求》《中后臺產品滿意度調研》問卷中認為提高屏效能極大提升用戶體驗的設計師占 58.14%；認為提升屏效對體驗有提升的終端用戶占 50.6%。
外部知乎上針對《Ant Design 4.0 設計價值觀》的 13 條反饋里，其中就有 2 點提到關鍵字「效率」。
通過了解不同用戶和產品類型發現，不同的用戶在工作場景的產品使用中有著相似的特征：
案例收集｜發現問題，大膽假設
縱觀 B 端產品界面，發現普遍問題和收錄在解決屏效問題上實踐得比較好的案例，為了逐步突破問題，選擇以數據產品中覆蓋率極高的表格為設計切入點，通過線上跨產品多端地毯式的體驗走查，發現表格三個層次的問題：
視覺、交互層在無需理解業務場景和用戶目標的情況下，都較容易發現，屬基礎問題，但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。
綜上我們提出假設：為提高屏效，可從視覺、交互、信息三個層次解決
視覺層為提高信息查閱速度，可以通過提高信息密度；交互層為提高操作速度，可以縮短當前手勢到目標之間的距離；信息層為提高信息被理解的速度，可以通過重組織等方式。
基于假設，我們進行了進一步的桌面研究，查閱論文等書籍，尋找設計理論的驗證和指導。
競品分析｜尋找實踐證據，謹慎驗證
我們知道視覺上界面留白過多（過疏會增加滾屏成本，過密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號、字高和行高的關系，因為不同字體的同字號實際像素高度會有差異，因此選擇的是字高（即文字垂直高度的視覺大?。┒亲痔柣蜃中懈撸瑳Q定留白的兩個重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關系，探究在視覺層怎樣的留白率能保證甚至提升屏效。
以數據產品中的表格為例，通過直接和間接競對的方式，分別從數據的查閱（視覺）、分析（交互）維度進行功能點和設計細節上的比對，來看看優秀產品是如何解決屏效問題。
直接競對：內部用戶口碑較好的產品 A、B外界競對：同領域的 Tableau、網易有數、金山、微軟表格；間接競對：谷歌郵箱、AntD 等的緊湊主題的常規列表（一維表格）
通過競品分析可以發現，數據分析領域的表格留白率普遍較低（信息密度高），尤其是金山和微軟的電子表格，其次是同類面向數據用戶的 Tableau、網易有數，而谷歌郵箱等工作臺常用的常規列表緊湊版本中，留白率和數據領域的電子表格不相上下。
緊湊版的使用場景也常常是面對數據量巨大的信息呈現，通過切換緊湊主題，提升信息的快速瀏覽，而這也非常適合數據分析場景中巨大的數據量呈現。因此我們的產品在留白率的提升空間極大，而在實際案例實踐中，也已經將表格行高優化至 30px，克制的使用留白。
除此外，競品其他層次的設計也做了比對，總結來看整體設計做法：高密度、少屏數、少留白等。
文字陷阱：中英文字高不等于字號
舉個容易犯錯的競品參考是，谷歌在緊湊版主題下字號 12px，列表行高是 28px，但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發現非常擁擠，缺乏呼吸感。
原因在于谷歌的 12px 是英文字體，實際字高只有 10px，而 AntD Table 的語境是中文字偏多，實際字高有 12px，所以留白的差異在于一個是 18px（28-10），一個是 16px（28-12），這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高，而非「字號」和表格行高，進一步推演，決定界面留白的是「元素視覺高度」和「元素間距」。
論文查閱｜尋找理論證據，謹慎驗證
研究表明，低密度認知負荷低，但高密度任務完成率高，用戶更喜好
參考資料：論文《基于眼動的網頁對稱性和復雜度對用戶認知的影響的研究》
對于信息，用戶需要需要閱讀（視覺），思考和理解（認知），需要點擊按鈕、操作鼠標和打字（行動），在人機工程學中，統稱為負荷。即認知（記憶）負荷、視覺負荷、動作負荷，即分別對應用戶體驗設計的三個層級，信息/視覺/交互。而負荷所花費資源從多到少依次為：認知 > 視覺 > 行動。
認知負荷，舉個例子，看了但不一定懂了。你是否有這么一種體驗——刷抖音，雖然很多（信息密度小，輸出效率低），但可以一直刷下去并且刷很久；而看一門 C4D 教學視頻，即使就短短十來分鐘（信息密度大，輸出效率高），但是卻要看上半天。因為刷短視頻時，你的輸入效率遠高于作者的輸出效率，而看一門 C4D 教學視頻時，你的輸入效率遠低于作者的輸出效率。可是，輸出效率是客觀的，輸入效率是主觀的。如果輸出效率很高，你可以通過提高自己的輸入效率（比如讓自己成為 C4D 專家）來跟上作者，從而變強；否則輸出效率很低（信息質量低），你的輸入效率很高（很專業），信息于你而言都是無效的。
假設負荷總量不變的情況下，那么以上三類場景界面需要對用戶負擔分配大致如下，官網品宣類需要低認知成本，低視覺負擔，視覺要求高，用戶才會被吸引過來閱讀，甚至酷炫的交互更能增加互動體驗而帶來的趣味感，比如蘋果官網，信息量極少、圖版率高帶來極具藝術的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息，而 B 端應用因為是專業使用，首先認知方面隨著員工的專業度提高而降低，因此可以通過提高視覺負擔，來降低行動負擔，進而減少操作用時，當然最佳情況是三個維度能整體降低負擔，讓總負擔降低，就需要更多設計巧思了。
面向內部設計師和終端用戶投放的《高屏效訴求調研》預設解決方案中，設計師常用的 Top 3 做法為：【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉。
通過以上的探索，我們可以確定的是，B 端產品面向專業人員的工作界面設計中，提高屏效可從視覺、交互、信息三個層次進行，視覺層-高密度，即提高屏幕信息密度；交互層-低跳轉，通過減少頁面跳轉、手勢與常用操作的距離等；信息層-有效性，通過重組織或輔助信息幫助用戶理解，甚至提供幫助手冊等以提高用戶專業能力。
基于以上的總結，對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度（白領-有信用卡）下的人數差異，尋找運營機會點。
如下表格經過高屏效策略優化前后對比圖，優化前相同維度下不同人群數量的對比需要視線來回跳動比對，而優化后的表格內容，更符合用戶看差異場景下分析目的數據查閱，視線鎖定相同維度，即可快速比對數值大小。
下面以視覺、交互、信息三個層次解剖設計過程背后的思考。
視覺層｜高密度-克制的留白
眼動理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動舒適轉動區 30度，垂直最大眼動舒適轉動區 55度。可得出人眼最小識別范圍 12px，水平視野舒適眼動寬 1200px，垂直視野舒適眼動高 2200px。參考資料：論文《基于眼動交互的用戶界面設計與研究》
如圖，縮小表格行高的同時，目標信息之間的眼動距離隨之縮短，在眼動舒適區內看到更多信息，便于信息的高效獲取。
理論基礎：菲茨定律是用來預測從任意一點到目標位置所需時間的數學模型，它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關系公式為：T=a+blog2(D/W+1)，W為其中目標的大小；D為到目標的距離；T為移動到目標所用最短時間。參考資料：菲茲定律
表格單元格借助交互狀態，增加懸浮出現的信息組件，前置顯示目標單元格明細信息，同時通過交互出現的指示器輔助行列信息的獲取，高頻操作考慮手勢位置放置，縮短與操作目標的距離，以提高整體操作效率。
理論基礎：交互設計四大策略「組織、刪除、隱藏、轉移」參考資料：《簡約至上》
用戶為了對比 A、B 兩不同人群在相同維度（白領-有信用卡）下的人數差異，但內容的重組織方式讓兩數據行需要頻繁點擊滾動條來查看，根據用戶目標，將關聯性大的數據放置相鄰列（即將要對比的人群放置列頭），即可快速查閱，減少眼跳距離。
設計趨勢中常見的大字體大留白界面，但在 B 端場景中，面對緊張的工作節奏，時間和注意力變得尤為可貴，相對而言，基于復雜度守恒定律， B 端信息量大且高頻訪問的產品中，「用得快」要比「看得美」更重要，「高密度」「低跳轉」詮釋的即是「空間換時間」，少一次點擊，少一次跳轉，少一份等待，就多一份時間和效率。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
什么是設計系統？
設計系統 = 設計價值觀和原則+設計規范+場景定義+工具包
為什么要構建設計系統？
問題1:
隨著業務的拓展，產品和項目數量不斷增加，發展中期設計和交互上不一致性的問題浮出水面，需要采取措施確保產品或產品線之間保持統一的品牌傳達、外觀和體驗，以滿足用戶預期并向其傳達統一的品牌認知。
問題2:
無統一的設計規范和交互原則，沒有統一的UI組件庫和代碼庫，各團隊設計和前端需花費大量資源陷于低質量溝通協作和重復造輪子，拖慢產品和項目設計和開發節奏。
問題3：
產品項目數量 vs 產品設計師，人員配比嚴重不足的情況下，團隊的設計師們無法從雜/亂/急的日常需求中剝離出來，影響構建產品壁壘的質量和速度。
設計系統的價值
產品側：
設計側：
開發側：
測試側：
主流設計系統-他山之石可以攻玉！
無需猶豫，直接基于現有的優秀的開源設計系統，
設計系統的打造不必從0-1構建， 例如：Ant Design業界優秀的開源設計系統，我們完全可以站在前人的肩膀，最終生產出符合達觀品牌、業務特性的設計系統。
字節跳動 Semi Design：https://semi.design/zh-CN/
字節跳動 Arco Design ：https://arco.design/
以原子理論構建設計系統
原子理論設計介紹
首先原子設計理論并不是什么高大上的規則。最早是由國外前端開發工程師 Brad Frost提出的，他從化學元素周期表中得到啟發，發現在化學世界中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。根據他的理論，設計體系主要包含 5 個層面：原子、分子、組織、模板、頁面。
原子理論設計不是一個線性的過程， 它更像是一個心理模型，來幫助我們把用戶界面看作是一個連貫的整體，同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面，讓我們更深入的了解每一個概念哦～
原子是物質的基礎組成部分，是構成設計系統的最基礎元素。
在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線、間距、圓角、間距、陰影等。
簡單概述下來就五個字：色、形、質、構、質；
在界面中，分子就像是一個由UI元素組成的相對簡單的組織。如：按鈕、彈窗、搜索框等。
以按鈕為例，它的組成元素包含了文字、色塊、圖標和間距。這些抽象的原子從毫無關聯原則組合成一個分子，圖標和文字互相配合傳達意義，顏色定義了按鈕的特性，間距為按鈕定義了一個尺寸和規范。
組織(Organisms)層
分子+原子組合成更復雜和可擴展性的模塊，這個稱之為組織（區塊組件），如：列表操作區塊、列表展示區塊、表單區塊、數據統計卡片區塊。
以表單為例，一個表單我們可以通過數量的組合，以及間距的調整，元素的增減，在界面中表達不同的場景和含義。
模板(Templates)層
由原子+分子+組織構成的更復雜更具拓展性的模塊，如：分組表單頁、頁面級表單、詳情頁、列表頁、異常頁、dashborad。本質就是線框圖，模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。專注于頁面的底層的內容結構，頁面中的信息是占位作用，而不是頁面的最終內容。
頁面(Pages)層
帶業務邏輯的場景案例如：標注詳情場景、抽取詳情場景、權限管理場景。頁面將真實內容應用于模板；
頁面是模板的具體實例，填充了真實的內容（圖片、文字等）后形成頁面，也就是常說的帶交互邏輯的「視覺稿」即為高保真原型圖，將占位符替換為有代表性的真實內容，使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的設計方案。
關于設計系統的常見認知誤區
誤區1：設計體系就是設計規范或者組件庫嗎？
許多人認為設計系統就是單個代碼庫、組件庫、設計規范，但實際上他們不是一個層次的東西，準確度的來說設計體系包含設計規范，組件庫也是建立在設計體系內的，組件庫是記錄和共享設計模式的工具，就是設計體系工具化和表現層的部分；
誤區2：設計體系的存在扼制了組織內創造力，會替代掉設計師？
拋出這個問題，是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點，我個人是很難以認同這個的，對design system的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合，需要調動整個團隊的想象力和創造力，最終達到一個統一共識才有可能被實施和執行；
好的設計系統可以通過流程和機制促進創造力的，而且好的設計資產可以幫助大家從不必要的、重復的勞動時間內節省出來，當然也不能過度依賴過往的沉淀資產，把自己定位為設計系統的創造者，而不是使用的工具人，不斷的創造和貢獻好的解決方案被整個組織采用，就不必再擔心那些即將淪為沉沒成本的過往設計與技術資產的限制。不會替代掉設計師，反而是一個企業內部尊重設計師價值的開始！是企業對設計文化的認可！
設計體系是動態的，永遠是隨著組織需求和用戶需求而變化的，一切說自己已經完成了設計體系的建設的人都是錯誤的，都是將將靜態的設計規范曲解成了設計體系。
正確管理機制：少數人負責管理，多數人參與貢獻；避免你做、我用模式，這種生產消費模式非常內卷；避免如：我一個設計師為啥要用你的規范；這規范做的太垃圾用處不大，我才不用，用你做的規范；我苦逼做業務，你晉升拿結果的負面心態；
然設計系統也不是簡單的靠少數的人1-2個月用愛發電就能完成的，設計系統是一群人，對一種做設計文化的認可，每個與之相關的人都應該是設計體系的貢獻者與布道者！
需要克服的潛在難題
產品業務復雜性提升，提升建設難度
難以控制創造與控制間的平衡；
復用與定制間的平衡，刻意追求復用率而容易丟失整體觀，為特定業務目標服務時不如靈活集中化式方法等
資源問題，容易被當成是輔助項目而缺乏預算等資源….
缺乏良性有效的組件庫更新迭代機制，虎頭蛇尾….
收益短期不明顯，搭建體系的長期收益難以被組織短期內察覺；
盡管有一系列潛在的問題，但總的來說設計體系的帶來的收益是大于這些投入的，總的來說方向是沒錯的，下一個關鍵問題是：我們如何去建立一個更優秀的設計體系。
文章來源：站酷 作者：從你的世界經過
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
屏幕有效利用率這個話題想必大家并不陌生，在B端產品中，越來越多的產品和用戶把目光聚焦到屏效上來。站在體驗設計的角度，立足交互和視覺的設計手法，挖掘屏效提升的設計價值，讓屏效最大化是提升用戶體驗的合理方法。
在此文中，對于整個設計（交互、視覺）的手段方法不做過多的詳細探討，我們重點闡述如何利用實驗研究的手法驗證屏效提升。以某B端項目為例，利用科學的實驗研究方法，通過設計實驗假設、提煉任務場景、準備實驗物料、進行控制變量等完整的實驗方法，來驗證該項目中屏效提升的設計方法（提高信息密度、縮短操作路徑以及信息重組）最終是否提升屏效。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
以下內容主要分成兩大部分，第一是聊聊響應式和自適應的區別和原理，以及我們應該如何去設計響應式界面；第二部分也是比較關鍵的B端系統設計的核心，B端設計中臺完整構建過程的具體步驟，以及應用到的格式塔原則，和命名的一些注意事項，內容較多，大家可以根據上述目錄來選擇性閱讀。
簡單概括多端兼容設計的發展史，最早是桌面端，比如桌面的一些應用；后來出現了移動端，針對移動端大家用的都是WAP，指一種無線應用協議，大家在用手機瀏覽一些網站，會把網站翻譯成一種低流量的瀏覽方式，比如去掉圖片大圖，只剩全文字，因為當時網絡不好，早在3G和2G時代移動端用的都是WAP；在2008年之后出現了響應式，也就是做一套代碼可以兼容三端（網頁、移動端、iPad）設備，在發展的同時也遇到很多問題，但響應式同時也遇到了很多問題；于是又出現了自適應，指不同的設備打開不同的頁面進行自適應，自適應能增加效率，但需要增加工作量；2017年以后直到現在看到最常用的就是漸進式，類似完整的像在使用一個APP。這是多端兼容設計的整體的發展。
可以理解成用戶在手機、電腦、ipad打開同一個界面，所呈現的界面是一樣的。需要考慮移動端設計和網頁端怎么通過一套代碼進行兼容。
自動布局算是響應式的一種，但平時看到很多響應式其實并不是真正的響應式，而是自動布局，因為界面在不同的設備用的是不同的模板，當我們用電腦打開呈現的是一套模板，而用手機打開則是另外一套模板，這種看起來是響應式，其實不是。因為當我在開發者模式下調節不同設備展示時，就會發現，其實是換了一個網址來根據不同的設備進行自適應的，而真正的響應式是不需要刷新的，在拖小窗口的時候就會變成手機端的那個樣子。
漸進式布局是近幾年比較新起的，這種布局設計，很像一個網站或者本身它就是一個網站，但用起來就像一個APP一樣，看到這里大家很容易相到，小程序就是漸進式布局得一種，小程序明顯是一個網頁，但通過技術的一些嵌入和一些接口或者緩存的方式的操作，讓用戶在使用的時候感覺小程序就是一個APP，但核心技術還是web網頁。
響應式的原理是通過定位的方式來做響應式的各種開發，需要在頁面中至少標出這十個點：中心點，上下左右點，上左上右點和下左下右點，這幾個點其實就代表了做響應式和做布局相應的位置。這樣可能大家不容易理解，其實結合figma來看，這些點對應的就是這樣（如下圖），在figma中的布局點。設計師通過調節圖形的布局點，可以做到在頁面拉伸時，讓想動的元素跟隨變化，不動的元素靜止不動，這就是響應式的原理。換言之，我們做響應式布局的原理也就是通過figma或者sketch中的布局約束這個功能來實現的。
01、響應式
如下圖是響應式的優點和缺點。響應式其實就是只開發一套頁面，這個頁面兼容三端。雖然做了響應式，但如何響應是需要設計師去設計的。比如我們設計了一個移動端界面，然后全部做好對應的自動布局，再進行頁面拉伸，內容隨之會發生變化，比如當拉伸到1024*768的時候，也就是iPad的尺寸，就會發現局部在設計上有些不合實際情況，這時就需要設計師在對應尺寸的設計稿上進行內容上的微調，比如按鈕不可能那么長，就把按鈕設計的短一點。當繼續進行拉伸到1440網頁的寬度時，然后再酌情針對網頁尺寸的呈現樣式，局部進行尺寸的調整，比如文字和按鈕被拉伸到網頁版都需要居中對齊，電腦端的樣式就需要設計師重新排版了。
通常在B端系統，設計師需要做響應式設計時，往往是從大往小做設計，這也取決于這個B端產品是否需要進行移動端的設計，《B端設計總概二》中提到過什么情況下進行設計B端移動端。如果需要設計B端移動端，就需要我們將網頁改成移動端設計，比如B端的側邊欄導航在拉伸到移動端時，就會變成用一個折疊懸浮的iocn來替代等等這樣設計上的改變。在figma中，做三端拉伸時候，可以用斷點插件來進行演示，通過對斷點插件的設置，就可以完美的看到頁面在三端不同情況的適配呈現，斷點插件用來做演示非常方便。
02、自適應
如下圖是自適應的優點和缺點，其實就是一個項目開發三個頁面，分別做定制設計，網頁端、移動端和Ipad端。
我們都知道2021年也就是今年是我國新基建的元年，十四五規劃2035遠景目標里提到重點發展傳統企業數字化轉型，尤其是今年我們設計師更能深刻體會，C端和B端已經是完全兩個不同的行業，C端發展近十年，已經很難再做到創新上的突破，該做的功能和創新都已經做了，而B端這片藍海才剛剛開始發力，很多企業也都在考慮B端系統的搭建，降本提效率成了很多公司新的指標，因此數字化轉型重點在于B端系統探索，B端重點在于中臺的搭建！設計師通過設計中臺，構建出基本的業務類型，再分類到業務中，構建出不同的業務界面，所以設計中臺非常關鍵，很多公司經常會用這兩個系統去構建，Antdesign和Elemnet就是設計中臺，我們會發現用Antdesign可以做出很多的系統，那怎么進行設計中臺的設計呢？和我們設計師有什么樣的關聯度呢？帶著這個問題，我們深度探索B端設計中臺的落地！
概念：中臺是互聯網的術語，一般應用于大型企業，中國互聯網的變革永遠是從大型互聯網開始，大型互聯網公司引發了技術的變革，這也是中臺的興起，一般指搭建一個靈活快速應對變化的架構，快速實現前端提的需求，避免重復建設，達到提高工作效率目的。
作用：降本提效。如果沒有組件庫，普通設計師一天最多做十個頁面，再多就不太可能了，如果有組件化得產生，一天可以做一百個左右的界面。在面對B端系統這樣幾千個頁面的巨大的工作量前，組件庫的作用尤為重要。但如果落地，就需要前端工程師的密切配合，因為設計師設計的組件只是一個樣式，而前端需要把組件進行代碼化，所以組件一定是代碼化的，也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復用，和前端代碼的復用，可以大大提高設計師的工作效率。
基本庫指的是一些色彩系統、字體系統、圖標系統、柵格系統、間距系統等等，之所以強調系統兩個字，有系統就要統一規則和統一規范，然后進行調用應用在系統中的各個地方，比如我們想調用一個顏色，不是去隨選用一個顏色，應該嚴格的從色彩系統中去調用，如果系統組件庫里沒有這個顏色，我們也絕對不可以使用，可以先用替代色做或者根據業務再進行補充顏色進組件庫為了后續的調用，這是一種比較嚴謹的使用方式。所以在建立組件庫的時候我們要考慮全面，組件庫中如果沒有相應的組件，我們應該試著反推一下，是否要加進組件庫中去，來進行系統的調用。在做中臺的過程中，我們一直使用Antdesign，我們對組件的名稱，組件的分類其實一點都不陌生，其實Antdesign也在借鑒國外的Bootstrap組件庫（大家感興趣可以下載Bootstrap組件庫進行查看），所以并不是Antdesign組件庫形成了一定的規則，它也是在沿用別人的規則，而這些規則也需要不斷的有大公司去繼承出來，所以慢慢衍生出來現在這樣的組件庫，那中臺設計，首先要搭建基本庫，把基本庫里的基礎一些系統搭建好后，我們繼續去做擴展庫。
如下圖，擴展庫中包含了很多內容，比如分了四類，導航系統，數據錄入，數據展示和反饋系統。其中導航系統又包含了，面包屑導航、下拉菜單、導航菜單、頂部導航等等，包括后面的數據錄入、數據展示、反饋系統也包含了很多內容。我們做這樣的擴展庫，也不需要做成像Antdesign的組件庫里包含的那么多，或者和新出得字節Arco組件庫，因為它們面向的是系統級的解決方案，各行各業都可以用它，它面向的是一個大系統，也許我們只涉及到了其中的20%，因為也沒有一個系統能用到它所有的組件，所以我們自己在設計組件庫的時候，一定是按照我們自己項目的范圍去做組件庫，而不是做一個大而全的，大而全的組件庫對我們也沒有意義。它們做的是公共平臺，而我們要做的是一個專屬平臺。
形成完基本庫和擴展庫后，第三步是建立方法庫。方法庫告訴我們的是什么時候用，比如我做了一個多選框，這個多選框應該什么時候用，是不是只要遇見一個選擇就去用多選框，肯定不是，應該加以說明什么時候用這個多選框。類似于是組件的設計說明。
最后再做一個案例庫，最佳實踐庫，具體組件什么時候用我們知道了，接著案例庫就是在告訴我們應該如何正確的使用，或者說的方法是什么。比如標簽的左對齊和右對齊，這種情況都對，什么時候用頂對齊，什么時候用左對齊，什么時候用右對齊呢？那么根據眼動儀實驗數據數據來看，并且結合給出一些工作中業務中的最佳實踐得案例放進去，給使用的人去做指引。
所以設計師做的事情，不僅僅是應用組件庫和創造組價庫，還應該指導其他設計師，指導開發人員在去復用每個頁面組件的的時候，應該怎么正確的使用，這也是在B端設計中一個關鍵的環節，同時我們的視覺系統一定也是和業務有關聯度的，所以在B端中做設計一定也不會脫離業務去做，我們一定要聯系到實際的業務場景中，這個業務場景指的就是業務和視覺的結合，在做C端的時候，業務場景一定不會比B端多，C端的業務場景大多是定制化的業務場景，它要求的是個性化，不要求通用，盡量得個性化，比如圖標、按鈕、頁面，而B端需要統一化，中臺組件庫的落地，可以大大提高設計師的工作效率和開發人員的協同效率，嚴謹的調用組件使用組件，可以使得系統頁面保持高度的一致。
如圖1：可以看出縱列的關系更緊密，因為縱間距小于行間距。
如圖2：可以看出行間距大于列間距，它得橫向關系更加緊密。通過圖中這樣的視覺設計為什么會感覺間距更加緊密呢？這屬于用戶心理學的應用，如果元素相鄰的更近，元素之間的關系就會更加的緊密。
如圖3：如果元素相鄰的關系都是保持一樣的，那么它們的關系是相對對等的。
由此可以得出結論，如果相鄰的關系越近，它們的關聯度就越近，如果相鄰的越遠，它們的關聯度就越遠。
應用案例：如圖4卡片中得標題和內容，設計中把標題和內容進行區分，所以我們會做大量的留白，這樣的留白就會讓信息結構具有層次感，層次感就是指它們信息結構的關聯度，如果想讓它們有關聯度，就讓它們距離近一點不要做區分，如果不想讓它們有關聯度，或者關聯度出現一個等級的區分，那么就可以加一條線，讓它們之間的關聯度分隔開。這就是格式塔接近性的應用。
如圖5：如果去區分右邊的形狀，通常我們會根據形狀進行區分，因為人的潛意識會認為相似的形狀會更有相關的分類性。這就是格式塔中的相似性原則。
應用案例：如果文字的標題大小是保持一致的，包括它有統一的大小，統一的色彩，統一的字號，那系統中的其他同樣功能的地方，都應該用統一的文字，這就是格式塔相似性的應用，比如圖標也是一樣，只有用了相似的圖形大小，相似的顏色，在相同的位置，用相同的圖標進行表達，圖標之間的設計才具有相似性。
如圖6：可以看到有一個L，是主體與背景進行了區分，如果在設計的時候讓L看的更加明顯，我們采用的辦法就是將主體的色彩或者形狀變的更加獨特，或者將背景的顏色變得更加分明，這樣就可以做到那個L看的更加明顯。這就是主題與背景區分原則。
應用案例：比如警告彈出，可以用色彩去區分，目標就是讓用戶看的更加得清晰，當警告的時候給用戶一個警告的信息，當成功的時候給用戶一個成功的信息。還有類似對話框的彈出，采用背景變暗和加陰影的方式，都使用到了格式塔的主體與背景變化關系的原理。因此應用在我們設計系統中，前景和背景進行區分的時候，我們就可以通過色彩進行區分，色彩的區分要保持統一，比如背景色彩透明度50%同時加一些背景模糊，其他的背景也需要保持一致，陰影也是一樣，如果把陰影放在一個平面上，距離平面越近，它得陰影越短，距離平面越遠，它得陰影越長，這也是陰影的層級關系。
如圖7：可以看出這是一個四分之一的圓形。
如圖8：這個圖可以看出是一個五角星。
封閉性應用案例：當一個形狀被另外一個形狀或者被另外一個色彩阻斷的時候，并不影響人們對這個形狀額外得認知，一定會腦補出另外一個形狀，這個原則和我們UI的關系是什么呢？比如一個loading，半圓一直在旋轉，或者圖表中的圓占比，我們就可以判斷出誰大誰小，誰多誰少，判斷出當前的進程和位置，封閉性原則通常應用在圖標的設計，圖表的設計和步驟條的設計中。
如圖9：可以看出用一些簡單得形狀來體現，其中三角形具有明顯的指向性，三角形箭頭指向右邊，上面五個是一組，可以看出它們具有連續性；另外一組三角形箭頭指向右下角，可以看出它們是連續的一組。不同的形狀會有連續性，箭頭也特別有指向性，這就是為什么返回和前要進放在不同的位置，當我們的數據需要有連續的時候，我們也要使用相似的形狀來表達，這就是連續性原則的應用。
同理如圖10：連續性一定是要有連續等階的變化，從左上角開始，向下和向右我們可以看出有明顯的顏色連續等階變化，通過色彩的透明度也可以做到連續性。
很多公司或者不同公司有不同的命名方式，這個需要和團隊開發提前做溝通，主要以方便開發習慣操作為主，如果不命名也不能非得說成是錯誤的，命名可以理解成是一件錦上添花的事情，因為一切都以效率優先，命名自然會影響工作效率，通常情況，組件的命名可以分成組件的名稱、級別、尺寸、狀態，這樣的命名順序來進行，這樣命名開發使用也比較方便，因為是按照了開發的統一規則來進行命名的。如圖所示：
當英文不好的時候，推薦大家記常用組件英文名，以及常用狀態名、級別名、內部名、尺寸名和位置名，那這些英文也幾乎涵蓋了工作中80%的英文詞匯，收藏記憶哦~
至此B端系統設計總概系列為終結篇，回顧第一篇主要內容是如何正確設計組件庫，B端業務調研的具體過程步驟，以及視覺規范的建立，可以看出第一篇屬于B端設計的方法論或者設計指導，也是為開展B端設計前的一些準備工作；回顧第二篇總概主要內容是如何設計表單、表格、圖標、儀表盤這些經常用到的設計難點，第二篇更加講究設計落地過程中遇到的疑難雜癥，專業技法；回顧當前總概三，主要內容就是中臺規范的建立和自適應、響應式適配的難點，主要是成系統的B端設計步驟。我們都知道B端市場剛剛打開，而且當下對B端設計師的需求還遠遠不能滿足我國現代化建設，數字化推進這么的大市場，作為UIUX，更早的拓寬一條路是我們當下必要的選擇，謝謝閱讀，祝愿各位2022乘風破浪，B端設計學有所成，如虎生翼！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計的小編 http://www.syprn.cn
