設計系統是什麼？設計師與產品團隊需要掌握的模組化思考策略 ft.Harry
47:36 Share

AAPT 学院的全新课程给设计师的设计系统必修课正式开卖啰设计系统是现今产品设计中不可或缺而且重要的一环你只要掌握了设计系统的关键思维以及技术就能够有效的提高产品品质以及使用体验并且还能够让团队协作更高效沟通更轻松

这一次我们邀请到了有多年前端开发与设计双栖经验的 Harry 来和大家分享如何从 0 到 1 打造设计系统结合他过去在海内外的实务经验带领大家一起进入设计系统的世界这门设计系统必修课不仅能够让设计师具备工程的逻辑思维打造模组化、好扩展、而且好维护的设计方法更是一个能够衔接不同角色如产品经理和工程师之间的沟通桥梁

有了设计系统的核心能力你将有效的突破团队协作上的挑战并且大幅减少产品开发的时间成本让产品设计的使用体验更上一层楼如果你对这门课程有兴趣的话可以使用没有会计件 NoShowCard 的专属折扣码 NS-CDS400 即可想预购期间外的折扣码优惠折抵 400 元而且数量有限用完为止现在就前往课程页面了解看看吧

Hello Harry 非常开心这一次可以跟你合作这一门线上课程然后也很开心可以邀请你到节目来跟我们分享你过去的经验那我们今天其实就是主要聊关于这个设计系统跟你一些产品设计相关的背景因为你的背景蛮特别嘛就是你会设计会做前端开发我相信比较少人有这样的技能然后

很好的去可以把设计跟这个工程之间像是一个桥梁把它结起来对所以我觉得今天是一个很难得的机会可以聊聊你对这方面的想法我想可能很多听众还不一定认识就是 Harry 那是不是可以请你简单自我介绍一下呢我是哈利就是我主要负责的职务主要是那个设计还有前端开发这样 2017 到 2023 年然后在那个新加坡的电商就是小 Matic

但我覺得應該大家比較少有公司因為我們的市場主要是在那個印度那邊那我在那時候是主要是擔任那個生產品設計師的角色然後期間就是幫公司導入那個設計系統然後就是從 0 到 1 然後慢慢從設計然後到開發把建構整個平台跟流程出來

然后我自己在 2019 年时候创办一个平台是那个 All Rated 主要是一个串流影音评论的平台然后主要是想要帮助那个使用者可以避掉一些雷片比如说像 Netflix 或者是 Disney Park 上面的雷片这样这个平台真的非常需要因为我自己在 Netflix 上面花最久的时间就是找到底要看什么然后很怕说浪费全那个片然后浪费两到三小时所以我觉得这样真的还蛮重要的

反正我当时也是跟你一样的问题就是每次在找片然后就找到发疯就是不知道到底哪部片会比较好看然后有时候可能 Netflix 会推荐你一些比如说什么百分之多少适合你

然后结果你看了之后还发现这还是一部雷片然后就觉得算了算了我就跟他自己来开发一个产品就是可以把那个分数都把它放到每一部 Netflix 上面的作品上然后可以更快知道这部片可能评价是怎么样慢慢就有人使用我觉得它的效果还不错因为大家好像都还蛮想要避掉这些雷片这样那我好奇就是你当时在做这个产品的时候一样有去导入设计系统的概念在产品里面吗

老实讲我们那时候有导入一些基础的一些设计系统原件库在里面但是没有很全面去导入因为设计师跟工程师就是有点像是我一个人在做但是我觉得其实基本上不管是小案子还是大案子基本上我觉得都要导入设计系统会比较好去管理就不管是对你未来的扩充或者是未来的一些流程上面我觉得会比较顺畅一些

那我觉得像这个设计系统实际应用在产品上面跟一些细节流程也就我们等一下可以多聊一些甚至跟讲一下就是我们开的这项课程那主要会想要带给大家什么样的内容那我还是先回到最前面就是先帮大家科普一下什么是设计系统因为这个名词听起来很大很

对那可能很多人不一定这么清楚他的定义是什么然后以及就是设计系统是怎么来的为什么以前没有现在有他的这个发展的历史脉络是怎么样然后像现在很多成熟的产品嘛尤其很大的产品有一个很大的生态系统就会有设计系统对那这部分就可能想要请 Henry 来大概分享一下你自己对于设计系统的理解简单介绍一下

就是我觉得在比较传统的一些产品开发过程,我不知道你以前会不会遇到一样的问题,就是当我们可能设计好一个界面,然后我们会请工程师进行开发嘛,但是因为不是每个工程师都会很了解一些视觉的细节,所以常常就是他们刻好之后就会整个歪掉。

然后最后可能是因为产品快要上线的关系那我们就只好硬把硬上所以就是蛮大的问题我觉得比较像是一种捏黏土的一个方式那设计系统比较像是我们先去把一些积木一些零组件然后先把它先建出来所以我觉得出发点会不太一样过去比较像是从一个立体的面或者是一个

区块去建立好一个产品但是设计系统比较像是先从小的组件开始建立然后透过这些小组件再把它组成一个大的功能出来这样然后我自己在过去其实就是因为遇到很多类似的问题就是比如说像我们公司以前比较复杂然后那时候我记得最早期的时候他们是在外包给一个新加坡的一个技术团队

