/ Web Design

[Layout] Web Design Part 2

當我還是小屁孩的年代,學美術的時候一定是從靜物設計開始,學設計的時候從點麵線點線面開始。學了美術讓我體會到一件事情,就是我一點美感的天份都沒有(無誤),從小學到國中,我能感謝的大概就是,美術班去北美館或是國美館的次數,比我感冒的次數還多這樣。


視覺化

視覺設計要切入的點其實並不困難。

  • 網頁即是視覺中圖層的概念。
  • 視覺元素即是圖層的堆疊與變化。
  • 視覺元素參考線就是切割線
  • 視覺區域連續性可以分成兩個圖層來思考。
  • 把東西放上去的動作不一樣,但是結果相同。

設計大概很難沒聽過圖層Layer)這個名詞,也感謝偉大的 Photoshop 將這種概念深植人心。對於視覺設計來說,圖層是一種畫布,是一種可以渲染、疊合、遮蔽、裁切或是做出通透特效的透明圖紙,然後透過軟體的輸出,將這些效果經過演算而完整輸出在圖面上。

換成網頁設計的說法,我們可以這樣說:

  • 視覺就是網頁設計中標籤層的轉變。
  • 網頁元素由盒子模型Box Module)來堆疊出視覺變化。
  • 網頁元素與元素相鄰就是切割線。
  • 網頁元素的通透疊合可以展示出底層元素的連續性。
  • 網頁元素透過樣式表來把物件放上去

如果說視覺設計是從一個面開始,那麼網頁設計就是從一個盒子--你可以說他是區域性的面--來開始。問題來了,我該怎麼樣把視覺性的元素,切割成網頁設計所需要的盒子?

俗話說得好,推自己的文章不嫌晚,2009 年老生常談一下:

警告:TL; DR

起步

其實大多數人會不知道從何開始,或者說,不太能夠清楚的知道切入點在哪裡。

Layout

像是這種複雜的東西鬼才知道要怎麼做。對於入門者來說,要一下子把經驗累積的東西,一股腦的照單全收的話,絕對是會消化不良的。問題是,我們要怎麼樣去發現這些切入點?抑或者說,該怎麼樣入手會比較容易一些。

  • 不必急著了解語意,先了解盒子模型。
  • 了解盒子模型之後,複製一堆盒子模型。
  • 用盒子模型把畫面拼湊出來,起碼跟視覺設計相同。
  • 了解你的畫面區塊的意義。
  • 依照你的畫面區塊,找出符合該意義的語意標籤。
  • 試著了解語意標籤。

Layout

如果你了解我剛剛說得那幾點,那我們以 HTML5 來看看這張圖,我們使用眾多的盒子模型把他拼湊出來,那麼,是不是應該有些地方,可以換成適當地語意標籤?

  • sidebar.background 可以使用 <aside> 標籤
  • menu.background 可以使用 <nav> 標籤

疑?那麼 header.background, base.backgroundauthor.background 三個區塊呢?這裡我們時常遇到一些問題,雖然他們各代表著某些目的性,但是這並不代表他們可以使用相對的語意標籤來表達。

以上面這個例子來說,雖然 header.background 是一個 <header> 區塊,但是,他其中包含了 <nav><aside> 的疊合,所以在標籤結構與語意上,將他安排成為 <header> 都是不太適切的。

請留意,一個單純畫面中的區塊,並不是一定需要定義 <header> 標籤的。這個例子,在 header.background 中,置入 <h1> 標籤來說明該頁面的標題就已經足夠了。

XDite 精彩好文:如何設計出正確語意的 HTML5

第一刀

對一個視覺設計師來說,如何找到基準線來劃下第一刀,我想相較於我這種沒有美術底子的人,應該要快得多。如果能夠理解圖層與盒子模型之間的關係,對於畫面的區塊應該就不難理解。

至於我剛剛說過得連續性的視覺效果,在 sidebar.backgroundheader.background 左邊的人物,切割成兩個區塊來看,是不是比較容易?當然,如果你想保留人物的完整,將整個人物放在 sidebar 然後使用背景透明,覆蓋於 header 上面也是一種作法。

並沒有人侷限你要怎麼做,網頁設計也是一種創意。

我只能告訴你我會怎麼做,但這並不是要奉為圭臬,也許你的設計創意要比我高明很多,只有透過不斷地練習才知道這些事情的細微與瑣碎。鑽牛角尖應該不是設計師該執著的事情,不是有句話這樣說:創意無限!

如果這種方式對你來說還是過於困難,那麼還有另外一個點子:

玩拼圖

我們下回見(燦笑