1前期構(gòu)思過程中的設(shè)計(jì)

(1)調(diào)研階段:項(xiàng)目開展前期學(xué)生會(huì)對客戶或相關(guān)專業(yè)人士展開訪談,對行業(yè)同類網(wǎng)站的資訊開展收集與調(diào)研。如果是真實(shí)案例,此階段將會(huì)是客戶與設(shè)計(jì)師交流階段,我們也可以在這個(gè)環(huán)節(jié)中通過客戶的感受與體驗(yàn)得到所需的設(shè)計(jì)信息,或者客戶會(huì)提出指定的信息需求也是我們需要關(guān)注的。這個(gè)階段為后續(xù)的設(shè)計(jì)提供設(shè)計(jì)依據(jù)。

(2)信息設(shè)計(jì):信息架構(gòu)是一門以邏輯性方式來組織信息的科學(xué)。這一階段并不是我們通常理解的通過計(jì)算機(jī)后臺(tái)代碼進(jìn)行的代碼結(jié)構(gòu)設(shè)置,而是我們設(shè)計(jì)網(wǎng)頁之前根據(jù)分析調(diào)研資料,界面設(shè)計(jì)共同習(xí)慣和使用者習(xí)慣及需求,設(shè)計(jì)的邏輯關(guān)系架構(gòu)圖,也就是網(wǎng)站的主要信息導(dǎo)引。根據(jù)設(shè)計(jì)結(jié)構(gòu)關(guān)系我們可以更進(jìn)一步開展詳盡的設(shè)計(jì)綱要,而設(shè)計(jì)綱要的信息主要來源于我們的前期所獲得的調(diào)研信息。(4)交互設(shè)計(jì):網(wǎng)頁中的交互設(shè)計(jì)是目前我們教師在教學(xué)中面對的新課題,在網(wǎng)頁中如何更好的與訪問者互動(dòng)將是我們教師在教學(xué)中探究與關(guān)注的重點(diǎn)。目前在網(wǎng)頁設(shè)計(jì)課程中所接觸到最直接的交互設(shè)計(jì)形式主要集中在導(dǎo)航條和表單信息的設(shè)計(jì)上。導(dǎo)航條和表單信息都會(huì)直接產(chǎn)生交互行為,導(dǎo)航條引導(dǎo)瀏覽者,通過點(diǎn)擊觸發(fā)導(dǎo)航按鈕的行為直接參與交互,進(jìn)而瀏覽新的網(wǎng)頁;表單通過瀏覽者填充或選擇信息,生成交互,收集有用的資料和跟蹤反饋。

2界面設(shè)計(jì)過程中的設(shè)計(jì)

界面設(shè)計(jì)是網(wǎng)頁設(shè)計(jì)中重要的設(shè)計(jì)展示環(huán)節(jié),在這個(gè)過程中學(xué)生可以根據(jù)自己的主題展開藝術(shù)美感的設(shè)計(jì)。一般進(jìn)行頁面設(shè)計(jì)我們從以下幾個(gè)方面入手。

(1)版式設(shè)計(jì):網(wǎng)頁設(shè)計(jì)中的排版與傳統(tǒng)意義上的版式設(shè)計(jì)差異不大,只是由于各自的展示環(huán)境不同,有所側(cè)重。在網(wǎng)頁設(shè)計(jì)排版中我們會(huì)采用黃金比例分割排列方式,也會(huì)采用三分法排列原則。常見的網(wǎng)頁排版由上至下分別是網(wǎng)頁上部logo區(qū)域、導(dǎo)航區(qū)域、內(nèi)容區(qū)域、版權(quán)信息區(qū)域。中間的內(nèi)容區(qū)域可以根據(jù)自己的需求進(jìn)行分配,可以是左右形式,也可是上下形式,還可以是上中下結(jié)構(gòu)等等。

