網(wǎng)頁美工導(dǎo)航欄.ppt_第1頁
網(wǎng)頁美工導(dǎo)航欄.ppt_第2頁
網(wǎng)頁美工導(dǎo)航欄.ppt_第3頁
網(wǎng)頁美工導(dǎo)航欄.ppt_第4頁
網(wǎng)頁美工導(dǎo)航欄.ppt_第5頁
已閱讀5頁,還剩78頁未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、A,1,網(wǎng)頁交互導(dǎo)航欄設(shè)計(jì),網(wǎng)頁設(shè)計(jì)藝術(shù),A,2,一、交互形式的設(shè)計(jì),從用戶角度來說,交互設(shè)計(jì)是一種有效而讓人愉悅的技術(shù),它致力于了解目標(biāo)用戶及其期望,了解用戶在同產(chǎn)品交互時(shí)彼此的行為,了解“人”本身的心理和行為特點(diǎn),同時(shí)還包括了解各種有效的交互方式,并對(duì)它們進(jìn)行增強(qiáng)和擴(kuò)充。通過對(duì)產(chǎn)品的界面和行為進(jìn)行交互設(shè)計(jì),讓產(chǎn)品和它的使用者之間建立一種有機(jī)的關(guān)系,從而可以有效達(dá)到使用者的目標(biāo),這就是交互設(shè)計(jì)的目的。 強(qiáng)調(diào)可用性和易用性,A,3,1、交互的類型,(1)按鈕式 按鈕式交互是我們?cè)诰W(wǎng)頁中最常見的一種交互方式,它也是最直接的、最形象的交互類型。按鈕是網(wǎng)頁形象的重要組成部分,其設(shè)計(jì)與編排遵循利于實(shí)現(xiàn)

2、信息交互、傳播的目標(biāo)。,A,4,(2)下拉菜單式 下拉菜單式交互是近十年、特別是Flash網(wǎng)頁出現(xiàn)后在網(wǎng)頁中應(yīng)用的一種交互方式,它可以在一個(gè)網(wǎng)頁中安排大量的交互項(xiàng),又不影響網(wǎng)頁的視覺效果,但不直接面對(duì)用戶,隱藏于某一個(gè)標(biāo)題按鈕中,交互的直接性效果不好。,A,5,(3)文本式 文本式是網(wǎng)頁最初的交互形式,也是最直接的交互方式,世界上第一張網(wǎng)頁就是采用文本式交互。隨著網(wǎng)頁的發(fā)展,直接的文本式交互主要用在諸如新聞、公告等標(biāo)題類交互。另一種表現(xiàn)為按鈕式的文本交互正在被廣泛采用,特別是這兩年的扁平式網(wǎng)頁設(shè)計(jì)流行,更是為這種交互方式應(yīng)用提供了肥沃的土壤。,A,6,A,7,(4)圖像熱點(diǎn)式 通常一般一張圖像

3、只能鏈接一個(gè)文件路徑。,A,8,(5)錨記交互式 錨記交互是網(wǎng)頁制作中超交互的一種,又叫命名錨記。 (6)空交互式 空交互式是未指派的交互式??战换ナ接糜谙蝽撁嫔系膶?duì)象或文本附加行為。,A,9,(7)框架交互式 框架常用在需要導(dǎo)航的網(wǎng)頁結(jié)構(gòu)中,比如一個(gè)窗口分為兩個(gè)框架頁(導(dǎo)航框架頁與內(nèi)容框架頁),通過點(diǎn)擊導(dǎo)航框架頁的交互,可以顯示不同的內(nèi)容框架頁。,A,10,2、交互與網(wǎng)頁的協(xié)調(diào),設(shè)計(jì)師在設(shè)計(jì)頁面時(shí),應(yīng)該建立更多的視覺層次,引導(dǎo)用戶的視覺焦點(diǎn),把用戶的注意力吸引到最重要的元素上,然后才把視線引導(dǎo)到其他次要的信息上。這樣便于用戶迅速、快捷地找到自己所需,更好地完成信息搜索、閱讀、瀏覽任務(wù)等。,A

