web開發(fā)和技術(shù)設(shè)計(jì)四-展示頁
2025-03-02 13:19本頁面
【正文】 首先將需要放置的功能模塊安排到頁面上，主要包含網(wǎng)站標(biāo)志、主菜單、欄目條、廣告位、搜索器、計(jì)數(shù)器等。網(wǎng)頁布局由各個(gè)元素（形態(tài)、位置、色彩、字體、疏密）組合而成的，各個(gè)元素均可被尺寸、角度等程度參數(shù)所描述。把現(xiàn)有作品的視覺元素的性質(zhì)加以改變、重組，與自己的素材結(jié)合而產(chǎn)生新的設(shè)計(jì)作品。 ? 借鑒重組是加進(jìn)或減少組合的元素進(jìn)行新的組合； ? 逆向模仿是對(duì)視覺元素的量 (描述參數(shù) )進(jìn)行改變，至于變化到什么程度，需要專業(yè)的眼光才能把握住。上圖為北京希望電子出版社 BHP網(wǎng)站網(wǎng)頁設(shè)計(jì)草圖之一 構(gòu)思構(gòu)圖（草案） ? 草圖的構(gòu)思、創(chuàng)意的產(chǎn)生往往來自于一些現(xiàn)有設(shè)計(jì)作品、圖形圖像素材的組合、改造和加工。你可以用一張白紙和一支鉛筆，當(dāng)然也可以用作圖軟件把你的最初創(chuàng)意畫出來。 ? 草圖類似一個(gè)創(chuàng)意，它是連結(jié)藝術(shù)思想與作品制作的橋梁，網(wǎng)頁設(shè)計(jì)的精髓正是在這時(shí)顯露出來。 構(gòu)思構(gòu)圖（草案） ? 草圖的目的是將腦海里朦朧的想法具體化，變成可視可見的輪廓。 ? 量化描述（定案）。 ? 設(shè)計(jì)方案（粗略布局）。Web 開發(fā)與技術(shù)設(shè)計(jì) 第四講 網(wǎng)站設(shè)計(jì)（三） 提綱 ? 定位你的網(wǎng)站主題和名稱 ? 網(wǎng)站的形象設(shè)計(jì)與 CI 策劃 ? 網(wǎng)站的欄目和版塊 ? 網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu) ? 網(wǎng)站的整體風(fēng)格與創(chuàng)意設(shè)計(jì) ? 版面布局與首頁的設(shè)計(jì) ? 色彩的搭配 ? 網(wǎng)頁中的字體、插圖處理、動(dòng)畫與廣告 ? 考慮不同的瀏覽器和分辨率 版面布局的過程 ? 構(gòu)思構(gòu)圖（草案）。 目的是將腦海里朦朧的想法具體化，變成可視可見的輪廓。除了文本文字可以不必認(rèn)真，以字符象征性地代替以外，其它所有的內(nèi)容都要接近將來的網(wǎng)頁效果。即把網(wǎng)頁設(shè)計(jì)方案中的視覺元素的各項(xiàng)參數(shù)確定下來。 ? 草圖也許是幾條線、幾個(gè)色塊，但它是進(jìn)一步深入細(xì)化的基礎(chǔ)，決定著將來網(wǎng)頁的基本面貌。 ? 新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發(fā)揮你的想象力，將你想到的 景象 畫上去。 構(gòu)思構(gòu)圖（草案） 用筆勾畫網(wǎng)頁的輪廓草圖及布局安排。 ? 汲取成功作品中的一些視覺元素及其組合方式，加入自己的新元素形成新的組合（有些是素材本身規(guī)定了的），其思維方式是借鑒重組和逆向模仿。 構(gòu)思構(gòu)圖（草案） 逆向模仿是利用反向思維來完成設(shè)計(jì)和創(chuàng)作的。比如原有作品的背景色是黑色的，你把它改成白色就會(huì)變成另外一個(gè)樣子；再比如，某個(gè)網(wǎng)頁的圖像位置放在左邊、文字在右邊，你只要將圖文左右倒置一下就與原作的布局有所不同。如果將其中的一個(gè)或多個(gè)視覺元素的描述參數(shù)加以改變，就可能實(shí)現(xiàn)新的設(shè)計(jì)作品。必須突出重點(diǎn)，將網(wǎng)站標(biāo)志、主菜單等最重要的模塊放在最顯眼最突出的位置，然后再考慮次要模塊的排放?？梢岳^續(xù)用畫筆尺子創(chuàng)作，也可以運(yùn)用 Photoshop Illustrator Pagemaker 或者 Frontpage 等軟件在顯示器上進(jìn)行。 一般計(jì)算機(jī)顯示器的分辨率設(shè)置為 800 600，網(wǎng)頁的橫寬最好不要超出 800 像素，網(wǎng)頁的長度、高度可根據(jù)內(nèi)容的需要而定 。同時(shí)標(biāo)明該圖在網(wǎng)頁中的相對(duì)位置。有些作為標(biāo)題的文字其實(shí)已經(jīng)作為圖形圖像對(duì)待了，這里的文字僅僅指文本的字體和由計(jì)算機(jī)程序產(chǎn)生的標(biāo)題字，同時(shí)也應(yīng)說明字體的 HTML 的色彩數(shù)值。除圖形圖像以外，設(shè)計(jì)方案中的標(biāo)準(zhǔn)色、底色、文字的顏色，都應(yīng)該以 RGB模式數(shù)值或 HTML語言數(shù)值表示出來 。根據(jù)經(jīng)驗(yàn)或參照類似的在線網(wǎng)頁，概算一下將來的網(wǎng)頁大約有多少個(gè) KB。 版面布局的原則 ? 平衡 指畫面的圖像、文字的視覺分量在左右、上下幾個(gè)方位基本相等，分布勻稱，能達(dá)到安定、平穩(wěn)的效果，過于平衡的畫面難免有呆板的感覺，有時(shí)需要在局部打破平衡或?qū)ΨQ。 版面布局的原則 ? 呼應(yīng) 在不平衡的布局中的補(bǔ)救措施，使一種元素同時(shí)出現(xiàn)在不同的地方，形成視覺上的相互聯(lián)系。 Adobe 公司的頁面。 形態(tài)對(duì)比 :圓與方的對(duì)比 版面布局的原則 ? 疏密 疏：是指畫面中形式元素稀少甚至空白的部分；密：是指畫面中形式元素繁多的部分。 十分具有視覺節(jié)奏感的版式設(shè)計(jì)，左側(cè)上下兩塊空白對(duì)于調(diào)節(jié)畫面節(jié)奏起到重要作用。 圖中左上方的密與右下方的疏形成一種視覺上的節(jié)奏感 奧迪公司的網(wǎng)頁以疏體設(shè)計(jì)為主，顯得寬敞舒展，有一種宮廷的豪華氣派，象牙灰也透著一種貴族味道。 版面布局的樣式 ? “ T” 字型結(jié)構(gòu)
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1