設計系統簡史——過去，現在與可能的將來

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我第一次聽說“設計系統”這個概念是在2016年初，契機是在某設計師招聘要求的欄目中看到了“熟悉至少一種設計系統，例如 HIG 或者 Material Design”。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然後我就認認真真把 Material Design Guideline 看了一遍，記下來什麼是 dp 單位，什麼是 FAB 按鈕，toast 和 snackbar 有什麼區別……就跟現在很多第一次聽說這個概念的設計師一樣，我當時覺得 “臥槽設計系統太牛x了，未來必成大器”。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一晃也這麼些年了，似乎每個月都能聽到有關設計系統的新聞或者是爭論，也不斷有新的設計系統誕生或者是衰落，但是現在當我重新點開一個設計師招聘要求的時候，還是那句“熟悉至少一種設計系統，例如 HIG 或者 Material Design”，可能有時候會再加一個Lightening Design System。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我很慚愧，在瞬息萬變的 IT 領域，設計系統比我還抗衰老。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以我花了一些時間，看了看設計系統的過去和現在，也想了想設計系統的未來。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"過去 | 設計系統作爲一種“文檔”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"按照現在的主流模式，一個設計系統主要由三部分構成：設計原則 (design principle)、風格規範 (style guide)和模式\/組件庫 (pattern lib \/ component lib)。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這三個部分分開來看，都是非常古早的概念了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我沒有考證到“設計原則”最早出現在什麼時候，但是20世紀初的“格式塔理論”已經是個極爲規整的設計原則了，它所提出的“親密性”、“連續性”和“閉合性”等原則已經成爲了圖形設計的美學基石，在無數設計師的博客裏一次又一次地被提及。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“風格規範”也不新。60年代的《美孚品牌手冊》和70年代的 《NASA 圖形使用規範》就是現代style guide的早期代表作，已經包含“顏色、字體、圖形、用法和示例”等內容，直到現在的各類風格規範依然沒有跳出這個範圍。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/a9\/a953634609296442f6681c9a73d3a380.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"《1975 NASA Graphics Standards Manual》“模式\/組件庫” 原本是兩個分離的概念，即“模式庫”和“組件庫”。簡單來說，“模式庫”是給設計師看的，介紹在什麼情況下應該用什麼設計方案；而“組件庫”是給工程師看的，介紹各種組件的代碼和定製規則。但後來大家慢慢發現模式庫和組件庫的目錄長得差不多，就乾脆把兩者合併起來了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/0b\/0b31329e4df5b3c945df42478b793173.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"Pattern Library 與 Component Library 的區別"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼，最早把上述三個部分合起來，從而創造出符合現代定義的設計系統的是什麼公司？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"根據我所能查到的資料，應該是 Sun Microsystems (後來被甲骨文併購) 。它的設計系統叫 Web Design Standards。感謝 archive 網站的收錄，在其2005年的版本中，我們就已經可以看到 “Design System” 的叫法，其 Style Guide 部分和現在流行的設計系統相差無幾，而且組件庫模式庫一應俱全。得想想那纔是2005年！北京奧運會都得3年後再開。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/d6\/d624864cc26834069be6b99b4d10b5f5.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"Web Design Standards 的組件列表 （2005 年的存檔）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來，在2006年雅虎推出了Yahoo Design Pattern Library，在2007年也有了像“ui-patterns.com”這種“模式庫分享平臺”。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/25\/25d28ed51153741b4fab751ae24ba3fa.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"Yahoo Design Pattern Library"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/ae\/aebe3b369c19b0eb14c27e7f75442624.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"Ui-patterns.com"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在這段時期中，開發者和設計師們發現軟件圖形界面其實能夠結構化地進行設計，並通過“文檔”的形式（線上或線下）規範化。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當我們現在提到“設計規範”，其實指的就是這種最古早的設計系統。它的主要功能是幫助各個組織統一內部冗雜的設計語言，減少重複的設計開發工作。而互聯網社區也讓不同組織的設計系統有機會互相學習從而快速演化出最佳實踐。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"有趣的是，如今當設計師們介紹設計系統的好處時，經常會說這三點："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“統一描述，消除誤解”（減少“蓋煙囪”）、“促進複用，增加效率”（減少“造輪子”）、“記錄實踐，沉澱思考”。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"實際上這些好處，在十多年前，設計系統僅僅作爲一種規範文檔的時候，就已經被意識到並形成良好實踐了，算不上“先進”。如果設計系統僅僅能提供這些價值，那並不值得業界這麼多的持續投入，也不會一直保持較高的討論熱度。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"換句話說，“設計系統”所包含的95%以上的內容，十幾年來一直沒有變過，不斷革新的是內容的載體。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"現在 | 設計系統作爲一種“框架”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果要爲這段時期的故事找一個序幕，我覺得是2006年（雖然跟上個時間段有些重疊）。在那一年，Yahoo 把 Yahoo Design Library 升級成了 Yahoo UI Library 框架 ，簡稱 “YUI”。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c5\/c56417f19198e33cb720503383c42897.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"Yahoo UI Library"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用框架很好地彌補了設計文檔的缺點：更新更加及時，在工程層面不需要到處找參照，在團隊規模擴大之後依然能保持很好的連貫性。這直接讓開發者而非設計師成爲了設計系統的最大受益人。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"YUI 之後，就湧現出了一大批的前端框架，如960, Blueprint和YAML等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"回頭看，早期的前端框架開發者考慮問題非常單純，就是如何更簡單地實現優秀的視覺效果。像 Blueprint 的創造者Olav Bjørkøy在2007年寫的：“我的框架輕量得像微風，YUI 相比之下就像是龍捲風！”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/bd\/bdc274b03b5bcab579691bd915fc50ae.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"Blueprint CSS 框架"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"於此同時，智能手機也在高速發展，大家都在絞盡腦汁思考怎麼把巨大的網頁以最簡單的方式塞進狹小的屏幕。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在2011年，Twitter 的設計師 Mark Otto 和工程師 Jacob Thornton，在公司的 hackathon 合作創造出了 Bootstrap，希望這個內部工具可以 “help awesome people make awesome shit”。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Bootstrap 在2012年推出了12列的自適應網格系統，優雅地解決了網頁的響應式問題，順利地帶領網頁走進 mobile-first 時代。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"老實講，當聽到有些設計師認爲 “Bootstrap 就是個前端框架，進不了設計系統的神殿”時，我感到有些痛心，要知道現在大多數的設計系統有自適應的網格系統，就是託 Bootstrap 的福。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/99\/9909e671e1658ac6e78d1d454cfd3de5.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"其實沒啥可放的，畢竟大家都見過 Bootstrap"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在2010～2014年間，還湧現出了一批軟件巨頭的設計系統：像微軟的 Microsoft Design Language (可能大家更熟悉它的別名“Metro”)， SAP 的 UX3 與 Fiori 1.0 還有 Oracle 的 Alta UI 等。這幾年剛好是 Human-centered-design 風頭最盛的幾年，軟件公司的設計團隊也處於“外部有需求，內部有話語權”的巔峯時期，於是都招兵買馬，重新設計了幾乎所有跟不上時代發展的軟件系統。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/cc\/cc084a9b6408fc6857ec614cb3943d5c.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"Microsoft Design Language"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/9c\/9c1dce3c510253e0b05848b51e364131.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"SAP Fiori 1.0"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/50\/50398452d0ea0d1f562555f25ba289f2.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"Oracle Alta UI"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這個時期中，設計系統領域還有一個比較獨特的玩家，就是 BBC。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"BBC 這家老牌媒體公司在90年代就意識到了信息科技和新興多媒體對新聞行業的衝擊，所以也一直積極轉型，擁抱互聯網（注：其實這是個很有意思的案例，有興趣的可以搜一下1999年的文章《From BBC Newsroom to BBC Newscentre》，也許之後我會寫一篇文章分析一下 BBC 的數字化轉型之路）。於是善於未雨綢繆的它早在2010年就搭建了 Global Visual Language 3.0 (GVL 3.0)，然後在 Research Studios, R\/GA 和 Massive Interactive 等廣告設計諮詢公司的幫助下將其發展成了著名的 Global Experience Language (GEL)，用以支撐 BBC 在數字媒體領域不斷延伸出的新產品和新服務。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"GEL 應該是“聯邦化合作 (Federated Collaboration)” 的早期典範，它由一個對設計系統負責的小組統籌項目開始，進而號召各產品線的設計師貢獻範例，再依靠討論和實驗不斷進行迭代，最終快速得到一個可用的設計系統。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/ed\/ed8ea36ffc9fe04fa3911bcc90623c6e.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"BBC Global Experience Language"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"後來，整個世界就進入了移動互聯網的時代。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"網頁像是個城市公園：有個瀏覽器就能訪問，大家在寬鬆的規則下和諧相處。而手機 app 則像是遊樂場：只有 “ios” 和 “安卓” 兩家，裏面的設施更好玩，但是你得買門票，還得守規矩。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"UI 設計上要守的規矩，就由 “Apple HIG” 和 “Google Material Design” 這設計系統界的兩座大山來制定。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Apple HIG 的故事很簡單，畢竟大家都很熟悉了，用一幅圖概括吧："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/86\/86f881454b875bd5215ab9969fe68a1e.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Material Design 的故事也很簡單，畢竟大家都很熟悉了，也用一幅圖概括吧："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/9f\/9fb5b39661e55fc0fdfc659bfc582a4c.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我覺得這裏值得一提的是 Material Design 對於設計目標的系統性執行。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"MD 所定義的設計目標是 “跨終端設計語言” 。看看它爲這個目標做了什麼努力："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了適應各異的屏幕尺寸，放棄了立體且複雜的擬物設計語言，採用“卡片”這種最靈活的組件作爲基石，並向印刷品的視覺效果傾斜；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了適應各異的像素密度，規定了dp作爲基礎尺寸單位；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了適應各異的輸入方式，強調了“隱喻”作爲操作提示的意義；"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"……"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"它將這些精巧的思考總結爲“材質即隱喻”、“模仿印刷物”、“有意義的動效”的設計原則。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"反觀我們如今看到的很多設計系統，把設計原則作爲一種假大空的宣傳辭令，隨意寫點什麼“直觀”、“有趣”、“高效”這種放之四海皆準的形容詞，最後做出來的設計系統也僅僅是工工整整但乏善可陳——畢竟沒有什麼設計追求的是“不直觀”、“不有趣”或者“不高效”。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Material Design 中“從目標到結果、從抽象到具體、從整體到局部”的“設計系統性”，相比於“設計系統”的概念，其實更值得每一個 Design System Builder 學習。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2015年之後，UX 設計界迎來了設計系統的大爆發。科技公司如果不整個設計系統，打招呼都不好意思說自己是混互聯網的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"根據我特別不完全的統計，大概有以下這些比較有影響力的設計系統不斷湧現："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2015 | Salesforce - Lightning Design System"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2015 | 螞蟻金融 - Ant Design"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2016 | SAP - Fiori 2.0"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2017 | Atlassian - Atlassian Design System"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2017 | Skyscanner - Backpack Design System"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2017 | IBM - Carbon Design System"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2017 | Firefox - Photon Design System"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2017 | Microsoft - Fluent Design System"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2017 | Shopify - Polaris Design System"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2018 | Trello - Nachos Design System"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2018 | Gitlab - PAJAMAS Design System"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2018 | Workday - Canvas Design System"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"..."}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"真的挺多的，所以也不一一贅述了，有興趣的可以來這裏看看。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相比於“文檔化”的設計系統，“框架化”的設計系統尚且年輕，這也導致大部分組織對其價值並沒有很好的判斷。我常常聽到各類組織的設計部門激烈討論 “我們是否需要做一個像Material Design 一樣酷炫的‘框架化’設計系統”，最終不了了之。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我覺得針對這個問題，根據前人的經驗，需要先回答下面三個問題："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"1.組織內部是否已經有完善的“文檔化“設計系統？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“框架化“設計系統的崛起並不意味着“文檔化”設計系統的消逝，實際上，幾乎所有的設計系統框架都來自於設計規範文檔。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以，如果組織內部連一個完善的“設計規範”都沒有，那就先規規矩矩地整理出一份邏輯通順的設計系統文檔吧。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"2.是否有跨產品線統一設計風格的業務需求？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用代碼把設計系統文檔變成設計系統框架是需要一定成本的，所以就要考慮最終產出的業務價值是否足夠覆蓋成本。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當產品線規模並不大的時候，平衡成本和效率的最優解仍是使用“設計規範”來管理設計資產，再使用開源的前端框架來加速開發進度。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"若產品線規模大，但由於各種原因並不需要統一設計風格的時候，最優解則是採用相對開放的方式促進不同產品線分享交流自己的“設計規範”，互相借鑑優秀的設計模式。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果產品線規模很大，而且有統一設計風格的業務需求（無論是爲了提高設計開發效率，還是爲了向用戶提供連貫的使用體驗），那麼一份框架化的設計系統就是很必要的了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因爲跨產品線統一設計風格意味着設計師和開發人員的工作習慣需要發生改變，而這要求設計系統有極好的“易用性”來幫助整個團隊過渡。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正如 Atlassian 團隊對 Material Design 成功經驗的總結：“Make it so easy to use that it’s harder to not follow it.”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而框架化的設計系統明顯比文檔化的要易用得多。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"3.各條產品線未來是否有平臺化的打算？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"框架化的設計系統如果要將影響力和價值進一步擴大至組織外部，那麼一定得依託一個對外開放的技術平臺，把自己變成一個 UI Library。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"例如 Bootstrap、Ant Design 依託前端框架，Lightning、Polaris 依靠平臺，Material、HIG 依靠操作系統，乃至 Fluent 也是爲了 Hololens 的未來而準備的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"畢竟真正高頻查閱這些設計系統的人，正是基於對應技術平臺的開發者和設計者。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其他不依託技術平臺的設計系統，最終仍然是公司內部的設計資產，或者對外僅僅作爲“參考資料”提供價值。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"優秀如 Airbnb DLS 、BBC GEL，現在網站都下線了，估計也是覺得一個內部設計資產沒必要完全公開出來給大家參觀吧。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"可能的將來 | 設計系統作爲一種“工具”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在我目所能及的範圍內：現今的設計系統世界晴空萬里，唯獨有兩朵烏雲，分別是“設計與開發之間的鴻溝”與“大顆粒度組件的複雜性”。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“設計與開發之間的鴻溝”指的是設計師與開發者都是設計系統的構建者，然而他們構建設計系統的方法與工具都截然不同。這不僅意味着開發者有時候需要花很高的成本才能將設計師的設計轉變爲可用的組件庫，也意味着設計工具沒辦法良好地匹配開發模型，導致有些時候設計師修改起 UI 比開發都費事兒。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果能彌合這道鴻溝，那麼前文所說的“把設計系統文檔代碼化成設計系統框架所需的成本”就會大幅降低，任何團隊都能輕鬆構建一個非常易用的設計系統框架。而之後，這些框架也會成爲設計工作自動化的基石，讓 AI 代替設計師和開發人員完成細碎的設計調整工作也將不再是那麼遙不可及的事情。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"現在我們已經可以看到越來越多的解決方案在試水這個方向，比如說 ReactSketch.app 和 Storybook 這種設計稿轉代碼的工具；比如說 Figma 這種關注工程化的設計工具，可以跟 React 或 Flutter 很好地配合；再比如說 TeleportHQ 之前展示的草圖轉代碼工具。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/67\/67cf8fc8c712dd8b700ecd24f5634da3.gif","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"TeleportHQ 的 “AI 線框仔”工具"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我也有理由相信，只要 AI 領域能持續獲得投資，未來肯定會出現一批高舉 “AI-driven \/ AI-aided Design” 旗幟的公司出現，推動界面設計的自動化進程。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“大顆粒度組件的複雜性”指的是現在絕大多數的設計系統都無法覆蓋到“原子設計 (Atomic Design)” 概念中“分子級別”及以上的設計，然而正是這種大顆粒度的組件才蘊含着業務思考。簡單舉例來說，無論是電商網站還是 ERP，它們的按鈕、搜索框完全可以設計得一模一樣，但是它們的列表篩選器一定大不相同。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果設計系統有辦法簡單地維護大顆粒度組件，那麼設計系統的“最佳實踐”作用將進一步拓展至業務領域。產品經理，業務分析師等角色也將會從中受益。將來，當產品團隊在面對一個需求嘗試構建產品界面時，會先去查看設計系統內是否有相似業務場景對應的大顆粒度組件，如果能夠滿足需求，甚至不需要引入設計乃至開發資源。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"老實講，這方面的嘗試我現在看到的還不是很多，給我留下深刻印象的是 AXA Design System。它有描述“分子級別組件”、“組織級別組件”和“模板級別組件”的章節，尤其是其中 “Quote funnel” 章節針對保險行業特有的業務場景進行了規範，令人耳目一新。缺點是 AXA Design System 仍然是典型的設計規範文檔，沒有進行“框架化”，看不到工程方面的思考。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/35\/35403d9e95a96d374cd8f71859180617.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"AXA Design System"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"去年阿里巴巴在 UCAN 期間公佈的Fusion Design也是這個方向的一個很有開創性的嘗試。它也包含了關於“區塊\/組織\/模板級別組件”的章節，還向設計師及開發者提供了兩套工具，渾身上下都散發着“成爲設計系統界的 Wordpress”的野心。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/80\/80d29b6d02214499339de4bf13b3f6a8.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"阿里 Fusion Design"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"總的來說，設計系統已經經歷了從 “跟我學” 到 “用我的” 的轉變過程，未來很可能會向 “幫你建”繼續轉型，進一步降低使用門檻，成爲一套惠及設計師、開發者乃至產品團隊的工具。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"一些跑題的想法 | 設計系統會終結 “UX 設計師”這個職位嗎？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在查閱資料的過程中，我不止一次看到過 “設計系統終結UX設計師” 的論調。比如這個："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/ad\/adca53b73f647854144f87e234f51d8c.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"還有這個："}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/e1\/e13d5b75d273ad055bbe099787726fc6.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我看了看回復，頗有爭議性，而且確實也引發了一部分 UX 設計師的焦慮。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我想說說我的看法："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1.不應該用靜止的眼光看待設計系統。各種設計系統雖然現在看起來很相似，但由於設計系統依託技術平臺的特性，隨着技術平臺的進一步差異化，未來對設計系統的需求會更多樣。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"設計系統有可能針對不同的業務場景，例如：數據監控、在線醫療和智慧工廠……想象一下，一個熱處理工人戴着厚厚的手套，你能指望他精確操作 48 x 48 dp 的觸控區嗎？或者，一張 3d 胎兒彩超，你想用什麼組件標註出“嘴在哪，眼睛在哪，手在哪”？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"設計系統也有可能針對不同的硬件載體，例如：車機 HMI、火箭 HMI（比如 SpaceX）、飛機 HMI（比如 Gulfstream）、智慧大屏、商場信息屏和醫療手術機器人，乃至華爲之前展示的 5G 遠程挖掘機 ...... 不同的硬件平臺都需要不同的設計系統，這種“不同”不是像現在我們常看到的大路貨這種稍微改幾個組件，而是從設計原則到基礎控件到技術框架的完全更新。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/73\/733aeb4fdf5be4e991c0f9c8d15a6be9.png","alt":"圖片","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"真男人就該開挖掘機！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"甚至當交互模式進一步革新，把觸控屏鼠標什麼的扔掉之後，AR\/VR 需要新的設計系統，環境計算（Ambient Computing）需要新的設計系統，我也相信將來 VUI， chatbot，腦機接口仍會需要新的設計系統，因爲無論是怎樣的設計工程，都會注重“設計模式”的積累，也都會追求更高的複用性。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"UX 設計師在現階段仍然是離設計系統最近的角色，這意味着，設計系統的崛起並不會削弱對 UX 設計師的需求，只不過對 UX 設計師的技術能力提出了更高的要求。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"而隨着上文中“設計與開發之間的鴻溝”逐漸彌合，UX 設計師也就可以比較平滑地向有工程能力的 \"design system builder\" 轉型，這意味着設計系統只會帶來設計工作重心的轉變。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但說回來，設計師仍然應該花更多的時間學習工程技術。就像工業設計師學習加工，建築設計師學習結構，室內設計師學習施工一樣。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2.基於上文所述的“大顆粒度組件的複雜性”原因，如今“產品概念”和“產品頁面”之間仍然隔着無數個需要手工設計的大顆粒度組件，而這正是現在大多數 UX 設計師的在執行層面的主要工作，產品經理無法替代。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"設計系統如果想消解 UX 設計師的這部分職責，還需要回答以下這些問題：“大顆粒度組件”在業務模式高速變化的當下，最終的複用程度到底會有多高？假設未來設計系統能夠很好地複用這些“大顆粒度組件”，那麼\"design system builder” 是否能單純靠從產品經理處獲取的二手信息，就提煉出足夠優秀的最佳實踐？如果最佳實踐不能完全滿足業務需求，哪個角色應該對最佳實踐進行定製化設計？按照這種合作模式，如果用戶反饋“這個產品真難用”，到底誰該對此負責？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關於這些問題，暫時還沒有什麼實踐得出有意義的結論，我也很期待答案被揭曉的一天。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果真的有設計系統代替 UX 設計師來設計“大顆粒度組件”的一天，哪怕僅僅在一小部分業務領域，那麼也意味着會有更多的 UX 設計師從重複勞動中解脫，可以流入到更有創造力的領域去，可能是 UX 研究，可能是 UX 策略，也可能是 “沒有人比我更懂用戶”的產品經理。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這些解脫了的 UX設計師會有時間離開辦公室，來到使用場景與用戶面對面的聊天，體驗他們的生活，洞察隱藏的需求；會有時間踏踏實實地針對每個產品實施可用性實驗，而不是僅僅依靠小規模訪談或者專家走查；會有時間重新審視品牌資產，考慮如何在體驗流程的各個觸點與消費者建立更好的聯繫，培養忠誠度......這些工作已被證明並不是沒有價值，只是在現階段不得不讓位於“趕緊畫完稿子讓產品上線賺錢”，所以價值沒有被充分認識到。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這對於 UX 設計師來說是好事，不值得爲此焦慮，畢竟絕大多數 UX 雖然自嘲“線框仔”，但實際上對自己應該幹嘛還是有清醒認識的。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文轉載自：ThoughtWorks洞見（ID：TW-Insights）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文鏈接："},{"type":"link","attrs":{"href":"https:\/\/mp.weixin.qq.com\/s\/nskpYOxtatStgs79fs5YEw","title":"xxx","type":null},"content":[{"type":"text","text":"設計系統簡史——過去，現在與可能的將來"}]}]}]}