高效導航設計三原則 網頁設計師必知

2022-09-21 03:57:14 字數 2341 閱讀 6143

為**設計導航就如同為房子打基礎。如果地基不牢靠,再壯觀的設計也無法掩蓋建築結構的潛在風險,其實**也是如此,如果想讓**擁有優秀的使用者體驗,良好的轉化率,可觀的銷售額,你需要花費相當的時間去了解你的使用者需求,精心設計**的內容,尋求可靠而直觀有效的內容組織體系,而這些東西的外化體現,就是**的導航設計。

什麼是導航?

許多人對於**導航設計的認知並不統一。有人認為,構成**導航的是網頁中的焦點元素,它們讓使用者清晰直觀地找到他們想要的東西。同樣的,還有人認為導航設計是一種方法,引導使用者去尋找**上最重要的資訊,以達到銷售或者查詢等目的。這些說法都沒問題,它們都是導航設計的一部分。

和設計領域的許多東西一樣,導航設計並沒有乙個統一一致的「官方」的設計方法,或者說法,每個**由於其目標、需求、設計手法、運營等諸多因素導致它們在導航設計上千差萬別,但是在最基本的設計思路和組織結構上,導航設計還是有基本的規律和原則,確保組織架構可靠,降低失敗的機率。

70percentpure 使用了最簡單常見的垂直和水平導航來引導使用者。

1、首先確定資訊架構

規劃乙個大型**,規劃好內容是進行導航設計之前的第一要務。而我們此處所說的資訊架構(ia,information architecture),是合理的組織資訊的展現形式,支撐起**內容的骨架。資訊架構的主要任務是為資訊與使用者認知之間構建一座暢通的橋梁。

從更高的位置來看待**內容有助於資訊架構的搭建。更重要的是,你得學會從使用者的角度來看待**內容這也就意味著,有的時候你得站在正反兩個位置來看待同乙個東程式設計客棧西,不同視角下你會發現有的內容的呈現方式非常***。你可以通過下面的問題來完善整個架構:

·哪些頁面是這個**必不可少的?

·從巨集觀架構上來看是否每個頁面都有其獨立的目的,它們的存在是否影響整體的連續性和可靠性?

·有哪些內容是需要在將來持續提供並更新的?

·**所需要涉及到的使用者群有哪些?(登入使用者、訂閱使用者、廣告商等等)

·針對每種使用者,**所要達成的目標是什麼?

思考這些問題能夠幫助你更好的完善**的資訊架構,為導航設計做好準備。

2、保持簡單

絕大多數的**瀏覽者可能會一致的認同這一點:**的導航區域要盡可能設計的簡單。的確,複雜而擁擠的導航欄設計會嚴重阻礙**的整體可用性。

彭博的**就是這樣做的,用簡單的導航欄設計來掩蓋**的複雜性。

然而,簡單的設計還是具有欺騙性的。使用者在程式設計客棧隨後的操作中會發現複雜的資訊被以一種看起來簡單的方式包裝了起來。這就是資訊架構的作用。

以微軟的首頁為例,**的導航欄被劃分成四個專案,考慮到微軟龐大的產品線,這幾乎已經被簡化到了極致。也正是因此,每個專案的下拉列表都被巧妙地分割成為幾段,這樣一來,導航的層級就清晰了,使用者可以更快地找到他們想要的東西,而微軟也可以將複雜多樣的產品和服務,整合到乙個看似簡單的導航欄裡面。

類似迷你站的子頁面中,導航欄也沿用了相同的設計。選單的設定乍一看和首頁很相似,實際上設計者加入了更多細節,更有針對性的功能和服務。

總的來說,這樣的導航欄設計更加易用了,在保持一致的前提下,也具備更好的**性。考慮到微軟的產品體量,產品所需的頁面數,微軟官網的設計很明顯是耗費了大量時間迭代開發的產物,殊為不易。官網在這樣的組織架構之下,不僅讓使用者的體驗更好了,而且對於微軟而言也更加便於管理內容。這不僅保持簡單,也簡化了複雜。

3、謹慎選擇方向

傳統意義上的電腦螢幕方向是橫向的,這也使得縱向下拉列表,在很長的一段時間裡面成為了導航欄設計的主流方向。這樣的設計,平衡且少干擾,從設計的角度上來看是不錯的選擇。

作為虛擬實境裝置製造商的oculyjnlwus,將導航設計成為橫向的非常符合他們的裝置的自然邏輯。

但是橫向的導航並不一定符合所有的**的需求,這也是為什麼你會看到那麼多縱向導航的**,尤其是在電商領域。彩色的標籤被用來標識不同的品類,縱向的導航設計,與現實世界中的導購圖冊暗合。這樣的導航符合多品類,多內容的資訊架構,橫向導航用在此處會因為品類和文字內容而產生混亂。

乙個良好的垂直方向的導航,要設計好並非易事,尤其是當你的**內容非常多的時候。jack jones 的**是乙個很好的學習物件。

**導航中的小圖示擁有不錯的可讀性,簡單的形狀包含了可觀的資訊,整齊而有力。每點選乙個類別,選單展開,顯示子類,邏輯清晰。

當然,你還可以在squarepusher 的**看到相對不同尋常一些的縱向選單設計。導航被設計成標籤頁,訪客可以通過滾動切換,這是一種更為線性的導航欄設計。

結語:規則正在改變

新工藝新技術的不斷湧現,使得新的設計趨勢和新的挑戰源源不斷呈現在我們面前。響應式網頁設計使得桌面上傳統的橫向導航在移程式設計客棧動端呈現的時候,更多是以縱向導航的形式表現出來。導航的設計不再被固定的方案所束縛,多種多樣的表現手法都可以產生不俗的效果。但是,設計和測試的迭代方法,最好還是圍繞著**轉化率和統計資料來進行。

本文標題: 高效導航設計三原則 網頁設計師必知

本文位址:

技巧總結!網頁設計師必知的高效導航設計三原則

文章摘要 許多人對於 導www.cppcns.com航設計的認知並不統一。有人認為,構成 導航的是網頁中的焦點元素,它們讓使用者清晰glojiinrw直觀地找到他們想要的東西。同樣的,還有人認為導航設計是一種方法,引導使用者去尋找 上最重要的資訊,以達到銷售或者查詢等目的。這些說法都沒問題,它們都是...

架構設計三原則

架構設計三原則 合適原則 合適原則宣言 合適優於業界領先 失敗原因 沒那麼多積累,卻想一步登天,是失敗的第二個主要原因 沒那麼卓越的業務場景,卻幻想靈光一閃成為天才,是失敗的第三個主要原因 沒那麼多人,卻想幹那麼多活,是失敗的第乙個原因 簡單原則 簡單原則宣言 簡單優於複雜 軟體領域的複雜性 結構的...

架構設計三原則

成為架構師,可以說是絕大多數開發者的夢想。但是這個過程並不是一件簡單的事情,如果簡單的話,意味著供過於求,就代表著不值錢了。在目前國內,架構師也算是乙個比較吃香的職業。對於年齡較大的小夥伴們,他們的選擇通常有這麼幾個?第一 繼續開發者之路,畢竟現在30多歲的資深工程師也不少 通常這些人,對於公司來說...