测试响应设计的过去、现在和未来


响应设计的开端

伊森·马科特创造了这个术语Responsive Web Design他在2010年发表了一篇文章,概述了它的定义和组成部分。

“与其为日益增多的网络设备量身定制互不关联的设计,不如将它们视为同一体验的不同方面。我们可以设计出最佳的观看体验,但要将基于标准的技术嵌入到我们的设计中,使它们不仅更加灵活,而且更能适应呈现它们的媒体。简而言之,我们需要实践反应灵敏的网页设计。”

在Marcotte的回应性设计文章中,他提出了一个将媒体查询、灵活的宽度和灵活的图像相结合的案例,以回应不同的设备,而不是创建一个网站的多个版本。

但是,马科特所说的构成响应性设计的这些元素到底是什么呢?

  • 媒体查询——通过在CSS中定义样式规则和断点,告诉内容在不同屏幕分辨率下表现不同并适应条件的规则。
  • 流体网格–流体网格包装内的内容在CSS中有百分比宽度和比例值,它们可以根据不同的屏幕大小而不是静态布局进行调整。
  • 灵活的图像–图像和其他媒体可以根据窗口或屏幕的大小以CSS的比例和百分比调整大小,以保持图像在容器中的宽度。

虽然许多设计者以前自己使用过这些特性,但没有人想过像马科特那样将这些方法结合起来,使网站具有响应性。

结合这些实践是我们今天所认为的响应性设计理念的一场革命,以在每台设备和浏览器上实现最佳用户体验。

响应性设计的需求

从前,什么时候first iPhone was released in 2007,在移动设备上访问互联网的想法是革命性的。对于那些试图让自己的产品和服务脱颖而出的公司来说,拥有一个人们可以用手机访问的网络应用程序是一个巨大的竞争优势。

幸运的是,一旦人们放下了设计和开发部分,测试在移动技术的早期就相当简单了。市场上只有几种不同的智能手机和同样简单的操作系统,这意味着测试可以通过几种不同的设备来完成。这也意味着许多公司可以创建一个静态的移动网站和一个桌面版本。

然而,随着时间的推移,移动网站的设计变得更具竞争力,大多数企业都有了移动网站。此外,手机、操作系统版本和浏览器选项的更多选择也使用户体验更加多样化。

这意味着仅仅拥有两个网站不再有意义;在各种屏幕尺寸和分辨率的移动网络上生存的唯一方法是同时优化所有屏幕尺寸和分辨率。因此,需要马科特的反应式网页设计的概念,以回应,反应,并适应不同的屏幕。

再过几年,现在访问网络的方式更加分散。截至2015年,有超过24,000 unique Android phones,是2012年的6倍。从那以后,新设备和操作系统更新一直在发布,我们只能猜测还增加了多少。

当然,这意味着响应设计比以往任何时候都更重要,但它也更复杂。虽然响应设计的概念保持不变,但在所有必要的机器上进行测试已经成为一个崇高的目标maintaining extensive and expensive device labs组织越来越难以涵盖所有这些选项并跟上新出现的选项。

响应设计的未来

随着我们看到设备的不断扩散,我们只能期待这种情况在未来会持续下去,设备会变得更加分散。如果你认为随着市场上手机数量的增加,开发和测试响应能力变得越来越困难,那么随着设备本身变得更加独特,这肯定会变得更加困难。

例如,随着大多数手机在某种程度上跟随苹果最初的iPhone设计,即将发布的设备开始跟随新的趋势。例如,在Google Pixel 2XL苹果X、银河S8和华为Mate 10都显示,随着客户选择升级,大屏幕和小边框将成为首选样式。

当小型设备变得越来越大,大型设备变得越来越小时,硬件公司正试图通过独特的、突破性的模型来获得竞争优势,这使得预测我们在未来几年将如何设计真正具有响应能力的应用变得更加困难。

拿着iPhone X例如,除了一个包含重要功能组件的凹口之外,其前面实际上完全是触摸屏。乍看之下,最新款的苹果手机似乎新颖时尚。但是对于那些在设计时必须考虑用户界面/UX的人来说,这就提出了一个问题,即我们如何才能让应用程序对不符合传统智能手机模式的设备做出响应。

此外,虽然现在肯定有许多不同种类的设备可供选择——手机、平板电脑、台式机、笔记本电脑、笔记本电脑、手表等。—据推测,未来我们将会连接到更多类型的屏幕上34 billion devices connecting to the internet by 2020,高于2015年的100亿。

更不用说,屏幕可能会采取与我们现在习惯的平面物体不同的形式;他们可能是foldable,bendable,或expandable。随着我们开始看到新设备变得越来越独特,几乎不可能确定我们将如何满足未来响应设计的需求。

那么,测试人员如何在未来继续考虑响应性设计呢?我们的建议是收集device configurations as they’re released,掌握…之间的平衡manual and automated testing,并遵循一套移动测试策略。