1前期構(gòu)思過程中的設(shè)計
(1)調(diào)研階段:項目開展前期學生會對客戶或相關(guān)專業(yè)人士展開訪談,對行業(yè)同類網(wǎng)站的資訊開展收集與調(diào)研。如果是真實案例,此階段將會是客戶與設(shè)計師交流階段,我們也可以在這個環(huán)節(jié)中通過客戶的感受與體驗得到所需的設(shè)計信息,或者客戶會提出指定的信息需求也是我們需要關(guān)注的。這個階段為后續(xù)的設(shè)計提供設(shè)計依據(jù)。
(2)信息設(shè)計:信息架構(gòu)是一門以邏輯性方式來組織信息的科學。這一階段并不是我們通常理解的通過計算機后臺代碼進行的代碼結(jié)構(gòu)設(shè)置,而是我們設(shè)計網(wǎng)頁之前根據(jù)分析調(diào)研資料,界面設(shè)計共同習慣和使用者習慣及需求,設(shè)計的邏輯關(guān)系架構(gòu)圖,也就是網(wǎng)站的主要信息導引。根據(jù)設(shè)計結(jié)構(gòu)關(guān)系我們可以更進一步開展詳盡的設(shè)計綱要,而設(shè)計綱要的信息主要來源于我們的前期所獲得的調(diào)研信息。(4)交互設(shè)計:網(wǎng)頁中的交互設(shè)計是目前我們教師在教學中面對的新課題,在網(wǎng)頁中如何更好的與訪問者互動將是我們教師在教學中探究與關(guān)注的重點。目前在網(wǎng)頁設(shè)計課程中所接觸到最直接的交互設(shè)計形式主要集中在導航條和表單信息的設(shè)計上。導航條和表單信息都會直接產(chǎn)生交互行為,導航條引導瀏覽者,通過點擊觸發(fā)導航按鈕的行為直接參與交互,進而瀏覽新的網(wǎng)頁;表單通過瀏覽者填充或選擇信息,生成交互,收集有用的資料和跟蹤反饋。
2界面設(shè)計過程中的設(shè)計
界面設(shè)計是網(wǎng)頁設(shè)計中重要的設(shè)計展示環(huán)節(jié),在這個過程中學生可以根據(jù)自己的主題展開藝術(shù)美感的設(shè)計。一般進行頁面設(shè)計我們從以下幾個方面入手。
(1)版式設(shè)計:網(wǎng)頁設(shè)計中的排版與傳統(tǒng)意義上的版式設(shè)計差異不大,只是由于各自的展示環(huán)境不同,有所側(cè)重。在網(wǎng)頁設(shè)計排版中我們會采用黃金比例分割排列方式,也會采用三分法排列原則。常見的網(wǎng)頁排版由上至下分別是網(wǎng)頁上部logo區(qū)域、導航區(qū)域、內(nèi)容區(qū)域、版權(quán)信息區(qū)域。中間的內(nèi)容區(qū)域可以根據(jù)自己的需求進行分配,可以是左右形式,也可是上下形式,還可以是上中下結(jié)構(gòu)等等。
(2)色彩設(shè)計:色彩設(shè)計作為一門獨立學科,有其豐富的語言和表現(xiàn)形態(tài),向我們傳達由科學到情感不同層次不同領(lǐng)域的信息,為我們帶來更直觀的視覺體驗。同時網(wǎng)頁配色也是網(wǎng)頁設(shè)計師必備技能之一。網(wǎng)頁色彩決定訪問者的第一視覺感受。在教學中教師應要求學生根據(jù)所選主題,確立網(wǎng)站主體顏色和輔助顏色,利用色彩營造符合主題的環(huán)境與相應的氣氛。
(3)圖像設(shè)計:圖像是網(wǎng)頁頁面中的重要信息組成部分。網(wǎng)頁中常見的圖像形態(tài)分為,信息圖片,反映現(xiàn)實的圖片信息或調(diào)查數(shù)據(jù)信息,量表等;裝飾美化圖像,如插畫,符合網(wǎng)站主題與網(wǎng)站主色調(diào)協(xié)調(diào)統(tǒng)一,起到美化頁面的效果;背景圖像設(shè)計,這部分可能采用大面積的色塊,也會采用紋理或連續(xù)圖案效果,起到頁面美化,氣氛烘托等作用。
(4)字體設(shè)計:網(wǎng)頁字體分為英文字體與中文字體,網(wǎng)頁中常見的英文字體有Arial、ArialBlack、ArialNarrow等等,字號一般選用12pt。在中文網(wǎng)頁中我們一般會看到字體為宋體或黑體,字號為12pt/14pt的文字展示,另有個別網(wǎng)頁中也會采用16pt或更大字號作為標題文字,以上是常見字體字號顯示方式。特殊字體的運用方面,隨著瀏覽器技術(shù)的發(fā)展,及相關(guān)軟件的開發(fā),我們可以將選擇的特殊字體順利的嵌入到網(wǎng)頁頁面中,便于展示。另外字體除了本身的表意之外,還更多的轉(zhuǎn)換為圖形釋義,這樣也為我們的設(shè)計提供新的切入方法。
3技術(shù)實施與運行中的設(shè)計
(1)布局設(shè)計,網(wǎng)頁設(shè)計中常見的布局方式有表格式布局,框架式布局以及DIV+CSS方式布局。DIV+CSS布局方式,是目前網(wǎng)頁設(shè)計中比較常見的,它實現(xiàn)了網(wǎng)頁結(jié)構(gòu)與樣式的真正分離。與table表格布局在靜態(tài)外觀展示上差別不大,只是在收索引擎和網(wǎng)站的后期維護上有所差別,相對信息復雜,內(nèi)容繁多的網(wǎng)站,我們更建議使用DIV+CSS這種布局方式,這種布局方式更有邏輯性,結(jié)構(gòu)清晰,便于后期信息修訂與整理。
(2)CSS樣式設(shè)計,CSS樣式是英文Cas-cadingStyleSheets(層疊樣式表的縮寫形式,它是html或xml外觀樣式的一種補足。CSS規(guī)則簡單易掌握,可以更好的控制網(wǎng)頁外觀展示,同時CSS所涉及的規(guī)劃范圍廣泛,從文字大小、顏色到web頁面中各個元素定位等。在網(wǎng)頁中應用CSS樣式,便于統(tǒng)一展示風格,便于修改,便于不同瀏覽器顯示統(tǒng)一效果。
4結(jié)語
網(wǎng)頁設(shè)計課程依據(jù)實際項目講解,教師教學以引導為主,學生通過對流程的掌握和對項目課題的理解,達到理論與實踐相結(jié)合,強化學生的技能操作,鍛煉了學生的創(chuàng)新思維能力,提高了網(wǎng)站建設(shè)的綜合素質(zhì),為今后動態(tài)網(wǎng)站的建立打下良好的基礎(chǔ)。
作者：劉石 孟萍 李靜 單位：大連東軟信息學院