後來因為做得沒有很好,就把它轉移到台灣的團隊這樣過程中可能交接沒有交接很好,所以管理上會變得很亂然後在我進入的時候就發現好像每次我要修改一個按鈕或者什麼時候他們就要去每個頁面去修改這個按鈕的樣式這件事情會變得非常沒有效率就等於是有點像是以前的 PoShop 一樣我不知道你有沒有經歷過 PoShop 的時期

在设计界面的时候有当然有的年纪是当然是有反正如果用 Foreshift 来设计如果你有这个经验你会发现就是 Foreshift 它每一页都是独立的所以当你要去更改一个按钮的原件的时候你必须要每一页都去改一直到 Sketch 出来之后才有那种所谓的原件的这个概念在然后它可以给其他的界面去做共用所以我们只要去修改这个原件它就会在每个页面上面也会做更改

所以这是为什么会需要设计系统一起来管理因为它有点像是在帮我们去做原件上面的管理可以帮助我们可以减少很多时间去维护或修改这些原件然后减少一些比如说像那个

用户有时候跟他们在沟通的时候会比较偏向在沟通很多那种店面上面的一些视觉的细节但是我觉得当你有设计系统之后比较像是说我要怎么把这些元件然后组装到你的界面身上而不是说我要去刻这些元件出来是比较像是组装的概念然后把产品跟功能把它组装出来这样

了解因为我们刚开始提到原件嘛那设计系统是只有原件这个东西吗还是它其实还有其他更细节的东西要考虑就是你刚好提到一些视觉上的样式嘛这个东西也是可以放在设计系统里面吗其实设计系统它包含就最早可能最前期它也跟我分大概几个架构第一个是设计原则

就是你必須先知道說你這個產品的設計原則有哪些比如說任天堂好了它可能就比較偏向是家庭然後娛樂互動的一些感覺所以它看起來會比較活潑然後當你知道這個設計原則之後你會設計把這些元件然後用這樣的元素把它設計出各個元件出來所以它是有點像是這樣繼承過去有點像設計原則然後繼承到設計素然後最終組成一個這個設計原則下的設計產品

因为其实以前的时代没有设计系统当然可能在技术上还没有到可以做到这样的程度那感觉是不是也是因为以前的产品没有像现在来这么复杂没错没错就是感觉就是比较简单一点那现在的整个服务就很复杂那你可能会有很多延伸的功能那这时候就要考虑更多的

不管在效率上或是以自信上就否则你可能就是看到一个改一个看到一个改一个那这样就会浪费很多时间而且分工开始精细化以前可能网页设计师就要一个人写程式也要做设计但现在可能就分成 Ui UX 然后又前后段对程式那这样

就会都要把这拆开这可以稍微再解释到最早以前就是在八九年代上的时候网络刚兴起所以那时候其实没有所谓而且那时候你要想象就是那时候网络其实是非常非常慢所以我们也没办法放太多的那种视觉元素在上面比如说图片啊或者是影片啊或者是音乐等等

所以最早期的時候其實基本上網頁上面其實基本上沒有所謂的設計系統這個概念但是那時候有所謂的作業系統比如說像 MAC 電腦或者是 Windows 他們其實基本上已經有那種 GUI 的概念在裡面事實上一些作業系統基本上是有設計系統的概念在裡面就它必須去管理這些所有的元件然後再把它應用到你的產品界面上這樣然後後來是一路到 90 年代到 2000 年然後慢慢網路比較越來越快

然后慢慢就可以放一些像多媒体的一些资讯在上面有像我记得最早期的时候有那个很流行那个 flash 的那个还有就他的一些一大堆的 banel 然后很 fancy 的然后那时候就开始知道说这时候已经开始可以把更多的内容到我们的网站上所以这时候就是有开始有所谓的界面在里面

所以才開始慢慢去擴充這些元件或者是一些介面或者是 UI/UX 的概念在裡面這樣然後後來因為 Google 後來也就是開始變大或者是像 Yahoo 這些比較像那種大型的那種網頁平台然後他們這時候就是會開始去收購一些其他團隊的產品比如說 Google 可能最早有收購那個 YouTube 或者是 Android

或者是 Google Map 之类的产品但你要想象就是这些企业在收购这些产品的时候基本上大家的视觉风格一定都会不一样所以使用体验也会非常的不同所以这时候他们才去发展一个 design system 叫做 Google Material Design 所以才会开始去衍生设计系统这个概念在网站上

所以慢慢才有所謂的透過設計系統的原件庫來管理產品然後包含就是讓底下的子公司也可以沿用這樣的視覺風格跟體驗就是方便統一管理這樣

的确像 Material Design 应该算是设计系统界的圣经般的存在就是基本上每一个学设计的甚至你是学开发可能都会用到然后当然还有另外一个也是很有名就是 Apple 的这个 Human Interface GuidelineHIC 那它是以前早期就是 App 为导向当然现在苹果生态是非常的大它这个

整个系统它是可以延展到不是只有 iPhone 可能 iPad 然后或者是 Apple Watch 还是任何其他的载体只要是在他们生态系它的系统是可以扩展性可以很大的这样子

对然后我觉得这个也是因为这些系统平台的发展那现在很多人比如说他的产品要上架到 App Store 上面那他可能就要去遵循这些系统所提供的规范也好或者说用他们所提供的这些元件啊

