網(wǎng)站界面設(shè)計研究

馬亮

摘要：網(wǎng)站應(yīng)用是互聯(lián)網(wǎng)最重要的應(yīng)用之一，它的出現(xiàn)讓信息的遠(yuǎn)距離展示和交互變得極其容易，并且實時；現(xiàn)在，網(wǎng)站系統(tǒng)也是很多電子商務(wù)系統(tǒng)的重要載體。由于網(wǎng)站具有這么重要的作用，進(jìn)而導(dǎo)致網(wǎng)站的界面設(shè)計尤其重要，良好的界面設(shè)計不僅能讓人產(chǎn)生美感，也會引導(dǎo)用戶快速完成功能任務(wù)。該文對網(wǎng)站的界面設(shè)計進(jìn)行了初步的研究。

關(guān)鍵詞：網(wǎng)站設(shè)計；網(wǎng)站界面設(shè)計；界面設(shè)計；設(shè)計

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2015）035-0046-02

Abstract：Web application is one of the most important applications of the Internet，its appearance makes it extremely easy to display and interact with information，And real time.Now，Website system is also an important carrier of many electronic commerce system. Because the site has such an important role， and then lead to the interface design of the site is particularly important， good interface design can not only make people produce beauty， but also guide the user to complete the functional tasks quickly. This paper makes a preliminary research on the interface design of the website.

Key words：Website design； website interface design； interface design；design

1 概述

互聯(lián)網(wǎng)由美國國防部高級研究計劃管理局最先研發(fā)。網(wǎng)站是互聯(lián)網(wǎng)中最流行的應(yīng)用之一，其是基于B/S架構(gòu)的程序，由客戶端技術(shù)（html、js、css等）與服務(wù)端技術(shù)（jsp、asp.net、php等）共同協(xié)作完成功能。網(wǎng)站是一種個人或組織機(jī)構(gòu)向外界展示信息，或者與外面互相溝通的極佳的手段。個人或組織可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。人們可以通過域名，訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。

通過域名訪問網(wǎng)站，最終展示在用戶面前的是一個可視化的界面，人們通過這個可視化的界面中的文字、圖片、視頻等多媒體元素接收信息。所以這些可視化元素如何組織才能讓用戶更容易更直接更醒目的接受信息，并且能讓用戶在瀏覽網(wǎng)站中感受到網(wǎng)站界面設(shè)計的美，將是網(wǎng)站建設(shè)中一個非常重要的一個環(huán)節(jié)。

2 設(shè)計研究

用戶界面（英文，User Interface；簡稱UI）。用戶界面設(shè)計是指對軟件的操作邏輯、交互方式、界面美觀的整體設(shè)計。好的用戶界面設(shè)計會讓軟件的使用變得自由、簡單、舒適，充分體現(xiàn)軟件的定位和特點，變得有品味有個性。很顯然，網(wǎng)站界面設(shè)計是用戶界面設(shè)計的一部分，網(wǎng)站界面設(shè)計必須遵守一般界面設(shè)計的原則，但網(wǎng)站界面設(shè)計由于其具有自身的特殊性，也必然有一定的設(shè)計理念的不同。通過對界面設(shè)計不同需求進(jìn)行的分類，以及界面設(shè)計元素對用戶行為的影響，來研究用戶在界面設(shè)計中所體現(xiàn)的重要性。

設(shè)計是為了滿足可用性及審美需求，全面的了解用戶特征及多元化要求是十分必要的。交互已經(jīng)成為網(wǎng)站界面設(shè)計中重要的環(huán)節(jié)和側(cè)重點。界面是物體與人互動的媒介，界面設(shè)計可以作如下分類：

