摘要：在網(wǎng)頁(yè)界面設(shè)計(jì)的教學(xué)中，一般是先落實(shí)布局和配色的知識(shí)，然后分析常見類型網(wǎng)頁(yè)。本文在保留網(wǎng)頁(yè)界面設(shè)計(jì)基本內(nèi)容的基礎(chǔ)上嘗試挖掘出新內(nèi)容。由于以文字，按鈕、圖像和動(dòng)畫為主要形式的網(wǎng)頁(yè)界面設(shè)計(jì)逐漸變得沒有新意，而現(xiàn)在普遍看到的網(wǎng)頁(yè)和以往相差較大，比如網(wǎng)頁(yè)的風(fēng)格主要出現(xiàn)了扁平化風(fēng)格、手繪風(fēng)格、立體風(fēng)格、紋理和質(zhì)感風(fēng)格超、現(xiàn)實(shí)主義風(fēng)格等；表現(xiàn)形式有圖標(biāo)、仿手繪、鼠繪、非主流、編程動(dòng)畫等。

關(guān)鍵詞：分析首頁(yè)；網(wǎng)頁(yè)特點(diǎn)；新的美學(xué)觀和設(shè)計(jì)趨勢(shì)

一、首頁(yè)分析和設(shè)計(jì)

選取并整理出具有代表性的首頁(yè)，這些首頁(yè)涵蓋游戲、活動(dòng)專題、產(chǎn)品展示、電子商務(wù)等類型。如：

第4個(gè)首頁(yè)，尺寸是1200像素*1320像素，主題是個(gè)人作品；主要有黑白色；

第7個(gè)首頁(yè)，尺寸是1200像素*1172像素，主題是產(chǎn)品展示；主要有綠黃藍(lán)灰橙色；

第11個(gè)首頁(yè)，尺寸是1200像素*1400像素，主題是餐飲類；主要有棕色；

第1個(gè)首頁(yè)，網(wǎng)頁(yè)布局是（1）網(wǎng)頁(yè)頭部（網(wǎng)站標(biāo)題、廣告語(yǔ)、logo、公司簡(jiǎn)介）；（2）導(dǎo)航（主導(dǎo)航、二級(jí)導(dǎo)航、主題圖標(biāo)和文字說(shuō)明）；（3）網(wǎng)站主要內(nèi)容（主題主要內(nèi)容、圖片以及主題的尾部?jī)?nèi)容）；（4）網(wǎng)頁(yè)底部（標(biāo)題、LOGO、版權(quán)信息）。

第6個(gè)首頁(yè)，網(wǎng)頁(yè)布局是（1）網(wǎng)頁(yè)頭部（LOGO，導(dǎo)航，某個(gè)菜單下的左側(cè)文字區(qū)和右側(cè)幻燈片區(qū)）。（2）網(wǎng)頁(yè)主體（四個(gè)框，每個(gè)框里加圖標(biāo)和標(biāo)題文本。再分兩個(gè)文字區(qū)，上區(qū)分左右不等兩塊，區(qū)分同等四塊）。（3）頁(yè)腳。

第8個(gè)首頁(yè)，網(wǎng)頁(yè)布局是（1）網(wǎng)頁(yè)頭部（上面是LOGO，下面是導(dǎo)航，放在方塊里）。（2）網(wǎng)頁(yè)主體（banner，上、中、下三個(gè)區(qū)。上區(qū)是標(biāo)語(yǔ)和按鈕，中區(qū)又均分為四個(gè)部分，分別是圖標(biāo)和文字，下區(qū)分左長(zhǎng)塊和右短塊，分別是標(biāo)題和文字）。（3）頁(yè)腳。

第9個(gè)首頁(yè)，網(wǎng)頁(yè)布局是（1）網(wǎng)頁(yè)頭部（背景框里放上矢量素材，上面是立體小矩形框，在小矩形框里放LOGO，右邊添加標(biāo)語(yǔ)文字；導(dǎo)航條，下方是背景條，條中放矢量素材，banner，中間是圓形畫面，兩邊是文字標(biāo)題和文字說(shuō)明，說(shuō)明下加矢量素材）。（2）網(wǎng)頁(yè)主體（左欄是文章，文章分上中下三個(gè)區(qū)。每個(gè)區(qū)的標(biāo)題下架矢量素材，文字說(shuō)明區(qū)右側(cè)加超鏈接；右欄是三個(gè)上中下排列的圖片區(qū)加圖片說(shuō)明）。（3）頁(yè)腳（版權(quán)信息，矢量圖片做底）。

通過(guò)分析首頁(yè)，了解網(wǎng)頁(yè)類型，網(wǎng)頁(yè)尺寸，網(wǎng)頁(yè)基本布局，網(wǎng)頁(yè)的基本元素如文字、按鈕等，了解產(chǎn)品圖像、BANNER、特效、游戲網(wǎng)頁(yè)界面、封面式布局在網(wǎng)頁(yè)上的應(yīng)用。

二、典型網(wǎng)站特點(diǎn)分析

接下來(lái)選取藝術(shù)網(wǎng)站、旅游網(wǎng)站、醫(yī)療保健網(wǎng)站、房地產(chǎn)網(wǎng)站、餐飲酒店網(wǎng)站、新聞網(wǎng)站、教育網(wǎng)站、美容化妝網(wǎng)站、IT數(shù)碼網(wǎng)站、童裝網(wǎng)站、食品網(wǎng)站等進(jìn)行分析。主要目的是了解網(wǎng)頁(yè)的素材特點(diǎn)和行業(yè)內(nèi)容?，F(xiàn)舉例如下：

