鄧祖龍

【摘? ? 要】網(wǎng)頁設(shè)計是指將一系列信息，如文字、圖片、音視頻、圖標(biāo)符號、表格等進(jìn)行設(shè)計排版，通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面的形式被用戶所瀏覽，從中獲取信息。網(wǎng)頁設(shè)計誕生于互聯(lián)網(wǎng)時代，發(fā)展至今已經(jīng)非常成熟。如今移動互聯(lián)網(wǎng)高速發(fā)展，串聯(lián)起各類智能設(shè)備與平臺，用戶獲得信息的渠道和方式越來越多樣化。網(wǎng)頁設(shè)計如何適應(yīng)新媒體時代下的發(fā)展，數(shù)媒專業(yè)核心課程怎么設(shè)置，網(wǎng)頁設(shè)計在新媒體課程建設(shè)中的重要性以及人才培養(yǎng)等問題，都是值得討論的主題。

【關(guān)鍵詞】網(wǎng)頁設(shè)計? 移動互聯(lián)網(wǎng)? 新媒體? 學(xué)習(xí)過程? 課程建設(shè)

中圖分類號：G4? ? ? 文獻(xiàn)標(biāo)識碼：A DOI：10.3969/j.issn.1672-0407.2020.16.170

一、網(wǎng)頁設(shè)計

（一）網(wǎng)頁設(shè)計

網(wǎng)頁設(shè)計是指將一系列信息，如文字、圖片、音視頻、圖標(biāo)符號、表格等信息進(jìn)行設(shè)計排版，通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面的形式被用戶所瀏覽，從中獲取信息。網(wǎng)頁設(shè)計可分為網(wǎng)頁界面設(shè)計和交互設(shè)計兩大模塊，面向數(shù)媒專業(yè)其核心課程為網(wǎng)頁界面設(shè)計，而交互設(shè)計屬于輔助性課程。因此，我們這里討論的網(wǎng)頁設(shè)計，更多是從美術(shù)設(shè)計角度出發(fā)，重視覺方向。網(wǎng)頁的發(fā)布平臺一般為電腦屏幕，在新媒體時代下，網(wǎng)頁設(shè)計如何適配新型媒體終端，是直接遷移還是重構(gòu)設(shè)計？為適配多類型平臺，UI設(shè)計在傳統(tǒng)網(wǎng)頁設(shè)計基礎(chǔ)上進(jìn)行重構(gòu)設(shè)計與優(yōu)化，但設(shè)計思路依然遵循網(wǎng)頁設(shè)計的基本規(guī)律。

（二）網(wǎng)頁設(shè)計的流程

隨著互聯(lián)網(wǎng)和移動互聯(lián)網(wǎng)的快速發(fā)展，企業(yè)推廣不再局限于傳統(tǒng)的宣傳形式，如宣傳手冊和視頻廣告等。更多的企業(yè)通過網(wǎng)站、小程序或手機APP呈現(xiàn)產(chǎn)品、服務(wù)、理念與文化，或向受眾提供功能服務(wù)。因此，網(wǎng)站建設(shè)是非常有必要的，由于智能手機的高速發(fā)展，其形式也呈現(xiàn)出多樣化發(fā)展，如小程序和手機APP，就是網(wǎng)頁設(shè)計在手機終端上的表現(xiàn)形式。

網(wǎng)頁設(shè)計、小程序及手機APP設(shè)計，需要經(jīng)歷以下幾個階段：

1.產(chǎn)品需求分析。簡要分析產(chǎn)品的類型與方向，定義產(chǎn)品的用戶群體及特征，繪制原型需求。

2.用戶體驗研究與分析。深度剖析已定義的目標(biāo)用戶群體，包括年齡，性別、情感需求、行為習(xí)慣及心理特征等。針對產(chǎn)品構(gòu)想出初步的色系搭配及元素控件設(shè)計方案。

