响应式网站页面设计的流程分析

第一步:确定需要兼容的设备类型、屏幕尺寸

通过用户研究,了解用户使用的设备分布情况,确定需要兼容的设备类型、屏幕尺寸。
设备类型:包括移动设备(手机、平板)和pc。对于移动设备,设计和实现的时候注意增加手势的功能。
需要考虑的问题:
某个页面进行响应式设计时其适用的尺寸范围是哪些?比如,e良师益友网结果页面,跨度可以从手机到宽屏,而e良师益友网首页,由于结构过于复杂,想直接迁移到手机上,不太现实,不如直接设计一个手机版的首页。相关郭朋涛网页制作
结合用户需求和实现成本,对适用的尺寸进行取舍。比如一些功能操作的页面,用户一般没有在移动端进行操作的需求,没有必要进行响应式设计。
第二步:制作线框原型

针对确定下来的几个尺寸分别制作不同的线框原型,需要考虑清楚不同尺寸下,页面的布局如何变化,内容尺寸如何缩放,功能、内容的删减,甚至针对特殊的环境作特殊化的设计等。这个过程需要设计师和前端开发人员保持密切的沟通。

第三步:测试线框原型
将图片导入到相应的设备进行一些简单的测试,可帮助我们尽早发现可访问性、可读性等方面存在的问题。
第四步:视觉设计
注意,移动设备的屏幕像素密度与传统电脑屏幕不一样,在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等。
第五步:前端实现

与传统的web开发相比,响应式设计的页面由于页面布局、内容尺寸发生了变化,所以最终的产出更有可能与设计稿出入较大,需要前端开发人员和设计师多沟通。

通过学习网站制作教程知识,了解响应式页面的设计,更多课程可登陆e良师益友网。

时间: 2024-11-02 12:40:33

响应式网站页面设计的流程分析的相关文章

做响应式网站前期必会知识点-1前期准备

媒体查询 1.媒体类型 @media screen and (max-width: 300px) { body { background-color:lightblue; } } 其中media后面的那个单词是媒体类型 all所有媒体类型(默认,可以不写),screen屏幕,这两个是最常用的. 2.逻辑操作符 媒体查询的意思就是后面这个逻辑表达式为真,里面的css起作用. 中间and是逻辑操作符 and 与      都为真才真 or或逗号   有一个真就为真 not 非       not的有

响应式网站设计原则

在QA TechWeek 2014期间,QA公司首席技术专家David Walker在使用Foundation进行响应式设计的会议上,提出了响应式网站设计的原则.Walker提到从现有桌面网站创建移动应用网站的多种方式:原生应用,为每种移动操作系统开发一个应用:嵌入式HTML 5,使用PhoneGap或者类似的工具:在服务端过滤,分别为桌面和移动设备建立网站,在两者间进行重定向. 分析完每种方法的优缺点后,Walker提出了响应式设计(RWD),使用HTML 5.JavaScript和CSS创建

设计出色响应式网站的十个技巧

移动技术并没有渐退的迹象,反而对于个人和企业去建立门户网站,必须考虑移动用户已经变成了趋势.对于那些在不同设备上看起来很酷.功能十分有效的正在发展中的网站,响应式设计仍保持实践性.作为一个Web设计师,也会尝试用各种各样的网页设计技术.如果响应式设计趋势让你印象深刻,并且也打算用响应式设计深入研究网站创新,那么你已经来到了初学者的门口.这里,已经包含了10个关于设计一个完美的响应式网站的很酷的建议.因此,让我们深入了解这些建议. 1. 确保性能是你主要的目标 不管现在移动设备的网络连接速度有多快

带你玩转JavaWeb开发之五-如何完成响应式开发页面

响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad端, 手机端同时正常显示啊,并且不能够影响显示效果 技术分析 BootStap概述 什么是BootStrap BootStrap有什么作用 什么是响应式 BootStrap的中文网 http://www.bootcss.com 下载BootStrap BootStrap结构 全局CSS bootSt

7 个 Bootstrap 在线编辑器用于快速开发响应式网站

Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? 这就是Bootstrap 编辑器的用武之地. Bootstrap 编辑器和生成器使得画界面原型.测试.搭建响应式网站变得简单. 尽管每一个编辑器都不同,但是它们都利用Bootstrap 庞大的组件库实现了拖入和移除组件功能. 在这篇文章中,我们总结了一些目前市场上最好的 Bootstrap 编辑器

如何利用H5响应式建站系统做响应式网站

响应式网站成为了企业建站的首选目标,是什么因素导致的呢?我想更多是因为响应式网站的强大展示方式,多元素.多样化.多功能的形态,让网站"活了"起来,还有能够一个网站便能适应所有屏幕设备,不再需要为每一个不一样的设备制定一个特定版本的网站,省去了建站,优化.管理的麻烦.让你更好的统筹管理一个网站,便能在不同设备平台上得到相同的效果. 说起响应式网站,很多人会疑惑.那么好的类型网站,建设起来费用是不是要很高?建设时间是不是很长?错!错!错!其实如果在较早直接做一个响应式网站是要花费高额的开发

使用 CSS 媒体查询创建响应式网站

来自:http://www.ibm.com/developerworks/cn/web/wa-cssqueries/ 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网站,都可以呈现一个可用的界面.响应式设计可以响应各种屏幕大小,因此也成为了 “前瞻性” 的网站,屏幕将随着新的智能手机和平板电脑的问世而快速演变.实现响应式设计的主要途径是使用 CSS 媒体查询.在本文中,我们将了解如何将

H5响应式网站制作的4个目标原则

对于用户体验效果在网站建设中的重要性,网站建设页面方面的布局问题,一直以来都是不同企业.商家关注的信息要点.细节决定了整个H5响应式网站建设的效果,不管是排列.色彩反差效果还是字体效果,最终都会直接影响网站带给大家的美感以及专业度,网站的目标必须要具有一定程度的可行性的,必须在网站建设之前就要完成制定网站的目标制定??. 1.可分析性 网站目标的设定一定要有可分析性,什么是可分析性呢?简单的说就是在满足用户的需求的时候,我们得到的网站结果要具有分析的特点,我们通过分析可以得出网站下一阶段的发展规

【Web探索之旅】第二部分第五课:响应式网站和移动应用

内容简介 1.第二部分第五课:响应式网站和移动应用 2.第三部分第一课预告:服务器 第二部分第五课:响应式网站和移动应用 在我们开始聊响应式网站之前,我们可以聊聊移动App(App是Application的缩写,意为"应用"). 自从触屏式手机和平板电脑开始流行起来后(多亏乔布斯乔老爷子推广了iPhone),传统的网站和软件行业发生了翻天覆地的变化.以前,我们用手机最多是打电话,发短信,玩游戏,很难得会在手机上浏览网页. 可是自从触屏技术开始流行后,大大提高了人们在手机和平板上&quo