1）以環(huán)境為主導(dǎo)的設(shè)計。環(huán)境對設(shè)計主題的內(nèi)容傳遞有著重要的影響，設(shè)計主題無法脫離環(huán)境而存在，因此注重界面的環(huán)境表達(dá)是不能忽略的設(shè)計元素；2）以感情傳達(dá)為側(cè)重的設(shè)計。這是設(shè)計界面非常重要的一面，通過設(shè)計的界面向使用者進(jìn)行情感傳達(dá)，使用者在接觸作品時，產(chǎn)生情感共鳴共振，反應(yīng)出使用者和設(shè)計主題間的情感關(guān)系；3）以實現(xiàn)功能為目標(biāo)的設(shè)計。界面設(shè)計最基本的原則是實現(xiàn)功能性，通過設(shè)計界面，讓用戶明白功能及操作流程，將設(shè)計主題本身的功能信息明確地傳遞給用戶，使用者是界面存在的核心坐標(biāo)和基礎(chǔ)。由于用戶的文化水平、文化背景與知識結(jié)構(gòu)具有很大差異，促使設(shè)計者在進(jìn)行界面設(shè)計時應(yīng)以國際化通用的設(shè)計元素為主體，避免過度的使用標(biāo)新立異的設(shè)計元素。

由上述界面設(shè)計的一般規(guī)則，我們把討論的范圍縮小到基于網(wǎng)站的界面設(shè)計，首先對于網(wǎng)站UI的設(shè)計也可以綜合考慮上述三大設(shè)計的分類和設(shè)計側(cè)重；但由于網(wǎng)站是一種動態(tài)的信息呈見方式，它既可以提供多媒體信息的展示，又可以通過javascript和服務(wù)端技術(shù)對用戶需求進(jìn)行動態(tài)響應(yīng)、實時反饋，而正是這些網(wǎng)站多媒體信息的特性和實時的響應(yīng)交互是其它平面媒體所不具備的，這就要求網(wǎng)站界面設(shè)計者不僅要考慮靜態(tài)的界面設(shè)計元素，還要考慮實時響應(yīng)時的界面設(shè)計和溝通方式，可以說網(wǎng)站界面設(shè)計的責(zé)任非常重大，他所設(shè)計的界面不僅會影響到用戶的審美，而且會嚴(yán)重影響到網(wǎng)站交互的友好性、易用性、功能性。

由于互聯(lián)網(wǎng)技術(shù)的迅猛發(fā)展，計算機(jī)軟硬件技術(shù)、有線無線網(wǎng)速、智能手機(jī)近年來都有了飛速的進(jìn)步，近而導(dǎo)致基于互聯(lián)網(wǎng)的web應(yīng)用中多媒體的使用、交互的豐富性都幾乎達(dá)到了極其自由的程度，可以說為了達(dá)到網(wǎng)站功能和審美效果，能自由運(yùn)用絕大部分多媒體素材及交互方式的時代幾乎已經(jīng)來臨，這也導(dǎo)致現(xiàn)在網(wǎng)站出現(xiàn)了如下的特點：1）多媒體元素在網(wǎng)站上的大量使用，視頻、圖片在很多網(wǎng)站中占了相當(dāng)大的比例，而且這些視頻和圖片很多已經(jīng)采用較高清晰度和分辨，當(dāng)然為手機(jī)開發(fā)的網(wǎng)站會對圖片和視頻進(jìn)一步的優(yōu)化，以免過度耗費(fèi)用戶的流量；2）基于客戶端腳本與服務(wù)端技術(shù)支持的實時交互；3）大量js腳本和css驅(qū)動的動畫效果，動畫效果已經(jīng)可以與flash動畫媲美；4）由于flash的安全性以及難以支持搜索，flash動畫已經(jīng)不再作為網(wǎng)站動畫展示形式，除了有些廣告展示需要外，已經(jīng)漸漸被js腳本、CSS3、html5取代。

