高效的開發和設計

切版在專案開發中，應該是許多前端工程師覺得最沒成就感的部分...
反觀這個階段的產出，則常常是 UI 設計師會跟工程師爭吵的一環（文字粗細、色碼、padding 等族繁不及備載）
我們設計師理解工程師有時候真的看不出那一點點微小的差異，那大家可以考慮好好的發展元件庫（UI Library）！

（圖片來源：GoProtoz - Global UI/UX Design Agency）

元件庫：將設計稿化繁為簡

在網頁設計中，為了避免設計時重工，設計師會將常用的元件整理成元件庫（UI Library）。許多公司也會將開發好的元件庫開源發佈到網路上，即是大家常說的 「套件」、 「UI 框架」。像是知名的 Google Material UI、Ant Design、Element UI 等。

元件庫的目的是 「開箱即用」，從 Wireframe 到 UI Mockup 時讓設計師快速轉化完公司固定風格，而工程師們接到每個專案不需要重複開發相似元件！👍

不過開發一整套全新的元件勞心又勞力，通常大部分公司會基於「前端語言」、「支援性」、「產品情境」選擇第三方套件，再做公司客製化的調整（公司企業識別色、文字大小等）。

像是「Ant Design」來自於螞蟻金服，旗下發展龐大且複雜的系統。擁有 「高複用性」、「高變化性」，因此很適合用於後台和表單類的產品作為框架，讓設計師及前端工程師們快速擁有基礎後調整，也能容易地建立設計一致性！

面對客製化需要注意的

在我們的後台系統專案中，因為架構穩定性和 Angular 語言選用了「PrimeNG」作為套件的框架。不過，雖然 PrimeNG 也擁有豐富的基本元件，但具有一定的調整限制。

隨著專案複雜操作的需求出現，原生的元件逐漸無法滿足。因此，我們仍然會根據業務需求，在設計一致性的前提下客製化元件。

不過我們客制的元件會經過多方的評估，確認是否必須，並先在專案中確認可行並上線後，再納入設計團隊的設計元件庫（Figma Library）和前端維護的元件套組（Portal）已供未來的專案使用，不會隨意依據設計的偏好開出客製化的需求。

這不僅能提高開發效率和元件的可維護性，也能確保設計不會亂天馬行空的發想！

下一次，請設計師想辦法將專案用到的設計元素整理成 UI Library，並用邏輯性的方式註記 UI 規格吧！
Diffrence between Designers and Developers #AI #designer #deve #devil