2021-11-25 ui設(shè)計分享達(dá)人
眾所周知，黑帕云這樣的產(chǎn)品幾乎使用了所有類型 B 端的組件。
由于我司設(shè)計資源有限，所以在擁有了組件庫、設(shè)計師定好了設(shè)計規(guī)范之后，作為產(chǎn)品經(jīng)理就直接可以手?jǐn)]設(shè)計稿了。
這是是前面一文《 B 端產(chǎn)品中，一個 Epic 基本功能設(shè)計的過程》 提到，作為一個長大了的產(chǎn)品經(jīng)理，有時候沒有資源給你做交互沒有資源給你畫 UI 的，你要自己學(xué)會自給自足。
這個系列就是作為產(chǎn)品經(jīng)理的我，在這兩年中“自給自足”做設(shè)計的的一些總結(jié)與發(fā)現(xiàn)。
自給自足的前提是，前面說的組件庫和設(shè)計規(guī)范，即擁有一個設(shè)計體系（Design System）。
關(guān)于設(shè)計體系的定義和內(nèi)容各家都不同，我找出來了以下案例供參考。
Tilio（一個寫作和筆記應(yīng)用）聯(lián)合創(chuàng)始人，有十年 UX 設(shè)計經(jīng)驗的阿拉·霍爾馬托娃在《設(shè)計體系：數(shù)字產(chǎn)品設(shè)計的系統(tǒng)化方法》一書中這么定義：
設(shè)計體系是為了實現(xiàn)數(shù)字產(chǎn)品的目的而組織起來的一套相互關(guān)聯(lián)的模式和共享實踐。
模式指的是界面中那些重復(fù)的要素：用戶流程、交互方式、按鈕、文本框、圖標(biāo)、配色、排版、文案，等等。
實踐則是我們?nèi)绾蝿?chuàng)建、捕獲、共享和使用這些模式，尤其是在團(tuán)隊協(xié)作時做這些事情的方法。
書中將設(shè)計體系分成以下幾個部分：
設(shè)計目的、設(shè)計原則、組件庫、樣式指南，以及用于提高設(shè)計師和開發(fā)人員溝通效率的工作流程和實用工具。
整理之后，可以參考下圖：
可以發(fā)現(xiàn)，以上設(shè)計體系無論如何定義概念，都是由設(shè)計原則+設(shè)計指南+一些基礎(chǔ)的元素（比如 Design Token、Material Foundation、Icons）+組件庫+其他資源工具構(gòu)成。
形成這些內(nèi)容的目的都是為了給自己產(chǎn)品建立一套保證設(shè)計質(zhì)量、提升設(shè)計決策、提升溝通效率的“工具包”，從而讓產(chǎn)品形成自己的符合設(shè)計原則的風(fēng)格。
所以設(shè)計體系是什么不重要，重要的是如何在遵循設(shè)計原則下，能夠高效做出高質(zhì)量的設(shè)計。
一個開源設(shè)計原則和方法的網(wǎng)站 Design Principle 這樣定義設(shè)計原則：
Design Principles are a set of considerations that form the basis of any good product.
譯為“設(shè)計原則是構(gòu)成任何好產(chǎn)品的一套基礎(chǔ)考慮因素。”
比如 Salesforce 的設(shè)計原則是：清晰、高效、一致、美觀。并且優(yōu)先級由前到后。
可以理解為 Salesforce 會追求清晰大于高效、一致、美觀，比如在產(chǎn)品設(shè)計中，讓用戶清楚的看到、理解、自信地去操作要比任何事情都要重要。
這個準(zhǔn)則很容易理解，可以推論出 Salesforce 在度量體驗時，將“易用性”放在了第一位，即作為一個 SaaS 產(chǎn)品，不能有任何讓用戶產(chǎn)生疑惑的地方。如果在設(shè)計上的美觀而要犧牲清晰，這就是不可取的。
有了設(shè)計原則之后，下一步是需要一個組件庫。這里說的組件庫囊括了無論是原子化的顏色、字體、陰影、Icon 這些基本的元素，還包括了已經(jīng)封裝好的組件，如 Button、Alert、Toast、Text Input。
關(guān)于為什么要組件化，也不多說了，之前看過一篇閱文體驗設(shè)計 YUX 的《組件化思維—— 適應(yīng)并推動業(yè)務(wù)及產(chǎn)品變革的設(shè)計案例》寫的非常清楚。
接下來我通過 Minecraft 這個游戲來總結(jié)了組件庫。
玩過生存模擬類游戲大家都知道，在游戲中會有一些可以靠雙手勞動得來的基礎(chǔ)材料，比如砍樹砍來的木頭、地上撿的石頭、挖礦挖的燧石。這些基礎(chǔ)材料可以合成一些簡單處理過的材料，比如把木頭合成為木板。然后可以再把半成品進(jìn)一步加工，比如木棍。
在 Minecraft 這個游戲中，如果玩家要制造一個弓箭，需要一個弓和一個箭。弓和箭的合成又需要一些半成品和成品或者原材料來加工制作，如下圖：
對應(yīng)在設(shè)計組件庫中可以對照查看，一個完整的頁面是可以通過一些元素、控件、組件、大組件組成：
在系列開始之前，先聲明一下文章的范圍和適用人群。
關(guān)于 「B 端設(shè)計總結(jié)」這一系列，主要是我個人在已有了我們的設(shè)計規(guī)范和組件庫后，“自給自足”的情況下探索出來的一些組件使用規(guī)則，更偏向產(chǎn)品經(jīng)理或者交互設(shè)計師來參考。
所以系列中不會寫設(shè)計規(guī)范，比如說字號、顏色、間距等等這些屬于設(shè)計規(guī)范中內(nèi)容。而是基于已有的規(guī)范，總結(jié)之前我們功能中涉及到的該使用哪些組件，也可以稱之為狹義上的設(shè)計指南（Design Guidelines）或者設(shè)計模式（Design Patterns）。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.sillybuy.com