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

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放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

相关推荐

  • 开发者从用户体验的角度聊《Getting Over it 》

    原文作者: Lars DoucetBennett Foddy制作的游戏向来都很奇怪,有时甚至会故意激怒玩家。尽管这类游戏完全不是我的菜,但我还是一玩就停不下来。Bennett最近刚刚发布了一款名为《和班尼特福迪一起攻克难关(Getting Over it with Bennett Foddy)》的游戏,它的灵感来源于一位捷克游戏开发者Jazzuo在2002年推出的一款B类游戏经典《迷人远足(Sexy Hiking)》。上述两部作品带有相...

    2018-03-21
  • 用通俗的方式告诉你什么是交互设计

    文章底部可领取设计资源(软件、笔刷、视频教程等)↓↓↓通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了...

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

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

    2018-04-06
  • 交互设计连载1:什么是交互设计?

    三年前...当时我还是一名刚入行的UI设计师。在一个无聊的周末,看到一篇介绍交互设计的文章,一时间特别兴奋。这篇文章大致告诉了我什么是交互,什么是交互设计。从那以后,我把注意力的侧重点逐渐往交互上靠拢,以至于后来有机会转行成为了一名交互设计师。下面po出这篇文章:《从零开始成为优秀的交互设计师》,可以去网上搜一下这篇文章,干货满满。回到主题,什么是交互设计呢?交互设计英文称之为Interaction Design。你来我往视为交互。你点...

    2018-02-07
  • 优逸客【交互设计】直播课今晚8:00正式开播!

    提起交互设计,它既没有界面视觉设计绚丽,也没有用户体验设计有趣,看起来枯燥乏味,学起来复杂难懂,但它却是整个产品流程中最核心的部分之一。一个牛X的交互设计师是睥睨天下的,无论薪资还是技术。(以上海地区为例)但在通往牛X的路上……很多人还没开始就放弃了经常会有人说交互设计好像已经趋于饱和,现在从事这个行业没机会了。照这么说,公务员是我见过的饱和度最高的行业了,但每年还是有那么多人争得头破血流要为人民服务。就像金字塔一样,往往最底层的那一部...

    2018-04-19
  • Sketchelp·2018暑期工业设计考研课程

    还是你们熟悉的Eric,还是你们熟悉的二师兄。2014年的夏天,天气热的没羞没臊,我们第一次开辅导考研手绘,那时只有三个人,一套笔。那时很开心,每天举着煎饼果子画手绘。两周年,四学期,已完善的课程,将在这个暑假全新开始:是不是临摹还行,轮到自己设计就歇菜?想知道有没有考研的“套路”?一个产品换个角度画,却死活画不出?产品+交互界面真的有很难?故事版的卡通形象一点也不卡通怎么办?“那天”万一考卷画坏了怎么办?答案都在这里。。。真实一线从业...

    2018-05-04
  • 人工智能对交互设计的影响

    人工智能(Artificial Intelligence),英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能的本质,是数据+算法。人工智能的概念其实已经提出来了60年,中间也经历过很多次虚假的黎明期,为什么说现在人工智能时代真正的黎明呢?这里面有三个原因:首先是大数据和云计算。在数据上,移动互联网的发展,已经把我们生活中的各种信息不断数字化,这些数据储存在云上,就可以被利...

    2018-03-28
  • 【优秀作业展示】交互设计基础(一)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优业。优秀学生作业第一期周亦辂产品设计1511高铁取订票界面设计色彩选取字体:冬青黑体字号:18、21、24、28、30、32、36风格:利用从...

    2018-04-04
  • 纽约大学交互设计研究生

    恭喜马同学收到纽约大学(NYU)Interactive Telecommunications 研究生offerOFFER展示:学生作品展示:作品集要求:CREATIVE PORTFOLIOSubmission of a creative portfolio is optional due to the diversity of applicant backgrounds. Portfolio materials need not be ...

    2018-03-09
  • 读书会第一期:《简约至上-交互设计四策略》

    你有多久没有静下心来好好读一本专业书了?谁都知道读书重要,然而“工作忙没有时间”、“不知道该看什么“常常成了借口,读书还是一再被耽搁。本周起,集创堂推出“设计经典书籍阅读”系列,每周解析一本设计类好书,深入浅出,提炼精华。也许,看完简介之后,你就有了读原著的欲望,那么我们做这件事的目的就达到了。《简约至上-交互设计四策略》这本书是我罗列的推荐书单里专门描写信息架构的书籍,书籍作者Giles Colborne是物理学出身,参与过航空航天项...

    2018-04-07