说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

响应式导航设计案例解析(多图)

HTML文档下载 WORD文档下载 PDF文档下载
导航设计包含多种设计元素,本文收集了响应式设计网站中各种主流的导航设计趋势,如果你想设计出更好的导航设计或者了解新的响应式设计潮流,那么这篇文章不容错过!

响应式导航的设计遵循了响应式Web设计理念,页面的设计往往会根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的调整。通过同比例缩减元素尺寸、调整页面结构布局以及内容的优化调整等方式,使用户在不同的平台上有着独一无二的用户体验。

本文收集了响应式设计网站中各种主流的导航设计趋势,如果你想设计出更好的导航设计或者了解新的响应式设计潮流,那么这篇文章不容错过!

调整尺寸&定位

这是响应式导航设计首个步骤,也被视为最简约的方法。目的在于设计一款永不被隐藏且能优雅的调整窗口大小。设计简短的导航链接,让页面看起来更加简洁、亮丽。


Fiafo就是一款典型的案例。导航链接设计居右侧,当浏览器窗口被压缩后,链接呈现在Logo下方,就如同一个单一的导航栏。当你调整浏览器尺寸后,该页面也会随之而更改,完全不受影响。

这种设计风格非常具有吸引力,因为它不需要隐藏任何链接,无需CSS3或JavaScript,页面上任何条目都能显示出。最大的缺点是,该导航限制了最多链接数量。


Paid to Exist采用了另一种设计趋势,其链接是浮动的。当浏览器的尺寸缩小到最小尺寸时,该链接不会扩大到像100%宽度那样。其采用了区块层级设计元素,导航横向排列不变,由一行变为两行,页面简洁清晰且用户体验一致。

菜单选择样式

菜单选择在响应式导航设计中,被设计师认为一种较为棘手的设计。一起来看下设计案例。


从Apache CouchDB的设计案例中可以看出,其设计布局呈现细长型且容易操控,因为它是一款单页面设计。

在移动设备上用户可能不会在意导航设计样式。导航菜单选择并不一定要采用漂亮的解决按干,只要它们能易于操作即可!

随着响应式设计的发展趋势,未来可能会有其他的解决方案来替代菜单选择。如果你需要一个快速的导航,且能够用支持所有的操作系统,那么HTML元素倒是个不错的选择。

覆盖下拉菜单

在响应式设计中,隐藏菜单是一个非常流行的设计趋势。这是因为它能为页面节省更多的空间。

在移动设备上,屏幕的运用是极其宝贵的,因此,你要尽可能地向用户提供更多的空间。采用下单隐藏菜单是个完美的选择,突出高优先级内容的处理方式。


Designmodo便采用了这种布局,通过设定图标点击对菜单进行收缩或展开,列表将显示新的下拉元素。


StickyGram采用了区块级别链接,不会因调整尺寸大小而有所更改,适用于任何设备,以最好的方式呈现在你的面前。


 Tilde Inc采用了模块下拉菜单设计。

下拉菜单的共通点是:默认情况下菜单隐藏,一旦用户需要导航链接,点击图标菜单展开,选中后菜单自动消失隐藏,下一次操作时重复。优点是不会影响其他的页面内容。

多级导航

当你需要多个子链接的导航菜单,那么你不得不规划出一个完美的解决方案。除了采用区块层级下拉菜单,你还可以选择创建多级导航菜单。


以SonySony公司的网站设计为例。用户通过滚动页面找到任何他们想要的内容。

页脚链接

一旦用户点击导航按钮,它会自动跳转到采用哈希元素ID的页脚。用户可以快速访问页脚链接,无需手动滚动。


再来看下Contents Magazine设计风格,只有几个少有的顶部导航链接。调整浏览器,你就会看到一个搜索栏,并且会呈现出一些模块链接。目的是在于保持页面布局均匀,而无需额外的脚本,比如jQuery。

隐藏滑动菜单

这种设计趋势在AppleStore里经常可看到,这也是备受iOS开发者欢迎的设计风格。

虽然在CSS3中可创建这种效果,但请记住,不是所有浏览器都能支持。jQuery倒是个更加稳定的选择,甚至还有一些免费的开源插件可供你选择。


点击查看Sequence的设计风格。

英文出自:Teamtreehouse