他们所提供的一些功能就可以很快的去做出一些东西当然如果你需要客制的话你要额外的去写一些程式但是如果你今天用他们平台的东西那你就会做出来的产品会很符合他们平台使用者的使用习惯

那这样不管是在用起来很顺畅然后或者说体验上你也不会说跟原生的这个系统差太多对所以我觉得这可能是慢慢发展起来开始有这种所谓手机的就是这种平台那大家会开始去遵循对

其实我们也可以想象就是像星巴克,如果每一间的做的那个咖啡,然后每一个调制的那个方法都不同的话,你会发现,我每次去新加坡喝出来的咖啡好像味道都不同。所以这是为什么我们需要一个像是中央厨房或者中央工厂的一个地方,然后去生产这些原物料或者是零件出来,给大家去做一致性的使用这样。

的确我以前大学时候有在饮料店打工过也是连锁的现在不知道还在不在但反正当时是连锁然后我们的确训练就是说今天煮茶叶就是要煮几分钟一分一秒都不能少你这个珍珠要煮多久然后你在做饮料的时候因为它的那个我们

我們是用有一個控制糖分的一個機器就是你按一下它會出多少糖分的量我好像看過 0.5 0.8 它那個是精準到不行所以它會根據你給的料你要再繼續算譬如說你今天加珍珠再加野果因為它本身就有糖嘛對不對你的糖就要比較少它會有個算式就對了所以以前就要背起來這些排列組

加奶精又要再变这样子那其实这个概念就是有点类似设计系统它提供了一个规范你在做排列组合的时候就会跟着这规范走你也不会说你可以随便排列但是你完全就不遵守规范所以我觉得设计系统里面还有另外一个重点你要知道怎么去消化跟使用这个系统所以你产出来的每杯饮料就是每个产品跟体验就会是

一致的不管今天谁做都一样因为他就是有一个规则这样子刚刚除了讲到 Google 或是 AppleHarry 自己有没有观察有哪些公司

他们的设计系统是相对比较成熟的然后大家也都会去参考的其中我其实我最喜欢的一个设计系统是中国对岸那边叫做 A-Design 对阿里巴巴的那个设计系统的一个有一些部分我觉得规范的比欧美市场的那个设计系统还要细尤其是在原件的部分就是你使用它的方法会更直觉一点

就是他们写的文件我觉得会讲的比较详细一点然后给你很多的范例比较不会像一些其他设计系统他讲的比较也不是粗糙可能就稍微比较没那么的精细所以你有时候使用他们的时候会需要再多阅读一些文件你才会知道说怎么去使用他然后另外还有其他比如像 Shopify 或 Spotify 只是说我们比较少会去看到他们这些主要的原因是因为他们比较没有不像那种开源的那个设计系统刚刚讲了很多就是设计系统很棒啊

一定要用但是一个产品里面一定要百分之百都有设计系统就是整个产品都是设计系统出来的还是有一些弹性可以做做客制化或者是说如果我今天没有用设计系统是真的完全不行吗会不会有什么取舍或者是时机点应该用或用多少

我觉得应该是比较看团队之间有没有沟通上或者是开发效率上面的问题我觉得它设计系统主要是为了要解决这件事情另外就是如果你产品还很小的时候我觉得基本上还不太需要导入设计系统这样的概念因为你还在尝试嘛

因为像是你还在试做阶段所以你必须要一直尝试说不同的风格或不同样式才会比较吸引使用者来使用或者是整个体验都还没有到成熟的地方的时候他可能也还不太需要说需要去导入设计系统但是我觉得当一个产品开始要往成熟然后开始有人用的时候我觉得需要导入因为他未来如果今天有新的人来接手或者是要交接的时候你会比较知道说要怎么去交接这个东西或者是要怎么去做教育训练的部分这样

哦诶这个还蛮有趣的因为其实大家知道产品开发的周期就像刚刚 Harry 讲的设计系统的出现可能应该说最理想的阶段可能是出现在比较后端就是已经要开始收敛打造因为大家如果有学过

设计可能会知道有个东西叫做双钻石就两个菱形然后他的意思就是说先发散很多的想法探索很多的方法然后再去修炼然后开发的时候可能也是就是看怎么样的开发效果最有效率或是最好效能最好或是怎么样然后最后再去定义很多的细节最后变成一个完整高品质的这些元件也好或者是设计模式然后就可以一直重复使用像刚刚 Harry 讲的

并不是说一开始就一定要导入可能反而是等到你的这个产品已经经过了市场的验证然后已经知道这个东西就是

好的再去就是等于是像我在又在举这个珍珠奶茶店例子就你还在调那个口味到底是怎么样你一开始开店你不可能说一开始就定好所有的规则就是在如果你是新的店对那你要先给客人试喝然后这个会不会太甜然后这个料的量多少然后等到你可能试营运一个月之后你发现 OK 这个饮料大概怎么做的比例是最好之后你再把这个规则

解进去然后再定好然后之后就照这个就没错这样对就一样的概念还有另外一个比较没那么适合可能是比较偏行销方面的那种网站我觉得也比较没那么适合