3.初稿設(shè)計。將原型需求與用戶體驗研究分析相結(jié)合，設(shè)計頁面初稿。包括大概的色系搭配、框架布局、元素控件、圖標(biāo)ICON等設(shè)計。

4.視覺規(guī)范設(shè)計及細(xì)節(jié)優(yōu)化設(shè)計。視覺規(guī)范設(shè)計就是對整個產(chǎn)品的顏色、字體、字號、元素控件、圖標(biāo)ICON、間距及交互效果做統(tǒng)一的規(guī)范，同時進(jìn)行細(xì)節(jié)優(yōu)化設(shè)計。

5.協(xié)同前端實現(xiàn)交互效果。設(shè)計稿完成后，我們需要協(xié)同前端工程師更準(zhǔn)確地還原我們的設(shè)計效果，實現(xiàn)最佳的交互式體驗。

6.產(chǎn)品體驗與持續(xù)用戶體驗優(yōu)化。對整個產(chǎn)品做一個線上體驗、界面體驗、交互體驗。遇到體驗不好的問題，我們可以和產(chǎn)品經(jīng)理、前端工程師共同協(xié)商來解決這些問題。產(chǎn)品正式上線后，收集用戶體驗數(shù)據(jù)，持續(xù)優(yōu)化界面設(shè)計與交互設(shè)計，完善用戶體驗。

二、網(wǎng)頁設(shè)計學(xué)習(xí)過程

網(wǎng)頁設(shè)計需要大量的素材資源，各類主題與風(fēng)格千變?nèi)f化，因此，要學(xué)好網(wǎng)頁設(shè)計，學(xué)生需要大量的閱讀和練習(xí)。整個學(xué)習(xí)過程可以總結(jié)為以下幾個階段：模擬項目、案例采集與分析、項目臨摹、項目實戰(zhàn)。

1.模擬項目。學(xué)習(xí)初期，采用模擬項目的訓(xùn)練方式，在設(shè)計過程中去發(fā)現(xiàn)問題、解決問題。以模擬某品牌網(wǎng)站為命題，結(jié)合品牌形象、品牌定位、產(chǎn)品信息、圖片素材等資源，自行設(shè)計一套該品牌形象網(wǎng)站的主頁面效果圖。主要會出現(xiàn)的問題包括：設(shè)計風(fēng)格與品牌定位出現(xiàn)偏差、網(wǎng)頁布局單一缺乏變化、排版問題、字體應(yīng)用問題、色彩搭配紛繁復(fù)雜等問題。

2.案例采集與分析。品牌網(wǎng)站建設(shè)是展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略的重要途徑。通過收集和整理各個行業(yè)的企業(yè)網(wǎng)站或品牌網(wǎng)站，了解掌握多樣的設(shè)計風(fēng)格和主題表現(xiàn)形式，分析總結(jié)各類型網(wǎng)站設(shè)計的特點，包括布局樣式、版式設(shè)計、圖片處理、圖文編排、色彩構(gòu)成、多媒體及交互設(shè)計等細(xì)節(jié)表現(xiàn)。學(xué)設(shè)計一定要多看多想，學(xué)習(xí)優(yōu)秀的設(shè)計理念和表現(xiàn)手法，規(guī)范設(shè)計流程，強化細(xì)節(jié)表現(xiàn)，從而提高自身的設(shè)計水平。

3.項目臨摹。選擇符合最新設(shè)計趨勢的優(yōu)秀案例進(jìn)行臨摹，每一個元素都參照原作進(jìn)行重繪，圖片素材則需要重新匹配。在重繪過程中，深度對比學(xué)習(xí)布局與比例、板塊切割、對象對齊、字體字號、字距與行距、圖形符號、色彩對比等具體參數(shù)，量化參考數(shù)據(jù)，強化自身對設(shè)計規(guī)范和參數(shù)標(biāo)準(zhǔn)的認(rèn)識，有利于今后設(shè)計的規(guī)范化和標(biāo)準(zhǔn)化。

