第五章網頁版式設計

2022-07-25 09:09:11 字數 1761 閱讀 4087

5.1網頁版式設計的形式原理

重複與交錯,節奏與韻律,對比與均衡,對比與調和,

比例與適度,變異與秩序,虛實與留白,力場與結構,

統一與變化等形式美構成法則來規劃版面。

5.2網頁版式設計的視覺因素

人的視線移動規律

1)人眼的視線沿水平方向運動比沿垂直方向運動快而且不易疲勞

2)視線的變化習慣於從左到右、從上到下和順時針轉動

3)當視線既不沿水平,也不沿垂直的斜線方向移動時,在水平方向上下約45°的範圍視線從左到右移動,在垂直方向左右約45°的範圍內,視線為從上到下移動

5.2.1符合視覺規律

1.文字橫向編排

2.重要資訊置於「最佳視覺區域」 

版面上部有輕快、上公升、積極、愉悅之感;

下部有沉重、穩定、壓抑、消沉之感;

左側感受輕鬆、舒展、自由、主動;

右側感覺莊重、侷限、拘謹、被動。

5.2.2避免感覺視覺疲勞

1.限制網頁長度

盡可能將網頁限制在一屏以內(即滿屏)

頁面不宜過長,一般控制在1-3屏,盡量不超過5屏

提供到頁首、頁底的定位鏈結,方便快速定位瀏覽

2.文字大小適中,行距合理

3.位置一致

減少互動的次數,按照人們的閱讀習慣,固定導航的位置,免去使用者去找導航的麻煩

4.適量安排多**元素

5.合理配色

5.2.3注重主從關係

1.大小對比

2.留白

3.色彩對比

4.重複

5.斜線和曲線

5.2.4合理視覺流程

1.方向關係視覺流程

1)單向

first:豎向視覺流程:具有直觀、堅定、沉穩的感覺。

second:橫向視覺流程:具有令人恬靜、穩定、安詳的感覺。

third:斜向視覺流程:具有不穩定,活潑感,能引起人的注意力的感覺

2)曲線

曲線流程具有節奏感、擴張感、飽滿感、韻律感和曲線美,較為含蓄、微妙和複雜

常見的曲線形式有s型,c型。

3)迴旋

迴旋視覺流程是指網頁上形成迂迴旋轉貫通的力,使線與線、面與線之間產生一股無形的空間運動,具有視覺擴張和膨脹的空間視覺衝擊力。

2.反覆

3.重心

4.導向

5.散點

5.2.5一致導航

5.3網頁版式構成的型別

5.3.1骨骼型

5.3.2國字型

5.3.3拐向型

5.3.4框架型

1.左右框架型

2.上下框架型

3.綜合框架型

5.3.5滿版型

5.3.6分割型

**分割

5.3.7中軸型

5.3.8流線型

5.3.9傾斜型

5.3.10對稱型

5.3.11焦點型

中心向心

離心5.3.12自由型

5.4網頁導航設計

5.4.1網頁導航分類

1.主欄目導航

2.二級欄目導航

3.快速導航

4.相關鏈結導航

5.4.2導航位置

1.頂部

2.左側

3.右側

4.中部

5.下部

5.4.3導航方向

1.橫排導航

2.豎排導航

3.傾斜導航

網頁製作 第五章測試

第1部分 總題數 5 單選題 2分 在css中,屬性padding是指 a.外邊框 b.外邊距 c.內邊框 d.內邊距 本題總得分2分 單選題 2分 是html常用的塊狀標籤。a.a b.br c.h1 d.span 本題總得分2分 單選題 2分 在html中,下列css屬性不屬於盒子屬性的是 a....

python第五章 Python學習(第五章)

記錄所有的名片字典 card list defshow menu 顯示資訊 print 50 print 歡迎使用 名片管理系統 v1.0 print print 1.新增名片 print 2.顯示全部 print 3.搜尋名片 print print 0.退出系統 print 50 defnew ...

第五章 雜湊

雜湊表adt,只支援二叉樹查詢所允許的一部分操作。比如插入,刪除,查詢等。那些需要元素間排序資訊的操作將不會得到支援。比如findmin,findmax和線性時間按排序順序列印整個表的操作時不支援的。雜湊函式在理想狀態是能將任何兩個不同的關鍵字對映到不同的單元,但是這是不可能,因為關鍵字是無窮的,但...