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