Cs界面設(shè)計(jì)之四:如何打造一個(gè)優(yōu)秀的C端組件庫(kù)?來(lái)看實(shí)戰(zhàn)案例!

2022-6-14    博博

“組件”是平臺(tái)級(jí)產(chǎn)品非常重要的組成部分,設(shè)計(jì)組件不僅可以節(jié)約設(shè)計(jì)和開發(fā)成本,更是設(shè)計(jì)理念的約束性體現(xiàn)。但是,隨著平臺(tái)級(jí)產(chǎn)品業(yè)務(wù)場(chǎng)景的復(fù)雜度不斷增加,過(guò)往沉淀的設(shè)計(jì)組件的交互模式和視覺形式,卻跟不上業(yè)務(wù)發(fā)展的訴求。因此,我們思考:如何建立和迭代一個(gè)優(yōu)秀的組件庫(kù)——不僅能保持良好的普適性,解決全平臺(tái)產(chǎn)品的體驗(yàn)一致性的問(wèn)題;并且能夠保持各個(gè)業(yè)務(wù)線的特色和定制化需求,即所謂平臺(tái)級(jí)組件的“和而不同”。


升級(jí)組件庫(kù)的背景和目標(biāo)


隨著近兩年業(yè)務(wù)的發(fā)展,早期沉淀的組件漸漸無(wú)法滿足業(yè)務(wù)訴求,一部分組件的使用率和覆蓋率很低。

因此我們決定對(duì)貝殼平臺(tái)組件進(jìn)行一次全新的升級(jí)。我們的目標(biāo)不僅是針對(duì)“基礎(chǔ)組件”進(jìn)行優(yōu)化,保持其良好的通用性,達(dá)到“和”的目的;更希望能夠承載業(yè)務(wù)線(二手房、新房和租房)更多體驗(yàn)場(chǎng)景的需要,做到服務(wù)于業(yè)務(wù)的“不同”。

為了更好的實(shí)現(xiàn)升級(jí)目標(biāo),我們思考了以下幾個(gè)問(wèn)題:

1. 設(shè)計(jì)組件庫(kù)的使用人員有哪些不同的角色?他們的訴求是否有區(qū)別?

在我們眼里,設(shè)計(jì)組件是對(duì)設(shè)計(jì)工作的一種管理,而設(shè)計(jì)工作從產(chǎn)出到落地的完整鏈條上,主要有三種角色的人群:

貝殼平臺(tái)設(shè)計(jì)師和各個(gè)業(yè)務(wù)線設(shè)計(jì)師:平臺(tái)設(shè)計(jì)師窮舉組件使用場(chǎng)景的同時(shí),提煉業(yè)務(wù)訴求,幫助業(yè)務(wù)線設(shè)計(jì)師通過(guò)組件更省時(shí)省力的高效完成設(shè)計(jì)工作。

開發(fā)團(tuán)隊(duì):通過(guò)設(shè)計(jì)師的輸出,明確組件開發(fā)的具體框架和自由度(例如按鈕顏色是否支持不同業(yè)務(wù)自定義等)

產(chǎn)品團(tuán)隊(duì):通過(guò)設(shè)計(jì)組件文檔明確設(shè)計(jì)的標(biāo)準(zhǔn),在各角色有共同標(biāo)準(zhǔn)的認(rèn)知下,需求中可使用組件搭建的部分無(wú)需重復(fù)提需求,節(jié)約各方成本。

因此,設(shè)計(jì)師需要產(chǎn)出的并不是一份簡(jiǎn)單的組件庫(kù)源文件,而是一份以不同角色合作伙伴的視角,都能看得懂的設(shè)計(jì)組件表達(dá)文檔。

如何打造一個(gè)優(yōu)秀的C端組件庫(kù)?來(lái)看貝殼設(shè)計(jì)的實(shí)戰(zhàn)案例!

△ 圖 1 給設(shè)計(jì)、產(chǎn)品和開發(fā)不同的文件樣式

2. 組件真的是越多越好嗎?

我們給出的結(jié)論是:面面俱到反而無(wú)從下手。在做設(shè)計(jì)組件時(shí),大多數(shù)同學(xué)都會(huì)有患得患失的心理,認(rèn)為組件足夠多,就可以應(yīng)對(duì)更多的使用場(chǎng)景,規(guī)范也足夠細(xì)致和統(tǒng)一。

但是這是一個(gè)比較理想的狀態(tài),過(guò)于低微的顆粒度下,設(shè)計(jì)反而會(huì)失衡。這里的失衡是指,創(chuàng)新和規(guī)范之間的平衡被打破,顯然不是我們想要的。并且平臺(tái)級(jí)組件庫(kù)是具備再生和持續(xù)發(fā)展的生長(zhǎng)能力的,因此不必一味追求數(shù)量。

