日本一区二区三区在线看|亚洲视频一二最新在线无码|丝袜啪啪高潮喷水秀|久久精品国产九九|影音先锋萱萱影视|福利二区免费播放|五月丁香婷婷丁香视频|丁香五月天激情在线vr|精品国产视频一二三|殴州亚州av另类..

青島網(wǎng)站建設(shè)_小程序開發(fā)_品牌設(shè)計(jì)_圭谷設(shè)計(jì)

網(wǎng)站建設(shè)中導(dǎo)航要素的設(shè)計(jì)

分類:網(wǎng)站建設(shè) 瀏覽次數(shù):52032 2018-11-06
滿意回答
2018-11-06

網(wǎng)站導(dǎo)航系統(tǒng)用來引導(dǎo)客戶完成特定的指令。網(wǎng)站導(dǎo)航設(shè)計(jì)需要傳達(dá)出導(dǎo)航元素與其所包含內(nèi)容之間的關(guān)系,導(dǎo)航提供了客戶在網(wǎng)站內(nèi)容之間跳轉(zhuǎn)的方法,幾種常見的導(dǎo)航形式有:全局導(dǎo)航、局部導(dǎo)航、面包屑、標(biāo)簽、按鈕、圖標(biāo)等形式。

QQ截圖20180904124843

1.菜單

根據(jù)網(wǎng)站的信息體系層級劃分,全局導(dǎo)航為一級菜單,局部導(dǎo)航為二級、三級或更深層次菜單。表現(xiàn)形式有:文本導(dǎo)航、圖片導(dǎo)航、Tab導(dǎo)航、浮出菜單、垂直菜單。

文本導(dǎo)航是由一行有間隔的超文本組成,簡潔有余,美觀不足;

圖片導(dǎo)航通過JavaScript和CSS可以展示每個(gè)導(dǎo)航項(xiàng),當(dāng)用戶光標(biāo)不在其上的狀態(tài)、滑入其上的狀態(tài)、單擊時(shí)的狀態(tài)、已鏈接的狀態(tài)等與用戶交互的反應(yīng);

Tab導(dǎo)航一般是由文本和背景圖像構(gòu)成,通過CSS背景圖像能夠根據(jù)文本內(nèi)容的多少而延伸,用戶滑入其上或單擊的導(dǎo)航比其他導(dǎo)航有明顯的靠前、突出感;

根據(jù)需要展示的信息的多少,浮出菜單分為整個(gè)頁面鏈接跳轉(zhuǎn)和局部頁面信息更新兩種形式,浮出菜單初只顯示一級菜單項(xiàng),當(dāng)用戶滑入或單擊某導(dǎo)航時(shí),其下或其右展開此項(xiàng)的次級菜單,優(yōu)點(diǎn)是節(jié)省頁面空間,缺點(diǎn)是次級項(xiàng)目不夠一目了然,用戶在進(jìn)行選擇時(shí)容易誤操作;

對于從左向右的閱讀語系,垂直菜單一般放置在頁面左側(cè)作為全局或局部導(dǎo)航,放置在右側(cè)則通常為輔助導(dǎo)航或友情鏈接。

2.鏈接文本

鏈接文本一般的顯示狀態(tài)與普通文本不同。如果普通正文設(shè)置為沒有下劃線、顏色為“A”,鏈接文本則有下劃線,顏色為“B”,當(dāng)鼠標(biāo)滑過,鏈接文本顏色改變、背景色改變,去除下劃線,同時(shí)出現(xiàn)小手光標(biāo)。如果在文本旁邊設(shè)計(jì)具有明顯指示鏈接意圖的小動畫或圖標(biāo)更能使用戶認(rèn)識到這是一個(gè)有鏈接的文本。短小的鏈接文本有時(shí)不能清楚地解釋,這時(shí),好為此文本設(shè)置Alt說明性提示文字功能,即當(dāng)鼠標(biāo)滑過時(shí),彈出解釋說明其鏈接跳轉(zhuǎn)后頁面的主要內(nèi)容。

