做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

移動端導航設計,這里一定有你不知道的——細節系列第 01 篇

2024-5-23    資深UI設計者

移動端導航設計,這里一定有你不知道的——細節系列第 01 篇

 
 
 

寫這篇講導航的,本質上是希望提高自己界面設計的組件化意識,也是對近期自己看的關于導航方面文章的一個總結和輸出,

      為什么寫這篇講導航的,本質上是希望提高自己界面設計的組件化意識,也是對近期自己看的關于導航方面文章的一個總結和輸出。

      前言

      結構和組織是關于建造房間的,而導航設計則是關于增加門窗的——《信息架構》

      在英文中Navigation這個詞源于拉丁文,原意是:操縱船只在海上航行。所以導航的目的在于幫助我們到達目的地。通俗的l來說就是你知道自己在哪,下一步怎么走,如果不想去先前的目的地,那也可以順利的回到出發的原點,這就是導航的作用。

      對于導航優缺點的思考,我主要從以下三方面來考量:

      第一,操作方式。是滑動、點擊還是其他手勢,不同的操作方式難易程度是不同的;

      第二,導航所處的位置。在頁面頂端還是底部,結合操作方式來考慮操作的便捷性,例:導航在頂部,但不能滑動操作,對用戶而言便捷性就比較差;

      第三,導航模塊之間切換是否方便。是否需要頁面的跳轉才能切換不同模塊,不同的切換方式難易程度也不同;

      這篇文章主要講的是移動端的導航,但我們需要知道的是,在產品中沒有孤立存在的模塊,導航系統與組織系統、標簽系統之間是密不可分的。

      一、導航分類

      導航分為主導航與次級導航,主導航進一步又分為全局導航與瞬時導航。

      全局導航——你能看到每一個,找出你想要的那一個。

      瞬時導航——平時藏起來,需要的時候一點就出來。

      二、各種導航優缺點

    (一)底部Tab欄(標簽欄)

     底部 Tab 欄最大的優勢在于不同模塊之間方便快速的切換,無論是 iOS 還是 Andriod 系統,我們看到最多的主導航方式就是底部Tab欄,形式如下圖所示:       優點:

      切換快速方便——可以承載同一優先級的內容,位置處于頁面底部且層級扁平,可以進行方便快速的切換;

      缺點:

      遮擋內容——常駐的Tab 欄遮擋了部分內容,減少了頁面承載信息的容量,當然現在有新型模式:上滑閱讀時隱藏Tab 欄,下滑返回時顯示,這種模式某種程度上解決了這個問題;

      承載數量有限——模塊數量不超過5個,數量上的限制也就限制了 APP 主導航的分類數量,是否使用此導航方式,要根據 APP 的組織系統來決定;

      (二)底部Tab欄擴展形式——駝式導航

      優缺點與底部Tab欄基本相同,“駝峰”的作用主要是把一項對于產品來說高優先級的行動放在突出位置,并用較大的“視覺重量”來展示,如下圖所示的閑魚、有道云筆記的駝式導航,它們都有自己的最優先級的模塊需要突出展示,因此選用了駝式導航。

            (三)跳板式導航 (宮格式導航)

      跳板式導航最大優勢在于生動的圖標設計使得模塊“好找”,當然這也會有兩面性,形式如下圖所示:

      優點:

      好找——較大的設計“重量”是通過圖標來實現的,用戶對圖像的記憶是超過文字的,這也會使用戶在操作了幾次后潛意識就能找到要找的模塊,當然僅有文字的跳板式導航無此優點,如下圖所示,僅就好找這個維度,有圖標的愛奇藝是勝過僅有文字的網易嚴選的;

      缺點:

      麻煩——無法在多入口間來回轉換,不適合信息較為扁平的 APP例:新聞類 APP不適合宮格式導航,你可以想象你看完軍事類的新聞,想看看科技新聞,總得先回到主頁面再跳轉到科技類頁面,頁面跳轉的增加導致用戶操作的繁瑣程度增加;

      壓力大——希克定律指出,一個人面臨的選擇越多,壓力越大,這在宮格數量較多時會突顯,再加設計模式的扁平化,進一步增加用戶的選擇壓力;

      題外話:雖然現在宮格式導航出鏡率與早年相比大幅下降,但從手機操作系統誕生之日起,宮格式與輪播式導航的組合一直作為系統主導航存在,原因在于對大多數用戶而言經常使用的 APP 最多也就十幾個,宮格式突出圖標的展現方式有利于提高APP的辨識度。 

      (四)列表菜單式導航(層級導航)

      列表式導航的最大優勢在于可以高效、清晰地展示信息,同時可以容納較多信息,形式如下圖所示:

            優點:

      高效——Y軸方向占用空間少,可以高效、清晰地展示信息,X軸方向可以容納較多信息,適合于既要有名稱又要有描述的模塊,例:支付寶—支付-我的頁面—余額一欄就可以看到你有多少余額,而不用進入,體現了列表式導航欄的高效;

            好分組——鑒于屏幕Y軸方向有較大的空間可以利用,也就可以利用這些空間進行分組分類。

      缺點:

      麻煩——同宮格式導航導航缺點1,這里不在贅述;

      壓力大——同宮格式導航導航缺點2,舉個例子,無論iOS系統或Andriod系統設置使用的都是列表式導航,很多情況下主導航與次級導航都是列表式導航,這種層級較深的情況就需要增加搜索系統輔助查找,從視覺設計的角度來看,列表式與搜索的形式很契合;

      視覺疲勞——當同級內容過多時,由于列表式導航形式較為單一,不斷在Y軸方向滑動,容易造成視覺疲勞;

      題外話:鑒于以上優缺點,列表式導航也主要以次級導航的方式存在,僅有設置、郵箱等突出效率的 APP會將其作為主導航。

      (五)固定選項卡&分段選項卡&滾動選項卡

      iOS平臺的分段選項卡與Andriod平臺的固定選項卡、滾動選項卡本質上都是通過在頁面頂端對內容進行再分類,這三種導航的最大優點在于在能夠使用戶清晰的看到APP的分類,滾動選項卡、分段選項卡一般以二級導航的形式存在,固定選型卡既有以主導航形式存在的情況,也有以二級導航形式存在的情況,下面來看看他們分別有什么優點與缺點。

      (1)固定選項卡,形式如下圖所示:

      

 優點:

      方便——相比列表菜單及跳板式導航,固定選項卡能夠通過滑動方便的在模塊間切換內容;

      優先級一致——可以承載重要性及使用頻率處于同一等級的信息、模塊或者任務等;

      顯眼——位置處于頁面頂部,基于用戶由上至下的瀏覽習慣,固定選項卡處于頁面“顯眼處”;

      缺點: 

      承載數量有限——數量一般不超過4個;

      遮擋內容——同 Tab 欄缺點1;

      (2)滾動選項卡:

                                                                                              優點:

      能裝——可以承載多個選項卡,且部分應用選項卡內容及順序可以自己定制,這也就解決了固定模式帶來的弊端——某些用戶喜歡的內容需要滑動半天:

      瘦——由于滾動選項卡是以滑動操作為主,點按的操作方式較為低頻,因此選項卡大多以“瘦小”的文字形式展現,占用空間較少;

     缺點:

     壓力大——同跳板式導航缺點2,一般滾動選項卡數量較多,這就增加了用戶的選擇壓力。

     遮擋內容——同 Tab 欄缺點1

      (3)分段式選項卡:

            優點:

      優先級一致——可以承載重要性及使用頻率處于同一等級的信息、模塊或者任務等;

      顯眼——位置處于頁面頂部,基于用戶由上至下的瀏覽習慣,固定選項卡處于頁面“顯眼處”;

      缺點:

      不能滑——不能滑動操作,只能點按,且因分段式選項卡處于頁面頂端,給用戶的操作帶來了不便:

      承載數量有限——數量一般不超過3個;

      (五)陳列館式導航

      一般以次級導航的方式存在,最大的優勢在于能夠突出展示內容,與跳板式導航的區別在于,陳列館式導航可以隨時更新內容,類似圖片直播類的 APP 使用這種導航形式比較多,一般有三種形式——網格式布局、輪盤布局、瀑布流網格布局,如下圖所示,從左至右分別是一直播、小米有品、花瓣:

            優點:

      直觀——可以實時更新內容,對于內容的展示較為直觀;

      缺點:

      不適合當家做主——由于其適合作為展示內容的窗口,因此不適合作為主導航;

      題外話:瀑布流網格式布局的部分畫面半隱藏式的展示內容,吸引用戶繼續往下探索,有利于使用戶進入沉浸式狀態,但輪盤式布局的缺點在于在用戶以縱向瀏覽為主的情況下,向X軸要空間的但會打斷用戶向下瀏覽的順暢性,且承載內容有限,一般卡片的數量都少于10個。

      (六)隱喻式導航

      隱喻式導航的最大優勢在于降低學習成本,但我們需要避免的是為了隱喻而隱喻,不應該被隱喻限制住了手腳。

      例:如果在移動端或者PC端使用隱喻式文件夾,那你就不可能在一個文件夾中放一個文件夾,再放一個文件夾......但實際上我們可以以俄羅斯套娃的形式不斷在文件夾套文件夾,從而使對我們的資源進行更好的分類管理,打破現實中文件夾的局限性,而不是要死板硬套的隱喻。

      題外話:如下圖所示,這是錘子科技的 Smartisan OS 系統的相機圖標,這就是很好的隱喻,采用相機鏡頭=作為手機相機圖標,降低了用戶成本,當然畫的也很好。

      (七)抽屜式導航

      抽屜式導航最大的優勢在于能藏,這也注定了它最大缺點是藏起來的內容人們經常會忘了它們的存在。如下圖所示,從左至右抽屜式導航主要有三種形式,浮層式、嵌入式、3D模式。

      優點:

      能藏——將大部分模塊隱藏起來,使得界面更加美觀,且突出產品的核心功能,避免用戶被不太重要的內容所影響,畢竟用戶精力有限

      好展現創意——由于主導航的內容在大半個頁面上,頁面背景部分給設計師留下的創意空間就比較大,設計師可以結合品牌特點在背景上營造相應的氛圍。

      缺點:

      容易忘——藏在抽屜里的模塊,優先級明顯降低,所以產品大流量入口不適合放在抽屜導航中;

      題外話:基于用戶從左到右的文字瀏覽習慣,抽屜導航的圖標大部分情況下是在左上角,屬于用戶單手操作的盲區。

      (八)下拉菜單式

      與抽屜式導航類似,最大優勢在于能藏,使得界面內容保持簡潔,一般下拉式菜單不會覆蓋整個頁面,甚至也不會增加黑色蒙版,因此會給用戶頁面層級較少的錯覺,避免了頻繁的頁面跳轉。

      優點:

      能藏——將功能隱藏在一小塊,保證了界面的簡潔,同時也使得界面上能夠容納更多的操作;

      缺點:

      容易忘——同抽屜式導航缺點1。   

      題外話:在iOS中下拉菜單為自定義控件,而Andriod 系統為這種導航提供了特別的控件——Spinner控件。Spinner用于同一個類別下的不同視圖間進行導航,類似便簽類APP,在頂部設置文件夾,在此導航中包括各種不同的文件夾,類似通話便簽、私密便簽等各類文件夾,但我們在保證對用戶而言可理解且符合邏輯的情況下,不應該過于死板。

      (九)卡片式導航

      卡片式導航的原型是撲克牌,模仿了撲克牌中常見的切牌、洗牌、翻牌等手法,卡片式導航的最大優點在于可以突出內容,例:如下圖所示,最新版(8.11.0版)微博在信息架構上做了調整,視頻模塊采用了卡片式導航。

      優點:

      有趣——配合操作動效,與用戶交互的方式比較有趣,相比其他交互方式更為吸引用戶;

      秩序感——卡片整體性較好,秩序感更強,每個卡片就是一塊內容;

      缺點:

      效率低——對于卡片只能逐個查看,不能進行全局性瀏覽,也不能進行跳躍式查看,效率較低;    

      浪費空間——占用頁面空間較大,最好在需要突出內容的 APP使用這種導航方式,也就是物盡其用,避免在不必要的情況下使用卡片式導航,造成頁面空間的浪費。

      (十)輪播式導航

      這種導航方式主要是通過增加頁面指示器配合卡片式導航,讓用戶知道這里不僅僅有一張卡片,本質上來說這也是增加了頁面指示器的卡片式導航,卡片式導航有的優缺點,它也都有,只是這種導航方式不會占據整個頁面空間,從這個角度來說它最大的優勢在于向X軸方向要空間,拓展頁面范圍。

      優點:

      增加空間——從X軸方向要空間,拓展頁面范圍,使得同樣一塊內容可以展示較多內容,主要在banner、天氣類APP中使用,如下圖所示這是錘子科技商城首頁中的輪播式 banner。

      缺點:

      大家不一樣——處于第一頁面的卡片優先級遠高于其他頁面;

      承載數量有限——一般數量不會超過10個;

      效率低——同卡片式導航的缺點,對于卡片只能逐個查看,不能進行全局性瀏覽,也不能進行跳躍式查看,效率較低;  

      (十一)折疊菜單式導航

      折疊菜單式導航最大的優勢在于不用跳轉頁面就能夠看到更多信息,除列表式的折疊菜單外,也有部分APP金剛區使用折疊式菜單,如下圖所示的酷狗音樂首頁,采用這種方式的目的在于只給用戶展示最重要的流量入口,節省首頁的空間資源;

            

      優點:

      能藏——類似于抽屜式導航優點1;

      減少跳轉——避免頁面的跳轉,從而給用戶層級較少的感覺,減輕用戶使用壓力;

      缺點:

      承載數量有限——能夠承載的模塊有限,適于隱藏太多內容;        

      (十二)儀表盤式導航

      儀表盤式導航類似于列表式導航,通過各種類型圖表展示關鍵數據, 使得用戶不用跳轉至下一頁面,也能夠瀏覽關鍵數據,其優勢與劣勢同列表式導航;

      三、尾巴

      最后跟大家說說在選擇導航時的需要把握的要點,我們還是得從產品出發,從產品信息架構出發,對于寬而淺的組織架構,我們可能會選擇滾動式選項卡作為二級導航,例:今日頭條、網易新聞;對于核心業務突出的產品,我們可能會選擇抽屜式導航作為主導航,例:滴滴出行。設計,只有適合與否,適合的就是好的。

     最后的最后,這是我“這一篇就夠了”系列第一篇,下一篇講注冊登錄流程,感謝你的閱讀并期待你的關注,能對你有所啟發,是我的榮幸。

 

 

 

 

藍藍設計(91whvog3.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計APP界面設計圖標定制用戶體驗設計交互設計UI咨詢高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

關鍵詞:UI咨詢UI設計服務公司軟件界面設計公司、界面設計公司、UI設計公司UI交互設計公司數據可視化設計公司用戶體驗公司高端網站設計公司

銀行金融軟件UI界面設計能源及監控軟件UI界面設計氣象行業UI界面設計軌道交通界面設計地理信息系統GIS UI界面設計航天軍工軟件UI界面設計醫療行業軟件UI界面設計教育行業軟件UI界面設計企業信息化UI界面設計、軟件qt開發軟件wpf開發軟件vue開發

日歷

鏈接

個人資料

藍藍設計的小編 http://91whvog3.cn

存檔