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

本文主要討論了截至2023年底市場上最常見的導航實踐，文章涵蓋了現有的主要導航類型、導航邏輯是如何運作的、平臺解決方案的一些特點和差異。同時著重介紹了標簽欄、側邊欄/導航抽屜、基于搜索的導航和頂部欄與頂部應用欄等四種導航方式，并對它們的工作原理、使用場景以及優缺點進行了詳細解析。

導航示例：

導航是任何移動應用的核心。一個應用的成功可能取決于它的導航是否直觀、高效和用戶友好。對于設計師來說，理解導航如何在每個應用中發揮作用，以便為特定情況做出最合適的決策至關重要。本文將探討截至2023年底市場上最常見的導航實踐。

大家好！我叫 Ksenia Toloknova，目前正在為 Alpha 銀行商業應用程序創建模式。在為我們的設計系統制定導航模式時，我們的團隊遇到了一個有趣的事實 ——缺乏幫助設計師了解導航如何工作的資料。因此，我決定進行自己的研究：我與開發者交談，分析了許多應用程序，并深入研究了設計指南。

我們將涵蓋：

• 現有的主要導航類型
• 導航邏輯上是如何運作的
• 平臺解決方案的一些特點和差異（iOS與Android）

我會盡量不在本文中給出我對解決方案的主觀評估。下面你會找到來自權威來源的事實、觀察和信息。在本文中，我將專注于導航的基本元素，而不涉及輔助方面。

一、讓我們從標簽欄和導航欄開始

在現代應用中，這種類型的導航非常常見。目前，這是移動應用的主要導航方法。根據指南的不同，它被稱為不同的名稱——在界面指南中稱為標簽欄（HIG），在材料指南中稱為導航欄（M3）。

以下是一些原因：

• 易于訪問：方便手指點擊，提供輕松訪問應用程序的主要部分。
• 簡單明了：導航元素可見且基于圖標。圖標可以快速傳達關于某個部分內容的基本信息。
• 一致性：如果導航在應用程序的所有屏幕上都保持可訪問（并非總是如此，如下所述），它會創造一個可預測的用戶體驗。用戶可以始終返回到應用程序的主屏幕。

同時，這種導航也有其局限性

這種類型導航的建議項目數量是從 3 到 5 個元素。您必須將所有場景組織成這 3-5 個條件性的“文件夾”。此外，我們在字符數和字體大小上有嚴格的限制。其中想出簡潔易懂的部分名稱可能就相當具有挑戰性。

顯示選項

一旦決定您的應用需要底部導航，您就需要決定這種導航將如何工作。從技術上講，有三種可能的實施選項：

1. 導航只在主屏幕上可見。例如，假設您在底部導航中有3個部分——首頁、目錄和個人資料。當用戶深入目錄部分時，他們不再看到底部導航。
2. 導航無處不在。即使用戶進入應用內部到第二級或第三級嵌套頁面，他們仍然可以看到底部導航。
3. 默認情況下導航只在主部分上可見，并在向上滾動時出現在內部頁面上。這個邏輯在材料指南中被建議為可能性之一。

顯示選項

無論平臺如何，您都可以在 iOS 和 Android 應用程序中使用原生技術實現這些選項中的任何一個。

V1. 僅在主屏幕上的導航

在 Revolut 應用中，他們選擇了第一個選項。導航只在部分的主屏幕上可見，并且進一步消失。要查看底部導航，您必須回到其中一個主屏幕：首頁、轉賬或中心。

像 YouTube、Booking、Airbnb 以及許多其他公司已經選擇這種類型的導航用于他們的應用。Messenger應用也經常選擇這種類型，因為如果他們已經在聊天中，就不需要分散用戶的注意力。

導航欄僅位于 Revolut 應用程序的主屏幕上

順便說一下，如果我們看看 Android 應用的實現，我們會注意到一些差異 —— 在 Android 版本中，底部導航沒有這樣的美麗模糊效果。它被一個簡單的白色背景所取代。這是因為在Android平臺上實現這樣的效果存在技術困難（需要很長時間并且成本高昂），以及指南中沒有這樣的選項。所以如果你想在 iOS 應用中使用這樣的模糊效果，請準備好為 Android 準備一個替代版本。

Android 和 iOS 上的 Revolut 應用程序中的選項卡欄

解決方案的優點和缺點：

這個解決方案的一個明顯優勢是導航不會占用內部頁面的空間。用戶可以通過使用“后退”按鈕返回。一個缺點是這種方法可能會使用戶難以返回主頁面，特別是如果他們進入得太深的情況。

V2. 導航在任何地方都可見

這種行為的選擇頻率較低，一個例子是 Apple 的 Fitness 應用程序。

