鐵人賽：網頁設計 - 版面視覺動線配置(2)

上一篇介紹了版面配置的概念，其中最重要的是「群組」概念，而本篇就透過實際案例來說明各大網站如何運用這些概念，並且看看是否也有運用到交錯、韻律的手法。

這些概念要特別注意僅適合用在「登入頁」（Landing Page），適合用在產品、服務推廣使用，當然也就不適合套用在應用程式的服務上（如：Facebook、Youtube、Google…）。

首先還是要強調從這些網站中是否可以觀察到「群組」概念，並且觀察是否有相關延伸的概念：

• 群組交錯色彩
• 左右韻律排版

範例網站介紹

以 Adobe 來說，就是標準運用此概念的網站，群組與群組之間均有套用不同的色彩，並且具有一定的左右韻律。

https://www.adobe.com/tw/creativecloud.html

Evernote 亦是如此，也是透過群組式的視覺感來做分組，並且加入些許淺灰、白底的方式來做分類，最重要的是會使用深綠底色來做最重要的行動呼籲（Header 及接近底部的區塊使用綠底，其它部分則不會運用）。

Slack 雖沒有左右的韻律式排版，但依然維持最關鍵的「群組」分類，並且也會使用色彩上的變化區分不同的群組，主色的運用也是回顧到先前色彩介紹的章節，僅運用在最重要的「行動呼籲」之中，畫面中僅有 GET STARTED 會使用主色彩（或主色背景），其餘部分用到的色彩僅有到點綴，並不如主色上的凸顯。

結語

本篇是延續上篇繼續介紹排版的技巧，讓一些非本科系的開發者，也能掌握一些基礎概念，排出具有基礎美感及正確的訊息傳遞方法。