中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

導航在Web中扮演一個回答用戶“我是誰？”“我從哪里來?”“我到哪里去”的角色。好的導航是一個網(wǎng)站的主要基石。而在開始設計一個網(wǎng)站或者改版一個網(wǎng)頁時，它往往是設計師第一個面臨的挑戰(zhàn)。

01 ?導航設計之信息架構(gòu)

? ? ? ?信息架構(gòu)決定了導航的定性，在設計之前整理清楚內(nèi)容的信息架構(gòu)，才能最大程度發(fā)揮導航的梳理網(wǎng)站結(jié)構(gòu)、有效傳遞信息功能。網(wǎng)頁結(jié)構(gòu)一共有多少層級關(guān)系？是否存在上下層關(guān)系？各類別標簽之間的關(guān)系是并列關(guān)系還是相關(guān)聯(lián)的？各子級項中是否存在可合并項？等等。要避免單純地按照簡單的邏輯關(guān)系，甚至按照業(yè)務關(guān)系把頁面導航細分到3級甚至4級或者產(chǎn)生出一些和用戶認知不相符的信息類別。每增加一級導航就增加一個認知維度，每增加一級使得整個導航系統(tǒng)復雜度增加數(shù)倍，不僅用戶的操作將成倍的增加，給網(wǎng)頁后期維護的帶來極大的成本。以下兩種圖示，就能清楚地看到相同數(shù)量頁面的不同放置方式給用戶帶來不同的體驗。

在web交互設計中存在“3次點擊”的原則，用戶在3次點擊后無法找到想要的信息或完成某個功能時，便會選擇放棄。所以對于導航來說，最基本的應該是讓用戶知道當前的頁面有哪些內(nèi)容，并且知道自己的目標內(nèi)容在哪里。導航設計的廣度和深度的區(qū)別展示，一般來說，廣度比深度的效果要好。在深結(jié)構(gòu)的各級別間選擇更容易迷失方向，甚至可能迷路。但也不要在廣度上鋪的過廣，任何時候把太多內(nèi)容show出來都會嚇退用戶，讓他們被迫患上了“選擇綜合癥”。

? ? ? ? 為了更明確用戶的認知或者甚至說在設計師面對改版等需求時，有助導航的創(chuàng)建和完善，常用的一個方法是卡片分類法。卡片分類法的進行方式很簡單，首先準備一些大小相同的空白卡片，將信息寫在不同的卡片上，讓參與人員自行分類，也可有適當?shù)慕忉屝砸龑?。每次測試的人數(shù)最好在2到4個之間，人數(shù)過少的話使用者之間不易產(chǎn)生討論，人數(shù)過多則會讓討論變得混亂，場面不易控制。這是一種在在網(wǎng)站或其他規(guī)劃初期常用的一個測試方法，能從中了解真正符合用戶習慣的信息分類，找到之間的認知差異，作為調(diào)整架構(gòu)的依據(jù)。

02 ?導航設計之交互樣式

? ? ? ? ?Web導航的最重要的作用就是將網(wǎng)站的內(nèi)容信息友好地展示給用戶。在確定好網(wǎng)站的信息架構(gòu)后，應當按需所取適當?shù)膶Ш綐邮?。而不是不管三七二十一，都來個tab式導航，覺得沒有個橫梁式的導航都不好意思說自己在做網(wǎng)頁。首先我們了解一些常用的導航形式：

1. 分步導航?（Step navigation）通常由文字標簽和箭頭組成，也要伴隨著向后退的鏈接。適用于環(huán)環(huán)相扣的頁面流程，如向?qū)?，支付，在線閱讀等，為一個接一個的頁面提供訪問。

????????????????????? （圖示出自：Google.com 注冊頁面）

2.分頁導航?（Paging navigation）經(jīng)常出現(xiàn)在搜索頁中，一次可展現(xiàn)的結(jié)果數(shù)目通常有限制，超出限制的結(jié)果將在新頁面展現(xiàn)。最簡單的分頁導航就是帶頁碼的分布導航。