4.項目實戰(zhàn)。參與實際商業(yè)項目制作，協(xié)同公司設(shè)計師完成項目的主頁面和二級頁面設(shè)計。通過與商務(wù)策劃人員討論提案，與設(shè)計師交流設(shè)計方案，配合前端后端落實修改客戶反饋意見，在真實的項目建設(shè)中得到更多的鍛煉。

三、網(wǎng)頁設(shè)計與課程建設(shè)

隨著互聯(lián)網(wǎng)及移動互聯(lián)網(wǎng)的高速發(fā)展，計算機和智能終端的普及，傳統(tǒng)的平面設(shè)計已經(jīng)不能滿足新媒體時代對視覺信息傳播的需求，動態(tài)的、交互的體驗式視覺傳播方式正在廣泛流行。越來越多的企業(yè)需要通過網(wǎng)站、小程序或手機APP展現(xiàn)產(chǎn)品、宣傳企業(yè)理念與文化、與客戶交流互動、提供線上線下服務(wù)。因此，市場對于設(shè)計人才的需求發(fā)生了巨大的變化，單純的平面設(shè)計師已無法實現(xiàn)企業(yè)對視覺設(shè)計的所有需求。未來，越來越多的行業(yè)需要UI設(shè)計人才，主流的設(shè)計方向會是高端網(wǎng)頁設(shè)計和移動終端界面設(shè)計。因此，UI設(shè)計師將是中國新媒體設(shè)計產(chǎn)業(yè)中最為搶手的人才之一。

網(wǎng)頁設(shè)計作為新媒體視覺傳播的必要方式，它所涵蓋的設(shè)計面非常廣，包括圖片處理、廣告設(shè)計、色彩構(gòu)成、版式設(shè)計、圖標(biāo)設(shè)計、字體設(shè)計與應(yīng)用、交互設(shè)計等。縱觀整個數(shù)字多媒體課程體系，網(wǎng)頁設(shè)計課程的位置和作用都是至關(guān)重要的，很好地銜接了前期基礎(chǔ)課程和后續(xù)專業(yè)課程，起到了承前啟后的作用。前置課程包括二維軟件學(xué)習(xí)、三大構(gòu)成、版式設(shè)計等，其學(xué)習(xí)成果都能在網(wǎng)頁設(shè)計中得到很好的展現(xiàn)，體現(xiàn)了基礎(chǔ)課程的重要性。后置課程圖標(biāo)設(shè)計、UI設(shè)計則是在網(wǎng)頁設(shè)計基礎(chǔ)上的擴展，圖標(biāo)設(shè)計與UI設(shè)計多應(yīng)用于手機、平板等智能終端，載體雖然發(fā)生了改變，但設(shè)計流程卻和網(wǎng)頁設(shè)計基本一致。基本延續(xù)功能布局、圖文排版、元素控件、圖標(biāo)ICON、顏色搭配等核心設(shè)計元素不變，改變的是交互方式、設(shè)計規(guī)范及參數(shù)。因此，我們可以看出網(wǎng)頁設(shè)計在整個課程體系建設(shè)中的地位是非常重要的，是專業(yè)核心課程，為后續(xù)的UI設(shè)計課程提供了良好的基礎(chǔ)支撐。

四、結(jié)語

網(wǎng)頁設(shè)計在新媒體課程體系建設(shè)中有著重要的地位，起著承前啟后的作用。既能體現(xiàn)前期課程的學(xué)習(xí)效果，又能為后續(xù)的專業(yè)課程擬定方向，打好基礎(chǔ)。學(xué)好UI設(shè)計的前提是學(xué)好網(wǎng)頁設(shè)計，學(xué)好網(wǎng)頁設(shè)計是需要大量閱讀和練習(xí)的，其學(xué)習(xí)的過程與方法需要教師去提煉總結(jié)，改進(jìn)教學(xué)方法，才能使學(xué)生更好地學(xué)習(xí)一門課程與技能。