首页 >

众包知识 >

网站建设  >

UI设计

响应式网页设计
响应式网页设计
响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。
1什么是响应式网页设计?
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

Ethan Marcotte曾经在A List Apart发表过一篇文章"Responsive Web Design",文中援引了响应式建筑设计的概念:现出现了一门新兴的学科——"响应式架构(responsive architecture)"——提出,物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构;还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产"智能玻璃":当室内人数达到一定的阈值时,这种玻璃可以自动变为不透明,确保隐私。

将这个思路延伸到Web设计的领域,我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案?和响应式建筑相似,Web设计同样应该做到根据不同设备环境自动响应及调整。

.......


查看全文 >>
2响应式网页设计教程
另外也要考虑网站本身是否需要实施移动化,虽然响应式站点并不能算是一种纯粹的移动化解决方案,但是在某些情况下,这种方式是非常值得考虑的。

你心里没谱设计开发一个全新的移动版本站点或是客户端应用,整个过程是有很大挑战性的,除非产品正式上线,否则你无法真正了解它是否会成功,与其单纯的为了移动化而花费资源打造移动版本站点或是开发客户端应用,不如先花些心思将原本的网站打造的更具弹性,使其在各种主流移动设备中都拥有尽量优秀的用户体验。

你想节约成本要打造响应式站点,自然离不开有经验的交互、视觉设计及前端开发人员,所需的资源,尤其是时间方面,比起普通网站来说大约增加20%到30%的样子,但比起单独打造移动版本的网站,或是设计开发客户端应用的成本来说,却要低很多,从维护的角度来说,也会轻松很多。

你希望网站可以兼容未来的新设备所谓的移动版本站点,通常是针对某类具体规格的设备进行单独打造的,弹性比较差,新的移动设备层出不穷,传统的移动版本站点需要不断的进行更新维护,才能尽量保证在新设备中工作良好,响应式设计可以根据设备浏览环境的具体规格进行判断,使用不同的呈现方式来展示内容,无需针对某种特定的规格进行维护,适应性更好。

用户研究与设备规格预估前期,通过用户调研,我们可以了解到用户群所使用的设备类型分布情况,并预估出几种典型的响应规格,用来规划不同的呈现方式

.......


查看全文 >>
3响应式网页设计基础
为了适应屏幕,多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度,并且忽视初始的宽度设置。这段代码写在 <head>里面

这个例子里面,有header、content、sidebar和footer等基本的网页布局。 header 有固定的高180px,content 容器的宽是600px,sidebar的宽是300px。

CSS3 media query 响应式网页设计的关键。它像一个if语句,告诉浏览器如何根据特定的屏幕宽口来加载网页。

如果屏幕窗口小于980px,下面的规则就生效。在这里,我设置了容器的宽度为百分比的形式而不是像素单位,这样会更加灵活。

如果屏幕窗口小于700px, 定义 #content 和 #sidebar 为自适应宽度,并移除它的浮动属性,这样它会全屏显示。

如果屏幕窗口小于480px (移动设备的屏幕), 设置#header 高为自适应,把h1字体设置为24px,并且隐藏#sidebar。

.......


查看全文 >>
4响应式网页设计流程
首先来定义每种关键规格中的结构网格,我们创建了三个页面模板,宽度分别为1024像素(桌面显示器)、768像素(iPad竖屏宽度)、320像素(iPhone竖屏宽度)。

从每列等宽的情况入手,可以让规划工作相对简单一些,帮助我们将注意力放在响应式的布局改变上。

沟通与评审接下来我们需要考虑的是,每一列中的模块组件应该以怎样的方式随着页面的宽度缩放而响应式的适应和调整,在这个过程里,保持团队成员之间的沟通是非常重要的,包括视觉设计师、前端开发人员等。

使用初步的线框原型,与大家交流模块组件在布局和样式方面的调整计划,尽量在初期就让相关成员对整个规划做到心中有数,并尽早发现前端实现等方面的潜在的问题。

也许对于你自己的实际项目来说,其他页面的重要程度或代表性是超过首页的,这不是问题,你可以调整具体的页面规划次序,我们的这个项目案例是从首页开始入手的。

.......


查看全文 >>
5响应式网页设计规范
是的,当下确实移动互联网发展迅猛,所以响应式网页设计一直被当作重点,而且在概念上是主角。但它也不是唯一,因为你还要考虑到设备。如:平板和电视。响应式网页的真正目的是使网页适应任何屏幕,任意比例和宽度的互联网产品。这些远远超出了手机的范畴。

尽可能在多样的设备上测试在设计领域,大多数网页设计师在设计他们的网站时,只会在少量的设备上测试,做响应式网站的时候也一样。要测试完所有设备是不可能的。其实应该根据自己的用户进行有针对性的测试,这样操作性更强。

字体不用优化不幸的是,太多设计师觉得这点是对的。他们注重在设备和网页上的大小,却不注重用户实际看到的大小,一个网站必须有很强的可读性,而且响应式网站字体的考虑是非常重要的。

一种适配经验是不够用的人们希望可以接入不同的设备,这让设计师抓狂。这也让设计师觉得网站必须适应用户的每个定制化的设备。其实这个不难,你可以很容易让你的网站适配各个设备。

响应式网页因为加载内容太多,所以慢人们在想象中时这样的,但是这不公平,有很多小规范的网站内容巨多,但是加载迅速,顺利,表明这些问题不是设计的问题,错在页面加载速度,这是代码优化问题。

.......


查看全文 >>

相关成功案例

UI设计方案
免费预约
相关知识
界面ui设计工具界面ui设计流程界面ui设计要点界面ui设计软件界面ui设计培训学校手机ui设计教程手机ui设计软件手机ui设计规范手机ui设计培训 手机ui设计是什么?