4、,11,(1)能簡(jiǎn)不繁 交互設(shè)計(jì)主要體現(xiàn)指示、易用、美觀性。 (2)能少勿多 設(shè)計(jì)網(wǎng)頁交互就像設(shè)計(jì)電視遙控器按鈕一樣,不會(huì)把電視每一個(gè)命令都做在遙控器上。在設(shè)計(jì)中,我們?cè)谝粋€(gè)頁面中盡量只保留必需的、主要的交互,使網(wǎng)頁更易用和美觀。 (3)能顯勿藏 網(wǎng)頁的交互是生命,沒有交互網(wǎng)頁就沒有了意義。在設(shè)計(jì)網(wǎng)頁時(shí)一定要處理好交互的“顯”,同時(shí)又能與整體協(xié)調(diào)。,A,12,二、按鈕的設(shè)計(jì),按針按鈕代表著“做某件事” , 即點(diǎn)擊了某個(gè)按鈕代表著操作了一項(xiàng)功能,按鈕在形式上還有一個(gè)功能,就是鏈接功能,即提供一個(gè)要被強(qiáng)化、引導(dǎo)用戶點(diǎn)擊的地方。有一個(gè)外框(這個(gè)框可以是任何幾何形體,如方、圓、橢圓等),在上面有一些文

5、字(如下載、注冊(cè)、充值、搜索、登錄,抽獎(jiǎng)等),滿足了這兩個(gè)基本條件的,就認(rèn)為是按鈕,按鈕的本質(zhì)特點(diǎn)就是可以點(diǎn)擊后實(shí)現(xiàn)交互。,A,13,1、按鈕本身的顏色 按鈕本身的顏色應(yīng)該區(qū)別于它周邊的環(huán)境色,要具有較高的辨識(shí)度。因此,按鈕一般采用更亮且有高對(duì)比度的顏色。 2、按鈕的位置 按鈕的位置也需要仔細(xì)考究,基本原則是瀏覽者能快速、方便地找到,特別重要的按鈕應(yīng)該處在畫面的第一視覺位置。 3、按鈕的尺寸 通常來講,一個(gè)頁面當(dāng)中按鈕的大小也決定了其本身的重要級(jí)別,但也不是越大越好,尺寸應(yīng)該適中,因?yàn)榘粹o大到一定程度,會(huì)讓人覺得那不像按鈕,潛意識(shí)地認(rèn)為那是一塊區(qū)域,導(dǎo)致沒有點(diǎn)擊欲望。,A,14,4、按鈕上的文

6、字 在按鈕上的文字如何表述,以傳遞信息給用戶非常重要。語言組織需要言簡(jiǎn)意賅,直接明了。 5、按鈕的效果 按鈕不能和網(wǎng)頁中的其他元素?cái)D在一起,它需要充足的外邊距才能更加突出,也需要更多的內(nèi)邊距才能讓文字更容易閱讀。,A,15,在網(wǎng)頁設(shè)計(jì)中有一些通用的交互設(shè)計(jì)模式。網(wǎng)站導(dǎo)航各種各樣的通用和大家熟知的設(shè)計(jì)模式,可以用來作為為網(wǎng)站創(chuàng)建有效地信息架構(gòu)的基礎(chǔ)。,三、網(wǎng)頁導(dǎo)航布局設(shè)計(jì),A,16,網(wǎng)頁版式與其它視覺傳達(dá)媒體所不同的重要一條就是,它必須具備清晰的導(dǎo)航性。對(duì)于瀏覽者來說,導(dǎo)航是網(wǎng)站內(nèi)容的目錄。導(dǎo)航系統(tǒng)作為網(wǎng)站信息儲(chǔ)備的核心構(gòu)架,展示出了網(wǎng)站的規(guī)模、儲(chǔ)備方式和查閱方式等基礎(chǔ)設(shè)施。網(wǎng)頁導(dǎo)航應(yīng)該幫助瀏覽

