iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
1

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

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

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

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

範例網站介紹

本篇圖片建議可以到以下網站觀看:https://wcc723.github.io/design/2018/11/03/weblayout-2/

以 Adobe 來說,就是標準運用此概念的網站,群組與群組之間均有套用不同的色彩,並且具有一定的左右韻律。
https://www.adobe.com/tw/creativecloud.html

Evernote 亦是如此,也是透過群組式的視覺感來做分組,並且加入些許淺灰、白底的方式來做分類,最重要的是會使用深綠底色來做最重要的行動呼籲(Header 及接近底部的區塊使用綠底,其它部分則不會運用)。
https://evernote.com/intl/zh-tw

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

結語

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


上一篇
版面視覺動線配置
下一篇
網頁設計規範 - 參考來源
系列文
前端「設計」聖光之路30

尚未有邦友留言

立即登入留言