濰坊模板網站建設:導航設計模式的重要性

2019.01.03

0

在本文中,我們使用一些最熱門的網站和Web應用程序中的示例討論導航設計模式的重要性。
  
   一旦人們開始使用你的網站或Web應用程序,他們需要知道在任何時候去哪里以及如何到達那里。如果他們不能瀏覽你的應用程序,這很容易,你很快就會失去他們。因此,在你的Web應用程序中設計有效的導航是至關重要的。
  
   概述模型
  
   這是本文中詳細設計模式的概述:
  
   1。跳到分區
  
   2。單頁Web應用程序
  
   三。建議
  
   4。相關內容
  
   5。下一步
  
   6。歷史/最近的視圖
  
   7。特征內容
  
   8。無限卷軸
  
   9。步行和教練標志
  
   10。溢出菜單
  
   11。變形控制
  
   12。粘性固定導航
  
   13。垂直導航
  
   14。子彈窗
  
   15?;瑒由w、邊欄和抽屜
  
   16。所有環節
  
   1.跳轉到部分
  
   示例:Pinterest。
  
   問題:用戶希望跳過整個Web應用程序或內容。
  
   解決方案:創建快捷按鈕或熱點需要用戶直接訪問Web應用程序的一部分,通常是在開始或結束時,但更經常是在其他特定點。
  
   例如,用戶可以單擊標簽或按鈕滾動到頁面頂部,而不管它們在哪里。這也很方便,特別是如果您實現無限滾動模式(見下文),頁面實際上可以逐個加載新內容。
  
   如果用戶希望訪問控制或信息僅在頁面頂部可見,則向后滾動幾頁可能是一場噩夢。Pinterest通過提供一個低鍵跳轉到頂部按鈕立即滾動用戶來解決該用戶的頭痛問題。
  
   2.單頁Web應用程序
  
   例如:Gmail。
  
   問題:用戶希望對大多數或所有內容有一個中心視圖或操作,因此他們不需要浪費時間在頁面之間導航。
  
   解決方案:使用現代Web開發技術構建單頁應用程序,而不將自己重新加載為用戶瀏覽。此模型更多地是關于一個完全重新組織的網絡如何工作,而不是關于如何侵入應用程序。在某種程度上,單頁應用程序中的一個頁面不是真正的傳統Web意義,而是更具體的數據視圖。單頁Web應用程序(使用Ajax)是異步加載的,它們立即在用戶之間執行單獨的頁面加載操作,而無需等待。
  
   Gmail是單頁應用程序的一個很好的例子,它將多個操作集成到一個頁面中。單頁設計的趨勢是該用戶界面的核心實現更少,所有內容都可以在同一頁面上訪問。這使得瀏覽速度更快、響應速度更快,并模糊了桌面和Web應用程序之間的界限。
  
   對于Spotify這樣的Web應用程序,單頁應用程序模式變得非常重要。當您認為用戶在瀏覽更多音樂時可以在后臺播放音樂時,有一個單頁應用程序不需要重新加載頁面,因此音樂可以繼續播放。
  
   需要考慮的是,您需要實現單頁應用程序的URL結構。由于內容是使用javascript動態加載的,因此URL可能變得無用,如果不做正確的操作,訪問特定視圖可能變得不可能。Gmail和Twitter等網絡應用程序克服了顯式生成的問題。為每個視圖提供一個唯一的URL,還可以解決瀏覽器的后退按鈕變得不可用的問題。
  
   3.提案
  
   示例:Spotify。
  
   問題:用戶想知道哪些內容視圖
  
   建議的解決方案:在不同的點顯示內容和建議,以幫助用戶瀏覽內容。使用用戶配置文件首選項或過去的交互式應用程序、Facebook、EventBrite、Spotify和Yelp以及許多其他應用程序中的信息,為用戶生成自定義建議,以幫助他們發現新的和相關的內容或連接。
  
   這些建議可以采用流行的和最近發布的項目的形式。Facebook提供基于用戶交互的文章時間和相關頁面上更具體的建議,允許用戶發現新的頁面和人。用戶可以無限地使用內容,特別是在社交網絡應用程序中,用戶可以在其中生成內容。正如2014年Web用戶界面設計模式所討論的,在用戶界面中提供一個強大的推薦引擎是幫助他們發現新內容的一個很好的方法。
  
   4.相關內容
  
   例如:《紐約時報》。
  
   問題:如果當前內容不是他們想要的,或者他們只是想要更多,那么用戶希望瀏覽類似的內容。
  
   解決方案:顯示類似或相關的內容以幫助用戶找到他們正在觀看的更多類似項目。建議(上面),這是一個基本Web應用程序的UI模型,具有用戶生成的內容。除了根據用戶偏好或以前的活動定制建議之外,相關內容更多的是基于分類和標記顯示相關項目。
  
   亞馬遜、時代和紐約時報網站是當前正在瀏覽的項目和類似故事的好例子。媒體需要這一步,以便讀者通過添加鏈接來顯示文章的進一步閱讀部分。
  
   5、下一步
  
   例子:夸拉。
  
   問題:用戶想知道下一步該怎么做。
  
   解決方案:為用戶提供豐富體驗的清晰步驟列表。例如,Quora為用戶創建完成配置文件的待辦事項列表。同樣的LinkedIn列表顯示,一些用戶可以添加到他們的個人數據中,匹配的完整性模型為用戶提供激勵。
  
   最復雜的Web應用程序有多個用戶流,因此為用戶提供待辦事項列表是一個很好的引導他們前進的方法。另一個模型可以與相關內容配對;無論媒體是否好,都可以通過顯示另一篇文章的摘要,當用戶時。這允許用戶參與并沉浸在您的用戶界面中。
  
   6.歷史/最近的視圖
  
   例如:亞馬遜。
  
   問題:用戶想要記住它們和持久性。
  
   解決方案:讓用戶連接到他們上次離開的活動。例如,Amazon跟蹤用戶的瀏覽記錄并顯示最近的視圖,以便在需要時可以輕松返回。許多Web應用程序還跟蹤用戶正在做的事情,Facebook的日程安排就是最終的例子。用戶的時間表不僅記錄了帖子和Photos已上傳,它還記錄了與其他第三方頁面和Web應用程序的交互歷史,如spotify用戶在需要時可以參考。
  
   google search播放音樂,spotify跟蹤最近的歌曲。這個模型可以幫助用戶跟蹤他們所使用的內容,并可以作為書簽方法來做以后的事情。
  
   7.特征內容
  
   示例:Airbnb。
  
   問題:用戶希望知道哪些內容可用于創建應用程序。
  
   解決方案:前端具有特定功能的用戶不會在通常的時間相關內容組合中丟失。這些內容可以是付費的、流行的、新的或其他一些重要變量。
  
   特色內容為用戶提供了理解平臺可以做什么以及其他用戶正在使用它的可能性。像Airbnb、Etsy和Flickr這樣的網站在其主頁上隨機顯示內容,幫助用戶在沒有事先承諾的情況下瀏覽網站,并鼓勵現有用戶幫助他們實現更大的受眾。
  
   另一方面,它還可以幫助特定內容獲得吸引力,使其特別重要。付款或功能可以標記為明確的預期。
  
   8.無限卷軸
  
   示例:Pinterest。
  
   問題:用戶希望瀏覽所有內容。
  
   解決方案:自動加載下一組或下一頁的內容,當用戶到達當前頁的底部時,創建無限滾動頁的效果。以這種方式自動加載新內容后,用戶無需等待單擊下一頁的鏈接。無限滾動在有大量內容的情況下效果最好。如何,像大多數社交媒體巨頭,如Facebook、Twitter、Pinterest、Tumblr等等。
  
   然而,在其偉大的瀏覽內容中,特別是在多媒體庫中,兩個基本問題是用戶可能會失去方向和位置。如果他們想跳到某個特定的點或書簽并返回,無限滾動可能會導致一些問題。Facebook通過創建一個分頁/無限滾動組合來瀏覽此作業中的日程安排。AT可以跳轉到特定的月份或年份。Pinterest滾動到高級模式,并與一個小按鈕集成,允許用戶返回頁面的開頭。
  
   9.步行和客車標志
  
   例如:放松。
  
   問題:用戶希望知道如何使用不同應用程序的功能。
  
   解決方案:設計一個濰坊模板網站建設演示每個函數如何工作的預先安排或教程。許多Web應用程序已經開始使用這項技術向用戶展示,當他們第一次啟動時,有兩種基本的方法。
  
   一些Web應用程序,例如松開覆蓋路由指令、強調用戶界面的重要部分和Coach徽標,解釋它們的作用。輕松的需求被集成到下一個級別的內容中,聊天機器人幫助用戶構建個人數據。這是有意義的,因為Slack是一個聊天應用程序,用戶與Slobo一起行走。t填寫個人信息,如電話號碼和顯示姓名的對話。
  
   此外,Tumblr還提出了一個預先安排來幫助用戶理解。這個介紹也是收集重要信息的好時機,而不是簡單的注冊,就像一個安裝向導。這個模型的重要性不能過分強調。任何應用程序都不是即時直覺,因為更多的用戶了解您的產品,他們將有更多的理由回來。
  
   10.溢出菜單
  
   示例:Spotify。
  
   問題:用戶希望快速訪問他們可以執行的其他選項或操作。
  
   解決方案:隱藏可擴展菜單中的其他選項和按鈕,這樣它們就不會擾亂主界面。Facebook和Google都使用溢出菜單,通過將最重要的輔助選項隱藏在可擴展菜單中,在Web應用程序中保持非常干凈的用戶界面。
  
   它還可以用來顯示參與最重要的操作。例如,保持facebook上的pinterest共享按鈕有助于加快每個pin上常見和理想的用戶操作?;蛘?,溢出菜單可以包含額外的菜單項或可逐步添加到用戶界面的操作。
  
   11.變形控制
  
   示例:Pinterest。
  
   問題:用戶希望執行不同類型的操作,但有限的屏幕顯示所有這些控件。
  
   解決方案:替換按鈕和替換屏幕上的控件。根據用戶當前所做的操作,用戶界面可以完全用另一個元素替換一個元素,例如做、撤消、添加和刪除。當通信行為以某種方式相關時,這是有意義的。Pinterest和Facebook使用類似/的濰坊模板網站建設按鈕來保存SPAC。e并向用戶顯示當前狀態。此用戶界面設計模式可節省房地產,快速、清晰地銷毀任何操作,是一個整體解決方案。
  
   12.粘性固定導航
  
   例子:Houzz。
  
   問題:用戶希望隨時訪問網頁上的菜單。
  
   解決方案:當頂部、側面或底部導航持續滾動頁面時。在某些情況下,子部分的標題是固定的,可以滾動、替換或添加到現有的固定導航中。
  
   主導航欄是google+和interest,它位于頁面頂部,允許用戶快速訪問所需的菜單項和過濾器。使用無限滾動模式,粘性導航菜單可以大大方便用戶滾動瀏覽超過第一頁的內容。
  
   13.垂直導航
  
   示例:Spotify。
  
   問題:用戶需要一種在應用程序的不同部分之間導航的方法,但是顯示這些信息的空間有限。
  
   解決方案:用戶界面的一個重要部分給出了用戶可以滾動以獲取所需內容的列表。這也為更一般的導航、欄和其他操作釋放了UI頁眉和頁腳。傳統上,大多數導航模式都有水平的選項卡或按鈕。垂直導航模式已成為一種重要的進化導航模式。設計處理用戶生成內容的用戶調度和無限滾動內容。
  
   14、彈出窗口
  
   例如:Facebook。
  
   問題:用戶希望在不丟失當前用戶界面的情況下查看相關信息。
  
   解決方案:在項目符號窗口中顯示重要的通知和附加信息。此UI模式的優點是它提供了一種輕量級且直接的方式來查看附加信息或執行特定操作,但它們不執行用戶的當前活動。
  
   Pinterest Fitocracy使用模式彈出窗口快速移動,Facebook使用彈出窗口顯示活動欄的內容段。彈出窗口的用戶界面模式對于此類行為很重要,因為它們處理此類數據,用戶始終知道這些控件的應用。
  
   內容在后臺仍然可見,用戶可以調整排序選項或更改字體大小濰坊模板網站建設,而不必在視圖之間來回切換--所有這些都發生在這里。項目符號窗口和模式窗口也可以用來顯示重要的通知或通知,以引起用戶的注意,因為他們認為他們需要一個水龍頭或一個C。阿德刷卡。
  
   15.滑動蓋、邊欄和抽屜
  
   例如:《紐約時報》。
  
   問題:用戶需要一種在應用程序的不同部分之間導航而不受干擾的方法。
  
   解決方案:第二個應用程序的一部分,如導航、聊天、設置、用戶信息等,隱藏在可折疊的面板中,不需要隱藏在主體中。在訪問時,主體部分通常放在一邊或幻燈片中。由于滑動是應用程序的一個單獨層中的主要內容,所以有許多靈活的內容可以放置。嵌入式抽屜――圖標、文本,甚至簡單的控件都是快速訪問重要操作的可行選項。
  
   通常,抽屜可以隱藏在漢堡包菜單或簡單的箭頭中,以指示更多的內容。這是一種將所有不重要的東西隱藏在抽屜中的簡單方法,因此您只需關注如何提取每個視圖中最重要的信息。示例豐富。asana、spotify和facebook。一些更具體的示例包括houzz、navigation抽屜,當你向下滾動并重新出現在頂部時消失,紐約時報,當用戶點擊按鈕頁頂部左側時隱藏抽屜的左側。Pinterest當你向下滾動時,一個簡單的向上箭頭按鈕會出現,導航回頂部,以及它在頁面上的工作方式。
  
   16、所有環節
  
   例如:姿勢。
  
   問題:用戶需要一種一致的方式來瀏覽沒有其他內容的內容。
  
   解決方案:大多數或所有用戶都在應用程序和內容中,允許用戶自由地探索和查找他們正在尋找的信息,這些信息不會到達死胡同,或者是一系列超鏈接文本、附加按鈕、調用操作等。您通常會看到網站。如果他們想要與內容交互的應用程序,奇怪的是,他們可以n單擊它并轉到新視圖以獲得更詳細的體驗。
  
   許多具有風格和Spotify內容的Web應用程序允許用戶通過單擊來瀏覽各種各樣的內濰坊模板網站建設容,例如單擊藝術家或用戶帶您進入他們的個人資料、單擊項目、單擊表格前面以及許多其他行為。
  
   允許用戶瀏覽
  
   跟蹤用戶應該導航的位置、是否查看導航元素、他們通常如何導航到應用程序的某些區域、他們來自何處、在應用程序中(如用戶流)等等。重新排列、重新排序、調整導航元素的大小,直到獲得更多操作。當然,請深入思考用戶如何使用您。R移動應用程序,當他們試圖獲得應用程序的某些部分,以確保您不會錯過一些明顯的東西。
  
  

關鍵詞

最新案例

聯系電話 400-6065-301

留言

(-^O^-)MG魔术兔_官方版 我要注册重庆时时彩 中国比特币官网手机app 甘肃麻将黑三风玩法介绍 杭州牌九分析仪 福彩广东26选5走势图 足彩半全场怎么看 k8急速赛车 比特币现金增长潜力 金蟾捕鱼游戏机 网上麻将赢钱软件 双色球复式玩法中奖多少钱 美国棒球比分直播 比特币挖矿机设备 网上麻将赌博网站_点进进入 篮球比分直播网雷速 魅力香吻刮刮乐图片