文、李明謙老師

ben150110.gif通常一開始設計版型時,是很天馬行空的,也許只是突然的想法、也許是一個靈感,但不管是什麼,請務必~利用紙張畫下來,避免自己忘記。然而設計不只是一種突然,而是經年累積的沈澱,因此多參考他人的網站或設計,也是一種不錯的選擇。

嚴格來說,在設計版型時,如果不看圖片、顏色,那可以區分為單欄式編排、雙欄式編排以及三欄式編排;以下以顏色區分程度:

1. 藍色區塊代表:最重要、最容易引人注意的區塊。

2. 黃色區塊代表:次重要引人注意的區塊。

3. 紅色區塊代表:最不容易引人注意的區塊。

壹、 單欄:以ADOBE網站為介紹

網頁版型設計與編排001

由於藍色區塊為主要明顯區塊,故通常都用來介紹公司主要產品或動畫之類的,相對紅色區塊,因位置較下方區塊,故常常被瀏覽器的高度限制而不得而見

紫色區塊則為版權資訊區,放置有關於網站的文字連結與版權宣告等資訊。

其類似單欄網站有:SONY奇美Nike等站。

貳、 雙欄:以PcHome為介紹

 網頁版型設計與編排002

同樣Pchome的二欄也是可以區分藍、黃、紅、紫等顏色,藍色部份則有別於前面介紹的,在這裡取而代之的是主要的服務,黃色則為次要的服務,因為Pchome主要仍是以服務性網站為主,相對的提供的產品,也較為複雜。

而二欄式其類以網站有:emome聯成電腦認證教育中心Yahoo等站。

參、 三欄:以金石堂網路書局為介紹

 網頁版型設計與編排003

不知道各位有沒發現,在三欄式的編排內,已經跳脫出上面顏色區塊的區別。是的,在三欄式裡,大都以購物網站為主,藍色區塊主要是產品,黃色為相關的服務或介紹,而黃色及紅色在此樣式裡為並列同等重要。另外,綠色區塊為主要服務導覽,像這類型購物網站,大都有多項分類,為避免使用者迷路,故通常都會將產品分類導覽。三欄式網頁大都採用商品簡單上架的基礎原則,讓使用者來瀏覽時不會眼花撩亂。設計上通常較為大器,常用於資訊量大、更新速度快,並給人開闊、有氣勢的感覺。

而三欄式其類以網站有:博客來燦坤3C誠品等站。

基本上,網站的整體架構是差不多的,要思考是如何規劃網站的資訊,在適當的位置呈現出來。因此在規畫細項功能時,我們可以先畫出大架構,再以拼圖的方式慢慢將功能擺上適當的位置。再加上前篇文章所述,網頁主要有Logo、選項、宣告區塊以及內容等元素,這些內容編排時是由PhotoShop進行網頁樣版的編排。故在編排前,不管是在腦海中、手繪、或是利用電腦軟體構思整體的視覺呈現都無妨,構思到網頁完成中間的過程即是排版;在這中間的過程中,必須隨時與案主連絡,以防設計過程中,有任何修改或不滿意,而造成任何糾紛或不愉快。

最後提醒各位,網站風格雖然很重要,但是對於接案者來說,業主的印象以及使用者接受度才是更應該被探討的!如果業主不滿意,那做再美、再多有風格的網站,那也是等於零;而使用者接受度不高,那網站也只是被當花瓶,偶爾被人提及,而無法產生它該有的功效。

 

註:以上圖片均屬各網站所有,本文章僅運用於介紹

相關文章:聯成電腦技術前線:淺談 網頁設計與接案流程

 

 

文章標籤
創作者介紹

聯成電腦--在成長的路上彼此相伴

lccnetvip 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 悄悄話
找更多相關文章與討論