3. 采用什么方法可以合理的控制組件的質(zhì)量和數(shù)量,挑選出通用度高的組件呢?

我們優(yōu)先梳理了貝殼平臺(tái)流量 TOP30 的核心關(guān)鍵頁(yè)面,依據(jù)數(shù)據(jù)圈定范圍,然后進(jìn)行組件的整理。如下圖,我們發(fā)現(xiàn)使用率最高的前十名組件,按照降序排列依次為:tabs 選擇>Navbar>房源卡片(業(yè)務(wù)通用組件)>經(jīng)紀(jì)人展位(業(yè)務(wù)通用組件)>按鈕>通知與提示>彈層>搜索框>操作菜單>標(biāo)準(zhǔn)懸浮球。

如何打造一個(gè)優(yōu)秀的C端組件庫(kù)?來(lái)看貝殼設(shè)計(jì)的實(shí)戰(zhàn)案例!

△ 圖 2 貝殼平臺(tái)流量 TOP30 頁(yè)面組件應(yīng)用情況

這樣,我們就可以按照以上優(yōu)先級(jí),優(yōu)先設(shè)計(jì)和代碼化使用頻次較高的組件。

我們將貝殼原有組件庫(kù)的全部組件打散,重新定義后分成三大類別:

平臺(tái)基礎(chǔ)組件:指不具有業(yè)務(wù)屬性的元件及基礎(chǔ)組件,例如:按鈕/表單/列表/搜索欄/系統(tǒng)反饋彈層/操作欄/Navbar 等。

業(yè)務(wù)通用組件:指橫跨多業(yè)務(wù),但在不同的業(yè)務(wù)場(chǎng)景中略有變化,有公共元件可提煉,例如:經(jīng)紀(jì)人展位/房源卡片。

業(yè)務(wù)特性組件:指只屬于某一業(yè)務(wù)應(yīng)用范疇的組件,無(wú)公共元件可提煉,但是在單一業(yè)務(wù)線復(fù)用率較高。

組件的明確分類,可以幫助我們?cè)谌蘸竺慨?dāng)有新增組件時(shí),以統(tǒng)一的標(biāo)準(zhǔn)和原則進(jìn)行歸納和整理。


優(yōu)化業(yè)務(wù)通用組件


除了優(yōu)化平臺(tái)基礎(chǔ)類型的組件外,我們還對(duì)其中使用頻率很高的業(yè)務(wù)通用組件——房源列表進(jìn)行了優(yōu)化。

房源列表是在貝殼平臺(tái)通常以線性結(jié)構(gòu)呈現(xiàn)的。用戶通過(guò)縱向掃讀來(lái)獲取房源宏觀信息,橫線瀏覽來(lái)了解單個(gè)房源條目的細(xì)節(jié)信息并進(jìn)行相關(guān)操作。它在二手房、新房、租賃、海外等等業(yè)務(wù)線,都會(huì)經(jīng)常被使用到。貝殼平臺(tái)原房源列表樣式,由于業(yè)務(wù)的發(fā)展,需要展示的信息逐步增多,依次羅列在列表中,導(dǎo)致展示效率變低,無(wú)吸引用戶的亮點(diǎn),最終導(dǎo)致用戶對(duì)房源列表的“決策效率降低”。

而想要提升決策效率,并且優(yōu)化后的列表能夠在各個(gè)業(yè)務(wù)線使用,我們先要了解,在不同業(yè)務(wù)場(chǎng)景中,房源卡片都要展示哪些內(nèi)容?這里我們應(yīng)用到了先前研究得出的結(jié)論——用戶瀏覽房源列表的心智模型。

如何打造一個(gè)優(yōu)秀的C端組件庫(kù)?來(lái)看貝殼設(shè)計(jì)的實(shí)戰(zhàn)案例!

△ 圖 3 用戶瀏覽房源的心智模型

在心智模型的指導(dǎo)下,我們進(jìn)行了“元素窮舉”。

如何打造一個(gè)優(yōu)秀的C端組件庫(kù)?來(lái)看貝殼設(shè)計(jì)的實(shí)戰(zhàn)案例!

△ 圖 4 元素窮舉

得到了具體展示哪些元素后,我們開始思考,一個(gè)包容性強(qiáng)的列表底層結(jié)構(gòu)應(yīng)該是什么樣子?經(jīng)過(guò)幾次的反復(fù)推敲和嘗試,我們得出如圖所示的三層結(jié)構(gòu):容器背板層、可交互操作層、內(nèi)容展示層。

如何打造一個(gè)優(yōu)秀的C端組件庫(kù)?來(lái)看貝殼設(shè)計(jì)的實(shí)戰(zhàn)案例!

△ 圖 5 房源列表的三層結(jié)構(gòu)

