APP導航欄設計要點全解析

導航欄是壹排水平導航按鈕，位於頁面的頂部或側面，標題橫幅圖像的上方或下方，用於鏈接站點或軟件中的頁面。網站或應用程序使用導航欄，使訪問者更清楚地找到所需的資源區域，並搜索資源。關於APP導航條的設計，我們會為大家詳細分析，有興趣的夥伴壹起繼續往下看！充分分析APP導航欄的設計要點:首先介紹導航欄。導航欄在哪裏？UI設計組件，如選項卡欄、菜單欄、選項卡欄、列、標題列、導航列...在眾多類型和名稱中，很多新設計師很難將這些重名與對應區域區分開來。導航欄位於應用程序的頂部，即狀態欄的下方。主要用於明確頁面的位置和層次，連接父/子結構頁面，其權重要高於當前頁面的所有內容。如果用戶不知道當前位置，不知道如何回到上壹步，那壹定是導航欄有問題。雖然在iOS系統中被稱為“導航欄”，在Android系統中被稱為“頂部應用欄”，名稱不同，但其地位和作用幾乎相同。導航欄能起到什麽作用？首先，導航條可以告知用戶當前位置，並提供返回上壹步或下壹步的操作入口，不會讓用戶迷路；其次，當前頁面的內容通過頂部標簽進行排序，各類條目聚集在導航欄中，為用戶提供全局操作；最後可以增加品牌曝光度，比如容器品牌顏色，圖標品牌顏色等等。，甚至在必要的時候放置品牌LOGO。為什麽有些頁面沒有導航欄？當系統想要為用戶提供更多的信息或者用戶需要沈浸式的體驗時，系統需要弱化和隱藏導航欄來釋放更多的頁面空間，從而預留空間資源來增加單個屏幕頁面的信息。比如在線閱讀和地圖導航的過程中，系統會隱藏導航欄，因為此時用戶的註意力只是長時間停留在內容本身，並沒有頻繁的操作需求。隱藏導航欄既能預留空間，又能減少無關元素對用戶的幹擾；在選擇服務模式時，使用滴滴出行會暫時隱藏導航欄的後臺容器，只留下相關的圖標操作入口。雖然沒有完全隱藏，但壹定程度上可以緩解地圖空間不足的問題。與上述導航流程相比，場景的操作要求和頻率明顯更高。二、導航欄的結構導航欄分為左、中、右三種結構，主要由返回按鈕(左)、標題(中)、輔助操作按鈕(右)基於最常用、最常用的布局方式組成。在實際應用中，為了滿足多樣化的產品需求和用戶目標，導航欄的布局方式有很多種，無論樣式多麽復雜，都只是從設計的角度出發，目的是讓用戶的操作更加簡單方便。以iOS的雙圖為例，把導航條壹個個拆開，看看我們在各種導航條中看到過哪些元素和組件。1.容器也就是說，導航欄的範圍約束了容器，所有元素都要在容器裏。在iOS系統的應用中，常規導航欄的固定高度是88px。即使在頭條導航風格下，無論當前的高度是多少，都會隨著界面的滾動轉換成88px的正常高度，比如iPhone界面和產品管理器應用。另外，有些應用為了釋放更多的界面空間，表面上看不到容器，實際上把容器的不透明度調整為0。邏輯上，容器依然存在，每個元素依然受到容器的約束，比如滴滴打車接口。2.Title Title用來描述用戶的當前位置或者頁面的具體場景。在iPhone出現全面屏之前，由於設備屏幕空間有限，大多使用常規標題，即34px~40px(網格要求，作者壹般使用36px)來制作粗體和中標題。隨著全面屏設備的逐漸普及，屏幕高度進壹步擴大，導航欄的可用空間必然增加，頭條風格開始興起，繼而設計平臺規範出臺。頭條導航欄主要看產品定位和功能的影響力，而不僅僅是設計風格。毫無疑問，標題可以讓頁首有更多的留白，更強的呼吸感，非常適合產品結構淺、功能單壹、音量級別輕的應用，也就是我們常說的。“小而美”，人人都是產品經理平臺，在這方面做得不錯。標題導航欄的容器高度為192px，字體大小通常設置在56px~68px範圍內(網格要求，作者常用64px)。頁面滑動後會恢復到88px的正常高度，標題尺寸也會縮小。3.圖標主頁導航欄中的圖標是多樣化的，比如左邊常見的定位和品牌標識。抽屜菜單條目等。，右側的導航圖標，如搜索、消息、掃描等...二級及以後的頁面相對固定，左側必須有壹個“返回”圖標才能返回到上壹級頁面，可以是左頁眉、下頁眉、關閉按鈕等。需要註意的是，無論設計什麽風格，都要符合“回歸”風格的預期，以保證用戶不會感到困惑。功能圖標壹般放在右邊，比如二級功能的擴展，信息提交，刪除。，不要超過兩個運算符，以免造成功能級別混淆。4.按鈕導航欄的左側已經被“返回”圖標占據，按鈕只能放在右側，而且大部分是文字按鈕，主要用來承載頁面的輔助操作和功能入口。當有足夠的垂直空間進行導航時，也可以使用圓形、方形、圓角矩形等容器按鈕。頁面中的視覺權重需要由按鈕的形狀、大小、填充、邊緣等樣式決定，要靈活區分主次關系。壹個好的導航按鈕總是能吸引用戶的註意力。5.搜索框當搜索功能權重較高，以圖標和按鈕為入口無法滿足用戶的頻繁搜索需求時，不僅可以突出搜索功能，向用戶推薦搜索內容標簽，還可以通過輸入框占據導航欄的大部分區域，從而提高產品的可操作性。隨著搜索框面積的擴大，用戶無需精準點擊，觸手可及。對於內容較多的主頁，導航欄需要承載很多信息，比如標題、類別、頭像、按鈕等等。，可以及時增加導航條的高度。第二行顯示搜索框，可以避免過度弱化搜索框對用戶操作的影響，比如JD.COM、淘寶等電商應用。如果想節省整個頁面的垂直空間，有條件的話可以滑動頁面，降低導航欄的高度，只顯示搜索框，比如美團外賣。6.用戶頭像很多社交產品都會把用戶的頭像信息放在導航欄的左右兩側，以便隨時調用用戶相關的功能。比如點擊進入個人設置、個人信息展示、會員中心、個人主頁等。7.標簽/分類導航欄的分類菜單包括分段控件和標簽導航。分段控件通常包含2~4個標簽，不支持左右滑動，點擊直接切換內容；標簽導航相對靈活，非常適合分類較多的內容。所有分類都可以通過左右滑動來查看，實現更便捷的導航。8.更多菜單上面說的標簽是產品內容的分類，這裏更多的是指產品和系統的輔助功能。當頁面的某些功能經常運行或者與當前頁面信息相關，但不方便直接顯示入口，或者導航欄剩余空間不夠承載時，可以將功能放在更多的菜單中，既能為用戶提供合適的操作入口，又能滿足產品的各種隱藏需求。9.分割線不僅僅是壹條線，它可以是壹條線、壹個面或者壹個投影，用來分隔導航欄和內容區的邊界線。用戶可以在視覺上遮擋感知內容區域，避免頁面上下滑動後重復掃描頂部位置。分割線是為了體現導航欄和內容界面的層次關系。缺乏視覺分割，可能會讓用戶覺得是壹個層次，增加感知難度。當然，並不是所有的應用或界面都需要視覺分割，比如界面內容較少，界面背景顏色與導航欄容器明顯不同，多圖/多卡...第三，導航欄樣式分類為1。95%以上的二級及後續界面都是常規的導航欄，在壹些相對簡單的主頁中也會用到這種類型。以iOS的雙圖為例。容器的高度固定在88px，基本由按鈕和標題組成，背景色多為白色或主色。2.頭條iOS11系統發布後，頭條導航欄逐漸流行起來。標題壹般只出現在首頁(底部標簽功能分類)，詳細解釋基本規範。標題導航條會給人壹種高強度、高透明度的空間感。整體風格趨於簡單，不適合電子商務應用。因為占用空間大，適合新聞、社交、工具型、功能單壹的應用。3.搜索框的類型根據搜索功能的權重，在常規的導航欄中添加壹個搜索框，而不是標題顯示。由於空間限制，搜索框的高度壹般設置在56px到64px之間，寬度取決於其他功能圖標的數量。如果圖標比較多，搜索框可以放在第二行。如果沒有特別的需要，盡量把整個搜索框放在中間，這樣兩邊距離相等或者兩邊圖標數量相同，可以提高視覺美感。4.選項卡導航選項卡欄有兩種:分段控制和多選項卡導航，選中的選項卡需要清晰突出顯示。上面有詳細的規格，暫時不贅述。5.列導航條列導航可以是以上任何壹種類型，唯壹的區別是視覺層沒有容器(或者不透明度為0%)。在初始狀態下，可以與背景/圖片融為壹體，對節省頭部空間和渲染氣氛有很大作用，也可以減少導航欄與內容區的分離感，這在電子商務應用中很常見。當頁面滑動到背景消失時，會逐漸恢復正常樣式。要特別註意背景色和導航條元素顏色的對比(比如圖標是深色的，背景必須是淺色的)。如果背景不可控，建議在導航欄下加壹個黑色透明漸變蒙版，保證信息的可識別性。6.小程序不管是哪個平臺的小程序，我們都可以理解為嵌入式的“子”應用。導航欄右上角部分是“父”app的原生功能，不可修改。這是壹個硬性規定。另外，至於放什麽元素，用什麽類型，可以隨意發揮。第四，內容區之間的互動。眾所周知，導航欄的主要作用是方便用戶隨時進行某些功能的上壹步或下壹步操作，幫助用戶不至於迷路。但有時候，導航欄可以幫助用戶快速完成任務，重新定義交互後的內容管理和信息層次。1.單擊導航欄中的按鈕進行交互。當用戶與導航欄中的文字/圖標按鈕進行交互時，可以即時對內容進行管理，如添加、刪除、分享等操作，無需離開頁面，幫助用戶快速完成任務。2.向上滑動界面以減少導航欄的內容。隨著界面向上滑動，帶有搜索功能的大標題或占據兩行的大導航欄會恢復正常大小，信息量和層次會重新劃分，以削弱導航欄的吸引力，減少對用戶的幹擾。3.向上滑動界面，添加導航欄內容。界面向上滑動交互後，原來常規樣式的導航條會自動增加信息內容。比如第壹屏滑動到壹半的時候，為了幫助用戶快速決策，在導航欄上掛了特殊的標簽和篩選條目。4.導航欄和內容區的信息劃分大部分產品都是直接用分隔線來劃分的，但是為了保持界面的整潔，減少無關信息的幹擾，導航欄和內容區的元素相隔很遠，沒有任何交互。視覺分割通過使用空格自動形成。當發生滾動交互時，空格是不可控的，導航欄下方會添加投影、分隔線或毛玻璃效果，進行視覺分割。第五，導航條的異同1。同壹個應用中的相似性在同壹個應用中，導航條的高度和位置以及它的壹些屬性(字體大小、圖標大小和顏色規格)應該是統壹的，這也是格式塔心理學之壹。“壹致性”UI設計的硬性要求。即使是標題樣式，底部標簽欄對應的頁面導航欄(主要結構和功能)也會遵循壹致性要求。當然，除了壹些只在首頁設置標題樣式的應用。顧名思義，導航欄也需要導航功能。無論用戶什麽時候擡頭(掃描導航欄)，都可以清楚地知道自己在哪裏或者在什麽地方，這主要是從標題信息中快速獲取的(後面會有壹篇關於標題設計的單獨文章)。如果當前頁面沒有標題，用戶需要從頁眉的壹些關鍵信息中獲取壹些突出的關鍵信息。壹旦頁面滑動到覆蓋關鍵信息的位置，就需要呈現標題來引導用戶避免混淆。2.這裏不同平臺的區別主要是指iOS。在比例和寬度相同的前提下，Android(MD設計規範)系統標題左對齊，容器高度高於iOS；壹般來說，iOS系統只允許標題與標題樣式左對齊。此外，Android通常會在容器底部增加壹個投影，以區分導航欄和內容區；除了上面(2-9)提到的劃分元素，iOS還可以通過高斯模糊和不透明度來區分毛玻璃效果的味道。導航欄幾乎是每個界面都必須存在的控件。雖然常用，但不是每個設計師都能設計好的。它需要在基本設計規格和功能方面被賦予更大的產品價值。APP導航欄設計得好，可能會有意想不到的好處。以上詳細解釋了APP導航欄的設計要點。妳可以根據這幾點把它們運用到自己的APP導航欄設計中去~當然，如果妳有APP設計和學習的需求，現在就可以獲得教程！