摘要:在網頁界面設計的教學中,一般是先落實布局和配色的知識,然后分析常見類型網頁。本文在保留網頁界面設計基本內容的基礎上嘗試挖掘出新內容。由于以文字,按鈕、圖像和動畫為主要形式的網頁界面設計逐漸變得沒有新意,而現在普遍看到的網頁和以往相差較大,比如網頁的風格主要出現了扁平化風格、手繪風格、立體風格、紋理和質感風格超、現實主義風格等;表現形式有圖標、仿手繪、鼠繪、非主流、編程動畫等。
關鍵詞:分析首頁;網頁特點;新的美學觀和設計趨勢
一、首頁分析和設計
選取并整理出具有代表性的首頁,這些首頁涵蓋游戲、活動專題、產品展示、電子商務等類型。如:
第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),女,土家族,湖南張家界人,本科,廣東工業大學工程碩士在職研究生,陽江職業技術學院講師,主要研究方向:數字媒體等。