建站资讯
2013-10-24 00:09:43
浏览:
响应式导航的设计遵循了响应式Web设计理念,页面的设计往往会根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的调整。通过同比例缩减元素尺寸、调整页面结构布局以及内容的优化调整等方式,使用户在不同的平台上有着独一无二的用户体验。
本文收集了响应式设计网站中各种主流的导航设计趋势,如果你想设计出更好的导航设计或者了解新的响应式设计潮流,那么这篇文章不容错过!
调整尺寸&定位
这是响应式导航设计首个步骤,也被视为最简约的方法。目的在于设计一款永不被隐藏且能优雅的调整窗口大小。设计简短的导航链接,让页面看起来更加简洁、亮丽。
Fiafo就是一款典型的案例。导航链接设计居右侧,当浏览器窗口被压缩后,链接呈现在Logo下方,就如同一个单一的导航栏。当你调整浏览器尺寸后,该页面也会随之而更改,完全不受影响。
这种设计风格非常具有吸引力,因为它不需要隐藏任何链接,无需CSS3或JavaScript,页面上任何条目都能显示出。最大的缺点是,该导航限制了最多链接数量。
Paid to Exist采用了另一种设计趋势,其链接是浮动的。当浏览器的尺寸缩小到最小尺寸时,该链接不会扩大到像100%宽度那样。其采用了区块层级设计元素,导航横向排列不变,由一行变为两行,页面简洁清晰且用户体验一致。
菜单选择样式
菜单选择在响应式导航设计中,被设计师认为一种较为棘手的设计。一起来看下设计案例。
从Apache CouchDB的设计案例中可以看出,其设计布局呈现细长型且容易操控,因为它是一款单页面设计。
在移动设备上用户可能不会在意导航设计样式。导航菜单选择并不一定要采用漂亮的解决按干,只要它们能易于操作即可!
随着响应式设计的发展趋势,未来可能会有其他的解决方案来替代菜单选择。如果你需要一个快速的导航,且能够用支持所有的操作系统,那么HTML元素倒是个不错的选择。
覆盖下拉菜单
在响应式设计中,隐藏菜单是一个非常流行的设计趋势。这是因为它能为页面节省更多的空间。
在移动设备上,屏幕的运用是极其宝贵的,因此,你要尽可能地向用户提供更多的空间。采用下单隐藏菜单是个完美的选择,突出高优先级内容的处理方式。
Designmodo便采用了这种布局,通过设定图标点击对菜单进行收缩或展开,列表将显示新的下拉元素。
StickyGram采用了区块级别链接,不会因调整尺寸大小而有所更改,适用于任何设备,以最好的方式呈现在你的面前。
Tilde Inc采用了模块下拉菜单设计。
下拉菜单的共通点是:默认情况下菜单隐藏,一旦用户需要导航链接,点击图标菜单展开,选中后菜单自动消失隐藏,下一次操作时重复。优点是不会影响其他的页面内容。
多级导航
当你需要多个子链接的导航菜单,那么你不得不规划出一个完美的解决方案。 除了采用区块层级下拉菜单,你还可以选择创建多级导航菜单。
以SonySony公司的网站设计为例。用户通过滚动页面找到任何他们想要的内容。
页脚链接
一旦用户点击导航按钮,它会自动跳转到采用哈希元素ID的页脚。用户可以快速访问页脚链接,无需手动滚动。
再来看下Contents Magazine设计风格,只有几个少有的顶部导航链接。调整浏览器,你就会看到一个搜索栏,并且会呈现出一些模块链接。目的是在于保持页面布局均匀,而无需额外的脚本,比如jQuery。
隐藏滑动菜单
这种设计趋势在Apple Store里经常可看到,这也是备受iOS开发者欢迎的设计风格。
虽然在CSS3中可创建这种效果,但请记住,不是所有浏览器都能支持。jQuery倒是个更加稳定的选择,甚至还有一些免费的开源插件可供你选择。
点击查看Sequence的设计风格。
英文出自:Teamtreehouse
外贸网站建设的步骤和流程:打造全球化业务的关键
在全球化架构下,外贸网站建设成为企业拓展国际市场的重要一环。随着互联网技术日新月异的发展,建设一套高效的外贸网站早已成为企业提高竞争力的必由之路。本文将全面介绍
外贸网站建设:为企业开拓全球市场的重要一环
外贸网站建设对于企业的发展具有不可忽视的重要性。拥有一个专业、高效的外贸网站,不仅能够为企业带来更多商机,提升品牌形象和信誉度,还可以为客户提供更好的服务体验。在全球化竞争日益激烈的今天,外贸网站建设已成为企业开拓全球市场的重要一环。
公司网站建设需要准备哪一些资料
公司网站建设需要准备哪一些资料1、域名注册和备案资料公司营业执照,公司法人身份证,法人手机号码,法人邮箱,紧急联系人手机号码,紧急联系人邮箱2、网站建设需要准备