当前位置:丝路教程网 > UI设计 > 网页设计 >

了解折叠式菜单UI界面设计

2016-12-15 15:17 来源: 丝路教程网 分类: 网页设计
257 作者:丝路教程网

[导读] 单词手风琴通常让人联想你最喜欢的乐队波尔卡的精神形象。但是,这不是我们所谈论指手风琴菜单时。虽然波尔卡音乐可以提供一个裂口,鼻吸的好时机,该术语的东西在网页设计领

  单词“手风琴”通常让人联想你最喜欢的乐队波尔卡的精神形象。但是,这不是我们所谈论指手风琴菜单时。虽然波尔卡音乐可以提供一个裂口,鼻吸的好时机,该术语的东西在网页设计领域的不同有关。用户界面手风琴可能是指菜单,窗口小部件,或内容领域拓展其喜欢的乐器。这些接口已经成长了很多近年流行的JavaScript的扩展和更加突出的jQuery。

  我想涵盖了一系列的例子和技术建设手风琴接口到任何网站布局。因为它们允许开发人员大量内容强行进入页面上的小空间手风琴很受欢迎。授予这些内容的显示也需要对页面元素之间切换动态效果 - 所以有利弊手风琴。这篇文章应列出有关手风琴界面设计的重要概念和主题。

  为什么要使用手风琴菜单?

  我喜欢把手风琴作为内容管理工具。当你有一个页面的分成几十个段落,链接,图片或太多的内容块......手风琴菜单抢救。

 

  不是每个网站需要一个手风琴菜单,你肯定不会找到他们所有的时间。但是,这没有理由完全忽略的概念。手风琴菜单的目的是通过动态切换来管理内容的过剩。每个接口的工作方式不同基础上的布局情况。

  目前最大的有关因素是游客的总人数没有JS支持的浏览器谁。在过去的十年里越来越多的人正在升级他们的计算机这个数字已减少相当低。这意味着你应该几乎没有问题,因为即使Mobile智能手机的浏览器支持JavaScript。如果内容是查看和手风琴是可用的话哪来的危害呢?

  只是要确保每个手风琴组件都有一个真正的目的。有些情况下我发现,本来刚刚上市量下跌的一页不强迫我点击每个标题手风琴FAQ页面倍。当然我理解的前提,但如果每个答案可以用几句话来推测,隐藏的内容是不会改善用户体验。

  所以,当正是你应该使用手风琴?大多具有较大的菜单或内容可能使用可扩展部分表现更干净。这些可能是小标题,甚至多层次 - 点是一个方式,使导航比无休止的滚动简单来组织内容。

  滑动菜单效果

  一,你会遇到的最常见接口是滑动菜单效果。这通常是通过一系列隐藏在子链接链接垂直。然后点击一个主链路将扩大在滑动动画子链接列表。

  有时,一个网站的整个导航菜单是建立在这个折叠效果。其他常见的选择是显示在悬停下拉菜单 - 但因为他们是建立在页面手风琴菜单没有在页面上滑动。所以效果有所不同,通过比较提供了不同的用户体验。

 

  看看这个Designmodo教程这也解释了手风琴发展过程中一个很好的教程。源代码是免费下载,但它应该作为描述这个接口可能是如何工作的一个例子。Designmodo有一个活样本预览这表明了菜单操作的行为。

  请注意如何打开一个新的部分时,菜单将自动关闭。这是典型的行为构成一个手风琴菜单时,因为只有一个主菜单是在任何特定时间打开的。但是,这不是强制性的特征,事实上,大多数的手风琴菜单允许每一个部分是开放的。这种选择在很大程度上取决于该网站本身上和内容预期如何表现。

  CSS3分页内容

  的手风琴内容另一实例是基于标签窗口小部件。因此,而不是有垂直列出的链接,标签用于管理移动内容。这是内容管理的另一个很受欢迎的方法,因为JavaScript已经取得的过程超级简单。但是,因为大多数开发人员已经熟悉JavaScript,我想以覆盖更先进的技术。

 

  为JavaScript另一种方法是使用CSS3的手风琴扩展UI。当然他们都似乎是一个风险,但CSS3要少得多的浏览器的支持。唯一的好处是,CSS3并不需要太多的代码,并提供了动画的简单的方法。如果你喜欢现代CSS3动画看看下面的教程:

 

  Codrops发布版本y高品质的内容和他们的手风琴CSS3教程也不例外。如果你想尝试一下自己的代码是免费下载的。他们现场演示大型的源码1 ES它利用复选框与单选按钮几个不同的选择。

  复选框允许用户同时选择多个项目。使用复选框方法,你可以在同时打开许多不同的内容领域。单选按钮只允许选择一个无线项。这意味着打开一个新的部分先前开段将关闭时。这两个工作的伟大,并会根据每个项目的需要。

  滑组合

  网页内容是通过为简单和易于使用替代页进行管理。参观者将通过不同的页面,而浏览,而不是通过长单页设计筛选。然而,随着可折叠手风琴内容合作,使后者有很多更合理。

 

  举个例子的主页桃红它采用动态的投资组合清单。当你点击每个项目的列表将为该项目的观点更容易崩溃小。这是迄今为止一个奇怪的概念,但在其网站上的伟大工程。为什么?或许是因为简约的设计也许是因为网格状结构。

  无论哪种方式,投资组合的网站可以为手风琴部件的最佳选择。并不是每一个项目应该依靠手风琴最好地管理内容。但想到可以通过组织项目纳入大类别,甚至子类为游客提供了控制。利用这种谨慎,但记住它。

  图片画廊

  与此相类似的投资组合列表一个可折叠的图片库。在手风琴式这可以采取多种形式如垂直,水平,滑动,标签,你的名字!基于触摸的界面也允许与电脑鼠标很好地工作太滑动图片画廊。 

  再回到Codrops我发现了另一个伟大的教程涵盖了与CSS3图像手风琴。其效果是真的很酷,令人惊讶的支持click事件。每个图像被赋予该动画眼帘的一些标题文字。我喜欢这样的设计,它不依赖于标签或链接或图像本身的以外的任何-所以内容变成了标签。很酷吧?

 

  这里有一个免费的jQuery插件为建设一个负责任的手风琴图片库。这个例子功能类似于Codrops教程,除了所有的动画都是通过jQuery的处理。另外,标题文字是有点大,似乎更加流畅。我想指出,任一这些效果之一可以被复制并推到其他-它只是重新编码的设计,以适应所述接口的问题。

  但我的观点是证明既CSS3和JavaScript可以被用来创建大部分这些影响。不幸的是旧的浏览器将永远向后兼容能力,支持新的CSS3动画。使用JavaScript仍是最安全的选择,但随着越来越多的人升级他们的网络浏览器,我们可以希望看到未来与CSS3的主要支持。

  免费代码段

  我想通过提供免费的开放源代码片段的集合,以结束这一职位。每个样本演示了手风琴内容是否在导航,FAQ上市或部件标签的权力。所有这些代码已在CodePen共享,并应在任何项目中重用。

  当然你可以随时拿起一个免费的插件来重建从头开始吧。开发商大量释放他们的代码为自由和尽力帮助社会提供免费的插件。当然总是会有那些谁喜欢打造一切从头开始。但是,如果时间是一个因素那么我强烈建议从这些代码段合作,以确保更大的兼容性和更快的开发进度。

  3D手风琴

 

  物料清单

 

  动画手风琴 

  CSS3黑暗的UI

 

  全宽内容

 

  多级手风琴

 

  弹出下拉

 

  彩条

 

  多级手风琴

 

  回应内容

 

  性感的CSS手风琴

 

  涂料折叠式菜单

 

  垂直收音机

 

  卧式收音机

 

  WELL手风琴 

  纯CSS

 

  蓝手风琴

 

  标签Flexbox的

 

  纯CSS菜单

 

  多色手风琴

  

免责声明:

丝路教程网的部分文章信息来源于网络以及网友投稿,本网站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,如权利人发现存在误传其作品情形,请及时与本站联系。

  • 所属专题:UI界面设计专题
  • 本文链接:http://blog.silucg.com/UICN/wyui/article-3185.html
Copyright © 2008-2017 blog.silucg.com 丝路教程网 版权所有 网站地图
点击这里给我发消息
丝路教育