srcmini本文概述
自适应网站是指不仅适用于台式机, 而且适用于手机, 平板电脑, 有时甚至适用于电视的所有屏幕尺寸和分辨率的网站。
Statista的数据显示, 2017年, 移动流量占全球所有流量的52.64％, 这意味着针对移动设备优化不佳的网站损失了约一半的流量。预计到2018年底, 移动设备的全球流量份额将增长到79％, 这是一个惊人的增长。
没有移动网站的企业以惊人的速度落后, 因为十分之八的访问者将停止使用在设备上无法正常显示的网站。用户点击后退按钮而不是尝试竞争对手的业务太容易了, 而且Google甚至将搜索响应不佳的网站排名。
你可以在此处参加Google的移动设备适合性测试。
这是否意味着移动比台式机重要？否。83％的移动用户表示, 如果愿意, 他们应该能够继续在台式机上体验。
看看这个针对移动设备优化的eBay版本以及如果未针对移动设备进行优化的情况。你甚至会考虑使用非优化版本吗？
eBay：未针对移动设备进行优化与针对移动设备进行响应的网站
为了设计可以在当今互联网上竞争的网站, 网页设计师必须是自适应网页设计(RWD)的专家。他们应该从哪里开始？
移动优先的响应式Web设计方法
移动优先的网站设计意味着首先设计移动网站并升级到桌面版本。这种方法行之有效的原因有很多。
- 移动网站具有更多的可用性问题(这主要是由于缺乏屏幕空间), 因此, 将重点放在移动设计上既实用又高效。
- 扩大移动版本比缩小桌面版本要容易(同样, 由于移动网站空间不足)。
- 以行动为先的网页设计有助于重新评估视觉和功能上的必要条件。
设计师应考虑采用移动优先的方法来响应网页设计。 (来源：Usabilla)
将网站设计为移动优先的网站会迫使设计师提出许多重要问题, 因为可以使用的屏幕空间更少。这是需要问的问题：
- 此功能确实有用吗？
- 我们如何才能为移动设备设计出最低限度的东西, 然后在桌面设备上进行很好的扩展？
- 这种视觉效果值得在手机上加载吗？
- 主要目标是什么, 哪些视觉元素可以帮助用户实现目标？
我们稍后将看一些响应式Web设计示例。现在, 让我们讨论一下哪些设备, 屏幕尺寸和网络浏览器与今天相关。
响应式网页设计与哪些屏幕分辨率有关？
以下是全球移动, 平板电脑和台式机用户最常用的屏幕分辨率。如你所见, 决议的范围很广, 因此, 移动, 平板电脑和台式机都不是目前占据主导地位的市场-这告诉我们, 设计师在考虑响应式Web设计时应该考虑所有这些因素。
- 360×640(小型移动设备)：22.64％
- 1366×768(平均笔记本电脑)：11.98％
- 1920×1080(大型台式机)：7.35％
- 375×667(平均移动)：5％
- 1440×900(平均桌面)：3.17％
- 720×1280(大型移动设备)：2.74％
与设备故障一样, 我们应该按位置对数据进行细分, 以匹配目标受众的用户统计数据(或预期的用户统计数据)。也有必要适应日益流行的分辨率, 因为尽管某些屏幕尺寸目前并不常见, 但将来可能会出现。这将有助于响应式设计师设计出面向未来的UX, 即使市场份额发生变化, UX也能正常工作。
例如, 去年的360×640分辨率(主要与使用Android的三星设备相对应)提高了5.43％。设计师可以使用诸如此类的宝贵见解, 在开始网站设计之前确定关键的响应断点。
哪些Web浏览器今天很流行？
自适应网页设计旨在在任何设备上提供无缝的体验, 并且由于不同的网页浏览器以不同的方式呈现网页, 因此必须对网站进行测试, 以确保它们与各种移动和桌面网页浏览器兼容。
尽管将网站扩展到正确的响应断点是网站开发人员的主要责任, 但由Web设计人员来决定要如何准确地将响应网站适应各种屏幕尺寸, 以创造最佳的用户体验。
这是全球移动和台式机网络浏览器市场份额的细分。
- 铬：55.04％
- Safari：14.86％
- UC浏览器：8.69％
- Firefox：5.72％
- 歌剧：4.03％
- Internet Explorer：3.35％
响应式设计不仅仅意味着”使一切变得合适”, 还涉及适应设备硬件和网络浏览器的功能以及设备分辨率。这样的一个例子可能是, 尽管Google Chrome支持CSS属性overscroll-behavior ：(它定义了当用户向视口边缘滚动太快时会发生的情况), 但其他任何网络浏览器均不支持。
响应式设计最佳实践
消除摩擦
如前所述, 响应式网页设计的移动优先方法将帮助设计人员评估为了使用户实现其主要目标而真正需要的内容。
当我们构建为平板电脑版本(后来是台式机版本)时, 我们可以开始考虑次要目标以及使这些用户目标可以实现的微交互, 用户流程和CTA(号召性用语)。更为重要的是, 我们首先关注用户的主要目标, 并消除不必要的摩擦, 这些摩擦既无助于主要目标, 也无助于次要目标。
主要目标可以是购买产品, 而次要目标可以是注册新闻通讯(这可能导致以后的购买)。
这是一个消除摩擦的绝妙示例：由于移动用户界面通常较难导航, 因此最好切换到移动电子商务商店的一页结帐, 而仅对桌面电子商务商店启用多步结帐。
拇指设计
在用户将通过单击与桌面版本进行交互而通过轻击和滑动与移动版本进行交互的意义上, 响应式Web设计是棘手的。也有身体上的差异。台式机用户通常将计算机放在桌面上, 而移动用户则将设备握在手中。这些差异极大地改变了移动UI设计人员设计点击目标以及用户与之交互的其他重要UI元素的方式。
拇指可以比边缘更好地到达设备屏幕的中心。 (来源：A List Apart)
让我们看一些例子：
- 人们通常期望主要的桌面导航位于顶部。但是, 在移动设备上, 它应该位于底部。拇指不能舒适地到达顶部。
- 其他互动元素也应该很容易达到。这意味着将它们保持在屏幕中央, 因为拇指很难触及设备屏幕的侧面和角落。
- 为了使它们易于使用, 重要的链接和CTA的高度至少应为44px(较小的Tap目标不利于可用性)。
推荐阅读：移动可用性基础指南。
利用移动设备的本机硬件
移动硬件(例如设备摄像头或GPS服务)并不是专门为本机应用保留的, 并且如前所述, 自适应网页设计不仅仅意味着”使一切变得合适”。这还与适应设备的功能有关。在移动Web设计的情况下, 由于移动设备具有易于使用的摄像头, 因此, 只要网站利用了可用的本机硬件, 在较小的屏幕上, 某些微交互(例如数据输入)实际上会更容易。
让我们看一些例子：
- 信用卡/充值卡扫描(因为在移动设备上表单通常很棘手)
- 在社交媒体上共享照片, 因为媒体已经在你的设备上
- 两因素身份验证(因为你已经在移动设备上)
- 快速检查库存/分析(因为移动应用简化了信息)
- 使用语音执行网络搜索(因为免提比打字容易)
默认使布局流畅/自适应
并非每个用户都会最大化其桌面浏览器。这意味着, 尽管设计人员需要考虑用户今天使用的设备的响应断点, 但他们还需要考虑这些断点之间发生的情况。
流畅与固定的Web布局, 以进行响应式Web设计
应使用响应性断点将布局和内容”重排”到新设备上, 但要考虑到两者之间的所有大小(以防万一), 布局需要保持流畅(也就是说, 它们自然会适应/拉伸)。浏览器调整大小)。
设计流畅/自适应布局时, 请牢记以下提示：
- 百分比单位将使元素变得流畅。
- 设置最小和最大宽度可以启用”但不要比这个更小/更大”的方案。
- SVG图像格式可以按比例放大和缩小而不会损失质量, 并且与分辨率无关(与JPG和PNG相对, 后者不是)。
不要忘了风景取向
我们之前已经讨论了特定的响应断点, 但是我们还需要考虑那些移动视口也可以横向显示。虽然实施流畅的布局将在技术上使内容具有自适应性, 但丢失大量的纵向视口可能会妨碍可用性和可访问性。
导航通常是安全的(实际上, 有时效果会更好, 因为用户通常会用两个拇指导航风景方向), 但是滚动会变得更加困难, 因为用户需要在风景上滚动更多, 因此滚动效果不佳。
设计师可能还希望考虑针对景观断点进行设计。例如, 在移动设备上垂直堆叠的平铺元素可以显示为带有左右导航按钮的滑块, 这意味着用户无需滚动。
请记住, 版式可能也很敏感
尽管UX设计人员通常使用像素单位来设计网站, 但在实际的Web上, 由于不同的设备具有不同的分辨率, 因此一点不再等于像素。例如, iPhone X具有458 PPI(每英寸像素), 因此, 在像素尺寸越来越小的情况下, 我们能够在相同的物理空间中获得更清晰的图形(Apple称其为” Retina”技术, 而Android称其为” Retina”技术) ” hDPI”)。
举例来说, 这意味着16px字体大小在某些设备上会根据其分辨率而变大或变小。 Web开发人员通常将使用em单位定义字体大小, 这是一种响应单位, 其中1em等于1点。
Zeplin, Sympli, Marvel和InVision等设计移交工具可以帮助设计师与开发人员就共同承担的事务进行协作。在设计人员执行设计, 开发人员执行代码的同时, 整个产品设计工作流程是需要坚实沟通的团队合作。
响应式设计性能优化技巧和最佳实践
自适应网页设计不仅涉及外观, 还涉及其行为和感觉。调整网站, 使其更快地加载到预期的设备上也同样重要。
延迟加载非重要图像和视频
图片和视频占网站总下载量的很大一部分, 但你无需一次全部加载它们。在两种情况下, 可以延迟媒体的渲染：可以在用户滚动到折页下方时加载折页内容, 并且应仅在布局和内容下载后才使渲染阻止媒体下载。这种做法称为延迟加载, 其中延迟了较重的, 不重要的元素的加载, 以提高页面性能。
有条件的加载
一些网站元素不适合移动用户使用, 或者至少不值得额外的认知负担。我们希望我们的移动网站简单易用, 因此在某些情况下隐藏元素很有意义。话虽如此, 我们必须确保即使隐藏这些元素, 也不会浪费浏览器资源和带宽。因此, 最佳做法是仅在特定条件下包括这些元素。
再一次, 开发人员可以使用代码来实现。但是, 设计人员可以通过交流某些元素应在何时何地存在和不应该存在的条件来提高页面性能。
响应式图像
如前所述, 某些设备每英寸显示更多的像素, 如果未以正确的分辨率导出图像, 则可能导致图像变得模糊。根据设备的分辨率, 有些设备会要求图像尺寸为两倍(@ 2x), 三倍(@ 3x)甚至四倍(@ 4x)。 Web浏览器现在支持<picture>元素, 该元素根据设备选择正确的图像分辨率。
制作自适应网站的设计师可以通过确保导出当今设备上使用的所有分辨率来将图像定制到正确的设备上(如果你不确定, 请向你的开发者询问-在响应式网页设计中, 沟通是关键)。
从Sketch @ 2x导出图像资产以进行响应式Web设计
总结
线框图可以帮助消除设计过程中的折痕, 当采用移动优先的方法进行响应式网页设计时, 这种方法效果很好。也许有一个响应式断点需要更多的关注, 或者也许有一个概念在移动响应性方面并不有效。最好早点找到道路上的颠簸, 而不是晚一点(即在添加视觉美感之前)。
诸如Adobe XD, Marvel和InVision之类的现代设计工具使团队可以在真实设备上测试原型, 讨论上下文反馈, 并且通常可以作为一个团队进行协作, 直到在所有情况下都可以使用布局。
使用精简的UX工作流, 其中响应设计由内部测试和反馈驱动, 这将确保用户体验在所有平台和屏幕分辨率上都可以无缝工作, 然后才首次展示给真实用户。
• • •
在srcmini设计博客上进一步阅读：
- 电子商务UX –最佳做法概述(带有信息图)
- 以人为本的设计在产品设计中的重要性
- 最佳UX设计器产品组合–启发性的案例研究和示例
- 移动接口的启发式原理
- 预期设计：如何创建神奇的用户体验
评论前必须登录！
注册