或者是像那种比较行销的素材啊什么的因为那些比较像是每年都有可能会去变的一些设计元素我觉得设计系统那个一个比较大的一个基底就是它会使用时间会拉得比较长它比较不像行销那种东西就是每年或者是每个月都在变所以它可能会你建立好一个设计系统之后它可能会放很久然后也会使用很久可能是三年五年才会再去做一次的更新或者是更久的时间这样

对就是因为那个变化比较大然后如果你要帮他定规则的话可能会定到非常的混乱无限扩充对对对因为他可能一下子要弹来弹去可能有些动画嘛或者是颜色他的就是创意程度需要很高所以创意度越高可能就比较没那么适合做设计系统这样

那接着我觉得我们可以深入的来探讨一下设计系统究竟要怎么执行可能先讲一些比较算是核心面的概念吧就是我们在讲设计系统的时候刚好讲到原件嘛但是它可能还有一个更算是更底层的东西这个我们叫做 design token 或者是有些人会叫它 variable 就是这个变数嘛那这个东西到底是什么

对就是它怎么出现呢可能需要用比较简单的方式科普一下对因为这个东西可能比较技术一点其实我觉得那个 design token 它有点比较抽象对于一般的设计师来说会蛮抽象因为对我自己来说也是这几年开始慢慢搞清楚原来 design token 就是所谓以前我们在城市开发里面的所谓的变数它就是用来存放这些像颜色啦圆角啦或者是阴影啊文字啊等等这些设计元素在里面这样

我们来做一个比喻好了其实在 Google material design 里面他把底端 token 分成三个不同的类型第一个是最底端的叫做 reference token

就是有點像是那個 Token 的最底層這樣那它是用來負責裝最直接的一些元素以顏色來說就比如說黃色、綠色、紅色這個層級的那個 Token 它會命名上面會非常的直覺比如說我們就不會把紅色命名成黃色

对然后也不会把蓝色命名成绿色所以绿色就是绿色红色然后接下来是第二层是有点像是把它语意化的一个过程就是把这些颜色然后做一个代名词出来比如说那在第二层在 Gurumat 20 他们把它称为是 system token 有点像系统端的 token 这样然后系统端的 token 它会变成是比较语意化比如说你有一个主色好了你的主色可能是红色那我们会把它改叫做一个叫做 primary color 这是主色的意思

因为主色它未来是有机会去做改变如果你把它取名叫红色那它未来就不太可能会把它变成它里面只会变成是黄色或绿色有点像是我们去吃一道料理比如说可能一间餐厅拥怀店厨师可能会推荐一个套餐它可能叫做主厨套餐好了第一次去吃的时候我们吃的是牛肉然后第二次去吃的时候发现那个牛肉也可以换成是猪肉

但是如果你今天把這個主廚套餐就直接取名叫做牛肉套餐的話那下次來你就只能吃到牛肉因為不太可能因為說牛肉套餐結果它裡面裝的是雞肉或是豬肉不太可能所以第二層的那個 Token 有點像是比較像是語意化然後它有一個容錯的空間在裡面接下來是第三層是比較像是那個

它叫做 Component Token 就是原件身上的 Token 它用的层面会比较窄也会比较直接它会直接对应到某一个按钮或者是某一个原件身上所以它们就之间会有一些继承的关系然后一般来说就是 System Token 会继承 Reference TokenComponent Token 会继承 System Token 这边的比较

部分這樣就聽起來好像會有一點抽象然後我稍微用一個遊戲化的一個過程來解釋就是有點像是電玩遊戲比如說我們要捏一個角色這時候我們需要想要給他換一個皮膚的顏色那這時候這個皮膚的顏色他最底層其實有點像是我們會有很多的那個比如說咖啡色一號咖啡色二號咖啡色三號這樣的一個色彩在最底層就是 reference 端

在第二层的部分我们会把它取名另外一个颜色比如说可能是叫焦糖黄色或者是焦糖咖啡色之类的然后把它包装起来

到第三层就是你会去引用第二层就是比如说你的肤色可能是会使用焦糖棕色在第三层的命名我们就会叫做这是 Simon 的肤色有点像这种继承的概念所以 Simon 的肤色是继承至第二层的焦糖棕色然后焦糖棕色可能继承的是浅褐色这最底层的有点像他一层一层继承过来所以第三层 component token 就会很非常的直接指向好这个是 Simon 的颜色

这个第二层的颜色它还有一个比较大的用处是在于比如说焦糖棕色这个颜色不只可以用在你的肤色也有可能可以用在小美的发色身上也是可以的

它是有点像比较共用的一个区块有点像是这样的继承的概念这个概念的确比较技术一点然后它是一个定义的过程然后就像刚刚 Harris 讲到就是这个 Token 它可能可以用在不同的地方在就是不同的层次里面它在那个层次里面它可能有一个比较明确的目的跟使用场景然后它有一个继承的关系

那这些东西其实我觉得现在直接讲的话当然比较不容易理解但是我们开了这个课程里面可能就有更多细节的描述跟一些应用就是大家也许如果有兴趣参与课程可能就会接触到更深层的应用这样子对所以我觉得这个应该算它是设计系统的核心然后这个

概念如果学会之后你就比较有机会去把你的设计系统的这个算是地基给打好然后之后就会扩展上都会比较顺利一点这样对没错接下来我觉得可以聊一下关于设计系统里面会有什么样的角色来参与因为我们知道说设计系统虽然是一个听起来好像技术含量很重的一个概念

