响应式网站是适应所有屏幕尺寸和分辨率的网站, 不仅在台式机上，在移动设备上也是如此, 平板电脑, 有时甚至看电视.

根据Statista在美国，移动流量占52%.2017年全球流量的64%，这意味着一个网站 不 针对移动设备进行了优化 损失了大约一半的流量. 到2018年底，预计移动设备的全球流量份额 将增长到79%这是一个异常的增长.

没有手机网站的企业正在以惊人的速度落后，因为 10个访问者中有8个会停止参与 网站在他们的设备上显示不好. 用户很容易就会按下后退键，转而尝试其他竞争对手的业务 谷歌甚至把那些没有使用手机响应式设计的网站排在搜索结果的后面.

你可以参加谷歌的手机友好测试 在这里.

这是否意味着移动设备比桌面设备更重要? No. 83%的手机用户说 如果他们愿意的话，他们应该能够在桌面上继续这种体验.

看看这个移动优化版的eBay vs. 它会是什么样子 没有 移动设备优化. 你会考虑未优化的版本吗?

为了设计能在今天的互联网上竞争的网站， 网页设计师 必须 成为…的专家 响应式网站设计 (RWD). 他们应该从哪里开始?

响应式网页设计的移动优先方法

移动优先的网页设计意味着首先设计移动网站，然后再进行桌面版本的设计. 这种方法之所以有效有很多原因.

1. 手机网站有更多的可用性问题(这主要是由于缺乏屏幕空间)。, 所以将主要关注点放在手机设计上更实用也更有效.
2. 更容易 按比例增加 手机版比它要 按比例减少 桌面版(同样是因为移动网站空间不足).
3. 移动优先的网页设计有助于重新评估什么是必要的视觉和功能.

将一个网站设计成一个移动优先的响应式网站迫使设计师问一些重要的问题，因为屏幕空间更小. 以下是需要问的问题:

• 这个特性/功能真的有必要吗?
• 我们如何先为手机设计一些极简主义的东西，然后再扩展到桌面?
• 这种视觉效果值得花时间在手机上加载吗?
• 主要目标是什么，哪些视觉元素可以帮助用户实现它?

我们一会儿会看一些响应式网站的例子. 现在，让我们谈谈哪些设备、屏幕尺寸和网络浏览器与今天相关.

什么屏幕分辨率与响应式网页设计相关?

以下是 最常见的屏幕分辨率 横跨全球的移动、平板和桌面用户. 如你所见, 有各种各样的决议, 所以两者都不移动, 平板电脑和台式电脑目前占据着市场份额——这告诉我们，设计师在考虑响应式网页设计时应该考虑所有这些设备.

• 360x640(小型移动):22.64%
• 1366x768(普通笔记本电脑):11.98%
• 1920x1080(大型桌面):7.35%
• 375x667(平均手机):5%
• 1440x900(普通桌面):3.17%
• 720x1280(大型移动):2.74%

就像设备故障一样, 我们应该根据位置划分数据，以匹配目标受众的用户统计数据(或预期的用户统计数据). 迎合越来越受欢迎的新年决心也是值得的, 因为虽然一些屏幕尺寸目前并不常见, 也许将来会是这样. 这将有所帮助 响应的设计师 制作经得起未来考验的用户体验，即使市场份额发生变化也能正常工作.

例如, 360x640分辨率(主要适用于使用安卓系统的三星设备)提高了5%.去年是43%. 设计师可以利用这些有价值的见解，在开始网站设计之前决定关键的响应断点.

今天流行什么浏览器?

响应式网页设计是关于在任何设备上提供无缝体验, 由于不同的浏览器以不同的方式呈现网页, 网站必须经过测试，以确保它们与各种移动和桌面网络浏览器兼容.

尽管使网站达到正确的响应断点是web开发人员的主要责任, 为了创造最佳的用户体验，网页设计师需要决定响应性UI元素如何适应不同的屏幕尺寸.