7、者理解他們?cè)谀睦锖腿ツ睦?,即讓瀏覽者時(shí)刻清楚自己所處的位置,并能輕松進(jìn)入其他頁面或返回本頁面。網(wǎng)頁導(dǎo)航的功能是幫助人們迅速有效地到達(dá)目的地,在設(shè)計(jì)導(dǎo)航系統(tǒng)和用戶界面時(shí),重要的事情是了解訪問者的需求而設(shè)置導(dǎo)航系統(tǒng),幫助瀏覽者找到他們正在尋找的信息。,A,17,一個(gè)網(wǎng)站可以運(yùn)用多種導(dǎo)航,如主欄目導(dǎo)航、二級(jí)欄目導(dǎo)航、快速導(dǎo)航和相關(guān)鏈接等。 1主欄目導(dǎo)航 在主頁面上,全局導(dǎo)航是所有網(wǎng)頁都具有的導(dǎo)航選項(xiàng),一般是網(wǎng)頁內(nèi)容的分類,提供給讀者必要的選項(xiàng)。 2二級(jí)欄目導(dǎo)航 當(dāng)一個(gè)瀏覽者正在瀏覽網(wǎng)站的一個(gè)特殊區(qū)域時(shí),第二級(jí)導(dǎo)航就顯示出來這一級(jí)反映了特定內(nèi)容。,A,18,A,19,3快速導(dǎo)航 快速導(dǎo)航是現(xiàn)在韓國(guó)的一

8、些網(wǎng)站中比較流行的方式,一般出現(xiàn)在網(wǎng)頁的右側(cè),并且采用浮動(dòng)的方式伴隨于每一個(gè)網(wǎng)頁,不會(huì)因?yàn)轫撁娴臐L動(dòng)而找不到導(dǎo)航,能夠提供隨時(shí)可用的鏈接。 4相關(guān)鏈接導(dǎo)航 相關(guān)鏈接一般出現(xiàn)在網(wǎng)頁的下部,用于提供相關(guān)欄目的鏈接,一般以圖塊的方式出現(xiàn)。,A,20,A,21,為了分辨這些不同的導(dǎo)航,可以把導(dǎo)航信息以相同的形式固定在不同頁面的相同位置,這些位置可以是頁面的上部、下部、左側(cè)、右側(cè)或中部,頁面中間一般放置主體內(nèi)容。一個(gè)網(wǎng)頁實(shí)際上四個(gè)基本區(qū)域最適合放置導(dǎo)航元素:在網(wǎng)頁的頂部、左側(cè)、右側(cè)和中部,放在下部需要將網(wǎng)頁控制在一屏以內(nèi)。,導(dǎo)航位置,A,22,1.頂部水平欄導(dǎo)航,頂部水平欄導(dǎo)航是當(dāng)前兩種最流行地網(wǎng)站導(dǎo)航

9、菜單設(shè)計(jì)模式之一。它最常用于網(wǎng)站的主導(dǎo)航菜單,且最通常地放在網(wǎng)站所有頁面的網(wǎng)站頭的直接上方或直接下方。,A,23,頂部水平欄導(dǎo)航設(shè)計(jì)模式有時(shí)伴隨著下拉菜單,當(dāng)鼠標(biāo)移到某個(gè)項(xiàng)上時(shí)彈出它下面的二級(jí)子導(dǎo)航項(xiàng)。,A,24,A,25,A,26,A,27,頂部水平欄導(dǎo)航一般特征 導(dǎo)航項(xiàng)是文字鏈接,按鈕形狀,或者選項(xiàng)卡形狀 水平欄導(dǎo)航通常直接放在鄰近網(wǎng)站logo的地方 它通常位于折疊之上,A,28,頂部水平欄導(dǎo)航的缺點(diǎn) 頂部水平欄導(dǎo)航最大的缺點(diǎn)就是它限制了你在不采用子級(jí)導(dǎo)航的情況下可以包含的鏈接數(shù)。對(duì)于只有幾個(gè)頁面或類別的網(wǎng)站來說,這不是什么問題,但是對(duì)于有非常復(fù)雜的信息結(jié)構(gòu)且有很多模塊組成的網(wǎng)站來說,如果

