响应式页面导航的设计解析

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

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

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

面我们来看看在具体的设计中我们要遵循哪些原则?

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

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

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

4.需考虑大部分用户右手点击操作,左手负责握住设备的习惯,右侧的导航列表既方便右手的点击,又可以避免被握着设备的左手不小心触碰到。

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

响应式页面导航的设计解析

时间: 2024-10-21 10:22:05

响应式页面导航的设计解析的相关文章

响应式页面导航设计解析

有人说,2013将是响应式网页设计之年.自用户体验设计师Ethan Marcotte在2010年提出Responsive Web Design(RWD)的名词,即响应式网页设计,这个概念从Responsive Architecture延伸到web设计领域,让所有的交互设计.视觉.前端开发都开始投入到这个趋势,或者说新的设计解决方案中. 当自己和身边的朋友越来越多的用上了iPhone.iPad.android手机或平板,当越来越多的人都在谈论这个老意识新概念的话题,当我们一直秉承的用户体验第一与网

跨终端响应式页面设计入门

跨终端/响应式页面不外乎是让各种分辨率的屏幕都能顺利阅读你的页面,常规来讲一个跨终端页面,在宽屏的电脑上看和在小屏幕手机上看的布局是不同的,布局不同的原因是为了让读者更好地阅读你的页面,见下图: 这里有点要提到的是,我们常规会将PC版的页面和移动端设备的页面独立开来设计,这样会让PC端的页面布局更灵活和好维护.如果你希望你的页面能适配包括PC端在内的任何设备,那么下面几个小工具可以方便你顾及旧版本IE所存在的困扰: ⑴ IE8-不能识别HTML5的<hearder>.<article&g

html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计

序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死款高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度相同 成为一个正方形 甚至任何你想要比例 一,背景:目前移动端大多数图片或视频列表页面的显示,列出几个 可以看出这几个页面都有一个共同点 都有图片 双列 列表单个模块的高度相同  我演技劜他们的源码 都是讲图片设置为固定高度 然后将li撑开 li的宽度设置为50% 然后floatleft 然后用媒体

html5/css3响应式布局介绍及设计流程

html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 一个普通的自适应显示的三栏网页,当你用不同的终端来查

一款基于jquery和css3的响应式二级导航菜单

今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="header"> <div class="logo"> <a href="#">Responsive Nav</a> </div> <nav>

响应式页面[email&#160;protected]介绍

我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢?以前,可以再专门为手机定制一个页面,当用户访问的时候,判断设备是手机还是电脑,如果是手机就跳转到相应的手机页面,例如百度的就是,手机访问www.baidu.com就会跳转到m.baidu.com,这样做简直就是费力不讨好的活,所以聪明的程序员开发了一种自适应写法,即一次开发,处处显示!这到底是一个

html5/css3响应式页面开发总结

一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会带来兼容各种设备工作量大.代码累赘.加载时间长的缺点,但它们跨平台和终端,能"一次设计,普遍适用",可以根据屏幕分辨率自适应以及自动缩放图片.自动调整布局,它们不只是技术的实现,更多的是对于设计的全新思维模式. 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile

响应式页面设计原理

响应式Web设计(Responsive Web design)的理念是: 页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率.图片尺寸及相关脚本功能等,以适应不同设备:换句话说,页面应该有能力去自动响应用户的设备环境.响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个

html5/css3响应式页面的设计流程

第一步:确定需要兼容的设备类型.屏幕尺寸 通过用户研究,了解用户使用的设备分布情况,确定需要兼容的设备类型.屏幕尺寸. 设备类型:包括移动设备(手机.平板)和pc.对于移动设备,设计和实现的时候注意增加手势的功能. 屏幕尺寸:包括各种手机屏幕的尺寸(包括横向和竖向).各种平板的尺寸(包括横向和竖向).普通电脑屏幕和宽屏. 需要考虑的问题: 某个页面进行响应式设计时其适用的尺寸范围是哪些?比如,1688搜索结果页面,跨度可以从手机到宽屏,而1688首页,由于结构过于复杂,想直接迁移到手机上,不太现