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

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

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

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

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

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

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

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

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

大分辨率條件下

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

小分辨率條件下

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

歡迎關(guān)注作者的微信公眾號(hào)：「設(shè)計(jì)小余」