（一）政府網(wǎng)站

陽(yáng)江市政府網(wǎng)站特點(diǎn)是：（1）合理清晰的網(wǎng)站導(dǎo)航，比如有網(wǎng)站首頁(yè)、走進(jìn)陽(yáng)江、信息公開、互動(dòng)交流、在線服務(wù)和數(shù)據(jù)開放6個(gè)主導(dǎo)航；（2）欄目科學(xué)明確，比如有陽(yáng)江要聞、部門資訊、縣區(qū)動(dòng)態(tài)、政聲傳遞、政府信息公開目錄、重點(diǎn)領(lǐng)域信息公開、公告公示、視頻新聞8個(gè)欄目；（3）配色特點(diǎn)以藍(lán)色為主，白色做背景，黑色文字，可讀性強(qiáng)，呈現(xiàn)的信息多。

（二）醫(yī)療保健網(wǎng)站

陽(yáng)江市人民醫(yī)院特點(diǎn)是：（1）主要展示醫(yī)院實(shí)力及亮點(diǎn)，比如國(guó)家級(jí)青年文明號(hào)；（2）充分體現(xiàn)服務(wù)性，比如有首頁(yè)、醫(yī)院概況、新聞中心醫(yī)院文化、特色醫(yī)療、就醫(yī)指南、信息公開、人力資源、求醫(yī)問藥、青年文明號(hào)、中醫(yī)部、聯(lián)系我們12個(gè)欄目；（3）配色特點(diǎn)禁忌過(guò)于沉重的色彩。

（三）新聞網(wǎng)站

中國(guó)首都網(wǎng)特點(diǎn)是：（1）合理清晰的網(wǎng)站導(dǎo)航，比如有北京、人事、法治、千龍?jiān)瓌?chuàng)、廉政、軍事、文化、教育、經(jīng)濟(jì)、國(guó)企、科技、住房、娛樂、體育、工商、汽車、旅游、質(zhì)監(jiān)、采訪、評(píng)論、圖像、視頻、兔爺動(dòng)漫、中國(guó)、國(guó)際、公益、冰雪、社區(qū)、拍客、FM、千龍圖表、中關(guān)村、智庫(kù)、English共34個(gè)主導(dǎo)航；（2）互動(dòng)性強(qiáng)，比如有京城新聞客戶端、千龍網(wǎng)微信、千龍網(wǎng)微博、微信號(hào)矩陣、手機(jī)千龍網(wǎng)5個(gè)應(yīng)用；（3）頁(yè)面超長(zhǎng)，可滾動(dòng)4到5屏；（4）時(shí)效性，比如有更多頭條、今日聚焦、一周要聞等專欄。

（四）教育網(wǎng)站

中國(guó)美術(shù)學(xué)院特點(diǎn)是：（1）藝術(shù)感強(qiáng)的BANNER，比如有輪播效果且畫面時(shí)尚唯美；（2）欄目分類明確，比如有國(guó)美日新、綜合資訊、兩學(xué)一做、學(xué)術(shù)預(yù)告、通知公告、教學(xué)科研、國(guó)美聚焦、國(guó)美校史、院長(zhǎng)講壇、院系導(dǎo)航10個(gè)欄目；（3）一級(jí)導(dǎo)航有首頁(yè)、學(xué)院、教學(xué)、研創(chuàng)、招生、師資、交流、院報(bào)8個(gè)；（4）內(nèi)容豐富，有34個(gè)二級(jí)導(dǎo)航。

三、網(wǎng)頁(yè)中新的設(shè)計(jì)趨勢(shì)

現(xiàn)代網(wǎng)站多采用扁平化風(fēng)格、立體風(fēng)格、復(fù)古風(fēng)格、卡通風(fēng)格等，在設(shè)計(jì)元素上多采用矢量圖標(biāo)、彩色鉛筆效果、照片人物轉(zhuǎn)手繪、彩色水墨、人物插畫等。

（1）矢量圖標(biāo)：傳智播客智能物聯(lián)網(wǎng)、藍(lán)橋杯、知網(wǎng)網(wǎng)頁(yè)這三個(gè)網(wǎng)站中，可見到大量的矢量圖標(biāo)。制作矢量圖標(biāo)主要用到鋼筆工具、形狀工具以及矢量繪制方法。

（2）彩色鉛筆：在陽(yáng)江職業(yè)技術(shù)學(xué)院網(wǎng)站主頁(yè)BANNER中可以見到，主要用到圖像調(diào)整，混合模式，濾鏡。

（3）照片人物轉(zhuǎn)手繪：主要用表面模糊濾鏡、涂抹工具以及鋼筆工具勾勒眉毛部分、下眼瞼和眼皮部分。

（4）彩色水墨：主要用到去色、色階和水彩濾鏡以及圖層混合模式。經(jīng)過(guò)這些內(nèi)容的挖掘，學(xué)生在界面設(shè)計(jì)的藝術(shù)美感上有很大提升，不僅能審美，還能自己創(chuàng)造美。這些新的設(shè)計(jì)思想和實(shí)踐過(guò)程充分體現(xiàn)在網(wǎng)頁(yè)界面的各個(gè)地方，比如導(dǎo)航、BANNER、主體部分、頁(yè)腳等。這些內(nèi)容可以對(duì)接UI界面設(shè)計(jì)和WEB前端崗位。

作者簡(jiǎn)介：楊玲（1979），女，土家族，湖南張家界人，本科，廣東工業(yè)大學(xué)工程碩士在職研究生，陽(yáng)江職業(yè)技術(shù)學(xué)院講師，主要研究方向：數(shù)字媒體等。