網(wǎng)站建設(shè)過程中有哪些細(xì)節(jié)設(shè)計(jì)需要大家注意呢?今天圭谷設(shè)計(jì)來為大家講解以下幾點(diǎn)內(nèi)容:
1.菜單、標(biāo)簽、按鈕、圖標(biāo)
目前,大部分網(wǎng)站還是以菜單、標(biāo)簽、按鈕、圖標(biāo)為主。菜單和標(biāo)簽形式常用作主導(dǎo)航,位置和功能比較顯眼;圖標(biāo)常常為一組風(fēng)格統(tǒng)一、寓意明確的圖形,或與文字鏈接組合使用,增強(qiáng)客戶的理解力。按鈕作為某個(gè)任務(wù)動(dòng)作或鏈接形式,運(yùn)用靈活。
我們從日常生活中認(rèn)識(shí)到,按鈕是凸起的,按下后變矮,按鈕的投影也變短,在制作圖像按鈕時(shí)會(huì)模擬這種體驗(yàn)。首先,通過漸變、投影等效果使圖像按鈕有凸起的立體感,看上去是可以被點(diǎn)擊的;其次,設(shè)計(jì)當(dāng)光標(biāo)滑入按鈕時(shí),按鈕的顏色或者其上文字的顏色變化;然后,當(dāng)單擊按鈕后,要設(shè)計(jì)按鈕被按下的狀態(tài)。
按鈕的視覺隱喻多采用投影、高光、漸變等手法模擬真實(shí)的視覺效果,如此復(fù)雜的設(shè)計(jì)對(duì)各種設(shè)備的適應(yīng)性不是很好,在細(xì)節(jié)上需要分別對(duì)這些設(shè)備進(jìn)行微調(diào)。相對(duì)而言,扁平化設(shè)計(jì)具有更好的適應(yīng)性。然而,不可否認(rèn)的是,對(duì)于老年、幼年或其他對(duì)交互設(shè)備不夠熟悉的客戶,或者強(qiáng)調(diào)使用效率的應(yīng)用,采用良好的視覺隱喻的設(shè)計(jì)比過于簡(jiǎn)潔的扁平化設(shè)計(jì)具有更強(qiáng)的易用性。
在網(wǎng)站導(dǎo)航的視覺設(shè)計(jì)上,同類導(dǎo)航按鈕或標(biāo)簽的設(shè)計(jì)風(fēng)格、比例應(yīng)保持一致性。而特別推薦的商品或新聞,則需要在顏色或動(dòng)態(tài)效果上做特殊處理,引起瀏覽者的關(guān)注。
所以,信息構(gòu)建要分層次,并進(jìn)行合理的組織設(shè)計(jì)。如果濫用設(shè)計(jì)理論和技術(shù),網(wǎng)站頁面中到處是視線跳躍點(diǎn),就會(huì)造成瀏覽者視覺疲勞、心情煩躁。
2.文字和數(shù)字
除了菜單、標(biāo)簽、按鈕、圖標(biāo)以外,導(dǎo)航還常以文字或數(shù)字的形式出現(xiàn),或者在傳統(tǒng)菜單、標(biāo)簽、按鈕、圖標(biāo)之中以文字或數(shù)字為主要視覺元素。這樣的導(dǎo)航,風(fēng)格簡(jiǎn)潔、意義明確。
3.網(wǎng)頁空間感
顯示器是網(wǎng)站的顯示終端,顯示器的大小是有限的。網(wǎng)站設(shè)計(jì)師如何通過精心的設(shè)計(jì)來擴(kuò)展界面顯示的空間感呢?利用Flash、Ajax等技術(shù),可以制作出靈活、流動(dòng)的空間。
一般來講,網(wǎng)站設(shè)計(jì)師會(huì)把最重要的內(nèi)容顯示在網(wǎng)站第一屏,但是,對(duì)于現(xiàn)如今每個(gè)企業(yè)都希望自己的網(wǎng)站量身定制的,比如企業(yè)品牌網(wǎng)站建設(shè)、產(chǎn)品專業(yè)化較強(qiáng)的展示網(wǎng)站。有的網(wǎng)站利用瀏覽器的滾動(dòng)條來顯示水平或垂直排列的多屏信息;有的網(wǎng)站界面有自己的導(dǎo)航菜單,但信息布置在同一個(gè)頁面之中,當(dāng)客戶選擇不同的菜單項(xiàng),界面會(huì)單向或者多向滑動(dòng)顯示相關(guān)信息;有的網(wǎng)站把相似信息布置在一個(gè)屏幕內(nèi),不同的信息內(nèi)容分屏幕布局設(shè)計(jì)。
4.最小化或無導(dǎo)航
網(wǎng)站導(dǎo)航幾乎滲透網(wǎng)站之中的所有頁面,但是對(duì)于網(wǎng)站結(jié)構(gòu)深層的詳細(xì)頁面,以新開頁面建立的頁面以及彈出式的單獨(dú)廣告頁面則不一定設(shè)置主導(dǎo)航,客戶可以關(guān)閉此頁面,點(diǎn)擊返回按鈕回到登陸此頁面之前的網(wǎng)頁,或者通過簡(jiǎn)化版的導(dǎo)航菜單跳轉(zhuǎn)到其他頁面。
5.圖像導(dǎo)航
圖像導(dǎo)航提供形象化的視覺信息,比文字導(dǎo)航更容易被識(shí)別和理解。圖像導(dǎo)航可以增強(qiáng)信息的故事性,使客戶在興趣中接收信息,一般來說,圖像導(dǎo)航的響應(yīng)交互的區(qū)域更大,方便點(diǎn)擊。圖像導(dǎo)航同時(shí)配有文字導(dǎo)航,使客戶明確圖像的意義和導(dǎo)航欄目。
6.模擬紙制品
互聯(lián)網(wǎng)不過幾十年,但印刷品可謂歷史悠久了。人們?cè)缫咽熘∷⑵返拈喿x方式了,并執(zhí)著地把它沿襲到網(wǎng)站設(shè)計(jì)上。利用隱喻,將人們對(duì)傳統(tǒng)印刷品的認(rèn)知經(jīng)驗(yàn)運(yùn)用到與網(wǎng)絡(luò)產(chǎn)品的交互過程中。
例:紐約時(shí)報(bào)網(wǎng)站,以信息發(fā)布為主要目的。網(wǎng)站建設(shè)風(fēng)格與報(bào)紙接近,標(biāo)志的位置居中,文字信息分六欄。與報(bào)紙頭版不同的是,網(wǎng)站主頁設(shè)有導(dǎo)航、搜索框、廣告等內(nèi)容。網(wǎng)站中的文章顯示有鏈接的標(biāo)題和主要內(nèi)容,不必像報(bào)紙一樣一次性顯示全部?jī)?nèi)容,單擊鏈接后進(jìn)入更詳細(xì)的新聞解讀。
7.網(wǎng)站引導(dǎo)頁
有些網(wǎng)站打開后直接進(jìn)入首頁或第一個(gè)欄目頁面,而有的網(wǎng)站登錄后首先看到的是網(wǎng)站引導(dǎo)頁。引導(dǎo)頁以網(wǎng)站視覺識(shí)別系統(tǒng)或網(wǎng)站風(fēng)格的圖形元素組成,集中呈現(xiàn)網(wǎng)站所有者希望帶給客戶的第一印象。
8.網(wǎng)站第一屏
第一屏也稱網(wǎng)站的可見區(qū)域,是指網(wǎng)站上不需要拉動(dòng)滾動(dòng)條就能看到的區(qū)域。而折疊位置是指網(wǎng)站在屏幕上可見區(qū)域的下方位置,折疊位置取決于客戶的屏幕大小。既然第一屏是不需要滑動(dòng)滾動(dòng)條就能看到的區(qū)域,點(diǎn)擊量相對(duì)較高。網(wǎng)站的主導(dǎo)航一般位于網(wǎng)站頁面的頂部或左側(cè),即便位于頁面底部的主導(dǎo)航也會(huì)顯示在第一屏,在內(nèi)容較多的網(wǎng)站首頁上幾乎不會(huì)把主導(dǎo)航設(shè)置在頁面底部。重要信息一般也會(huì)在第一屏顯示出來,同時(shí),在第一屏出現(xiàn)的廣告位價(jià)格也會(huì)較高。
Copyright All Rights GreatGoal Design co.,ltd. 魯ICP備16002128號(hào)-3