西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus丨外贸独立站
本文共4855字，阅读时间约15分钟~
中国每年有50万名设计专业毕业生。 相比之下，能够进入大工厂的人只是极少数。 但所有潜心设计的设计师都有一颗渴望成长的心。 《体验设计师入门实战课程》是vivo VMIC UED为新晋设计师量身打造的专业成长课程。 这是所有UED讲师的巅峰之作。 现在，我们把这套课程整理成文章发表出来，希望能给选择并从事设计行业的你一些成长的动力。
前言
互联网时代，产品形态多种多样。 就手机行业而言，设计师至少需要面对一两百个屏幕尺寸。 我们不可能单独处理每个屏幕尺寸。 巨大的工作量是我们无法承受的。
我们需要一些方法或者手段来帮助我们减轻巨大的工作量。 这些方法和手段的集合就是——UI设计适配。 UI设计适配帮助设计师只需维护多种尺寸的设计稿，即可兼容市面上大部分屏幕尺寸，达到不同屏幕尺寸下视觉效果近乎一致的目标。
本篇文章我们主要关注移动应用的UI设计适配，将从以下几点进行介绍：
那么接下来我们就进入正式内容吧。
什么是UI设计适配？
UI设计适配是指针对不同的设备、分辨率、屏幕尺寸、操作系统等因素调整同一应用程序或网页的用户界面，以保证用户界面的一致性和可用性。
这个定义包含了一些专业术语，理解起来还是有点困难。 如果我们隐藏那些专业术语，用图形来解释这个定义，如图1.1所示，左边是16:9屏幕尺寸的设计稿，我们需要将其转换为1:1屏幕尺寸的设计稿。
你如何处理？
▲ 图1.1：适配流程
在开始设计之前，需要考虑屏幕尺寸和比例差异较大的可能性，如图1.1所示，如何适配； 在设计时，你会更仔细地考虑，顶部轮播Banner是否有固定的宽度，或者是根据不同屏幕尺寸的宽度来适应宽度。 图 1.1 显示了固定宽度。 设计完成后，您在开发过程中可能会发现，如果只有两张Banner图片，则无法像设计稿那样显示三张Banner图片。 这时候也需要你去思考如何应对。
上面我们讲了这三种场景下思考和解决问题的过程移动ui设计，就是UI设计适配。
由此可见，适配在UI设计中是一个过程，但并不是一个具体的环节，不像标注和裁剪是一个固定的过程。 它被融入到整个UI设计过程中。 UI设计适配问题可以在设计前、设计中和设计后考虑。
为什么需要UI设计适配？
为了用户体验的一致性。
这里的“一致性”主要关注视觉表示层是否一致。 图1.2是“vivo X Fold 2”机型上“vivo浏览器”内外屏首页截图。 整个页面在布局结构、控件类型、元素大小和间距上基本一致。
▲ 图1.2：相同的布局结构
在用户体验中，视觉呈现层的一致性是基础中的基础。 保证“一致性”将有效降低用户的使用成本。 即使用户更换不同的设备移动ui设计；《UX导论》：浅谈移动UI设计适配，使用也不会有困难。 UI设计适配是实现这一目标的重要方法之一。
不过，也请注意移动ui设计，这里所说的“几乎相同的用户体验”仅限于屏幕尺寸相似的电子设备。 例如，我们不能要求7英寸屏幕尺寸的移动应用和27英寸的PC客户端具有基本相同的视觉呈现层。 即使是同一个应用程序，也会因为交互方式和操作系统的不同而有所不同。 差异是巨大的。
UI设计适配的一些基本概念
用户界面不是物理实体，需要一些物理实体来承载。
本节我们将重点解释一些你需要了解的与适应密切相关的概念。 一般来说，为了适应我们需要重点理解三个参数——逻辑（像素）分辨率、物理（像素）分辨率和放大倍率，以及它们之间的关系。
理解这些概念可以帮助我们在面对一些适配问题时理解为什么会出现这样的问题跨境独立站，也会更容易找到合适的解决问题的方法。
举一个简单的例子，如图2.1所示。 不同尺寸的左右屏幕具有完全相同的元素。 要达到这样的效果，“逻辑分辨率”、“物理分辨率”和“放大倍数”起着关键作用。
▲ 图2.1：不同尺寸屏幕对比
屏幕比例
屏幕比例很容易理解，就是设备屏幕尺寸的长宽比。
2016年之前，行业主流手机屏幕比例为16:9； 但今年命运的齿轮开始转动。 小米发布了一款对手机行业产生深远影响的机型——小米MIX一代，屏幕比例为17：9，从而手机屏幕迎来全面屏设计时代。 如今，手机的屏幕比例已经完全转向18：9、19：9、20：9等，而且手机的屏幕高度还在不断增加。
那么这个比例的变化对我们的改编内容有影响吗？
影响是存在的，但是影响不大，而且只是在某些特定场景下。
我们以“vivo i video”影视页面为例（图2.2）。 高度的变化带来垂直空间的延伸，需要展示更多的内容，对设计适配的影响相对较小。 一些受影响的具体场景将在后面的“适应手段”部分详细解释。
▲ 图2.2：不同屏幕比例下App界面的显示内容不同
逻辑分辨率、物理分辨率和放大倍数
决议这个词是人们日常生活中比较常见的概念。 比较常提到的——720p、1080p、2k、4k等都是在说分辨率。
这些参数对应UI设计中的物理分辨率。 物理分辨率用于测量屏幕中的像素数量。 相同屏幕尺寸和一定观看距离下，分辨率越高，画面越清晰，反之亦然。
物理分辨率是存在于物理世界中的具体概念，而逻辑分辨率是对应于软件代码层面的抽象概念。 可以理解为在代码层面存在一个虚拟屏幕，而逻辑分辨率就是这个虚拟屏幕上像素数量的度量。 同样，这里的“像素”也是一个不存在的抽象概念。
逻辑分辨率也是用一组参数来表示的，我们可以知道这个值是多少，如图2.3所示，摘自苹果公司的《人机交互指南》，其中详细列出了iPhone、iPad和iPod的逻辑分辨率率和物理分辨率。
▲ 图2.3：逻辑分辨率和物理分辨率
我们选择其中之一来解释逻辑分辨率、物理分辨率和放大倍数之间的关系。 如图2.3所示，简单来说——逻辑分辨率乘以放大倍数就是物理分辨率。
▲ 图2.4：逻辑分辨率、物理分辨率和放大倍数的关系
这个公式中还有两个单位——“pt”和“px”。 px很容易理解，是我们设计中使用的像素单位，而pt是开发代码中的尺寸单位。 “pt”来自印刷业。 该词，译为“点”。 图2.3中的“@2x”和“@3x”是系统默认的放大倍数。 我们常称其为一次图、二次图、三次图等。
“@1x”是比较老的手机设备，设计中基本不再考虑。 当图像放大一倍时，此时的1pt正好等于1px，可以减少开发工程师和设计师之间的沟通成本。 因为假设你的设计稿使用了三倍的图纸，那么转换公式就是1pt = 3px。 如果你和开发沟通时没有说明具体单位，而你说12，开发工程师可能会理解为12pt，但实际上表达的是12px，所以最终的效果会有较大的误差。 因此，很多设计团队在针对iOS设备进行设计时，仍然使用双倍大小的设计稿，从而打开了开发工程师和设计师之间的沟通障碍。 不会因单位不一致而导致结果错误。
所以说到Android，原理是一样的，只是参数和概念名词有一些区别。 如图2.5所示，黄色标记的部分是我们当前使用的屏幕尺寸（高度值可能略有不同）。
▲ 图2.5：Android手机的物理分辨率和逻辑分辨率
首先，Android的放大倍率是用英文命名的，比如mdpi等，但我们还是习惯称其为双倍图片等。其次，“dp”是Android系统中逻辑像素的单位，相当于在 iOS 中为“pt”。 。
Android系统和iOS系统的逻辑分辨率的参数值类似。 这就是为什么很多设计团队只基于iOS进行设计，而Android开发工程师则直接使用基于iOS的设计稿进行开发。 因为差别不大，适配时只要使用相同的逻辑，同一个页面就可以少设计一次，这也是为了降低设计成本。
上面的内容也解释了，在我们本节开头的例子中（图2.1），为什么不同尺寸的屏幕可以保持相同的元素布局，因为两个物理分辨率不同的屏幕是基于相同的逻辑分辨率，通过扩大比率（图2.6）。
▲ 图2.6：Android手机的物理分辨率和逻辑分辨率
UI设计适配手段
本节我们将介绍适应不同屏幕尺寸的具体手段——固定尺寸和自适应尺寸。
固定尺寸
让我们从简单的固定尺寸开始。 固定是指它是一个绝对值，固定不变。
固定大小主要分为两种场景。 一是元素的大小固定。 该元素主要指图标、按钮、一些卡片容器（如Banner）和一些系统控件（如布尔开关、单选和多选等）。如图3.1所示，登录按钮中的登录按钮在折叠屏的内屏和外屏不同屏幕尺寸下，vivo账户登录页面的尺寸依然相同。
▲ 图3.1：vivo账户-登录页面按钮大小相同
二是元素之间的固定间距，主要指元素之间的固定间距以及元素与屏幕边缘之间的固定边距。 固定间距有助于将相似的元素组合在一起，符合格式塔原则。 比如图标和文字、卡片列表等。
▲ 图3.2：固定尺寸
在手机系统的设置页面中，如图3.2所示，相关类别采用较小的固定间距排列，不同类别则采用分割线和较大的固定间距排列。 这些固定间距不会根据手机型号而变化。 ，根据屏幕尺寸而变化。
▲ 图3.3：设置页面不同间距
自适应尺寸
自适应尺寸也细分为三种场景：单元比例自适应、单元间间距自适应和单元弹性自适应。
宽度和高度的一侧适应屏幕的宽度和高度，其余一侧按比例适应。 这主要是指图片、视频的适配。 因为这些元素的比例必须是固定的，所以我们只能按比例缩放（图3.2）。
▲图3.4：宽度固定，高度按比例缩放
一般来说，我们是根据宽度进行适配的，但随着近几年短视频应用的流行，我们需要为用户打造沉浸式的观看体验。 垂直视频往往会适应高度，这会引起问题。 宽度可能会超出屏幕宽度，超出的部分将会被裁剪掉。 但为了给用户更好的沉浸式观看体验，会选择裁剪。 剪视频。
▲图3.5：固定高度，宽度按比例缩放
当然，你可能会有疑问。 如果用户上传的是横向长宽比的视频或图片，如果按照宽度进行适配，会不会内容被裁剪太多，图片清晰度会降低很多？
没错，这里我们需要针对不同的场景使用不同的适配策略。 因此，对于水平内容，将自适应宽度，而垂直内容将根据高度进行自适应。
▲图3.6：宽度固定，高度按比例缩放
间距自适应的适配方法是根据百分比值计算自适应元素之间的间距以及元素与屏幕边缘的间距。 要以百分比形式计算间距，您需要一个基数shopify搭建，该基数通常基于屏幕分辨率的宽度和高度。
这种方法主要针对元素较少的页面，这就是我们在“基本概念”一节中提到的不同屏幕高度变化的影响。 最典型的就是手机的锁屏场景和状态结果页面的显示（图3.7）。
▲图3.7：间距自适应
如图3.8所示，仍然是vivo账户的登录页面。 在折叠屏的内屏和外屏上，可以明显看到按键与底部的距离不同。 这里，它们之间的距离是百分比。
▲图3.8：vivo账户-登录页面按钮位置
弹性适配是指控制元素的外边距和内间距，对同一方向的尺寸进行弹性适配。 弹性意味着可以填充多少空白空间。 如图3.9所示，当右侧多了一个按钮时，左侧的元素需要灵活适应以填充剩余的空白。
▲图3.9：弹性适配
同时，我们还会衍生出一种适配方法——矩形等分适配，是指将屏幕（或区域）均匀地划分为相同宽度（或高度）的矩形（划分的矩形之间可以有固定的间距） ，固定间距可以是0px)，同时不同的元素在矩形内居中。
▲图3.10：矩形等分适配
矩形主要分为标签栏、宫殿布局以及图片视频的瀑布流形式。 就是其中之一，它更方便地适应网页宽度的不断变化。 在移动终端中，这种方式目前普遍用于折叠屏的适配。 如图3.11所示，排名模块在内屏上显示为两列，但在内屏上由于宽度增加，内容需要填满页面，变成了三列。
▲图3.11：排名模块由两栏改为三栏
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。