詳解|組件庫(kù)可以替代 B 端設(shè)計(jì)師么?

2021-6-24    seo達(dá)人


有很多同學(xué)跟我說,自從 Ant Design 的組件變得越來越完善,自己也越來越不知道 B 端設(shè)計(jì)師的工作意義和價(jià)值是什么了。其實(shí)除了 Ant Design,還有很多常見的、優(yōu)秀的組件庫(kù),都為 B 端設(shè)計(jì)和開發(fā)的工作提供了便利。那么使用組件庫(kù)真的可以替代 B 端設(shè)計(jì)師么?當(dāng)然不能。B 端設(shè)計(jì)師有其存在的獨(dú)特價(jià)值,本文就跟你聊聊組件和設(shè)計(jì)師之間的關(guān)系。

 

圖片

 

1 . 組件是「效率」工具

組件是工具,用來為設(shè)計(jì)師和開發(fā)提升工作效率。上文中所提到的 Ant Design 的初衷也并不是要做一款替代設(shè)計(jì)師的組件庫(kù),其根本目的之一也是提高整個(gè)團(tuán)隊(duì)的工作效率。使用組件可以從兩個(gè)方面提效:

(1)工作內(nèi)容上:可以將不必要的、重復(fù)性勞動(dòng)的時(shí)間節(jié)省出來

(2)工作流程上:便于設(shè)計(jì)師與前端開發(fā)做交接和協(xié)作,節(jié)省溝通成本

 

2 . 組件是「質(zhì)量」保障

使用組件,可以在一定程度上保證設(shè)計(jì)工作的質(zhì)量。組件規(guī)范了前端和設(shè)計(jì)師的工作方法,建立相對(duì)底層的系統(tǒng),設(shè)定了設(shè)計(jì)和開發(fā)的質(zhì)量底線。

圖片

基于組件規(guī)范,設(shè)計(jì)和開發(fā)的產(chǎn)品更容易具備:

(1)一致性:具備相對(duì)一致的表現(xiàn)樣式,設(shè)計(jì)風(fēng)格和交互體驗(yàn)上均可保持統(tǒng)一

(2)可用性:對(duì)于用戶操作,可以保證最基本的可理解性和可操作性

(3)審美性:符合基本審美標(biāo)準(zhǔn),雖不會(huì)很亮眼,但也不會(huì)很難看

 

3 . 設(shè)計(jì)師要「沉淀」業(yè)務(wù)組件

B 端設(shè)計(jì)師可以嘗試沉淀有針對(duì)性的業(yè)務(wù)組件。很多業(yè)務(wù)領(lǐng)域有其獨(dú)特性,比如金融類組件和政務(wù)類的產(chǎn)品頁面列表內(nèi)容就有很大區(qū)別。單一的元素組件在應(yīng)用的過程中是可以被再次組合和沉淀的。

舉個(gè)例子,我在做業(yè)務(wù)需求設(shè)計(jì)時(shí),相比于 Ant Design,其實(shí)更常用的是 TechUI —— 它是建立在 Ant Design 基礎(chǔ)上的、由我們螞蟻的設(shè)計(jì)師通過對(duì)業(yè)務(wù)需求的提煉、組合和封裝,做成的一套于螞蟻?zhàn)约旱摹緲I(yè)務(wù)組件】。

二者的區(qū)別是:

  • Ant Design:是所有人的,是通用的,是單一的原子級(jí)別的(比如一個(gè)輸入框)組件。
  • TechUI:是螞蟻?zhàn)约旱?,是私有的,是組合的區(qū)塊級(jí)別的(比如一整個(gè)表單)組件,更具備螞蟻集團(tuán)自己的業(yè)務(wù)屬性。

圖片

針對(duì)你公司不同業(yè)務(wù)類型,沉淀出不同種類的區(qū)塊級(jí)別的組件,這類組件使用起來也會(huì)更加得心應(yīng)手、加倍提效。這也是 B 端設(shè)計(jì)師可以去學(xué)習(xí)和精進(jìn)的一點(diǎn)。

 

4 . 設(shè)計(jì)師要「洞察」業(yè)務(wù)訴求

使用組件,可以讓設(shè)計(jì)師把節(jié)約出來的時(shí)間和精力放到更多有價(jià)值的工作上去。作為 Ant Design 的設(shè)計(jì)師之一,坦白的說,即使你的設(shè)計(jì)稿全部使用了 Ant Design 的組件搭建,最終的頁面效果也仍不完善,在用戶體驗(yàn)上始終可以更進(jìn)一步。

B 端設(shè)計(jì)師應(yīng)該更多去關(guān)注對(duì)用戶需求和業(yè)務(wù)邏輯的深入挖掘,不僅僅是在界面細(xì)節(jié)的表現(xiàn)手法上下功夫,還要學(xué)會(huì)站在全局,用系統(tǒng)性思維看待每一個(gè)項(xiàng)目,為整個(gè)產(chǎn)品的系統(tǒng)流程做優(yōu)化,做更全面的產(chǎn)品體驗(yàn)升級(jí)。

 

5 . 設(shè)計(jì)師要「放眼」B 端未來

隨著技術(shù)的發(fā)展和迭代,B 端產(chǎn)品的發(fā)展也呈現(xiàn)出多元化趨勢(shì)。我列舉以下幾個(gè)方面,用于思考和拓展設(shè)計(jì)師的邊界:

(1)承載媒介:多端化設(shè)計(jì)需求增多

B 端產(chǎn)品的應(yīng)用領(lǐng)域日漸廣泛,各類終端設(shè)備普及,設(shè)計(jì)師需要更多的探索設(shè)備的應(yīng)用場(chǎng)景。如點(diǎn)餐系統(tǒng)、收銀系統(tǒng)、AR、VR 應(yīng)用等等,最近鴻蒙系統(tǒng)中演示的多端聯(lián)動(dòng),也可能是未來的趨勢(shì)之一。

圖片

 

(2)工作流程:中臺(tái)策略 / 組件化設(shè)計(jì)

它是一種提效的工作方法。中臺(tái)策略適用于公司層面,我們上文提到的組件化設(shè)計(jì)更適用于團(tuán)隊(duì)。

圖片

 

(3)用戶體驗(yàn):重視用戶個(gè)性化和體驗(yàn)

B 端設(shè)計(jì)越來越重視用戶體驗(yàn),提供個(gè)性化的配置方式,并考慮無障礙設(shè)計(jì)領(lǐng)域。很多 B 端的應(yīng)用和業(yè)務(wù)也在逐步開放給 C 端。 例如企業(yè)微信在 2019 年打通了個(gè)人微信和企業(yè)微信的壁壘,釘釘從 2020 年也開始在 C 端發(fā)力。

圖片

 

(4)視覺表現(xiàn):數(shù)據(jù)可視化設(shè)計(jì)

需求多來源于政府、企業(yè)的定制化需求,更偏向于對(duì)數(shù)據(jù)呈現(xiàn)效果的打磨和優(yōu)化,能夠展示和分析數(shù)據(jù)中的關(guān)鍵內(nèi)容,形式與內(nèi)容需要高度一致,才會(huì)達(dá)到良好的展示效果。

圖片

 

原文鏈接:長(zhǎng)弓小子(公眾號(hào))

作者:元堯

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》組件庫(kù)可以替代 B 端設(shè)計(jì)師么?

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png



分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



分享本文至:

日歷

鏈接

個(gè)人資料

存檔