网页建设如何替代抽屉式导航

来源:设计经验分享网
添加时间:2024年02月
摘要:

科技(深圳网站建设)关于移动互联网端抽屉导航(三线icon/汉堡包菜单)的文章和讨论已经够多了。本文无意加入这些讨论,只是想寻找一种更好的替代方案,毕竟抽屉导航的缺陷早已成为公论>>>

效率0下:交互有够麻烦的 导航性差:不知道自己在哪 塞满了各种乱七八糟的功能 先来看看深圳网站建设有哪些常见的导航模式:

在此之前我想先老生常谈一下:每一款产品都是为特定用户群体而设计的,你需要仔细琢磨用户的使用场景,一些方法兴许适合你,但对别人却未必。

1.深圳网站建设:Swarm和标签导航

在SwarmbyFoursquare的1.0版本中,点击左上角的头像是前往个人中心的先进途径。

SwarmbyFoursquare

这看起来很机智,还有比头像更能代表个人中心的icon嘛?但实际情况却是除了设计者之外没有人能理解这个交互,呵呵。所以只过了一个月,Swarm就把个人中心挪到了底部标签栏。

标签导航是较常见和实用的,尽管会占据一些屏幕空间,但它的好处确实足够多:

可见性强:全都在你的屏幕上 结构清晰:较多只能五个标签 交互方便:只需点一下,搞定

即便是自2010年起便在使用抽屉导航的Facebook,也从2013年开始投入了标签导航的怀抱。

不过Swarm的导航还有精进空间,比如他们的导航只有icon没有文字。诚然icon会更直观和形象,但这对icon的要求会很高,它必须要易于理解,不然还是像Facebook那样用文字说明一下比较好。

Swarm&Facebook

如你所见,Facebook为每个icon都加上了文字,就算是像「设置–齿轮」这样约定俗成的隐喻。而Swarm则使用类似于蜂房的icon来隐喻个人中心,理解成本显然较高。

也许没我说的那么严重,但许多对设计者而言显而易见的事,对别人来说却可能难以察觉,这却也是事实。

2.深圳网站建设:Tinder和滑动导航

我把以Tinder、Snapchat及其他APP为代表的导航方式称为滑动导航。

这类导航模式的特点在于体验的自然性,它与滑动手势相得益彰:整个APP就好像是一块水平长条的大屏,无论你如何滑动都只是切换到大屏中的某一部分而已,这使你几乎可以抛弃「点击」操作。

有得必有失,滑动导航的一大缺点是你无法直接从第1个页面切换到第3个页面,更重要的是,作为页面标题的导航icon至多只能显示3个,其余的会被隐藏起来,你需要遍历所有页面才能够知道这个APP有哪些页面,他们分别在哪,这确实不够直观和便捷。

不过对于只有3个主页面的APP(比如Midpic)来说,滑动导航可谓如鱼得水。

Midpic

也许我们可以通过「无限水平滑动」来改进这一导航模式,这能够消除用户在较左端/右端2个页面时的碰壁感。

Tinder

3.深圳网站建设:BAG和下拉导航

BAG的设计者NachoRapallo引入了一种全新的导航方式:下拉屏幕——就像下拉刷新Feeds那样,不过需要拉得更多——切换页面。

BAG

这种交互模式的讨喜之处在于,它类似于抽屉导航,但却没有抽屉导航的部分缺点:

不占地儿 五个标签 交互很快

抽屉导航较大的问题在于当你切换页面时,你需要先点击汉堡包icon(或右划),等待导航打开,然后再点击目标icon,如果你不小心点错了,就得再来一遍,这太浪费时间了。而通过这种交互方式,你的手指有效不需要离开屏幕,效率大大提升。

不过这种交互方式并非没有缺陷,如果你的APP包含Timeline,而用户滚屏后需要切换页面时,要*先返回顶部才能进行进行该操作。同时,作为一种不可见性的交互方式,用户需要被引导,这会很困难。因此我不太推荐初创企业过多使用创新型的交互模式,这会使早期用户赶到迷茫。

4.深圳网站建设:我的替代方案

经过深思熟虑,我尝试深圳网站建设出一种能够避免上述所有缺点的导航模式。我把BAG的下拉改成了侧滑式,这样一来就能避免滚屏的麻烦。我们来看看它长什么样:

Slidenavigationpatternbybenjaminberger

我承认它还不够好,比如导航依旧是被隐藏的,用户需要去学习和习惯。此外它还与我们常用的右划返回手势会发生冲突。不过它确实要比抽屉式导航更好。


以上内容由科技(深圳网站建设,深圳网站设计,深圳网站制作)为您提供,更多精彩内容:http://www.xazcit.com/

关注“科技”微信公众号,快速获取互联网较新资讯


 

平面设计相关资讯推荐阅读:


如何搭建一个高端的外贸网页网页建设容易被忽视的四大问题深圳网页建设,网页建设完成后有哪些注意事项网页建设完成之后要定期维护管理大型网页开发需要注意的细节有哪些如何增加网页的信赖度css中网页自适应高度的设计网页建设和优化的3个技巧网页建设如何选择服务器深圳网页建设中客户较在意的五点深圳网页建设之企业网页的两大类型避开网页设计中不友好的因素将网页定位好,哪怕是菜鸟,也能翱翔蓝天想做好电商网页抓准这10个细则准没错!科技-导航和内容对企业网页建设有哪些重要作用企业网页建设中不可缺少什么中小型企业网页制作应该怎么做网页网页制作专业公司哪个好怎样选择江门网页建设-食品类型的网页建设要注重哪些细节客户找我定制软件,但是总拿市面上的成品软件的价格和我做对比。如何处理这个问题商城网页建设颜色类型值的留意如何设计网页底部更好看 网页设计有哪些动效介绍网页建设开发流程详解合格的建站公司能提供的服务互联网大佬这些年在两会上的提案有哪些解析:传统企业进军互联网为何要做官网怎么判断小企业网页建设的好坏定制化网页建设的好处是什么广州易捷网页建设公司对于权重提升的几点认识网页制作如何提升网页页面打开速度网页页面设计使用分页的优势公司的网页要怎样建设才显得专业阿里云备案驳回的常见问题客户必看!部分深圳网页建设公司欺骗手段!网页设计颜色说服网页访客订阅营销型网页有哪些特点深圳网页建设之网页策划六大要点企业为什么要进行网页建设,有哪些优势做商城网页的开发有哪些要求网页建设公司的正式网页建设流程深圳网页建设公司之提升UI设计师技能福田网页建设需要注意哪些地方网页制作公司哪个好怎样判断建设网页必须常见问题有什么 网页设计公司品牌企业网页设计定做 为什么要选择有经验的网页设计公司免费的APP推广渠道有哪些教你PS合成教程,让你的设计美到爆!网页建设对企业有怎样的重要性域名被K如何处理之域名洗白法360搜索“好搜”出品意在讽刺搜索行业太乱网络公司的困惑网页设计困顿之路易捷网页开发公司提醒大家优化不能过度手机网页制作有哪些常见问题和好处深圳福田SEO网页优化的步骤和技巧有哪些企业建设网页后的六大便宜之处网页优化中锚文本(链接文本)是什么Drupal深圳网页开发服务为您解读网页建设(二)
网站备案号:豫ICP备2024041165号