当前位置:网站首页 -> 网站特效

手机移动网站端导航的七种设计模式

发布日期:2015/11/18 8:17:40  点击数:2969

不一样的商品需求和商业目标决议了不一样的导航结构的规划形式。而交互规划的第一步,即是决议导航的结构规划,结构断定后,才能开始逐步丰厚血肉。

​

首先,咱们要为安排信息分层,在这一过程,一定要做好信息层级的扁平化,不能把一切的安排信息都铺出来,这么做只会让用户心慌意乱找不到想要的重要操作,也不能把层级做的很深,用户没有那么多耐性跟你玩躲猫猫。一定要将做中心、最安定、最底子的功用要素放在第一层页面,其他得内容收在第二层、第三层、乃至更深。


以后,依据层级的深度和广度来断定导航的规划形式。不要觉得这有多难,移动端的屏幕尺度就这么大,操作方法也无非即是点击、滑动、长按这些。因而导航形式通常也就分为以下7种(当然你能够在这七种的基础上互相组合)接下来咱们能够具体分析一下这七种导航形式。


一、标签式导航


也即是咱们平常说的tab式导航,是移动使用中最遍及、最常用的导航形式,适合在有关的几类信息中心频频的调转。这类信息优先级较高、用户运用频频,彼此之间彼此独立,经过标签式导航的引导,用户能够敏捷的完成页面之间的切换且不会迷失方向,简略而高效。需求留意的是标签式导航依据逻辑和重要性操控在5个以内,剩余5个用户难以回忆并且容易迷失。


而标签式导航还细分为底部tab式导航、顶部tab式导航、底部tab的拓展导航这三种。


1、底部tab式导航


假如此刻你调查一下自己手机中常用的APP你就会发现QQ、微信、taobao、微博、美团、京东等全部都是底部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放在顶部,参加手势切换的操作,反倒能带来非常好地阅览体会。(如下图)

关闭窗口
Copyright © 2008-2024 上海纯点网络科技有限公司(www.cdsheji.com). All Rights Reserved
地址:上海市嘉定区金沙江西路1075号万达广场5写字号楼203室 24小时客服热线:400-670-5808 电话:021-60482289
沪ICP备10218526号-1 | 沪ICP备10218526号-2
QQ客服

沪公网安备 31011402002273号