它有很多層面，瑣瑣碎碎的，一開始摸不著頭緒，但現在大致了解了

首先，一個個零件你要建立自己的工具包、標準，其實這和我畫圖非常類似。畫圖的產能要高，就要是建立一套自己的規則、資源，那些小東西讓你很清楚自己畫出來整體的風格會長怎樣

這些小東西就是要花時間去累積、一個個建立、測試，這點真的和做UI一摸摸一樣樣

首先，基本的文字排版我就用這個：Bootstrap Typography + CSS · Bootstrap ，這東西不需要什麼標新立異，（就有點像我畫CAD設整體的線寬一樣），就比例大小適中就好了→裡面扯到很多HTML標籤，就是熟悉它們

我覺得UI的內容很多樣，你要先清楚怎麼切分，知道說哪些不合意的你可以選別家的

例如：Grid System有很多家做，有的是用12格系統（Bootstrap）、有的是5+24格系統（Pure），其實都可以、沒什麼差，就是排版的時候排的整齊順手就好了(和美感沒什麼太大關係)

或是像table也是差異性很小的東西，漂亮就好。以上大概是一些基本的排版規格，用人家現成的css就可以了，這些基本的要建起來

(哦還有，基本的跨瀏覽器相容先用normalize.cssformat一遍也是很重要的)

基本的排版規則建起來的，再來就是重頭戲啦，就是我們的UI組件這些，也就是button, menu, form, navbar這些，這些就是主要建出差異性的地方了，也是風格一致性很重要的地方，所以呢，如果不要全部從頭自己建，最好是選同一家同一套的，風格比較統一

不過這也是取捨了，在UI這個地方不同家開始就會做一些別人沒有的，有些讓你愛不釋手，但你只想要它某幾個零件、卻整體風格不喜歡……之類的，會有這樣的取捨，這就要看自己了

所以UI這邊就會選邊站，甚至要自己動手做一些比較不通用、又很想擁有的零件。其中除了Bootstrap，還有Angular Material, semantic UI

或是Kendo(要錢)

其中會UI牽扯到底層的實作技術，這也是非常重要的影響選擇UI陣營的因素。一般來說，傳統的做法除了基本的HTML + CSS外，通常會再搭配js碼（不然ui不能動啊），然後js通常會使用jQuery

像我對jQuery特別有偏見的，到了新時代底層採用Angular框架後，jQuery就不依賴了，我就會偏好選擇不依賴jQuery的UI陣營

其中Boostrap當然是最吃香的，因為太多人用它的，所以自動會有人幫它用新技術寫，例如UI Bootstrap

如果關心Google的Material Design風格呢，那就是Polymer Paper Elements或前面說的Angular Material，這兩者都很新，有些組件還沒到位，所以用起來要斟酌

Semantic UI也是挺紅，也有些人在用Angular底層實作它。我去看了一下它的demo，還真的蠻討喜的，有很多別人沒有的特殊組件，在設計上加分很多

簡單說，先掌握這些了，是基本的，再來針對什麼網站要客製化做一些更精巧的東西就是要加錢啊或針對整體做風格上的調整才有立基點

=====

以上是UI，但UX又是一個概念上不一樣的東西。UX比較抽象，程度上和美學沒什麼關係(我個人見解)，它是你去思考使用者對資料、工作流等模式的辨識，去設計的一套體驗

例如資料怎麼分類、流程怎麼設計會操作起來更順手，這些就是UX的範疇

我這兩天在弄這些，弄弄弄好像就突然懂了某些道理，把它們全串起來成一個圖景，就好像懂UI+UX在幹嘛、該怎麼做了

哦對，還有一個icon fonts沒講，算了

還有@font-face