下面，您將看到用戶的路徑，從 Fitness+ 的主頁面開始，深入到查看冥想內容的場景中。在整個路徑中，屏幕底部的導航始終伴隨著我們。

無論我們深入場景有多深，我們都能看到導航。在這種情況下，我們開始深入探索場景的標簽始終保持活躍狀態。

Fitness 應用程序中的導航

我們只在直接觀看鍛煉視頻時看不到導航，因為它是在全屏模態窗口中實現的。全屏模態窗口和抽屜總是覆蓋導航，因為它們在所有內容之上打開。鍵盤的行為也是如此。

導航“記住”了我們的選擇。如果我們進入 Fitness+ 部分的一個鍛煉，然后點擊摘要標簽，再次點擊 Fitness+ 標簽將帶我們回到冥想頁面，而不是主 Fitness+ 屏幕。要返回主部分屏幕，您可以再次點擊 Fitness+ 標簽。

Fitness 應用程序中的導航流程

解決方案的優點和缺點：

在這種導航方式的優點中，值得注意的是它很難讓人迷失。用戶始終明白他們處于哪個部分，并且可以快速返回應用程序的主要部分。缺點是底部導航有時會占用屏幕的7-10%，考慮到我們的移動設備的大小，這是一個相當多的量。

V3. 導航在主要部分可見，并在向上滾動時出現在內部頁面上

這種類型的導航也被積極使用。例如，Medium 應用就采用了它。用戶在應用的主部分屏幕上看到導航。如果用戶移動到一個文章，他們會看到導航，但一旦他們開始閱讀并向下滾動，導航就會消失。

Medium 應用程序中的導航

解決方案的優點和缺點：

當我們有一個帶有內容的提要時，這種類型的導航可能非常方便。例如，在 Medium 應用中，用戶可以向下滾動頁面以尋找內容。他們在瀏覽時不需要導航。沒有發現這個選項的明顯缺點。然而，這并不意味著它是理想的。每個特定的應用程序都有適合的機制，不能保證這將是你特定情況下最方便的。

混合行為

有時，根據我們所在的部分，決定使用不同的導航方式。Facebook 使用了“無處不在”類型的導航，但有一個例外——主首頁標簽的工作方式不同。當我們開始向下滾動以避免干擾新聞提要時，導航會消失。

Facebook 應用程序中的導航

有趣的解決方案

大多數時候，標準顏色填充用于導航下方，但 Spotify 實現了透明漸變。這種方法在應用程序中只有暗色主題時效果很好。你可以通過在導航層下放置一個漸變層來實現它。

Binance 通過中心的特殊圖標突出顯示主要操作。點擊中心圖標會打開一個帶有操作（購買、出售、轉換等）的窗簾。這種行為指南中沒有規定，但在原生導航框架內實施并不困難。

Spotify 和 Binance 應用程序中的導航

標簽欄中有什么？

標簽欄使用條項在相同視圖中的相互排斥的內容窗格之間進行導航。

• 確保當人們導航到應用程序的不同區域時標簽欄是可見的（模態視圖內的標簽欄是一個例外）。
• 使用最少數量的標簽項。
• 為每個標簽標題使用簡潔的術語。

導航欄中有什么？

導航欄讓人們在較小的設備上切換UI視圖。

• 需要從應用程序的任何位置可訪問的頂級目的地。
• 三到五個目的地。
• 導航欄可以被對話框、底部滑塊、導航抽屜、屏幕鍵盤或其他完成流程所需的元素暫時覆蓋。。
• 在滾動時，導航欄可以出現或消失。

關于標簽欄還有什么有用的信息

在較新的 iPhone 型號中，有一個主頁指示器 —— 一種線形式的交互元素。主頁指示器有自己的高度但沒有背景。它可以與底部導航的元素共享背景。標簽欄的高度加上主頁指示器的高度形成了相當大的底部邊距。

主頁指示器

如果你想真正擺脫這個大邊距，Facebook 的人已經做到了這一點。他們創建了一個額外的設置來減少底部導航區域的高度。

Facebook 應用程序中的底部導航

盡管這個解決方案很吸引人，但我建議謹慎對待。帶有主頁指示器的 iPhone 在底部實際上沒有物理按鈕或手指空間。此外，實施此選項需要在有和沒有主頁指示器的手機上進行修改和額外測試。

二、側邊欄和導航抽屜

在這種導航中，它隱藏在一個圖標后面，一旦點擊該圖標就會從側面（通常是左側）出現。不同平臺上的命名約定不同，在人機界面中稱為“側邊欄”，在材料指南中稱為“導航抽屜”。通常選擇觸發這種導航的圖標被稱為“漢堡包”。

