在工作中我們經(jīng)常提到 C 端和 B 端，兩者的區(qū)別還是很大的，特別是在業(yè)務(wù)和設(shè)計上都有較大的區(qū)別，所考慮的角度也不一樣，在我看來 C 端的設(shè)計更注重視覺和營銷，而 B 端更注重業(yè)務(wù)和功能，今天我就不過多介紹關(guān)于 C 端和 B 端的區(qū)分，不太了解的可以看看更多 C 端和 B 端相關(guān)文章。

B 端系統(tǒng)主要針對我們使用的管理系統(tǒng)，例如我們常用的：ERP 系統(tǒng)、CRM 系統(tǒng)、OA 系統(tǒng)、WMS 系統(tǒng)、SaaS 系統(tǒng)等等

雖然這些系統(tǒng)統(tǒng)稱為 B 端系統(tǒng)，但是在實際業(yè)務(wù)中也會有所區(qū)分，下面我總結(jié)了幾條關(guān)于我在工作中踩過的坑。

• 提前考慮系統(tǒng)是否需要做自適應(yīng)
• 根據(jù)用戶使用的顯示器做好字體梯度規(guī)范
• 為適配所有客戶主題色做好系統(tǒng)配色規(guī)范

提前考慮系統(tǒng)是否需要做自適應(yīng)

B 端系統(tǒng)主要是 Web 端使用，對于大多數(shù)的系統(tǒng)來說很少會做大幅度自適應(yīng)的效果，我們常見的自適應(yīng)效果只是會根據(jù)尺寸的變化適當(dāng)?shù)淖兓缑嬷械脑卮笮?，界面中模塊的位置不會做太大的變化

由于我往期做的 B 端系統(tǒng)很少涉及到自適應(yīng)的效果展示，所以在工作中我就沒有考慮到自適應(yīng)這一點(diǎn)，但是設(shè)計稿全部設(shè)計完成后，等到前端開發(fā)時，產(chǎn)品經(jīng)理卻提出需要做到不同分辨率下的自適應(yīng)。

當(dāng)聽到這一個消息，我頓時就愣住了，因為項目的設(shè)計工作基本都收尾了，并且前期也沒有任何人提到需要做自適應(yīng)的效果，而我作為設(shè)計也沒有考慮到這一點(diǎn)(由于往期工作經(jīng)驗慣性導(dǎo)致)，突然提出這個要求，無疑是對設(shè)計的推翻，需要重新考慮每一個界面的自適應(yīng)效果，這個工作量也是巨大的，并且我們最常見的自適應(yīng)效果基本都是官網(wǎng)等一些內(nèi)容頁面，對于 B 端系統(tǒng)來說確實是很少見。

例如：一開始在做設(shè)計需求的時候，并沒有考慮大幅度的自適應(yīng)效果，下面的設(shè)計稿圖開發(fā)完成后，只會變化每個數(shù)據(jù)分析圖模塊的尺寸大小，不會變換整體的位置，而對于自適應(yīng)的效果來說，就會涉及到位置的變化，包括搜索過濾條件的位置顯示都會受到影響。 

 大分辨率條件下 

上圖設(shè)計稿為 1920px 分辨率情況下的顯示效果，界面是在一屏下顯示頁面中的所有內(nèi)容，數(shù)據(jù)分析分模塊展示，橫向可同時排版兩個數(shù)據(jù)分析模塊內(nèi)容，在不做大幅度自適應(yīng)的條件下，變化瀏覽器的寬度，頁面內(nèi)容只會變化每個模塊的大小，排版的位置不會改變。 

 小分辨率條件下 

上圖設(shè)計稿為 1280px 分辨率情況下的顯示效果，由于分辨率大幅度的減小，在做了大幅度自適應(yīng)的條件下，界面中每個數(shù)據(jù)分析模塊的位置也發(fā)生了變化，使用戶在不同分辨率下能更好的瀏覽界面中的內(nèi)容。

同分辨率大小的情況下，還會根據(jù)項目實際情況細(xì)分不同的情況，比如我們 WEB 常用的分辨率有 960~2560px 的大小范圍，尺寸的范圍是比較大的，我們需要考慮在不同分辨率下展示不同的效果，這樣設(shè)計稿就會出現(xiàn)多種樣式，這些需求都是需要設(shè)計前期考慮，不然等到設(shè)計完成后再考慮就會更費(fèi)時費(fèi)力，影響項目進(jìn)度。

根據(jù)用戶使用的顯示器做好字體梯度規(guī)范

