網(wǎng)頁界面設(shè)計

網(wǎng)頁界面設(shè)計第1頁，共72頁，2023年，2月20日，星期二2023/4/1616.3.1版面設(shè)計需要符合人的視覺習(xí)慣6.3.2避免使瀏覽者產(chǎn)生疲勞感6.3.3強化頁面的主從關(guān)系

6.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計版式設(shè)計的目的就是要合理布局和設(shè)計網(wǎng)頁版面，

高效地傳遞視覺信息，充分吸引瀏覽者。

第2頁，共72頁，2023年，2月20日，星期二2023/4/1626.3.1版面設(shè)計需要符合人的視覺習(xí)慣第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計規(guī)律1：人眼的視線沿著水平方向運動比沿著垂直方向

運動快而且不易疲勞；規(guī)律2：視線的變化習(xí)慣于從左到右，從上到下和順時

針方向運動；規(guī)律3：當視線沿著既不水平也不垂直的斜線方向移動

時，在水平方向上下約45°的范圍內(nèi)，視線

從左到右移動；在垂直方向左右約45°范圍

內(nèi)，視線從上到下移動。視線移動規(guī)律第3頁，共72頁，2023年，2月20日，星期二2023/4/1636.3.1版面設(shè)計需要符合人的視覺習(xí)慣第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計調(diào)查顯示：上部比下部注目程度高；左側(cè)比右側(cè)注目程度高

最佳視域：（1）左上部；（2）中上部視域部位給人的心理感受：上部：輕快、上升、積極、愉悅

下部：沉重、穩(wěn)定、壓抑、消沉左側(cè)：輕松、舒展、自由、主動右側(cè)：莊重、局限、拘謹、被動視域分布第4頁，共72頁，2023年，2月20日，星期二2023/4/1646.3.1版面設(shè)計需要符合人的視覺習(xí)慣第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計滾動圖片最好從右向左線狀布局應(yīng)水平方向?qū)捫?dǎo)航欄最好放在左側(cè)或上部要重點突出的內(nèi)容最好放在左上部第5頁，共72頁，2023年，2月20日，星期二2023/4/165第6章網(wǎng)頁用戶界面設(shè)計第6頁，共72頁，2023年，2月20日，星期二2023/4/166第6章網(wǎng)頁用戶界面設(shè)計第7頁，共72頁，2023年，2月20日，星期二2023/4/167第6章網(wǎng)頁用戶界面設(shè)計第8頁，共72頁，2023年，2月20日，星期二2023/4/168第6章網(wǎng)頁用戶界面設(shè)計第9頁，共72頁，2023年，2月20日，星期二2023/4/169

6.3.2避免使瀏覽者產(chǎn)生疲勞感第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.固定頁寬，一般不限定長度，但不宜過長

一般應(yīng)控制在1-3屏，最多不要超過5屏；

多屏信息可以通過超鏈接的方法解決。2.對于文字，以下情況會產(chǎn)生疲勞

(1)字號過小、行間距過密，不易辨認；(2)高亮度文字、背景極暗。

3.揮之不去的跟蹤動效，會令人生厭

動效跟蹤光標例文字不易辨認例第10頁，共72頁，2023年，2月20日，星期二2023/4/16106.3.3強化頁面的主從關(guān)系第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計頁面中的構(gòu)成元素不能同等對待，必須以點帶面，

讓焦點先抓住瀏覽者，引發(fā)繼續(xù)瀏覽的愿望，然

后再擴展開來。強化頁面的主從關(guān)系就是將主要對象與次要對象

區(qū)分開來，重點突出。采取的方式有：（1）主從對象的大小對比（2）弱化主體對象周圍的內(nèi)容（3）主從對象的色彩對比（4）重復(fù)主體對象（5）加強主從對象在形態(tài)上的對比第11頁，共72頁，2023年，2月20日，星期二2023/4/16116.3.3強化頁面的主從關(guān)系第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.主從對象的大小對比2.弱化主體對象周圍的內(nèi)容3.主從對象的色彩對比4.重復(fù)主體對象5.加強主從對象在形態(tài)上的對比第12頁，共72頁，2023年，2月20日，星期二2023/4/1612第6章網(wǎng)頁用戶界面設(shè)計主角突出，但整體頁面均衡

