大厂们的 App 码农是如何和 UI 合作适配界面的？

[lagoon]

一直在中小公司，早年混乱邪恶。

但随着码农地位下降，一些列更方便甩锅的插件也都有了。

之后一直是，UI 效果图啥样，手机啥样，等比。比如，一个容器在效果图上占了一半，那么在任何手机上都会占一半。

个人觉得这甩锅是好了，但实际太傻瓜了。我拿部大屏机，不是为了让一切显示的更大。
人眼看的是实际物理大小。

但不用等比也不行，UI 的效果图，按某尺寸切的，比如 iPhone 8，总不能码农自行发挥吧？

[zsxzy]

蓝湖 ?

[cssTheGreatest]

楼主提到的等比是一种适配策略，而另外一种是以前经常见的“响应式”适配策略，简单举个例子：一个文本 view 在 414px 屏幕下刚刚好放下，在 375px 屏幕时放不下那就让文本换行
目前我们 web 和客户端与设计师约定的都是使用“响应式”，设计稿以 375px 宽为基础，Sketch 里使用的 ArtBoard 是 iPhoneX
对设计师来说，这种适配策略下，他们需要保证他们的设计在 X 轴上的元素组合可以适应任何宽度的屏幕，而 Y 轴则以自然从上到下不限制的设计
对开发（我）来说，我可以直接将设计稿的标注 1:1 变成代码，不用做额外的换算（使用 meta 或者 rem，通过人工或者构建过程处理），但需要额外处理一下个别屏幕，例如 ipad
当然作出这样的决定，也只是一种基于产品 UI 格调而执行者互相妥协的结果，再通过快速而高频的实践去验证和优化他，以生产效率为第一准则。

[also24]

看想不想怼回去了，懒得怼就捏着鼻子写呗，又不是不能用。

想怼的话，自己把平台自身推荐的设计规范先搞透了，找 UI 好好沟通就行呗。
如果 UI 不能理解适配的概念还不肯让步，文档摔脸上喊他自己去学就好了。

https://developer.android.com/guide/practices/screens_support

https://material.io/design/layout/responsive-layout-grid.html

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

[lagoon]

@cssTheGreatest 不是很懂。比如，UI 效果图按 iPhone X 出，

一个按钮，宽 100pt，高 60pt，
切换为 px，
宽 150px，高 117px （随便说的）



那么在实际开发时，该指定多少呢？
原生开发或许可以直接指定，WEB 、RN 、Flutter，就不行了。

[Nuttertoo1s]

不需要强行，用代码写布局，由后端控制比例

[cssTheGreatest]

@lagoon 不好意思，说的不够严谨
这是我们的设计稿模板 https://z3.ax1x.com/2021/06/27/RJNxOJ.png
也就是实际设计时其实是 375 的逻辑像素
这时候“一个按钮，宽 100pt，高 60pt”对 web 来说是写 100px*60px，安卓 100dp*60dp，iOS 100pt*60pt

一开始我们设计师用的是 750px 的设计稿，但 750 是物理像素，逻辑像素就得 /2 比较麻烦，所以沟通后直接就把设计稿改成逻辑像素来做了