10、沒有子導(dǎo)航的話,這并不是一個(gè)完美的主導(dǎo)航菜單選擇。,A,29,何時(shí)使用頂部水平欄導(dǎo)航 頂部水平欄導(dǎo)航對(duì)于只需要在主要導(dǎo)航中顯示5-12個(gè)導(dǎo)航項(xiàng)的網(wǎng)站來說是非常好的。這也是單列布局的網(wǎng)站的主導(dǎo)航的唯一選擇(除了通常用于二級(jí)導(dǎo)航系統(tǒng)的底部導(dǎo)航)。當(dāng)它與下拉子導(dǎo)航結(jié)合時(shí),這種設(shè)計(jì)模式可以支持更多的鏈接。,A,30,2.豎直/側(cè)邊欄導(dǎo)航,側(cè)邊欄導(dǎo)航的導(dǎo)航項(xiàng)被排列在一個(gè)單列,一項(xiàng)在一項(xiàng)的上面。它經(jīng)常在左上角的列上,在主內(nèi)容區(qū)之前根據(jù)一份針對(duì)從左到右習(xí)慣讀者的導(dǎo)航模式的可用性研究,左邊的豎直導(dǎo)航欄比右邊的豎直導(dǎo)航表現(xiàn)要好。 側(cè)邊欄導(dǎo)航設(shè)計(jì)模式隨處可見,幾乎存在于各類網(wǎng)站上。這有可能是因?yàn)樨Q直導(dǎo)航是當(dāng)前最通

11、用的模式之一,可以適應(yīng)數(shù)量很多的鏈接。,A,31,它可以與子導(dǎo)航菜單一起使用,也可以單獨(dú)使用。它很容易用于包含很多鏈接的網(wǎng)站主導(dǎo)航。側(cè)邊欄導(dǎo)航可以集成在幾乎任何種類的多列布局中。,A,32,A,33,A,34,A,35,A,36,側(cè)邊欄導(dǎo)航的一般特征 文字鏈接作為導(dǎo)航項(xiàng)很普遍(包含或不包含圖標(biāo)) 很少使用選項(xiàng)卡(除了堆疊標(biāo)簽導(dǎo)航模式) 豎直導(dǎo)航菜單經(jīng)常含有很多鏈接,A,37,豎直/側(cè)邊欄導(dǎo)航缺點(diǎn) 因?yàn)榭梢蕴幚砗芏噫溄?,?dāng)豎直菜單太長(zhǎng)時(shí)有時(shí)可能將用戶淹沒。嘗試限制你引入的鏈接數(shù),取而代之可以使用飛出式子導(dǎo)航菜單以提供網(wǎng)站的更多信息。同時(shí)考慮將鏈接分放在直觀的類別當(dāng)中,以幫助用戶很快地找到感興趣的

12、鏈接。,A,38,何時(shí)使用豎直/側(cè)邊欄導(dǎo)航 豎直導(dǎo)航適用于幾乎所有種類的網(wǎng)站,尤其適合有一堆主導(dǎo)航鏈接的網(wǎng)站。,A,39,3、中部 當(dāng)進(jìn)入一個(gè)網(wǎng)頁的進(jìn)入頁時(shí),將導(dǎo)航按鈕放在頁面的中心位置便于瀏覽者進(jìn)行選擇,進(jìn)入頁類似于書籍的封面,幫助瀏覽者決定到哪里,這樣設(shè)計(jì)使導(dǎo)航看起來十分突出。,A,40,A,41,4、下部 為了突出展示的內(nèi)容,將導(dǎo)航放在下部也是可以的,但要將網(wǎng)頁嚴(yán)格控制在一屏以內(nèi),而不能在瀏覽時(shí)出現(xiàn)垂直的滾動(dòng)條。,A,42,A,43,5、傾斜導(dǎo)航 傾斜導(dǎo)航打破了網(wǎng)頁由于表格排版造成的橫向與豎向?qū)Ш降母窬?,擁有很?qiáng)的視覺沖擊力。但是由于它的個(gè)性特征太鮮明,不適用于信息量豐富的網(wǎng)站。,A,4