第13頁，共72頁，2023年，2月20日，星期二2023/4/1613第6章網(wǎng)頁用戶界面設(shè)計放大的文字透視變形非常醒目，并與黑暗的背景形成對比第14頁，共72頁，2023年，2月20日，星期二2023/4/16146.3.3強化頁面的主從關(guān)系第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.主從對象的大小對比2.弱化主體對象周圍的內(nèi)容3.主從對象的色彩對比4.重復(fù)主體對象5.加強主從對象在形態(tài)上的對比第15頁，共72頁，2023年，2月20日，星期二2023/4/1615第6章網(wǎng)頁用戶界面設(shè)計第16頁，共72頁，2023年，2月20日，星期二2023/4/16166.3.3強化頁面的主從關(guān)系第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.主從對象的大小對比2.弱化主體對象周圍的內(nèi)容3.主從對象的色彩對比4.重復(fù)主體對象5.加強主從對象在形態(tài)上的對比第17頁，共72頁，2023年，2月20日，星期二2023/4/1617第6章網(wǎng)頁用戶界面設(shè)計主圖（桔紅）與背景（綠）

第18頁，共72頁，2023年，2月20日，星期二2023/4/1618第6章網(wǎng)頁用戶界面設(shè)計產(chǎn)品以暗色調(diào)出現(xiàn)在亮色調(diào)中第19頁，共72頁，2023年，2月20日，星期二2023/4/1619第6章網(wǎng)頁用戶界面設(shè)計

主體為彩色第20頁，共72頁，2023年，2月20日，星期二2023/4/16206.3.3強化頁面的主從關(guān)系第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.主從對象的大小對比2.弱化主體對象周圍的內(nèi)容3.主從對象的色彩對比4.重復(fù)主體對象5.加強主從對象在形態(tài)上的對比將要表達的主體對象以不同

角度或大小重復(fù)出現(xiàn)，提高

與視線的接觸頻率

第21頁，共72頁，2023年，2月20日，星期二2023/4/1621第6章網(wǎng)頁用戶界面設(shè)計第22頁，共72頁，2023年，2月20日，星期二2023/4/1622第6章網(wǎng)頁用戶界面設(shè)計第23頁，共72頁，2023年，2月20日，星期二2023/4/16236.3.3強化頁面的主從關(guān)系第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.主從對象的大小對比2.弱化主體對象周圍的內(nèi)容3.主從對象的色彩對比4.重復(fù)主體對象5.加強主從對象在形態(tài)上的對比第24頁，共72頁，2023年，2月20日，星期二2023/4/1624第6章網(wǎng)頁用戶界面設(shè)計第25頁，共72頁，2023年，2月20日，星期二2023/4/16256.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計視覺流程：視線隨頁面各構(gòu)成元素在空間上沿一定

軌跡運動的過程。瀏覽者的視覺流程是有一定規(guī)律的。視覺流程分一下類：（1）單向視覺流程（2）曲線視覺流程（3）導(dǎo)向視覺流程（4）重心視覺流程（5）反復(fù)視覺流程

（6）散點視覺流程第26頁，共72頁，2023年，2月20日，星期二2023/4/16266.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.單向視覺流程

2.曲線視覺流程3.導(dǎo)向視覺流程4.重心視覺流程5.反復(fù)視覺流程

6.散點視覺流程視線在頁面中隨構(gòu)成要素形成的

單一方向順序運動。

規(guī)律：由大到小；有主到次；

由左到右；由上到下。

分類：橫向視覺流程；

縱向視覺流程；

斜向視覺流程。第27頁，共72頁，2023年，2月20日，星期二2023/4/1627第6章網(wǎng)頁用戶界面設(shè)計第28頁，共72頁，2023年，2月20日，星期二2023/4/1628第6章網(wǎng)頁用戶界面設(shè)計第29頁，共72頁，2023年，2月20日，星期二2023/4/16296.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.單向視覺流程

