小團隊有必要建立完善的設(shè)計體系嗎?
編輯導語:設(shè)計系統(tǒng)的搭建于大企業(yè)而言,可以有效提效降本。但是小團隊有必要建立設(shè)計體系嗎?答案可能是否定的。那么當團隊面臨業(yè)務(wù)多、資源不足等問題時,又該如何解決呢?本文作者進行了總結(jié),一起來看一下吧。
當然沒必要!
第一,小團隊沒資源(人力+時間)。
第二,完善設(shè)計體系的維護成本遠遠大于提效降低的成本。
但是產(chǎn)品又面臨業(yè)務(wù)多,資源不足;組件混亂,設(shè)計一致性差,經(jīng)常重復造輪子;設(shè)計沒有時間理解業(yè)務(wù),用戶體驗差等問題。
01
如何解決這些問題呢?
我們可以量體裁衣,做一個適合當前業(yè)務(wù)的設(shè)計體系,同時可以根據(jù)投入的人力和時間確定優(yōu)先級,分散在平時沒需求時設(shè)計。
如何建立一個適合業(yè)務(wù)的設(shè)計體系呢?我們可借鑒雙鉆模型的設(shè)計思路來進行指導,主要從以下四步進行:
1. 發(fā)現(xiàn)問題:梳理產(chǎn)品目前痛點
在業(yè)務(wù)初期,大多產(chǎn)品都是采用小步快跑的策略,因此在用戶體驗、視覺上投入精力較少,當業(yè)務(wù)線越來越多時,就會出現(xiàn)很多問題。
比如我之前負責的產(chǎn)品,業(yè)務(wù)線較為復雜,包括基金平臺、移民平臺、生活服務(wù)平臺、客戶管理、電子簽應(yīng)用等;同時設(shè)計師與PD的比例是1:4,每位設(shè)計師都身兼多條業(yè)務(wù)線,多個項目同期需要構(gòu)建、優(yōu)化,人力資源完全不足。
同時在敏捷開發(fā)下,設(shè)計完全沒有時間去梳理業(yè)務(wù),考慮如何去提升界面可用性,如何去提升用戶體驗。
還有公司業(yè)務(wù)整合后,各平臺風格各異,樣式雜,多個系統(tǒng)交互不統(tǒng)一,給用戶造成了一定的困擾,也讓其對我們的專業(yè)性存疑。
當問題越來越明顯,我們就必須想辦法將其解決,不然等他越滾越大,就更沒有辦法了。于是我們對產(chǎn)品問題進行梳理,概括為:
1)外驅(qū)-業(yè)務(wù)訴求
- 業(yè)務(wù)反饋操作流程繁瑣;
- 員工操作效率低、任務(wù)完成率低、平臺使用率低;
- 銷售流動性大,新人宣導成本高。
2)內(nèi)驅(qū)-產(chǎn)研訴求
- 各平臺視覺風格不一致;
- 各平臺交互體驗不一致;
- 各平臺相同模塊文案描述不一致;
- 產(chǎn)品沒有統(tǒng)一的設(shè)計原則;
- 沒有自己的設(shè)計規(guī)范和組件庫,都是直接用的element/antdesgin等開放的組件庫和規(guī)范;
- 經(jīng)常重復造輪子,不同平臺,相同功能都需要重新設(shè)計和開發(fā)一次;
- 設(shè)計還原度低,前端沒時間做視覺的修復;
- 設(shè)計價值低,一直在做0-1創(chuàng)建的事情,沒有精力去了解業(yè)務(wù)、沒有時間去優(yōu)化界面,提升體驗。
2. 定位問題:確定當前急需解決的問題
定位問題的流程比較簡單,只需要找產(chǎn)品或者領(lǐng)導了解未來半年/一年的業(yè)務(wù)規(guī)劃即可。
通過溝通大致了解到,未來半年我們的規(guī)劃仍然是設(shè)計新功能(先保證有,可用),等業(yè)務(wù)線搭建完善后,在系統(tǒng)進行優(yōu)化。
因此我們基本就定位好,先解決產(chǎn)研訴求,然后在去解決業(yè)務(wù)訴求,只有這樣我們才能從基礎(chǔ)的事務(wù)中解脫,去做更有價值的事情。
回到產(chǎn)研訴求,通過梳理我們概括為:
- 對各平臺視覺交互,進行優(yōu)化和統(tǒng)一;
- 提高協(xié)作效率;
- 提升界面還原度;
- 提高組件的復用效率。
3. 尋找解決方案:建立設(shè)計體系
起初我以為只要沉淀組件庫、設(shè)計規(guī)范就能解決問題,最后發(fā)現(xiàn)只能解決一部分UI協(xié)作和復用的問題,并不能解決根本問題。
于是我開始向身邊的朋友請教,一個朋友告訴我,可以用設(shè)計系統(tǒng)解決這個問題,但是設(shè)計系統(tǒng)太龐大,本身需要很多資源,你們?nèi)颂俑緵]辦法做。
于是我開始了解什么是設(shè)計系統(tǒng),開始看市面上關(guān)于設(shè)計系統(tǒng)的文章、書籍?!对O(shè)計體系》這本書推薦大家看看,書中和我們系統(tǒng)拆解了建立設(shè)計體系的方法:
1)設(shè)計體系的基礎(chǔ):模式與實踐
“模式指的是界面中那些重復的要素:用戶流程、交互方式、按鈕、文本框、圖標、配色、排版、文案,等等?!?/p>
“實踐則是我們?nèi)绾蝿?chuàng)建、捕獲、共享和使用這些模式,尤其是在團隊協(xié)作時做這些事情的方法。”
2)建立和維護設(shè)計體系的實際步驟和實用技術(shù)
主要包括規(guī)劃任務(wù)、編寫界面清單、建立模式庫、創(chuàng)建、記錄、發(fā)展和維護設(shè)計模式等。
因此,我們只要制作好設(shè)計模式、實踐方法就能夠很好的解決我們的問題,由于資源較少,我們不可能像大廠一樣有專門的團隊來維護設(shè)計系統(tǒng),因此我們需要讓每個設(shè)計、前端、產(chǎn)品、技術(shù)都能夠參與進來,建立適合業(yè)務(wù)的設(shè)計系統(tǒng)。
4. 有效的解決方案:建立適合業(yè)務(wù)的設(shè)計體系
找到解決方案了,我們繼續(xù)針對模式和實踐進一步拆分為任務(wù):
1)模式:將界面系統(tǒng)化
- 定義設(shè)計指導原則;
- 定義可復用的設(shè)計模式并將其標準化;
- 建立模式庫;
- 建立主設(shè)計文件,收集最新的模式;
- 重構(gòu)代碼和前端框架,以支持模塊化的方法。
2)共享的實踐:建立共享的流程和治理
- 通過溝通、協(xié)作、結(jié)對子、培訓等方法,建立知識共享的流程;
- 在整個公司推廣模式庫,鼓勵大家使用;
- 面向所有部門推廣共享的設(shè)計語言;
- 在入職培訓中引入對設(shè)計體系的介紹。
根據(jù)這些任務(wù),我們在分析哪些是需要做的,我們?nèi)绾稳プ觯?/p>
對于中小公司,前端框架一般都是基于Ant design或者Element進行,因此組件庫直接下載資源即可。
- Ant Design 資源:https://ant.design/docs/resources-cn
- Element figma資源:https://www.figma.com/file/DBpNb9iADyxEJpgDCNIRNT/Element-UI-Kit-2.15.7-(Community)?node-id=686%3A149
- Arco Design figma資源:https://www.figma.com/file/xcwQO53J0OGZ0nKDs5Swrh/Arco-Design-System?node-id=8253%3A44145
另外,針對常見的表格、篩選、表單、彈窗、登錄注冊流程、可復用的用戶操作流程、交互方式等設(shè)計模式,分別定義他們應(yīng)用規(guī)則、交互流程、有多少變體、每個變體的實際應(yīng)用場景等。
制作完后,可以發(fā)起一個會議,在整個公司進行宣講,這樣一個基礎(chǔ)的設(shè)計體系,就能夠解決協(xié)作、效率等問題。
02
如果你的公司,對于視覺、用戶滿意度、產(chǎn)品可用性要求較高時,在上述任務(wù)的基礎(chǔ)上,我們還需要制定適合業(yè)務(wù)的設(shè)計原則、建立適合的設(shè)計風格、建立感知性模式。
具體流程如下:
- 風格探索,界面優(yōu)化;
- 確定產(chǎn)品設(shè)計原則;
- 基于開源組件,根據(jù)自己的風格進行優(yōu)化,制作基礎(chǔ)的組件庫;
- 梳理優(yōu)化模塊;
- 建立通用設(shè)計模式庫;
- 完善設(shè)計規(guī)范。
1. 風格探索,界面優(yōu)化
關(guān)于風格探索,大家去看我之前寫的一篇文章《如何提升B端界面的精致度,做到這兩點就夠了!》。
第一,要知道什么是好的設(shè)計,多拆解國內(nèi)外優(yōu)化的B端產(chǎn)品。
第二,多在工作中實踐,有時間多做ABC方案,鍛煉自己的方案設(shè)計能力,多踩一些坑,時刻保持學習能力,慢慢就成長了。
關(guān)于界面優(yōu)化,我們根據(jù)定義的風格將關(guān)鍵界面進行優(yōu)化即可,比如列表頁、表單頁,通過ABC方案和產(chǎn)品進行討論,選出一個最適合當前產(chǎn)品的風格。雖然這里一句話概括了,但是對于剛轉(zhuǎn)行的朋友不是那么容易,以后有時間細聊。
2. 確定產(chǎn)品設(shè)計原則
設(shè)計原則就像做人的原則一樣,有原則的人他有他的思想,指導他什么事情能做,什么事情不能做,什么事情應(yīng)該做。
比如儒學的《三綱八目》,所謂三綱,“明德、親民、止于至善”,所謂八目,“格物、致知、誠意、正心、修身、齊家、治國、平天下”,它鑄造了一代又一代中國知識分子的人格心理。
比如《曾國藩教子十法》,“一省、二靜、三勤、四和、五誠、六學、七明、八挺、九趣、十恒”十個角度,去教育他的子女。
設(shè)計也是一樣,如果你的產(chǎn)品沒有設(shè)計原則,那么我們的設(shè)計就主要依靠設(shè)計師的經(jīng)驗和參考,大家常常說的離開競品和參考就不知道如何設(shè)計就是這個原因。
如何確定產(chǎn)品設(shè)計原則呢?大家可以詳細去看看《設(shè)計體系》《簡約至上》這兩本書,也可以看我之前的文章《沒有競品參考就不知道如何設(shè)計,什么情況?》里面也詳細和大家分享了如何構(gòu)建自己的設(shè)計原則。
3. 基于開源組件,根據(jù)自己的風格進行優(yōu)化,制作基礎(chǔ)的組件庫
通過上兩步界面風格我們已經(jīng)確定、設(shè)計原則也已經(jīng)確定了,我們基礎(chǔ)組件的樣式也就基本確定了,這時候就需要將原來開源的組件庫進行優(yōu)化。
開源組件庫內(nèi)容往往較多,我們不用全部都拿來優(yōu)化,我們只需要做我們有的組件,和交互狀態(tài),后期有新增時,在慢慢添加就可以了。
比如Ant design的Input組件,官方提供了這么多樣式,我們不可能都能用上,我們選擇好尺寸,復制出對應(yīng)的狀態(tài),然后在對其進行優(yōu)化。
另外,Arco Design的組件庫樣式相對好看很多,大家可以直接下載它的組件,進行樣式修改。需要注意的是,必須遵循公司使用框架的結(jié)構(gòu),只能進行樣式的更改。
再次強調(diào)這里不需要將框架的內(nèi)容全部拔下來,把輸入框、選擇器、搜索框~等常用的交互狀態(tài)做好就行,用不上的,比如大中小的尺寸,我們沒必要去做。
4. 梳理優(yōu)化模塊
基礎(chǔ)組件優(yōu)化好之后,我們就需要梳理產(chǎn)品中,那么模塊需要優(yōu)化,這里大家需要將各個平臺進行走查,可以從客戶反饋、可用性、一致性、視覺感受等角度去排查,然后建立優(yōu)化排期框架。
5. 建立通用設(shè)計模式庫
其實在上面我們已經(jīng)建立了一個簡單的交互模式庫,但是由于時間關(guān)系可能思考不充分,因此這時候我們可以在之前交互設(shè)計模式的基礎(chǔ)上進行調(diào)研,進一步優(yōu)化。
比如我之前在做表單設(shè)計模式時的一些基礎(chǔ)分析《如何提高B端表單操作效率,這里有7個技巧!》。
具體如何建立通用的設(shè)計模式庫,一篇文章講不清楚,后面我會將這些模塊逐一的和大家分享。
6. 完善設(shè)計規(guī)范
當模式庫制作好后,之前的交互流程、組件樣式等有些不太合適,因此這時候我們就需要將之前的規(guī)范進行調(diào)整,優(yōu)化、并制定好后期的維護規(guī)則。
劃重點
TED用戶體驗架構(gòu)師說:“做正確的設(shè)計,而非一致性的設(shè)計。優(yōu)先考慮的應(yīng)當是把頁面本身做到最好。為此我們不斷地改進頁面,以期達到最佳效果。不應(yīng)該用教條式的一致性和已有的模式去驅(qū)動設(shè)計決策”
在優(yōu)化和維護的過程中,大家不要以為有了設(shè)計體系,就輕松了,大家都拖拖組件、復用模式就行了。我們做這個的初衷是為了把我們從基礎(chǔ)的需求中解脫出來,讓我們有時間、有空間去為用戶創(chuàng)造更大的價值。
我們做設(shè)計也不能為了一致而一致,也不能因為某個新模塊,模式庫里面沒有合適的,你非要往以前的基礎(chǔ)上靠,本來做設(shè)計體系為了解放生產(chǎn)力的,創(chuàng)造更大的價值,最后反而困住了自己的雙手。
另外,設(shè)計體系、模式庫也不能讓不好的設(shè)計變好,同志仍需努力~
設(shè)計系統(tǒng)相關(guān)文章:
- ToB新視角:小程序生態(tài)評估方法探索:https://mp.weixin.qq.com/s/bnLGxxmut1S1BdziOv1jtw
- 「 復雜系統(tǒng)如何設(shè)計」論B端產(chǎn)品的體系化構(gòu)建:https://mp.weixin.qq.com/s/bC5s4jmXN3kkhltZlkq75g
- Pixel-解決規(guī)?;瘶I(yè)務(wù)增長的設(shè)計系統(tǒng)建立和實踐:https://mp.weixin.qq.com/s/ylsfgUJk3D2gcDeMHiplHw
- 混合云場景下“監(jiān)”的設(shè)計模型及規(guī)則(上):https://mp.weixin.qq.com/s/l-wlTanidhkjwCma1bw0ag
- 談?wù)凚端用戶幫助體系的搭建:https://mp.weixin.qq.com/s/2XKnfqSIUtWGh8RvIRSf6A
- 高效設(shè)計體系搭建之如何利其器:https://www.yuque.com/fengzhengkk/emds43/xomnet#JPnRO
- toB設(shè)計系統(tǒng) – 在平平淡淡中開花結(jié)果:https://mp.weixin.qq.com/s/3u7P4lKCpBSK826Kn_azWg
- “管”視角下的設(shè)計思維和策略(中):https://mp.weixin.qq.com/s/v5t3Z2DY6iuy4ND3ufFoiA
- B 類產(chǎn)品文案指南:http://theventurebank.com/copy/4612854.html
- 群核設(shè)計系統(tǒng)Manycore Design——平臺解決方案:https://www.yuque.com/meifangmia/zwcdgs/giu0e
- Ke.Design:從服務(wù)出發(fā),打造生長·包容·聯(lián)接的設(shè)計系統(tǒng):https://mp.weixin.qq.com/s/vKveeKNYcZ14vzXuMtBMrw
- B端組件庫“新”解:https://mp.weixin.qq.com/s/oy_IVmwha2eIQ7U-2-gWjQ
- 在整理設(shè)計規(guī)范中變強:https://zhuanlan.zhihu.com/p/27701550
- 出海場景下做體驗設(shè)計的體系化探索:https://mp.weixin.qq.com/s/LAAVUFaWMuNGHNTcGZW-1Q
- 深度薦讀|有贊CEO白鴉的內(nèi)部培訓《產(chǎn)品設(shè)計原則》(含完整音頻):https://mp.weixin.qq.com/s/yqhir39BPJGlnXqE4IytiQ
- 騰訊文檔-構(gòu)建科學有效的色彩系統(tǒng):https://isux.tencent.com/articles/tencentdocs-colors.html
- Design Token 應(yīng)用指南——設(shè)計篇:https://mp.weixin.qq.com/s/eg_hP8o3oEAAVwAxmqhvGw
- 汽車行業(yè) – 移動輸入組件 – 設(shè)計沉淀:https://mp.weixin.qq.com/s/HIOCTQsvurJqObhhyGkkmw
- 發(fā)揮設(shè)計中臺能力-平臺化搜索設(shè)計:https://mp.weixin.qq.com/s/s3vgWOTD5tsqbUrw4uebjg
作者:風箏KK,公眾號:設(shè)計早8點
本文由 @風箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Pexels,基于CC0協(xié)議
希望有更細致的說明,辛苦辛苦
感覺講了不少,又感覺啥也沒講
哈哈哈,確實這樣的,這篇文章是個概覽而已~,后面的文章會一個點一個點拆開來說~