設計體系簡析

魚子醬

設計體系的誕生

伴隨著互聯網的發明與發展，設計師崗位不斷細分，衍生出了越來越多的相關崗位：網頁設計師、GUI視覺設計師、UX交互設計師、UED用戶體驗設計師、全棧設計師等。他們將平面設計的設計原則結合平台特點、自身工作流程，探索、總結方法以求設計研發高效率。於是，設計體系應運而生。

設計體系的演變

早期的設計體系以模塊化思維主導設計規範的制定，強調頁面製作的高復用度和低成本。它往往由設計與開發開始，在經過一定積累後抽取出其中的組件得以應用。當遇到組件庫無法滿足設計需求時，產品經理、設計師就創造出新的組件補充進組件庫中。

在過去的這幾十年里，我們見證了很多企業或社會團體創建組件庫、樣式代碼、設計規範等工具以保證頁面開發的界面統一性，卻一直存在諸多問題且效率低下。這種模式雖然能夠短時間內滿足界面設計與開發的需要，但本身存在著設計規範與組件庫更新滯後、新組件可能會與原有樣式代碼衝突的問題。

2014年，Brad Frost提出了原子設計這一概念，提出「原子設計是一種基於網路設計系統思維方式的規範性原則」的概念。它可以幫助網路設計者建立用戶與產品元素互動的關係，以及如何將它們整合到一個整體的系統中。基於原子設計，設計系統先行，而後根據設計系統來完成業務與組件庫搭建。這樣做可以使得組件與業務同步更新並且多端響應。

然而，這種模式又是具體怎麼樣才能夠實現呢？

或許是Brad Frost 的前端開發背景，前端模塊化開發的鼻祖React的組件化思維給了他靈感。在Brad Frost 創建的設計系統理論方法——原子設計中將界面分為5個層次：Atoms/原子、Molecules/分子、Organisms/組織、Templates/模板、Pages/頁面。

原子設計概念的提出使得設計體系由設計規範演變成為了一種更為高效、科學的設計系統。當我們改變原子時，整個體系都會產生變化，同時我們也可以逐級調整，總之你的每次改變都會影響到這個系統，但是它又是保持一致性的。

設計體系的代表

時至今日，市面上已經出現了不少設計體系，目前較為流行或具有代表性的設計體系主要有：Material Design、Windos Guidelines、SAP Fiori、Bootstrap、Ant Design：

1、Material Design

Material Design是 Google 主導的設計語言。 它和Apple的Apple Design、Microsoft的Fluent Design並列全球三大現代設計語言。由於取材於現實世界，Material Design很講究反應出組件之間的（物理世界）層次關係，強調投影（Z軸）、動效、對比強烈的顏色的運用，更關心系統反應的質感、層次、深度，和其他物體的疊放邏輯。Google通過背後的隱喻來統一設計語言，可以看到所有的規範幾乎都是圍繞Material的隱喻展開的。在近年來安卓發布的Lollipop（5.0）、Marshmallow(6.0) 、Nougat（7.0）、Oreo（8.0），以及即將於2018年Pistachio Ice Cream（9.0）中均可以看到Material Design身影。

2、Windos Guidelines

Windos Guidelines是基於Windows桌面應用程序的詳細用戶體驗指南。它幫助設計師創建採用清晰視覺對象、有用控制項和通用輸入的桌面應用程序，從而營造令人難以忘懷的用戶體驗。詳細地介紹了控制項、消息、視覺對象、命令、交互展現形式，甚至還對包括語音和聲調指南的UI文本標準等進行了定義。

3、SAP Fiori

SAP Fiori是適應SAP轉型升級需要，在SAP UI5（SAP UI Development Toolkit for HTML5的簡稱）這一前端技術框架上創建出的一整套新的用戶交互系統。2016 年 10 月，SAP Fiori 2.0此版本用戶體驗設計概念在紅點獎交互類設計競賽中獲得 2015 紅點設計概念大獎。

Fiori 是 SAP 從自己龐大的業務模塊中抽取、沉澱出來的設計規範，成功服務於 SAP 複雜且龐大的 ERP 系統。SAP Fiori包含了主要針對設計者查看的Fiori Design Guidelines，也包含了面向開發人員查看的 SAP UI5。

4、Bootstrap

Bootstrap是近年來極受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目，節省了瀏覽器兼容，大量提升組建復用並且響應速度很快。它方便團隊快速開發Web站點，減輕甚至省略前端工程師的工作。與它類似的還有Foundation、Semantic UI。但運用Bootstrap也會因此受限，僅適用於輕量化產品界面。在大中型項目中，前端工程師為了在維護項目中可以方便地按設計師要求快速修改樣式，肯定會逐步編寫出各種業務組件、工具類，相當於為項目自行開發一套框架，而如果在Bootstrap基礎上進行修改必然會面臨css維護成本上升、代碼冗餘、第三方插件衝突情況發生。

5、Ant Design

中台設計語言 Ant Design提供了一套非常完整的組件化設計規範與組件化編碼規範，提供從界面設計到前端開發的全鏈路生態，大大提升設計和開發的效率。Material Design和Bootstrap，前者具有嚴格的設計規範，後者是純粹的UI框架， 而Ant Design，介於這兩者之間。它主要用於用於構建 PC web 中後台管理系統和簡單前台展示系統。從設計角度講，Ant Design的價值不及MD。

Bootstrap在製作簡單界面時具有非常強的實用性，Material Design和Windos Guidelines在制定設計規範時具有不錯的借鑒意義。而SAP Fiori 、Ant Design作為設計系統，同時包含了界面設計規範（面向設計師、產品經理）與編碼規範（面向開發者），都是從自己龐大的業務模塊中抽取、沉澱出來的規範。只是前者一個是為自身業務前台而生，後者則是為後台場景而設計。

小結

回到設計體系誕生的初衷，它其實是界面設計行業生產工具的升級，是工業化提升效率訴求的體現。從設計原則、設計語言、設計規範，到前端框架，再到設計系統，是設計者與開發者對更高效更優雅實踐落地方法的一次次探索。期待未來設計研發一體化，讓設計者從重複勞動中釋放出來，實現從設計支撐到設計驅動的價值轉化。

推薦閱讀：