那其实设计师本身也会需要参与嘛因为这个原件毕竟是要由设计师来设计那可能像刚刚讲的这个 design token 也有可能是设计师先设计然后

再让工程师去实作所以感觉起来这应该是有至少两个角色去互相合作去打造一个设计的系统那可不可以请 Harry 再多分享一点就是这两个角色最基本那他们究竟负责什么样的事情跟他的责任范畴在哪边就是在做这个设计系统的时候

我以我自己的经验来举例,因为我们那时候其实团队还蛮小的设计师那时候只有我跟我的设计主管两个人还有一个是印度的设计师,所以基本上只有三个然后另外就是技术端的人主要是分开的,所以跟我们其实是没有在一起,他们在印度这样那我们自己当时就是我跟我主管负责设计系统的

设计跟开发其实我不太晓得你过去有没有去让工程师理解什么是设计系统因为对我们来说就是最早期其实我设计主管其实有设计好一整份的那个设计系统就是比较偏向是设计稿上面看得到的东西它比较像是静态的

然後後來我們去研究才覺得說為什麼工程師不會用這些東西因為他們都很趕著要把一些功能把它刻出來所以他們基本上不太會有時間去關注這些設計細節

所以我们那时候就是有去研究一个设计系统原件库叫做 Storybook 它主要是用来管理所谓的程式码还有设计系统的元素它会比较偏向是可以给控制师直接使用的一个设计系统

過去我們會給設計師看一些比較偏靜態的比如說圓角是多少,然後這個顏色是什麼但是我們後來發現我們應該要直接給工程師這些元件去做使用比如說這個元件本身就是有含程式碼在裡面所以我們會先一起討論說我們現在目前有哪些元件需要做設計所以我們的設計主管那時候就先從一些比較基礎的設計元素先去規劃這樣

然后我的部分是比较偏向就是先从设计系统原件库的部分去做开发所以那时候我就是开始去做这整个设计系统原件库的一个架构然后把这些基底先把它建立出来然后当我的设计主管开始设计好一些原件或者是元素之后我再把这些元素跟原件然后放到这个设计系统原件库里面去做管理

所以有点像是我在帮这个中央工厂开始打地基然后把它建构起来的一个过程

我猜在其他的团队应该也是差不多一样的概念就不管是小团队或是大的团队基本上我觉得设计系统这个团队的组织基本上不会太大它基本上可能就是可能三个四个或者是五个左右这样所以它不会一直无限扩充出来这样因为它必须要集中给他们去做一个统一化的管理才不会说因为每个人做的事情变得有点太分散这样

就像餐厅的厨师里面你可能也不能太多厨师不能大家的风格差太多大家的想法都不一样对对对很常会变成这样的确就是他是一个需要

某种程度上来说需要有一个规范在然后这个东西如果人越多的话可能要达到共识相对来讲比较有难度一点至少在初期如果你后期已经有一个规则然后你想要在扩展的时候可能相对来讲会比较容易去分给别人做因为你有一个算是原则在就是最核心的精神在但是一开始前期在定义最核心的东西之后可能人少一点还是会比较容易推进

对效率会比较好一点然后另外就是我记得那时候我还有跟我设计主管去沟通说就是我们的元件必须要做的比较有弹性化

就是它不能說有點像是這個原件只能使用在這個地方然後在另外一種情形它可能就捨棄掉了就可能要再做一個新原件來去符合這樣的情境所以我覺得就是原件本身必須要做到彈性化這個概念比如說我記得我那時候在開發一個卡片的功能可能這個卡片可能在某個情形下它可能像是有公司職員的介紹好了

然后在另外一个情境我们可以把这个头像部分换成是一个日期它就变成是活动的一个概念在里面可以透过一些方法把它做一些变体的切换然后变成是不同的功能然后符合在不同的情境身上就是我们要尽量让我们的元件尽量去收敛然后不要去一直无限扩充因为对于工程师来说这样也会相对比较简单而且引用的元件越少基本上我觉得整个专案也会效率会更快一点对因为他要读取的东西会变得更少

那你当时在做这个设计系统跟合作过程有遇到什么样的困难或者是挑战吗我觉得最大的挑战应该是主管还有上层去沟通说我们要把我们整个工作流程去导入设计系统这样一个概念到里面

所以那時候我記得花了蠻多時間在這上面因為我要不斷去說服的設計主管跟我的產品總監然後還有工程師那邊的人員這樣而且那時候好像我記得是 2017 年嘛那時候其實大家對於設計系統這樣的概念還沒有到非常成熟我一直到最近才發現 Figma 一直在推設計系統這件事情我覺得是

应该对于设计师来说应该是蛮有帮助因为至少这个概念会一直承接下去而不会说好像在中间又断掉所以我觉得最麻烦我觉得是沟通这件事情因为我记得那时候沟通光沟通就沟通了大概半年的时间吧就是慢慢去做一些范例然后去开会然后跟他们讨论说我们未来可以怎么去做去改善我们自己的效率跟痛点这样

的确蛮不容易而且通常在做一个产品的时候大家都还蛮忙的然后你要赶着开发新功能然后设计系统又算是一个不能算是说直接功能上使用者会体验到的东西他是比较偏