(2)色彩設(shè)計(jì):色彩設(shè)計(jì)作為一門獨(dú)立學(xué)科,有其豐富的語言和表現(xiàn)形態(tài),向我們傳達(dá)由科學(xué)到情感不同層次不同領(lǐng)域的信息,為我們帶來更直觀的視覺體驗(yàn)。同時(shí)網(wǎng)頁配色也是網(wǎng)頁設(shè)計(jì)師必備技能之一。網(wǎng)頁色彩決定訪問者的第一視覺感受。在教學(xué)中教師應(yīng)要求學(xué)生根據(jù)所選主題,確立網(wǎng)站主體顏色和輔助顏色,利用色彩營造符合主題的環(huán)境與相應(yīng)的氣氛。

(3)圖像設(shè)計(jì):圖像是網(wǎng)頁頁面中的重要信息組成部分。網(wǎng)頁中常見的圖像形態(tài)分為,信息圖片,反映現(xiàn)實(shí)的圖片信息或調(diào)查數(shù)據(jù)信息,量表等;裝飾美化圖像,如插畫,符合網(wǎng)站主題與網(wǎng)站主色調(diào)協(xié)調(diào)統(tǒng)一,起到美化頁面的效果;背景圖像設(shè)計(jì),這部分可能采用大面積的色塊,也會(huì)采用紋理或連續(xù)圖案效果,起到頁面美化,氣氛烘托等作用。

(4)字體設(shè)計(jì):網(wǎng)頁字體分為英文字體與中文字體,網(wǎng)頁中常見的英文字體有Arial、ArialBlack、ArialNarrow等等,字號(hào)一般選用12pt。在中文網(wǎng)頁中我們一般會(huì)看到字體為宋體或黑體,字號(hào)為12pt/14pt的文字展示,另有個(gè)別網(wǎng)頁中也會(huì)采用16pt或更大字號(hào)作為標(biāo)題文字,以上是常見字體字號(hào)顯示方式。特殊字體的運(yùn)用方面,隨著瀏覽器技術(shù)的發(fā)展,及相關(guān)軟件的開發(fā),我們可以將選擇的特殊字體順利的嵌入到網(wǎng)頁頁面中,便于展示。另外字體除了本身的表意之外,還更多的轉(zhuǎn)換為圖形釋義,這樣也為我們的設(shè)計(jì)提供新的切入方法。

3技術(shù)實(shí)施與運(yùn)行中的設(shè)計(jì)

(1)布局設(shè)計(jì),網(wǎng)頁設(shè)計(jì)中常見的布局方式有表格式布局,框架式布局以及DIV+CSS方式布局。DIV+CSS布局方式,是目前網(wǎng)頁設(shè)計(jì)中比較常見的,它實(shí)現(xiàn)了網(wǎng)頁結(jié)構(gòu)與樣式的真正分離。與table表格布局在靜態(tài)外觀展示上差別不大,只是在收索引擎和網(wǎng)站的后期維護(hù)上有所差別,相對信息復(fù)雜,內(nèi)容繁多的網(wǎng)站,我們更建議使用DIV+CSS這種布局方式,這種布局方式更有邏輯性,結(jié)構(gòu)清晰,便于后期信息修訂與整理。

(2)CSS樣式設(shè)計(jì),CSS樣式是英文Cas-cadingStyleSheets(層疊樣式表的縮寫形式,它是html或xml外觀樣式的一種補(bǔ)足。CSS規(guī)則簡單易掌握,可以更好的控制網(wǎng)頁外觀展示,同時(shí)CSS所涉及的規(guī)劃范圍廣泛,從文字大小、顏色到web頁面中各個(gè)元素定位等。在網(wǎng)頁中應(yīng)用CSS樣式,便于統(tǒng)一展示風(fēng)格,便于修改,便于不同瀏覽器顯示統(tǒng)一效果。

4結(jié)語

網(wǎng)頁設(shè)計(jì)課程依據(jù)實(shí)際項(xiàng)目講解,教師教學(xué)以引導(dǎo)為主,學(xué)生通過對流程的掌握和對項(xiàng)目課題的理解,達(dá)到理論與實(shí)踐相結(jié)合,強(qiáng)化學(xué)生的技能操作,鍛煉了學(xué)生的創(chuàng)新思維能力,提高了網(wǎng)站建設(shè)的綜合素質(zhì),為今后動(dòng)態(tài)網(wǎng)站的建立打下良好的基礎(chǔ)。

作者：劉石 孟萍 李靜 單位：大連東軟信息學(xué)院