當前位置:名人名言大全網 - 心情說說 - APP常用8種導航形式。

APP常用8種導航形式。

雖然壹個應用的生死不是由導航決定的,但毫無疑問,導航方式的選擇在產品的用戶體驗中占有很大的比重。就導航本身而言,沒有好壞之分,看妳適合哪個應用。以下是我列舉的壹些常見的手機導航模式,我將壹壹舉例說明(註:重要的模式將著重分析,其余的將簡短略長,不喜歡略過)。

1,標簽類型

標簽導航是iOS平臺上公認的最經典的導航方式,市面上幾乎80%的應用都能知道。標記導航側重於平行空間的顯示。它的優點是適用於多個內容系統,重要性也差不多(對等關系)。它可以在不同頁面之間頻繁切換,壹鍵切換成本基數。缺點是占用壹定高度的空間,標簽數量有限,最多5個。

淘寶是標簽導航的標準形式,每個標簽都放在標簽欄裏作為導航分類(註意是名詞)。可以看作是壹種標準的變形形式(還有其他的變形形式,後面會討論)。雖然也有五個標簽頁,但是中間位置的標簽頁不是作為導航使用,而是壹個行為調用按鈕。行為調用按鈕主要強調壹個重要功能的快速使用,這個功能需要是應用的核心和最常用的功能,具有較高的優先級。比如instagram,它的目標是快速、精彩、有趣地分享妳隨時抓拍到的圖片,重點是能夠隨時隨地抓拍。因此,有必要將“照片”作為行為調用按鈕放在標簽欄上。

但是有些應用對於行為調用按鈕的放置是不合理的。如下圖3所示,雖然寫文章是核心功能,但是把它作為標簽欄中的壹個按鈕似乎很棒,可以在視覺上突出顯示,減少操作負荷。然而,它忽略了壹個重要的問題。從使用環境來說,文章或文檔的寫作需要在安靜專註的環境下進行,但手機app自然存在幹擾多、註意力不集中的問題。而且在手機上輸入幾百個字也是壹件痛苦的事情。對於這款產品的手機用戶來說,用戶消費內容可能比執行動作更重要。

另外,標簽導航還有壹個常見的變種,就是傳統的標簽+點聚合。這裏,我們具體說說點聚合。最廣為人知的點聚合是曾經經典的路徑結構,即抽屜導航+點聚合,如下圖——修改前的示意圖。其目的是在主界面顯示用戶使用最頻繁的多個核心功能點,方便用戶隨時調出。但是,單獨使用點聚合的應用越來越少。連路徑對這種傳統的點聚合進行了調整,變成了貼標簽的點聚合結構,如下圖所示。下圖還有風格1和2,也是這種形態的不同表現。它們的相似之處在於,使用同壹個導航入口,在同壹個級別上進行多個功能的不同操作,大部分是2-5個不同的操作選項,當然也會有更多。比如下圖的新浪微博,點擊“加號”入口,會出現更多的功能選項,而且這些功能的優先級都差不多。

事實上,在Android 5.0中,這種點聚合更常用的形式是浮動響應按鈕,它代表了這款app中最重要的操作。但目前使用場景有限,實際應用並不理想。

二、抽屜式

抽屜導航的目的是給用戶帶來更身臨其境的體驗。它的特點是“閱讀”為王,點擊切換少,專註於主要信息本身。從表現形式上看,抽屜導航符合產品的“二八”法則,即產品中只有20%的功能是常用的,所以要突出顯示,剩下的80%是不常用的,所以是隱藏的。它不像標簽導航那樣強調對等關系的切換,而是突出重要的、核心的功能。抽屜導航的另壹個優點是側邊導航可以存儲五個以上的導航標簽,節省屏幕空間。缺點是不能快速完成導航切換,運營成本高。

關於抽屜導航,安卓和ios平臺的使用也有區別。可以看我的另壹篇文章《關於Android和IOS的交互》,這裏就不贅述了。抽屜導航在Android平臺上的使用頻率高於ios。因為ios上沒有專門的抽屜導航的設計規範,所以使用起來比較隨意,表達也不受約束。

基於抽屜導航和主頁的空間位置,主要有三種風格。第壹種風格是浮動層,即導航抽屜在首頁的上層,滑動或點擊的手勢將抽屜部分遮擋或覆蓋,如下圖4所示。這種風格大部分會出現在Android上。第二種是疊加式,即導航抽屜位於首頁底部。抽屜打開後,原來的主頁會滑到屏幕右側,在主頁下方顯示導航抽屜,如下圖5所示。這種風格在ios上很常見。第三種是嵌入層,即導航抽屜和主頁在同壹層。通過滑動、平移或點擊打開抽屜,將原頁面內容推出屏幕,如下圖6所示(註意導航和主頁交界處沒有陰影)。第三種風格往往有圖圖7的如下變體,也就是說,當側邊抽屜打開時,嵌入式抽屜不僅將前壹頁向右推,還會以3D效果向後推。知道不同的風格可以在設計中酌情使用。

第三,選項卡類型