2.曲線視覺流程3.導(dǎo)向視覺流程4.重心視覺流程5.反復(fù)視覺流程

6.散點視覺流程視線在頁面中隨構(gòu)成要素形成的

單一方向順序運動。

規(guī)律：由大到??；有主到次；

由左到右；由上到下。

分類：橫向視覺流程；

縱向視覺流程；

斜向視覺流程。第30頁，共72頁，2023年，2月20日，星期二2023/4/1630第6章網(wǎng)頁用戶界面設(shè)計第31頁，共72頁，2023年，2月20日，星期二2023/4/16316.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.單向視覺流程

2.曲線視覺流程3.導(dǎo)向視覺流程4.重心視覺流程5.反復(fù)視覺流程

6.散點視覺流程視線在頁面中隨構(gòu)成要素形成的

單一方向順序運動。

規(guī)律：由大到小；有主到次；

由左到右；由上到下。

分類：橫向視覺流程；

縱向視覺流程；

斜向視覺流程。第32頁，共72頁，2023年，2月20日，星期二2023/4/1632第6章網(wǎng)頁用戶界面設(shè)計第33頁，共72頁，2023年，2月20日，星期二2023/4/1633第6章網(wǎng)頁用戶界面設(shè)計第34頁，共72頁，2023年，2月20日，星期二2023/4/16346.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.單向視覺流程2.曲線視覺流程

3.導(dǎo)向視覺流程4.重心視覺流程5.反復(fù)視覺流程

6.散點視覺流程曲線視覺流程是各構(gòu)成要素沿著曲線而

運動變化的視線流動過程。它比單向視覺流程更具節(jié)奏、韻律和曲

線美。

曲線視覺流程例第35頁，共72頁，2023年，2月20日，星期二2023/4/1635第6章網(wǎng)頁用戶界面設(shè)計順時針弧線導(dǎo)航第36頁，共72頁，2023年，2月20日，星期二2023/4/1636第6章網(wǎng)頁用戶界面設(shè)計背景大圖→小圖（上）→小圖（下）逆時針弧線

第37頁，共72頁，2023年，2月20日，星期二2023/4/16376.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.單向視覺流程2.曲線視覺流程3.導(dǎo)向視覺流程

4.重心視覺流程5.反復(fù)視覺流程

6.散點視覺流程導(dǎo)向視覺流程是通過誘導(dǎo)元素，主動

引導(dǎo)瀏覽者的視線按照一定的方向

順序運動，將頁面各構(gòu)成元素依序

串連起來，形成一個有機的整體。

依據(jù)誘導(dǎo)元素的不同可分為：

線形導(dǎo)向、形象導(dǎo)向、指示導(dǎo)向。以線或文字等線形元素作為誘導(dǎo)元素第38頁，共72頁，2023年，2月20日，星期二2023/4/1638第6章網(wǎng)頁用戶界面設(shè)計第39頁，共72頁，2023年，2月20日，星期二2023/4/1639第6章網(wǎng)頁用戶界面設(shè)計第40頁，共72頁，2023年，2月20日，星期二2023/4/16406.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.單向視覺流程2.曲線視覺流程3.導(dǎo)向視覺流程

4.重心視覺流程5.反復(fù)視覺流程

6.散點視覺流程導(dǎo)向視覺流程是通過誘導(dǎo)元素，主動

引導(dǎo)瀏覽者的視線按照一定的方向

順序運動，將頁面各構(gòu)成元素依序

串連起來，形成一個有機的整體。

依據(jù)誘導(dǎo)元素的不同可分為：

