[ 網頁設計教程 ] 如何快速合理的設計網站導航系統?- 其他教程 - 骨子愛創意

教學主題: 如何快速合理的設計網站導航系統?

大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

今天的這個教學主題是: 如何快速合理的設計網站導航系統?

這教學的重點為這幾點 [ 網站導航,系統,設計,合理,快速,如何,導航,網站,項目,用 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

導航通常作為線框圖模板的一部分，即多個頁面具有相同的導航條，這些導航條組成了網站複雜的導航系統；在眾多以用戶為中心的設計方法中，很多設計師喜歡使用卡片分類進行導航設計

導航通常作為線框圖模板的一部分，即多個頁面具有相同的導航條，這些導航條組成了網站複雜的導航系統;在眾多以用戶為中心的設計方法中，很多設計師喜歡使用卡片分類進行導航設計;在敏捷的開發模式下，不可能獲取大量的用戶調查採樣，而少量的調查結果又缺乏可信度;如何快速合理的設計導航系統，是本文要討論的中心話題。

為導航建立場景映射

毋庸置疑，網絡世界是現實世界的映射;用戶在現實世界中形成的習慣和用例，這就好比戴手錶的人都會下意識的抬起手腕看時間，也許這個時候手錶恰巧不在手腕上，但是他們還會抬起手腕來看一下;在沒有時間去仔細研究用戶的情況下，需要解決“導航中應當包括哪些項目”的問題;為用戶建立一個簡單的網絡映射，就能夠輕鬆建立導航中的項目，讓他們感覺熟悉，用起來方便。

聰明的設計人員總是善於觀察生活的，實際上，當策劃一個與手機有關的網站時，只要親身的體驗一下手機的賣場就好咯：促銷海報、產品陳列櫃、導購人員、售後服務人員……只要把這些現實元素的服務功能映射到網站中就能構架一個最基本的導航系統了。

電子商務網站的購物車並不是網絡時代最偉大的發明，設計人員參考了超級市場的一些靈巧設計，將人們現實世界購物的過程進行了良好的映射;一些傳統的行業，經過千百年的積累形成了固有的良好模式，這些人與人、人與物之間的交互，只需要簡單的思考就能夠應用到萬維網上去。

如果讀者正在設計一個特殊的網站，而又很難找到對應的場景進行調查研究，那麼可以參考一個通用的現實場所——圖書館;信息架構學的鼻祖就是圖書館管理學，書籍是網絡出現之前，人們獲取信息的最主要手段。圖書被整齊的按照分類擺放在書架上;圖書館會為每一本書一個獨特的編號;圖書館允許那些持有會員卡的用戶借閱圖書;圖書館管理員會如實的記錄圖書的借閱情況;很多圖書館會按照用戶的年齡和專業提供有區別的服務;用戶通常會去一份藏書單上尋找自己喜歡的書目和簡介;如果某一本圖書全部被借光，那麼讀者只能等到其他人歸還才有可能閱讀到……只要去縝密思考，這一切都可以映射到網站的設計中來，特別是導航的設計。

網站除了簡單的信息服務，可能還包含信息推送和主動提醒等業務，此時，可以設想這家圖書館帶有“郵局”的功能，即可以讓用戶索取信息又能夠提供信件轉發和包裹快遞服務。

場景映射雖然不能建立“完美”的導航系統，但是可以快速有效的建立一套“合理”的用戶分流手段;當“合理”比“完美”更迫切時候，大膽的嘗試場景映射去設計導航中的項目吧。

壓扁!壓扁!再壓扁

導航的偏平化，是一個剛性的需求，甚至可以是“不擇手段”的;避免將內容埋藏的太深，縮短瀏覽路徑，有效幫助用戶快速找到目標內容;如何將導航合理的壓扁，如何對導航項目進行合理的安排呢?

合併縮減導航項目

如果按照先架構後設計導航的原則，幾乎是很難出現雷同導航項目的;在實際的設計中，被壓扁的導航遠遠超出了屏幕的寬度，這就必須先給導航項目減肥。不要吝惜合併那些具有相似度的項目，為了整體的和諧，犧牲局部利益在所難免。

合併項目，導航減肥[圖片點擊可看全圖]

打破從屬邏輯關係

在進行卡片分類等研究過程中，往往會建立一種極其嚴謹的從屬關係;簡而言之，卡片分類是讓邏輯清晰，但是可能導致層級過深;一個直白明了的導航可能會打破邏輯關係，採用自然語言能夠理解的結構。

用自然語言打破嚴格的從屬邏輯

多級展開式導航

即便壓縮了Navi Max Width(導航最大寬度)，還是無法把冗長導航項目裝載入有限的屏幕寬度當中，這時就要進行導航分級了;導航可以有很多級，但在線框圖設計當中，主導航應該盡量保持在2級(當然只有1級更好);當屏幕資源足夠時，盡量使用類似網站地圖的展開式導航。

復用屏幕空間資源

使用彈出菜單和無刷新的Tab選項卡切換是目前網站上經常使用的屏幕復用方法;明確這種復用是不得已而為之，並非最佳的導航設計方法;更有甚者，網站使用Flash製作彈出式導航效果，造成了可訪問性中的一大堆難題。

突破一條主導航的局限

導航系統是信息架構的表象，這並不表示導航設計是信息架構設計的全部。

很多設計人員總是把導航設計作為線框圖的第一步，這是錯誤的;只有在明確網站信息架構的本質之後，才有可能進行導航系統的設計;更推薦先確立頁面邏輯架構，然後再考慮導航系統;甚至在完成全部低保真線框圖之後，再對導航系統進行設計。

同一樣事物，從不同的角度去理解，總會有迥異的脈絡和結構;這就好比天上的雲彩，有的人會覺得某塊雲彩形狀似駿馬，而同樣一塊雲彩，其他人會覺得形狀更像棉花糖。因此，網站的導航系統可以有若干條導航，相互交織組成用戶分流系統。

使用多條導航是網站扁平化的一種變形，能夠有效的縮減Navi Max Width(導航最大寬度)，增加同一內容的入口路徑;某個頁面中可能只有其中的一條導航;兩條導航可以並存，同時發揮作用，存在內容交集。

例如設計一個賽車場的網站，通常可以有兩個思路：一、從賽車場的角度解析網站架構;二、從各種賽事的角度規劃內容。賽車場是一個非常獨特的例子，某時某地，只能進行某項賽事的某種比賽，而不可能存在并行的情況;這種空間和時間上不存在交集的例子恰恰是那些可以使用多條導航產生交集的情況。

賽車場網站擁有兩個導航條，分別是以場地為核心的Navi#01和以賽事為核心的Navi#02，它們的導航項目如下表：

賽車場網站的導航項目

場地導航Navi#01賽事導航Navi#02

場地介紹AboutF1方程式

比賽時間表ScheduleA1方程式

賽場服務ServiceD1漂移大賽

商店Shop摩托車大獎賽Motor GP

車迷俱樂部Fan Zone超級跑車錦標賽FIA GP

聯繫信息Contact

賽車場網站的多導航結構設計實例

兩條導航是相互交融，互為交叉的關係;在具體的頁面應用中，兩條導航可能出現相互包容的關係;兩條導航項目數的乘積形成了一個龐大的排列組合矩陣，支撐着整個網站的用戶分流工作;兩股繩子緊密地纏繞在一起，成為維繫用戶和內容之間的紐帶。

在頁面級的應用中，兩條導航可能存在交集，呈現相互引用包含的狀態

必須明確：由於屏幕的寬度所限而把一條導航寫成兩排的情況不屬於多條導航的範疇。

線框圖中的導航應該細化到何種程度

很希望有專業的交互設計師負責具體的界面交互，然而線框圖設計人員普遍的獨立工作，往往需要一個人包攬所有的工作;無論是否有交互設計師支持，都推薦線框圖設計人員親自動手完成頁面中的導航部分;導航的交互形式已經基本固化了，且距離信息架構層面更近;真的不應該勞煩交互設計師去設計導航的交互。

除了要標註導航中的項目，它們的排列順序，基本的交互效果，還應當將具體的超級鏈接形式和頁面去向標註清楚。

列出導航項目，明確排列順序和超級鏈接的指向

對於彈出菜單式的多級導航，有兩種區分形式，即“父級項目鏈接”和“父級項目非鏈接”;很多設計師往往忽略了二者的區別，在線框圖交付之後的執行中，出現了“缺少頁面”的現象。

父級導航項目是否需要有超級鏈接?如果有專門屬於父級項目的頁面，當然有需要加入鏈接;如果沒有專屬頁面，可以把父級項目鏈接到第一個子項目(Son#01)中去，即便有用戶真的去點擊父級項目，也會有相應的頁面作為目標。

父級項目的鏈接情況

本章小結

導航不是網站最重要的設計環節，然而在設計線框圖中是需要特別關注的;作為信息架構和現實世界的映射，可以通過模擬的方法快速建立合理的導航系統;在盡量壓扁導航系統的前提下，可以通過合併項目、打破從屬關係等方法縮減導航最大寬度;特殊的網站系統中，可以存在多條主導航共存的局面;無論是否有交互設計師的支持，線框圖設計人員都應該將導航的細節呈現出來。

導航系統的描繪是從低保真原型向高保真原型過渡的第一步;在信息作為主體的頁面當中，如何設計應用模板后的可編輯部分，才是線框圖設計的重點。

討論：http://www.missyuan.com/viewthread.php?tid=421929

看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 如何快速合理的設計網站導航系統? 這教學會喜歡

文章標題: 骨子愛創意- 如何快速合理的設計網站導航系統?–轉載請註明來源處

本教學分類為網頁設計教程中的 其他教程相關教學

文章相關關鍵字為: 網站導航,系統,設計,合理,快速,如何,導航,網站,項目,用

本文永久連結 :如何快速合理的設計網站導航系統?

本文轉載自 :VIA