1、什么叫响应式网站
响应式Web设计(Responsive Web design)的理念是:
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
2、web响应式网站怎么做
Step1:信息架构,确定内容策略。
根据产品定位和用户分析,交互设计师确定站点信息架构。(信息架构呈现方式有很多种,这不是本文重点,不详述)。
这时候可以明确这个产品有多少页面,每个页面包含多少内容,内容优先级是什么。很多产品包含N多页面,每个页面一一考虑响应式设计容易造成混乱且成 本巨大。所以下一步重要工作是分析页面类型把页面归类。以玩客为例,可以把10多个页面分成三类:列表类页面、详情类页面、操作类页面。
Step2:响应式移动框架
先说下为什么第二步要先设计移动框架。移动优先是移动互联网浪潮下应运而生的理念,由Luke Wroblewski最早提出。移动优先并不是指移动更重要,响应式设计理念里设备是同等重要的。它是指优先设计手机端的体验,有三个原因:
手机让设计专注,强迫你想清楚什么信息是最重要的。因为手机屏幕小,每屏呈现的内容少;触屏手机使用手指操作而非鼠标这样的精密设备来操作,对操 作有更高要求;手机使用场景更加丰富,很多场景用户是缺乏耐心的,比如当你排队看电影正在找手机上的电子票,马上排到你了翻半天却迟迟找不到那张票这是多 么令人崩溃的事情。
手机许多特性让设计更强大。手机上的语音输入、地理位置定位、丰富的手势操作、越来越多传感器,手机交互比PC拥有更多可能性。从手机开始设计,让你更早地思考如何发挥这些特性。
手机正在迅猛增长。手机即将超越PC,成为最主流的上网方式,这个趋势是不可逆的。
从移动开始做设计对习惯了PC环境的设计师可能是一种挑战,思考方式工作习惯都被迫做出改变。但这种改变必须去适应,因为用户习惯在改变。
回正题,上一步已经把页面归类并确定每个页面内容优先级,现在接着分析每种类型页面的导航、主体内容等框架结构,最终得出一份框架结构表。从玩客框 架结构看出,全局导航是所有页面公共的,局部导航只有列表类页面才有,详情类页面都有一个“页面主人”信息,而关联导航不是每个页面都有。
Step3:响应式设计框架
根据手机端的框架拓展出平板和PC端框架。这是复杂产品实现响应式设计的关键步骤,它是让众多页面有条理地响应起来的基础。第一件事情是确定响应式 模式,即从手机到平板到PC,导航怎么变化,页面布局用哪种响应方式,根据内容优先级如何调整模块顺序,等等。玩客在PC端以三栏布局为主,左边栏作为局 部导航或者主人信息区,中间栏始终是页面主体信息,当页面需要关联导航时统一放在右边栏。
应式是一种设计理念与前端技术紧密结合的新兴形态,鼓励尽早进行跨职能沟通协作。交互确定响应式框架和栅格系统后,其他角色就可以同步开展工作 了。前端开始介入完成栅格和框架搭建,产出页面基础框架。视觉同步开始探索和定义视觉风格探索,制定视觉框架,产出风格关键词、产品配色方案。整个过程需 要几个角色不断讨论确定。
Step4:模块设计
按照用户体验中的移动优先的原则应该先进行移动端的模块细节设计,不过我们选择了从PC端开始设计细节。因为PC端开发能够充分暴露业务复杂度,项目团队的设 计、开发、测试在PC环境下拥有成熟的工具和流程,从PC开始让开发过程更顺畅。所以个人认为移动优先是确定内容策略时应该遵循的理念,细节设计和开发过 程是否要移动优先,取决于产品定位和项目团队情况。
响应式框架确定了页面结构和响应模式,模块设计这个过程开始完善所有信息排版和交互形式,这是交互设计师最熟练也是最耗时的工作。这个过程与传统流程没太大区别,只是心里要不断提醒自己,这个模块不是只为这个设备设计,它在其它设备下会出问题吗?
交互确定页面模块细节后可以抽取出产品用到的控件、组件和公共模块,现在视觉和前端开始做一件有别于传统流程的事情。视觉根据前期定义的风格设计控组件和公共模块的视觉效果,把它们拼成一个模拟的页面,我们称之为风格拼贴稿。前端再把风格拼贴稿里的控组件和公共模块实现出来,统一维护一套组件规范代码。
Step5:响应式模块设计
PC端页面模块细节和风格拼贴稿完成后,剩下工作是拓展出平板和手机端的完整设计稿,前端产出全部响应式页面代码。进行响应式模块设计时最需要关注的仍然是让操作符合设备习惯,充分利用设备特性。
至此,一个全站响应式产品的页面就陆续出来了。很多人认为响应式设计维护成本高的理由是一个页面要同时设计多套设计稿。玩客这次经验告诉我们,确定一套设计稿和栅格系统后再拓展出其它设备下的设计方案,工作量远比想象中的低。
Step6:测试&讨论&优化,提交开发
离大功告成还差最后一步,在真实设备下测试页面效果,项目团队讨论并持续优化用户体验。
在提交开发之前需要尽早明确服务端响应(RESS) 的策略。服务端与客户端结合是目前解决响应式页面性能问题的最合理方案。哪些大图片在移动设备下只需输出小尺寸图片?哪些内容在什么设备下是不需要开发输 出的?哪些可以减少输出的数据数量?与开发团队协作的响应式可以有效控制页面文件大小,避免页面成为移动设备上烧用户流量的罪魁祸首。
测试通过后提交页面进入开发环节。我们从可用性和可访问性两方面总结了一份响应式页面测试checklist,测试要点包括但不限于以下内容。
3、设计师设计响应式网站的时候注意些什么
响应抄式网站设计还袭需要考虑以下几点:
▪ 使用不同的样式:针对不同的媒体类型如手机、电脑、平板等等,以及不同的媒体参数,如宽度、高度、分辨率等等,使用不同的显示样式。
▪ 图片自适应:微企点自助建站图片尺寸可以自适应,不能超过最大显示宽度。且在不同设备上能够等比例缩放,保证图片不变形。
▪ 页面宽度自适应:在不同宽度的设备上显示,页面也不能水平滚动。
使用微企点自助建站在移动端更需要做好相应工作,使网站展现效果更佳。
▪ 鉴于设备与网速有差异(电脑和手机,WiFi和GPRS流量等),对于图片需要一定的优化,如分辨率、大小等。
▪ 部分网站需要为移动端网站改变导航模式,如鼠标触发的下拉导航等。
▪ 在移动端能够自动调整字体大小,用于适应不同的屏幕分辨率;
4、响应式网站一般怎么设计
想要设计出好的响应式的网站的话,一定要有自己的头脑,然后进行一些个性的设计就可以了。
5、国内有哪些是做建设响应式设计网站的公司?
响应式设计是一种网站编写技术,一般国内稍微有点基础,有点能力的网络公司都能做到。
6、谈谈响应式网站设计的难点有哪些
首先是网站框架设计上的难点所在,响应式网站制作时不能使用绝对定位专,所以要在设计时属考虑可读性以及区域面积以及在不同的设备下的行为。
其次是网站开发实现难点,响应式的基础就是HTML5和CSS3来设计的,有些网络公司没有这个实力基本上没法设计这样的布局,最终导致项目开发难度增加。
最后是这种布局的网站成本高,网站开发时需要对多个界面兼容、功能调试,导致整个制作过程需要UI设计师和前端工程师要不断磨合制作。而测试人员也要在不同的设备下对网站进行测试,这样就会大大增加预算成本。
不过在互联网的将来,响应式布局网站肯定是一个流行趋势,只有现在把握机会,不断努力学习和积累丰富的经验,这样才能为用户带去更好的作品。
7、对于网页设计,你敢说你的响应式网站够优秀么
响应式网页已经成为当下比较主流的设计形式,似乎每一个人都在谈论,但实际上并不是每一个人都真的懂得。以下总结了在进行响应式网页设计时的20个误区,你可以看看自身是否存在入其中所说的问题。
1.响应式网页设计 = 移动端优化
是的,当下确实移动互联网发展迅猛,所以响应式网页设计一直被当作重点,而且在概念上是主角。但它也不是唯一,因为你还要考虑到设备。如:平板和电视。响应式网页的真正目的是使网页适应任何屏幕,任意比例和宽度的互联网产品。这些远远超出了手机的范畴。
2.尽可能在多样的设备上测试
在设计领域,大多数设计师在设计他们的网站时,只会在少量的设备上测试,做响应式网站的时候也一样。要测试完所有设备是不可能的。其实应该根据自己的用户进行有针对性的测试,这样操作性更强。
3.字体不用优化
不幸的是,太多设计师觉得这点是对的。他们注重在设备和网页上的大小,却不注重用户实际看到的大小,一个网站必须有很强的可读性,而且响应式网站字体的考虑是非常重要的。
4.一种适配经验是不够用的
人们希望可以接入不同的设备,这让设计师抓狂。这也让设计师觉得网站必须适应用户的每个定制化的设备。其实这个不难,你可以很容易让你的网站适配各个设备。
5. 响应式网页因为加载内容太多,所以慢
人们在想象中时这样的,但是这不公平,有很多小规范的网站内容巨多,但是加载迅速,顺利,表明这些问题不是设计的问题,错在页面加载速度,这是代码优化问题。
6. 响应式网页不必让每个用例都可以用
这是极其错误的,因为用例是响应式网页的重点。设计者必须考虑到每一个用例,并且测试所有他们的设备。你的用户会希望在任何时候来使用你的网站。
7.响应式网页不适合电商
假的,虽然电商网站内容多,但是响应式网页是很适合零售业务的。实际上,这已经成为一种必然,由Juniper Research公司进行的一项研究表明,到2018年,所有的线上交易中有30%会在移动设备上进行。此外2014年开始移动购物者人数已经从3.93亿发展到5.8亿,这可以说明响应式网页在电商方面的潜力。
8.响应式网页设计很费时间
这个是可能的,确实要多花一些时间去考虑响应式效果,但是也并不多。其实,你只要创建了共同的适配代码库和内容基础。而且越来越多的公司开发响应式框架,这使得我们不需要花太多时间去做同样的事情。
9.每个人和公司都需要“拥抱”响应式?
不是每个人都看到了响应式网页设计的价值。它意味着用最大的可能给用户提供信息,但是这也不是说一个公司要想成功就必须把自己的网站做成响应式的。因为这需要企业考虑自己的投入产出比,公司根据情况去觉得是否需要它。
10.响应式网页需要支持所有的浏览器?
负责响应式网页开发的部门将会持续优化网页,但是这并不意味着它要支持所有的手机浏览器。它一般只用支持以下浏览器:Chrome,Firefox和Safari。你将很难让其支持IE的旧版本。这是蛮好的事情,因为用户发展不支持就会去升级自己的浏览器。
11.这个做起来太贵
这是真的,实现响应式网页需啊哟不同的技能、工具和技术。但这也并不比那些努力的网页师贵多少。其实,响应式网页会让你在服务器成本上节约点。
12.响应式网页会影响网站SEO
SEO对响应式网页的支持非常好,很多搜索引擎发现你的网站没有针对手机优化,就降低你的网站排名。因为这些搜索引擎希望提供的内容对用户更友好,所以你如果支持手机,他们必然提高你的网站排名。
13.将现有网页内容转换成响应式很容易
恰恰相反,这需要用各种手段让内容从大屏无缝切换到小屏。过度过程中需要识别重要内容,去除多余的内容,并且等比缩放以适应更小设备。总之,要让这些内容在手机上显示得更好,而且方便在设备间切换。
14.“移动第一”意味着移动端效果最重要,原版网站无所谓
如果你首先考虑移动,你会先思考用户,这将为用户带来更好的体验去使用手机版和原版,这个概念是说只是要给用户提供更好的体验,而不管他们访问的是啥内容。
15.个别设备断点响应式网页需要优先权
响应式网页不是缩小网站以适应设备。而是有更多的页面需要做,如果你想要开发一个负责人的网站,你需要了解各种用户界面,而不是仅仅做个接口工作。这不仅是对单个设备的断点,而是构建了一个框架,适应各种情况。
16.通过一种优化图像来适应所有屏幕
因为你要把图片放到一个小的容器里,所以你显然要优化一下它们。然而不可能做到一个图像适应所有的设备,你需要优化他们。设备尺寸大小差异太大,如果只是一张图片,像素太高就会加载很慢,像素太低酒会显示不清晰,所以你得有几种尺寸去适应多种设备。
17.内容可以被隐藏在响应式里
也许这是事实,但前提是网页设计师不知道怎么办。对于经验丰富的网页设计师来说这是荒谬的。响应式网页时为了让内容更容易访问。隐藏内容的想法是相反的,如果你辅助功能的可能性大于隐藏内容,那还是选择优化的模式。
18.响应式网页设计是未来的趋势
也许这个“神话”来源于22%的营销人员,他们是响应式设计专家。29%的人他们对响应式有一定了解,23%的人他们只是基本了解,后面还有的完全不知道响应式
但现在响应式网页确实是主流,人们需要网页都能响应,5年后就很难说了,获得成功响应式设计离不开实践,并在实践中探索更流畅的模式。
19.项目中响应式网页你必须优先考虑
这个观点再次错误,平衡时关键,用户体验是关键,通常情况下,设计师要优先考虑移动用户,但也并不总是如此,找到平衡点是你的责任。
20.响应式网页设计是个完美的模型
但愿没有人相信这个“神话”。经验丰富的设计师都明白,世界上不存在真正的完美模型,特别是在这样一个高速发展的时代。加载时间慢总会被人抱怨,然而我们已经实现了跨多个设备的流畅展示,60%的用户用移动设备接入互联网,所以响应式网页目前是一个最佳解决方案。
响应式网页设计不是一门正规的科学,而且很难解释清楚这个技术为什么能成功,然而这个技术却值得你掌握,因为它能提高你和你公司的成功几率。
8、典型的响应式网页设计网站有哪些
?
9、如何使用axure 7.0为你设计响应式的网站
在axure 8发布以后,可以利用几项技术(axure自动生成自适应html、前后端分离、响应式网站设计、restful接口、json或xml等)进一步简化网站的开发,该设计模式的主要流程如下:
1. 产品经理利用axure设计原型。
2. 原型讨论定型后由UI人员设计图标,更新到axure原型中。
3. 由axure生成自适应的响应式网站设计的html文件。
注意:axure发布项目生成html时,在左侧的“移动设备”这个设置页,需要勾选“包含视口标签”,不勾选“禁止页面垂直滚动”,宽度设置为“device-width”,高度留空不设置,初始缩放倍数绝对不能设置,最小缩放倍数设置为“0.1”,最大缩放倍数设置为10,允许用户缩放留空不设置,ios部分可以不理默认即可。另外需要axure 8以上版本才能普遍适配手机屏幕。
4a. 前端开发人员全盘使用上面生成的html文件、资源文件、axure的js文件,在各个页面上以前后端分离方式添加业务逻辑的实现(比如在html中加入jquery的ajax,和后端交互数据)。
4b. 后端开发人员设计和实现业务逻辑和前后端接口(4b可以和3、4a步骤同步进行),比如前后端使用restful的json封装作为前后端接口的数据交互。
5. 单元测试、集成测试、灰度测试,bug修复,发布上线。