发布时间：2023-12-20 分类： 行业资讯
iPhone X已经上市一段时间了，我不知道iPhone X的朋友是否习惯了iOS 11和iPhone X手机的操作体验。
在iPhone X发布之前，Drip travel已经将其操作功能连接起来，确保了iPhone X用户的全屏操作。现在iPhone X的适应结果得到了很好的用户反馈，因此我们在移动界面上梳理了iPhone X的适应方案，并从整个适应过程中探索了适应方法。随后更新的多尺寸屏幕提供更好和更快的适应想法。
整篇文章分为四章
iPhone X系统功能
接口通用元件适配方案
“去边界”设计
“去边界”设计的应用
iPhone X操作功能
iPhone X是苹果公司成立10周年推出的重要产品，在外观和技术方面都进行了革命性的创新。让我们首先回顾一下iPhone X在界面体验中的操作功能。
如果您对iPhone X不够了解，可以查看以下内容：
《优设首发!iPhone X 官方人机交互指南中文版》
《iPhone X适配没那么复杂，但也不是看上去这么简单》
《取消了Home键的 iPhone X，交互方式都有哪些变化?》
1.屏幕变长
由于大多数设计师使用iPhone 8进行设计草图，我们使用iPhone 8与iPhone X.
iPhone 6，iPhone 6s，iPhone 7和iPhone 8的屏幕分辨率是相同的。
iPhone X采用5.8英寸高分辨率大圆形显示屏。 iPhone X和iPhone 8显示屏宽度为375pt，iPhone X高出145pt，垂直空间可显示约20％。
iPhone X具有与iPhone 8 Plus相同的屏幕分辨率等。使用@ 3x图像，界面内容被手机硬件屏蔽为具有圆角和传感器（顶部刘海）的形状。因此，iPhone X和iPhone 8的设计宽度在界面设计中可以达到375pt，而实际的iPhone X屏幕像素为375pt× 812pt（1125× 2436px），剪切图像使用@ 3x图像。
乔布斯曾表示，手持设备的最佳屏幕尺寸为3.5英寸，因为3.5英寸屏幕基本上可以实现单手操作的完全无障碍覆盖。但随着手机功能多样化的需求，主流屏幕远大于3.5英寸。
iPhone X是5.8英寸，屏幕超过了大多数用户的拇指覆盖范围，这使得左上角和右下角的单手操作不方便。许多基于F型移动视线设计的应用程序通常会在左上角放置重要的功能条目。在iPhone X上，可能无法同时满足视线优先级和拇指操作，这要求设计人员具有多功能操作盲点的功能。考虑是否要对iPhone X进行位置调整。
2.异形状态栏（齐六海）
iPhone 8屏幕状态栏高20pt，iPhone X状态栏高44pt，带有刘海形状的面罩。状态栏位置显示的信息受iPhone X上的刘海掩码的影响。需要特别考虑显示效果，甚至重新设计信息显示模式以避开状态栏，以保持每个的均匀性。屏幕显示效果。
Apple不建议隐藏或阻止状态栏。与iPhone 8相比，iPhone X具有更高的垂直显示空间以显示更多内容，状态栏显示用户的有用信息，除非隐藏状态栏可以获得更大的利润，否则建议保留。
3.添加主屏幕指示灯
主屏幕栏设置在iPhone X屏幕的底部，用户可以使用滑动手势进入主屏幕或从屏幕底部切换应用程序。这些系统的全局操作优先于App应用程序的操作。在设计用户沉浸式产品（如视频和游戏）时，您可以适当地隐藏主屏幕栏。
主屏幕栏下方的内容仍然可以点击，但避免在屏幕的最底部设置重要操作，并避免使用与栏冲突的手势。主屏幕栏只有黑白，并会根据栏底部的背景自动切换。
4.设置安全区域
从iOS 11开始，Apple引入了安全区域的概念。在iPhone 8等屏幕上，安全区域默认为状态栏以外的一系列屏幕。在iPhone X上，安全区域默认删除顶部状态栏和底部主屏幕栏周围的范围。
根据系统安全区域的概念设计和开发，大多数使用系统标准UI元素的应用程序（如导航栏，表单，内容集）将自动适应设备的新形状，无需手动调整，为开发人员节省了很多工作量。因此，建议遵循系统主张开发布局的方式，这不仅有利于iPhone X的适应性，还有利于后续的iOS系统更新和界面元素的自动匹配。
固定在屏幕上的内容应始终位于安全区域，例如顶部指南，底部标签栏等。内容的垂直滚动（例如列表，图像流）需要一直延伸到底部，这显示在安全区域之外以确保全屏操作体验。
共同元素适应方案
由于iPhone X具有许多操作功能，因此我们的设计必须适用于iPhone X.以下是常见界面元素的一般适配规则。
天花板元素
天花板元件的适应原则是：避让状态栏，内容区域吸附在安全区域的顶部，状态栏的背景颜色根据天花板元素进行调整。
顶部导航栏：导航栏可以直接转换到安全区域的顶部。 iPhone X状态栏高度自动调整，状态栏背景颜色与iPhone 8一致。
热门通知：通知区域平移到安全区域，通知背景提升44pt，状态栏内容保持在顶层。
2.吸收元素
适应底层元素的原则是：将内容翻译到安全区域的底部，界面背景层元素（界面背景颜色，背景图像，全屏地图等）填充屏幕，并且区域主屏幕指示条下方与底部元素的颜色相协调。
底部标签栏，选择器，对话框输入框等：信息内容被翻译到安全区域的底部，相应的背景颜色填充在主屏幕指示条下。
底部按钮：信息内容被翻译到安全区域的底部。界面底部的背景填充相应的背景颜色，可以单击该按钮。
底部扩展信息：一些信息隐藏在底部，需要扩展。由于iPhone X屏幕较长且安全区域未满，因此将显示原始隐藏信息。此时，形状掩模通常用于覆盖隐藏信息，或者底部隐藏信息的位置是专门调整的。
3.信息流
信息流在主屏幕指示条下方传递，并显示屏幕显示。滑动浏览信息不受影响。主屏幕栏下方的内容仍可点击，此区域中的滑动手势优先触发系统操作。应在安全区域中保护信息流的最底层内容。
4.全屏元素
全屏元素主要是图片，视频，游戏屏幕，全屏地图等。适应规则是：全屏元素必须保持在iPhone X全屏状态，以确保图像信息比例正确且不变形，并接受硬件传感器齐刘海和圆角面具。
全屏图像：由于全屏图像仍然需要在iPhone X上保持全屏，因此图像信息将被裁剪，因此您应根据屏幕的特定元素进行选择，是否已满屏幕裁剪图像，或填充空白区域中的颜色块（系统默认填充黑色））。应用程序打开屏幕图像直接iPhone 8 Plus在iPhone X上裁剪，因此最好单独绘制，图像大小为375pt&次; 812pt（1125× 2436px @ 3x）。
由于iPhone X和iPhone 8 Plus都使用@ 3x图像，因此可以在不打开屏幕的情况下使用iPhone 8 Plus进行裁剪。
全屏阅读模式：当需要沉浸式阅读时，我们将使用隐藏状态栏显示所有屏幕，但由于齐刘，这种形式在iPhone X上并不理想。所以在iPhone X上，建议保留顶部状态栏，信息显示在顶部安全区域，状态栏的背景颜色可以根据信息内容进行调整。
5.左右布局元素
最典型的左右布局是抽屉导航。抽屉拉出后，如果信息卡和主屏指示器是隔行扫描的，信息会略微混淆。建议根据主屏幕指示条的位置调整抽屉导航的宽度。遮挡条完全被遮挡。
6.中心元素
中心元素对自适应的影响较小，对话框，Toast提示等不需要单独调整。
对话框：对话框是一个全局居中的元素，不受周围元素的影响。它不需要在iPhone X上单独调整，以确保对话框的背景充满了屏幕。
默认页面：由于顶部状态栏不建议用于遮挡，因此顶部加上顶部引导距离将很高，这将导致轻微的重心移动整个界面。特别是在具有默认图形居中的界面中，移动重心的感觉更加明显。在这种情况下，建议分别调整界面元素以实现视觉平衡。
上述适应规则基本上可以满足所有场景的基本适应要求。当然，还有很多特殊情况。您不需要保持iPhone 8和iPhone X的一致性。这种情况需要单独的设计，而不是一般规则。
Didi Travel已经为内部产品制作了一套适应指南，并且数十页完整的适应方案描述，尽可能地说明了普遍规则和特殊规则的使用。设计平台向每个业务部门发布此适应指南，业务部门在其自身的功能方案下生成适应方案。
在这个过程中，我们发现即使规则已经非常详细，但在Webapp和H5页面等多种场景中仍然存在一些不清楚如何适应或不能普遍适应的情况。设计平台需要跟进并解释规则。适应效果。
造成这种情况的大多数原因是由于接口设计未被充分考虑用于其后续扩展，导致无法在多个屏幕下维护的统一样式，并且不能使用一般适应规则。这使我们可以开始考虑如何设计一个接口以适应多个屏幕。
“去边界”设计
设备屏幕不断更新，适应需求无穷无尽，iPhone 4来自iPhone 4– iPhone 5– iPhone 6– iPhone X，屏幕尺寸不断变化，甚至屏幕的形状边界都在变化，更不用说Android的各种屏幕尺寸和屏幕形状。例如，夏普AQUOS S2。
在设计界面时，如果市场的主流屏幕设计有极高的时间成本，我们怎样才能使适应更加平静，而不必紧张地跟随手机制造商的脚步？有没有办法提高适应效率？可以一劳永逸地完成吗？需要调整的元素是否具有一些共性……
随着这些问题的不断思考和总结，我们已经形成了一套自己的设计理念，可以使这一事物适应一百一百，这就是“去边界”的设计。
“去边界”设计是指在设计开始时删除边界限制，定义界面元素的特征和层次关系，然后将它们应用于屏幕边界。与传统设计的不同之处在于内容成为独立且完整的组合，然后根据设定的变更规则组合成不同的边界。这保证了内容的最大适用性并保证了每个屏幕的显示规则的一致性。
目前，我们经常做手机界面。未来，VR和AR将会成熟。我们设计的界面将更大，甚至不可见。使用“去边界”设计使我们能够更好地适应未来。
另外，回到手机界面，在我们完成设计解决方案之后，我们还可以使用“去边界”的方法来检查界面元素是否在多屏适应方面存在问题，并减少不必要的适应工作量。
它很大，很小，在界面设计中，我们还需要突破界限，不断改进，并使每个元素丰富和完整。
“去边界”设计的应用
1.定义元素特征
除了元件本身的基本功能和操作方法之外，这里的元件的特征从延展性，吸附性和流动性三个角度考虑。
这里我们采用相同的放大倍率，不同尺寸的屏幕自适应作为示例，省略放大率转换使我们更容易理解“去边界”设计。
可扩展性：延展性是指元素在不同大小的屏幕上是否会改变大小。定义元素的扩展属性是适应的基础。确定元素的大小是可变的并且元素的大小不可变，使得自适应方案清晰且均匀。
如下图所示，图片，卡片，背景，列表，按钮等元素可以随屏幕扩展，而图标，文本等固定大小不随屏幕而变化。
扩展变化可以分为：相等扩展，横向扩展和完全扩展。
通常，图像和视频元素按比例扩展，以确保图像的比例均匀且不变形;列表，按钮等大多是水平扩展的，信息量不会随着变化而变化;卡片，背景等根据其方位信息和屏幕背景大小进行调整。长度和宽度都遵循变化。
吸附：界面中的元素不是独立的。每个元素与其他元素都有一定的关系。因此，限定元素之间的吸附关系以促进后续元素的重组。
如下图所示，按钮连接到接口（或安全区）的底部，其他屏幕仍然连接到接口（或安全区）的底部。下图中的吐司提示是界面的中心，即其吸附是界面的中心，并且通过适应其他屏幕来保持吸附性能。
流动性：流动性将元素与水相比较，与容器相连，并根据容器的大小而变化。大多数情况下，它由诸如文本流和图片流之类的信息元素提供。
流动性元素主要用于定义容器的延展性和吸附性。流动元件本身的尺寸是恒定的，并且位置形状随容器而变化。当然，在元素超出容器之后，我们还必须考虑显示方案，无论是截断还是省略。
如下所示，文本图像流显示在信息容器中。
2.组织信息结构
从平面尺寸考虑元素关系可以理解为元素之间的吸附，但界面元素并不总是在同一平面上。 App界面通常分为背景层，内容层，操作层和状态层。这些级别彼此高度叠加。
决定元素水平的因素主要是表达内容的主要和次要关系。重要和紧迫的因素是最重要的，而不重要和紧迫的因素是最重要的。将界面从平面尺寸填充到三维尺寸使得产品更加通用并且更接近真实的三维世界，这更符合用户的认知和操作逻辑。
无论界面的边界如何变化，元素之间的层次结构都不会随着边界的变化而变化。建立元素的垂直层次关系，以在不同场景中保持统一的元素优先级。
在“去边界”设计中，除了元素本身的特性（延展性，吸附性，流动性）之外，元素之间的层次关系必须合理和逻辑地排列，以便整个产品层次结构可以统一，多屏显示层次结构Unite。
3.元素组件化
我们已经说过界面中的所有元素都不是独立的。有时某些元素组合表达相同的功能，关系非常接近，甚至可以捆绑和移动。我们将这些密切相关的元素封装起来，并将其视为一个完整的大元素，这就是我们常说的。
组件化的特点是耗尽每个元素的操作反馈，扩展方案，显示容器，极限情况等，然后定义元素和元素之间的吸附关系，并操作连接使其成为一个完整的操作场景。
说到组件设计，有一篇必看文章：《进阶必读!可能是最全面的组件化开发与设计指南》。
组件还可以根据功能要求与其他元件自由组合，使组件可以连续重复使用，大大提高设计效率和适应效率。
组件化有许多含义，可以促进设计元素的重用，促进开发组件的重用，减少代码和元素冗余，并促进设计方案的修改。水平组件化基于“去边界”设计，其主要是在建立元素特征和层次关系之后通过将元素集成到组件中来提高设计和适应效率。
以上是“去边界”设计概念，包括定义元素的三个特征：延展性，吸附性，流动性，然后确定信息的水平和垂直层次关系。具有紧密水平函数关系的元素可以被组件化。这样，整个界面的元素是清晰的，不依赖于边界。此时，将屏幕边框应用于接口是非常有效的，并且可以确保所有适配接口的一致性。
在整理出设计概念之后，还有必要将上述原则融入设计规范中，并将其与团队的所有成员同步，以实现团队共识保证的最终结果。
4.制定设计规范
规则是方形圆，尺寸很小。设计规范可以帮助设计人员快速识别元素特征和使用规则，快速重用工作中的常见元素，提高设计效率，并可以通过规范寻求新功能。设计指导和参考。
规范的实施可以保持产品设计语言和品牌形象的统一，并保证产品体验在连续更新迭代中没有差异。统一的用户体验确保了用户对产品的顺利使用，产品功能的快速识别以及简单高效的操作。此外，通过规范，您可以实现开发人员和设计人员之间的有效沟通。此外，组件开发可用于形成设计组件库，这可以提高开发效率并促进代码重用。
在“去边界”的设计理念中，设计规范也是不可或缺的环节。将明确定义的要素特征和确定的组织结构定义为设计规范，是将理论层面的探索转化为实践指导。
以上是完整的“去边界”设计理念在实际工作中的应用：从定义应用中元素的可扩展性，吸附性和流动性，到形成分散信息元素的水平和垂直有序结构，以及特征和结构形成设计规范，用于设计和开发团队的应用和推广。
总结
在Apple会议上，Didi设计团队的设计团队开始研发iPhone X.了解iPhone X的操作特性，探索Drip Travel应用程序的适应规格，上线后的后续反馈等。适应性是只是一个小的工作要求，但它也可以做很多，这是很多工作。我们希望坚持这一点。最终的执行态度是做一切。
通过这项改编工作，我们不仅看到了iPhone X，还看到了将来会继续出现的新产品和系统。我们对被动适应一劳永逸不满意，我们希望我们能够积极应对变化，因此我们探索了“去边界”的概念，希望这个概念能激发每个人的设计工作，为我们做好准备。未来。
