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

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

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

5000万次下载:HandyGames如何征服Google Play? 红帽大战Ubuntu:750小时免费企业版红帽套餐即将登陆AWS EMC Sanjay Mirchandani:92%虚拟化,使更少IT人拥有更大交付能力 从NSA携谷歌、微软等9家名企监控用户行为看数据安全 【专访间】新科兰德创始人左磊:我们的“卖点”是“数据弹药” 甲骨文公司宣布推出最新Java EE 7 10款最佳CSS/jQuery开源图片说明 创业者应避免对投资者说的五句话 直接拿来用!最火的iOS开源项目(二) 西部数据Pat Wilkison:云计算市场是创新热点 猎豹浏览器发布手机版:PM谈开发理念 成为伟大开发者的“九步曲” 使用GPU构建更便宜的Google神经网络 Facebook与Yahoo!的“火花”:系统间实时数据流管理工具 视金钱如粪土?Yahoo!又要买了,梅姐的算盘是这样打的 MySQL手册不再遵循GPL协议:MySQL走向闭源前兆? 扁平化设计会扼杀人们的创造力吗? 又一巨头涉足移动视频分享领域:传雅虎欲收购短视频应用Qwiki 史上最牛:主要靠三消游戏IPO King也许会是第一家 乐视超级电视预约启动 1小时预约近1.4万台 王坚:未来一年阿里云会有很大变化 梁胜:开源并不是做好软件的唯一方式 如何为IE 10编写特定的样式 MySQL手册许可证更改乃是Bug惹得祸 开源世界高峰论坛首批演讲议题公布 测试工程师的心灵鸡汤:谦虚、不沉默、有危机感、不断努力 高德地图API“沿图有你,晒出你的LBS应用”活动拉开帷幕! 谁能找出Windows 8.1的安全漏洞,就将获得微软10万美元奖金! 【直击美国云计算】Facebook分享数据中心新网络架构Fabric 【直击美国云计算】OCP发起产业界的Maker运动 红帽刘长春:开源是推动云计算和大数据发展的重要力量 Delphi的编程环境 救命:如何读取像http://www.csdn.net/demo/demo.txt这样的文件存放到本地? vb调用vc编的activex 在DELPHI中怎样COPY一个文件夹? VB的界而的确容易制作,但似乎过于简单 如何在ATL环境下动态地开辟一个字符串型的缓存区 一句sql 关于中国软件业问题的一些看法 用xml做数据库是不是不安全 关于setwindowlong的问题!!! 关于WINSOCK 通信的问题 Query Analyzer怎么刪不了多筆記錄﹖ getchar ()的问题 ◆→访问csdn会让我“死机”! 纯技术咨询,请大家踊跃发言 一个串口通讯的问题。 一个庞大的计算计划,求解素数的间隔的 那句效率高点? 有没有sql server+asp开发的朋友,怎样把sql server数据库上传到服务器上,分绍有分! 如何注册使用控件,急!!! CView类中如何实现浮动的提示信息? 怎样给对话框创建一个视1? 报表计时用table,不用query,报表已设计好了,在显示预览时如果将一些不符合条件记录筛选择掉呢? 请问流是个什么概念? 我是初学,请指点 送分求购api用法及中文说明! asp页面可否设置关键字,使文章能被搜索引擎搜索到? ~~谁想做世界杯活力宝贝~~? 如何将StringGrid 中的数据保存为Html格式的表格 关于断点续传,请问大家 php中有没有 与 asp response.clear等同函数 单片机高手请看:中断中的中断,麻烦中的麻烦。 怎一个难字了得?挑战高手 如何改变LISTVIEW中各项的宽度 求《C++ Primer》中文版电子书下载;ejian@21cn.com 请问:在Asp中如何使用ODBC和SQL 注册表help... ListCtrl控件设为ICON属性,请问是否有subitem属性? Win2000系统去访问WIN98系统的服务器 PING的通 但打开的时候报参数出错! vb调用vc编的activex oem怎么老是连不上阿? 简单的入门问题:如何让菜单变灰? how add icon to one popup menu ? 怎么判断一个form对象变量为空呢? 发送和接收数据包问题? ActiveX问题,微软专家请进.<------------- 急 *.idc不能运行了,请问这是为什么? dbcontrols(泰山__抛砖引玉) 怎样才能够把ado记录集写到EXECL并进行打印呢? 如何判断字符串中,有几个指定的字符? xml数据文件倒入数据库,有什么好方法。 检查数据的有效性,最好是在哪一个事件中检查?怎样写,可否给点例子。 如何在DELPHI中调用FLASH图片。谢谢!有帮助的给分! 学校买来50套课桌椅,买张椅子28.5元,没把椅子16.5元.买桌子比买椅子多花了多少元? 础润而雨,础润的原因是什么? 哪里有人教版新课标四年级下册数学教案(表格式的)急用, 小树成长扩句至少扩两处 怎样考好作文 2010年青岛出版社暑假生活指导七年级{下册}P80Y页词汇练习 将下列短语译成汉语P81页 D按要求变化词性P82页 C和D部分P85页 句型转换P88页 C部分P90页 采访调查P92页 综合实践P98页 材料解析1P101页 一个长方形绿地的面积是360平方米,宽是9米.长不变,宽增加到18米,扩大后的面积是多少平方米? 一次买5千克鸡蛋打八折少花2元,则鸡蛋的原价是? 小学四年级数学下册全册教案 月晕而风,础润而雨~ 与一个爱看书的人对话的作文400字 在一个高为6米,长为10米的楼梯上铺地毯,一共需要地毯( )米. 月晕而风础润而雨是什么意思 这辈子最爱的人阅读答案 如图,在一个高六米长十米的楼梯表面上铺地毯,地毯至少是多长题就是这样了,没办法再补充了(复制的别来,无意义灌水的别来,二楼三楼能否说明如何做出 “有无相生,前后相随”和“月晕而风, 小苗与大树对话课后问题:读书有什么好处(在文中找出来) 2011暑假生活指导 青岛出版社 绿色封面的答案 人教版一年级数学下册认识人民币怎么有小数 成语“月晕而风, 小苗与大树的对话 采访一位身边爱读书的人 1,准备工作:我要采访的人是,因为 .2.我要采访的问题是1 .2/. 2013年春新改版人教版小学数学一年级下册全册教案 是新改版的哦 作文开头怎样写才吸引人 小苗与大树的对话 苗苗和季先生对读书有哪些见解 荣德基典中点英语八年级下册Unit4SectionA答案 作文的开头怎样写才能吸引人? 关于第一次月考感受的作文成绩优秀,急需一篇作文 荣德基初中英语系列典中点七年级英语上units8r版答案 “小树长成大树”.“聪明的你由小长大”这些现象主要与细胞的什么和什么有关? 第一次月考感悟作文600字 学校新购回六套办公桌椅共用去1638元.已知一张桌子的价钱是一把椅子的3.2倍,1张桌字的价钱是多少?要把步骤写清楚,以及那样做的原因 不要说废话!最烦这样的人!郁闷!@#¥%%…………&………………*)——()( 第一次月考感想还没有发下成绩,第一次月考的感受 台阶ac的宽度为1.5米,其高度ab为4米水平距离bc为5米,要债台阶上铺地毯,求地毯面积? 求作文!《月考》 作文:《我的父亲母亲》急!我该用哪句当开头 哪句当结尾 还是两个都开头或结尾在父亲与母亲的悉心呵护下,我渐渐地走向了成熟.父母的爱是无法言语的.40 如图,台阶的宽度为2米,其高度AB=4米,水平距离BC=5米,要在台阶上铺满地毯,那么要铺地毯的面积是?米图形已给出,时间紧迫!只需说出最后答案即可!又好又快的加分! 一束光线与平面镜成30度角入射,则反射光线与入射光线之间的夹角为多少? 有小学三年级下册数学的教案吗 学校买来60套办公桌椅共36000元每张桌子比每张椅子贵300元桌子椅子各多少元? “月晕而风”“欲来之际”“冷眼看去”各是什么意思越准确越好 学校买来20套办公桌椅,桌子每张100元,椅子的价钱比桌子少2/5,椅子每张多少钱? 在高为1.5米,斜坡长为2.5米得楼梯上铺地毯,则所需要地毯的长至少为?1,)2.5 2)3.5 3)4.5 4)6怎么想的? 作文《月考小结》怎么写 学校买了两套办公桌椅共1060元,每张桌子比椅子贵130元,那么桌子椅子各多少元.两编织小组共有78人,每天编草帽390就、顶,第一组比第二组少16人,球第一组每天编多少草帽 人教八上英语典中点10,11,12单元答案 2000字作文月考总结给个思路来看看吧! 学校购置10套办公桌椅,共用去3200元,其中两张桌子的价钱正好相当于3把椅子的价钱,分别算出每张桌子和椅子的价钱? 每张桌子60元,每把椅子25元,学校一共买了90件这样的桌椅,花了3300,桌子买了 作文,有关初一月考总结. 张老师用8000元为学校买20套不办公桌椅,每张桌子的售价是每把椅子的9倍,每张桌子和每把椅子各多少元?(列方程解答) 学校买来50套桌椅 共用了2400元 每张桌子28元 每把椅子比每张桌子便宜多少元? 月考总结作文 光线垂直射到平面镜上,如使镜面转动150角,则反射光线转过的角度是________.(为什么?) 《口技》阅读全文,1.本文主题部分写口技表演,以一个家庭为中心,学了那几个生活片断?有几次高潮?各有什么特点?口技——林嗣环京中有善口技者.会宾客大宴,于厅事之东北角,施八尺屏障,口 谁能给我一个月考总结的作文啊 光线垂直射到平面镜上,如使镜面转动150角,则反射光线转过的角度是________.这个转动 150角 是90变150 还是90+150 但答案是150° 请高手们看看 二、按要求改写句子.小树长成了大树.(扩句) 学校操场的北墙上爬满了爬山虎.(缩句) 若入射光线的方向不变,而将平面镜转过θ角,3QA转过θ角 B转过2θ角 C转过二分之一θ角 D无法确定 并说明原因 光线垂直射到平面镜上,然后使镜面转动20°,则反射光线转动的角度是
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