[新手前端]視覺及企劃也該知道的網頁設計概念- 網頁設計 ≠ 平面設計，有些”眉角”還是要了解一下 1

網頁設計 ≠ 平面設計，有些”眉角”還是要了解一下

前端網頁設計的技巧很雜，不過有很多問題其實在企劃或視覺設計版面的階段就要先溝通好，否則等到定稿了再來調整就肯定「痛苦太多收獲太少」不然就是牽一髮動全身叫人不想死也難….

癈話不多說，直接寫心得：

1. HTML元素都是矩型：
首先建立一個我之前也提過的概念，HTML裡的元素其實不管造型如何，都是「正矩形」，先有盒模型的概念，在設計時就比較不會出現天馬行空的「視覺饗宴」了。

2.網頁是活的：
網頁設計和平面設計最大的差異是「網頁是活的」，和平面不同，平面設計時你的元素是固定的，字型設什麼樣子就是那樣，不會隨著印刷品放置的時間和看的人不同字型忽大忽小，或是圖片有時大有時小。

但是很不幸的，網頁會。

各種造型除了各種版本的瀏覽器在解析時有機會出現完全不同的結果之外，還有語系差異、裝置的螢幕大小、視窗大小、使用者自設樣式…許多不同的情況會造成網頁的內容是隨時會更動的，所以設計時要先考慮到各種相容性，像是設計除了表頭之外，中間內容可以重覆延展的內容框，或是考慮按鈕在放入不同字數的內容時，是否有辦法延伸不會跑版等等。

3.網頁是會被操作的：
絕大多數的網頁都有其功能性，不管是展示、資訊或是實際上要輸入什麼內容，網頁不同於平面最明顯的就是網頁是要被操作的，使用要滾動捲軸、尋找內容、點擊連結、輸入內容…，所以注意你的設計是不是利於使用，也就是「可使性、可用性(Usability)」，一個過小的輸入框或是怎麼也點不到的連結，或者是根本看不出來可以按的設計，都是會逼瘋使用者的。

設計時至少要先考慮到：字數、大小、使用者習慣、顏色對比、不同的操作可能會造成的影响，像是被輸入特殊符號時怎麼處理? 或是字串是否要限制長度，如果使用者習慣按鈕在右上角，是否該更動? 在不同螢幕上是否會因為文字和背景對比過小而看不清楚? 等等…

4.保持一致的設計很重要：
基於網頁是被人使用著的，而人又習慣於熟悉的事物，所以一但設計了一個樣式或是模式，就請保持下去，盡量不要在整個網頁裡每個區塊都使用不同的樣式或操作，這樣可以減低使用者的學習時間，當一個使用者越容易學會怎麼操作你的網站，他對你的網站就越有好感。所以視覺們雖然做出了許多美美的操作ICON，可是有時效果遠不如系統預設的樣式讓使用者更明白現在在做什麼。

5. 網頁速度及效率：
這雖然比較像前端或是工程師該負責的部分，不過企劃或視覺也有機會在這裡做一點貢獻。像是內容在首頁及分佈上要有所取捨，一頁放滿了重點的文章等於沒有重點，網頁也是一樣，一張大圖配上少少的說明文章及參考更多的連結，會比你塞滿了資訊但是讓使用者不知如何取得進一步的資料要來的優秀且讓人喜愛。

視覺的部分則是可以偶爾參考一下最新的CSS3 及HTML5 發佈的功能，你不需要學會怎麼輸入那些外星文來達成網頁上的效果，但是你可以知道用CSS及HTML能做出什麼效果，新的CSS3有許多特效像是 raba輸入、多重背景、背景重覆、漸層、內外陰影、iconfont等等…

因為適當的內容階層及減少圖片的使用，可以大大的提升網頁的速度及效率，有時候這些可以在企劃及視覺設計的時候就先考慮進去，這樣一來可以縮短所有人的工作時間，愉快的合作，準時的下班~~ (大概啦…)