2023-8-29 ui設(shè)計(jì)分享達(dá)人
前言
互聯(lián)網(wǎng)瞬息萬(wàn)變,在產(chǎn)品不斷更迭的過(guò)程中,我們經(jīng)常說(shuō)要保證產(chǎn)品設(shè)計(jì)的一致性和質(zhì)量,提升產(chǎn)研鏈路的效率。但現(xiàn)實(shí)情況是:產(chǎn)研團(tuán)隊(duì)長(zhǎng)期面對(duì)的是產(chǎn)品越來(lái)越復(fù)雜,體量越來(lái)越大,一個(gè)個(gè)復(fù)雜的產(chǎn)品下包含N個(gè)業(yè)務(wù)線,N個(gè)業(yè)務(wù)團(tuán)隊(duì),甚至還有外部合作的業(yè)務(wù),每個(gè)迭代都要面對(duì)數(shù)以百計(jì)的功能上線,經(jīng)常容易出現(xiàn)各種相同但不一致的功能,上線質(zhì)量參差不齊,執(zhí)行者也容易陷入日復(fù)一日的需求海洋而沒(méi)有更多精力去挖掘更有價(jià)值的事情。
所以如何解決團(tuán)隊(duì)效率和產(chǎn)品質(zhì)量問(wèn)題?我們的解法是抽象體系化的解決方案:設(shè)計(jì)模式化和代碼化,設(shè)計(jì)從原子到全局進(jìn)行統(tǒng)一和優(yōu)化,并形成系統(tǒng)化的設(shè)計(jì)指導(dǎo),由開(kāi)發(fā)進(jìn)行模式代碼化,提供靈活可配置的規(guī)則。以此,設(shè)計(jì)有更系統(tǒng)化的設(shè)計(jì)原則,整體的統(tǒng)一性和體驗(yàn)有保障,設(shè)計(jì)和開(kāi)發(fā)周期也可以縮減,甚至大部分日常需求可直接由產(chǎn)品對(duì)接開(kāi)發(fā)直接上線。
目錄
一、什么是系統(tǒng)化解決方案,什么樣的團(tuán)隊(duì)適合做
二、如何輸出、推進(jìn)設(shè)計(jì)解決方案
三、解決方案的管理和發(fā)展
(一)什么是系統(tǒng)化解決方案,什么樣的團(tuán)隊(duì)適合做
1.1 什么是系統(tǒng)化解決方案?
大多數(shù)日常需求大多是從單點(diǎn)出發(fā),當(dāng)點(diǎn)變多變復(fù)雜了,就容易出現(xiàn)上述說(shuō)到的現(xiàn)狀問(wèn)題。所以解決方案需要基于業(yè)務(wù)全盤進(jìn)行設(shè)計(jì)抽象:從元素——組件——區(qū)塊——頁(yè)面——功能流程沉淀設(shè)計(jì)規(guī)則并代碼化,來(lái)靈活提供拼裝N個(gè)不同頁(yè)面的機(jī)制,幫助團(tuán)隊(duì)更系統(tǒng)化的進(jìn)行產(chǎn)品設(shè)計(jì)。從組成內(nèi)容不難看出,解決方案是需要建立在基礎(chǔ)組件基礎(chǔ)上,與基礎(chǔ)組件、復(fù)雜組件、行為模式共同組成設(shè)計(jì)系統(tǒng)的【功能模式】部分。
上傳中.上傳失敗,圖片類型錯(cuò)誤或網(wǎng)絡(luò)錯(cuò)誤
1.2 什么樣的團(tuán)隊(duì)適合做
解決方案是一套相對(duì)穩(wěn)定的設(shè)計(jì)機(jī)制,所以在產(chǎn)品初期或團(tuán)隊(duì)建立初期,產(chǎn)品可能經(jīng)常會(huì)調(diào)整的情況下,并不適合做。初期可以借助成熟的設(shè)計(jì)系統(tǒng)來(lái)減少投入成本。而到成長(zhǎng)期可以根據(jù)業(yè)務(wù)的發(fā)展梳理基礎(chǔ)元素、組件,選擇性的建立部分穩(wěn)定且利用率高的解決方案,并持續(xù)發(fā)展,保證解決方案可以起到指導(dǎo)和提效的作用。隨著產(chǎn)品或團(tuán)隊(duì)逐漸成熟,解決方案也應(yīng)該隨著一起成長(zhǎng),相互影響相互作用。
(二)如何輸出、推進(jìn)設(shè)計(jì)解決方案
2.1 由大到小的進(jìn)行信息拆解
1)對(duì)產(chǎn)品頁(yè)面(尤其是重點(diǎn)功能)進(jìn)行盤點(diǎn),劃分頁(yè)面類型:比如列表、表單、詳情、dashboard;
2)對(duì)頁(yè)面中的內(nèi)容進(jìn)行區(qū)塊歸類
3)對(duì)區(qū)塊中的信息進(jìn)行拆解
這三個(gè)過(guò)程下來(lái),對(duì)于問(wèn)題、規(guī)則、規(guī)律都會(huì)有一定的概念。以一個(gè)后臺(tái)系統(tǒng)為例
1、頁(yè)面大類主要是:列表、表單、詳情。
2、其中列表的內(nèi)容大致區(qū)塊分為:頁(yè)面標(biāo)題區(qū)、列表操作、列表篩選、列表內(nèi)容,到這個(gè)階段已經(jīng)可以發(fā)現(xiàn),相同區(qū)塊位置就存在不穩(wěn)定,在后臺(tái)系統(tǒng)中可能影響面不會(huì)非常大,但對(duì)于內(nèi)容復(fù)雜繁多的工具或C端界面就會(huì)容易出現(xiàn)找不到的情況。
3、不同區(qū)塊的內(nèi)容拆解,同樣也會(huì)發(fā)現(xiàn)一些細(xì)節(jié)問(wèn)題,比如篩選的樣式、規(guī)則不一致,列表操作的方式、位置、樣式、交互不一致等等
上傳中.上傳失敗,圖片類型錯(cuò)誤或網(wǎng)絡(luò)錯(cuò)誤
2.2、抽象、重組:從布局——區(qū)塊——組件——設(shè)計(jì)規(guī)則
從第一步全盤的信息拆解和歸納, 已經(jīng)發(fā)現(xiàn)問(wèn)題, 這一階段主要2點(diǎn):第一是如何通過(guò)設(shè)計(jì)規(guī)則來(lái)避免同樣的問(wèn)題產(chǎn)生,第二是如何通過(guò)簡(jiǎn)單的規(guī)則重組減少多人合作記憶復(fù)雜度。思路類似于設(shè)計(jì)一個(gè)界面,首先得有一個(gè)布局劃分,不同的區(qū)塊要放哪些內(nèi)容,再到區(qū)塊里的細(xì)節(jié)內(nèi)容規(guī)則,從而抽象出由布局到區(qū)塊的設(shè)計(jì)規(guī)則和可復(fù)用的組件。
以前面說(shuō)的列表為例
1) 區(qū)塊主要是4類,明顯的問(wèn)題是區(qū)塊位置不穩(wěn)定,所以在布局結(jié)構(gòu)上,需要定義1-2個(gè)穩(wěn)定的可配置的布局框架來(lái)適應(yīng)不同的內(nèi)容
2)不同區(qū)塊梳理組成內(nèi)容,內(nèi)容細(xì)則
3)標(biāo)記出可組件化的內(nèi)容及規(guī)則
https://img.zcool.cn/community/02v4zu8ut1mcehpd1q8beg3730.gif
4)提煉整個(gè)過(guò)程中通用的設(shè)計(jì)規(guī)則,作為全局的指導(dǎo)。如:國(guó)際化、排版規(guī)則、超限規(guī)則、適配規(guī)則、文案規(guī)則等等。
通過(guò)布局——區(qū)塊——組件——設(shè)計(jì)規(guī)則,可以靈活的進(jìn)行頁(yè)面拼搭
2.3 落地代碼庫(kù)
區(qū)分通用層和業(yè)務(wù)層,通用層落地到通用模板市場(chǎng),利用腳手架生產(chǎn)新頁(yè)面。業(yè)務(wù)層面的落地則是基于通用庫(kù)封裝具備業(yè)務(wù)屬性(如:業(yè)務(wù)主題、業(yè)務(wù)數(shù)據(jù)、業(yè)務(wù)拓展方案)的業(yè)務(wù)庫(kù)來(lái)生產(chǎn)新頁(yè)面。
目前群核設(shè)計(jì)團(tuán)隊(duì)建立了一套平臺(tái)通用的解決方案,適用于所有中后臺(tái)產(chǎn)品。業(yè)務(wù)屬性比較強(qiáng)的產(chǎn)品也基于通用解決方案封裝業(yè)務(wù)層面的解決方案,同樣的思路也應(yīng)用在不同體系的工具場(chǎng)景中。整體實(shí)踐下來(lái),產(chǎn)研效率提升近50%,甚至完全解放了一條業(yè)務(wù)線的設(shè)計(jì)資源。產(chǎn)品體驗(yàn)的一致性、上線質(zhì)量也有明顯的提升
三、解決方案的管理和發(fā)展
解決方案作為設(shè)計(jì)系統(tǒng)的一部分,與設(shè)計(jì)系統(tǒng)一同管理,業(yè)務(wù)設(shè)計(jì)師使用系統(tǒng)來(lái)輸出,反饋問(wèn)題或需求給系統(tǒng),有系統(tǒng)設(shè)計(jì)師判斷可行性,周期性的管理,及時(shí)更新并在內(nèi)部互通,促進(jìn)互相成長(zhǎng)和發(fā)展。
解決方案與設(shè)計(jì)系統(tǒng)的發(fā)展有一點(diǎn)不同的是解決方案有更多業(yè)務(wù)化的內(nèi)容,業(yè)務(wù)團(tuán)隊(duì)根據(jù)業(yè)務(wù)迭代維護(hù)解決方案。當(dāng)業(yè)務(wù)的方案達(dá)到通用級(jí)別,則列入到通用庫(kù)。
這些方法和思路也并不限制行業(yè)或產(chǎn)品類型,僅是在我們當(dāng)前服務(wù)的產(chǎn)品體系下總結(jié)的方法。當(dāng)然解決方案并不能解決所有問(wèn)題,只是希望在提供更系統(tǒng)化的設(shè)計(jì)方法和模式的同時(shí)能減少重復(fù)工作提升效率,讓產(chǎn)研團(tuán)隊(duì)有更多的精力和時(shí)間投入更有價(jià)值的事情。
作者:酷家樂(lè)UED
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐ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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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ì)( www.miumiuwan.com )是一家專注而深入的界面設(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ì)公司](http://www.miumiuwan.com "軟件界面設(shè)計(jì)公司"
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com