一 網站的層次結構
制作便于瀏覽頁面的一個大敵就是視覺干擾,它包含兩類:
a,混亂頁面主次不清,所有東西都引人注目
b,背景干擾
1.把頁面分割成清晰明確的不同區域很重要,因為可以使用戶迅速判斷出哪些區域應重點看,哪些可以放心地忽略.
2.創建清晰直觀的頁面層次結構;越重要越要突出;邏輯相關的內容視覺上也應該相關
3.用嵌套的方式形象地顯示從屬關系

二 網頁的布局形式
整個頁面可以分為幾個部分,每個部分有不同的功能,也能體現不同的形式,中間的部分一般是最大的,因為它承載著主要的信息,使用者主要就是看中間這個部分的內容,
游戲網網站夜微涼出新意把整個頁面進行任意劃分,特別是個人網頁,例如把整個頁面評分為左右兩個部分,但是這樣會讓人不著重點,還有的框架用的太多,影響力頁面的整體性…
1.骨骼型
網頁版式的骨骼型是一種規范的,理性的分割方法,類似于報刊的版式.
常見的骨骼型有豎向通欄,雙欄,三欄,四欄和橫向的通欄,雙欄,三欄和四欄等.一般以豎向分欄為多.這種版式給人以和諧,理性的美.幾種分欄方式結合使用,既理性,條理,又活潑而富有彈性.

題頭加三欄式的設計方式:題頭就是在最上行,左邊是網站標題圖案,右邊是正文.



上下水平設計方式,它有適合信息量大,維護方便的特點,適合用于商業網站.

網站導航的設計-----清晰,簡潔,一致
導航的意義
a,幫助用戶尋找他要的東西
b,告訴用戶他在哪里
c,更好的展現網站的內容
d,使瀏覽者對網站有信心
固定導航應包括下列最常用的5個元素:
1,網站標識
2,欄目
3,公共服務(幫助,網站地圖,關于我們,聯系我們等)
4,返回主頁
5,搜索

2.滿版型
頁面以圖像充滿整版.主要以圖像為訴求點,也可以將部分文字壓置于圖像之上.四邊出血,向往擴張,合適年輕人的口味.

3.分割型
把整個頁面分成上下或左右兩部分,分別安排圖片和文案.分割線上的壓置的圖片既打破了頁面分割的生硬感,也使自身得到強調.左邊框上的小標簽乃點睛之筆.

4.中軸型
沿瀏覽器窗口的中軸將圖片或位子作水平或垂直方向的排列.水平排列的頁面給人穩定,平靜,含蓄的感覺.垂直排列的頁面給人以舒暢的感覺.

5.曲線型
圖片,文字在頁面上作曲線的分割或編排構成,產生韻律與節奏.網站的導航標題沿圖片形弧線排列.

6.傾斜型
頁面主題形象或多幅圖片,文字作傾斜編排,形成不穩定感或強烈的動感,引人注目.
文字水平排列,將畫框斜置,產生對于與動勢,印象被加強.

7.對稱型
對稱的頁面給人穩定,嚴謹,莊重,理性的感受.以相對對稱手法制作的導航頁面.

8.焦點型
焦點型的網頁版式通過對視線的誘導,使頁面具有強烈的視覺效果.通過離心的版式,清晰地傳達出網站提供的服務.

9.三角型
網頁各視覺元素整體看為正三角形的構圖,主體形象穩定而突出

10.自由型
自由型的頁面具有活潑,輕快的風格
引導視線的圖片以散點構成,傳達隨意,輕松的氣氛
但是作為個人網站,就不一定要采用這些方式,完全可以更新穎,更藝術些.什么又算是靈活多樣?怎樣做到新穎,藝術呢?沒有一個模式取套,他需要你領悟,去創新.




留白
我們應該在網頁中通過留白的作用,使整個內容排布得松緊有度,給人以跌宕起伏之感.
把整個屏幕都塞得滿滿的,讓人感覺不亂也很擠.網適當的留白,可以提高網頁的視覺效果和藝術感染力.
留白既可以給人帶來心理上的松弛,也可以給人帶來緊張與節奏.利用留白的體量感來使頁面布局平衡,在一種不平衡中營造平衡,這樣會使頁面生動起來.
“破”
這個"破"是指打破拘束,打破平衡,增添動感的手法(不是動畫的動感).有如國畫中畫蘭花----“一撇二交三破”,每片葉子都朝上豎著當然不好看了,這一"破"就是其中的道理.
簡單
“美就是簡單”,平淡之中才顯真色.過于復雜,過于花哨,自然就偏離了沒得軌道,比如過多地使用特效,過分炫目的圖案,過于復雜的文字板塊排列等.
精簡文字—生動的誘惑力的作品是簡潔的
不要用文字去填充空間
減掉那些沒有用的文字的好處:
a,減少了頁面的干擾;
b,使有用的內容更突出;
c,使頁面更短,無需滾屏就可以一眼看到更多的東西

巧妙地運用動態元素.以橫貫頁面的長條色塊統一畫面,圖片安排隨意,疏密有致,使整體風格即統一又有變化.

在塊狀組合結構中,如圖片太多,則無法突出重點.這個頁面通過改變圖片的面積,有效地分開了

圖片與文字穿插編排,形成散點組合.運用線條的分割,文字的群組化以及單一的背景色形成整體

多幅圖片使垂直線規律地等量分割,獲得了理性與秩序的美.

以水平分割為主的頁面,右上角與左下角安排了文字,打破了呆板的感覺.

飽滿的頁面構圖,巧妙地利用表盤穩定住頁面四角.

人物全部退底,文字色塊的安排輕松隨意,是面向年輕人的設計.

根據頁面色調靈活運用文字的色彩,既符合頁面的整體氛圍,又保證了可讀性.

密集的文字形成塊面,豐富了頁面層次.