容器背板層:它是承載列表內(nèi)部所有內(nèi)容的盒子,我們?cè)谶@一層,定義了容器的形狀,圓角等屬性,使它成為一個(gè)統(tǒng)一的底層模版。

可交互操作層:這一層放置的是用戶關(guān)于列表可進(jìn)行的全部操作,例如關(guān)注,查看 VR 圖片等。并且,我們針對(duì)具體每一種操作行為,定義了統(tǒng)一的交互方式。

內(nèi)容展示層:這一層涵蓋所有用戶可以查看的具體信息,包含房源標(biāo)題、樓盤名稱、房源詳細(xì)信息和價(jià)格的動(dòng)態(tài)浮動(dòng)變化信息。

通過(guò)三個(gè)層次的劃分,我們可以清晰的定義每個(gè)層次的具體的職責(zé)是什么,這有利于我們后期面對(duì)復(fù)雜業(yè)務(wù)場(chǎng)景和海量信息內(nèi)容時(shí),可以更好的去歸納和組織信息的呈現(xiàn)。

在完成了元素窮舉和結(jié)構(gòu)分層之后,我們繪制了一個(gè)基礎(chǔ)框架模版,如下圖:

如何打造一個(gè)優(yōu)秀的C端組件庫(kù)?來(lái)看貝殼設(shè)計(jì)的實(shí)戰(zhàn)案例!

△ 圖 6 房源列表基礎(chǔ)框架

然后我們將不同業(yè)務(wù)線的具體細(xì)節(jié)信息,嵌入模版中,設(shè)計(jì)成各個(gè)針對(duì)不同業(yè)務(wù)和不同場(chǎng)景使用的房源列表。帶著這樣的設(shè)計(jì)結(jié)果,我們與業(yè)務(wù)線的產(chǎn)品經(jīng)理和設(shè)計(jì)師同學(xué)進(jìn)行了一次深入的探討,并且確定可推行迭代的節(jié)奏。


數(shù)據(jù)與結(jié)果


綜合 14 天數(shù)據(jù),二手房改版后,CTR 由原來(lái)的 44.65%提升到 51.35%。這對(duì)于房源列表來(lái)說(shuō),是非常難得的。

如何打造一個(gè)優(yōu)秀的C端組件庫(kù)?來(lái)看貝殼設(shè)計(jì)的實(shí)戰(zhàn)案例!

△ 圖 7 改版后的數(shù)據(jù)結(jié)果


總結(jié)


以上就是本文的全部?jī)?nèi)容,相信大家已經(jīng)掌握了 C 端組件庫(kù)建立的基本方法,這里我們總結(jié)一下組件庫(kù)的創(chuàng)建流程:

如何打造一個(gè)優(yōu)秀的C端組件庫(kù)?來(lái)看貝殼設(shè)計(jì)的實(shí)戰(zhàn)案例!

△ 圖 8 C 端組件庫(kù)的創(chuàng)建流程

組件庫(kù)是每一位用戶體驗(yàn)設(shè)計(jì)師,在日常工作中積累的設(shè)計(jì)資產(chǎn)。組件要做到“和而不同”,“和”是指用規(guī)范化的底層容器,將抽離出復(fù)用率高的元素包裹起來(lái),形成體驗(yàn)一致,交互一致的封裝模塊?!安煌笔侵?,每條業(yè)務(wù)線可以根據(jù)自身具體的使用場(chǎng)景,去定義各自在內(nèi)容展示層要展示的元素,保證了一定的自由度和各自生長(zhǎng)的能力。

房源列表在貝殼平臺(tái)首頁(yè)已經(jīng)上線有半年左右的時(shí)間了,通過(guò)改版,用戶使用房源列表時(shí)的決策效率有一定程度的提升,業(yè)務(wù)覆蓋也逐步擴(kuò)大。在研發(fā)老師的協(xié)同下,實(shí)現(xiàn)了 Native 和 Flutter 組件的封裝,大大縮短了開發(fā)時(shí)長(zhǎng),從而提升了產(chǎn)品整體的研發(fā)效率。

希望能給同樣正在建立組件庫(kù)的設(shè)計(jì)師同學(xué)們帶來(lái)一些啟發(fā),貝殼用戶體驗(yàn)團(tuán)隊(duì)也會(huì)繼續(xù)致力于更多業(yè)務(wù)特性組件的深挖,期待你的關(guān)注。

作者:貝殼KEDC

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

藍(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)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.820esy.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



更多精彩文章:

Cs界面設(shè)計(jì)之二:如何區(qū)別B端與C端的產(chǎn)品設(shè)計(jì)差異?我總結(jié)了26條對(duì)比!













分享本文至:

日歷

鏈接

個(gè)人資料

存檔