当前位置:首页>ps入门教程>ps基础教程>设计知识>教程内容

设计知识!响应式导航有哪几类设计方式?(2)

来源:aliued 作者:aliued 学习:2825人次

缺点:

样式不统一:不同浏览器会呈现不同样式的下拉菜单 可能会让用户困惑:大部分用户只在填写表单时才会看见下拉菜单,而将下拉菜单用作导航,担心用户一下子无法理解 下拉菜单内容的处理方式比较奇怪:因为在下拉菜单中,子项目会自动缩进,这样虽然可用,但从视觉上看十分混乱; 可能会依赖浏览器调用 JavaScript

开关

设计知识!响应式导航有哪几类设计方式?

开关的实现方式类似页脚锚点,但不是点击跳转至页脚,而是点击后将菜单区域滑动展开。同样也是比较容易实现的设计模式。

优点:

易于理解:相较于页脚锚点突然间的跳转,开关这种是位置不变的交互方式更容易让用户接受 交互更优雅(相比跳转而言) 拓展性强:你唯一要做的就是在PC端隐藏开关,在适当的断点处显示它,这一切的一切都能通过 CSS 来实现。

缺点:

动画可能不够平滑:Android 对于动画的支持一直不好,因此,可能得到你想要的效果 非常依赖 JavaScript:正因为打开开关的动画需要 JavaScript 来实现,所以它的兼容性不太好(作者的黑莓设备就不支持);

侧滑导航

设计知识!响应式导航有哪几类设计方式?

侧滑是在 Facebook 的大力推广下流行起来的。之所以叫抽屉源于它的交互动效,当点击菜单按钮后,导航模块会像抽屉一样从页面边缘滑动出现。

优点:

空间充裕:因为从边缘滑出,这些内容被理解为在底层或屏幕外的无限区域内 好看:简洁就是美,而且动画效果惊艳。

缺点:

小众:与其他简单的设计模式比起来,从侧面滑动展开导航栏的效果需要若干复杂的动画来实现,这样就将一些低端设备挡在门口。因此,如果你的项目是面向大众而设计的,需要谨慎。 适配性不好: 这种模式仅适合移动设备,在大屏幕上的表现并不好(也没有必要)。 可能存在迷惑:当我(作者)第一次看到 Facebook 采用这种设计时,我还以为页面出错了呢!在屏幕右侧露出一些信息对于我本人而言还是很奇怪的(纯属作者个人看法)

只在页脚放置导航

设计知识!响应式导航有哪几类设计方式?

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!