編輯導(dǎo)語：C端和B端是工作中的高頻詞匯，C端的設(shè)計(jì)更注重視覺和營銷，而B端更注重業(yè)務(wù)和功能。本文側(cè)重介紹B端產(chǎn)品系統(tǒng)，總結(jié)了幾條作者在工作中的實(shí)戰(zhàn)經(jīng)驗(yàn)，供大家參考和學(xué)習(xí)。

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

一篇文章讓你簡(jiǎn)單了解B端產(chǎ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)于我在工作中踩過的坑。

一、系統(tǒng)的自適應(yīng)

B端系統(tǒng)主要是Web端使用，對(duì)于大多數(shù)的系統(tǒng)來說很少會(huì)做大幅度的自適應(yīng)的效果，一般的自適應(yīng)效果只是會(huì)根據(jù)尺寸的變化適當(dāng)?shù)淖兓缑嬷械脑卮笮。且矔?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è)工作量也是巨大的。

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

大分辨率條件下

小分辨率條件下

而對(duì)于上面展示的兩個(gè)不同分辨率小的效果只是一個(gè)情況下的展示效果，對(duì)于不同分辨率大小的額情況下，還會(huì)根據(jù)項(xiàng)目實(shí)際情況細(xì)分不同的情況。

比如我們WEB常用的分辨率有960~2560px的大小范圍，尺寸的范圍是比較大的，我們需要考慮在不同分辨率下展示不同的效果，這樣設(shè)計(jì)稿就會(huì)出現(xiàn)多種樣式，這些需求都是需要設(shè)計(jì)前期考慮的，不然等到設(shè)計(jì)完成后再考慮就會(huì)造成項(xiàng)目進(jìn)度延遲。

二、系統(tǒng)文字規(guī)范

設(shè)計(jì)規(guī)范是設(shè)計(jì)前期都會(huì)準(zhǔn)備的，文字的規(guī)范也不例外，我們常用的文字規(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%。

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

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

三、系統(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)主題配色是藍(lán)色，而合作企業(yè)的主題色是橙色，合作客戶當(dāng)然是希望使用的系統(tǒng)能變成自己品牌的顏色（橙色）這樣才能使自己企業(yè)使用的系統(tǒng)統(tǒng)一。

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

由于設(shè)置了一鍵設(shè)置主題色的功能，所以我們每個(gè)和主題色有關(guān)界面的色彩都不能寫死，需要隨設(shè)置變化，并且設(shè)計(jì)師在做設(shè)計(jì)的時(shí)候，也要全局考慮，怎么樣才能達(dá)到一鍵設(shè)置，變化所有的顏色呢？可以直接采用主題色透明度的變化來做色彩區(qū)分，避免使用過多的色彩，否則就會(huì)出現(xiàn)不協(xié)調(diào)的情況。

本文由 @設(shè)計(jì)小余 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Pixabay，基于 CC0 協(xié)議