2022-3-23 高勁
我們知道在做平面設計時，例如設計一張海報，我們需要海報的設計尺寸是多大？海報是否需要印刷？這些規范我們都需要提前知曉，避免返工，同時APP設計以及網頁設計等都需要提前知道設計規范的尺寸，內容區域的劃分。
在B端系統設計中，設計的尺寸一般會根據用戶的設備使用占比來定義設計稿的尺寸，常用的B端系統設計尺寸為1366-1920px，而在我目前涉及到的產品中，用戶使用的設備大多數是1366px分辨率，所以為了用戶更好的展現以及使用體驗，設計稿的尺寸我們采用了1366X768px，但是由于項目是瀏覽端使用，所以高度會減去瀏覽器固有的導航欄高度，瀏覽器固有的導航欄高度為110px，所以設計師實際設計稿的尺寸為1366X658px，在設計時需要嚴格按照真實效果的尺寸，才能更大程度的展示最終的效果，避免開發后呈現的效果與設計稿出現較大的差距。
適配是現在比較常見的，為了用戶能在不同設備以及不同分辨率下能夠有更好的體驗，所以很多軟件都會做相應的適配功能，但是是否需要適配也需要在設計前期明確，因為如果需要適配的話，設計稿需要考慮更多的設備以及不同分辨率下的展示效果，相同的內容在不同設備和分辨率下展示的樣式定會不同，所以需要考慮每個頁面每個模塊每個信息的展示樣式是否合理，以及在不同設備和分辨率下應該怎么展示的問題，需要在設計該頁面時，提前想好并備注在頁面，便于開發清晰的知道頁面的適配規則。
選擇適配一般會用到柵格系統，這樣才能更好的做好適配，關于柵格系統我這里就不多介紹，后期也會一一整理。
例如下面我截取了antdesign組件的適配方案，在不同分辨率下的適配樣式可以清晰的看到。
（視頻請看原文鏈接）
01：在大分辨率下導航展開，頂部固定，右邊內容分為4、1、2模塊展示
02：在小分辨率下導航展開，頂部固定，右邊內容分為2、2、1、1、1模塊展示
03：在更小分辨率下導航收起，只展示icon，頂部固定，右邊內容分為2、2、1、1、1模塊展示
04：在更更小分辨率下導航全部收起，頂部固定，內容分為2、2、1、1、1模塊展示
05：在移動端下導航全部收起，頂部固定，內容分為1、1、1、1、1、1、1模塊展示
前面第二點說的是關于布局適配，另外需要注意的是界面中的字體的適配問題，也是需要提前制定好不同分辨率下字體適配的規范，并且一開始就需要告知前端開發工程師，才能做好適配，不然又將是一件極大的返工事件，當然也有很多系統是一套字體適配所有分辨率，這樣也減少了開發成本，但是也有一個不太友好的點，相同的字體大小在不同分辨率下看到的效果會有所差異，比如16px的字體在1366及以下分辨下下會顯得很大，但是在1920及以上分辨率下看著比較合適，所以在選擇字體大小時，需要考慮相同字體在不同分辨率下的顯示效果。
例如下面的優設網站，在不同分辨率下布局變化的同時字體大小也會跟隨變化，上面截圖和視頻中關于antdesign網站的布局適配，但是字體只采用了一套，這就是選擇是否適配字體后的不同效果。
（視頻效果請查看原文鏈接）
寬度的最小值也是可有可無，如果需要做到精細化，建議增加寬度最小值的限制，因為如果不做最小寬度限制，將會出現在小分辨率下界面布局重疊和頁面混亂無法使用的情況，部分最小值會限制在移動端的分辨率，關于最小值的限制也是需要根據實際項目情況而選擇，如果需要達到移動端使用的效果，最好適配到移動端的分辨率，如果只需要在web端使用，那么就將最小值限制在web端較小的分辨率即可，當達到最下分辨率繼續減小寬度，就選擇出現滾動條，以達到頁面正常使用的情況
上面關于antdesign和優設的舉例都是適配到移動端，下面再看一個關于適配到web最小值的情況，這里就拿最常見最常看的站酷來舉例吧。
每個品牌、每個軟件都會根據自身的特點選擇合適的風格，關于軟件的風格一般會選擇與企業品牌以及軟件特征做出合適的風格，而常見的風格也有很多種，扁平風是大多數軟件系統通用的，不會出錯的風格選擇，更多的是從界面風格的配色布局的細節出發。
例如我們常用的藍湖就是選擇淺色的扁平風，而藍湖旗下的mastergo則采用深色扁平風的設計
這里的配色規范主要是只界面中細節的配色，上面第五點已經有講到關于風格的選擇，其實也有涉及到淺色和深色的配色，而這里的配色規范主要只界面中的主題色、輔助色、點綴色等一些具體模塊、具體字體的配色，一般來說，軟件的主題配色會選擇和品牌主題色統一，比如藍湖選擇的是主題藍色、站酷選擇的是主題橙黃色、優設選擇的是主題橙紅色等等。
關于配色規范我記得原來在文章【B端系統】我的設計踩坑總結（上）中也曾分享過關于整個系統主題是更改的規范，由于B端系統是服務于企業的，每個企業都有自己獨立的品牌色，一般企業選擇使用其他企業的軟件系統，都希望能夠統一自己的品牌色，讓自己的使用的系統和企業統一風格，所以在系統中會增加一個一鍵修改系統主題色的功能，而這個功能的設置，需要對全局使用，所以在做設計時，需要考慮色彩的可變性以及整體的統一性。
對于B端系統來說，很多常用的組件其實已經有很多開源的，開發人員可直接選擇一個組件庫使用里面的組件運用到自己研發的軟件中即可，只需要根據自身軟件系統的風格修改樣式即可，例如常見的組件庫有antdesign，而我目前就是使用的antdesign，當然還有很多的組件庫可以選擇使用，我有整理過相關的文檔分享到群內，需要的小伙伴可以找我要哦！
一些常用的組件交互可以采用組件庫默認的樣式，但是由于系統是多頁面多模塊的，為了讓系統的使用學習成本降低，并且用戶體驗更友好，所以一般也會制定一些常用的、統一的交互規范。
這里分享一個我目前項目中運用到的一個比較小的交互規范，所有的icon操作功能在hover狀態下，底部增加圓角正方形的色塊，同時增加氣泡懸浮提示操作按鈕功能文案，便于用戶更能清晰的看到當前鼠標的位置，以及icon的變化，圖標的功能目的。一個小的交互貫穿到整個系統中，讓整個系統交互達到統一，同時也能提升用戶體驗。
在實際設計中會有更多的細節需要注意，也有更多的規范需要制定，這里只分享在設計前期一定要注意的規范，避免設計完成后開發時的疑惑而導致設計和開發的返工事件，后期會不斷總結關于B端系設計的知識，希望自己也能不斷積累和學習。
文章來源：站酷 作者：設計小余
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.0391cbd.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務