设计师如何应对不断变化的 iPhone 屏幕

在周三的年度硬件发布会上，苹果发布了三款新手机：iPhone XS、iPhone XS Max 和 iPhone XR，它们都采用了全新的屏幕，包括迄今为止最大的 iPhone 显示屏。对于想要看更大图片和视频的用户来说，更大的屏幕空间是令人兴奋的，但对于设计师来说，这也是一个需要探索的新领域。这并不总是一个令人兴奋的提议。

移动设计的黑暗时代

在移动网络发展的早期，新手机的发布往往会引发应用程序和网站的匆忙手动重新校准，以确保它们能够在像素更高或屏幕更宽的屏幕上正确呈现。2007 年，在史蒂夫·乔布斯 (Steve Jobs) 主持的 Apple Day 上，iPhone 首次发布时，在其移动浏览器中查看网站需要进行大量捏合操作。为桌面设计的网站在手持设备上呈现时，图像分辨率奇怪、文本重叠、导航栏不稳定。更糟糕的是，有些网站根本无法呈现 - 尤其是那些基于 Adob​​e 已停用的 Flash 平台的网站。

变化不断出现。“作为一名设计师，我只考虑宽度，”Currie 说。虽然无限滚动已经使垂直空间变得过时，但“宽度是宝贵的资源，”他说。“如果你用德语做某事，你会问一些非常基本的问题，比如，这个词能不能适合屏幕？”这意味着每一款新智能手机——Android 的每一毫米变化或 Apple 的每一像素——都需要一种独特的方法。

开发人员最初的应对措施是针对每种设备构建同一网站的不同版本。一家公司有一个桌面网站、一个（或两个）移动网站，甚至可能还有一个平板电脑网站。奥斯汀设计公司 Slide UX 的创意总监 Chad Currie 表示：“这种方法可能持续了一年。但到了一定程度，它就不再可行了；设备太多了。”每个版本的网站都需要大量人力和资金。

早期的拼凑式设计很快就过时了。万维网联盟 (W3C) 的 Chris Lilley 说：“当移动设备首次流行起来时，人们真的把它当作一种愚蠢的小型设备，事实也确实如此。人们会想，‘是的，你正在看手机，你还指望什么呢？’”但随着屏幕越来越好，移动设备使用量激增，网页设计师和应用程序开发人员之间的平衡发生了变化。他们要么必须对网站的每个版本投入更多资金，要么必须找到一种方法来简化开发过程。

响应式设计诞生

“响应式设计”这一术语最早由 Ethan Marcotte 于 2010 年提出。受建筑设计从静态蓝图向动态物理空间转变的影响，Marcotte 提出了以下观点：“与其为日益增多的网络设备量身定制不连贯的设计，不如将它们视为同一种体验的不同方面。我们可以设计出最佳的观看体验，但将基于标准的技术嵌入到我们的设计中，使它们不仅更加灵活，而且更能适应呈现它们的媒体。”这篇文章在世界各地广为流传。

在最初的提案中，马科特确定了响应式框架的“三个技术要素”。媒体查询功能已经是 CSS（互联网所基于的样式表语言）的一部分，它允许开发人员以不同的方式堆叠相同的组件，以便在每台设备上都能很好地呈现。三幅图像可能在桌面上并排呈现，但它们可以在移动设备上自动呈现为垂直行。只要这些图像具有灵活性（可以根据设备尺寸放大或缩小，甚至放大或缩小），并与文本和其他组件一起排列在流动网格上，马科特认为一个网站真的可以统治它们。

“它允许为较小的屏幕定义一组样式，为较大的屏幕定义另一组样式。媒体查询意味着开发人员可以为 400 像素以下的设备组合一组规则。他们还可以为大于 400 像素的设备创建另一组规则，”Jay Hoffman 在他的“网络历史”项目中写道。“两种设计。一个代码库。”

针对当前设备进行设计

Currie 表示：“如今，无论使用什么框架，人们‘手工’制作自己的响应式设计都已经非常少见了。”他指出，早期的解决方案，如开源响应式框架 Bootstrap，可以根据 12 项网格生成响应式布局，已经“感觉相当过时了”。CSS 本身现在提供响应式服务，曾经需要数小时原创工作才能实现的功能可以轻松地在各个网站之间复制。

Currie 表示，即使渲染过程中出现问题，“苹果等公司也会设置一些后备方案，这样你就不会尴尬。”例如，Instagram 拒绝开发 iPad 应用，而是选择只在智能手机上运行的平台。对于那些选择在平板电脑上下载移动应用的任性语法者来说，该应用会以移动设备尺寸在设备中央渲染。其边缘会自动生成四个黑色块，以确保体验仍然能够填满相当大的 iPad 屏幕。

但意外无处不在。2017 年，Essential Phone 引入了一个新的障碍，设计师必须绕过它：刘海。虽然对用户来说并不显眼，他们只知道它是前置摄像头的底座，但每台设备顶部的两个半可用屏幕突出部分却很引人注目。苹果最畅销的 iPhone X 的刘海更宽，可以容纳其 Face ID 系统的多个摄像头，这在屏幕顶部形成了一个很大的间隙。

Currie 表示：“代码库和操作系统内置了这样的功能：如果刘海展开，而你从未更新设备，它基本上仍能正常工作。” 最新版本的 Android 操作系统将电池和服务水平等状态图标放在刘海周围的空间中，以使其有用，同时在下方留下一个典型的矩形框。 尽管如此，向充满刘海设备的世界过渡并非天衣无缝。 亚马逊的电子书阅读 Kindle 应用程序等热门应用程序落后了几个月，才能够充分利用 iPhone X 奇形怪状的屏幕。

响应式设计可能力求“满足所有人的需求”——而且它正日益成为现实——但仍存在一些限制。Currie 的公司 Slide UX 过去以 320 像素为标准进行设计，这大致相当于第一代 iPhone 的大小。随着市场上的手机越来越大，Slide 最近转向了 360 像素的最低标准。“我们可以抛弃那些 [较旧、较小的] 设备，”他说。“我们将 [360 像素] 作为我们的共同标准。如果我们能将其缩小到这个尺寸，我们知道我们可以为大多数设备提供服务。”