企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站优化

Website development

北京网站云智优化:移动端导航的几种设计模式

发布时间:2015-11-20 09:58:32

TAGS:网站优化,北京网站优化排名

根据产品层级的深度和广度,选择适合的导航模式,是产品设计中的关键一环。与大家共勉。Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

写在前面:看了很多总结导航的文章,其实都基本雷同,但是都觉得不够细致,也不是从我们常用的产品去分析的,因此云智用自己的思路重新分析了一遍,某些段落来自引用,比如拇指热区,某些来自我读过的文章,但大部分的分析来自我的原创。这篇文章应该说是站在巨人的肩膀上,自己的一些浅见。Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

任何APP的组织信息都需要以某种导航框架固定起来,就像是建筑工人拔地而起的高楼大厦一样,地基非常重要,之后你想要盖多少层楼、每层楼有多少间房,都在地基的基础上构成。而一个新的产品也是这样,合适的导航框架,决定了产品之后的延伸和扩展。Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

不同的产品需求和商业目标决定了不同的导航框架的设计模式。而交互设计的第一步,就是决定导航的框架设计,框架确定后,才能开始逐渐丰富血肉。Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

首先,我们要为组织信息分层,在这一步骤,一定要做好信息层级的扁平化,不能把所有的组织信息都铺出来,这样做只会让用户心烦意乱找不到想要的重要操作,也不能把层级做的很深,用户没有那么多耐心跟你玩躲猫猫。一定要将做核心、稳固、根本的功能要素放在第一层页面,其他得内容收在第二层、第三层、甚至更深。Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

之后,根据层级的深度和广度来确定导航的设计模式。不要觉得这有多难,移动端的屏幕尺寸就这么大,操作方式也无非就是点击、滑动、长按这些。因此导航模式一般也就分为以下7种(当然你可以在这七种的基础上互相组合)接下来我们可以具体分析一下这七种导航模式。Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一、标签式导航Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

也就是我们平时说的tab式导航,是移动应用中普遍、常用的导航模式,适合在相关的几类信息中间频繁的调转。这类信息优先级较高、用户使用频繁,彼此之间相互独立,通过标签式导航的引导,用户可以迅速的实现页面之间的切换且不会迷失方向,简单而高效。需要注意的是标签式导航根据逻辑和重要性控制在5个以内,多余5个用户难以记忆而且容易迷失。Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

而标签式导航还细分为底部tab式导航、顶部tab式导航、底部tab的扩展导航这三种。Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

1、底部tab式导航Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如果此时你观察一下自己手机中常用的APP你就会发现QQ、微信、淘宝、微博、美团、京东等全部都是底部tab式导航Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这是符合拇指热区操作的一种导航模式,那么什么是拇指热区呢?当你走在路上、单手持握手机并操作;站在公交车上,一手拉扶手,另一只手操作等等这些场景时,你常用的操作就是右手单手持握并操作手机,因此,对于手机来说,为触摸进行交互设计,主要针对的就是拇指。Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

但在手机操作中,拇指的可控范围有限,缺乏灵活度。尤其是在如今的大屏手机上,拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边。当用右手持握手机的时候(左撇子毕竟是少数,我们还是要为主流用户设计,拇指的热区如下图所示)Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

网站导航设计 移动端导航设计 移动站点优化 移动站点策划Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

随着手机屏幕越来越大,内容显示变多了,但是单手操作变难了。这也就是为什么,工具栏和导航条一般都在手机界面的下边缘,而将导航放置在屏幕底部即拇指热区,这样的方式为单手持握时拇指操作带来了更大的舒适性。Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

将导航放置在屏幕底部也不仅仅关乎到拇指操作的舒适性,还关系到另一个问题:如果放在上面,用手指操作时,会挡住阅读的视线。如果控件在底部,不管手怎么移动,至少不会挡住主要内容,从而给予清晰的视角。呈递内容的屏幕在上方,控制按键在下方。Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这也是为什么我是个果粉的原因,iPhone把一个需要按压的home键放在手机底部比Android手机将三个触摸式物理按键放在底部高明多了,这些接近屏幕边缘的物理按键挤在一起,手指非常不便于操作。(华为甚至直接将3个物理按键放在了屏幕里),尤其是在我玩游戏的时候总会误触发这3个物理按键,造成无意退出,非常不爽。如果再将导航也放置在底部,只能对舒适性说拜拜了(市面上的主流Android手机)Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

网站导航设计 移动端导航设计 移动站点优化 移动站点策划Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

2、顶部tab式导航Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Android的物理按键已经放在底部了,为了不产生堆叠,很多Android应用运用了顶部tab式导航,这是一种妥协下的行为。(下图为微信Android和iOS图)Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

网站导航设计 移动端导航设计 移动站点优化 移动站点策划Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

而如今,在妥协物理按键和拇指操作舒适中,微信Android版抛弃了顶部导航的方式,和IOS保持了一致Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

网站导航设计 移动端导航设计 移动站点优化 移动站点策划Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

当然顶部导航也不是那么一无是处,QQ音乐和酷我音乐现在用的就是顶部Tab式导航,为了更好的浏览基本信息(歌手、歌曲名)、以及支持快捷操作(播放/暂停)播放器需要固定在底部,那么顶部tab导航不失为一个好选择(如下图)Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

网站导航设计 移动端导航设计 移动站点优化 移动站点策划Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

还有腾讯新闻和网易新闻这种新闻类APP,由于内容、分类较多,运用顶部和底部双tab导航,而切换频率高的tab放在顶部,这是为什么呢?因为新闻在每个tab都是沉浸式阅读,常用的操作是在一个tab中不断地下滑阅读内容,将常用的tab放在顶部,加入手势切换的操作,反倒能带来更好地阅读体验。(如下图)Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

网站导航设计 移动端导航设计 移动站点优化 移动站点策划Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

小结:在两种情况下可以选择顶部tab式导航,Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

某项功能必须固定在底部,那么其他tab只能固定在顶部,但为了方便操作,顶部tab导航好支持手势操作,即滑动即可切换;Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

该APP是沉浸式体验,如新闻、小说等,为了带给用户更好的阅读体验,可以将tab放在顶部Wmn北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,6231,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号