? ? ? ? ? ? ? ?

?????????????????????????????????????? （圖示出自：阿里巴巴 我的阿里）

3.面包屑?（Breadcrumb trail）展示了用戶訪問網(wǎng)站的路線，由一大串的元素和節(jié)點組成。每個節(jié)點都與指向先前訪問過的頁面或父級主題相連，節(jié)點間以符號分隔，通常是大于號（>）,冒號（：）或者豎線（|）

?????? （圖示出自：Apple.com）

4.樹狀導航?（Tree navigation）允許針對層級結(jié)構(gòu)的訪問。往往包含加號和減號或小箭頭的小圖標來展開和收起下級節(jié)點。

5.網(wǎng)站地圖?（Site Map）為網(wǎng)站提供了自頂向下的迅速總覽。適用于有大量內(nèi)容和廣泛用戶群體的網(wǎng)站。因而應該比較簡單易于掃視。其中的標簽要與頁面中的標題相符。在搭建網(wǎng)站地圖時需要考慮其顆粒度，一般來說只需展現(xiàn)網(wǎng)站結(jié)構(gòu)中的兩到三級，提供到頁面的鏈接。頁腳網(wǎng)站地圖，是現(xiàn)今大中型網(wǎng)站采用的方式，把網(wǎng)站地圖一部分顯示在頁面底部，同時包含一個指向完整地圖的鏈接。

（?圖示出自：?Flickr.com）

6.Tab式導航（Tabbed Navigation）相當于導航條+Tab。導航條最簡單的形式就是把超鏈接連成一行，有時用豎線分隔開來。而Tab式導航將tab控件結(jié)合到導航條上，使得網(wǎng)站內(nèi)容結(jié)構(gòu)化，多重化。

（?圖示出自：?Motorola.com）

Amazon.com可能是第一個運用tab式導航的大型電子商務網(wǎng)站，Amazon目前線上運用的是垂直菜單+動態(tài)菜單的形式。

? ? ? ? ? ? ?（?圖示出自：??Amazon.com? 1998）

7.垂直菜單?（Vertical Menu）通常置于網(wǎng)站的左邊或者右邊的一列鏈接。垂直菜單較橫向的導航更靈活，易于向下擴展，且允許的標簽長度較長。

（?圖示出自：?Apple.com）

8.動態(tài)菜單?（Dynamic menus）也叫浮出菜單，下拉菜單或者彈出菜單。用戶須與其產(chǎn)生交互行為，菜單才能顯示。常用的交互是鼠標懸?；螯c擊。

? ? ?（?圖示出自：?Amazon.com）

9.下拉框?qū)Ш?（Drop-down menus）利用下拉菜單的特性，當選定某一項或多個選項，即將用戶帶到新的頁面。

（?圖示出自：?Dell.com）

10.標簽云?（Tag clouds）所列鏈接按字母排序，按照標簽熱門程度確定字體的大小和顏色。標簽云的設計者是交互設計師Stewart Butterfield。首先使用標簽云的是Flickr。

（?圖示出自：?Flickr.com）

03 導航設計之視覺設計

Apple常常成為設計界追隨的風向標，他們的每次視覺的更新或者迭代都會引發(fā)互聯(lián)網(wǎng)的爭相模仿。這里，收集了Apple從1997年以來視覺層面更新比較關(guān)鍵的截圖，不仿從apple.com中歷年的變化來看看導航及網(wǎng)站的視覺體系的迭代。

Apple 1997:

從下面的截圖，視覺層面上大家有些難以辨別出它出自蘋果。當時界面主要是些文字鏈組成，導航只有簡單的垂直菜單。

Apple 1998:

已初具apple網(wǎng)站布局的風格。簡潔明了的視覺風格，上下結(jié)構(gòu)，上部大幅產(chǎn)品banner海報+下部三欄形式的產(chǎn)品展示。

