design網(wǎng)站設(shè)計 |
design frontier設(shè)計前沿當(dāng)前位置:首頁>主要服務(wù)>網(wǎng)站設(shè)計>設(shè)計前沿【經(jīng)驗】淺談用戶體驗簡單就是美 給用戶最想看的
很多網(wǎng)頁設(shè)計師一開始都會陷入這樣一個誤區(qū)——在頁面中加入很多元素和修飾,同時加入很多的Javascript代碼、flash效果等,把“好看的”都擺上去,以求頁面“華麗無比”。殊不知這樣的頁面帶給用戶的只會是眼花繚亂的感覺,反而找不到想要看的內(nèi)容。根據(jù)相關(guān)統(tǒng)計顯示,如果用戶第一次訪問某一個頁面,在3~10秒內(nèi)找不到自己感興趣的內(nèi)容,那么他就會毫不猶豫地選擇離開這個頁面。
留住用戶,第一印象自然要好,就目前網(wǎng)頁發(fā)展的趨勢而言,“簡單”的設(shè)計風(fēng)格更符合主流,因此頁面中的修飾元素和樣式都不宜過多,同時樣式要盡量保持統(tǒng)一或接近,以文字顏色、字體等不超過3種為宜,以避免造成頁面混亂的感覺。這一點在一些公司的形象網(wǎng)站或企業(yè)網(wǎng)站當(dāng)中尤為明顯——頁面主要以網(wǎng)站導(dǎo)航、形象(產(chǎn)品)宣傳Banner和公司業(yè)務(wù)為主。例如聯(lián)想中國網(wǎng)站、Dell公司網(wǎng)站等。
結(jié)構(gòu)要主流 給用戶最習(xí)慣的
除了頁面的表現(xiàn)形式,設(shè)計網(wǎng)頁時還要保證最重要的內(nèi)容占據(jù)頁面當(dāng)中最顯眼的位置。通過對用戶瀏覽網(wǎng)頁習(xí)慣的調(diào)查,一個頁面當(dāng)中最顯眼的位置以字母“F”形分布(下圖),這也是用戶瀏覽頁面的順序:首先,用戶會以從左至右的方式看頁面最上方,然后是從上至下瀏覽頁面的左側(cè)部分,接著是根據(jù)左側(cè)內(nèi)容瀏覽右側(cè)部分。雖然具體情況不盡相同,但大體如此,因此這也是網(wǎng)頁設(shè)計師安排頁面內(nèi)容的一個重要依據(jù)。
一般情況下,網(wǎng)站頁面結(jié)構(gòu)可簡單分為三部分:頭部、主體和頁腳。頭部和頁腳在一個網(wǎng)站當(dāng)中的樣式基本是固定的,不同的頁面不會有太大區(qū)別,特別是頁腳,因為主要放置網(wǎng)站信息和聯(lián)系方式等,因此幾乎是一樣的。而頭部當(dāng)中可能包含一些形象廣告,所以不同頁面可能稍有不同。
如同上文所述,根據(jù)用戶的瀏覽習(xí)慣和網(wǎng)站設(shè)計的基本風(fēng)格,一般情況下頁面的頭部用來放置網(wǎng)站導(dǎo)航和形象(廣告)Banner,左側(cè)以小字體放置二級導(dǎo)航和輔助功能導(dǎo)航,主體部分以稍微大一點的字體放置網(wǎng)站主要內(nèi)容。這樣是最符合用戶瀏覽習(xí)慣的頁面形式。此外,如果主體部分采用左中右結(jié)構(gòu),右側(cè)也應(yīng)以輔助補充和廣告內(nèi)容為主。
搭配要合理 給用戶最便捷的
既然一個網(wǎng)站頁面的基本樣式和內(nèi)容都是固定的,那網(wǎng)頁設(shè)計師還能怎樣發(fā)揮自己的創(chuàng)意進行設(shè)計呢?首先需要說明的是,我們這里為大家講解的主要是傳統(tǒng)網(wǎng)站的設(shè)計,也是最常見的網(wǎng)站設(shè)計,如公司形象網(wǎng)站、企業(yè)網(wǎng)站或其他行業(yè)網(wǎng)站等的設(shè)計,而不包括一些個性化的網(wǎng)站設(shè)計,因為個性化網(wǎng)站的設(shè)計需要達到的效果就是與眾不同,因此并無任何規(guī)律可言。
在傳統(tǒng)網(wǎng)站設(shè)計過程中,既然頁面的基本框架和內(nèi)容都已經(jīng)確定,如何能夠在這個框架內(nèi)讓網(wǎng)站頁面在清爽的同時又可以展現(xiàn)更多內(nèi)容,就需要網(wǎng)頁設(shè)計師了解網(wǎng)頁制作技術(shù),通過技術(shù)手段豐富頁面內(nèi)容和樣式。
以最為常用的標簽功能為例(標簽功能是指將頁面當(dāng)中不同分類的內(nèi)容以標簽的形式歸類,用戶點擊相應(yīng)標簽就可以查看相應(yīng)標簽中的內(nèi)容),國內(nèi)主要的門戶網(wǎng)站新浪和網(wǎng)易,如果不采用標簽功能,全部內(nèi)容采用平鋪的方式,那么頁面無疑將非常冗長,而采用標簽功能,既保證了主要內(nèi)容都在最主要的位置展現(xiàn),又保證了給用戶提供最感興趣的內(nèi)容,另提供了更多選擇,讓用戶可以選擇查看可能感興趣的內(nèi)容。可以說,同樣的頁面,是否采用標簽功能將有完全不同的效果。
除了標簽功能,還有很多其他技術(shù)手法,例如層功能(層功能多用于鼠標懸浮操作,通過鼠標懸浮將隱藏的層展示出來,以實現(xiàn)在有限的范圍內(nèi)展示更多的內(nèi)容,如淘寶網(wǎng)的二級導(dǎo)航)等。
可見,只有網(wǎng)頁設(shè)計師了解這些技術(shù)才有可能在設(shè)計時將這些技術(shù)融會貫通并付諸實踐,從而豐富頁面展現(xiàn)形式,充分利用頁面空間,在有限的區(qū)域內(nèi)展示更多的內(nèi)容。而這些技術(shù)也都是以服務(wù)用戶為綱,以“不給用戶添麻煩”為準。
規(guī)范是王道 給后期維護減負
上文我們主要說了一些網(wǎng)頁設(shè)計上的總體思路,也是“大方向”,下面我們說一下網(wǎng)頁設(shè)計師需要注意的工作細節(jié),這里就以網(wǎng)頁制作時的HTML代碼和CSS樣式表為例。我們都知道,雖然一個網(wǎng)站的設(shè)計方案通過Photoshop設(shè)計出樣式圖之后再進行頁面制作工作一般不會出現(xiàn)返工的問題,但修改是不可避免的,包括網(wǎng)站在運行了一段時間之后根據(jù)實際情況進行修改也是非常常見的,這就要求我們在前期制作頁面的時候打好基礎(chǔ),為后期的修改維護做好準備。
規(guī)范格式 源碼查看更方便
很多網(wǎng)頁設(shè)計師在進行頁面制作的時候只是在可視化環(huán)境當(dāng)中編輯(這是萬萬不可的,如果設(shè)計師不能駕馭純源碼模式,那么他就一定不是一名合格的網(wǎng)頁設(shè)計師),這就很容易產(chǎn)生冗余代碼,從而使源碼混亂。而源碼混亂,一方面會影響頁面的執(zhí)行效率,另外一方面也會在后期修改的時候產(chǎn)生莫名其妙的問題。因此規(guī)范源碼格式,可以有效減少后期修改的工作量,提高工作效率。
不要懶惰 關(guān)鍵點加上注釋
除了規(guī)范源碼的格式,制作網(wǎng)頁時在HTML源碼當(dāng)中加入必要的注釋是非常重要的!因為注釋可以為我們后期的修改提供重要的參考信息,例如一段代碼的功能說明、一個區(qū)域的開始或結(jié)尾等等。這樣在后期修改的時候就可以實現(xiàn)不需要再次查看源碼來區(qū)分,只要根據(jù)注釋針對特定區(qū)域進行修改或替換即可,從而大大降低后期修改維護的難度。
本文由 沈陽網(wǎng)站設(shè)計公司-沈陽易勢科技提供,沈陽易勢科技擁有專業(yè)設(shè)計團隊為企業(yè)提供網(wǎng)頁設(shè)計、網(wǎng)絡(luò)平臺開發(fā)服務(wù)。
2
|
我們可以不賺錢,也一定要將網(wǎng)站設(shè)計好!這就是易勢網(wǎng)站設(shè)計師存在于沈陽網(wǎng)站設(shè)計行業(yè)的意義!
網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)
沈陽易勢科技有限公司 網(wǎng)站制作網(wǎng)絡(luò)營銷公司 © 2011 , All rights reserved. 公司地址:沈陽市鐵西區(qū)貴和街道建設(shè)中路15號淺草綠閣商務(wù)樓402室
遼B2-20150173-8號