2020-4-11 資深UI設計者
B 端產品也叫 2B(to Business)產品,使用對象一般為企業客戶或組織。B 端產品幫助企業或組織通過協同辦公,解決某類管理問題,承擔著為企業或組織提升效率、降低成本、控制風險從而提高企業收入,減少企業內部損耗的重要職責。B 端產品的工作是合理實現企業需求,提高產品核心競爭力,并提升市場價值。在國內互聯網語境中,B 端產品的狹義解釋也基本可以和面向企業的 「網頁程序」 等同,用更接地氣的稱呼可以叫「管理平臺」、「管理端」 。
B 端產品大致分為兩類,一種是支撐前臺產品的,一種是管理各種資源的,前者就是我們熟悉的后臺產品,后者就是給各個企業服務,提高各個企業工作效率的 B 端產品。
1. 支撐前臺產品的:
C 端產品線的后臺產品,比如我們常用的淘寶、微信、餓了么、美團這種 C 端產品,他都需要有個后臺進行各種前端信息的管理。
平臺級工具產品,比如微信公眾號、頭條號等對用戶和文章的數據實時統計,可編輯文章,回復消息等
2. 管理各種資源的:
1. 從定義上:
2. 從用戶群體上:
3. 業務場景
4. 用戶的訴求:
5. 盈利模式:
了解了 B 端和 C 端的區別,B 端產品的實用性大于美觀性,能切實解決問題、配置資源的 B 端產品才是一個好的 B 端產品。在設計上對于操作和展示內容無關的元素,越少越好。很多人剛開始接觸 B 端,會熱衷于以 C 端視覺標準進行設計,對于真實的使用體驗來說顯得過于冗余、炫技。那么在 B 端設計中該如何思考去設計呢?下面我以設計前、中、后的三個方向去闡述我在做 B 端設計中的一些思考:
需求分析
使用場景、硬件情況
梳理交互流程:拿到需求后切勿打開花瓣站酷一陣擼,一定要對需求進行梳理(有的公司有專門的交互設計來做)做 B 端產品最重要的是對業務的理解,在梳理過程中一定要跟產品隨時溝通,產品的業務流程是怎樣的?有哪些同類型的產品?和他們相比我們的產品有什么特色和特點?充分理解了業務再去做設計就會有事半功倍的效果。
情緒版,定義風格:梳理完需求就可以定義設計風格了,在設計風格上盡量做到簡潔,B 端產品實用性大于美觀性,減少不必要的裝飾元素給用戶操作上帶來干擾。這里可以運用情緒版去定義設計風格,大概的流程就是,根據產品業務背景定義設計關鍵詞、根據關鍵詞去找參考圖片定義設計風格,產品的主題色也可以根據情緒版來去定義。
布局上根據導航可分為以下三種:
水平導航布局:類似于普通網頁的布局樣式導航,順應了從上至下的正常瀏覽 順序,方便瀏覽信息;頂部寬度限制了導航的數量和文本長度。適用于導航較少,頁面篇幅較長的產品。
垂直導航布局:可將導航欄固定在左側,提高導航可見性,方便頁面之間切換;頂部可放置常用工具,如搜索條、幫助按鈕、通知按鈕等。菜單欄還可以展開收起,適用于結構簡單的產品。
混合導航布局:結合了水平導航和垂直導航的特點,層級可以擴展到二、三級菜單,且能夠更加清晰地區分常用業務功能操作和輔助操作。適用于功能模塊較多、較復雜的工具類型后臺。
不同形態的布局,適配方式也不同。在做設計之前了解下適配的原理,避免在不同設備上出現視覺上的誤差。水平導航布局,在適配方案中做法是對兩邊留白區域進行最小值的定義,當留白區域到達限定值之后再對中間的主內容區域進行動態縮放。如圖:
垂直導航布局和混合型導航布局,在適配方案中常見的做法是將左邊的導航欄固定,對右邊的工作區域進行動態縮放。如圖:
最后說一下布局上的柵格,柵格會使整體頁面更加工整簡潔,內容區域采用 24 柵格(并非固定數值,參照案例 24 柵格布局),就不一一敘述柵格的定義與運用了,大家可以參考下網上有好多關于柵格的文章,如圖:
顏色
顏色上大致分為品牌色(可以結合業務屬性)、功能色(比如紅黃綠藍燈成功、出錯、失敗、提醒、鏈接等。功能色的選取需要遵循用戶對色彩的基本認知)、 中性色(如深灰中灰淺灰,文字部分應用居多,此外背景、邊框、分割線、等場景中也非常常見) 其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。
字體
在 B 端系統中優先使用系統默認的界面字體,常用中文字體有微軟雅黑、蘋方、思源黑體,英文字體有 Arial、Helvetica 系統不同展示的字體也不相同。
字體大小常見的有 12px、13px、14px、16px、20px、24px、30px 等。
規范
一份好的規范能夠讓設計和開發更加的工作,并且能夠指引一些設計的細節,通過對大小、顏色、邊距等、呼吸感等一些細節點的標注,可以讓新加入的設計師快速上手設計。一個項目會有多個設計師的參與,規范化的設計語言,避免因設計控件混亂而影響設計輸出。好的設計規范還能統一在產品中不同頁面的相同板塊的樣式問題,為開發組件庫奠定基礎。
如何建立一份規范呢?大概總結以下幾點:
定義好設計規范能大大提高設計師的工作效率,在同一個項目中也能更好的把控項目的視覺規范,幫助設計師復用及設計延展。
組件
B 端產品的決策方是老板和管理層,在設計 B 端產品中往往也是大多數情況下會有接到比較緊急的需求的情況,所以在設計過程中就需要我們設計師更加去注重效率,提高產能。做東西時要有組件化思維,去總結分析頁面模塊中的一些共性,跟開發共同完成產品的組件庫。
如果沒有前端工程師,我們的設計組件庫就是 PNG。所以,在開工前,一定要和那個技術不錯的前端工程師聊聊做設計組件庫的事情,其中最重要的是確定好:選擇什么樣的前端框架。
如果組件庫服務的是 B 端或者中后臺系統,那其實有很多可參考的開源組件框架:Ant Design、ElemetUI、Layui 等,注意不同的框架用到的前端技術不一樣,兼容的瀏覽器版本也不一樣,這要根據你們技術情況做選擇。如果覺得開源框架的風格和你們的產品不統一,那就需要二次設計和開發封裝。
下面是螞蟻金服組件庫,如圖根據組件的功能特點做出了分類:通用、布局、導航、數據錄入、數據展示、反饋、其他等。大家可以去官網查看,這里就不再一一做闡述了。
這個是餓了么的組件庫:
推薦幾個官方組件庫:
做之前大家一定要去多去查看這些大廠做的已成型的開源組件庫,然后再結合工作業務特色做出自己公司特有的定制化組件庫。有了組件庫之后,再接到緊急需求,我們就可以做到事半功倍的效果。先去分析頁面的構成,然后花費 80% 的時間去設計需求中 20% 的頁面,剩下的通用型頁面就可以直接用組件庫堆出來了。
設計走查
在完成設計后,要整體對設計頁面進行走查。從信息層級、文字、圖標、圖片等方面進行多次設計驗證與測試。
高質量設計交付
設計稿命名一定要清晰規范,現在好多切圖標注的插件,一鍵生成切圖標注。現在就沒有必要單獨整理切圖標注了,但是設計稿在交付前切圖的命名一定要在設計稿里整理清楚,規范命名方便開發查閱。
推薦幾款比較常用的切圖標注的插件:
設計追蹤、校驗
設計稿給到開發在設計過程中,要隨時跟開發溝通。項目上線后要對線上效果進行實時 UI 校驗,保證開發同學對設計稿的高度還原。還有就是對設計上線后的驗證工作,用戶使用和反饋是優化產品的重要途徑,針對性地在一些主流的頁面模塊按鈕進行一些數據的埋點,統計下用戶的點擊狀況,實時對數據進行一些跟進,為下次頁面改版優化,提供有力的數據支撐,提升產品的用戶體驗。
不管 B 端還是 C 端,設計的價值在于通過視覺表現的方式去助力公司、助力產品實現用戶的需求、幫助用戶解決問題。B 端產品相對而言,場景、功能、業務流程、信息架構要比 C 端更復雜,面對的異常情況也比較多,所以 B 端在設計風格上盡量做到簡潔,B 端產品實用性大于美觀性,在每一個功能的設計都需要你去思考很多方面:用戶易用、信息層級、未來擴展,你都要做出取舍,而對于每個模塊都需要你思考、結合用戶場景。所以想要做好 B 端設計,一定要去了解業務,了解用戶需求。
文章來源:優設 作者:小六可視化設計