開始創建你的「設計系統」「Design System」

過去兩年,「設計系統 Design System」進入了大家的視野,。這個概念在國外產生已久。
過去我們提到規範性的設計或高效且統一的設計,就會把解決方案指向「設計規範」。
面對市場變化,僅強調「設計規範」,可能會面臨局限性。因為設計師在面對市場變化時,想要做到快速響應,設計規範往往是滯後的。
局限性還表現在團隊變化和技術變化。
再者,除了智能手機,可能我們還得面對更多平台的設計,PC、Watch、TV、車載系統等。這時如何跨平台的保持統一性,又兼顧各個平台獨特的體驗形式有針對性的設計,就顯得尤為重要。而設計規範或者單一的設計語言就顯的力不從心。
面對以上問題,我們可能需要一個更具包容性的設計系統,來保持設計的質量和設計師的效率。

何為設計系統?

“設計系統是一組相互關聯的模式和共享實踐,它們被一致地組織起來以服務於數字產品的目的。”
—Alla Kholmatova.

“設計系統不僅僅是 UI 樣式指南,這也是團隊工作的方式以及定義團隊的價值觀和原則的東西。“
—Marco Lopes

例子:螞蟻金服/Ant Design

「我們需要⼀種新的更具包容性和多元化的思路,可以幫助我們將不確定性控制在⼀定 範圍內,從⽽真正的釋放重復勞動,讓更多的設計者有機會去觸及更好的產品體驗,這 就是設計體系」

螞蟻金服的設計系統包含了上圖的五部分,而其中「設計語言」、「設計資產」以及「體驗策略」是最核心的三塊內容。分別對應:Efficiency-高效、Consistency-可控性、Better UX-更好的體驗。

設計系統包括:

每个公司的设计系统都略有差異,没有固定模式,重要的是實踐和適用。

團隊

設計系統需要有一個專門的設計小組去維護,包括Leader、設計師、工程師等。維護設計系統,不意味著設計師和工程師需要脫離業務線,一般會是50%比50%的工作分配,需要有一半或以上的精力參與到產品設計中。

設計價值觀&原則

设计价值观是设计系统的核⼼,一切的設計行為都需要圍繞著設計價值觀去進行,設計價值觀也是判斷一個設計是否合理的準則之一。
當然其並不是一成不變的,根據用戶的變化、市場的變化或者產品策略和版本的更新,可以被修改和新增,順應變化和和包容性應該是建立設計價值觀的重要因素。


iOS的人機界面準則(部分
  • iOS的設計價值觀:Clarity.Deference.Depth.
Material Design 的設計原則(部分)
  • 物质是隐喻
    材质设计的灵感来自于物理世界及其纹理,包括它们如何反射光和投射阴影。材料表面重新构想了纸张和墨水的介质。

基礎模板、組件庫

模板和組件的歸納,是一個不斷抽象的過程,這些資源是通過怎麼的步驟歸納出來的?


這是通用電氣(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

參考資料:

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 自然衝擊療法由丁愚仁老師發明,又稱「禪拍」,「拍打」,"自然拍打"。 丁師及其團隊總結經驗,不同的各種病症(含絕症...
    YouAreMyMusic阅读 2,313评论 0 4
  • 《達爾文所未知的》解說詞 撰寫(Written):阿爾芒·馬裏耶(The Animal Mother) 翻譯(Tr...
    JENTSON阅读 1,485评论 0 1
  • 程序員創業白皮書 作者:Paul Graham Paul Graham是程序員,專欄作家。他在1995年創建了第一...
    刘立山John阅读 2,004评论 0 20
  • 姓名 :赵鑫 企业名称:万千工品精密 组别 谦虚二组 【日精进打卡第4天 】 【知~学习】 《大纲》1遍,累计4遍...
    关于赵欣欣阅读 115评论 0 0
  • 1 梦想的存在是可怕的,可怕在也许倾其一生也无法实现。但残酷的现实无法阻拦追梦人的心,一波波追梦人前赴后继,为了梦...
    盛世阿明阅读 502评论 3 5