- #93
- #92
- #91
- #90
- #89
- #88
- #87
- #86
- #85
- #84
- #83
- #82
- #81
- #80
- #79
- #78
- #77
- #76
- #75
- #74
- #73
- #72
- #71
- #70
- #69
- #68
- #67
- #66
- #65
- #64
- #63
- #62
- #61
- #60
- #59
- #58
- #57
- #56
- #55
- #54
- #53
- #52
- #51
- #50
- #49
- #48
- #47
- #46
- #45
- #44
- #43
- #42
- #41
- #40
- #39
- #38
- #37
- #36
- #35
- #34
- #33
- #32
- #31
- #30
- #29
- #28
- #27
- #26
- #25
- #24
- #23
- #22
- #21
- #20
- #19
- #18
- #17
- #16
- #15
- #14
- #13
你能說明設計系統與元件庫在網頁領域中的差異嗎?
直覺的想法是:
- 🎨 設計系統 - 設計者的東東,定義樣式風格體驗。
- 🧱 元件庫 - 開發者的東東,定義使用者介面組件。
🎨 設計系統包含像是顏色、字體樣式、無障礙規則、文案語氣……等「代表品牌體驗相關的描述」,類似品牌體驗文件。從平面設計端的角度來說類似著重於企業識別系統 (CIS) 中視覺識別 (VI) 的部分。
🧱 元件庫更偏向實踐層面,蒐集現有的使用者介面模式並定義為元件:如何、為什麼、什麼時候應該或不應該去使用該元件。
也就是說,其實並不應該透過某個專業領域去區分它們,而是從概念到落地實踐的程度,我也會和設計者共同溝通維護整體元件庫以確保雙方領域達成共識。
最後,建立這一大堆「文件」有什麼好處?
- 一致性:統一外觀與產品體驗,使得橫跨領域也能存在共通語言。
- 減少重複工作:與其每次規劃全新的使用者介面,將介面分散為可復用的元件提高效率。並不是所有產品都應該花時間建構設計系統或元件庫,但當產品找到市場定位進入維護期時,這些基礎建設就相當重要。
想要了解常見的使用者介面模式或設計系統可以參考看看:Component Gallery
- #12
- #11
- #10
- #9
- #8
- #7
- #6
- #5
- #4
- #3
- #2
- #1