過去兩年,「設計系統 Design System」進入了大家的視野,。這個概念在國外產生已久。
過去我們提到規範性的設計或高效且統一的設計,就會把解決方案指向「設計規範」。
面對市場變化,僅強調「設計規範」,可能會面臨局限性。因為設計師在面對市場變化時,想要做到快速響應,設計規範往往是滯後的。
局限性還表現在團隊變化和技術變化。
再者,除了智能手機,可能我們還得面對更多平台的設計,PC、Watch、TV、車載系統等。這時如何跨平台的保持統一性,又兼顧各個平台獨特的體驗形式有針對性的設計,就顯得尤為重要。而設計規範或者單一的設計語言就顯的力不從心。
面對以上問題,我們可能需要一個更具包容性的設計系統,來保持設計的質量和設計師的效率。
何為設計系統?
“設計系統是一組相互關聯的模式和共享實踐,它們被一致地組織起來以服務於數字產品的目的。”
—Alla Kholmatova.
“設計系統不僅僅是 UI 樣式指南,這也是團隊工作的方式以及定義團隊的價值觀和原則的東西。“
—Marco Lopes
「我們需要⼀種新的更具包容性和多元化的思路,可以幫助我們將不確定性控制在⼀定 範圍內,從⽽真正的釋放重復勞動,讓更多的設計者有機會去觸及更好的產品體驗,這 就是設計體系」
螞蟻金服的設計系統包含了上圖的五部分,而其中「設計語言」、「設計資產」以及「體驗策略」是最核心的三塊內容。分別對應:Efficiency-高效、Consistency-可控性、Better UX-更好的體驗。
設計系統包括:
每个公司的设计系统都略有差異,没有固定模式,重要的是實踐和適用。
團隊
設計系統需要有一個專門的設計小組去維護,包括Leader、設計師、工程師等。維護設計系統,不意味著設計師和工程師需要脫離業務線,一般會是50%比50%的工作分配,需要有一半或以上的精力參與到產品設計中。
設計價值觀&原則
设计价值观是设计系统的核⼼,一切的設計行為都需要圍繞著設計價值觀去進行,設計價值觀也是判斷一個設計是否合理的準則之一。
當然其並不是一成不變的,根據用戶的變化、市場的變化或者產品策略和版本的更新,可以被修改和新增,順應變化和和包容性應該是建立設計價值觀的重要因素。
- iOS的設計價值觀:Clarity.Deference.Depth.
- 物质是隐喻
材质设计的灵感来自于物理世界及其纹理,包括它们如何反射光和投射阴影。材料表面重新构想了纸张和墨水的介质。
基礎模板、組件庫
模板和組件的歸納,是一個不斷抽象的過程,這些資源是通過怎麼的步驟歸納出來的?
這是通用電氣(GE)的設計團隊在2012年創建 Predix 設計系統時,應用的歸納步驟。後來的各個公司的設計系統抽象的方法,大多是由此衍生和變化。
Applications 應⽤——Feature 功能——Templates 模板——Components 組件——Basic 元素——Principle 規則
Applications 應⽤
公司的各个部⻔门、业务线拥有很多应⽤。這些產品中會有一些相似的業務模塊和功能。Feature 功能
把這些相似的功能抽取出来,每个功能由多个⻚⾯组成,每个可以完成 ⼀个⽤户⽬标。Templates 模板
从不同的功能中抽取出相似的页⾯结构样式,形成模板。Components 組件
界⾯设计中运⽤到的⼩的组件,如图 表、数据列表、范围选择器等等Basic 元素
界⾯设计中最⼩的单位,如按钮、分 隔线、勾选框等等。不可能再向下分 解的元素。Principle 規則
设计师在创造新的设计模式的时候需要参考的设计规则。規則可以让你预测未来的设计逻辑。例如規則可以指导你的⽂字在什么时候需要换⾏。
其他歸納方法還有:
-
Atomic Design 设计理论Atomic Design 设计理论
- 螞蟻金服歸納抽象化組件的思路。
E(examples 示例)➡️T(template 模板)➡️C(components 组 件)➡️G(global styles 全局样式)
設計文檔、技術文檔
通過文字說明與圖例的方式,去描述你的設計系統關鍵的地方,盡可能的詳細和完善。
可以起到繼承、溝通作⽤,讓新加入的設計師、工程師容易上⼿使⽤設計系統;對各種專有名詞的定義,讓所有成員對系統有統⼀的認知。和組件庫一樣,設計、技術文檔也可歸納為設計資產。
工具、協作規範
-
統一團隊使用的工具
-
統一的文件/資源/圖層命名
- 雲協作平台
如今的雲協作顯得非常重要,對於團隊來說,是提高效率的措施,設計師和開發的對接有InVision、藍湖;設計師之間的協作,Sketch 插件 Abstract 和 Sketch Team 的 Cloud 更是支持文件的下載。
Abstract界面
Remember; Building a design system is a long process filled with trial and error, Test, learn, Fail….
建立设计系统是一个漫长的过程,充满了反复试验,测试,学习,失败…
—— GE 产品设计师 Marco Lopes
參考資料: