網(wǎng)頁美工導(dǎo)航欄ppt課件

網(wǎng)頁交互導(dǎo)航欄設(shè)計,網(wǎng)頁設(shè)計藝術(shù),1,一、交互形式的設(shè)計,從用戶角度來說，交互設(shè)計是一種有效而讓人愉悅的技術(shù)，它致力于了解目標用戶及其期望，了解用戶在同產(chǎn)品交互時彼此的行為，了解“人”本身的心理和行為特點，同時還包括了解各種有效的交互方式，并對它們進行增強和擴充。通過對產(chǎn)品的界面和行為進行交互設(shè)計，讓產(chǎn)品和它的使用者之間建立一種有機的關(guān)系，從而可以有效達到使用者的目標，這就是交互設(shè)計的目的。強調(diào)可用性和易用性,2,1、交互的類型,（1）按鈕式按鈕式交互是我們在網(wǎng)頁中最常見的一種交互方式，它也是最直接的、最形象的交互類型。按鈕是網(wǎng)頁形象的重要組成部分，其設(shè)計與編排遵循利于實現(xiàn)信息交互、傳播的目標。,3,（2）下拉菜單式下拉菜單式交互是近十年、特別是Flash網(wǎng)頁出現(xiàn)后在網(wǎng)頁中應(yīng)用的一種交互方式，它可以在一個網(wǎng)頁中安排大量的交互項，又不影響網(wǎng)頁的視覺效果，但不直接面對用戶，隱藏于某一個標題按鈕中，交互的直接性效果不好。,4,（3）文本式文本式是網(wǎng)頁最初的交互形式，也是最直接的交互方式，世界上第一張網(wǎng)頁就是采用文本式交互。隨著網(wǎng)頁的發(fā)展，直接的文本式交互主要用在諸如新聞、公告等標題類交互。另一種表現(xiàn)為按鈕式的文本交互正在被廣泛采用，特別是這兩年的扁平式網(wǎng)頁設(shè)計流行，更是為這種交互方式應(yīng)用提供了肥沃的土壤。,5,6,（4）圖像熱點式通常一般一張圖像只能鏈接一個文件路徑。,7,（5）錨記交互式錨記交互是網(wǎng)頁制作中超交互的一種，又叫命名錨記。（6）空交互式空交互式是未指派的交互式?？战换ナ接糜谙蝽撁嫔系膶ο蠡蛭谋靖郊有袨?。,8,（7）框架交互式框架常用在需要導(dǎo)航的網(wǎng)頁結(jié)構(gòu)中，比如一個窗口分為兩個框架頁（導(dǎo)航框架頁與內(nèi)容框架頁），通過點擊導(dǎo)航框架頁的交互，可以顯示不同的內(nèi)容框架頁。,9,2、交互與網(wǎng)頁的協(xié)調(diào),設(shè)計師在設(shè)計頁面時，應(yīng)該建立更多的視覺層次，引導(dǎo)用戶的視覺焦點，把用戶的注意力吸引到最重要的元素上，然后才把視線引導(dǎo)到其他次要的信息上。這樣便于用戶迅速、快捷地找到自己所需，更好地完成信息搜索、閱讀、瀏覽任務(wù)等。,10,（1）能簡不繁交互設(shè)計主要體現(xiàn)指示、易用、美觀性。（2）能少勿多設(shè)計網(wǎng)頁交互就像設(shè)計電視遙控器按鈕一樣，不會把電視每一個命令都做在遙控器上。在設(shè)計中，我們在一個頁面中盡量只保留必需的、主要的交互，使網(wǎng)頁更易用和美觀。（3）能顯勿藏網(wǎng)頁的交互是生命，沒有交互網(wǎng)頁就沒有了意義。在設(shè)計網(wǎng)頁時一定要處理好交互的“顯”，同時又能與整體協(xié)調(diào)。,11,二、按鈕的設(shè)計,按針按鈕代表著“做某件事”，即點擊了某個按鈕代表著操作了一項功能，按鈕在形式上還有一個功能，就是鏈接功能，即提供一個要被強化、引導(dǎo)用戶點擊的地方。有一個外框（這個框可以是任何幾何形體，如方、圓、橢圓等），在上面有一些文字（如下載、注冊、充值、搜索、登錄，抽獎等），滿足了這兩個基本條件的，就認為是按鈕，按鈕的本質(zhì)特點就是可以點擊后實現(xiàn)交互。,12,1、按鈕本身的顏色按鈕本身的顏色應(yīng)該區(qū)別于它周邊的環(huán)境色，要具有較高的辨識度。因此，按鈕一般采用更亮且有高對比度的顏色。2、按鈕的位置按鈕的位置也需要仔細考究，基本原則是瀏覽者能快速、方便地找到，特別重要的按鈕應(yīng)該處在畫面的第一視覺位置。3、按鈕的尺寸通常來講，一個頁面當中按鈕的大小也決定了其本身的重要級別，但也不是越大越好，尺寸應(yīng)該適中，因為按鈕大到一定程度，會讓人覺得那不像按鈕，潛意識地認為那是一塊區(qū)域，導(dǎo)致沒有點擊欲望。,13,4、按鈕上的文字在按鈕上的文字如何表述，以傳遞信息給用戶非常重要。語言組織需要言簡意賅，直接明了。5、按鈕的效果按鈕不能和網(wǎng)頁中的其他元素擠在一起，它需要充足的外邊距才能更加突出，也需要更多的內(nèi)邊距才能讓文字更容易閱讀。,14,在網(wǎng)頁設(shè)計中有一些通用的交互設(shè)計模式。網(wǎng)站導(dǎo)航各種各樣的通用和大家熟知的設(shè)計模式，可以用來作為為網(wǎng)站創(chuàng)建有效地信息架構(gòu)的基礎(chǔ)。,三、網(wǎng)頁導(dǎo)航布局設(shè)計,15,網(wǎng)頁版式與其它視覺傳達媒體所不同的重要一條就是，它必須具備清晰的導(dǎo)航性。對于瀏覽者來說，導(dǎo)航是網(wǎng)站內(nèi)容的目錄。導(dǎo)航系統(tǒng)作為網(wǎng)站信息儲備的核心構(gòu)架，展示出了網(wǎng)站的規(guī)模、儲備方式和查閱方式等基礎(chǔ)設(shè)施。網(wǎng)頁導(dǎo)航應(yīng)該幫助瀏覽者理解他們在哪里和去哪里，即讓瀏覽者時刻清楚自己所處的位置，并能輕松進入其他頁面或返回本頁面。網(wǎng)頁導(dǎo)航的功能是幫助人們迅速有效地到達目的地，在設(shè)計導(dǎo)航系統(tǒng)和用戶界面時，重要的事情是了解訪問者的需求而設(shè)置導(dǎo)航系統(tǒng)，幫助瀏覽者找到他們正在尋找的信息。,16,一個網(wǎng)站可以運用多種導(dǎo)航，如主欄目導(dǎo)航、二級欄目導(dǎo)航、快速導(dǎo)航和相關(guān)鏈接等。1主欄目導(dǎo)航在主頁面上，全局導(dǎo)航是所有網(wǎng)頁都具有的導(dǎo)航選項，一般是網(wǎng)頁內(nèi)容的分類，提供給讀者必要的選項。2二級欄目導(dǎo)航當一個瀏覽者正在瀏覽網(wǎng)站的一個特殊區(qū)域時，第二級導(dǎo)航就顯示出來這一級反映了特定內(nèi)容。,17,18,3快速導(dǎo)航快速導(dǎo)航是現(xiàn)在韓國的一些網(wǎng)站中比較流行的方式，一般出現(xiàn)在網(wǎng)頁的右側(cè)，并且采用浮動的方式伴隨于每一個網(wǎng)頁，不會因為頁面的滾動而找不到導(dǎo)航，能夠提供隨時可用的鏈接。4相關(guān)鏈接導(dǎo)航相關(guān)鏈接一般出現(xiàn)在網(wǎng)頁的下部，用于提供相關(guān)欄目的鏈接，一般以圖塊的方式出現(xiàn)。,19,20,為了分辨這些不同的導(dǎo)航，可以把導(dǎo)航信息以相同的形式固定在不同頁面的相同位置，這些位置可以是頁面的上部、下部、左側(cè)、右側(cè)或中部，頁面中間一般放置主體內(nèi)容。一個網(wǎng)頁實際上四個基本區(qū)域最適合放置導(dǎo)航元素：在網(wǎng)頁的頂部、左側(cè)、右側(cè)和中部，放在下部需要將網(wǎng)頁控制在一屏以內(nèi)。,導(dǎo)航位置,21,1.頂部水平欄導(dǎo)航,頂部水平欄導(dǎo)航是當前兩種最流行地網(wǎng)站導(dǎo)航菜單設(shè)計模式之一。它最常用于網(wǎng)站的主導(dǎo)航菜單，且最通常地放在網(wǎng)站所有頁面的網(wǎng)站頭的直接上方或直接下方。,22,頂部水平欄導(dǎo)航設(shè)計模式有時伴隨著下拉菜單，當鼠標移到某個項上時彈出它下面的二級子導(dǎo)航項。,23,24,25,26,頂部水平欄導(dǎo)航一般特征導(dǎo)航項是文字鏈接，按鈕形狀，或者選項卡形狀水平欄導(dǎo)航通常直接放在鄰近網(wǎng)站logo的地方它通常位于折疊之上,27,頂部水平欄導(dǎo)航的缺點頂部水平欄導(dǎo)航最大的缺點就是它限制了你在不采用子級導(dǎo)航的情況下可以包含的鏈接數(shù)。對于只有幾個頁面或類別的網(wǎng)站來說，這不是什么問題，但是對于有非常復(fù)雜的信息結(jié)構(gòu)且有很多模塊組成的網(wǎng)站來說，如果沒有子導(dǎo)航的話，這并不是一個完美的主導(dǎo)航菜單選擇。,28,何時使用頂部水平欄導(dǎo)航頂部水平欄導(dǎo)航對于只需要在主要導(dǎo)航中顯示5-12個導(dǎo)航項的網(wǎng)站來說是非常好的。這也是單列布局的網(wǎng)站的主導(dǎo)航的唯一選擇(除了通常用于二級導(dǎo)航系統(tǒng)的底部導(dǎo)航)。當它與下拉子導(dǎo)航結(jié)合時，這種設(shè)計模式可以支持更多的鏈接。,29,2.豎直/側(cè)邊欄導(dǎo)航,側(cè)邊欄導(dǎo)航的導(dǎo)航項被排列在一個單列，一項在一項的上面。它經(jīng)常在左上角的列上，在主內(nèi)容區(qū)之前根據(jù)一份針對從左到右習慣讀者的導(dǎo)航模式的可用性研究，左邊的豎直導(dǎo)航欄比右邊的豎直導(dǎo)航表現(xiàn)要好。側(cè)邊欄導(dǎo)航設(shè)計模式隨處可見，幾乎存在于各類網(wǎng)站上。這有可能是因為豎直導(dǎo)航是當前最通用的模式之一，可以適應(yīng)數(shù)量很多的鏈接。,30,它可以與子導(dǎo)航菜單一起使用，也可以單獨使用。它很容易用于包含很多鏈接的網(wǎng)站主導(dǎo)航。側(cè)邊欄導(dǎo)航可以集成在幾乎任何種類的多列布局中。,31,32,33,34,35,側(cè)邊欄導(dǎo)航的一般特征文字鏈接作為導(dǎo)航項很普遍(包含或不包含圖標)很少使用選項卡(除了堆疊標簽導(dǎo)航模式)豎直導(dǎo)航菜單經(jīng)常含有很多鏈接,36,豎直/側(cè)邊欄導(dǎo)航缺點因為可以處理很多鏈接，當豎直菜單太長時有時可能將用戶淹沒。嘗試限制你引入的鏈接數(shù)，取而代之可以使用飛出式子導(dǎo)航菜單以提供網(wǎng)站的更多信息。同時考慮將鏈接分放在直觀的類別當中，以幫助用戶很快地找到感興趣的鏈接。,37,何時使用豎直/側(cè)邊欄導(dǎo)航豎直導(dǎo)航適用于幾乎所有種類的網(wǎng)站，尤其適合有一堆主導(dǎo)航鏈接的網(wǎng)站。,38,3、中部當進入一個網(wǎng)頁的進入頁時，將導(dǎo)航按鈕放在頁面的中心位置便于瀏覽者進行選擇，進入頁類似于書籍的封面，幫助瀏覽者決定到哪里，這樣設(shè)計使導(dǎo)航看起來十分突出。,39,40,4、下部為了突出展示的內(nèi)容，將導(dǎo)航放在下部也是可以的，但要將網(wǎng)頁嚴格控制在一屏以內(nèi)，而不能在瀏覽時出現(xiàn)垂直的滾動條。,41,42,5、傾斜導(dǎo)航傾斜導(dǎo)航打破了網(wǎng)頁由于表格排版造成的橫向與豎向?qū)Ш降母窬?，擁有很強的視覺沖擊力。但是由于它的個性特征太鮮明，不適用于信息量豐富的網(wǎng)站。,43,44,6、選項卡導(dǎo)航,選項卡導(dǎo)航可以隨意設(shè)計成任何你想要的樣式，從逼真的，有手感的標簽到圓滑的標簽，以及簡單地方邊的標簽等。它存在于各種各樣的網(wǎng)站里，并且可以納入任何視覺效果。,45,46,選項卡比起其它類別的導(dǎo)航有一個明顯的優(yōu)勢：它們對用戶有積極的心理效應(yīng)。人們通常把導(dǎo)航與選項卡關(guān)聯(lián)在一起，因為他們曾經(jīng)在筆記本或資料夾里看見選項卡，并且把它們與切換到一個新的章節(jié)聯(lián)系在一起。這個真實世界的暗喻使得選項卡導(dǎo)航非常直觀。,47,選項卡導(dǎo)航的一般特征樣子和功能都類似真實世界的選項卡(就像在文件夾，筆記本等中看到的一樣)一般是水平方向的但也有時是豎直的(堆疊標簽),48,選項卡導(dǎo)航的缺點選項卡最大的缺點是它比簡單的頂部水平欄更難設(shè)計。它們通常需要更多的標簽，圖片資源以及CSS，具體根據(jù)標簽的視覺復(fù)雜度而定。選項卡的另一個缺點是它們也不太適用于鏈接很多的情況，除非它們豎直地排列(即使這樣，如果太多的話它們還是看起來很不合適)。,49,何時使用選項卡導(dǎo)航選項卡也適合幾乎任何主導(dǎo)航，雖然它們在可以顯示的鏈接上有限制，尤其在水平方向的情況下。將它們用于擁有不同風格子導(dǎo)航的主導(dǎo)航的較大型網(wǎng)站是個不錯的選項。,50,7、面包屑導(dǎo)航,面包屑的名字來源于Hansel和Gretel的故事，他們在沿途播撒面包屑以用來找到加家的路，這可以告訴你在網(wǎng)站的當前位置。這是二級導(dǎo)航的一種形式，輔助網(wǎng)站的主導(dǎo)航系統(tǒng)。,51,面包屑對于多級別具有層次結(jié)構(gòu)的網(wǎng)站特別有用。它們可以幫助訪客了解到當前自己在整站中所處的位置。如果訪客希望返回到某一級，它們只需要點擊相應(yīng)的面包屑導(dǎo)航項。,52,面包屑的一般特征一般格式是水平文字鏈接列表，通常在兩項中間伴隨著左箭頭以指示層及關(guān)系從不用于主導(dǎo)航,53,面包屑導(dǎo)航的缺點面包屑不適于淺導(dǎo)航網(wǎng)站。當網(wǎng)站沒有清晰的層次和分類的時候，使用它也可能產(chǎn)生混亂。何時使用面包屑導(dǎo)航。面包屑導(dǎo)航最適用于具有清晰章節(jié)和多層次分類內(nèi)容的網(wǎng)站。沒有明顯的章節(jié)，使用面包屑是得不償失。,54,8、標簽導(dǎo)航,標簽經(jīng)常被用于博客和新聞網(wǎng)站。它們常常被組織成一個標簽云，導(dǎo)航項可能按字母順序排列(通常用不同大小的鏈接來表示這個標簽下有多少內(nèi)容)，或者按流行程度排列。,55,56,標簽是出色的二級導(dǎo)航而很少用于主導(dǎo)航。他可以提高網(wǎng)站的可發(fā)現(xiàn)性和探索性。標簽云通常出現(xiàn)在邊欄或底部。如果沒有標簽云，標簽則通常包括于文章頂部或底部的元信息中，這種設(shè)計讓用戶更容易找到相似的內(nèi)容。,57,標簽導(dǎo)航的一般特征標簽是以內(nèi)容為中心的網(wǎng)(博客和新聞?wù)?站的一般特性僅有文字鏈接當處于標簽云中時，鏈接通常大小各異以標識流行度經(jīng)常被包含在文章的元信息中,58,標簽導(dǎo)航的缺點人們通常把標簽和博客和新聞網(wǎng)站聯(lián)系在一起(有時候也可能是電子商務(wù)網(wǎng)站)，所以如果你的網(wǎng)站與這些網(wǎng)站有本質(zhì)的不同，它可能對你就沒有幫助。標簽也會給內(nèi)容創(chuàng)作者帶來一定量的工作量，因為為了使標簽系統(tǒng)有效，每篇文章都需要打上準確的標簽。,59,何時使用標簽如果你擁有很多主題，為內(nèi)容打上關(guān)鍵詞標記是很有利的。如果你僅有幾個頁面(可能你的網(wǎng)站是一個公司網(wǎng)站)，可能就不需要給內(nèi)容打標簽了。是否結(jié)合標簽云或只是將標簽包含在元信息中得取決于你的設(shè)計。,60,9、搜索導(dǎo)航,近些年來網(wǎng)站檢索已成為流行的導(dǎo)航方式。它非常適合擁有無限內(nèi)容的網(wǎng)站(像維基百科)，這種網(wǎng)站很難使用其它的導(dǎo)航。搜索也常見于博客和新聞網(wǎng)站，以及電子商務(wù)網(wǎng)站。,61,62,搜索對于清楚知道自己想要找什么的訪客非常有用。但是有了搜索并不代表著就可以忽略好的信息結(jié)構(gòu)。它對于保證那些不完全知道自己要找什么或是想發(fā)現(xiàn)潛在的感興趣內(nèi)容的瀏覽者可以查找到內(nèi)容依然非常重要。,63,搜索導(dǎo)航的一般特征搜索欄通常位于頭部或在側(cè)邊欄靠近頂部的地方搜索欄經(jīng)常會出現(xiàn)在頁面布局中的輔助部分，如底部,64,搜索導(dǎo)航的缺點搜索最大的缺點是并非所有搜索引擎都是平等的。取決于你選擇的方案，你網(wǎng)站的搜索特性可能不能返回精確的結(jié)果或者缺失一些東西如文章元數(shù)據(jù)。搜索導(dǎo)航，對于大部分網(wǎng)站來說，應(yīng)該作為次要的導(dǎo)航形式。搜索是用戶在無法被導(dǎo)航到他們想找的東西的地方時的可靠選擇。,65,何時使用搜索導(dǎo)航對于具有無數(shù)頁面并且有復(fù)雜信息結(jié)構(gòu)的網(wǎng)站來說，肯定必須引入搜索功能。沒有它用戶可能很難通過便利鏈接和多層的導(dǎo)航來找到他們想要的信息。搜索對于電子商務(wù)網(wǎng)站也非常重要，而關(guān)鍵的一點是電子商務(wù)網(wǎng)站的搜索結(jié)果要根據(jù)網(wǎng)站存貨的多少具有相應(yīng)的篩選和排序功能。,66,10、出式菜單和下拉菜單導(dǎo)航,出式菜單(與豎直/側(cè)邊欄導(dǎo)航一起使用)和下拉菜單(一般與頂部水平欄導(dǎo)航一起使用)是構(gòu)建健壯的導(dǎo)航系統(tǒng)的好方法。它使得你的網(wǎng)站整體上看起來很整潔，而且使得深層章節(jié)很容易被訪問。,67,他們通常結(jié)合水平，豎直或是選項卡導(dǎo)航一起使用，作為網(wǎng)站主導(dǎo)航系統(tǒng)的一部分。,68,出式菜單和下拉菜單導(dǎo)航的一般特征用于多級信息結(jié)構(gòu)使用JavaScript和CSS來隱藏和顯示菜單顯示在菜單中的鏈接是主菜單項的子項菜單通常在鼠標懸停在上面時被激活，而有時候也可能是鼠標點擊時激活,69,70,出式菜單和下拉菜單導(dǎo)航缺點除非你在主導(dǎo)航鏈接邊上放置一些標識(通常是箭頭圖標)，不然訪客可能不知道那有包含子導(dǎo)航項的下拉或出式菜單，因此使這些標識很明顯是非常重要的。同時出式菜單和下拉可能使得導(dǎo)航在移動設(shè)備上非常難用，所以要確保你的移動樣式表處理了這種情況。,71,何時使用出式菜單和下拉菜單導(dǎo)航如果你想在視覺上隱藏很大的或很復(fù)雜的導(dǎo)航層次，出式菜單和下拉是很好的選擇，因為它讓用戶決定他們想看見什么，以及什么時候可以看見它們。它們可以用來在不弄亂網(wǎng)頁的情況下按需顯示很大數(shù)量的鏈接。它們還可以用來顯示子頁面和局部導(dǎo)航，并且不需要用戶首先點擊打開新的頁面。,72,11、分面/引導(dǎo)導(dǎo)航,分面/引導(dǎo)導(dǎo)航(也叫做分面檢索或引導(dǎo)檢索)最常見于電子商務(wù)網(wǎng)站?；旧蟻碚f引導(dǎo)導(dǎo)航給你提供額外的內(nèi)容屬性篩選。假設(shè)你在瀏覽一個新的LCD顯示器，引導(dǎo)導(dǎo)航可能會列出大小，價格，品牌等選頂。基于這些內(nèi)容屬性，你可以導(dǎo)航到匹配你的條件的項。,73,74,引導(dǎo)導(dǎo)航在擁有巨大數(shù)量貨物的大型電子商務(wù)網(wǎng)站中是非常寶貴的。用戶通過直接搜索通常很難找到他們想要的東西，并且增加了用戶漏掉一個產(chǎn)品的功能性。例如他們可能搜索一個灰褐色的產(chǎn)品，但你可能將它標記了灰色或褐色，雖然它可能就是用戶想要的東西。,7