干货:响应式页面导航设计解析(附demo下载)

标签: 优秀网页设计 响应式设计 酷站推荐 PS 教程 & 设计文章 响应式导航设计 | 发表时间:2013-05-02 10:32 | 作者:kingtent
出处:http://www.uisdc.com

响应式导航解析

一淘UX:有人说,2013将是响应式网页设计之年。自用户体验设计师Ethan Marcotte在2010年提出Responsive Web Design(RWD)的名词,即响应式网页设计,这个概念从Responsive Architecture延伸到web设计领域,让所有的交互设计、视觉、前端开发都开始投入到这个趋势,或者说新的设计解决方案中。

cool,赞昵子,里面的一些案例很不错,导航(分一级导航、多级导航、面包屑)的响应方式bradfrost整理的比较全,附简单demo→ https://github.com/kissygalleryteam/responsive

当自己和身边的朋友越来越多的用上了iPhone、iPad、android手机或平板,当越来越多的人都在谈论这个老意识新概念的话题,当我们一直秉承的用户体验第一与网页设计完美结合的时候,我也陆续整理了一些关于响应式的设计理念及方法的东西,今天就以响应式导航的设计抛砖引玉,和大家分享一下。

 

响应式导航的设计遵循了响应式Web设计理念,页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。通过同比例缩减元素尺寸、调整页面结构布局以及内容的优化调整等方式,使得用户在不同的平台上有着独一无二的用户体验。这里要说明的是,悬浮特效、flash是不适用移动设备的。

一、情景定位

下面以三种有代表性的主流设备屏幕尺寸:Pc、iPad、iPhone做案例解析几种常见的导航设计。

1.简单智能的导航菜单形式

此款菜单适用于所有屏幕的一些设计,菜单扁平化,留有足够空间在各个不同的屏幕上做响应式的变化,一种简单的设计便可以轻松调整。

先来看网页开发设计公司 Flip非常简单色块的导航,采用了由网页文字链变到移动设备的按钮形式,规避了移动设备操作不精准等一些弊端。

 

另一种常见的右侧导航设计在很多网站中应用,例如:App设计团队 Create,在移动设备上,导航横向排列不变,Logo和导航由一行变为两行,页面简洁清晰且用户体验一致。

 

2.导航菜单列表形式

最常用的一种排列形式,横向导航在小屏幕下变为纵向排列,一列、两列甚至是多列多行的形式,具体应实际情况而定。

先来看单列形式的案例: Forefathers Group

两列形式: Travelorego

多行多列形式: Regent College

3.导航隐藏形式

在手机设备上导航的另一种形式以隐藏列表的方式呈现,是对空间的有效利用,突出高优先级内容的处理方式。

来看下 Microsoft的下拉隐藏菜单,通过设定图标点击对菜单做收缩或展开。经典、简约的布局完美适合平台转换。

     

 

国际标准化组织 ISO网站在移动设备预览时也采用了隐藏菜单的形式,但展开的交互形式菜单栏出现在网站的底部。这样,访客不得不先看头部和中间内容,迫使访客先浏览完网站后再决定下一步的走向。

   

4.下拉菜单形式

在第三种介绍中的隐藏菜单的两个案例里,同时也采用了下拉菜单的形式。使用下拉菜单来组织复杂内容是一个非常方便和流行的方式,复 杂的网站甚至会使用多层次的下拉菜单。在较小的屏幕上,在依赖触摸反应的设备上,下拉菜单要慎用。这里没有悬浮效果,屏幕资源可能非常有限。默认情况下, 导航菜单根本就不显示,只有当触摸到右上角指定的小图标时,第一个内容层才会打开。当触摸到其中一个栏目时,第二个内容层才会逐渐展开,给用户一个非常清 晰明了的内容导航。

来参考下面一个案例: The Copper Tree

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

二、设计原则

举了那么多案例,下面我们来看看在具体的设计中我们要遵循哪些原则?

1.在 响应式网页设计中,有时候我们需要对页面内容进行删减,按照优先级显示内容,只显示高优先级内容是原则之一。在屏幕较小的移动设备上应该优先考虑内容并且 去移掉那些小的栏目。在顶部显示高优先级内容,即把最重要的内容放置在顶部。导航是否一定要出现在页头或者重新布局改在页尾都要依网站具体规划去考虑。

2.提供清晰和友好的手指操作链接。尤其在手机设备上,可点击操作的区块不宜过小,引导要清晰强烈,不忽略任何一款设备。

3.调整设计来适应可用空间,使得用户在不同的设备上仍保持对同一页面相同的视觉和感觉。这也遵循我们交互设计体验一致的原则。大家可以参考 Oliver Russell网站,一个设计非常灵活的网站,在不同的屏幕分辨率下保持相同的视觉和感觉。

