正在發生

觀察行業視覺,用我們專業的角度,講出你們的心聲。

您當前所在的位置:原創觀點>中至勝觀點

手機網站建設中導航布局有哪些類型?

2020-01-15 95 字號 作者:

    手機網站建設中導航布局有哪些類型?導航布局,是UI設計時需要重點考慮的部分。一個手機網站的導航可以被設計成多種形式的,導航設計的合理與否,直接關系到用戶能否根據自己過去的生活習慣和直覺,不假思索地去瀏覽手機網站,并且完成用戶想要完成的任務。上篇談到了企業網站制作過程文字排版應滿足什么要求?本次談談手機網站建設中導航布局的類型。

1.jpg

    1 一級導航/主導航

    1.1 標簽式導航

    標簽式導航又叫Tab式導航,是目前移動端市場上最為廣泛的導航設計。標簽導航通常分為底部,頂部,頂、底混合使用這三種模式。

    1.1.1 底部導航

    采用文字加圖標的方式展現。一般有3~5個標簽,適合在相關的幾類信息中間頻繁的切換使用。這類信息優先級較高、用戶使用頻繁,彼此之間相互獨立,通過標簽式導航的引導,用戶可以迅速的實現頁面之間的切換且不會迷失方向,簡單而高效。它的缺點是會占用一定高度的空間,如果用戶是小屏幕手機,則視覺體驗不太好。

    1.1.2 頂部導航

    當內容分類比較多,用戶對不同內容的打開率相差不是很大,需要快速切換/調出的時候,經常會采用頂部導航設計模式。

    1.1.3 頂部、底部雙Tab導航

    標簽式導航除了設在頂部和底部,另外有些內容比較多的產品會采用頂部、底部混合使用標簽式導航,

    1.2 抽屜式導航

    抽屜導航指的是一些功能菜單按鈕隱藏在當前頁面后,點擊入口或側滑即可像拉抽屜一樣拉出菜單。這種導航設計比較適合于那么不需要頻繁切換的次要功能,例如對設置、關于、會員、皮膚設置等功能的隱藏。

    抽屜式導航的優點在于節省頁面展示空間,使主頁面更加簡潔美觀,讓用戶將更多的注意力聚焦到當前頁面。

    缺點在于次功能入口比較隱蔽,用戶不容易發現;使用次功能需要二次點擊,增加用戶使用成本。

    1.3 桌面式導航

    桌面式導航類似于操作系統或啟動控制面板,其特色是主頁由多個按鈕組成。均衡布局時,按鈕通常大小一致,以3*3、2*3、2*2和1*2等形式排布于桌面。點擊按鈕時,跳轉至其他內部子系統/子模塊。

注:當圓角矩形弧度越來越小,甚至消失不見成為正方形的時候,往往用方形格子隔開各個按鈕,使得視覺效果最好,這種模式見于下一節的“宮格式導航”中。

    1.4 宮格式導航

    宮格導航是將主要入口全部聚合在主頁面中(因其布局比較像傳統PC桌面上的圖標排列,又被稱為“桌面式導航”),每個宮格相互獨立,它們的信息間也沒有任何交集,無法跳轉互通。因為這種特質,宮格式導航被廣泛應用于各平臺系統的中心頁面。這樣的組織方式無法讓用戶在第一時間看到內容,選擇壓力較大,因此現在采用這種導航的手機網站已經越來越少,往往用在二級頁作為內容列表的一種圖形化形式呈現,或是作為一系列工具入口的聚合。

    2 二級導航

    二級導航用于在頁面及模塊中進行導航,因此這種應用通常來講至少有3層信息結構,最常見的就是國內絕大多數APP都有的“我的”功能菜單。

    2.1 列表式導航

    列表式導航作為信息組織框架,是我們在產品設計中必不可少的一個信息承載模式。列表導航與宮格導航類似,常用于二級頁面,不會默認展示任何實質內容。這種導航結構清晰,易于用戶理解,能夠幫助用戶快速的定位去到對應的頁面。列表菜單導航的每個列表均指向相應的功能/內容選項,它有許多衍生形態,包括個性化菜單列表、分組菜單列表和增強型菜單列表。增強型菜單列表是指在簡單列表的基礎上,帶有額外的搜索、瀏覽及過濾功能。

    最佳實踐:列表菜單導航適合長標題或者有副標題說明,使用類表菜單導航應該提供一個從子頁面返回類表頁面的方式,通常在標題欄添加一個帶有菜單字樣的按鈕作為返回按鈕。

    2.2 選項卡式

    底部選項卡現在幾乎成了IOS和Android兩大系統(黑莓和webOS也比較廣泛,但因為已經不是主流系統,因此暫不討論)陣營中,絕大多數應用的標配。也有非常多的應用,將Tab標簽設置再子導航欄下,即頂部導航,有點類似于傳統網站導航,如360云盤、扇貝單詞、豆瓣和Facebook等。

    最佳實踐:使用選項卡導航要注意視覺上對已選擇和未選擇的選項進行有效區分。

    2.3 圖庫式

    圖庫式界面被分割成用于導航的各個內容區塊。內容區通常載有單獨的文章、標題、照片、產品和其他能夠放置在內容區、網格或幻燈片里展示的內容。如TED、BBC NEWS、Bilibili、搜狐視頻等。

有時候如果內容區是以分組形式布局,分組的內容應設計得容易被用戶瀏覽到,如使用側Tab形式(也稱抽屜式導航)去管理分組內容,讓用戶能夠在Tab中切換,查看不同分組。

    最佳實踐:圖庫式界面的設計模式適用于用戶想要瀏覽的、經常更新的內容。

    2.4 頁面旋轉式

    頁面旋轉常見模式是使用左右滑動手勢在頁面間快速切換,用戶滑動時將顯示下一個頁面。頁面指示器(IOS系統下面的小點)顯示一共有多少頁可供切換。

    手機網站頁面旋轉導航模式有一定的局限性,當頁面超過8個時,要考慮使用列表導航。

最佳實踐:

    ①頁面旋轉導航適用于頁面數量較少的情況;

    ②使用指示器反應頁面數量和當前頁面;

    ③左右滑動手勢是最常見的旋轉導航手勢。

    2.5 圖片旋轉式

    圖片旋轉式的常見形態,是類似于2D旋轉木馬形式,圖片可以左右滑動,且沿任意方向一直滑動可重新回到初始圖片處。

    武漢網站建設中至勝網絡專注于:武漢高端網站設計、武漢小程序開發、武漢微信開發、武漢網站建設、武漢網站設計

企業網站制作過程文字排版應滿足什么要求? 企業網站設計中色彩有何特點?

企業網站制作過程文字排版應滿足什么要求?企業網站設計中色彩有何特點?
多一份參考,總有益處
聯系中至勝,免費獲得專屬《策劃方案》及報價
浙江快乐彩走势图表 中国股指期货配资网 配资平台哪个好皆选杨方配资 石家庄小姐上门特色服务 雪缘园足球即时赛果 大s黄色片 三级片免费播放器 郑州小姐一条街 到百度首页 贵州十一选五基本走 游戏四川麻将下载 市保美来AV在线 点石策略通 青海11选5*查询 200176人猛龙 日韩a最新2019 在线播放 内蒙麻将的玩法