产品的这个核心或是底层架构的东西所以大家就会相对来讲比较不会这么优先去处理它可是这东西就是你拖越久就有点像是生一个小病然后就最后就病入膏肓这样你可能就你要再回去修的时候就会花很久对所以我觉得这就是有点要去做一个平衡这样子那刚好这个就很顺的可以聊到我们最后一个主题就是说怎么样去导入设计系统刚 Henry 有大概讲一下就是有做一些范例嘛或去说服

这些主管但还是花了很多的时间对那我蛮好奇就是有没有什么样的小技巧是可以让这件事情就是推进更加的顺利尤其是说今天团队可能成熟度不一样规模不一样对这件事情理解不一样的时候有什么样的技巧可以去尝试

首先第一个我觉得最重要的是我觉得你自己本身如果你想要去推动这样一个系统一个新的工作流程自己本身必须从过去在公司里面必须要累积一点你的专业形象或者是你的信任关系比如说你可能过去可能常帮公文师去解决一些问题或者是设计主管可能要求你做一个功能或者什么可以帮他做的比他想象中还要好一点

无形中可以帮你建立一些 credit 在你的团队身上大家会比较信任你的关系这样再来我觉得要理解公司目前遇到最大的痛点到底是什么比如说我们那时候遇到最大痛点就是新的产品或者是旧的产品要维护或者是开发的时候都会遇到沟通上面的问题就很常会吵架我记得那时候我们设计师还常常在敲桌还是干嘛的我忘记了反正就是很火爆的一些场面都会遇到

就是永远就是卡在人跟人之间没办法去互相理解所以这件事情会导致于整个工作流程会变得比较没那么效率而且公司可能开发出来的东西可能产品上面的品质也不太一定

所以这就会导致于说像我们那时候产品总监其实压力也蛮大因为我们那时候是新创 很草创的所以他必须要很快把整个概念跟产品的一个功能赶快把它开发出来这次又遇到一些可能内部一些工商或者是协作上面的问题的时候其实他自己也是蛮困扰的

所以我那时候记得我就是有去写相关的一些痛点然后把它做成一个简报跟大家去提说我们现在目前遇到有哪些问题为什么我会遇到这些问题那我们要怎么去做解决这样可不可以透过另外一种方法过去的产品比较像是念念图的方式去做开发而是把它转换成比较像是在组成

組裝積木的過程而不是說每個人都在捏自己的黏土然後到時候要修改的時候可能會變得很繞然後溝通上面也會一直來來回回經過半年的時間之內我也慢慢把一些一些 Demo 或者是一些範例把它發展出來然後給大家去實際的是知道說這東西設計系統到底是什麼樣的一個東西然後它可以怎麼幫助我們改善我們自己的工作流程或者是溝通的流程這樣

我觉得这是一段蛮长的一段路所以它不是一个马上就会发生的事情不是说你今天好决定了一个礼拜之后然后就结束了大家都很有共识然后想要去做这件事情如果我们今天再把它时间把它摊开来看的话我们可能也可以写一个简报就比如说我们在传统的一些工作流程上可能就当你的产品扩充越来越大的时候它相对的复杂程度也会越高所以开发跟效率上也会消耗更多

但是我觉得导入设计系统的一个比较不同的地方是在于它比较像是爬一座山就是当你爬上去之后你会发现它开始会下山然后再一路比较像是在走平地的一个概念这样所以一开始可能会比较花时间因为你必须要从林到渝去导入这样的一个设计系统那等于是它的工作流程跟你过去的流程是不太一样的

前段其实比较花时间但后面的时候会发现时间就会减少很多比较不会像过去的传统开发它时间跟工作流程会慢慢地往右上角的地方去做提升这样反而会比较平稳所以就可以减少一些时间或者是人力的成本上面这样

然後我覺得對於公司老闆來說他們一定是比較希望就是可以趕快把產品趕快推出然後去市場去做試錯我們工程師或者設計師常常會比較拘泥在說我們自己的專業上所以我們會希望把東西都刻得很仔細很完美的百分之百才要推出去但對於公司老闆來說他們必須要先知道說這個東西會不會有人會去做使用

所以我们必须要减少这一块的设计和开发时间要赶快把东西推出去然后我们之后我们确定好这东西有人会去做使用而且它也有在市场上面有做一个根基之后我们再慢慢去改善它也是可以的所以我觉得那个出发点会不太一样

听起来是一个先苦后甘的过程对对对没错没错非常要花很多力气去导入说服然后让他们了解做这件事情的价值而且还要慢慢一步一步做因为就像我刚刚讲的需要有平衡嘛你不可能把就是整个团队全部的时间都去做设计系统实际上务实上还是会大部分时间在开发功能验证功能然后设计系统就慢慢去做这样对那但是他还是很重要因为

如果今天要把时间拉长你要做一个 5 年到 10 年的产品那你一定要慢慢有这些东西可以让你之后想要再去扩展更容易的否则你就是到最后你会

那个一些小小的不一致也好或是一些技术债那就会慢慢的浮现就会很痛苦对这让我想起就以前我待过一家企业然后我就不说是哪一家就是那时候 RD 的人数大概有 400 多个人就包含设计然后专业经理跟工程师就 400 多个人但是我发现其中可能九成人都是在做维护然后在应付那些以前的技术债的东西所以等于是他必须要花很多人力在这上面所以等于大家比如是说

