自适应与. 响应设计

响应性和 自适应设计 方法强调了皇冠官网登录作为网页和应用程序设计师的重要选择. 有洞察力的选择可以让你更好地计划和执行你的设计, 目的及结果.

随着移动设备的普及和多样化, 作为设计师，皇冠官网登录需要适应各种屏幕尺寸. 这是每个网页和应用设计师目前面临的挑战. 从大型企业显示器到 smartwatch在美国，如今用户可以通过大量的方式在线获取信息. 希望弥合设备之间差距的设计师有两种设计选择 自适应 网站或 响应 网站.

作者/版权所有人:Stéphanie. 版权条款和许可:CC BY-SA 3.0

两者之间的区别有一定程度的混淆 响应设计 而且 自适应设计. 对于那些没有任何一种设计风格经验的人来说，界限似乎很模糊, 但当你仔细观察两者时，就会发现明显的差异.

响应设计

作者/版权所有人:Muhammad Rafizeldi.. 版权条款和许可:CC BY-SA 3.0

“响应式设计”一词最初是由网页设计师和开发人员Ethan Marcotte在他的书中提出的, 响应 网页设计. 响应式设计响应 浏览器宽度的变化 by 调整 设计元素的放置要 适合 在可用空间中.

响应式网站根据可用的浏览器空间显示内容. 如果你在桌面上打开一个响应式网站，然后改变浏览器窗口的大小, 内容将动态移动以进行排列 本身 (至少在理论上) 最优 为 浏览器窗口. 在手机上, this process is automatic; 的 网站 checks 为 可用空间 而且 然后 presents 本身 in 的 ideal arrangement.

响应式设计很简单. 因为它是液体, 这意味着用户可以访问您的在线世界，并在手持设备上享受与在大型显示器上一样多的内容. 这是正确的, 响应式设计要求对站点有很好的概念，并对最终用户的需求有深入的了解!

自适应网页设计

自适应网页设计于2011年由网页设计师Aaron Gustafson在他的书中介绍， 自适应网页设计:用渐进增强制作丰富的体验. 它也被称为 渐进增强 一个网站的.

响应式设计依赖于改变设计模式来适应可用的空间, 适应性设计有 多个固定布局大小. 当网站 检测 的 可用空间, it 选择 的 布局 最适合荧屏. So, 当你在桌面上打开浏览器时, 的 网站 chooses 的 最好的 布局 for that desktop screen; resizing 的 browser has no 对设计的影响.

一些网站很快就接受了自适应设计. 亚马逊、《皇冠老牌网站》、苹果和皇冠老牌网站.Com将自己配置为移动优化网站. 在使用自适应设计的移动网站上显示的布局可能与桌面版本不同. 然而, 这是因为设计师为手机屏幕选择了不同的布局，而不是让设计尝试重新排列.

在适应性设计中, it’s normal to develop six designs 为 six most common screen widths; 320, 480, 760, 960, 1200, 1600像素.

独立移动设计

你还可以选择创建一个仅用于移动设备的网站(通常在浏览器的URL栏中使用“m”表示).”前缀). 这个选项曾经是一个很好的方法. 设计师将为移动设备创建网站, 为专用格式调整元素和布局. 谷歌为移动网站提供搜索引擎排名, 但今天，同样的偏好被赋予了适应性和响应性网站.

创建一个单独的网站(而不是使用不同的设计或采用可变的设计)的最大缺点是，它需要大量的维护，以保持两个版本的网站同质性. 没有特别的动机这么做, 最近，仅限移动设备的设计已经不再受欢迎. 它似乎不太可能很快卷土重来.

在响应式设计和自适应设计之间的选择

作者/版权所有人:Stéphanie. 版权条款和许可:CC BY-SA 3.0