設(shè)計規(guī)范是設(shè)計前期都會準(zhǔn)備的，文字的規(guī)范也不例外，關(guān)于這些基礎(chǔ)的設(shè)計規(guī)范相信大家都不會感到陌生，我們常用的文字規(guī)范是直接從最小字體到最大字體做一個規(guī)范定制，例如一般的文字規(guī)范會設(shè)置文字的大小、粗細(xì)，最大和最小字體的限制，如下：

但是這個字體的規(guī)范是針對相同分辨率下而定制的，對于市面上多種分辨率的顯示器，我們?nèi)绻苯硬捎靡惶鬃煮w規(guī)范，就會出現(xiàn)在小分辨率下字體太大，顯示內(nèi)容太少的問題，在大屏幕下字體顯示太小，內(nèi)容顯示太密集的問題，另外有個特別注意的點(diǎn)是：部分顯示器默認(rèn)分辨率并不是 100%。

通過對實際系統(tǒng)使用人群顯示器的統(tǒng)計顯示：大部分的用戶使用的都是 1440 小分辨率的顯示器，并且系統(tǒng)默認(rèn)推薦的都是 25%和 50%的縮放布局，很少會有用戶會手動去改變顯示器的默認(rèn)設(shè)置，這樣的情況就會造成我們原本設(shè)定的字體和布局規(guī)范都會受到影響。

針對這些情況我們總結(jié)了一套方案：將字體規(guī)范分為三個梯度，適配不同情況小的顯示： 

將字體規(guī)范分為三個梯度，字體的變化在基礎(chǔ)設(shè)計稿上做變更，統(tǒng)一增加或者減小相同的字號，保證最小的字體為 12px，這樣就能解決在不同分辨率下內(nèi)容顯示過少過大等問題，同時開發(fā)人員也可以更方便對全局字體做調(diào)整，后期系統(tǒng)維護(hù)也更容易。

適配所有客戶主題色，做好系統(tǒng)配色規(guī)范

常規(guī)的配色方案當(dāng)然我也不會在這個避坑文章中分享，對于我們常規(guī)的配色規(guī)范，一般都是整理出整個系統(tǒng)會使用的配色，在設(shè)計稿中直接采用配色規(guī)范內(nèi)的色彩即可，例如：

而我這里要分享的是關(guān)于企業(yè)自定義的配色方案怎么與合作客戶的平臺配色融合，達(dá)到每個企業(yè)的配色不同，并且和整體系統(tǒng)協(xié)調(diào)一致的效果，這個也是我工作中遇到的一個真實項目問題，由于 B 端系統(tǒng)項目大部分是企業(yè)自主研發(fā)的，企業(yè)定會有屬于項目的主題色以及詳細(xì)的配色方案，但是這個配色方案并不適合其它的企業(yè)，因為每個企業(yè)自主系統(tǒng)的配色肯定是根據(jù)自己企業(yè)文化定義的主題色和配色方案，而不同企業(yè)使用的系統(tǒng)都會貫穿，從而需要考慮在不同系統(tǒng)中穿梭，界面風(fēng)格的統(tǒng)一。

例如：企業(yè)系統(tǒng)主題配色是藍(lán)色，而合作企業(yè)的主題色是橙色，合作客戶當(dāng)然是希望使用的系統(tǒng)能變成自己品牌的顏色(橙色)，這樣才能使自己企業(yè)使用的系統(tǒng)在視覺上達(dá)到統(tǒng)一。

而對于這樣的情況，我們就需要從自主研發(fā)的系統(tǒng)配色出發(fā)，當(dāng)然默認(rèn)版本的主題色還是采用企業(yè)主題色，我們將系統(tǒng)中采用到的顏色作為可變量，界面中采用的色彩和主題色有關(guān)聯(lián)的，都采用一鍵控制色彩變化，也就是給系統(tǒng)增加一個主題色設(shè)置的功能。

由于設(shè)置了一鍵設(shè)置主題色的功能，所以每個與主題色有關(guān)聯(lián)的界面色彩部分前端都不能寫死，需要隨設(shè)置變化，并且設(shè)計師在做設(shè)計的時候，也要全局考慮，怎么樣才能達(dá)到一鍵設(shè)置，變化所有的顏色呢?

這里可以直接采用主題色透明度的變化來做色彩區(qū)分，避免使用過多的色彩，否則就會出現(xiàn)不協(xié)調(diào)的情況，這樣整個界面與主題色相關(guān)的配色都可以做到一鍵控制色彩變更，實現(xiàn)系統(tǒng)匹配不同企業(yè)的系統(tǒng)，從而達(dá)到視覺風(fēng)格統(tǒng)一的效果。