在做一些新的产品或者是做一些新的比较比较有价值的一些东西对我来说所以等于是浪费很多的人力成本在这上面所以如果今天有导入设计系统这样一个概念的话我觉得可以至少减少到一半以上的人去做这些事情对以我自己公司的例子也是我们

公司的产品是已经过亿人使用工程数量也很多就是可能 2000 人的这种工程师数量那你可以想象如果是这样的一个量体如果都是没有一个规范或系统

绝对会乱到不行其实基本上很多大部分时候都是设计系统就是说那样那样做你就基本上一定会遵守那只是说我觉得这就是回归到就是这个设计系统本身设计时所给予的弹性了就是说它可能是很多块热膏积木那你要怎么组装你可能同样是三块积木你可以有可能 100 种不同的组法

对那我觉得这个东西就是说虽然是有一定的规范但他也可能有一定的弹性可以让你去做那好处另外一点就是很多时候可能你在做设计交付的时候你不用写得很仔细的规格因为设计系统他已经把一些基本的规范定义好了所以工程师这边他就直接拿系统上的东西就可以

拼出一个大概八九成像的那这就相对的减少了很多的沟通成本跟要去调很多的细节所以我觉得这的确会提高非常多的效率然后帮助你可以更有余裕去做真正有价值的事情或解决一些比较复杂的问题这样子没错没错其实我要补充就是我觉得有时候我们设计师可能会觉得有设计系统好像有一些规范在然后觉得有点有时候会绑手绑脚就好像这个东西也不行那个东西也不行

但是我们要想的出发点应该是说我们要怎么透过现有的一些规范跟限制我们要怎么去让公司的一个新产品或新功能然后可以把它做出来然后并且大家也会去做使用因为我觉得最重要还是就是不是那种很创新的东西是说比较像是你要赶快去做验证去市场去做这个验证而不是说一直在想说我要怎么把这个产品做到最仔细然后最完美然后才要把它推出

然後另外就是我有想起以前我爸就是他們家比較窮所以那時候可能只有買得起三個顏色的那個顏料但是他後來也是透過這三個顏料然後就畫畫嘛結果後來現在的好像全校第二名吧

所以有时候并不是因为说你今天颜料比较多可能有 12 个 24 个原料你就可以画得比较好所以我觉得就是你有时候设计师在透过一些有局限性或者是有一些规范下底下那就可以创造出产品的价值我觉得最重要蛮有道理的因为就是系统在那边但是你要怎么样去透过这系统解决问题我觉得

还是有很多的空间跟弹性跟可以发挥的创造力这样嗯那最后的话就是我们可以聊一下就是现在非常火热的话题就大家在讲 AI 对那 AI 这件事情会不会对设计系统产生影响那

会不会减少我们在做设计系统的这些工作那有没有一些有趣的应用或是实际的案例可能可以让 Harry 跟我们分享一下我今年其实有看到那个 Figma 准备要推出一个新的 AI 的那个版本

我不知道你有没有去使用过你有去看他的那整个发表会吗有有有我有看介绍然后也因为他现在是关起来的状态对对对他需要再修复一些东西才有办法去释出但是有看到很多 demo 我觉得的确是蛮酷的就是其中我觉得最让我比较兴奋的是他有一个功能叫做 MacDesign 就是他有点像是我

可以用一些语法比如说请他帮我做一个实物的网站或者实物的 APP 之类的但是我觉得重点不是这个重点是它有一个功能是我可以去引用某一个设计系统原件库所以也就是说 AI 可以去透过你自己设计好的设计系统然后去把这些原件元素把它组装成一个你需要的产品界面跟功能出来所以对我来说这是非常非常有帮助的

也就是說我們未來只要把設計系統刻好之後把它設計好然後設定好我們就可以透過 AI 加速我們去做產品設計的這部分的功能所以對我來說我還蠻期待這個功能就是他們現在好像有在提說好像是明年會去做發布但我不太確定說這個實際上可以引用設計系統這個功能什麼時候才會真實的發布因為我那時候好像有看到他們的那個 CEO 去講這個東西但他們說好像沒有那麼快

但我对我来说就是 AI 可以帮助我们未来在不管是设计啊或者是开发上都会非常加速我们想要做一个 pro type 或者是一个原型的一个产品到市场去做验证或者是做试错这样所以我们

所以我们可以省掉蛮多的时间去一个一个慢慢去刻画一些设计的细节比如说我们以前可能设计界面我们要很花时间然后我们要知道说这上面可能要哪些功能或者是我们要一个一个去把它设计出来即使我们已经有设计系统了我们也一样要把这东西慢慢摆到我们要的位置但未来 AI 或许可以帮助我们更快去实现这些我们原本的一些产品的一些概念出来就也许我们只要做一些小小的修改或是调整

或许我们就可以直接从这里可以去试想更多的产品的功能或者是其他的更重要的东西去把它实现出来这样

然後另外我要想到就是因為現在不管是設計工具或者是程式工具都有去埋入 AI 的功能所以我在猜就是 AI 未來也可以去很實際的去理解每一個元件它的功能到底是用來做什麼當我們有一個設計系統原件庫的時候 AI 也可以幫我們去從這些設計系統原件庫裡面找到我們要的功能然後把它拼接到實際的產品上我指的不是設計介面而是真實的產品