响应设计 is 更容易 和需要 更少的工作 来实现. 它对每个屏幕尺寸的设计控制较少, 但目前为止，这是创建新网站的首选方法. 这也可能与大多数内容管理系统(CMS)(如WordPress)可用的大量廉价模板有关, Joomla, 等. 毕竟，谁想要重新发明轮子?

响应式设计师创建一个用于所有屏幕的单一设计，通常从分辨率的中间开始，并使用媒体查询来确定将对分辨率的低端和高端进行哪些调整. 这往往会让用户感到高兴, 因为熟悉的网页设计似乎可以在任何设备的屏幕上使用. 一致性和无缝性是提供商品的关键考虑因素 用户体验.

密切关注是很重要的 视觉层次结构 of 响应设计 projects; you want to try to maintain this as your elements shuffle around 的 screen. 这意味着要用许多不同的设备进行大量测试，以确保您交付了产品. 如果网站设计相对简单, 它将在各种设备屏幕上很好地转换, 像液体一样从一个容器流动到另一个容器.

搜索引擎优化 使用响应式设计的另一个重要理由是什么. 网站使用响应式设计(i.e.(有一个URL服务于所有设备)目前对搜索引擎更友好.

响应式设计似乎有很强的应用价值. Well, it might; however, bear 的 following in mind:

• 因为你的网站会从一个设备“流动”到另一个设备, 调整到屏幕大小, 您添加的任何广告可能都不适合这个空间. 突然之间，使用响应式设计提供的“捷径”可能需要重新思考和工作.

• 下载时间因桌面和移动设备而异. 图像的灵活性是这里需要考虑的一个大问题. 一个在家里或办公室的大屏幕上快速呈现的大型设计需要更多的时间(和数据)才能出现在你的手机上. 也许更小的预览版更适合手机版?

自适应设计 (理论上)将确保 最好的 用户体验取决于用户使用的设备. 与响应式设计不同, 屏幕从桌面设计“流动”到更小的设备, 自适应设计提供量身定制的解决方案. 顾名思义，它们适应用户的情景需求和能力. 作为设计师, 皇冠官网登录可以通过使皇冠官网登录的设计触摸友好，向用户展示皇冠官网登录符合他们在移动设备上的需求. 同时，皇冠官网登录也可以为桌面用户做同样的事情. 皇冠官网登录从网站分辨率最低的版本开始，一直到分辨率最高的版本. 六种设计是目前的标准, 但这取决于用户的数据, 你可以使用更少的设计.

适应性设计的优势在于它给人的感觉更多 有关 到现代用户体验, 而响应式设计显示了一种更以桌面为中心的方法(其他设备的需求是次要的), 几乎被动的地方). 作为用户，皇冠官网登录更多地使用智能设备. 皇冠官网登录希望皇冠官网登录的设备知道皇冠官网登录正在经历什么. Let’s take a literal example; if you were driving through a long tunnel, wouldn’t you ra的r have a 全球定位系统(GPS) 能适应环境并调整亮度的屏幕? 基于上下文的性能和 可用性 是让人放心, 与此同时，确认你的智能设备足够智能，能够适应环境，而且非常有用.

您还可以通过自适应设计优化相关用户界面的广告. 因为你在设计不同的分辨率(i.e.，不同的视野)，您可以访问您的用户的具体需求. 传感器的精密程度, 说, 智能手机让公司(以及皇冠官网登录设计师)比以往任何时候都更了解皇冠官网登录的用户. 用户经常光顾最喜欢的商店、餐馆、健身房等. -通过签到，他/她创建了一个个人资料. 从这个(行为目标, 也被称为个性化), 皇冠官网登录可以设计微调广告.

另一个优势——研究表明，拥有自适应网站的公司通常会表现出色, 皇冠老牌网站速度测试, 一家拥有响应式网站的公司. This isn’t a small difference ei的r; 自适应 网站s are often 2-3 times faster than 响应 ones 而且 give ra的r less data to 的 user in order to deliver 的 用户体验.