这是世界范围内的 Web浏览器市场份额 移动和桌面.

• 铬:55.04%
• Safari: 14.86%
• UC浏览器:8.69%
• Firefox: 5.72%
• 歌剧:4.03%
• Internet Explorer: 3.35%

响应式设计不仅仅是“让一切都合适”——它还包括适应设备硬件和网络浏览器的功能 以及 设备分辨率. 这方面的一个例子是，虽然谷歌Chrome浏览器支持CSS属性 overscroll-behavior: (它定义了当用户向视口边缘过度滚动时会发生什么)，它是 不支持在任何其他web浏览器.

响应式设计最佳实践

消除摩擦

如前所述, 响应式网页设计的移动优先方法将帮助设计师评估什么是真正必要的，以便用户实现他们的主要目标.

随着我们开发平板电脑版本(以及后来的桌面版本), 然后我们可以开始考虑次要目标和 microinteractions, 用户流和cta(行动呼吁)，使这些用户目标可以实现. 更重要的是我们 首先关注用户的主要目标 和 消除不必要的摩擦 认为艾滋病既不是首要目标，也不是次要目标.

主要目标可以是购买产品, 然而，次要目标可能是注册一份时事通讯(这可能会导致以后的购买)。.

这里有一个消除摩擦的极好例子:因为移动用户界面通常难以导航, 最好是切换到一页结帐 移动电子商务 并且只支持桌面电子商务商店的多步结帐.

拇指设计

响应式设计的用户体验在某种意义上是棘手的，用户将通过点击与桌面网站进行交互，而移动版本则通过点击和滑动进行交互. 还有生理上的差异. 桌面用户通常把他们的电脑放在一个平面上, 而移动用户则把他们的设备拿在手里. 这些差异显著地改变了方式 移动UI设计师 设计点击目标和其他与用户交互的重要UI元素.

让我们来看一些例子:

• 人 typically expect the main desktop navigation to be at the top; however, 在移动, 它应该在底部. 拇指不能舒适地到达顶部.
• 其他互动元素也应该易于接触. 这意味着要把它们放在屏幕中央，因为拇指很难够到设备屏幕的侧面和角落.
• 这样它们就可以被轻松地打开, 重要的链接和cta的高度应该至少为44px(较小的点击目标不利于可用性).

推荐阅读: 移动可用性的基本指南.

充分利用移动设备的原生硬件

移动硬件(如设备摄像头), 或GPS服务)并不是专门为本地应用保留的, 正如之前提到的, 响应式网页设计不仅仅是“让一切都合适”.“这也是关于适应设备的功能. 以移动网页设计为例, 因为移动设备有容易使用的摄像头, 一些微交互——比如数据输入——实际上在小屏幕上更容易，只要网站利用了可用的本地硬件.

让我们来看一些例子:

• 信用卡/充值卡扫描(因为表单在移动设备上通常很棘手)
• 在社交媒体上分享照片，因为媒体已经在你的设备上了
• 双因素身份验证(因为您已经在移动设备上)
• 快速查看股票/分析(因为移动应用程序简化了信息)
• 执行一个 语音网络搜索 (因为免提比打字更方便)

默认设置布局流畅/自适应

并不是每个用户都将他们的桌面浏览器最大化. 这意味着虽然设计师需要考虑用户今天使用的设备的响应断点, 他们还需要考虑在这些断点之间发生的事情.

响应式断点应该用于将布局和内容“回流”到新设备, 但要考虑到两者之间的所有尺寸(以防万一), 布局则需要有所不同 流体 (也就是说，当浏览器调整大小时，它们会自然地适应/拉伸).

在设计流体/自适应布局时，请牢记以下提示:

• 百分比单位将允许元素是流动的.
• 设置最小和最大宽度可以启用“但不要比这个更小/更大”的场景.
• SVG图像格式可以在不损失质量的情况下放大和缩小, 并且与分辨率无关(与jpg和png相反), 哪些不是).

不要忘记横向方向