線形導(dǎo)向、形象導(dǎo)向、指示導(dǎo)向。巧妙運用圖片中人、動物或物品的朝向作為誘導(dǎo)第41頁，共72頁，2023年，2月20日，星期二2023/4/1641第6章網(wǎng)頁用戶界面設(shè)計第42頁，共72頁，2023年，2月20日，星期二2023/4/1642第6章網(wǎng)頁用戶界面設(shè)計第43頁，共72頁，2023年，2月20日，星期二2023/4/1643第6章網(wǎng)頁用戶界面設(shè)計第44頁，共72頁，2023年，2月20日，星期二2023/4/16446.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.單向視覺流程2.曲線視覺流程3.導(dǎo)向視覺流程

4.重心視覺流程5.反復(fù)視覺流程

6.散點視覺流程導(dǎo)向視覺流程是通過誘導(dǎo)元素，主動

引導(dǎo)瀏覽者的視線按照一定的方向

順序運動，將頁面各構(gòu)成元素依序

串連起來，形成一個有機的整體。

依據(jù)誘導(dǎo)元素的不同可分為：

線形導(dǎo)向、形象導(dǎo)向、指示導(dǎo)向。通過指示性的箭頭、手指或具有透視感的線條

作為誘導(dǎo)元素第45頁，共72頁，2023年，2月20日，星期二2023/4/1645第6章網(wǎng)頁用戶界面設(shè)計第46頁，共72頁，2023年，2月20日，星期二2023/4/1646第6章網(wǎng)頁用戶界面設(shè)計第47頁，共72頁，2023年，2月20日，星期二2023/4/16476.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.單向視覺流程2.曲線視覺流程3.導(dǎo)向視覺流程4.重心視覺流程

5.反復(fù)視覺流程

6.散點視覺流程重心指頁面的視覺心理重心，

并不是幾何中心。

第48頁，共72頁，2023年，2月20日，星期二2023/4/1648第6章網(wǎng)頁用戶界面設(shè)計由視覺重心自然下移到文字第49頁，共72頁，2023年，2月20日，星期二2023/4/1649第6章網(wǎng)頁用戶界面設(shè)計視線首先會落在有重量感的噴漆桶上，然后向右移到文字上第50頁，共72頁，2023年，2月20日，星期二2023/4/16506.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.單向視覺流程2.曲線視覺流程3.導(dǎo)向視覺流程4.重心視覺流程5.反復(fù)視覺流程

6.散點視覺流程視線沿著頁面中相同或相似的視覺要素作

規(guī)律性的、富于秩序和節(jié)奏的逐次運動。第51頁，共72頁，2023年，2月20日，星期二2023/4/1651第6章網(wǎng)頁用戶界面設(shè)計第52頁，共72頁，2023年，2月20日，星期二2023/4/1652第6章網(wǎng)頁用戶界面設(shè)計第53頁，共72頁，2023年，2月20日，星期二2023/4/16536.3.4安排合理的視覺流程第6章網(wǎng)頁用戶界面設(shè)計6.3網(wǎng)頁界面中版式設(shè)計1.單向視覺流程2.曲線視覺流程3.導(dǎo)向視覺流程4.重心視覺流程5.反復(fù)視覺流程

6.散點視覺流程沒有固定的視線流動路線，頁面中各

構(gòu)成要素呈現(xiàn)自由分散的狀態(tài)，體現(xiàn)

自由性、隨意性。但并非雜亂無章，

有著一定的結(jié)構(gòu)性和統(tǒng)一性。

第54頁，共72頁，2023年，2月20日，星期二2023/4/1654第6章網(wǎng)頁用戶界面設(shè)計第55頁，共72頁，2023年，2月20日，星期二2023/4/1655第6章網(wǎng)頁用戶界面設(shè)計第56頁，共72頁，2023年，2月20日，星期二2023/4/1656本章主要內(nèi)容6.1網(wǎng)頁界面的構(gòu)成、特性及形式6.2網(wǎng)頁界面中文字的編排設(shè)計6.3網(wǎng)頁界面中版式設(shè)計6.4網(wǎng)頁界面色彩搭配

6.5網(wǎng)頁設(shè)計之“三”原則6.6網(wǎng)頁界面設(shè)計中提高下載速度的考慮第6章網(wǎng)頁用戶界面設(shè)計第57頁，共72頁，2023年，2月20日，星期二2023/4/1657第6章網(wǎng)頁用戶界面設(shè)計6.4網(wǎng)頁界面色彩搭配紅色：