13、4,A,45,6、選項(xiàng)卡導(dǎo)航,選項(xiàng)卡導(dǎo)航可以隨意設(shè)計(jì)成任何你想要的樣式,從逼真的,有手感的標(biāo)簽到圓滑的標(biāo)簽,以及簡(jiǎn)單地方邊的標(biāo)簽等。它存在于各種各樣的網(wǎng)站里,并且可以納入任何視覺效果。,A,46,A,47,選項(xiàng)卡比起其它類別的導(dǎo)航有一個(gè)明顯的優(yōu)勢(shì):它們對(duì)用戶有積極的心理效應(yīng)。人們通常把導(dǎo)航與選項(xiàng)卡關(guān)聯(lián)在一起,因?yàn)樗麄冊(cè)?jīng)在筆記本或資料夾里看見選項(xiàng)卡,并且把它們與切換到一個(gè)新的章節(jié)聯(lián)系在一起。這個(gè)真實(shí)世界的暗喻使得選項(xiàng)卡導(dǎo)航非常直觀。,A,48,選項(xiàng)卡導(dǎo)航的一般特征 樣子和功能都類似真實(shí)世界的選項(xiàng)卡(就像在文件夾,筆記本等中看到的一樣) 一般是水平方向的但也有時(shí)是豎直的(堆疊標(biāo)簽),A,49,選

14、項(xiàng)卡導(dǎo)航的缺點(diǎn) 選項(xiàng)卡最大的缺點(diǎn)是它比簡(jiǎn)單的頂部水平欄更難設(shè)計(jì)。它們通常需要更多的標(biāo)簽,圖片資源以及CSS,具體根據(jù)標(biāo)簽的視覺復(fù)雜度而定。選項(xiàng)卡的另一個(gè)缺點(diǎn)是它們也不太適用于鏈接很多的情況,除非它們豎直地排列(即使這樣,如果太多的話它們還是看起來很不合適)。,A,50,何時(shí)使用選項(xiàng)卡導(dǎo)航 選項(xiàng)卡也適合幾乎任何主導(dǎo)航,雖然它們?cè)诳梢燥@示的鏈接上有限制,尤其在水平方向的情況下。將它們用于擁有不同風(fēng)格子導(dǎo)航的主導(dǎo)航的較大型網(wǎng)站是個(gè)不錯(cuò)的選項(xiàng)。,A,51,7、面包屑導(dǎo)航,面包屑的名字來源于Hansel和Gretel的故事,他們?cè)谘赝静ト雒姘家杂脕碚业郊蛹业穆?,這可以告訴你在網(wǎng)站的當(dāng)前位置。這是二級(jí)導(dǎo)

15、航的一種形式,輔助網(wǎng)站的主導(dǎo)航系統(tǒng)。,A,52,面包屑對(duì)于多級(jí)別具有層次結(jié)構(gòu)的網(wǎng)站特別有用。它們可以幫助訪客了解到當(dāng)前自己在整站中所處的位置。如果訪客希望返回到某一級(jí),它們只需要點(diǎn)擊相應(yīng)的面包屑導(dǎo)航項(xiàng)。,A,53,面包屑的一般特征 一般格式是水平文字鏈接列表,通常在兩項(xiàng)中間伴隨著左箭頭以指示層及關(guān)系 從不用于主導(dǎo)航,A,54,面包屑導(dǎo)航的缺點(diǎn) 面包屑不適于淺導(dǎo)航網(wǎng)站。當(dāng)網(wǎng)站沒有清晰的層次和分類的時(shí)候,使用它也可能產(chǎn)生混亂。何時(shí)使用面包屑導(dǎo)航。面包屑導(dǎo)航最適用于具有清晰章節(jié)和多層次分類內(nèi)容的網(wǎng)站。沒有明顯的章節(jié),使用面包屑是得不償失。,A,55,8、標(biāo)簽導(dǎo)航,標(biāo)簽經(jīng)常被用于博客和新聞網(wǎng)站。它們常

