江苏龙网

  1. 主页 > 生活百科 > >

基本原理和实现方法 什么是响应式设计

只为电脑设计网站的日子已经一去不复返了 。技术的发展和移动网站的普及促使网站设计师重新思考他们的工作成果如何在不同的设备上呈现 。想想看，你每天在手机或电脑上浏览网页的时间哪个更长？
什么是响应式设计？
简单来说，响应式网站设计是一种允许设计和代码响应设备屏幕大小的方法 。这意味着无论你使用4英寸的Android手机、iPad mini，还是40英寸的影院级显示器，你都将获得最佳的浏览体验 。
比较静态页面和响应网站在不同设备上的显示效果:
响应式最好的网站，基本都是使用流体网格、自适应图像和CSS来改变网站的设计，并根据浏览器的宽度进行渲染 。对于设计师来说，最终目标是在不同的设备和平台上无缝定制网站设计的UI和UX 。
【基本原理和实现方法 什么是响应式设计】响应式设计的重要性
如果我们为一个网站设计开发无数个版本来适应每一种设备，这个过程不仅耗时耗力，而且会使网站无法使用未来先进的技术变革，几乎无法维护 。响应式设计是面向未来的网站设计的有效解决方案 。
响应式网站设计的关键是了解你的受众以及他们浏览网站所使用的设备 。现在网站流量有多少来自PC、平板和手机？美国约56%的网站流量来自移动设备 。现在全球约有26亿智能手机用户，到2020年，这一数字有望达到60亿 。移动设计将变得越来越重要 。
为不同的设备设计网站是至关重要的，但当涉及到不同的网络浏览器时，这变得更加复杂 。每个大型网络浏览器都有自己的移动版本，以不同的方式呈现网站 。此外，每个浏览器都有不同的版本——毕竟，你不能指望每个人都使用最新版本 。因此，设计适合不同版本的浏览器非常重要 。
害怕吗？不用担心，对于业内人士来说，调整设计以适应不同版本的浏览器和不同的硬件设备是一场不断的战争 。最好的答案是在尽可能多的设备上测试(并雇佣优秀的开发人员) 。
我应该根据什么尺寸来设计网站？
没有所谓的“标准网站大小” 。设备种类繁多，型号版本和屏幕分辨率都在不断变化 。每个网站吸引的用户使用的设备都不一样 。例如，您可以选择在移动设备上查看食谱(在厨房做饭时)，在PC上搜索PS教程(当您想用Photoshop做些事情时) 。
你使用谷歌分析来了解哪些浏览器和网页尺寸最适合你的网站 。面对浏览器大小和设备的无限组合，你应该如何进行响应式设计？
尝试设计至少3种布局
响应式网站设计应该为不同的浏览器宽度设计至少三种布局 。以下数字仅为示例，并非固定标准 。
小:600px以下 。大部分手机都适合 。
中等:600像素–900像素 。大部分平板设备，一些大屏手机，一些小上网本都适合 。
大:大于900像素 。大部分PC都适合 。
每个布局都应该包含相同的文本和图形元素，但是每个布局都应该根据用户的设备以最佳方式显示内容 。缩小页面以适应小屏幕会降低内容的可读性，但如果你能相应地减少内容，并将其变成一个列，内容会更容易阅读 。
需要考虑的问题:
用户体验是关键:响应式设计需要的不仅仅是把PC网站变成移动网站 。我们需要考虑用户体验、他们的交互以及他们在使用移动设备时真正想要寻找的东西 。
不要为最新的移动设备设计特定的屏幕尺寸 。正确的做法是围绕内容来做 。PC上的网站布局和各种元素怎么样，在移动设备上同样的元素应该如何互相适应？这才是你应该关心的 。
由凯罗尔·奥泰尔设计
参与:布局的层次结构非常重要，尤其是在移动设备上 。通常，我们都持有“少即是多”的观点 。与桌面PC相比，移动体验集中在有限的空空间内，所以用户在网站上的阅读和移动方式需要非常清晰，这样才能知道你的主要信息和网站的内容 。还要考虑页面的主要动作 。如果主要目标是让用户点击“联系我们”按钮，那么不要把它隐藏在页面的大量文本下 。一定要围绕这些体验来定制你的内容和设计 。
自适应图像对于响应式网站设计非常重要 。你需要考虑图像的缩放比例 。它在电脑宽屏、平板电脑或小型移动设备屏幕上看起来如何？从开发的角度来看，代码将允许图像按百分比值缩放到浏览器窗口的宽度 。
手机网站导航很重要 。有几种常见的方法来组织大菜单和内容 。它可以是一个普通的汉堡菜单，一个简单的下拉列表选择，一个扩展/折叠字段，或者像Youtube一样的水平滚动标签 。


推荐阅读


上一篇：一周上首页 怎么快速提高网站关键词排名的方法

下一篇：新手必看技巧 如何做淘宝网店分销商