Apple 2000:

第一次采用頂部固定的tab式導航。有幾個顯著的特點：

1）apple 紅色logo，顯著標識homepage。

2）橫向tab式二級導航

3）白色玻璃質(zhì)感的導航視覺樣式，這種玻璃質(zhì)感風靡web界許久。

Apple 2001:

導航的視覺和交互形式并沒有發(fā)生太大的變化，只是將紅色的logo換成了藍色。并延續(xù)白色玻璃種感到整個網(wǎng)站界面和控件。

你會發(fā)現(xiàn)，包括搜索的按鈕等控件都做了圓角玻璃質(zhì)感的處理，并且配圖的外框也否相應地做了圓角的處理。

PS，當年裝1000首歌的歲月。。。

Apple 2002

導航的系統(tǒng)logo的顏色換成了灰色，玻璃質(zhì)感的漸變也做了不少的調(diào)整。還有值得注意的是iSync面板的金屬拉絲質(zhì)感。

Apple 2004:

導航系統(tǒng)的視覺設計仍然保持微調(diào)的狀態(tài)中。整體依然沒有太大的變化。

Apple 2007:

2007的導航徹底改變。采用灰色系的質(zhì)感表現(xiàn)。apple logo細致的質(zhì)感替代了原有的單色處理手法。去除了tab式二級導航。

首頁運用全屏banner突出介紹新產(chǎn)品。apple的文案也是被人津津樂道的經(jīng)典。

Apple 2010:

Apple 2011:

Apple 2012:

? 縱觀2010-2012的導航，以產(chǎn)品的維度劃分導航結(jié)構(gòu)。用產(chǎn)品的本身的名稱命名，用戶進入網(wǎng)站能直入自己想要了解的產(chǎn)品。

? 從尺寸大小，到標簽的命名，甚至是順序都沒有做變化。主要變化的導航的視覺層面和search框。

? 視覺上：1）主體導航從灰色單一漸變到深灰色質(zhì)感漸變到暗灰色的質(zhì)感漸變。

? ? ? ? ? ? ? ? 2）相反的是Apple logo 質(zhì)感一路從簡，從富質(zhì)感的到簡單的灰白漸變。

? ? ? ? ? ? ? ? 3）標簽字體和搜索icon反白處理，逐漸和深色的背景拉開層次。

? search框：1）將search框和導航從視覺層面上結(jié)合在一起，整體設計。不再簡單的白底處理。

? ? ? ? ? ? ? ? ? ?2）只保留搜索icon，去除“Search”

? ? ? ? ? ? ? ? ? ?3）tab寬度增加，壓縮search框?qū)挾取Ｊ髽薱lick后，搜索框自動展開，區(qū)別出搜索框default和輸入的使用狀態(tài)。

? ? ? ?每次以普通用戶的角度去使用apple.com，都有一種快速高效的感覺，能第一時間讓你感受到它想告訴你什么，它最近又哪些變化剛好是你想知道的。想找一個記憶中的東西并不難，search是最后一個利器。每一個配色，每一個像素的把控，每個文案的精彩都值得設計細細的品味。

以上是我在設計導航時遇到一些盲點和發(fā)現(xiàn)積累。在這次誠信中國改版的項目中被討論最多的就是導航，從結(jié)構(gòu)組織到信息層次，從交互形式到視覺樣式。討論到最后大家對導航的概念已經(jīng)模糊，常常在每次的討論ending中自問：到底什么是導航？為什么要導航？導航只能長這樣么？在做設計的過程中，要經(jīng)常對交互控件的基本概念究一究來源，會讓自己清晰的多。這里只是把我在設計導航的過程中遇到疑惑和想法小結(jié)一下，希望對大家在設計導航時有些許的幫助。

一個好的導航的關(guān)鍵是，能否解決問題。切忌“冥想”導航，讓你的導航更扎實，更清晰，更有意義。

來源：aliued