當前位置: 主頁 > 資訊中心 > SEO知識 >

移動站點優化:移動端導航的七種設計模式

發表日期:2015-11-19 13:37作者來源:旭昇SEO優化公司瀏覽次數: 標簽:

根據產品層級的深度和廣度,選擇適合的導航模式,是產品設計中的關鍵一環。與大家共勉。

寫在前面:看了很多總結導航的文章,其實都基本雷同,但是都覺得不夠細致,也不是從我們常用的產品去分析的,因此用自己的思路重新分析了一遍,某些段落來自引用,比如拇指熱區,某些來自我讀過的文章,但大部分的分析來自我的原創。這篇文章應該說是站在巨人的肩膀上,自己的一些淺見。

任何APP的組織信息都需要以某種導航框架固定起來,就像是建筑工人拔地而起的高樓大廈一樣,地基非常重要,之后你想要蓋多少層樓、每層樓有多少間房,都在地基的基礎上構成。而一個新的產品也是這樣,合適的導航框架,決定了產品之后的延伸和擴展。

不同的產品需求和商業目標決定了不同的導航框架的設計模式。而交互設計的第一步,就是決定導航的框架設計,框架確定后,才能開始逐漸豐富血肉。

首先,我們要為組織信息分層,在這一步驟,一定要做好信息層級的扁平化,不能把所有的組織信息都鋪出來,這樣做只會讓用戶心煩意亂找不到想要的重要操作,也不能把層級做的很深,用戶沒有那么多耐心跟你玩躲貓貓。一定要將做核心、最穩固、最根本的功能要素放在第一層頁面,其他得內容收在第二層、第三層、甚至更深。

之后,根據層級的深度和廣度來確定導航的設計模式。不要覺得這有多難,移動端的屏幕尺寸就這么大,操作方式也無非就是點擊、滑動、長按這些。因此導航模式一般也就分為以下7種(當然你可以在這七種的基礎上互相組合)接下來我們可以具體分析一下這七種導航模式。

一、標簽式導航

也就是我們平時說的tab式導航,是移動應用中最普遍、最常用的導航模式,適合在相關的幾類信息中間頻繁的調轉。這類信息優先級較高、用戶使用頻繁,彼此之間相互獨立,通過標簽式導航的引導,用戶可以迅速的實現頁面之間的切換且不會迷失方向,簡單而高效。需要注意的是標簽式導航根據邏輯和重要性控制在5個以內,多余5個用戶難以記憶而且容易迷失。

而標簽式導航還細分為底部tab式導航、頂部tab式導航、底部tab的擴展導航這三種。

1、底部tab式導航

如果此時你觀察一下自己手機中常用的APP你就會發現QQ、微信、淘寶、微博、美團、京東等全部都是底部tab式導航

這是符合拇指熱區操作的一種導航模式,那么什么是拇指熱區呢?當你走在路上、單手持握手機并操作;站在公交車上,一手拉扶手,另一只手操作等等這些場景時,你最常用的操作就是右手單手持握并操作手機,因此,對于手機來說,為觸摸進行交互設計,主要針對的就是拇指。

但在手機操作中,拇指的可控范圍有限,缺乏靈活度。尤其是在如今的大屏手機上,拇指的可控范圍還不到整個屏幕的三分之一——主要集中在屏幕底部、與拇指相對的另外一邊。當用右手持握手機的時候(左撇子畢竟是少數,我們還是要為主流用戶設計,拇指的熱區如下圖所示)

網站導航設計 移動端導航設計 移動站點優化 移動站點策劃

隨著手機屏幕越來越大,內容顯示變多了,但是單手操作變難了。這也就是為什么,工具欄和導航條一般都在手機界面的下邊緣,而將導航放置在屏幕底部即拇指熱區,這樣的方式為單手持握時拇指操作帶來了更大的舒適性。

將導航放置在屏幕底部也不僅僅關乎到拇指操作的舒適性,還關系到另一個問題:如果放在上面,用手指操作時,會擋住閱讀的視線。如果控件在底部,不管手怎么移動,至少不會擋住主要內容,從而給予清晰的視角。呈遞內容的屏幕在上方,控制按鍵在下方。

這也是為什么我是個果粉的原因,iPhone把一個需要按壓的home鍵放在手機底部比Android手機將三個觸摸式物理按鍵放在底部高明多了,這些接近屏幕邊緣的物理按鍵擠在一起,手指非常不便于操作。(華為甚至直接將3個物理按鍵放在了屏幕里),尤其是在我玩游戲的時候總會誤觸發這3個物理按鍵,造成無意退出,非常不爽。如果再將導航也放置在底部,只能對舒適性說拜拜了(市面上的主流Android手機)

網站導航設計 移動端導航設計 移動站點優化 移動站點策劃

2、頂部tab式導航

