基于WEB崗位的網頁界面設計新教學內容探索

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

關鍵詞：分析首頁；網頁特點；新的美學觀和設計趨勢

一、首頁分析和設計

選取并整理出具有代表性的首頁，這些首頁涵蓋游戲、活動專題、產品展示、電子商務等類型。如：

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

第7個首頁，尺寸是1200像素*1172像素，主題是產品展示；主要有綠黃藍灰橙色；

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

第1個首頁，網頁布局是（1）網頁頭部（網站標題、廣告語、logo、公司簡介）；（2）導航（主導航、二級導航、主題圖標和文字說明）；（3）網站主要內容（主題主要內容、圖片以及主題的尾部內容）；（4）網頁底部（標題、LOGO、版權信息）。

第6個首頁，網頁布局是（1）網頁頭部（LOGO，導航，某個菜單下的左側文字區和右側幻燈片區）。（2）網頁主體（四個框，每個框里加圖標和標題文本。再分兩個文字區，上區分左右不等兩塊，區分同等四塊）。（3）頁腳。

第8個首頁，網頁布局是（1）網頁頭部（上面是LOGO，下面是導航，放在方塊里）。（2）網頁主體（banner，上、中、下三個區。上區是標語和按鈕，中區又均分為四個部分，分別是圖標和文字，下區分左長塊和右短塊，分別是標題和文字）。（3）頁腳。

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

通過分析首頁，了解網頁類型，網頁尺寸，網頁基本布局，網頁的基本元素如文字、按鈕等，了解產品圖像、BANNER、特效、游戲網頁界面、封面式布局在網頁上的應用。

二、典型網站特點分析

接下來選取藝術網站、旅游網站、醫療保健網站、房地產網站、餐飲酒店網站、新聞網站、教育網站、美容化妝網站、IT數碼網站、童裝網站、食品網站等進行分析。主要目的是了解網頁的素材特點和行業內容。現舉例如下：

（一）政府網站

陽江市政府網站特點是：（1）合理清晰的網站導航，比如有網站首頁、走進陽江、信息公開、互動交流、在線服務和數據開放6個主導航；（2）欄目科學明確，比如有陽江要聞、部門資訊、縣區動態、政聲傳遞、政府信息公開目錄、重點領域信息公開、公告公示、視頻新聞8個欄目；（3）配色特點以藍色為主，白色做背景，黑色文字，可讀性強，呈現的信息多。

（二）醫療保健網站

陽江市人民醫院特點是：（1）主要展示醫院實力及亮點，比如國家級青年文明號；（2）充分體現服務性，比如有首頁、醫院概況、新聞中心醫院文化、特色醫療、就醫指南、信息公開、人力資源、求醫問藥、青年文明號、中醫部、聯系我們12個欄目；（3）配色特點禁忌過于沉重的色彩。

（三）新聞網站

中國首都網特點是：（1）合理清晰的網站導航，比如有北京、人事、法治、千龍原創、廉政、軍事、文化、教育、經濟、國企、科技、住房、娛樂、體育、工商、汽車、旅游、質監、采訪、評論、圖像、視頻、兔爺動漫、中國、國際、公益、冰雪、社區、拍客、FM、千龍圖表、中關村、智庫、English共34個主導航；（2）互動性強，比如有京城新聞客戶端、千龍網微信、千龍網微博、微信號矩陣、手機千龍網5個應用；（3）頁面超長，可滾動4到5屏；（4）時效性，比如有更多頭條、今日聚焦、一周要聞等專欄。

（四）教育網站

中國美術學院特點是：（1）藝術感強的BANNER，比如有輪播效果且畫面時尚唯美；（2）欄目分類明確，比如有國美日新、綜合資訊、兩學一做、學術預告、通知公告、教學科研、國美聚焦、國美校史、院長講壇、院系導航10個欄目；（3）一級導航有首頁、學院、教學、研創、招生、師資、交流、院報8個；（4）內容豐富，有34個二級導航。

三、網頁中新的設計趨勢

現代網站多采用扁平化風格、立體風格、復古風格、卡通風格等，在設計元素上多采用矢量圖標、彩色鉛筆效果、照片人物轉手繪、彩色水墨、人物插畫等。

（1）矢量圖標：傳智播客智能物聯網、藍橋杯、知網網頁這三個網站中，可見到大量的矢量圖標。制作矢量圖標主要用到鋼筆工具、形狀工具以及矢量繪制方法。

（2）彩色鉛筆：在陽江職業技術學院網站主頁BANNER中可以見到，主要用到圖像調整，混合模式，濾鏡。

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

（4）彩色水墨：主要用到去色、色階和水彩濾鏡以及圖層混合模式。經過這些內容的挖掘，學生在界面設計的藝術美感上有很大提升，不僅能審美，還能自己創造美。這些新的設計思想和實踐過程充分體現在網頁界面的各個地方，比如導航、BANNER、主體部分、頁腳等。這些內容可以對接UI界面設計和WEB前端崗位。

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