交互设计套路之——导航设计

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Five Hundred MilesThe Shadows - Dance With The Shadows/The Sound Of The Shadows亲爱的小伙伴们好久不见啦你们的涂涂回来啦!!不知是时间太快还是指缝太粗总是留都留不住总之感谢小伙伴们的不离不弃话不多说赶快准备好小板凳和瓜子嗑着瓜子咱们就开聊吧下面开始分享app的套路之一导航设计一、导航的分类1.标签式导航...

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 交互设计套路之——导航设计 交互设计套路之——导航设计 Five Hundred Miles The Shadows - Dance With The Shadows/The Sound Of The Shadows 交互设计套路之——导航设计 亲爱的小伙伴们

好久不见啦

你们的涂涂回来啦!!交互设计套路之——导航设计

不知是时间太快还是指缝太粗

总是留都留不住

总之

感谢小伙伴们的不离不弃


交互设计套路之——导航设计

话不多说

赶快准备好小板凳和瓜子

嗑着瓜子咱们就开聊吧

交互设计套路之——导航设计交互设计套路之——导航设计交互设计套路之——导航设计交互设计套路之——导航设计

交互设计套路之——导航设计

下面开始分享app的套路之一导航设计


一、导航的分类


交互设计套路之——导航设计

1.标签式导航


又叫TAB导航,目前运用最广泛的导航设计,常见于社交类、电商类、支付类、新闻类、金融类、娱乐类等各大应用中。在app中出现在底部、顶部、或混合使用,在不同的产品需求中,稍有调整。


a  底部标签导航


交互设计套路之——导航设计

交互设计套路之——导航设计

例如,微信、微博、QQ、最右、京东等等,均采用底部标签导航的设计方法。

标签导航出现在底部,充当一级导航功能,层级较高、权重均衡,便于用户切换,同时也能比较清晰的体现整个产品的框架,数量不大于5个

缺点:控件面积较大,导致版面旅降低


b 顶部标签导航


交互设计套路之——导航设计

 标签导航出现在顶部,常作为二级导航和底部导航混合使用,也有在垂直领做一级导航出现,数量原则上不超过5个若超过5个,会结合交互中的滑动手势,又称滑动导航,滑动导航权重均衡便于用户切换。

缺点:需要滑动,直观性欠缺,设计时需适时引导用户。

2.分段式导航


通常用于app的顶部,作为二级导航出现,一般有2-3个功能切换,占位较小,版面利用率较高,IOS端可以直接使用空间完成。


交互设计套路之——导航设计

例如,微信中的表情包模块,通过分段导航将表情包分为两个细分,满足用户的不同需求,同时也不会占据更多的版面。IOS可直接运用控件,美团的电影演出模块通过分段式

缺点:不适合安卓开发使用,通常不会作为一级导航出现

3.舵式导航


是标签导航的变种,出现在app的底部,当app的几个功能都很重要并且其中一个最重要时,可用高亮色放大这一功能,将图标放于app底部标签的中间的设计方法,例如LOFTER。或者,整个app同等重要的功能超过五个,并且有一个最重要,也可将多出的部分藏于中间图标的下一层级,例如微博 。

交互设计套路之——导航设计

舵式导设计运用非常广泛,它能将重要的功能突出,便于用户识别,同时伴有交互设计,很好的提升用户体验亦能添加更多的重要功能放于下一层级,提升了空间利用率。

同时,舵式导航也有一定的缺陷,功能超过5个时,隐藏在下面的功能不容易被发现。


4.抽屉式导航


用一个图标形式出现在app的左上角或右上角,点击图标弹出侧页或新页面的设计方式。

通常是功能较多的情况下的一种策略,舵式导航作为二级导航,能将不重要的功能隐藏起来,能让页面设计更干净利落,让用户专注主要功能。


交互设计套路之——导航设计

例如QQ、单读、开眼视频等采用抽屉式将许多不常用的但必须要的功能藏于抽屉的下方,让页面变得干净简洁,让用户专著自己的核心需求,创造更好的用户体验。


抽屉式导航的使用频率是低于标签式导航,作为二级导航,隐藏起来的部分增加了用户的点击次数,使用率降低,因此,抽屉式导航的运用要根据具体的业务需求来判定。

5.宫格式导航


属于层级结构导航,宫格中的一个格子代表一个功能,类似于手机上各个运用的入口导航的性质。

