V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lagoon
V2EX  ›  程序员

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

  •  
  •   lagoon · 2021-06-25 16:02:40 +08:00 · 2196 次点击
    这是一个创建于 1258 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    6 条回复    2021-06-27 11:04:25 +08:00
    zsxzy
        1
    zsxzy  
       2021-06-25 16:09:25 +08:00
    蓝湖 ?
    cssTheGreatest
        2
    cssTheGreatest  
       2021-06-25 16:30:45 +08:00   ❤️ 3
    楼主提到的等比是一种适配策略,而另外一种是以前经常见的“响应式”适配策略,简单举个例子:一个文本 view 在 414px 屏幕下刚刚好放下,在 375px 屏幕时放不下那就让文本换行
    目前我们 web 和客户端与设计师约定的都是使用“响应式”,设计稿以 375px 宽为基础,Sketch 里使用的 ArtBoard 是 iPhoneX
    对设计师来说,这种适配策略下,他们需要保证他们的设计在 X 轴上的元素组合可以适应任何宽度的屏幕,而 Y 轴则以自然从上到下不限制的设计
    对开发(我)来说,我可以直接将设计稿的标注 1:1 变成代码,不用做额外的换算(使用 meta 或者 rem,通过人工或者构建过程处理),但需要额外处理一下个别屏幕,例如 ipad
    当然作出这样的决定,也只是一种基于产品 UI 格调而执行者互相妥协的结果,再通过快速而高频的实践去验证和优化他,以生产效率为第一准则。
    also24
        3
    also24  
       2021-06-25 17:08:15 +08:00
    看想不想怼回去了,懒得怼就捏着鼻子写呗,又不是不能用。

    想怼的话,自己把平台自身推荐的设计规范先搞透了,找 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
        4
    lagoon  
    OP
       2021-06-25 17:20:38 +08:00
    @cssTheGreatest 不是很懂。比如,UI 效果图按 iPhone X 出,

    一个按钮,宽 100pt,高 60pt,
    切换为 px,
    宽 150px,高 117px (随便说的)



    那么在实际开发时,该指定多少呢?
    原生开发或许可以直接指定,WEB 、RN 、Flutter,就不行了。
    Nuttertoo1s
        5
    Nuttertoo1s  
       2021-06-25 17:28:57 +08:00
    不需要强行,用代码写布局,由后端控制比例
    cssTheGreatest
        6
    cssTheGreatest  
       2021-06-27 11:04:25 +08:00
    @lagoon 不好意思,说的不够严谨
    这是我们的设计稿模板 https://z3.ax1x.com/2021/06/27/RJNxOJ.png
    也就是实际设计时其实是 375 的逻辑像素
    这时候“一个按钮,宽 100pt,高 60pt”对 web 来说是写 100px*60px,安卓 100dp*60dp,iOS 100pt*60pt

    一开始我们设计师用的是 750px 的设计稿,但 750 是物理像素,逻辑像素就得 /2 比较麻烦,所以沟通后直接就把设计稿改成逻辑像素来做了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6034 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 02:10 · PVG 10:10 · LAX 18:10 · JFK 21:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.