Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

本篇重點

• 模板 ( Templates )
• 線框稿繪製技巧

模板 ( Templates )

以頁面為基礎的架構，將原子、分子與組織等元素進行排版。等同於設計流程的線框稿 ( Wireframe )

複習：線框稿是什麼 ?
Wireframe 是產品的建構藍圖，以單純的線條或單色色塊，去規劃頁面版型，通常需要團隊一起討論、共同制定產品的技術規格。

線框稿繪製技巧

• 明確目標
• 在紙上勾勒想法
• 使用適當尺寸的畫布
• 套用網格系統
• 套用真實文案
• 功能導向
• 添加註釋
• 尋求回饋

1、明確目標

開始繪製線框稿之前，要先確定現在要繪製的是什麼主題的介面，以單頁式宣傳網站和電商網站後台為例，兩者比較，目標與排版都應該不一樣。

2、在紙上勾勒想法

不一定馬上就要用繪圖軟體繪製，可以先在紙上多方嘗試不同排版的想法，之後再做收斂。

3、使用適當尺寸的畫布

思考以什麼裝置尺寸去繪製非常的重要! 必須考量潛在目標使用者大多使用什麼裝置、尺寸是多少，才能針對使用頻率高的介面尺寸進行優化。

4、套用網格系統

選擇好適當的畫布尺寸後，就要套用網格系統。使用網格系統，能夠快速繪製有邏輯的線框稿，元件的調整與縮放能有一定的依據，後續精稿的繪製也能更加順暢。

5、盡早套用真實文案

Lorem Ipsum 是常用的套用假字，雖然便利，但若是假字與實際文案有很大幅度的落差，後續在精稿階段就會發生需要調整排版的情況。

替代方案：

• 套用長度相仿的假字
• 套用舊友文案
• 套用競品文案

6、功能導向

線框稿更重要的是功能流程，而不是視覺細節。會有重複的修改與調整發生。

7、添加註釋

線框稿是產品的藍圖與指南，只有介面的線框稿只是草稿。必須加上標記註解才能讓團隊的其他成員更快理解設計脈絡。

8、尋求回饋

線框稿是需要團隊共同討論、建立的規格文件。討論的重點應該放在流程體驗上，而不是視覺美感的議題。

好! 下一篇我們繼續討論模板的相關事項 : )