【B端系統】我的設計踩坑總結(上)

4 評論 6982 瀏覽 28 收藏 9 分鐘

編輯導語:C端和B端是工作中的高頻詞匯,C端的設計更注重視覺和營銷,而B端更注重業務和功能。本文側重介紹B端產品系統,總結了幾條作者在工作中的實戰經驗,供大家參考和學習。

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

一篇文章讓你簡單了解B端產品。

B端系統主要針對我們使用的管理系統,例如我們常用的:ERP系統、CRM系統、OA系統、WMS系統、SaaS系統等等。

雖然這些系統統稱為B端系統,但是在實際業務中也會有所區分,下面我總結了幾條關于我在工作中踩過的坑。

一、系統的自適應

【B端系統】我的設計踩坑總結(上)

B端系統主要是Web端使用,對于大多數的系統來說很少會做大幅度的自適應的效果,一般的自適應效果只是會根據尺寸的變化適當的變化界面中的元素大小,但是也會有例外。

由于我往期做的B端系統都沒有涉及到自適應的效果展示,所以在工作中我就沒有考慮到自適應這一點,但是設計稿全部設計完成后,等到前端開發時,產品經理卻提出需要做到不同分辨率下的自適應。

當聽到這一個消息,我頓時就愣住了,因為項目的設計工作基本都收尾了,并且前期也沒有任何人提到需要做自適應的效果,而我作為設計也沒有考慮到這一點(由于往期工作經驗慣性導致),突然提出這個要求,無疑是對設計的推翻,需要重新考慮每一個界面的自適應效果,這個工作量也是巨大的。

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

【B端系統】我的設計踩坑總結(上)

大分辨率條件下

【B端系統】我的設計踩坑總結(上)

小分辨率條件下

而對于上面展示的兩個不同分辨率小的效果只是一個情況下的展示效果,對于不同分辨率大小的額情況下,還會根據項目實際情況細分不同的情況。

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

二、系統文字規范

【B端系統】我的設計踩坑總結(上)

設計規范是設計前期都會準備的,文字的規范也不例外,我們常用的文字規范是直接從最小字體到最大字體做一個規范定制,例如一般的文字規范會設置文字的大小、粗細,如下:

【B端系統】我的設計踩坑總結(上)

但是這個字體得分規范只針對不同分辨率下而定制的,對于市面上多種分辨率的顯示器,我們如果直接采用一套字體規范,就會出現在小分辨率下字體太大,顯示內容太少的問題,在大屏幕下字體顯示太小,內容顯示太密集的問題。

另外有個特別注意的點是:部分顯示器默認分辨率并不是100%。

【B端系統】我的設計踩坑總結(上)

通過實際工作和系統使用人群顯示器的顯示統計顯示:大部分的用戶使用的都是1440小分辨率的顯示器,并且系統默認推薦的都是25%和50%的縮放布局,很少會有用戶會自動去改變這個顯示器的默認設置,這樣的情況就會造成我們原本設定的字體和布局規范都會受到影響。

針對這些情況我們總結了一套方案:將字體規范分為三個梯度,適配不同情況小的顯示。

【B端系統】我的設計踩坑總結(上)

三、系統配色規范

【B端系統】我的設計踩坑總結(上)

常規的配色方案當然我也不會在這個避坑文章中分享,對于我們常規的配色規范一般都是整理出整個系統會使用的配色,在設計稿中直接采用配色規范內的色彩即可,例如:

【B端系統】我的設計踩坑總結(上)

而我這里要分享的是關于企業自定義的配色方案怎么與合作客戶的平臺配色融合,達到每個企業的配色不同,并且和整體系統協調一致的效果,這個也是我工作中遇到的一個真實項目問題。

由于B端系統項目大部分是企業自主研發的,企業定會有屬于項目的主題色以及詳細的配色方案,但是這個配色方案并不適合其它的企業,因為每個企業自主系統的配色肯定是根據自己企業文化定義的主題色和配色方案。

例如:企業系統主題配色是藍色,而合作企業的主題色是橙色,合作客戶當然是希望使用的系統能變成自己品牌的顏色(橙色)這樣才能使自己企業使用的系統統一。

而對于這樣的情況,我們主要就需要從自主研發的系統配色出發,當然默認版本的主題色當然還是采用企業主題色,我們將系統中采用到的顏色作為可變量,只要界面中采用的色彩和主題色有關的,都采用一鍵控制色彩變化,也就是給系統增加一個主題色設置的功能。

【B端系統】我的設計踩坑總結(上)

由于設置了一鍵設置主題色的功能,所以我們每個和主題色有關界面的色彩都不能寫死,需要隨設置變化,并且設計師在做設計的時候,也要全局考慮,怎么樣才能達到一鍵設置,變化所有的顏色呢?可以直接采用主題色透明度的變化來做色彩區分,避免使用過多的色彩,否則就會出現不協調的情況。

 

本文由 @設計小余 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Pixabay,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 催耕,差不多的節點我也踩了分辨率的坑?? 最后是靠前端解決…

    來自廣東 回復
    1. 公眾號每周更新哈

      來自廣東 回復
  2. 催更

    來自廣東 回復
    1. 快啦,??

      回復