- 中文版Photoshop/Dreamweaver/Flash網(wǎng)頁設(shè)計(jì)與制作技術(shù)大全
- 楊仁毅編著
- 805字
- 2019-07-23 11:06:54
3.3 網(wǎng)頁設(shè)計(jì)應(yīng)遵循的原則
網(wǎng)頁作為一種版面,既有文字,又有圖片,可能還有動畫、視頻等。文字和圖片需要同時展示給用戶,如果只是將它們簡單地羅列在一個頁面上,往往會使頁面顯得雜亂無章。因此,必須根據(jù)內(nèi)容需要,將它們按照一定的次序進(jìn)行合理布局和編排,使其組成一個有機(jī)的整體,展示給用戶。下面介紹使用Photoshop進(jìn)行網(wǎng)頁布局一般應(yīng)遵循的原則。
3.3.1 圖文搭配
文字和圖像具有相互補(bǔ)充的視覺關(guān)系,如果頁面上的圖像太多,缺少文字,就會降低頁面的信息容量;而如果頁面上的文字太多,則會顯得沉悶,缺乏生氣。一個好的網(wǎng)站,圖片量和文字量應(yīng)該以網(wǎng)站的功能、行業(yè)、目的而定;文字和圖片相互依托,合理搭配,才能制作出形式生動、內(nèi)容豐富的網(wǎng)頁。
3.3.2 疏密交錯
網(wǎng)頁上重復(fù)的形式過多,會使頁面顯得呆板,容易使瀏覽者產(chǎn)生視覺疲勞,因此在內(nèi)容安排上要恰當(dāng)?shù)亓舭祝m當(dāng)?shù)剡\(yùn)用空格,改變行間距和字間距等來制造變化的效果,打破頁面呆板、平淡的格局;在對稱性上既要使用對稱美,也要兼顧非對稱美,均衡的網(wǎng)頁生動活潑,富于變化,可以給頁面增加一些生動性和趣味性;在色彩上可以適當(dāng)使用對比,以形成鮮明的視覺效果,最重要的還是要讓個體和主體統(tǒng)一協(xié)調(diào),以免顏色搭配不合理,給人一種不舒服的感覺。
3.3.3 強(qiáng)調(diào)整體
這在設(shè)計(jì)中占據(jù)了關(guān)鍵位置,起著主導(dǎo)作用。網(wǎng)頁上的整體包括內(nèi)容和形式上的整體性,這里主要討論設(shè)計(jì)形式上的整體性,從版面、色彩和風(fēng)格入手。在網(wǎng)頁上所有的元素要整體考慮,以周密的結(jié)合和精確的定位來獲得頁面的整體感,即使運(yùn)用“散”的結(jié)構(gòu),也要經(jīng)過巧妙的整合,顧全大局,使其產(chǎn)生和諧的美感。
3.3.4 突出主題
一個優(yōu)秀的網(wǎng)頁設(shè)計(jì)作品必須條理清晰,服務(wù)于網(wǎng)站的主題。從空間層次、視覺次序、主次關(guān)系,有條理地把握運(yùn)用。在空間上應(yīng)該放大主體;從視覺出發(fā),重心一般在中偏上位置,這個位置最能吸引瀏覽者;從主次出發(fā),應(yīng)在視覺中心以外的地方安排一些稍微次要的內(nèi)容,或增加一些空白,可以使被強(qiáng)調(diào)的主體形象更加鮮明突出。
- JSP網(wǎng)站開發(fā)詳解
- 網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計(jì)從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript
- Dreamweaver CS5網(wǎng)頁設(shè)計(jì)與制作教程
- jQuery網(wǎng)頁特效設(shè)計(jì)基礎(chǔ)教程(慕課版·第2版)
- Vue.js Web開發(fā)案例教程(在線實(shí)訓(xùn)版)
- 網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)從入門到精通
- 速學(xué)速通:快學(xué)Flash網(wǎng)頁動畫
- ADOBE DREAMWEAVER CS6 標(biāo)準(zhǔn)培訓(xùn)教材
- Illustrator平面設(shè)計(jì)180例五步通
- CSS圖鑒
- HTML+CSS+JavaScript網(wǎng)頁制作(第2版)
- Web程序設(shè)計(jì)
- 建筑CAD繪圖技術(shù)(第2版)
- Dreamweaver CS3網(wǎng)站制作炫例精講
- 外貿(mào)獨(dú)立站建站實(shí)操從入門到精通