16、常被組織成一個(gè)標(biāo)簽云,導(dǎo)航項(xiàng)可能按字母順序排列(通常用不同大小的鏈接來表示這個(gè)標(biāo)簽下有多少內(nèi)容),或者按流行程度排列。,A,56,A,57,標(biāo)簽是出色的二級(jí)導(dǎo)航而很少用于主導(dǎo)航。他可以提高網(wǎng)站的可發(fā)現(xiàn)性和探索性。標(biāo)簽云通常出現(xiàn)在邊欄或底部。如果沒有標(biāo)簽云,標(biāo)簽則通常包括于文章頂部或底部的元信息中,這種設(shè)計(jì)讓用戶更容易找到相似的內(nèi)容。,A,58,標(biāo)簽導(dǎo)航的一般特征 標(biāo)簽是以內(nèi)容為中心的網(wǎng)(博客和新聞?wù)?站的一般特性 僅有文字鏈接 當(dāng)處于標(biāo)簽云中時(shí),鏈接通常大小各異以標(biāo)識(shí)流行度 經(jīng)常被包含在文章的元信息中,A,59,標(biāo)簽導(dǎo)航的缺點(diǎn) 人們通常把標(biāo)簽和博客和新聞網(wǎng)站聯(lián)系在一起(有時(shí)候也可能是電子商務(wù)網(wǎng)

17、站),所以如果你的網(wǎng)站與這些網(wǎng)站有本質(zhì)的不同,它可能對(duì)你就沒有幫助。標(biāo)簽也會(huì)給內(nèi)容創(chuàng)作者帶來一定量的工作量,因?yàn)闉榱耸箻?biāo)簽系統(tǒng)有效,每篇文章都需要打上準(zhǔn)確的標(biāo)簽。,A,60,何時(shí)使用標(biāo)簽 如果你擁有很多主題,為內(nèi)容打上關(guān)鍵詞標(biāo)記是很有利的。如果你僅有幾個(gè)頁面(可能你的網(wǎng)站是一個(gè)公司網(wǎng)站),可能就不需要給內(nèi)容打標(biāo)簽了。是否結(jié)合標(biāo)簽云或只是將標(biāo)簽包含在元信息中得取決于你的設(shè)計(jì)。,A,61,9、搜索導(dǎo)航,近些年來網(wǎng)站檢索已成為流行的導(dǎo)航方式。它非常適合擁有無限內(nèi)容的網(wǎng)站(像維基百科),這種網(wǎng)站很難使用其它的導(dǎo)航。搜索也常見于博客和新聞網(wǎng)站,以及電子商務(wù)網(wǎng)站。,A,62,A,63,搜索對(duì)于清楚知道自己

18、想要找什么的訪客非常有用。但是有了搜索并不代表著就可以忽略好的信息結(jié)構(gòu)。它對(duì)于保證那些不完全知道自己要找什么或是想發(fā)現(xiàn)潛在的感興趣內(nèi)容的瀏覽者可以查找到內(nèi)容依然非常重要。,A,64,搜索導(dǎo)航的一般特征 搜索欄通常位于頭部或在側(cè)邊欄靠近頂部的地方 搜索欄經(jīng)常會(huì)出現(xiàn)在頁面布局中的輔助部分,如底部,A,65,搜索導(dǎo)航的缺點(diǎn) 搜索最大的缺點(diǎn)是并非所有搜索引擎都是平等的。取決于你選擇的方案,你網(wǎng)站的搜索特性可能不能返回精確的結(jié)果或者缺失一些東西如文章元數(shù)據(jù)。搜索導(dǎo)航,對(duì)于大部分網(wǎng)站來說,應(yīng)該作為次要的導(dǎo)航形式。搜索是用戶在無法被導(dǎo)航到他們想找的東西的地方時(shí)的可靠選擇。,A,66,何時(shí)使用搜索導(dǎo)航 對(duì)于具

