第1章-平面構(gòu)成設(shè)計(jì)

第1章平面構(gòu)成設(shè)計(jì)

教學(xué)目標(biāo)：網(wǎng)頁(yè)設(shè)計(jì)不只是軟件編程，其界面設(shè)計(jì)是人機(jī)交互范疇的一個(gè)重要內(nèi)容，是一個(gè)關(guān)乎數(shù)字圖形界面藝術(shù)設(shè)計(jì)的問(wèn)題。學(xué)習(xí)界面設(shè)計(jì)要從平面構(gòu)成學(xué)習(xí)起，掌握基本的構(gòu)成規(guī)律。通過(guò)對(duì)本章的學(xué)習(xí)，學(xué)員能應(yīng)用平面構(gòu)成規(guī)律來(lái)設(shè)計(jì)一個(gè)好的網(wǎng)頁(yè)界面布局。

教學(xué)要求:掌握點(diǎn)、線、面的平面造型規(guī)律；掌握穩(wěn)定性、秩序性、律動(dòng)性、統(tǒng)一和變化；掌握重復(fù)、漸變、對(duì)比、發(fā)散、特異。9/5/20231北大出版社1.1平面構(gòu)成設(shè)計(jì)概述

網(wǎng)頁(yè)的界面設(shè)計(jì)的好壞直接影響視覺(jué)效果，界面設(shè)計(jì)涉及平面構(gòu)成和色彩搭配。本節(jié)介紹網(wǎng)頁(yè)界面的平面設(shè)計(jì)基礎(chǔ)，包括構(gòu)成的基本要素，形態(tài)美的法則和邏輯構(gòu)成規(guī)律。

1.1.1形的基本要素1.點(diǎn)的構(gòu)成

點(diǎn)即相對(duì)較小而集中的形。點(diǎn)有集中視線，緊縮空間，引起注意的功能。在造型活動(dòng)中，點(diǎn)常用來(lái)表現(xiàn)強(qiáng)調(diào)和節(jié)奏。

9/5/20232北大出版社2.線的構(gòu)成線即相對(duì)細(xì)長(zhǎng)的形。線有位置、長(zhǎng)度和方向，線有各種形狀并各具特點(diǎn)。從造型意義上看，線是最富個(gè)性和活力的要素。在平面造型中，線被廣泛地用于表現(xiàn)形體結(jié)構(gòu)，不同線型自身的變化，以及線的多種組織方法，賦予作品多樣化的藝術(shù)風(fēng)格。

3.面的構(gòu)成面表現(xiàn)為二次元的形。面在平面構(gòu)成中具有舉足輕重的地位。點(diǎn)與線的擴(kuò)張或組織排列都會(huì)導(dǎo)致面的產(chǎn)生?，F(xiàn)實(shí)中，一般概念為“點(diǎn)”的雨滴，飄落地上會(huì)聚集成“面”。地面上的草呈線型特征，遠(yuǎn)望去卻有面的觀感。9/5/20233北大出版社

1.1.2形態(tài)美的準(zhǔn)則與邏輯構(gòu)成

1.形態(tài)美的準(zhǔn)則1)穩(wěn)定性2)秩序性3)律動(dòng)性4)統(tǒng)一與變化

形式美與人類文明的發(fā)展與物質(zhì)生產(chǎn)技術(shù)進(jìn)化程序密切相關(guān)。可以說(shuō)，形式美是一定歷史時(shí)期的“沉淀物”。這沉淀過(guò)程，包括感性向理性，必然向自由的發(fā)展。因此，形式美不是一成不變的法則。

9/5/20234北大出版社2.邏輯構(gòu)成的形式邏輯構(gòu)成，就是經(jīng)過(guò)對(duì)構(gòu)成的基本要素加以理性分析，然后依一定的數(shù)學(xué)、邏輯原則排列、組合，創(chuàng)造新的構(gòu)成形式。邏輯構(gòu)成的規(guī)律性，包括重復(fù)、近似、漸變、發(fā)散、特異等。

1.1.3本章案例簡(jiǎn)介本章中通過(guò)2個(gè)案例，來(lái)講解網(wǎng)頁(yè)的平面構(gòu)成設(shè)計(jì)的方法及技巧?！盎驹赜?xùn)練”講解一個(gè)學(xué)校網(wǎng)站主頁(yè)的設(shè)計(jì)案例，分析了運(yùn)用構(gòu)圖基本元素表達(dá)畫面的制作技巧；“電影網(wǎng)站首頁(yè)”案例主要講解的是運(yùn)用形態(tài)美的準(zhǔn)則和邏輯構(gòu)成表達(dá)畫面的制作技巧。9/5/20235北大出版社1.2實(shí)訓(xùn)一:基本元素訓(xùn)練-學(xué)校網(wǎng)站主頁(yè)

案例說(shuō)明：本案例應(yīng)用點(diǎn)線面組合設(shè)計(jì)學(xué)校網(wǎng)站主頁(yè)效果圖。內(nèi)容包含網(wǎng)站名稱、主圖、導(dǎo)航等部分，要求網(wǎng)站名稱突顯，設(shè)計(jì)醒目。個(gè)性鮮明。

效果圖如下:

9/5/20236北大出版社

提示：網(wǎng)站效果圖的制作工具可以用photoshop、firework、Illustrator、corelDRAW等圖形圖像處理軟件。通常使用corelDRAW來(lái)設(shè)計(jì)一些按鈕和裝飾圖案，使用photoshop進(jìn)行圖像藝術(shù)處理和合成，最后切片導(dǎo)成網(wǎng)頁(yè)模板。

知識(shí)拓展:

（1）水平線的網(wǎng)頁(yè)構(gòu)圖（2）垂直線的網(wǎng)頁(yè)構(gòu)圖（3）斜線的網(wǎng)頁(yè)構(gòu)圖（4）曲線的網(wǎng)頁(yè)構(gòu)圖（5）線排列的網(wǎng)頁(yè)構(gòu)圖（6）幾何形的網(wǎng)頁(yè)構(gòu)圖（7）有機(jī)形的網(wǎng)頁(yè)構(gòu)圖

9/5/20237北大出版社本節(jié)知識(shí)點(diǎn):點(diǎn)線面是平面構(gòu)成的最基本元素,具有不同的視覺(jué)特征，點(diǎn)線面的應(yīng)用及相互間組合能在畫面產(chǎn)生不同的藝術(shù)效果。在設(shè)計(jì)中應(yīng)注意畫面元素的取舍和加強(qiáng)。9/5/20238北大出版社1.3實(shí)訓(xùn)二:圖形形式的創(chuàng)造-電影網(wǎng)站首頁(yè)

案例說(shuō)明：本節(jié)為電影網(wǎng)站首頁(yè)設(shè)計(jì)案