新平台,新惊喜:记第二届Coding For Fun 创业建议泛滥成灾 实用的不多 腾讯云俱乐部北京站:知名手游商畅谈云时代开发运营策略 LG再战平板市场:将推出8.3英寸平板G Pad 编程语言与工具专题论坛:各类编程语言使用体会分享 淘宝、腾讯、豆瓣、支付宝、网易专家热议大数据分析与BI实战 “创新或灭亡”:Google的80/20只是转移视线的说辞罢了 自动化编排,配合SDN的iMC V7更加开放 [回顾]比尔·盖茨传奇的前半生 IT基础设施与运维论坛:IT基础设施及运维经验分享 记华为HCC2013 Day1:发力高端存储 HCC 2013虚拟化论坛:虚拟化未来发展方向 Windows 8操作系统市场份额增至7.41% Windows 7仍最受欢迎 【开源专访】Sea.js创始人玉伯的前端开发之路 SDCC 2013:阿里周宝方谈“去IOE”战略及实施 百度和高德:最后谁是地图的王者? 【CTO论道】瑞智和康CEO陶建辉:软硬结合是消费电子新潮流 10大高效率原型设计工具 JIRA与敏捷:李小龙教给我们的敏捷开发之道 百度开放云:Light Up The World,与开发者共享云未来 有胆你就来!11个在线编码大赛 CTO如何避免决策失控:第一步-定义角色 后机械硬盘时代,那些引领风骚的闪存初创公司 致远文杰:传统企业如何实现移动化转型? 记华为HCC2013 Day2:SDN开放编程系统OPS打造生态圈 HCC2013:华为FusionCube融合至简,性能至优 已确认Stephen Elop候选微软下任CEO 英语对于软件开发者来说到底有多重要? SDCC 2013中国软件开发者大会成功落幕 新浪微博宋琦:PHP在微博优化中的“大显身手” 8月份浏览器份额:IE浏览器PC端出现反弹 移动端跌出前五 在主框架中建立了一个工具条,如何在视中对其进行操作 有戴过隐形眼镜的朋友吗?感觉怎样?我最近配的怎么感觉不舒服? 又快到毕业就业的季节,看看这两道题(c),就当热身如何? 实习了,散点分,大家乐一乐! 在Redhat8.0下关于nv显卡驱动的安装问题 小弟偶现要搞电子地图,请各位推荐推荐有关的书籍,一定给分 怎样检验文本框内是有效的数字 又快到毕业就业的季节,看看这两道题(c),就当热身如何? 如何在VS.net 下编译.cpp文件(非Windows应用) 请问像comp.lang.c++这样的新闻组,我要怎么设置才能上呢? 如何知道mfc程序需要哪些dll文件阿?vc有没有这个功能? 各位好,小弟有一事要问, 错在哪里了? 又快到毕业就业的季节,看看这两道题(c),就当热身如何? 这些是不是b/s模式??为什么?? 决心重新捡起丢下多年的数学,大家祝我好运吧! lj8101(笨笨)请进 !!!可用分不再增加的对策!!! 急,关于SQL查询 请问怎样new一个多维数组? 简单的application高手赐教!小妹急啊,谢谢! net 关于程序接口问题,请高手指教!!! 高手帮忙 我在SQL2000中有个字段类型是SMALLDATE,与CEDIT控件联结后,类型是CTIME,但显示不出? 我该怎么学? 怎样让我的程序运行时,始终在最前面 散分!!!回到CSDN!! 经常在运行屏幕保护时VC6.0 就出现了运行错误 嘻嘻~`问同学借了一台数码相机回家,自已拍了几张房间里的照片.大家有兴趣的就去吧!小A房间大暴光 请众位大侠,能不能强烈的推荐一本关于Delphi入门级的经典著作!谢谢了!推荐者必有分 请教! 关于Win32下的字符串操作 菜鸟提问,估计大家都会,指点一下 为什么我用ie的时候,新打开一个页面,他的还原形式的大小总是最小化的? var oXL = new ActiveXObject("Excel.Application")这句话有什么问题? 高分求算法 如何根据IP来得的到对方的操作系统类型 怎么这么老套,大家想想办法啊! 我要学DirectX了,请大家帮忙找一些这方面的资料。 关于出错信息的问题,多谢指教! Csdn,为什么你现在不忙了! asp.net的优点到底在哪里 大家能否推荐几本无线应用方面的书(如:短信编程、WAP编程), 谢了! 最基本问题 哪位写过控制摄像头的例子, 如何使用XP的远程桌面管理?远程控制. float 5.29 显示出来会是什么? 要不要学c++ 不能保存文件了,怎么回事? CString的一个问 “我的心已经控制了我的思想!我的心已经控制了我的思想,十万火急! 中华民族是宇宙人类思维认识物质个体太极物体最早的民族吗? 外贸英语合同这句如何翻译?多谢Irrevocable Letter of Credit issued by buyer or buyer’s nominated party in favor of seller or seller’s nominated beneficiary, shall be opened within 7 working days after receiving performance bond,provid 有女孩让我做她的心灵鸡汤是什么意思? 人类的思维怎么得来?拜托了各位 谢谢 如何提高逻辑思维? 心理学:思维与感知有何区别与联系? 西字旁加个乍字怎么读? 请你谈谈一个优秀的班集体对你成长的帮助 我想起个比较霸气,cool,或个性,好听的英文名字本人叫李静,但是是男生,性格比较开朗~ 一个西一个寸这字读什么如题 一个优秀的班集体对每个人的成长有什么意义 虎鲸厉害还是蓝鲸厉害 1个西在加个各字读什么字? 乔丹读哪个大学 蓝鲸厉害还是虎鲸厉害 内部语言思维与视知觉我们在处理文字 英语 数字信息时往往就算不出声也会运用内部语言来思维 就是潜在的大脑发声 那么我想问的是如果没有内部语言就单凭视觉我们能够理解文字信息吗 挥汗如雨的意思和造句 虎鲸vs巨齿鲨vs蓝鲸哪个会赢 盲人如何进对行语言思维进行感知? 张袂成阴,挥汗如雨,比肩继踵而在,何为无人?意思. 土壤动物的作用 写文章,感觉有思路,有语言,但是总感觉连贯性差点.有很多好词好句真是稍纵即逝,一转眼就忘了.另外我在很乱的环境中,很难想出东西来,更难组织语言.请问大家是什么原因,怎么办? 华罗庚依旧挥汗如雨地读书的挥汗如雨是什么意思? “心”和“脑”在解剖学上的区别? 高中生文字语言逻辑能力下降 感觉自己的正常思维都没有了最近一些很简单的问题总是反应不过来 大脑有强迫意识 总在思考的下一步想我为什么要这样做 却给不了解释 然后就开始怀 挥汗如雨的近义词是什么快 土壤动物在生态系统中成份一般是消费者对吗? 请问你们是怎么阅读的,就是当你们看到一句话时,你们的思维活动是怎么样的,感觉是怎么样的呢?据尼古拉 特斯拉自己说 他在看到一个词或句子时 ,他的脑海就会浮现对应的情景,不知道你们 When you told me you loved me ,Did you know it would take me the rest of my life? 为什么一定要总去考虑别人的感受!这真的是相互的么! 翻译I was drawn at the same time to that place near the fence 马哲辨析题:世界的本质是物质,物质的属性是运动 往事桩桩件件,1个个在前眼前.是什么词拜托了各位 谢谢 英语翻译In ancient times,people compared human virtues to pure jade on the one hand and admired its beauty and fine textures on the other. 马哲辨析题:世界是物质的,物质是运动的,运动是有规律的,规律是可以把握的. 以‘历史’‘生命’‘教育’‘人生’四个词为核心,写一篇短文 那是一个消遣的好地方 怎么翻译 It is a good place to ___ ___ some time . 马哲辨析题:世界统一与存在不是说世界统一于物质,而物质即存在么?可是这句话不对啊!希望将这道题回答得尽可能详细, 兔死狐悲是啥意思? 考虑别人的感受.谁来考虑我的感受?谁来考虑我的感受? Now is not the time to place blame.句中的place 翻译一下句子. If You Wanna Be Happy (Aka If You Want To Be Happy) (Live At Pj'S - 1963) 歌词 有一首80年前后词是“静静的校园,.我们的生活.” 急求歌词及mp3歌曲.有一首80年前后的校园歌曲,我记得第一句歌词是“静静的校园,.我们的生活.” 急求歌词及mp3歌曲. You can do anything if u really want to ! TO;liu yun@penpal.com From:Alice@penpal.com Dear liu yun, I am happy to have a new pen pal.I live i 该生态系统中,非生物成分除了水、 空气、土壤外,还应该有_______ . 上面一个西、下面一个米、这是什么字?... I will be used to living alone after leaving you 西字旁加个太怎么读 上边是西,下边是米是什么字 咋组词 They will be happy ( ) they live in the nature.A.if B.before C.because D.after 一个西字一个少字怎么读 it's not easy to forgettsomeehing that really happy: 灵心精神是啥意思啊? 如何彻底了解人类思维?从而做出超智能AI?求大虾指条明路我正往这方面前进... They in together is really very happy “灵明的心 ” “灵明的心 ” 关于 了解人类思维,想法的书 《荒漠里的眼泪》的主要内容
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