近期於前端開發時常會被 PM 要求先提個 Mockup 來看看呈現效果之類的。有鑑於公司目前的人力配置一直沒有規劃到 UI / UX 這個領域，那就自己下來碰碰看吧。這篇筆記的是六角學院的 UI 設計入門：畫出有程式邏輯的設計稿 中關於如何運用常見的介面版型排出好設計。
課程相關資訊
[連結]：https://courses.hexschool.com/courses/724307/lectures/13039043
本篇範圍：Chapter 6 ( 原子設計第三階段：組織 ) ，一共有 13 篇
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。
筆記
1. 常見的版型可分為單欄式、兩欄式 ( 不對稱和交錯式 )和多欄式 ( 卡片式和雜誌 )
2. 多半都是以網格系統作為排版
3. 單欄式 – 將內容單獨垂直呈現，僅需要向下滾動
4. 兩欄式 – 將主要畫面一分為二
5. 不對稱設計主要是帶來視覺張力和吸引使用者的注意力
6. 交錯式設計 – 利用連續的 Z 自行排版來帶給介面節奏感
7. 多欄式設計 – 常見會分成三或四個欄位，適合用在重點敘述的區間
8. 卡片式設計 – 承載多樣化的資訊，來幫助使用者找到合適的內容