就可以透过像 Storyboard 这样的一个 UI 原件库里面的原件都把它拿出来像拼装积木的方式把它拼装成我们想要的功能出来就可以很快的去做实际的操作然后或者是可以推到产品上可以去到市场去给人家做验证这样就我还蛮期待这些变化

对啊我觉得 AI 的出现真的有帮助到不仅仅只是设计系统啦当然大部分很多的设计的场景或者是开发的场景它都会帮助我们提高效率然后甚至是说帮助我们热视也更打开了因为很多东西人脑可能想不到的那可能 AI 也许他看的比较多见多识广他脑洞大开他可能会把你排列组合一些你意想不到的东西

是我覺得還蠻期待就有點像是人跟真的這種機器的

火花碰撞这样子可能因为你原本在看这个系统本身你会觉得它限制很多但说不定 AI 可以帮你排出一个从没想过的方式然后它同时又符合逻辑也有可能而且我自己在想像就是因为它是 AI 嘛所以它可以同时生产出同一个功能但是它有分出跟 ABC 不同的版本而且它可以同时去到市场去做验证跟试做然后再取出最好的版本把它留下来

然後再繼續下一個功能這樣有點像這種概念所以它可以很快去驗證然後去實際幫我們去做以前我們還要緩花時間然後整個公司團隊都要去增加擴充團隊人員啊或者什麼才可以達成的事情所以我自己的想像就是企業可能未來可能會稍微縮水但是可能會越來越多的中小型企業會發展出來或者是擴充出來因為他們可以透過這些 AI 工具然後很快去做更多產品出來這樣

的确的确好那我们今天聊了这么多关于设计系统的内容对那相信各位听众应该也有一点点概念多多少少了解为什么要做设计系统那设计系统的好处跟如果没有设计系统可能会带来的挑战或者是一些潜在的风险以及说你要怎么导入设计系统进到你的团队和产品当中那这些东西就是我们觉得都很重要嘛

那这也是为什么我们这一次就是和 Harry 一起合作这一门课程叫做给设计师的设计系统必修课那就是希望可以帮助设计师就真的去了解设计系统甚至说自己去实作去练习然后可以把这些很明确的设计系统的概念然后带到团队当中交付给工程师那我自己觉得虽然名字是叫给设计师的设计系统必修课啦

但他同时对于就是所有整个开发团队产品团队都应该会蛮适用的就不管你是工程师想要更了解设计系统更核心的这些设计逻辑或是如果你今天是算是产品经理你想要了解说设计系统可以怎么打造然后帮助未来的产品可以开发更有效率节奏更快我觉得这个课程也是蛮适合的对那我也想要请可能 Harry 可以简单

介绍一下就是这个课程里面有哪些内容虽然刚刚有些东西我们已经提到然后可能大家最想问的可能是说我上完课究竟可以做出什么东西我可以得到什么那目前我规划的这门设计系统课程主要是想要帮助设计师可以更快了解整个设计系统怎么去做发展然后从 0 到 1 从设计然后到研发这样那同时间也可以更清楚说我们要怎么理解设计系统的基础架构有哪一些

还有我觉得最重要就是我们可以去改善我们整个设计师跟工程师之间的沟通关系还有就是解决产品团队协作之间的一些问题这样因为我觉得最大问题还是沟通就是设计师没办法理解工程师在想什么然后工程师可能也没办法理解设计师在想什么

那我觉得设计系统就是一个很好的一个连着记跟一个桥梁可以帮助两边可以达成共识然后一起去解决现在目前可能产品团队上面会遇到的一些问题这样然后帮助整个公司啊或者是企业可以减少更多的人力跟时间成本这样

另外要提的就是我们会有一些作业包含像是 Design Token 它是一个很抽象的一个概念所以我们会透过作业的方式去理解说我们可以怎么去更好的规划我们的 Design Token 的命名还有规范还有就是我们也会学习怎么去收敛我们的产品中的设计元素然后用数字来管理整个产品的设计和开发让整个产品不会因为一些不同的人经手之后然后就变无限扩充

然后还有另外一个比较特别的是我们在其中一个章节会学习怎么写一些简单的程式然后来让设计师可以更好理解说工程师的工作上面的逻辑是什么然后我们可以更理解说当我们要去跟工程师沟通的时候我们可以透过怎样的一个方法去跟他们去做更有效的解决问题的一个方式这样

对那这门课程其实我自己在看很特别第一个就是说 Harry 他自己有设计跟工程两端的经验所以他可以比较

容易的用譬如说不管是设计师听得懂的工程语言或是工程师听得懂的设计语言去讲述这些相对来讲比较抽象的概念那正也因为这些概念是很抽象的所以在课程中就是我们也规划了很多的作业但都是一些小作业可以让你实际去验证说你是否真的学会那后面可能会有一些相对来讲比较

中等的作业然后可以去验证说你整个有理解这个概念这样子对那我觉得这就是当你学会这课程之后你就有机会去应用在工作中那当然理想上你就可以慢慢的去协助团队去导入设计系统这样的一个概念或思维

这是我们这门课程想要帮助到大家所学会的东西这样那这门课程现在已经上线了对所以如果你对我们刚刚聊的内容或是想要了解这个课程更多的细节那可以到我们的课程页面了解更多好那我们今天就差不多聊到这边非常感谢 Harry 今天的参与谢谢那我们就下次再见了大家拜拜