我们在前面讨论了特定的响应断点, 但我们也需要考虑到这些移动视口也可以横向显示. 而实现流体布局将在技术上使内容自适应, 失去了相当一部分 肖像 视口可能是可用性和可访问性的障碍.

导航通常是安全的(有时更好), 实际上, 因为用户通常使用 两个 大拇指), 但是滚动变得更加困难, 哪个不是最优的，因为用户需要在横向上滚动更多.

设计师 may want to consider designing for l和scape breakpoints as well; 例如, 在移动设备上垂直堆叠的平铺元素可以显示为带有左右导航按钮的滑块, 这意味着用户不需要滚动屏幕.

记住，排版也可以是响应式的

尽管 用户体验设计师 通常使用像素单位来设计网站, 在实际的网络上, 一个点不再等于一个像素, 因为不同的设备有不同的分辨率. iPhone X, 例如, 458 PPI(每英寸像素), 像素尺寸越来越小, 我们能够在相同的物理空间中实现更清晰的图像(苹果称之为“视网膜”技术), Android称之为“hDPI”)。.

这意味着16px的字体大小, 例如, 根据分辨率的不同，在某些设备上看起来会更大还是更小. Web开发人员通常 使用em单位来定义字体大小，这是一种响应单位，其中1em等于1点.

设计交接工具，如 赞贝林, Sympli, 奇迹, InVision 是否能够帮助设计师与开发者在共同责任的问题上进行合作. 当设计师执行设计时, 开发人员执行代码, 作为一个整体，产品设计工作流程是一个团队的努力，需要坚实的沟通.

响应式设计性能优化技巧和最佳实践

响应式网页设计不仅仅是关于它的外观，还包括它的行为和感觉. 调整网站，使其在预期设备上加载更快也同样重要.

惰性加载非重要的图像和视频

图片和视频占据了网站下载总量的很大一部分, 但您不需要一次全部加载它们. 在两种情况下，媒体的呈现可能会延迟:当用户滚动到下面时，可以加载下面的内容, 并且渲染阻塞媒体应该在布局和内容下载之后才进行下载. 这种做法被称为惰性加载, 哪里装的重, 延迟非重要元素以提高页面性能.

有条件的加载

有些网站元素不适合手机用户, 或者至少不值得额外的认知负荷. 我们希望我们的移动网站简单，所以在某些情况下隐藏元素是有意义的. 话虽如此, we have to make sure that we aren’t wasting browser resources 和 b和width by loading these elements even when they’re hidden; hence, 最佳实践是只在特定条件下包含这些元素.

再一次, a developer can achieve this with code; however, 设计师可以通过传达某些元素应该在何时何地存在的条件来提高页面性能.

响应的图像

如前所述, 有些设备每英寸显示更多的像素, 如果没有以正确的分辨率导出，哪些会导致图像变得模糊. 取决于设备的分辨率, 有些需要双倍(@2x)的图像, 三(@3x), 甚至是四倍(@4倍)的大小. Web浏览器现在支持 元素，它根据设备选择正确的图像分辨率.

设计响应式网站的设计师可以根据正确的设备定制图像，确保在当今设备上使用的所有分辨率下导出图像(如果你不确定的话), 询问你的开发者——沟通是响应式网页设计的关键).

结论

线框图可以帮助在设计过程的早期消除折痕, 当采用移动优先的方法进行响应式网页设计时，这种方法效果很好. 也许有一个响应式断点需要一些额外的注意, 或者可能存在一个在移动响应性方面不有效的概念. 最好及早发现道路上的坎坷.e.(在添加视觉美学之前).

现代设计工具 Adobe XD, 奇迹, InVision 使团队能够在真实设备上测试原型, 在上下文中讨论反馈, 并且通常作为一个团队进行协作，直到布局在所有场景中都有效.

采用精益的用户体验工作流程，其中响应式设计由内部测试和反馈驱动，将确保用户体验在首次呈现给真正的用户之前无缝地跨所有平台和屏幕分辨率工作.