但是無論網(wǎng)站制作技術(shù)、計算機(jī)軟硬件如何發(fā)展，由于網(wǎng)站本身展示的特殊性，進(jìn)而導(dǎo)致為其進(jìn)行界面設(shè)計有自身的規(guī)律可遵循，由于網(wǎng)站的功能和界面設(shè)計有更緊密的聯(lián)系，界面設(shè)計本身就傳達(dá)了很多功能，對用戶的使用體驗有著極其重要的作用，所以必須慎重的進(jìn)行設(shè)計。一個網(wǎng)站的界面設(shè)計，一般要按照如下的順序執(zhí)行：1）和用戶溝通，了解用戶對網(wǎng)站功能的需求；了解用戶對網(wǎng)站界面顏色布局的偏好；2）使用專業(yè)設(shè)計軟件（如photoshop）設(shè)計網(wǎng)站效果圖；3）將網(wǎng)站效果圖交給用戶，根據(jù)用戶，進(jìn)行溝通修改；4）定稿。

無論設(shè)計任何類型的網(wǎng)站，有一些基本的設(shè)計原則是一定要遵守的：

1）網(wǎng)站導(dǎo)航清晰。一個網(wǎng)站最終是要給用戶瀏覽并使用，如果網(wǎng)站的導(dǎo)航不清晰，意味著用戶不能流暢地使用網(wǎng)站提供的功能，進(jìn)而不能很好完成建設(shè)網(wǎng)站的初衷，導(dǎo)航清晰一定是網(wǎng)站界面設(shè)計首要考慮的因素，不能本末倒置、因噎廢食，有的網(wǎng)站為了追求可視化效果，導(dǎo)致整個網(wǎng)站過于不同尋常，用戶找不到網(wǎng)站提供的功能，最終導(dǎo)致用戶厭煩，進(jìn)而棄用網(wǎng)站。

2）根據(jù)網(wǎng)站類型不同選擇不同的設(shè)計風(fēng)格。網(wǎng)站可以有如下不完全分類：新聞門戶類，品牌宣傳類，政府學(xué)校事業(yè)單位門戶類，企業(yè)門戶類，辦公類，在線電子商務(wù)類等等。上述這些網(wǎng)站由于功能定位不同，導(dǎo)致界面設(shè)計和交互會有所不同，如是新聞門戶類網(wǎng)站由于是基于內(nèi)容的網(wǎng)站，主要是向用戶推介內(nèi)容，所以這種網(wǎng)站并不要求過于炫麗的效果，過于炫麗的設(shè)計效果不僅分散用戶的注意力，也會影響有效內(nèi)容的展示，此種網(wǎng)站以結(jié)構(gòu)嚴(yán)謹(jǐn)為主，所有內(nèi)容版塊均明顯的展示于網(wǎng)頁上；而政府學(xué)校事業(yè)單位門戶類網(wǎng)站和新聞門戶類網(wǎng)站有些類似，更傾向于內(nèi)容展示，但與新聞門戶類網(wǎng)站又有所不同，政府學(xué)校事業(yè)單位門戶類網(wǎng)站不僅有內(nèi)容展示的作用，但往往也有對本單位進(jìn)行宣傳的需要，所以這種類型的網(wǎng)站往往在界面設(shè)計中既注重內(nèi)容的展示，也注重通過網(wǎng)站的界面設(shè)計向外界展示自己組織機(jī)構(gòu)的文化和理念；企業(yè)門戶網(wǎng)站，由于具有產(chǎn)品推介的功能，往往也是功能和宣傳的統(tǒng)一的界面設(shè)計；品牌宣傳類網(wǎng)站往往以大圖和視頻為主，界面設(shè)計和交互往往比較新穎；而辦公類網(wǎng)站基本上是最保持的網(wǎng)站，一般比較嚴(yán)謹(jǐn)和低調(diào)，界面設(shè)計以實用易用為主，內(nèi)容為王，但良好的配色及良好的交互也可以是其的亮點；在線電子商網(wǎng)站傾向于在導(dǎo)航清楚的情況下，運(yùn)用大圖吸引用戶的眼球，一般會提供極其方便的交互方式。

