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

网站优化

Website development

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

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

TAGS:网站优化,上海网站优化排名

根据产品层级的深度和广度,选择恰好的导航模式,是产品设计中的关键一环。与各位共勉。pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

写在前面:看了很多总结导航的文章,本来都基本雷同,但是都觉得不够细致,也不是从我们常用的产品去分析的,因此云智用自己的思路重新分析了一遍,某些段落来自引用,例如拇指热区,某些来自我读过的文章,但大部分的分析来自我的原创。这篇文章应该说是站在巨人的肩膀上,自己的一些浅见。pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

任何APP的组织信息都必需以某种导航框架固定起来,就像是建筑工人拔地而起的高楼大厦一样,地基非常重要,之后你想要盖多少层楼、每层楼有多少间房,都在地基的基础上构成。而一个新的产品也是这样,合适的导航框架,决定了产品之后的延伸和扩展。pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

不同的产品需求和商业目标决定了不同的导航框架的设计模式。而交互设计的第一步,就是决定导航的框架设计,框架确定后,才能开始逐渐丰富血肉。pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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

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

一、标签式导航pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

也就是我们平时说的tab式导航,是移动应用中普遍、常用的导航模式,恰好在相关的几类信息中间频繁的调转。这类信息优先级较高、客户使用频繁,彼此之间相互独立,通过标签式导航的引导,客户可以快速的实现页面之间的切换且不会迷失方向,简单而高效。必需留意的是标签式导航根据逻辑和重要性控制在5个以内,多余5个客户难以记忆而且容易迷失。pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

而标签式导航还细分为底部tab式导航、顶部tab式导航、底部tab的扩展导航这三种。pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

1、底部tab式导航pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

假如此时你观察一下自己手机中常用的APP你就会发现QQ、微信、淘宝、微博、美团、京东等全部全是底部tab式导航pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

这是适合拇指热区操作的一种导航模式,那么什么是拇指热区呢?当你走在路上、单手持握手机并操作;站在公交车上,一手拉扶手,另一只手操作等等这些场景时,你常用的操作就是右手单手持握并操作手机,因此,对于手机来说,为触摸进行交互设计,主要针对的就是拇指。pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

但在手机操作中,拇指的可控范围有限,缺乏灵活度。尤其是在如今的大屏手机上,拇指的可控范围还不到整个屏幕的三分之一——主要集中在屏幕底部、与拇指相对的另外一边。当用右手持握手机的时候(左撇子毕竟是少数,我们还是要为主流客户设计,拇指的热区如下图所示)pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

网站导航设计 移动端导航设计 移动站点优化 移动站点策划pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

随着手机屏幕越来越大,内容显示变多了,但是单手操作变难了。这也就是为什么,工具栏和导航条一般都在手机界面的下边缘,而将导航放置在屏幕底部即拇指热区,这样的方式为单手持握时拇指操作带来了更大的舒适性。pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

将导航放置在屏幕底部也不仅仅关乎到拇指操作的舒适性,还关系到另一个难题:假如放在上面,用手指操作时,会挡住阅读的视线。假如控件在底部,不管手怎样移动,至少不会挡住主要内容,从而给予清晰的视角。呈递内容的屏幕在上方,控制按键在下方。pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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

网站导航设计 移动端导航设计 移动站点优化 移动站点策划pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

2、顶部tab式导航pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

Android的物理按键已经放在底部了,为了不产生堆叠,很多Android应用运用了顶部tab式导航,这是一种妥协下的行为。(下图为微信Android和iOS图)pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

网站导航设计 移动端导航设计 移动站点优化 移动站点策划pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

而如今,在妥协物理按键和拇指操作舒适中,微信Android版抛弃了顶部导航的方式,和IOS保持了一致pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

网站导航设计 移动端导航设计 移动站点优化 移动站点策划pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

当然顶部导航也不是那么一无是处,QQ音乐和酷我音乐如今用的就是顶部Tab式导航,为了更好的浏览基本信息(歌手、歌曲名)、以及支持快捷操作(播放/暂停)播放器必需固定在底部,那么顶部tab导航不失为一个好选择(如下图)pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

网站导航设计 移动端导航设计 移动站点优化 移动站点策划pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

还有腾讯新闻和网易新闻这种新闻类APP,由于内容、分类较多,运用顶部和底部双tab导航,而切换频率高的tab放在顶部,这是为什么呢?因为新闻在每个tab全是沉浸式阅读,常用的操作是在一个tab中不断地下滑阅读内容,将常用的tab放在顶部,加入手势切换的操作,反倒能带来更好地阅读体验。(如下图)pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

网站导航设计 移动端导航设计 移动站点优化 移动站点策划pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

小结:在两种情况下可以选择顶部tab式导航,pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

某项功能必须固定在底部,那么其他tab只能固定在顶部,但为了方便操作,顶部tab导航好支持手势操作,即滑动即可切换;pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

该APP是沉浸式体验,如新闻、小说等,为了带给客户更好的阅读体验,可以将tab放在顶部pR8上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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

原文地址:/i,72,6231,0.html

客户评价

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

    潘涛

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

    谭娇

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

    陈曦

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

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

服务领域

  • 网站定制开发
  • PC网站设计
  • 域名邮箱
  • 网站维护
  • 网站二次开发
  • 响应式网站设计
  • 虚拟主机
  • 网站优化
  • 网站设计开发
  • 创意设计
  • 云主机
  • 项目合作

合作伙伴

All Rights Reserved.©2010-2016 特马QQ群|资料网站京公网安备 110105019435 京ICP备123124426号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:上海市辉瑞律师事务所。
嘿,我来帮您!