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