這種導航有許多誘人的優點，例如

• 幾乎有無限個元素，因為這個菜單可以滾動。
• 可以使用更大、更易讀的字體大小。
• 更大的靈活性——可以使用圖標或不使用它們，對元素進行視覺分組。

聽起來很棒，但有什么陷阱呢？

根據多項研究，這種導航對用戶不太友好。它也被稱為“隱藏導航”，以下是它的一些缺點：

• 隱藏導航更難被發現。
• 當導航被隱藏時，用戶不太可能使用它。
• 無論是在手機還是桌面用戶界面上，隱藏導航提供的用戶體驗都比可見或部分可見的導航差。這一結論適用于各種用戶體驗指標，包括用戶任務難度評分、完成任務所花費的時間以及任務成功率。

什么時候使用側邊欄？

這種導航在食品訂購應用程序 Foodpanda 中使用。值得注意的是，你不會在菜單項中找到餐廳和商店的列表。只有與用戶個人資料相關的部分位于導航抽屜內。它們以全屏模態窗口的形式打開。用戶在該應用程序中的主要導航是通過搜索和主屏幕進行的。

Foodpanda 應用程序中的導航抽屜

另一個有趣的例子是微軟團隊應用的 iOS 版本。在這里，同時使用了觸摸條和側邊欄（盡管這不符合指南的建議）。類似于 Foodpanda，在這里你可能會發現與用戶個人資料相關的數據——通知管理、設置和保存的書簽。這也是添加另一個帳戶的入口點。

Microsoft Teams 應用程序中的側邊欄

另一個有趣的例子是 Gmail 應用。Gmail 使用兩種類型的導航。主要郵件導航是通過漢堡包進行的。導航欄用于推廣另一個產品—— Google Meet。這是一個相當有趣且可能有效的營銷解決方案，但很少有人能夠負擔得起。

讓我們來看看側邊欄導航是如何工作的。在漢堡包里面，所有的郵件文件夾、設置和幫助都位于此處。例如，當切換到社交文件夾時，漢堡包保持不變，用戶可以通過它在不同的部分之間切換。當切換到第二級導航 —— 電子郵件時，而不是漢堡包，會出現一個“返回”箭頭。

然而，并非所有菜單項都是這樣工作的。當進入設置時，會彈出一個抽屜；而對于幫助部分，則有一個帶有返回按鈕的模擬頁面，實際上是一個模態窗口。

Gmail 應用程序中的導航

這些解決方案可能與這樣一個事實有關：許多人正在同時處理應用程序，并且解決方案并不總是完全協調一致的。

側邊欄中有什么？

側邊欄可以幫助人們瀏覽你的應用程序或游戲，提供對頂級內容集合的快速訪問。

在iOS應用程序中，考慮使用標簽欄而不是側邊欄。側邊欄界面可能需要大量的水平空間，這可能會使iPhone上的布局過于擁擠。

在指南中，不建議在手機應用程序中使用這種類型的導航。此外，由于對這一組件的限制，無法實現開箱即用的類似解決方案。如果您需要在iOS手機應用程序中實施類似的解決方案，將需要進行自定義開發。

導航抽屜里有什么？

導航抽屜在較大的設備上讓人們可以在用戶界面視圖之間進行切換。

• 導航抽屜提供了訪問目的地和應用程序功能的途徑，例如切換賬戶。
• 對于擁有5個或更多頂級目的地的應用程序、具有2個或更多級別的導航層次結構以及快速導航到無關目的地的應用程序，建議使用導航抽屜。
• 避免將導航抽屜與其他主要導航組件一起使用，例如導航欄。

Material指南建議在大型設備（平板電腦和顯示器）上使用這種導航方式，盡管它并不禁止在移動電話上使用。

三、基于搜索的導航

在擁有大量信息庫的應用程序中，經常使用基于搜索的導航。這種類型的導航很少是唯一的方法，但通常是關鍵元素之一。

在本文中，我不會深入探討搜索功能的操作機制，因為它相當廣泛。相反，我將在這篇文章中將其作為用戶進入應用程序的入口點來探索，使他們能夠在應用程序中找到所需的內容。

基于搜索的導航示例

在 Instagram 應用中，搜索是如此重要，以至于專門分配了一個導航部分用于搜索。這是整個應用程序中的全面搜索。Foodpanda 也在主頁面上提供了一個通用搜索功能，以粉紅色背景突出顯示。這種設計使用戶能夠很容易地注意到它。

PayPal 也使用搜索功能，但它僅限于特定部分。當篩選大量數據庫時，這種類型的搜索非常方便。例如，在支付交易中，找到特定的交易非常重要。

