1,標簽類型
標記導航是公認的iOS平臺上最經典的導航模式,市場上幾乎80%的應用程序都可以知道它。標記導航側重於平行空間的顯示。它的優點是適用於多個內容系統,並且其重要性相似(對等關系)。它可以頻繁地在不同頁面之間切換,並壹鍵切換成本基礎。缺點是占用壹定高度的空間,且標簽數量有限,最多5個標簽。
淘寶是標簽導航的標準形式,每個標簽都放在標簽列中作為導航分類(註意是名詞)。它可以被視為壹種標準的變形形式(還有其他變形形式,稍後將討論)。雖然也有五個選項卡,但中間位置的選項卡不是用作導航,而是壹個行為調用按鈕。行為調用按鈕主要強調壹個重要功能的快速使用,該功能需要是應用程序的核心和最常用的功能,並且具有較高的優先級。例如,instagram的目標是以快速、精彩和有趣的方式分享您隨時拍攝的圖片,其重點是能夠隨時隨地拍攝它們。因此,有必要將“照片”作為行為調用按鈕放在標簽欄上。
然而,壹些應用程序對行為調用按鈕的放置不合理。如下圖3所示,雖然撰寫文章是核心功能,但將其用作標簽欄中的按鈕似乎很棒,可以在視覺上突出顯示並減少操作負載。然而,它忽略了壹個重要問題。從使用環境來說,文章或文檔的寫作需要在安靜和專註的環境中進行,但移動app天然存在幹擾較多和註意力不集中的問題。而且在手機上輸入幾百個字也是壹件痛苦的事情。對於該產品的手機用戶來說,用戶消費內容可能比執行操作更重要。
此外,標簽導航還有壹種常見的變體,即傳統的標簽+點聚合。在這裏,我們具體談談點聚合。最廣為人知的點聚合是曾經的經典路徑結構,即抽屜導航+點聚合,如下圖-改版前示意圖。其目的是在主界面顯示用戶最常用的多個核心功能點,方便用戶隨時調出。然而,單獨使用點聚合的應用程序越來越少。Even path對這種傳統的點聚合進行了調整,將其轉變為附加在標簽上的點聚合結構,如下圖所示。下圖中還有風格1和2,也是這種形態的不同表現。它們的共同點是使用相同的導航門戶來執行同壹級別的多個功能的不同操作,其中大多數是2-5個不同的操作選項,當然還會有更多。比如下圖中的新浪微博,點擊“加號”入口,會出現更多的功能選項,而且這些功能的優先級也差不多。
事實上,在Android 5.0中,這種點聚合更常用的形式是浮動響應按鈕,它代表了該應用程序中最重要的操作。但目前使用場景有限,實際應用並不理想。
二、抽屜式
抽屜導航的目的是為用戶帶來更沈浸式的體驗。它的特點是“閱讀”為王,很少有點擊切換,而且它專註於主要信息本身。從表現形式上看,抽屜導航符合產品的“二八”法則,即產品中只有20%的功能是常用的,因此應該突出顯示,其余80%的功能是不常用的,因此是隱藏的。它不像標簽導航那樣強調對等關系的切換,而是突出重要和核心的功能。抽屜導航的另壹個優點是可以在側邊導航中存儲五個以上的導航標簽,從而節省屏幕空間。缺點是無法快速完成導航切換,運營成本高。
關於抽屜導航,Android和ios平臺的使用也存在差異。妳可以看我的另壹篇文章《關於Android和IOS之間的交互》,所以我在這裏就不贅述了。抽屜導航在Android平臺上的使用頻率高於ios平臺。由於ios上的抽屜導航沒有特殊的設計規範,因此使用起來更加隨意,其表達方式也不受約束。
基於抽屜導航和主頁的空間位置,主要有三種風格。第壹種樣式是浮動層,即導航抽屜在主頁的上層,通過滑動或點擊的手勢來部分遮擋或覆蓋抽屜,如下圖4所示。這種風格大多會出現在Android上。第二種是疊加式,即導航抽屜位於主頁底部。當抽屜打開時,原始主頁將滑動到屏幕右側,顯示主頁下方的導航抽屜,如下圖5所示。這種風格在ios上非常常見。第三種是嵌入式層,即導航抽屜和主頁在同壹層。通過滑動、平移或單擊打開抽屜,原始頁面內容將被推出屏幕,如下圖6所示(註意導航和主頁的交界處沒有陰影)。第三種風格通常具有圖圖7的以下變體,也就是說,當側抽屜打開時,嵌入式抽屜不僅會將前壹頁向右推,而且還會以3D效果向後推。知道不同的風格可以在設計中自由使用。
第三,選項卡類型
對於選項卡導航,不同的平臺有不同的設計規則。安卓平臺我就不多說了。詳情請見“關於Android和IOS的交互”。今天主要說壹下ios上tab的表現。選項卡的本質是在容器中的不同視圖或內容之間切換。雖然選項卡本身沒有特殊的規格約束,但這並不妨礙設計人員自由發揮。目前市場上主要有分段式拉環、固定式拉環和滑動式拉環三種拉環形式。
分段頁簽:由兩段或多段等寬的線段組成,壹般不超過四段,視覺上有明顯的筆畫按鈕。segmentation選項卡通常用作二級導航,用於再次對主導航內容進行分類,可以位於頂部導航欄下方,也可以直接位於導航欄上,如下圖所示。標簽之間相互關聯,只能通過點擊來切換,因此操作效率較低。
此外,是固定選項卡和滑動選項卡,這兩個選項卡都可以直接點擊或左右滑動來切換選項,壹級和二級導航都可以使用。不同的是滑動選項卡可以有更多的選項,並且它可以通過手指滑動導航直接找到分類,這適用於具有許多相關類別的應用程序,例如下圖所示的電子商務網站。
第四,下拉菜單類型
如今,下拉菜單導航並不常用。下拉菜單和導航抽屜壹樣,是壹種側重於突出顯示內容的導航模式,壹般位於產品的頂部。單擊調出導航菜單。由於導航菜單位於屏幕頂部,因此不適合組合手勢,操作負載較重,因此不適合需要頻繁切換的功能,並且可以在壹定程度上節省屏幕空間。壹般來說,下拉菜單很容易被滑動標簽取代,並且滑動標簽可以與手勢操作相結合,效率更高,這就是為什麽現在很少使用下拉菜單的原因,除非妳的下拉菜單選項之間有明顯的優先級區分。例如,如下圖所示,圖8中的新浪微博主頁被選為默認項目,顯示與用戶相關的所有微博。正常情況下,用戶只需要壹直瀏覽,很少需要主動點擊切換,除非他們想過濾壹些特定的微博內容,而這裏的內容優先級很容易區分。同樣,圖9也是如此。用戶更關註和更感興趣的是以項目為維度的內容分組,因此他們使用下拉菜單來表達。此外,大多數菜單在單擊後以彈出框的形式出現,有些菜單會從底部滑出以調出新的頁面菜單,如下圖所示:10。
動詞 (verb的縮寫)宮殿格式
宮殿導航是壹種類似於手機桌面應用入口的導航方式。每個門戶網站往往是壹個相對獨立的信息內容。進入門戶後,用戶只處理與該門戶相關的內容。如果他們想跳轉到其他門戶網站,他們必須首先返回到門戶網站的壹般界面。這種導航常用於工具類app中,其優點是功能擴展性強,可以添加多個入口。缺點是單頁承載信息能力較弱,層次較深,不適合頻繁的任務切換。下圖所示的美顏相機是標準的宮殿格式結構,每個功能都類似於壹個獨立的app,並且它被用作壹流的導航。這種表現形式現在越來越少了。其他三張圖屬於palace格式的壹種變體,我稱之為數據門戶。這種僅作為各類大數據入口的導航模式,現在更多地被用作二次導航,尤其是平臺產品。
六、列表類型
列表導航也是壹種非常常見的導航模式。純列表導航很少見,它通常與其他導航模式壹起使用,大多作為二級導航。可以在列表中放置圖片、標題或詳細的文字來顯示信息。列表本身是傳遞信息的高效載體,因此在使用列表時,您應該註意每個列表占用的屏幕空間以及每個屏幕上可以顯示多少個列表。下圖所示的圖1-1采用列表的分組方式,而圖2-2中列表的每壹項信息都可能影響用戶的點擊轉化,所以作為這種形式的列表,詳細的信息非常重要。圖1-3和圖1-4是兩級列表。點擊列表右側的小符號可以展開或隱藏信息,方便用戶查找信息並快速定位。在大多數情況下,單擊右側的小符號可能會導致快速編輯模式或壹些詳細信息,這便於用戶直接編輯或瀏覽。點擊整個列表通常會進入壹個新的詳細信息頁面。因此,設計師在設計時應予以重視。
七、圖形類型
圖形導航是壹種更加可視化的導航,可以根據頁面內容的變化及時更新圖片。它適用於基於圖片的內容,如新聞、美食、旅行、視頻圖片等,通常用作二級導航。因為圖片可能需要頻繁更新,所以需要配置固定的欄目或標題,防止用戶因為不斷更新的圖片而找不到入口。這種形式的導航往往采用網格布局,如下圖所示,每行基本上會有1-3個圖形單元,不同的網格布局決定了每個屏幕容納的圖標數量,因此用戶的瀏覽效率和點擊轉化率會有所不同。
八,滑。
幻燈片的導航模式適用於圖片或整個內容的並行顯示,用戶可以通過左右滑動手指來切換當前內容。正常情況下,幻燈片的數量不要太多,最好控制在7-8張以內,以免用戶疲勞。如下圖所示,最好在設計中提供視覺提示,讓用戶清楚地知道他們在哪裏以及幻燈片的數量,例如添加分頁標識碼,或下壹張圖片的隱喻。