當(dāng)鏈接文本作為導(dǎo)航標(biāo)題時(shí),通常會把文本加大、加粗或加寬,突出文本顏色或其與背景色的反差,有時(shí),也為標(biāo)題文本設(shè)置浮雕或蝕刻效果,增強(qiáng)信息組織方式的表現(xiàn)力和可交互性。視覺效果明確的導(dǎo)航標(biāo)題使用戶知道這是可以被點(diǎn)擊并展開詳細(xì)深入內(nèi)容的。

3.按鈕

在任務(wù)流程、應(yīng)用程序、表單中,點(diǎn)擊按鈕可以執(zhí)行相應(yīng)操作。與鏈接文本不同,鏈接文本一般會用來實(shí)現(xiàn)從一個(gè)頁面到另一個(gè)頁面的跳轉(zhuǎn),展示不同的信息;而按鈕常用來實(shí)現(xiàn)一個(gè)操作行為,一個(gè)事務(wù)命令。網(wǎng)頁上有三種形式的按鈕:圖像按鈕、HTML按鈕、flash按鈕。

4.面包屑導(dǎo)航

面包屑導(dǎo)航系統(tǒng)一般用大于符號、向右箭頭或者豎線表示信息層級之間的遞進(jìn)關(guān)系。后一個(gè)表示當(dāng)前頁面主要內(nèi)容標(biāo)題的文字通常會加粗、加大顯示,有些頁面也因此省略掉頁面標(biāo)題文字。面包屑導(dǎo)航系統(tǒng)一般放置于整個(gè)頁面的頂端,或者放置于主廣告條、全局導(dǎo)航之下,頁面內(nèi)容之上。

需要注意的是,為了不讓面包屑導(dǎo)航影響主要導(dǎo)航,其表現(xiàn)力要弱于主導(dǎo)航。

5.標(biāo)簽和卡片堆

標(biāo)簽和卡片堆有類似的視覺效果。把同類的不同欄目組織起來,欄目標(biāo)簽整齊排列,當(dāng)光標(biāo)滑過或單擊某個(gè)欄目標(biāo)簽時(shí),相應(yīng)的欄目標(biāo)簽靠前突出,同時(shí)顯示此欄目的內(nèi)容。

標(biāo)簽常用來比喻頁面中主導(dǎo)航欄目的顯示效果與內(nèi)容切換;卡片堆則用來比喻頁面中局部信息塊欄目的顯示效果與內(nèi)容切換。但前者由于信息量較大,適于頁面鏈接跳轉(zhuǎn)或整個(gè)頁面的刷新;后者則適用Ajax技術(shù)進(jìn)行局部數(shù)據(jù)更新。

標(biāo)簽的視覺效果比一般導(dǎo)航菜單要明確,它把標(biāo)簽欄目所屬的子內(nèi)容也帶到用戶所矚目的位置。在激活的標(biāo)簽之下顯示一條相同背景或顏色的子欄目菜單或所屬的具體內(nèi)容,從左側(cè)延伸到右側(cè)。用戶可以清楚地感知,標(biāo)簽不單是一個(gè)可以點(diǎn)擊的按鈕,它還控制了用戶瀏覽的信息內(nèi)容。

6.顏色編碼

顏色是人類識別信息的重要信號。有的網(wǎng)站使用顏色編碼來標(biāo)記不同欄目,這些顏色的飽和度和明度基本一致。對于大多數(shù)瀏覽者來說,顏色編碼可以提供欄目的辨識度。

網(wǎng)站設(shè)計(jì)師需要注意的是,不要讓顏色編碼喧賓奪主,影響頁面內(nèi)容的傳達(dá)。

7.圖片和圖標(biāo)

圖片比文字更能產(chǎn)生跨文化、跨民族的效果,因此在網(wǎng)站設(shè)計(jì)中,也常用圖片構(gòu)成導(dǎo)航,作為導(dǎo)航的圖片應(yīng)該簡潔、精致、具有一定的代表性,瀏覽者一看便知。即便如此,由于圖片中的文本不能被搜索引擎收錄,扔需要為圖片導(dǎo)航設(shè)置相應(yīng)的文本導(dǎo)航或者設(shè)置Alt說明性提示文字,從而增加網(wǎng)站的曝光率。

網(wǎng)站名片  _副本


知識問答 更多+

Copyright All Rights GreatGoal Design co.,ltd. 魯ICP備16002128號-3      技術(shù)支持: @圭谷設(shè)計(jì)