基于搜索的導航中有什么？

搜索允許人們輸入關鍵詞或短語以獲取相關信息。

• 使用搜索欄和視圖通過搜索查詢來瀏覽產品。
• 當用戶鍵入時，搜索欄可以顯示建議的關鍵字或短語。
• 始終在搜索視圖中顯示結果。
• 搜索欄可以包括一個前置的搜索圖標和一個可選的尾隨圖標。

四、頂部欄和頂部應用欄

由于手機屏幕上的空間相對較小，這種類型的導航至關重要。頂部欄（人機界面）或頂部應用欄（材料）固定在頂部并始終可見，以幫助用戶導航。

頂部欄和頂部應用欄示例

在頂部導航中，您可以找到

• 一個“返回”箭頭（有時帶有標簽），用于導航回到二級或更高級別的頁面，或者是一個漢堡圖標用于訪問側邊導航。
• 標題，它可以居中顯示（主要是iOS）或靠近“返回”圖標顯示（主要是Android）。
• 副標題，它可能會顯示在標題上方以提供更好的上下文理解（主要是iOS）。
• 用于額外操作的圖標。Material 指南建議按照優先級順序放置1到3個圖標。

關于標題，有三種選擇

1. 將標題微妙地放在與“返回”按鈕同一行中。它可以居中顯示（在iOS中更常見），也可以放在返回箭頭旁邊顯示（在Android中更常見）。
2. 將標題顯示為下方返回箭頭的大標題。在這種情況下，當向下滾動時標題將不可見。
3. 將標題顯示為大標題，但在向下滾動時將其移至返回箭頭旁邊。這樣，標題最初是大而可讀的，然后變小但仍可見。

對于模態窗口（對話框、面板、全屏模態窗口）、滑動、關閉按鈕（叉號）或點擊光箱區域外的區域通常用于關閉操作。本文不會涉及面板和模態窗口，但您可以在我的文章“Sheet, dialog, or snackbar — what should a designer go for?”中了解更多信息。我想提一下新來者偶爾會犯錯誤，使用返回箭頭而不是關閉按鈕來關閉操作。除非您在面板內有完整的場景，否則這個圖標是不正確的。

頂部欄中有什么？

導航欄出現在窗口或屏幕的頂部，幫助人們通過內容層次結構進行導航。

• 如果標題區域提供有用的上下文，請使用標題區域來描述當前窗口。然而，如果給導航欄加標題似乎多余，您可以將標題區域留空。
• 考慮暫時隱藏導航欄以提供無干擾的體驗。
• 使用標準的返回按鈕。

頂部應用欄里有什么？

頂部應用欄在屏幕的頂部顯示導航、操作和文本。

• 使用頂部應用欄提供與當前屏幕相關的內容和操作，例如導航、屏幕標題和操作。
• 頂部應用欄有四種類型：居中對齊、S、M或L。
• 頂部應用欄包含一個可選的前置導航圖標（菜單圖標或后退箭頭）。
• 可以在標題后的容器末尾放置最多三個交互式圖標。將最常使用的操作放在前端邊緣附近，并逐漸向末端推進。

平臺之間頂部導航存在一些差異

我認為重要的是要注意標題與后退箭頭之間在不同平臺上的位置差異。

在 Material 指南中，標題非?？拷笸思^。這在它們之間創建了視覺連接，對于從 iPhone 切換到 Android 的一些用戶來說，它可能看起來像是上一頁的標題。

在人機界面中，他們經常在箭頭旁邊寫上點擊箭頭將返回我們的部分名稱或類似“返回”的文本提示。

標題位置不一致

還值得注意的是，在 iOS 和 Android 應用程序中，通常使用不同的圖標用于返回。在 Material 圖標庫中，甚至為 iOS 分別提供了后退和前進的圖標。

圖標通常用于返回 Material 圖標庫

通過這些內容，我想結束這篇文章，盡管關于導航還有很多要說的。非常感謝大家的支持、善意的建議和推薦。特別感謝 Artemov Rost、Denis Kozhukhar 和 Alexey Telyshev 的咨詢，以及 Igor Dolgov 的反饋。

五、總結

導航在任何應用程序中都是至關重要的組成部分。選擇正確的機制會顯著影響用戶體驗。根據目標和需求選擇導航，同時考慮到平臺特性。

您可以使用以下問題作為指導：

• 應該在屏幕的頂部顯示什么內容，是否需要通過頂部導航提供返回功能？
• 屏幕底部應該顯示什么內容？
• 在我的產品場景中，內置搜索是否對用戶有益？

這些問題將幫助您記住應用程序內的關鍵導航元素。