熱情、奔放、喜悅、莊嚴黃色：

高貴、富有、燦爛、活潑黑色：

嚴肅、夜晚、沉著白色：

純潔、簡單、潔凈藍色：

天空、清爽、科技綠色：

植物、生命、生機灰色：

莊重、沉穩(wěn)、憂郁

紫色：

浪漫、富貴、高雅棕色：

大地、厚樸色彩的感覺與聯(lián)想

第58頁，共72頁，2023年，2月20日，星期二2023/4/1658例1：大型NBA網(wǎng)站第6章網(wǎng)頁用戶界面設(shè)計6.4網(wǎng)頁界面色彩搭配（10個例子）特點：顯示獨特的個性，又不失大型網(wǎng)站的風采背景標題菜單第59頁，共72頁，2023年，2月20日，星期二2023/4/1659例2：娛樂類的綜合性網(wǎng)站UGO第6章網(wǎng)頁用戶界面設(shè)計6.4網(wǎng)頁界面色彩搭配（10個例子）特點：感覺是生機盎然，充滿了互動色彩和青春氣息

背景字體菜單第60頁，共72頁，2023年，2月20日，星期二2023/4/1660例3：大名鼎鼎的微軟公司網(wǎng)站

第6章網(wǎng)頁用戶界面設(shè)計6.4網(wǎng)頁界面色彩搭配（10個例子）特點：高科技意味濃厚

背景菜單字體第61頁，共72頁，2023年，2月20日，星期二2023/4/1661例4：簡單、素雅第6章網(wǎng)頁用戶界面設(shè)計6.4網(wǎng)頁界面色彩搭配（10個例子）背景菜單字體第62頁，共72頁，2023年，2月20日，星期二2023/4/1662例5：黃色調(diào)為主第6章網(wǎng)頁用戶界面設(shè)計6.4網(wǎng)頁界面色彩搭配（10個例子）特點：顯得個性十足但又不單調(diào)主色調(diào)輔色調(diào)字體第63頁，共72頁，2023年，2月20日，星期二2023/4/1663例6：橘紅色如果運用得當是一種非常適用于網(wǎng)頁上的顏色第6章網(wǎng)頁用戶界面設(shè)計6.4網(wǎng)頁界面色彩搭配（10個例子）特點：感覺較為前衛(wèi)，色彩熱烈，給人的震懾力較強主色調(diào)輔色調(diào)菜單字體第64頁，共72頁，2023年，2月20日，星期二2023/4/1664例7：鮮紅色也是一種震撼感很強的顏色第6章網(wǎng)頁用戶界面設(shè)計6.4網(wǎng)頁界面色彩搭配（10個例子）特點：顯得美觀而不失獨特，大氣而不逼人主色調(diào)字體第65頁，共72頁，2023年，2月20日，星期二2023/4/1665例8：該色調(diào)是制作網(wǎng)頁時不經(jīng)常用到的顏色第6章網(wǎng)頁用戶界面設(shè)計6.4網(wǎng)頁界面色彩搭配（10個例子）特點：這樣的搭配顯得風格獨特，顏色和諧而莊重

主色調(diào)輔色調(diào)邊飾+字體第66頁，共72頁，2023年，2月20日，星期二2023/4/1666例9：設(shè)計更加簡單化，但是顏色的搭配使網(wǎng)頁并不呆板第6章網(wǎng)頁用戶界面設(shè)計6.4網(wǎng)頁界面色彩搭配（10個例子）特點：讓人感覺到一股濃濃的生活和家庭氣氛

如此簡單的構(gòu)圖，卻栩栩如生，躍然網(wǎng)上主色1主色2裝飾+字體第67頁，共72頁，2023年，2月20日，星期二2023/4/1667例10：顏色較多的網(wǎng)頁第6章網(wǎng)頁用戶界面設(shè)計6.4網(wǎng)頁界面色彩搭配（10個例子）特點：