設計首頁的第一步是設計版面佈局。
就像傳統的報刊雜誌編輯一樣,我們將網頁看作一張報紙,一本雜誌來進行排版佈局。 雖然動態網頁技術的發展使得我們開始趨向於學習場景編劇,但是固定的網頁版面設計基礎 依然是必須學習和掌握的。它們的基本原理是共通的,你可以領會要點,舉一反三。 版面指的是瀏覽器看到的完整的一個頁面(可以包含框架和層)。因為每個人的顯示器 分辨率不同,所以同一個頁面的大小可能出現640*480像素,800*600像素,1024*768像素等不 同尺寸。
佈局,就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。 你可能注意到:「最適合」是一個不確定的形容詞,什麼才是最適合的呢?抱歉的是 阿捷不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什麼, 成功者只能建議您用什麼方法,什麼途徑才能最容易獲得成功,而不可能有一步成功的 "秘訣"告訴您。 我們在設計思考系列文章第四篇講過站點整體的創意,版面佈局也是一個創意的問題, 但要比站點整體的創意容易,有規律的多。
讓我們先來瞭解一下版面佈局的步驟:
一.草案 新建頁面就像一張白紙,沒有任何表格,框架和約定俗成的東西,你可以盡可能的發揮你的想像力,將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆,當然用作圖軟件photoshop等也可以)。這屬於創造階段,不講究細膩工整,不必考慮細節功能,只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張,最後選定一個滿意的作為繼續創作的腳本。
二.粗略佈局 在草案的基礎上,將你確定需要放置的功能模塊安排到頁面上。(註:功能模塊我們在 "首頁設計-引子"中提過,主要包含網站標誌,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表, 計數器,版權信息等)。注意,這裡我們必須遵循突出重點、平衡諧調的原則,將網站標 志,主菜單等最重要的模塊放在最顯眼,最突出的位置,然後在考慮次要模塊的排放。
三.定案 將粗略佈局精細化,具體化。(靠你的智慧和經驗,旁敲側擊多方聯想,才能作出具 有創意的佈局。)在佈局過程中,我們可以遵循的原則有:
1、正常平衡---亦稱"勻稱"。多指左右、上下對照形式,主要強調秩序,能達到安定 誠實、信賴的效果。
2、異常平衡---即非對照形式,但也要平衡和韻律,當然都是不均整的,此種佈局能 達到強調性、不安性、高注目性的效果。
3、對比---所謂對比,不僅利用色彩、色調等技巧來作表現,在內容上也可涉及古與 今、新與舊、貧與富等對比。
4、凝視---所謂凝視是利用頁面中人物視線,使瀏覽者仿照跟隨的心理,以達到注視 頁面的效果,一般多用明星凝視狀。
5、空白---空白有兩種作用,一方面對其他網站表示突出卓越,另一方面也表示網頁品 位的優越感,這種表現方法對體顯網頁的格調十分有效。
6、盡量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感,特別有效。 圖片解說的內容,可以傳達給瀏覽者的更多的心理因素。 ------------(轉載自廣告大師樊志育《廣告製作》) 以上的設計原則,雖然枯燥,但是我們如果能領會並活用到頁面佈局裡,效果就大不 一樣了。比如, ○網頁的白色背景太虛,則可以加些色快;
「長城腳下的公社」建築 |
美《商業週刊》評中國十 |
鼎煌格韻之別墅效果圖篇 |
Kearch作品-Plummer Pa |
幾幅不錯的景觀手繪作品 |
白雲國際會議中心設計方 |
Zaha Hadid作品-Vitra消 |
室內設計圖片 Soo Sang |
大導演馮小剛家的家居設 |
茲羅列194種創意線索 |
標識設計之連字設計全剖 |
服裝設計的三大要素 |
2006 第六屆上海雙年展-超 |
栩栩如生的人體蠟像 |
國際名師的極端設計 |
日本漫畫家手塚治蟲作品圖 |
達芬奇設計成就展--領略藝 |
岡特·蘭堡作品賞析 |
國人創意最NB 聯想壁紙設計 |
外國另類創意幽默創意圖 |
一組另類鬼異的視覺設計圖 |
建國以來振奮人心的宣傳畫 |
Lexon-可折疊衣架 |
Lexon小產品-鑰匙環 |
Built NY作品-BYO便攜食品袋 |
創意小產品系列-便利花瓶 |
創意小產品系列-轉筆刀 |
Wet Design節水型龍頭 |
創意小產品系列-木書籤 |
第一代紅旗草圖 |
創意小產品系列-彈性鉛筆 |
創意小產品系列-文件夾 |
創意小產品系列-衣架設計 |
創意小產品系列-萬年曆設計 |