對於選項卡導航,不同的平臺有不同的設計規則。Android平臺我就不多說了。詳情請見“關於Android與IOS的交互”。今天主要說壹下ios上tab的表現。選項卡的本質是在容器的不同視圖或內容之間切換。雖然tab本身沒有特殊的規格約束,但這並不妨礙設計師自由發揮。目前市場上的tab主要有三種形式:分段式tab、固定式tab和滑動式tab。

分段頁簽:由兩段或多段等寬的線段組成,壹般不超過四段,視覺上有明顯的筆畫按鈕。segmentation選項卡通常用作二級導航,以再次對主要導航內容進行分類,或者位於頂部導航欄下方,或者直接位於導航欄上,如下圖所示。標簽是相互關聯的,只能通過點擊來切換,所以操作效率低。

另外就是固定頁簽和滑動頁簽,都可以直接點擊或者左右滑動切換選項,壹級和二級導航都可以。不同的是滑動選項卡可以有更多的選項,通過手指滑動導航可以直接找到分類,適合有很多相關類別的應用,比如下圖的電商網站。

四、下拉菜單類型

現在下拉菜單導航已經不常用了。下拉菜單和導航抽屜壹樣,是壹種著重突出內容的導航模式,壹般位於產品頂部。點擊調出導航菜單。因為導航菜單位於屏幕上方,不適合組合手勢,操作負荷大,所以不適合需要頻繁切換的功能,壹定程度上可以節省屏幕空間。壹般來說,下拉菜單很容易被滑動標簽取代,滑動標簽可以結合手勢操作,效率更高,這也是為什麽現在很少使用下拉菜單的原因,除非妳的下拉菜單選項之間有明顯的優先級區分。比如下圖,圖8中新浪微博的首頁被選為默認項,顯示所有與用戶相關的微博。壹般情況下,用戶只需要壹直瀏覽,很少需要主動點擊切換,除非是想過濾壹些特定的微博內容,這裏內容的優先級很容易區分。同樣,圖9也是如此。用戶對以項目為維度的內容分組更加關註和感興趣,所以使用下拉菜單來表達。另外,大部分菜單在點擊後都是以彈出框的形式出現,有的從底部滑出調出新的頁面菜單,如下圖:10。

動詞 (verb的縮寫)宮殿格式

宮殿導航是壹種類似手機桌面應用入口的導航方式。每個門戶網站往往是壹個相對獨立的信息內容。用戶進入壹個門戶後,只處理與這個門戶相關的內容。如果要跳轉到其他門戶,必須先返回門戶通用界面。這種導航在工具類app中經常使用,優點是功能擴展性強,可以添加多個入口。缺點是單頁承載信息弱,層次深,不適合頻繁的任務切換。下圖的美顏相機是標準的宮殿格式結構,各項功能類似於壹個獨立的app,作為壹級導航使用。這種表現形式現在越來越少了。其他三個圖屬於palace格式的變體,我稱之為數據門戶。這種只作為各類大數據入口的導航模式,現在更多的是作為二次導航,尤其是平臺產品。

六、列表式

列表導航也是壹種非常常見的導航方式。純列表導航很少見,通常和其他導航方式壹起使用,多作為二級導航。可以在列表中放置圖片、標題或詳細的文字來顯示信息。列表本身就是壹個高效的傳遞信息的載體,所以在使用列表的時候,要註意每個列表所占的屏幕空間,每個屏幕能顯示多少個列表。下圖所示的圖1-1采用列表的分組方式,圖2-2中列表的每壹項信息都可能影響用戶的點擊轉化,所以作為列表這種形式,詳細的信息非常重要。圖1-3和圖1-4是兩級列表。點擊列表右側的小符號,可以展開或隱藏信息,方便用戶查找信息,快速定位。在大多數情況下,點擊右側的小符號可能會導致快速編輯模式或壹些詳細的信息,方便用戶直接編輯或瀏覽。點擊整個列表通常會進入壹個新的詳細信息頁面。所以設計師在設計的時候要註意。

七、圖形類型

圖形導航是壹種比較直觀的導航,可以根據頁面內容的變化及時更新圖片。適用於以圖片為主的內容,如新聞、美食、旅遊、視頻圖片等,常用作二次導航。因為圖片可能需要經常更新,所以需要配置固定的欄目或者標題,防止用戶因為圖片不斷更新而找不到入口。這種形式的導航往往采用網格布局,如下圖所示,每行基本會有1-3個圖形單元,不同的網格布局決定了每個屏幕容納的圖標數量,所以用戶的瀏覽效率和點擊轉化率會有所不同。

八,滑行。

幻燈片的導航模式適合圖片或整個內容的並行顯示,用戶可以通過左右滑動手指來切換當前內容。壹般情況下,幻燈片數量不宜過多,最好控制在7-8張以內,以免用戶疲勞。如下圖所示,最好在設計中提供視覺提示,讓用戶清楚地知道自己在哪裏,幻燈片的數量,比如添加分頁識別碼,或者下壹張圖片的隱喻。