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

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

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

中国日报:向移动新媒体蜕变 C#五子棋程序设计 Mozilla宣布推出Firefox OS 面临四大问题 Ruby 2系列首个稳定版 Ruby 2.0.0-P0发布 微软改进Windows Blue搜索 系统或今夏推出 移动新趋势:扁平化设计 vs. 拟物化设计(下篇) 传奇程序员:Minecraft开发者Notch大神 让沟通更便捷 ConnectYard宣布推出全新的Web API 在Hadoop上运行SQL:程序员需知晓的13种数据工具 怎样用好Eucalyptus? AWS攻势变猛,Rackspace主动降价CDN与云存储 惠普将于下季度推出低功耗的Moonshot服务器 webOS复活!LG收购webOS用于智能电视 那些因为HTML5而将消亡的产品 初窥iWatch用户界面:开创基于时间的全新体验 如何编写出拥抱变化的代码? 20个优秀的前端框架 以AWS和vCloud为标杆看四大开源平台的定位 桌面集成开发环境五年内必将“死亡”? 助影人圆梦奥斯卡 8mm相机应用其实很平庸 苹果应用审查团队叫停Cookie追踪技术 时势造英雄:中国早期O2O创业故事 iOS开发与Android开发的四大不同 “消极抵抗”AWS OpsWork?RightScale首次宣布转售并支持GCE 2012年VC都把钱投给了哪些大数据初创公司? 耐用性将成苹果iWatch最大挑战 Sphinx:首款全硬件加速HTML5游戏引擎发布 PayPal创始人Levchin又创办了一家移动支付公司Affirm Zuck、Bill Gates、Jack Dorsey上银幕激励孩子编程 十款最新开源的开发者工具/应用(组图) Django 1.5发布,Python 3开始进入主流? 怎样使程序发生异常时不弹出带红叉的窗口,异常可采用日志文件记录? 我下载了mysql-3.23.57-win.zip 安装在win2k server下为何不能用? 妹妹求救:用什么软件可以编辑.dll文件! 帮帮忙 高分求VS.NET2003正版中文版下载 XML数据导入到SQL Sever数据库 IIS运行不了ASP.NET文件,怎样做呢? oracle8i安装问-在线等待-急 怎么开启dbms_output的功能。 如何批量运行插入语句??? 数据库输出的问题 关于DELPHI 与 .NET 怎么样可以使CStatic类定义的对象变成灰白的,即disabled掉,不准在资源中改。 请教一个关于文件的问题~~ 如何将UTF-8的编码变成gb2312的编码 为什么用ADOQUERy进行查询,时间超过40秒时便出现超时连接 说说 中秋你们那是怎么过的? 两天都没摆平的问题,各位帮忙看一下。我给大家唱小曲儿啦:) 向大力请教! 一点小问题 车票精确打印 深夜,你会为谁开着手机? 新手提问:日期时间无法完全显示:? 如何把位图,字体,图标资源保存在Dll动态库中,以便让不同的Windows应用程序共享 散分了300分~高兴,朋友的网站访问者有分~不够在加!!!!!!!!!!一定给分! 寻找网站后权限的解决方案---在线等待 有没有达人可以讲解下加密解密 请教高手:类的构造函数!谢谢 求一个从*.properties文件读取数据的javabean c/s部署问题 GTK2.0安装的问题??? 中国最好的免费影院--good 我的电脑打开,菜单栏没有在标题题下面,是怎么回事啊,在线等啊. windows 2000 server下能否安装oracle734 (急急-在线等)一个多条记录登记、保存问题 這樣的觸發器怎麽寫? 请问是考计算机等级考试好还是考中级程序员?以及相关书籍? 小数点后位数的问题 vb.NET文本框數據源綁定問題,各位幫忙了,小菜鳥領教了。希望你提出寶貴意見。 求助! SQLServer事务日志 这样的网友都该死!! oracle中sql*plus问题 求助:一个模板继承的问题。 能够处理音频的delphi控件 关于链接池的问题? 回答了“(新手)提问请勿见笑 float (*p)[4]的各位大哥近来拿分! 今天我去一家韩国人开的公司面试了!up有分 老兄我想换个手机号码,请问使用那个号码打长途比较省钱(131,135,136),我人在深圳. 高分求两个filter的CLSID。 (急急-在线等)一个多条记录登记、保存问题 常州话怎么读 两个圆,小圆的半径是大圆半径的4分之1,则小圆的面积和大圆面积的比是() 大小两个圆,小圆的半径是大圆半径的2分之1,那么大圆面积是小圆面积的( ) 英语翻译还有小此老 还有小鸟比 计算 要步骤(平方差公式)(a+b-c)(a+b+c) 会常州话的来!想去常州了,用常州话怎么说?求常州本地人回答! 常州话谁会说?下班,吃饭怎么说? “请不要讲常州话,我听不懂” 用常州话怎么讲? 若f(x)(x∈R)为奇函数,当x>0时,f(x)=x^3-cosx,求f(x)的解析式 "螳臂挡车"中的"车"到底怎么读?以前,我都教孩子读JU,今天早晨,央视少儿频道中读CHE,到底应该读作什么呢? 常州话求翻译色泽娘奶胎 宁夏“10·14”灭门杀人案犯罪嫌疑病房成了临时募捐点 20余万善款驰援浙江180项科技成果下月开槌出售安徽宁国民政局长否认叫停网友募捐 自日媒:解密文件显示日本曾试图阻止中美杭州一对匝道一段快速路两条断头路年底法国总统会见中国外长王毅 谴责北京暴东莞某校2个月开除21学生 乱扔垃圾四川宜宾一火葬场休息区变茶馆 想要坐17岁少年贩毒只为给爷爷办寿宴 从小杭州孩儿巷取消52个泊位后道路通行明青海八旬老人免费为街坊理发二十载2015中国 东盟职业教育联展暨论坛巴基斯坦白沙瓦一空军基地遭袭泰国副总理:中泰铁路项目有望于今年底第三届国际科技博览会:各代军机同台亮香港市民纪念“九一八”事变 游行反对浙江浦江12岁女孩患骨肉瘤:右手不能韩国企业大举亮相东博会 冀通过中国进我国支线飞机市场迎来新一轮竞争张高丽出席中国-东盟博览会开幕式并发中山大学与珠海政府联手打造中大珠海校大明保安我的系统是神豪孤独且潇洒乱唐悍匪武侠之小乞儿寿比天长废土崛起创世神在凡间重生足坛大佬末世之绝世剑仙仙之众怒灵峰寺旅游奶龙神山旅游陈家沟旅游延庆水泉沟西水峪景区旅游镇虏关旅游宁园旅游蟹岛城市海景水上乐园旅游老北京胡同游旅游沙县城隍庙旅游锦林佛手文化园旅游徂徕山滑雪场旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