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