設(shè)計(jì)系統(tǒng)能夠統(tǒng)一設(shè)計(jì)語(yǔ)言，從而幫助團(tuán)隊(duì)解決設(shè)計(jì)一致性問(wèn)題。一套系統(tǒng)中包含交互規(guī)范，品牌規(guī)范，聲音規(guī)范，文案規(guī)范，代碼標(biāo)準(zhǔn)以及一個(gè)UI庫(kù)。
一個(gè)設(shè)計(jì)系統(tǒng)能夠統(tǒng)一產(chǎn)品開(kāi)發(fā)，并能節(jié)約開(kāi)發(fā)成本。建立設(shè)計(jì)系統(tǒng)可能在開(kāi)始階段降低設(shè)計(jì)效率，但它將會(huì)加倍回報(bào)給你的團(tuán)隊(duì)和產(chǎn)品。
設(shè)計(jì)系統(tǒng)的優(yōu)勢(shì):
- 唯一的執(zhí)行標(biāo)準(zhǔn)
- 增加一致性
- 節(jié)約時(shí)間
我個(gè)人比較喜歡等到產(chǎn)品和開(kāi)發(fā)團(tuán)隊(duì)開(kāi)發(fā)之后再開(kāi)始著手做設(shè)計(jì)系統(tǒng)。然而，有些人喜歡從一開(kāi)始就做設(shè)計(jì)系統(tǒng)。
這里其實(shí)沒(méi)有標(biāo)準(zhǔn)答案，但如果你一直不知道如何開(kāi)始做，不一致和低效的問(wèn)題又一直存在，將會(huì)很降低生產(chǎn)力和打擊團(tuán)隊(duì)的士氣。如果你已經(jīng)注意到在團(tuán)隊(duì)中有這個(gè)問(wèn)題的存在，那么就應(yīng)該開(kāi)始著手跟團(tuán)隊(duì)一起定義一套設(shè)計(jì)系統(tǒng)了。
想要獲得最佳合作效果的前提是開(kāi)放的心態(tài)。確保所有產(chǎn)品干系人都參與到這個(gè)過(guò)程中，不是每個(gè)人都需要成為一個(gè)積極的貢獻(xiàn)者，但每個(gè)人都必須有一個(gè)發(fā)聲的機(jī)會(huì)。
1. 進(jìn)行設(shè)計(jì)全面走查
組織設(shè)計(jì)團(tuán)隊(duì)，對(duì)當(dāng)前產(chǎn)品的界面進(jìn)行截屏。確保能夠查看到產(chǎn)品的所有屬性，比如網(wǎng)站，內(nèi)部工具，不同的應(yīng)用等等。
使用類似谷歌文檔這樣的演示軟件來(lái)放上一步的截圖，或者考慮直接把這些截圖打印出來(lái)并貼在白板上。
檢查每個(gè)類別，觀察不一致的地方，并和團(tuán)隊(duì)一起討論分析哪里還有改進(jìn)的可能。
考慮收集產(chǎn)品的所有設(shè)計(jì)組件，并將它們放在PPT中。這通常是一個(gè)非常令人大開(kāi)眼界的過(guò)程，你會(huì)意識(shí)到創(chuàng)建設(shè)計(jì)系統(tǒng)的必要性。
收集的截圖可以像下面這樣去分類
- 按鈕
- 導(dǎo)航
- 表單
- 表格
- 圖表
- 列表
- 卡片
- 圖標(biāo)
- 顏色
- 字體
- 其他
對(duì)產(chǎn)品UI進(jìn)行全面盤點(diǎn)通常會(huì)發(fā)現(xiàn)非常尷尬的不一致性？吹揭粋(gè)產(chǎn)品的生命周期中用到那么多個(gè)不同的按鈕樣式和文本大小，能讓人大開(kāi)眼界。
2. 定義基礎(chǔ)設(shè)計(jì)原子
設(shè)計(jì)原子對(duì)于界面設(shè)計(jì)來(lái)說(shuō)就像是一棟建筑中的磚塊一樣。要設(shè)計(jì)好一個(gè)全面的設(shè)計(jì)系統(tǒng)的第一步就是要?jiǎng)?chuàng)建好這些設(shè)計(jì)基礎(chǔ)原子，把這些元素組合在一起就決定了產(chǎn)品的效果表現(xiàn)。
基礎(chǔ)設(shè)計(jì)原子包括:
- 顏色
- 字體
- 大小
- 間距
- 柵格
- 其他
3. 定義設(shè)計(jì)組件
設(shè)計(jì)組件對(duì)于界面設(shè)計(jì)來(lái)說(shuō)就像是一個(gè)個(gè)功能模塊。組件是由設(shè)計(jì)原子構(gòu)成的，按各種項(xiàng)目需求組合在一起。
組件化需要考慮的模塊有:
- 表單
- 按鈕
- 選項(xiàng)卡
- 圖標(biāo)
- 彈窗
- 其他
這個(gè)案例示意了組件的種類包括了按鈕，表單和選項(xiàng)卡
做的時(shí)候不要忘了每個(gè)組件的不同狀態(tài)。比如，一個(gè)輸入框在用戶點(diǎn)擊和輸入時(shí)會(huì)有怎樣的變化。
4. 定義界面
在你定義好設(shè)計(jì)原子和設(shè)計(jì)組件后，就可以開(kāi)始利用它們來(lái)設(shè)計(jì)界面了。
設(shè)計(jì)原子和設(shè)計(jì)組件結(jié)合起來(lái)就能設(shè)計(jì)出界面。這個(gè)案例示意了一個(gè)登錄框包含了選項(xiàng)卡，表單，按鈕和文案排版。
范例:
- 儀表盤界面
- 登錄表單
- 概述
- 詳情
- 其他
△ 這個(gè)案例示意了設(shè)計(jì)原子和組件是如何構(gòu)成界面的
5. 加上設(shè)計(jì)模式
設(shè)計(jì)模式由常見(jiàn)的用戶流程和交互形式組成。
案例包括:
- 篩選器
- 創(chuàng)建流程
- 漸進(jìn)式
- 連續(xù)滾動(dòng)
- 新手引導(dǎo)
- 其他
6. 創(chuàng)建文檔
當(dāng)建立了設(shè)計(jì)系統(tǒng)，應(yīng)該要利用文檔記錄原子，組件，視圖和模式的最佳方案。文檔還可以包括指導(dǎo)原則和代碼片段。
包含：
- 設(shè)計(jì)決策的基本原則
- 執(zhí)行細(xì)則
- 常見(jiàn)錯(cuò)誤和正確示例
- 代碼片段
1. 好的設(shè)計(jì)系統(tǒng)會(huì)不斷進(jìn)化
設(shè)計(jì)系統(tǒng)必須同產(chǎn)品和團(tuán)隊(duì)不斷適應(yīng)和進(jìn)化。把它當(dāng)成一個(gè)有生命的個(gè)體，它永遠(yuǎn)都不會(huì)有完美的時(shí)候，它會(huì)不斷成長(zhǎng)，并且需要你的關(guān)注。最終，可能需要專門分出一個(gè)團(tuán)隊(duì)來(lái)維護(hù)它。
如果公司不斷發(fā)展壯大，就可能需要一個(gè)團(tuán)隊(duì)來(lái)維護(hù)和進(jìn)一步迭代它。
最初，設(shè)計(jì)系統(tǒng)只需要幾個(gè)人抽出部分時(shí)間兼職維護(hù)。后來(lái)需要指派專門的人來(lái)全職維護(hù)，直到最后會(huì)組建出一支由設(shè)計(jì)師，工程師和產(chǎn)品經(jīng)理組成的大團(tuán)隊(duì)來(lái)不斷改進(jìn)和維護(hù)。
另外，當(dāng)公司很小的時(shí)候，比如只有幾個(gè)人，可能團(tuán)隊(duì)根本就不需要設(shè)計(jì)系統(tǒng)。它甚至可能會(huì)阻礙產(chǎn)品的發(fā)展，這個(gè)時(shí)候最需要做的是不斷去迭代，不斷讓產(chǎn)品適應(yīng)市場(chǎng)。
一旦團(tuán)隊(duì)成長(zhǎng)起來(lái)并開(kāi)始分工越來(lái)越細(xì)的時(shí)候，對(duì)某種類型的系統(tǒng)需求就變得愈發(fā)明顯起來(lái)。當(dāng)公司有許多團(tuán)隊(duì)和同事間從事不同的工作時(shí)，設(shè)計(jì)系統(tǒng)就必須要有了。
2. 不要讓完美阻礙你的發(fā)展
創(chuàng)建出一個(gè)設(shè)計(jì)系統(tǒng)并不是一項(xiàng)艱巨的任務(wù)。不要因?yàn)樗軓?fù)雜而不斷拖延。定義好基礎(chǔ)設(shè)計(jì)原子 ，讓其他部分隨著產(chǎn)品的變化而發(fā)展就好。當(dāng)事情開(kāi)始變得復(fù)雜的時(shí)候，再多花些時(shí)間來(lái)完善它。
最難的是開(kāi)始去做。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。