一個網站的導航有效示範

來源:互聯網
上載者:User

  在我們的導航。作為人類,我們的大腦有線要注意對比,從規範的事情,脫穎而出。這就是為什麼影印機採用大的,綠色的啟動按鈕。

  這是一個更快的心算比詳盡的讀取每個應用程式的名稱。很顯然,在這兩種情況下,設計師已經把工作的優先順序和視覺語言。

  定義我們的條款

  優先順序是給人一種元素突出,相對於它的重要性(導航)層次的行為。問候一個導航的階層中,這是通過首先考慮每個元素的關係,它的使用者的目標。

  優先順序的項目,如“設定”或“設定檔”的原因通常不太明顯比上一個網站或應用程式的主要操作。它可以在各種不同的方式溝通,但本質上的優先次序,更重要的項目應該呼籲更多的關注自己。

  豐收的應用程式的優先順序比其他更經常使用的連結(報告及時間表),(設定檔)

  視覺語言,在另一方面,包括使用視覺元素,以傳達意義。很多時候是通過插圖或圖解的視覺線索,強化了功能的元素,雖然該應用程式的視覺語言。

  通過對比的方式,只考慮文本的導航結構-尤其是那些使用相同的字型大小。沒有引入/包含豐富的視覺語言,這些結構沒有達到其最大的通訊潛力。簡單的視覺線索很長的路要走,以協助使用者分析資訊,因為它們便於識別過召回。

  一些知名的網站和應用程式使用的日曆表徵圖。

  妖怪

  不幸的是,設計師經常做的正好相反,在他們的設計中。在他們的願望的一致性,他們常常迫使使用者仔細瀏覽每一個項目,直到他們找到他們想要的東西。愛默生曾經被稱為這種愚蠢的一致性“小小的心靈的妖怪。”

  讓我們來看看一些不好的例子:

  CRAIGSLIST的

  Craigslist的同時提供一些優先順序和一個不存在的視覺語言。使用者需要讀取幾乎每個條目的首頁上才能找到他們正在尋找的連結。

  吉米·約翰的網站

  每次我一個三明治吉米·約翰的網站上,我發現自己重新仔細閱讀每個導航項目。為了保持一致性,每一個導航產品看起來是一樣的:紅色,黑色和白色。吉米·約翰的三明治是偉大的,導航,所以較少。

  微軟METRO UI的

  最近違反我最喜歡的是微軟Metro UI的。這已經出了一段時間,在Windows Phone介面,並很快將抵達與Windows 8在案頭上。白字和白色的表徵圖,主畫面上所有相同顏色的瓷磚,使用者閱讀每瓦,而不是獨特的表徵圖和顏色。(約翰·C·德沃夏克在PC雜誌“最近寫了一個很大的一塊約)。

  RDIO IPHONE應用程式

  微軟Metro UI的的RDIO iPhone應用程式介面犯同樣的錯誤。雖然他們並不納入圖解,表徵圖的顏色和大小的一致性強制使用者密切掃描每個資料。否則美麗和成功的應用,我發現自己多次掃描主畫面上找到我想要的動作。

  蘋果ITUNES

  在蘋果公司的iTunes 10(以及其搜尋),側邊欄的色彩轉換成灰階。在帶來一致性,蘋果去掉了每個項目之間的對比,因此需要使用者更加緊密地掃描,讀取標籤,以找到所需的內容。在此之前,如果你正在尋找播客,掃描紫色的表徵圖。現在,你必須掃描“播客”這個詞,是因為表徵圖一起運行。

  iTunes 9的出現在左邊,iTunes 10的出現在右側。

  路徑滑動菜單

  路徑iPhone應用程式使用一個類似Facebook的應用程式中發現的滑動導航。然而,有一個重要的區別,在該路徑不使用的表徵圖與標籤,而 Facebook的那樣。每次我開啟路徑導航,直到我找到我想要的,我要讀的每個條目。隨著Facebook,我的視覺模式和選擇反應是認知負荷較少的要快得多。

  通過樣本學習

  所以,現在,我們已經看到了他們,我們避免這些妖怪的一致性,創造更有效導航結構?讓我們來看看一些很好的例子:

  薄荷

  薄荷長期以來被視為一個典型的使用者體驗,他們有一些不錯的領域,利用高度可視化的導航。“的方式來儲存”選項卡,特別是依賴於一個周到的表徵圖集合進行導航。

  ESPN

  ESPN網站有各種不同的導航風格貫穿始終,但我覺得懸停狀態的主導航項目,其組合的照片,視頻和各種文本的權重是特別有效。

  美國福士汽車公司

  當瀏覽的美國網站上的福士的車型選擇,下拉導覽功能表結合優先順序 -轎車前可換股票據-與視覺語言 -每輛車的一個標誌性的版本在不同的顏色。

  TWITTER的WEB應用程式

  Twitter的Web應用程式有一個非常簡單的介面,只有極少數的連結,但都伴隨著一個獨特的和有意義的表徵圖來設定它拆開,最重要的行動,組成一個新的鳴叫,設定,除了在明亮的藍色。

  INSTAGRAM的IPHONE應用程式

  Instagram的應用程式上的按鈕有效地結合這兩種優先順序和視覺語言。被確定每個按鈕相關的表徵圖,最重要的一個(相機)為中心,具有藍色背景的。

  EPB光纖

  EPB光纖網站是一個很好的使用不同的優先順序在頂級導航。主導航項目都是最重要的選項(“立即訂購”)在藍色與黑色。

  成功的指南

  我們已經看到了好的和壞的例子,現在讓我們嘗試歸納了一下。下面的指南可以協助我們建立更優先,視覺導航計劃:

  1、注意使用者的目標和/或轉換

  當試圖確定如何最佳化,使您的導航意義,認為在你的使用者的主要目標和/或網站的轉換。這些元素突出的和容易理解的。

  2、是不一致的

  靈感來自複印機,而不是努力向所有的導航項目的大小和外觀,利用不一致的設計,使最重要的項目最的知名度。

  3、使用視覺語言,不只是文本

  哪裡是有道理的,使用表徵圖和其他視覺線索帶來了額外的意義,而不是僅使用文本到您的導航。這將允許使用者的大腦處理更迅速地通過依靠模式識別而不是讀取。

  4、尺寸(顏色)的事項

  使用大小和顏色的區別,更重要的連結或按鈕來區分。

  最後的思考

  有這麼多的問題,設計時要考慮的導航,它可以很容易回落公約“的後果,創造更多的工作,為您的使用者。雖然總是會有的情況下使用這些技術沒有意義的,記住,分化可能是一個功能強大的工具。

  並非所有的導航平等。在您的導航元素,通過採用優先順序和視覺語言,就可以協助使用者完全忘了導航。他們的方式,他們可以專註於內容,他們是真的後。

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。