交互设计套路之——导航设计

例如支付宝、微信,通过运用宫格式导航的设计方式,可以增加跟多的功能接口,增强了app的功能拓展性。携程的宫格式配合版面的合理布局,实现了属性的分类。

宫格式导航,便于增加功能,可拓展性强。用户在切换下一个功能时,需返回到上一级页面,不利于频繁切换,信息的承载力较弱,很少有app将宫格式导航作为一级导航,常常与标签导航,抽屉导航等共同构成整个应用系统。


6.下拉式导航


现如今,下拉式导航并不常用,常见在生活服务类,股票类的app中,通过点击一个下拉图标引出一串列表的形式作为二级导航,因其收起来体积较小,能隐藏更多信息,有时会和滑动导航一起出现。

交互设计套路之——导航设计

例如美团,顶部的下拉列表提供定位选择,能定位的同时也能让用户自己选择,提升用户体验。再例如,一级求职招聘BOSS中下拉列表的运用,隐藏了更多的信息,使页面看起来干净利落,但boss的下拉雷同抽屉式导航的缺点,隐藏了较多信息,需要更多点击才能找到需要的功能,降低了有些功能的使用率

下拉式导航隐藏信息能力强,但其点开后体积很大且没有开关,不利于频繁切换,在app中不常用。


在一个应用当中,要根据实际的需求选择一种主要导航,

没有最完美的导航,只有更合适的导航 

大家要根据项目需求进行选择。


以上就是涂涂今天分享的内容啦~

欢迎小伙伴和涂涂一起分享心得

希望对大家有所帮助啦

交互设计套路之——导航设计

下一期涂涂将给大家分享关于app设计套路之——列表



喜欢涂涂就关注涂涂设计吧

交互设计套路之——导航设计

嘘寒问暖  不如关注温暖哦~~


以上图片来源于网络


原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35215/

(0)
交互精选交互精选
上一篇 2018-02-11
下一篇 2018-02-11