3）遵守多年形成的網(wǎng)站界面操作文化、規(guī)范和潛規(guī)則，在交互和導(dǎo)航方面進(jìn)行創(chuàng)新，一定要考慮到用戶的接受能力。設(shè)計網(wǎng)站的界面和交互效果，一定要遵守已經(jīng)形成的計算機(jī)文化和大家共同遵守的使用特征，比如大家都知道ctrl+c是復(fù)制而ctrl+v是粘貼，這種計算機(jī)文化和操作習(xí)慣，不宜改變。網(wǎng)站的頂部一般會有異航菜單，主要的功能分類也會在用戶打開首頁的時候，在網(wǎng)站首頁的上半部分給出。

除去上述多年來形成和共同遵守的網(wǎng)站界面設(shè)計規(guī)范外，網(wǎng)站界面的設(shè)計也在跟隨世界設(shè)計潮流而發(fā)展，出現(xiàn)了如下的新的設(shè)計特點：

1）垂直滑屏。垂直滑屏相當(dāng)于一個幻燈片將它全屏化，并且以垂直滑動動畫形式展示出來，這對于訪客來說是個新鮮友好的瀏覽體驗。特別適用于產(chǎn)品描述、情景營銷的單頁面網(wǎng)站；2）卡片式。像卡片、瓷磚的排版設(shè)計在2016會繼續(xù)流行，Pinterest是這種設(shè)計潮流的領(lǐng)導(dǎo)者，我們將看到更多博客和電子商務(wù)網(wǎng)站使用這具設(shè)計技術(shù)；3）固定塊（Fixed Blocks）。固定塊像css 的fixed屬性，我們常見有導(dǎo)航菜單用這個技術(shù)，而在2014年，有些網(wǎng)頁上一些小部件也使用這個技術(shù)，但多用于邊欄上的內(nèi)容；4）自然攝影。在2015年已有很多網(wǎng)站使用高品質(zhì)的照片作為設(shè)計元素，優(yōu)秀的照片視覺是非常有吸引力的，所以2016將會繼續(xù)這個趨勢走下去。而這趨勢特別適用于全屏網(wǎng)頁設(shè)計；5）獨(dú)特的導(dǎo)航菜單。網(wǎng)站導(dǎo)航不再那么死板，將出現(xiàn)更多創(chuàng)意的方案，向下滑動、向上滑動、彈出、動態(tài)動畫、二次信息展示等有助于創(chuàng)造令人難忘的瀏覽體驗；6）單色網(wǎng)站。網(wǎng)站設(shè)計元素的背景、文本顏色、圖像等都使用同一色系，這樣的單色網(wǎng)頁也許會更有吸引力，并讓訪客對你的品牌網(wǎng)站有著深刻的印象；7）視頻背景網(wǎng)站。通過加入視頻背景到網(wǎng)站上，在視覺上比純圖像更有吸引力，2015年已經(jīng)有不少這樣案例，相信明年會繼續(xù)增加。

3 結(jié)束語

網(wǎng)站的設(shè)計潮流既追隨整個設(shè)計界的風(fēng)向，又有自己的特點，這兩者的結(jié)合讓網(wǎng)站的設(shè)計越來越人性化、互動的親和性越來越強(qiáng)。無論設(shè)計的潮流如何變遷，所有的設(shè)計應(yīng)該以人為中心，從審美和功能兩方面綜合考慮。既能給用戶清晰的導(dǎo)航和功能提示，又能帶來美感和良好的交互體驗的網(wǎng)站，才是優(yōu)質(zhì)網(wǎng)站。

參考文獻(xiàn)：

[1] 閆寶華，葉根軍.淺談網(wǎng)站界面設(shè)計中的設(shè)計原則[J].中國新技術(shù)產(chǎn)品，2011（4）.

[2] 洪陽.電子商務(wù)網(wǎng)站界面的視覺設(shè)計及信息傳達(dá)研究[D]. 合肥：合肥工業(yè)大學(xué)，2014.

[3] 牛曉銳.網(wǎng)頁界面設(shè)計中視覺體驗的研究[D]. 上海：上海師范大學(xué)，2013.