当前位置: 主页 > 资讯中心 > 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.nuowen.net/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