19、有無數(shù)頁面并且有復(fù)雜信息結(jié)構(gòu)的網(wǎng)站來說,肯定必須引入搜索功能。沒有它用戶可能很難通過便利鏈接和多層的導(dǎo)航來找到他們想要的信息。搜索對(duì)于電子商務(wù)網(wǎng)站也非常重要,而關(guān)鍵的一點(diǎn)是電子商務(wù)網(wǎng)站的搜索結(jié)果要根據(jù)網(wǎng)站存貨的多少具有相應(yīng)的篩選和排序功能。,A,67,10、出式菜單和下拉菜單導(dǎo)航,出式菜單(與豎直/側(cè)邊欄導(dǎo)航一起使用)和下拉菜單(一般與頂部水平欄導(dǎo)航一起使用)是構(gòu)建健壯的導(dǎo)航系統(tǒng)的好方法。它使得你的網(wǎng)站整體上看起來很整潔,而且使得深層章節(jié)很容易被訪問。,A,68,他們通常結(jié)合水平,豎直或是選項(xiàng)卡導(dǎo)航一起使用,作為網(wǎng)站主導(dǎo)航系統(tǒng)的一部分。,A,69,出式菜單和下拉菜單導(dǎo)航的一般特征 用于多級(jí)信息

20、結(jié)構(gòu) 使用JavaScript和CSS來隱藏和顯示菜單 顯示在菜單中的鏈接是主菜單項(xiàng)的子項(xiàng) 菜單通常在鼠標(biāo)懸停在上面時(shí)被激活,而有時(shí)候也可能是鼠標(biāo)點(diǎn)擊時(shí)激活,A,70,A,71,出式菜單和下拉菜單導(dǎo)航缺點(diǎn) 除非你在主導(dǎo)航鏈接邊上放置一些標(biāo)識(shí)(通常是箭頭圖標(biāo)),不然訪客可能不知道那有包含子導(dǎo)航項(xiàng)的下拉或出式菜單,因此使這些標(biāo)識(shí)很明顯是非常重要的。同時(shí)出式菜單和下拉可能使得導(dǎo)航在移動(dòng)設(shè)備上非常難用,所以要確保你的移動(dòng)樣式表處理了這種情況。,A,72,何時(shí)使用出式菜單和下拉菜單導(dǎo)航 如果你想在視覺上隱藏很大的或很復(fù)雜的導(dǎo)航層次,出式菜單和下拉是很好的選擇,因?yàn)樗層脩魶Q定他們想看見什么,以及什么時(shí)候

21、可以看見它們。它們可以用來在不弄亂網(wǎng)頁的情況下按需顯示很大數(shù)量的鏈接。它們還可以用來顯示子頁面和局部導(dǎo)航,并且不需要用戶首先點(diǎn)擊打開新的頁面。,A,73,11、分面/引導(dǎo)導(dǎo)航,分面/引導(dǎo)導(dǎo)航(也叫做分面檢索或引導(dǎo)檢索)最常見于電子商務(wù)網(wǎng)站。基本上來說引導(dǎo)導(dǎo)航給你提供額外的內(nèi)容屬性篩選。假設(shè)你在瀏覽一個(gè)新的LCD顯示器,引導(dǎo)導(dǎo)航可能會(huì)列出大小,價(jià)格,品牌等選頂?;谶@些內(nèi)容屬性,你可以導(dǎo)航到匹配你的條件的項(xiàng)。,A,74,A,75,引導(dǎo)導(dǎo)航在擁有巨大數(shù)量貨物的大型電子商務(wù)網(wǎng)站中是非常寶貴的。用戶通過直接搜索通常很難找到他們想要的東西,并且增加了用戶漏掉一個(gè)產(chǎn)品的功能性。例如他們可能搜索一個(gè)灰褐色的產(chǎn)品,但你可能將它標(biāo)記了灰色或褐色,雖然它可能就是用戶想要的東西。,A,

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論