# Path of web design modularization - 屠澤寬 Jeremiah Kevin Tu 大會筆記

{%hackmd D_yXRZ3kQuiR5RjV0P_kPg %}

> 請等待大會開始

網站設計跟模組化本身就是衝突的東西

你看設計圖

看似類似但是細微程度不太一樣 > 設計師與工程師的衝突

兩大層面

1. 看的角度不一樣 -功能性導向
2. 顏色
3. 大小
4. 規格
5. 位直
6. 設計師 - 洪觀性角度

設計師與工程師的溝通管道

中間有一道很長的gap 不能只用ps與其他工具輔助

大部分的團隊發現這些問題

最後看公司的抉擇可能會導向哪一邊(偏向工程師or設計師)

偏重產品角度

-> pixel perfect地獄

工程師向產品妥協可能會導向CSS汙染地獄

加個important 改好此頁面 可能未來在其他頁面發現bug

out of control

沒有辦法有效的去打造想要的網站

偏重工程師腳色

試著向設計師說NO

ex: 這個設計跟之前的不太一樣 可以可以修改一下現在的設計

有時候設計師設計了五六個版本之後才拿出了最終版本

工程師必須拿出之前的設計 然後說為什麼跟之前不一樣

設計準則Style guide
ex: material design

定義品牌給人的感覺

定義顏色 字形 按鈕 表單

設計師與工程師之間的共同語言
可能有個wiki page 或是其他網頁
但並不是完美的

1. 額外的多餘的作業
2. 設計師必須歸納出他們的設計準則 通常在產品完成之後才有設計準則
3. 未完成的狀態
4. 版本不一樣
5. a b testing無法被style guide紀錄
5. 還是參考用 完稿的跟設計的不一樣

只差關鍵的一步

>> 我們不是在設計網站，我們是設計系統裡面的元件。

design pattern

ex: atomic design(Brad Frost)

受化學式啟發，依照這樣子的概念，為網站裡面的元件，做不同等級的分級

最基本的網站元素(Atom)
label input button

分子(Molecule) 模組
將元素加在一起(block) 組成元件

將元件加在一起組成樣板(template)

樣板 大包小 大的元件包著小的元件

樣本加在一起=實際的頁面

傳統設計

先設計一頁一頁的page 然後把每頁的元件撈出來 最後才寫style guild

atoms

先有元件 再將元件組合 才放入每個個別的頁面

抽象 -> 具體

atomes molecules organisms templates pages

atomic
可在網站上面實際被demo

有效的避免技術債

依照元件的屬性 歸納進專屬的資料夾 並以匯入順序來管理

減少網站裡面被重複定義的元件

很多時候是同樣的東西在很多的地方被定義了重複的style

大包小 照著順序匯入 越晚匯入的css有著更高的權限

vue design system

token element pattern template

早日脫離技術債地獄

Q&A

atom design在開發過程中有遇到一個小問題，有點modulize 在不同的頁面在不童的地方會有不同的小的客製，不知道是要引用舊的來改 還是做新的元件，此問題是不是要做一個demo site列出所有的module

A: 應該就是要列出網站中所有的元件，像是簡報，或是有人要開發新元件，應該先與團隊討論是否去寫新元件或是修改原本的元件，另外做code review做demo的時候 由資深工程師把關，看看demo的東西是否有問題。

Q 假設做一個demo site要多久

A: 如果你的團隊覺得這樣的方式可以做出好的效果，你要做出抉擇是要去做demo site還是不引用
如果是有歷史包袱的網站，要謹慎地考慮，與同事討論，然後做出決策，尤其是css的寫法不太一樣，建議從小做起，甚至不用改css，先統一網站的顏色
通常需要半年的時間，才能到模組的階段
不過當你在修改的時候，就會發現20個頁面有200種按鈕，那時候會發現修改起來很有成就感

Q:在做style guide的時候做元件比較多，在規劃這種style guild的時候除了元件，pattern跟template需要考慮嗎

A: 如果是要做style guild的話，可以先從小的做起。如果是template page的話可能要考慮一下時程。當你在maintain你的page的時候，同時你的page design也會隨著時間更新。page做style guide較無意義。

結:

很多時候工程師與設計師定義元件的時候就想得很不一樣，如果我們不要從大的來看，而先從最小的開始，那事情就會簡單很多

謝謝大家

###### tags: `#FEDC2018`