技術 [Day12-開發前期] 原子設計？功能設計模組化，元件庫 Level up！

優化網頁元件架構：原子設計 vs 設計模組（Pattern） 前端為了更健康的網頁架構，在開發時會追求程式模組化。而設計師們除了建立元件庫外，我們會將重複使用的...

技術 【Day 22】原子設計：頁面 ( Pages、Mockup )

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 21】原子設計：模板 ( UI State 頁面狀態 )

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 20】原子設計：模板 ( RWD 響應式排版 )

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 19】原子設計：模板 ( Landing Page 著陸頁 )

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 18】原子設計：模板 Templates

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 17】原子設計：組織 ( Section 常見版型 )

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 14】原子設計：分子 ( 表單、CRAP優化界面準則 )

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 13】原子設計：分子 ( 卡片、互動視窗、警告訊息、資料表 )

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 12】原子設計：分子 ( 導覽元件、折疊面板、提示工具 )

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 11】原子設計：常見元件 ( Text 文字、Color 色彩、Accessibility )

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 10】原子設計：常見元件 ( Radio Buttons & Checkbox、Links、Icon )

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 09】原子設計：常見元件 ( Input 輸入格 )

Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -&g...

技術 【Day 08】原子設計：常見元件 ( Buttons 按鈕 + States 物件狀態 )

在繪製設計精稿 ( Mockup ) 之前，先了解原子設計的五大階段，對於後續的溝通與產品建構，會更有幫助!Atomic Design 五大階段：原子 ( At...