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