iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
1
自我挑戰組

UI 設計入門:SEO 尬網路行銷系列 第 17

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

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


常見版型 ( Section ) 有哪些 ?

  • 單欄式設計
  • 兩欄式設計
    • 不對稱設計
    • 交錯式設計
  • 多欄式設計
    • 卡片式設計
    • 雜誌設計

單欄式設計

將主要內容單獨垂直呈現。簡單且讓使用者方便瀏覽的版型。只需要向下滾動就可以瀏覽更多內容

兩欄式設計

將主要畫面一分為二,等分的版型適合有兩邊同樣重要的內容,可以再變化成不對稱與交錯式的切分版型

不對稱設計

不對稱版型可以帶來視覺張力,不僅能吸引使用者的注意力,還能引導使用者的視覺動線。
https://ithelp.ithome.com.tw/upload/images/20201002/20130402mi0ieNtuF8.png

交錯式設計

連續的 Z 字型排版,能夠帶給介面節奏感,並順著引導使用者的視覺動線。

多欄式設計

常見會分成三或四個欄位 ( 讓使用者較好吸收理解資訊的範圍 ),適合用在重點敘述的區間,也有彈性能依需求增減。
https://ithelp.ithome.com.tw/upload/images/20201002/20130402Yn4RskBJFh.png

卡片式設計

卡片式的設計能夠乘載多樣化的資訊,幫助使用者找到適合的內容,再透過點擊卡片了解細節。適合用在內容龐大的網站。

雜誌排版

雜誌形式的排版,模擬現實的報章雜誌,透過字體、圖片等元素的尺寸來決定各個內容的重要層級,進而引導使用者的視覺動線。

好! 下一篇我們會進入原子設計,第四階段模板 ( Templates ) : )
I miss you, Elaine.
Everybody's Gotta Learn Sometimes


上一篇
【Day 16】原子設計:組織 ( 頁首、頁尾 )
下一篇
【Day 18】原子設計:模板 Templates
系列文
UI 設計入門:SEO 尬網路行銷30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言