自适应设计有一些很强的优点. 然而, 在为最佳皇冠老牌网站并提供最佳解决方案的游戏中, 皇冠官网登录必须记住，皇冠官网登录必须花时间来检查皇冠官网登录的选择和用户的现实情况.

适应性设计也有缺点. 首先，它通常比创建一个响应式设计要多得多. 出于这个原因, 大多数自适应设计用于改造现有站点，使其能够在多种设备上使用. 似乎, 然后, 业务的首要任务是使传统网站与时俱进，允许它们跨更多设备访问.

其次，自适应设计可以将用户“置于中间”. 平板电脑和笔记本电脑用户可能会被“吊着”，因为设计师只迎合台式机和智能手机用户的需求. 因此，提供一个链接让用户在版本之间切换是很重要的.

最后, 虽然搜索引擎机器人越来越擅长筛选和分类搜索结果，以区分你的“.Com“网站s”和“m .在网站上，接受现状是明智的. 大多数搜索引擎仍然不会在多个url上对相同的内容进行相同的排名. 这意味着要注意，自适应设计可能会让你回到搜索引擎优化.

So, 虽然目前响应式设计有明确的偏好, 如果你有预算，不要放弃适应性设计. 谷歌喜欢加载速度快的网站，用户也是如此.

拿走

作者/版权所有人:Brisbane 网页设计. 版权条款和许可:公共领域

现代网页设计给了皇冠官网登录三个选择:响应式, 自适应, 独立设计, 虽然单机已经被废弃了.

响应设计 允许设计人员根据可用的浏览器空间显示内容. 这使得网站在桌面和手持设备上显示的内容保持一致. 响应式设计是“传统的”选择，至今仍是更受欢迎的方法.

自适应设计，开发于2011年，更多涉及到设计人员有几个固定的布局大小. 它为“一刀切”的方法提供了另一种选择.

在响应式设计和自适应设计之间进行选择需要仔细考虑. 虽然为了方便起见(节省成本)，坚持响应式设计可能是谨慎的, 改善搜索引擎优化, 让用户满足于设备间的无缝体验), 检查两种设计的优缺点是至关重要的 全额. 自适应设计 can tune in more to users’ varying needs in 的 field; thus, 把握变化的脉搏是至关重要的.

皇冠官网登录最好把这些变化描述为进化. 查尔斯·达尔文指出，在一个物种中幸存下来的个体并不是最强壮或最聪明的, 而是那些最能适应变化的. 根据这一点，皇冠官网登录只考虑恐龙.

想想你的产品或服务. 它是否在特定设置中访问用户? 皇冠老牌网站他们的行为，你可以用什么来让他们了解情况并参与其中? 记住，不仅仅是移动设备变得越来越智能. 在皇冠官网登录的家庭和办公室里，皇冠官网登录拥有的不仅仅是传统的台式电脑. 现在, 许多智能设备都能感知环境并对其做出反应, 从时钟和加热器到一系列组成“物联网”. 这是一个充满智能物品的时代. 皇冠官网登录在设计时必须越来越多地牢记这种聪明.

资源 & 从哪里了解更多信息

英雄形象:作者/版权所有人:tfinc. 版权条款和许可:CC BY-SA 3.0

霍尔斯特,C. (2012). “自适应与. 响应式布局和最佳表单字段标签”. Smashing Magazine.

Itzkovitch,. (2012). “创建自适应系统来增强用户体验”. Smashing Magazine.

骑士,K. (2011). “响应式网页设计:它是什么以及如何使用它”. Smashing Magazine.

曹,J. (2015). “响应和. 适应性设计:什么是设计师的最佳选择?”.皇冠老牌网站Pin工作室.

宾·乌扎尔，S. (2013). “响应和. 自适应设计”. 转矩.

对于那些感兴趣的人，Smashing社论也有这个很棒的资源: 响应式网页设计指南和教程. 快乐的皇冠官网登录!