相关推荐

  • 干货时间|交互设计线上讲座内容回顾总结

    学艺术的大表姐带你走上艺术留学的不归路Hello~Everybody~上礼拜元宵节的结束宣告着新的一年的真的要开始了!这下我们也再没有借口偷懒了小伙伴们要用新的节奏开始奋斗啦~2018,告别懒惰,发愤图强吧!!最怕的就是:“比你优秀的人还比你努力!”当然为了给大家缓冲的时间大表姐特意送上年前的交互设计分享讲座的干货回顾总结对交互设计感兴趣的同学,可千万不能错过接下来的内容了~并且还能拓宽自己的艺术设计领域想了解更多关于英美交互院校、专业...

    2018-03-09
  • 增强现实正在提升用户体验

    当苹果的CEO Tim Cook在一次季度财报电话会议上,向分析师说出“增强现实将会改变一切”这句话时,人们都感到了一丝震惊。而现在看来,库克对增强现实(AR)的评价似乎并没有过分夸大。事实上,增强现实技术正在为各种应用创造出一个全新的范例。毕竟,我们已经很快地从在电脑键盘上打字,“进化”到了用智能手机打字或滑动屏幕,又或者是用语音来告诉Alexa或Siri来帮我们做什么事。现在AR把我们带到了全息计算时代。Animoji、Pokémo...

    2018-03-28
  • 作品集总结|本科建筑跨专业申请交互设计?Dream School还是皇艺?这可能吗?

    PS-ONE#20180504建筑背景,申请交互设计跨专业申请结果如何?本科建筑,转专业申请交互设计Master?并且Dream School还是世界第一的RCA皇家艺术学院?在经历了PS-ONE历时8个月的内部评审后她如愿以偿了吗?。。。。。。8个月后爱丁堡大学,get拉夫堡,get交互设计,是细节非常复杂的专业涉及到的知识点、设计思维,对转专业申请者来说,是很苛刻的所以拿到爱丁堡、拉夫堡这样强势院校的Offer已经是很不错的结果了但...

    2018-05-04
  • 部落窝教育微课首批年卡,每天一元钱,全年课程随意看

    部落窝教育微课直播间自年初上线到今天,短短三个月时间,我们精心打磨了25个专栏课程,受到了大家的广泛关注和喜爱。课程受欢迎程度可以从数字上得以体现:直播间共282.64万+人气,单次课程最高学员数达到了18536人学习。应铁粉们要求,“部落窝教育微课直播间” VIP年卡现已正式开通,更好的满足大家学习多个软件技能需求。1VIP年卡能学什么?VIP年卡有啥福利?A:部落窝微课现开通25个付费专栏,涉及到的软件视频课程有:Excel、Wor...

    2018-04-08
  • 用户体验设计师如何构建设计知识体系

    -全文共2469个字,阅读时间大约3~6分钟-开 篇这几天在看一位腾讯大师的产品思维,今天是重复第二遍,她所讲的产品观中的微观、中观、宏观、用户增长的峰值、终值、点线面体思维等等,这一系列课程让我茅塞顿开。当下的确是一个很好的时代—体验经济时代,英雄不论出处,不谈产品的背后是何方神圣,一切都是用户说了算,一个产品准确找到用户痛点,只要用户喜欢,有足够的用户价值,就能转化一定的商业价值。最近处于风头浪尖的两家公司—某团与某滴,互相做起了对...

    2018-04-06
  • 3000字,详细梳理用户体验要素之核心五要素

    网站看起来如何,它怎样进行运转,它让你执行什么。这些决策都是互相依赖的,它告知并影响用户体验的各个方面。当产品发展到一定阶段,系统化的用户体验设计对于产品在激烈的商业竞争中保持核心竞争力至关重要。比如最近很火的共享单车,开锁是否方便这样一个小细节直接决定着用户选择,用户体验就成为了商机。这里与大家分享用户体验要素的核心五要素。要讨论的事今天跟大家分享的是用户体验的五个核心要素。虽然用户体验要素远不止这五个,但作为梳理一个产品的用户体验开...

    2018-03-20
  • VR/AR开发程序中直接搜索Sketchfab的3D素材 / Vive Pro 如何买更省钱?/ Vulkan拥有直接内存分配器

    从今天起试试这个新形式,把重点的资讯提炼后合并成一条,欲知详情就摁紧二维码跳转阅读啦。我们依然尽量让这些从外媒翻译过来的信息以最合适的中文翻译方法论润饰和(或)修改后放在这里。有什么好想法新想法告诉我们!【Sketchfab推出新API,3D内容“搜索引擎”可植入VR/AR应用中】Sketchfab今天推出了最新的 Download API(下载API),允许应用开发者直接把Sketchfab内容导入他们的3D、VR和AR软件,这样就无...

    2018-03-21
  • 用户体验设计师是做什么的

    用户体验设计师的责任UX设计师如何每天工作?这个问题的答案,正如许多问题一样,是:这要看情况而定。用户体验设计师的职责从公司到公司,甚至同一公司不同项目各不相同。尽管角色各不相同,但有一些职能是期望用户体验设计师去做的,这与他们所工作的公司无关。下面为总结的用户体验设计师的6个主要职责:1.产品研究产品研究(包括用户和市场研究)是每个用户体验设计师的用户体验设计项目的出发点。它为伟大的设计提供了基础,因为它允许设计师避免假设和做出信息驱...

    2018-03-03
  • 【实习精选】网易、中信、博彦科技、雅培、太平洋证券等名企实习汇总(04-02)

    序列               实习单位工作地1德国电信咨询北京2腾讯北京3中信研究部北京4东亚银行(中国)有限公司上海5雅培中国上海 嘉兴6太平洋证券上海7广州越秀金融控股集团有限公司广州8广东南方都市报经营有限公司广州9国金证券股份有限公司深圳10博彦科技股份有限公司西安11网易雷火游戏部杭州12科锐国际大连01德国电信咨询一、企业和团队介绍德国电信国际咨询公司(DETECON),德国电信集团的全资子公司,是全球领先的ICT行业专...

    2018-04-08
  • KY技术招聘详情 | 心理领域互联网公司KnowYourself

    如果对【KY内容中心】、【研发中心】、【市场品牌商务】、【运营、创意、用研】、【人事】等更多岗位感兴趣,请查看今天的其他几条推送内容。KY技术部,是KY的技术支持部门。我们通过各种技术手段,提升大家使用KY产品的体验,并为各种创意提供实现支持。我们希望能够以各种技术的优化,能让大家更精准的匹配到适合自己的朋友,能够找到合适的咨询师,能够与KY的交互中找到真正的自己,玩得意犹未尽。本次我们招聘需求详情如下:· 测试工程师 ·工作内容:1....

    2018-03-18