4.需考虑大部分用户右手点击操作,左手负责握住设备的习惯,右侧的导航列表既方便右手的点击,又可以避免被握着设备的左手不小心触碰到。有兴趣的同学可以参考Chris Kemm一篇非常棒的关于触屏设计的文章《Designing for Touch Screen》原文地址: http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/

结束语

响应式之所以变得流行的一大原因是无论在哪,看起来都很棒。2013我们正处在移动互联网快速发展的时代,一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本,响应式设计为移动互联网而生,Web设计也将迎来更多的响应式设计元素。

最后介绍一款响应式导航设计的插件: Responsive Nav Plugin

下载地址: http://responsive-nav.com/

针对小屏幕的可切换式导航的创建,支持触屏事件和CSS3过渡(transitions)效果,具有非常好的性能。

 

一淘UX原文: http://ux.etao.com/posts/785
================ 关于优设网================
“优设网 uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。

【特色推荐】
设计讲座:定期邀请国内互联网公司的设计前辈及行业总监在群内及YY语音(YY频道:15335158)分享实战经验。
设计微博:拥有粉丝量26万的人气微博 @优秀网页设计 ,欢迎大家关注并及时获取网页设计资源、下载顶尖设计素材。
设计导航:超赞的设计师必备网址导航: http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege11111125411132222

优设哥向您推荐:

20个华丽丽的导航设计PSD下载

一套精致的响应式网页设计模版PSD下载

超酷的摇滚字体免费下载

30有吸引力的搜索框设计PSD免费下载

推荐:30个流行的分页设计PSD下载
无觅

相关 [干货 响应式 页面] 推荐:

干货:响应式页面导航设计解析(附demo下载)

- - 优设(UISDC)
一淘UX:有人说,2013将是响应式网页设计之年. 自用户体验设计师Ethan Marcotte在2010年提出Responsive Web Design(RWD)的名词,即响应式网页设计,这个概念从Responsive Architecture延伸到web设计领域,让所有的交互设计、视觉、前端开发都开始投入到这个趋势,或者说新的设计解决方案中.

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

响应式Web设计

- - 葵中剑's Blog - SwordAir.com
响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局. 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:. 响应式Web设计50个例子和最佳实践.

响应式网页设计

- - IT技术博客大学习
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案. Web设计应该做到根据不同设备环境自动响应及调整. 当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先.

响应式Web设计

- - 阿里巴巴(中国站)用户体验设计部博客
在设计中经常遇到这几个问题:. 1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好. 有没有办法能有效解决这些问题呢.

Android响应式布局

- - 博客 - 伯乐在线
由于目前在做的一款app需要适配手机和平板,所以我在研究怎么构建可适应所有屏幕尺寸的布局方法. 在web的响应式布局上我有很多经验,比如使用网格流,CSS3中的media queries属性等等,这些都可以实现web上的响应式布局,所以我想在Android上试试看. 在Android上,是通过 configuration qualifiers的方式来加载不同的资源,基于不同的手机屏幕尺寸或者屏幕的朝向(竖直还是水平),而我最大的目标就是创建一个可以自动缩放的布局,而不用根据不同的屏幕尺寸加载不同的布局文件.

漫谈响应式设计

- - 新浪UED
学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说“你好”,你会很容易的给我回复“你好”,因为大家都是中国人,如果我说“hello”,我们这代人如果上过初中,他也会给我说“Hello”,但是如果我给对你说“Bonjour”,那可能只有高配的人才可能知道了.

淘宝响应式WebUI设计实践

- - Taobao UED Team
感谢贷岩的邀请,我在本期奶茶会上做了“响应式设计实践”的分享,是接着上一次的话题进一步讨论“如何实现”. 响应式Web设计(Responsive Web design)是当下比较流行的话题,什么是响应式设计. 简单讲,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整.

Screenqueri.es:响应式设计测试工具

- - 我爱水煮鱼
当你创建一个响应式的布局的时候,在绝大部分流行的分辨率的设备上进行测试是非常重要的,这可以让你决定页面上的每块是否现实或者优化它们的显示方式. 今天给大家介绍的 Screenqueri.es 就是一个免费的基于 Web 的响应式设计的测试工具,它能够让你输入一个网址,然后选择移动或者平板设备,然后对你的网站在各个分辨率下进行测试.

非响应式设计的viewport

- - 前端观察
整理自: Viewport Meta Tag For Non-Responsive Design. 中文原文: 非响应式设计的viewport. 请尊重版权,转载请注明来源,多谢~~. 大家已经非常熟悉 响应式网页设计了吧,但是我们通常会忽略很多旧的没有采用响应式设计的网站,其实这类网站在移动终端的用户体验更为关键——因为它们没有对移动设备做任何优化.