Android的物理按鍵已經放在底部了,為了不產生堆疊,很多Android應用運用了頂部tab式導航,這是一種妥協下的行為。(下圖為微信Android和iOS圖)

網站導航設計 移動端導航設計 移動站點優化 移動站點策劃

而如今,在妥協物理按鍵和拇指操作舒適中,微信Android版拋棄了頂部導航的方式,和IOS保持了一致

網站導航設計 移動端導航設計 移動站點優化 移動站點策劃

當然頂部導航也不是那么一無是處,QQ音樂和酷我音樂現在用的就是頂部Tab式導航,為了更好的瀏覽基本信息(歌手、歌曲名)、以及支持快捷操作(播放/暫停)播放器需要固定在底部,那么頂部tab導航不失為一個好選擇(如下圖)

網站導航設計 移動端導航設計 移動站點優化 移動站點策劃

還有騰訊新聞和網易新聞這種新聞類APP,由于內容、分類較多,運用頂部和底部雙tab導航,而切換頻率最高的tab放在頂部,這是為什么呢?因為新聞在每個tab都是沉浸式閱讀,最常用的操作是在一個tab中不斷地下滑閱讀內容,將常用的tab放在頂部,加入手勢切換的操作,反倒能帶來更好地閱讀體驗。(如下圖)

網站導航設計 移動端導航設計 移動站點優化 移動站點策劃

小結:在兩種情況下可以選擇頂部tab式導航,

某項功能必須固定在底部,那么其他tab只能固定在頂部,但為了方便操作,頂部tab導航最好支持手勢操作,即滑動即可切換;

該APP是沉浸式體驗,如新聞、小說等,為了帶給用戶更好的閱讀體驗,可以將tab放在頂部。

如沒特殊注明,文章均為旭昇SEO優化公司原創,轉載請注明來自http://www.5804724.live/news/26.html
相關新聞

建站中需要用到的優化措施

[對于現在 網站建設 變得越來越簡單,但是某些建站技術的人沒有相應的優化知....

日期:2015-11-09 16:53:30 瀏覽次數:191

廣州SEO談網站降權出現的情況

[今天我們來談 網站降權 后會出現那些問題,是由于那些問題導致網站被降權?....

日期:2019-03-21 17:06:34 瀏覽次數:178

企業網站建設要重視網站兼容

[企業網站在設計制作的時候,要考慮到兼容性方面的東西,比如要兼容用戶的瀏....

日期:2016-08-09 14:02:54 瀏覽次數:119

seo發布內容的標準是什么?

[基礎版 四處一詞 標題 關鍵詞標簽(因為URL出現關鍵詞) 內容里面多次出現想....

日期:2018-11-22 22:53:15 瀏覽次數:150

網站更換域名有什么損失呢?

[網站更換域名會對網站帶來比較大的影響,大一點的改動就相當于重新做了一個....

日期:2014-12-05 21:12:04 瀏覽次數:164

品牌化網站視覺設計之“淺藍

[淺藍色給人一種很寧靜安靜的心理感受。淺藍色系有淡雅、清新、浪漫、高級的....

日期:2018-05-23 00:29:57 瀏覽次數:173

深度分析百度綠蘿算法的見解

[綠蘿算法是指針對買賣鏈接作弊的網站,對于買賣鏈接會干擾搜索引擎算法,在....

日期:2019-03-11 16:09:01 瀏覽次數:100

外貿營銷網站建設特點

[目前外貿B2B與B2C竟爭激烈,企業要自己建立B2B和B2C外貿銷售平臺,由于缺乏網絡....

日期:2016-04-07 17:24:39 瀏覽次數:194

網站設計需要注意哪些

[在網站的設計的時候需要注意哪些事情.我們在這里為你說說.讓你的設計的風格....

日期:2015-12-22 16:25:22 瀏覽次數:140

企業營銷型網站怎么做

[企業做了營銷型網站沒有流量怎么辦?用戶來了就跑怎么辦?其實很多時候不是....

日期:2014-10-09 00:00:07 瀏覽次數:131

網站設計中五個錯誤將毀掉你

[網站設計發控他們的創造力,但還是需要按規矩制作,如果網站設計上出現這些....

日期:2016-03-23 16:54:51 瀏覽次數:117

企業網站如何做好內容優化工

[網站建設公司非常多,而網站的價格也是參差不齊,從1千到百萬不等,但對于....

日期:2018-06-27 15:12:15 瀏覽次數:159

相關標簽
熱門地區
成都 江西 長春 吉林 重慶 四川 成都 北京 濟南 山東 天津 河北 石家莊 廊坊 山西 太原 包頭 遼寧 沈陽 大連 黑龍江 哈爾濱 上海 江蘇 南京 浙江 杭州 合肥 福建 福州 河南 鄭州 湖北 武漢 湖南 長沙 西安 蘭州
?
QQ在線咨詢
咨詢熱線
020-82035113
QQ咨詢
2053034165
今天山西十一选五