V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Tomfe
V2EX  ›  职场话题

UI 太抠细节 强迫前端天天该样式怎么办

  •  
  •   Tomfe · 1 天前 · 9762 次点击

    如题,每次做完需求后,UI 会提出大量 Bug ,例如分布不均匀,文字过大,输入框有点短之类的问题,而且优先级还都是写的高,问他就说这些问题很重要,领导这边对于这种情况只是说按照 UI 改,但是我想前端对这种问题应该深有体会,在不影响整体的情况下,这些完全是没什么用的工作内容

    第 1 条附言  ·  1 天前
    大佬们的指点与批评在下都看了,有一点我要申诉一下,我并不是那种一股脑自己乱做一气不看设计图那种前端,而是设计图很多时候和现实场景差距很多,举个例子,一个页面 UI 设计头部一行五个下拉框,图里的下拉框展示文字都是五个字 看起来很平均美观,但是实际场景 每个下拉框内容可能是有长有短 不可能强制搞成一个宽度 这时候我就会根据情况修改每个下拉框长度 最后结果看起来和设计图不符
    146 条回复    2025-03-19 14:49:02 +08:00
    1  2  
    gechang
        1
    gechang  
       1 天前   ❤️ 5
    《改》
    lingyan223
        2
    lingyan223  
       1 天前   ❤️ 36
    你的难受本质上是因为你受到了 UI 的单方面压力,并且从政治正确的角度来讲,似乎无法反驳这种强迫。我建议你反向要求 UI 进行组件化设计,不要按照 UI 的喜好随意设计,以提升开发与设计效率。
    kera0a
        3
    kera0a  
       1 天前 via iPhone   ❤️ 8
    你想法太多了,如果确实和 UI 设计效果不一致,那就应该改。这并不是没什么用的工作,相反细节一塌糊涂对整体观感影响巨大。
    kakakakaka8889
        4
    kakakakaka8889  
       1 天前
    改呗,UI 图都出了你还能分布不均匀文字过大输入框短本身就是你的问题,既然有 UI 图就按 UI 图来呗,你这些也不是什么难以还原的
    AlanBrian
        5
    AlanBrian  
       1 天前
    正视 UI 问题
    catch
        6
    catch  
       1 天前
    看你公司什么水平吧,大厂就 听话,垃圾公司 无所吊慰,就说改一部分
    root71370
        7
    root71370  
       1 天前 via Android
    应该的
    shadowyue
        8
    shadowyue  
       1 天前
    还原设计稿都做不到,那还能叫前端吗?
    除非是很难的设计
    paopjian
        9
    paopjian  
       1 天前
    工作量这不就有了, 让他提供精细设计稿直接抄
    LHRUN
        10
    LHRUN  
       1 天前
    如果是 C 端项目, 这肯定有用啊, 要改的
    ZE3kr
        11
    ZE3kr  
       1 天前 via iPhone
    前端最基本的不就是像素级对其吗?如果楼主是后端那我还可以理解
    Jaosn
        12
    Jaosn  
       1 天前   ❤️ 10
    还原设计稿都做不到,那还能叫前端吗?还好意思来发帖
    Tomfe
        13
    Tomfe  
    OP
       1 天前
    @paopjian 有设计稿 但是设计稿是按照大屏显示器 1920 这种尺寸设计的 所以图里面很多设计都是尺寸较大 但是验收时候又是小屏幕笔记本和显示器都要看下效果,所以我的做法是用相对适中的尺寸 flex 布局这种方式处理 所以 UI 觉得没有按照设计稿来 问他屏幕尺寸的情况 他又说要两边都能满足 一个 ToB 的项目 在做个响应式 感觉又有点犯不上 因为业务开发量本身就很重
    miloooz
        14
    miloooz  
       1 天前   ❤️ 3
    “不影响整体的情况下,这些完全是没什么用的工作内容” ???
    能将设计的内容在页面呈现是前端的基本要求。
    如果设计图有问题,在开发前应向设计组提出。
    在编写时应尽可能符合设计的要求,如果有 figma 、蓝湖等工具,还让 UI 提出这么多样式问题,应该反思而不是吐槽。
    ryan4290
        15
    ryan4290  
       1 天前
    我也是遇到了这个问题。

    其实看你的位置了,有的公司,很小,但是人家就是卡住了生态位,ta 这样做,就证明了:ta 在干活。那么 ta 的目的就到了,至于你爽不爽,ta 是不在意的。

    否则 ta 就岌岌可危了。
    whoosy
        16
    whoosy  
       1 天前   ❤️ 4
    这本身就是你的问题,人家对你负责,你却不对人家负责
    kinkin666
        17
    kinkin666  
       1 天前
    你是不是比较喜欢用 flex 来做定位?

    如果碰到大领导说不好看,UI 会把锅扣你头上的(本来就是你的锅)

    况且现在 UI 出的图都鼠标点一下都能看到 css 样式,在 rem2px 的基础上配合 relative 和 absolute 定位,任何东西都是一把梭哈,脑都不用动还不好吗
    zhangpulin
        18
    zhangpulin  
       1 天前
    改,不能 1:1 还原 UI 设计,做什么前端?
    YVAN7123
        19
    YVAN7123  
       1 天前
    安排工作量,每天改改这种也不错啊。 调整一个输入框算一条任务。 一天下来任务量巨多
    emiyamuto
        20
    emiyamuto  
       1 天前   ❤️ 3
    有种理工直男的美
    产品的外观本身就是产品最重要的一部分,粗制滥造的 ui 产品我根本看都不看
    还没什么用,我看到乱七八糟的设计语言我直接换平台了,谁管你里面雕了什么花
    xing666
        21
    xing666  
       1 天前
    100%还原设计稿,前端基操啊,设计都是像素眼,你没还原就是没还原,这怪不了设计,乖乖改吧
    shadowyue
        22
    shadowyue  
       1 天前
    @Tomfe #13
    那你问 UI 啊,小屏幕尺寸是等比例缩小,还是给你一套新的设计稿,商量下呗
    BigPiggggg
        23
    BigPiggggg  
       1 天前
    你直接用 px to vw 来做等比例缩放不就完了
    Aolose
        24
    Aolose  
       1 天前   ❤️ 1
    多尺寸适配让 UI 给设计 不给设计 备注适配方案也行
    UI 报 bug 就是一种协作的沟通方式 哪些地方要改 帮你列出来不是很好吗
    至于优先级 那是浮云 高低都是要改的
    thoo61871
        25
    thoo61871  
       1 天前
    领导不懂技术
    但是领导不瞎
    TiAmo998
        26
    TiAmo998  
       1 天前
    用 design token 就可以啊,推一推这个落地,就不用关注细节了
    zy0829
        27
    zy0829  
       1 天前
    同前端 看着改就行了,都是工作
    kneep
        28
    kneep  
       1 天前   ❤️ 7
    你说的这些问题,我觉得都不是小问题。为什么有些应用看起来简洁高雅有品味,而有些应用看起来像村办企业做的,差别就在这些地方。
    ilovecqrwx
        29
    ilovecqrwx  
       1 天前
    评估工时的时候把还原设计稿这项也加上去就好了
    q2677855779
        30
    q2677855779  
       1 天前
    UI 要走查的,一点不同就要返工改,除非是那种大屏不好实现的,反正基本上能还原 UI 就还原,至于适配这个得提前沟通好,不然小屏笔记本很难受。遇到过几次了我
    zuosiruan
        31
    zuosiruan  
       1 天前 via iPhone
    转后端?
    snimstice
        32
    snimstice  
       1 天前
    @BigPiggggg 宽高都用 vw 来做适配吗?
    wangpao
        33
    wangpao  
       1 天前
    花了很多精力设计 UI ,结果前端做出来根本是另外一个东西,字号、颜色、线框粗细完全不一样,而且是一眼不一样!!!
    这和像素眼没关系,纯粹就是前端做出来的完全不是同一个东西,字体磅重、字号大小和设计稿一致很难吗?输入框这个大黑框和设计稿是一回事吗? 还有为啥你改了我所有的圆角啊!!!!图片为啥拉伸了? 真是不是设计龟毛,老老实实还原设计就好,请不要随意按照自己的想法修改设计稿!!

    实在是被坑过太多次了!!!
    Tomfe
        34
    Tomfe  
    OP
       1 天前
    理解楼上各位说的前端要还原设计稿,反思了下也有我的问题,不知道为什么改业务加需求什么的都能接受,但是改样式这种工作做起来就是特别抓狂
    hwdq0012
        35
    hwdq0012  
       1 天前
    mvvm 本来 Ui 和业务是分开的,可以两个人搞,现在都是压一个程序员身上
    看微软的 wpf , 前端有一个 blend , 功能简直和 photoshop 有得打, 后端用 visual studio
    但国内会 blend 的很少, 基本就是后端用 vs 完成 ui 和业务
    Leon777
        36
    Leon777  
       1 天前
    商业产品 UI 非常重要,字体间距组件要精确到像素
    Tomfe
        37
    Tomfe  
    OP
       1 天前
    @hwdq0012 初入行时候是这样的 那时候我只负责 html css 还有特效部分 做完页面把代码给后端,后端加上业务逻辑
    i33
        38
    i33  
       1 天前
    没有 UI, 自己做也应该细节拉满, 字号 、标题、对齐、层级感等,前端应该有基础审美, 并且对自己有要求,不吹毛求疵, 做不出来好产品。
    leokun
        39
    leokun  
       1 天前
    也许你看不出来,但是 UI 确实能看出来,而且大多时候改了后的确好看了
    虽然让人抓狂,但也是本职工作呀
    finab
        40
    finab  
       1 天前   ❤️ 5
    @Tomfe
    改 UI 问题特别抓狂的话, 应该是 UI 不够漂亮,俺们公司 UI 贼漂亮我就爱和她说话
    RSTAR
        41
    RSTAR  
       1 天前
    这就像一个爱整洁的人指摘邋遢的人,但邋遢的人觉得他事太多,本质是认知问题。
    Tomfe
        42
    Tomfe  
    OP
       1 天前   ❤️ 1
    @finab 嗯 是有点丑
    irisdev
        43
    irisdev  
       1 天前
    跑路,别干前端了。我就是因为这个原因跑路的
    ccraohng
        44
    ccraohng  
       1 天前
    理论是应该还原。
    但是 ui 设计的很随意、很乱,间距、大小都不统一,那只能也随意了
    Tomfe
        45
    Tomfe  
    OP
       1 天前
    @RSTAR 有道理 对样式这个问题确实是不太关注
    Tomfe
        46
    Tomfe  
    OP
       1 天前
    @irisdev 现在做啥了 我目前是下了班后在学后端 打算往后端或者全栈路线走
    NoManPlay
        47
    NoManPlay  
       1 天前
    还原设计稿是基本标准,有设计稿已经很好了
    xiaoqidev
        48
    xiaoqidev  
       1 天前   ❤️ 7
    100% 还原是基操,响应式页面 UI 应该出不同尺寸的多个设计稿,字节有款走查验收工具 https://copixel.bytedance.com 交付前可以自己检查一下
    tricker1215
        49
    tricker1215  
       1 天前
    我认为前端要兼顾考虑 ui 的还原程度问题和工时问题,工时长可以细节控,工时短的话确保颜色,字号对得上,定宽定高,不同 size 的屏幕兼容整体美观就可以了,做 b 端根本没必要对 ui 吹毛求疵,做 c 端的话 uiux 自然是好马要配好鞍。
    guguji5
        50
    guguji5  
       1 天前
    我们不是 UI 让改。是 UI 出了,前端还原了,老板继续改。说设计稿框框太多,空间太大
    tcper
        51
    tcper  
       1 天前   ❤️ 7
    你这一看没啥经验,搞得好像自己还挺有责任感,还特别不招人待见。

    一个原则,无论如何都应该符合 UI 设计。
    你做的任何事如果违反这个原则,你放在哪都没人支持。

    但是,这个原则需要付出代价
    UI 出一个设计他觉得很美,老板也满意,但是你要兼容小中大三种屏幕,你可以要求所有设计都出 3 套
    按照你的快速实现,2 天能干完的活,像素级还原,要 10 天

    不要和大原则做对,你所做的一切都是还原 UI 设计
    让老板去做取舍,而不是你自己做取舍
    AokiNet
        52
    AokiNet  
       1 天前
    @xiaoqidev #48 chrome 说是什么没有遵循最佳实践不让下载,不过看操作视频是有点意思,平常开发到处切屏看 ui 也挺麻烦
    loadin
        53
    loadin  
       1 天前
    既然是前端,理应就按照 UI 的设计进行啊。 如果 UI 没有规则,那么就反馈这个问题。
    rabt
        54
    rabt  
       1 天前
    楼主是前端吗,是的话菜就多练
    forschers
        55
    forschers  
       1 天前
    UI 扣的细还不好么
    zsc8917zsc
        56
    zsc8917zsc  
       1 天前
    让 UI 用 figma ,直接生成样式,像素级还原
    calmlyman
        57
    calmlyman  
       1 天前   ❤️ 1
    还原 UI 设计稿是应该的,但如果 UI 只出了一份稿却让我实现三个终端的适配,那我就得提刀了/doge
    xiaoqidev
        58
    xiaoqidev  
       1 天前
    @AokiNet #52 以前装的没注意,很多插件不升 v3 都不让装了,找到另外一个链接,有需要可以手动下载安装一下 https://www.crxsoso.com/webstore/detail/iljifliapaimkofafkddpgkfkmnocajf
    ynxh
        59
    ynxh  
       1 天前
    都有 UI 了,你当公司出钱养人是在闹着玩呢? 正视自己的问题,1:1 还原 UI 是前端的基本工作职责。
    WillBeethoven
        60
    WillBeethoven  
       1 天前 via iPhone
    @Tomfe 让他针对不同尺寸的屏幕都做一套设计方案
    rainsounds
        61
    rainsounds  
       1 天前   ❤️ 1
    @Tomfe #13
    UI 没给适配方案,你也没问,测试阶段 BUG 都指给你,优先级还特别高,那你肯定越改越不爽。

    这些东西开发前就要达成一致,包括本次测试的分辨率范围、每个分辨率对应的效果图或是适配方案,开发时有擅自修改的地方一定要和 UI 达成一致。发现 BUG 的时候先看看是否是设计问题,对于效果图上没有的、适配方案不够具体的,BUG 责任人都可以标成 UI ,这样你改起来就没有负担了。

    另外楼上说的组件化设计也非常对,对于字体、字号、边框这些和你们的 UI 库差异比较大的问题,多跟领导沟通改动所需要的工时,领导肯定还是以工时为重的。
    Marmot
        62
    Marmot  
       1 天前
    这是基本职责
    me1onsoda
        63
    me1onsoda  
       1 天前
    果然大部分前端是没有 100%还原设计稿的能力
    chairuosen
        64
    chairuosen  
       1 天前
    所有数字,要么自动标注,要么让 UI 手动标注,开发按照标注来,只要跟标注一样就不是 BUG
    gbw1992
        65
    gbw1992  
       1 天前
    "分布不均匀,文字过大,输入框有点短 " 这些属于基本工作内容
    就像测试跟你提出这个接口响应有点慢一样
    arron2022
        66
    arron2022  
       1 天前
    评估工作量的时候把这一块时间评估进去
    wyman222
        67
    wyman222  
       1 天前
    之前公司都是要求像素级对齐,迫于 UI 的压力,慢慢的对布局,控件,还有一些简单的设计都了属于心。而且养成了对事情较真的习惯,在我的个人感知里,我很感谢那时候的认真
    IanHo
        68
    IanHo  
       1 天前
    对着蓝湖的代码抄,也不至于出现这种小问题……
    duanxianze
        69
    duanxianze  
       1 天前   ❤️ 2
    同为前端,我能理解你,本质并不是不愿意还原设计稿,而是某些 UI 水平太次,根本考虑不到例如屏幕尺寸,分辨率,不同的字体宽度大小粗细不一,图片放大缩小导致的比例不一等等适配的问题,就说和设计稿不一样,无法沟通
    jobscolin
        70
    jobscolin  
       1 天前
    我觉得 UI 挺负责任的,我们的 UI 出个图,一套图一个边距,把我整崩溃了
    zepc007
        71
    zepc007  
       1 天前 via iPad
    作为切图仔都做不到设计稿还原, 那还做个啥切图仔, 小项目做多了就容易产生这种错觉. 像素级验收人家是对自己负责, 你做不到那是你对自己不负责
    connection
        72
    connection  
       1 天前
    推动组件化设计可以一定解决这种问题。
    但是我遇到的问题是 组件化后,设计仍然对组件化内容“微调”“特性调整”
    connection
        73
    connection  
       1 天前
    而且,有谁感受过,长迭代的前端项目人员遇到没有规范的设计人员的持续迭代的痛苦。
    dp
        74
    dp  
       1 天前
    ...这不是基本要求吗
    ccraohng
        75
    ccraohng  
       1 天前
    @connection 同感受,只能安慰自己世界是一个巨大的草台班子了😇 “设计得太烂不想花费太多的精力”
    CH122
        76
    CH122  
       1 天前
    @lingyan223 这是正确的
    jydeng
        77
    jydeng  
       1 天前
    UI 这么做没问题,不过你要想办法减负。
    包括但不限于:模块分级、建立设计标准、组件库、tailwind presets 等等
    dudubaba
        78
    dudubaba  
       1 天前
    能理解,但难受。这是人家的工作,如果不较真那么对方的工作就没价值了。所以一般处理方式就是搞好关系,简单的改一改就算可以了。
    bello123
        79
    bello123  
       1 天前
    同前端也经常与 ui 扯皮,一些问题确实存在只能改,一些问题不好实现就跟 ui 商量折中方案,ui 也不容易上面有领导压着
    irisdev
        80
    irisdev  
       1 天前
    @Tomfe 全干了,对于 ui 方面会比专业前端宽容点
    crysislinux
        81
    crysislinux  
       1 天前 via Android
    设计工具和浏览器渲染方式都不一样,追求个屁的 100%还原。追求 100%直接挂图片得了。
    overflow99
        82
    overflow99  
       1 天前
    如果 UI 提供了设计稿,那么作为前端,按照设计稿精准实现,这算是基础能力
    terrysnake
        83
    terrysnake  
       1 天前
    你(或者你的领导)要么就在设计稿定稿的那时候提出来前端实现很困难,或者有其他的想法。不能定了以后,说实现不了。本质上,这和改后端需求没什么两样。
    simo
        84
    simo  
       1 天前
    从 ie6 时代过来的,怎么抠细节都不觉得有麻烦了,还 css hack ,都妖精。
    gorvey
        85
    gorvey  
       1 天前
    还原设计稿是基本能力。
    但是自己的还原能力,设计稿的质量,项目 UI 规范都会影响到写页面的痛苦程度

    最好是整理一套 UI 规范,对颜色,间距,字体,页面宽度等设立标准,用 design token ,tailwind ,css 变量

    你来牵头让领导在团队内推一推规范,蓝湖,figma 这些工具能用就用。

    还有就是宽度的问题,按照我的经验最好是让 UI 出 1200 宽的设计稿比较方便适配小屏幕
    bitmin
        86
    bitmin  
       1 天前
    确定不是钓鱼吗,你这些个问题太大条了,如果是我老板,一眼看出 1px 不一致让你 1px 1px 的调

    在他的观念里,前端连还原设计稿都做不好,那还做啥

    设计稿和验收尺寸不一致,这你在开发前就得提出。别自以为是,自己觉的要怎么做,如果不和其他人沟通自己做了,所有的锅都自己背

    开发中我最怕的人就是啥都不说,闷头扑哧扑哧做,问有没有问题,都没问题,做完发现和目标相去甚远。问原因就是我认为,我以为,我觉的
    gorvey
        87
    gorvey  
       1 天前
    @crysislinux #81 用 figma 呗,直接生成组件了,100%还原
    geekfxxk
        88
    geekfxxk  
       1 天前
    正视 UI 问题,积极修改!
    learnshare
        89
    learnshare  
       1 天前
    所以说前端已经是另一个时代,pixel perfect 不是基本要求了吗?

    如果能提供设计稿,为何不能要求 UI 实现更精细一些呢。
    响应式的适配,如果已经明确要求了,那也是前端的工作内容之一。
    对于质量不好的设计稿,或者实现有难度/工作量超标的任务,完全可以提出来。
    katwalk
        90
    katwalk  
       1 天前
    是你的活儿干的不行,还是 UI 设计师鸡蛋里挑骨头,你贴个对比图出来就一目了然了
    xzh654321
        91
    xzh654321  
       1 天前
    @xiaoqidev 。。。chrome 插件不支持最佳实践已被暂停使用
    wangyzj
        92
    wangyzj  
       1 天前
    如果设计图像素级别的数据都给了
    那么照着做,做到一致是对的
    xu33
        93
    xu33  
       1 天前
    用 ai 不就行了
    xuanbg
        94
    xuanbg  
       1 天前
    你 100%按 UI 还原不就没事了?既然不一样被人找出来了,那就改啊。
    zcvvvbb
        95
    zcvvvbb  
       1 天前
    @Tomfe 哈哈一模一样,我也是烦扣 ui 细节,也在转全栈
    tonytonychopper
        96
    tonytonychopper  
       1 天前
    事先没有和 UI 对齐吧,不让走查的时候怎么会提这么多问题
    szyp
        97
    szyp  
       1 天前
    我是后端,我们组没有 UX 、UI ,我看着前端自己按照产品的原型做的页面特别痛苦
    zgsi
        98
    zgsi  
       1 天前
    我是后端,我写前端非要扣到像素级别。所以我做不了全栈
    yunyuyuan
        99
    yunyuyuan  
       1 天前
    干前端是这样的,有时遇到了设计稿太简陋了,一些报错或者警告的样式都没设计,使用项目里的组件,他们也给提 bug ,我一个切图仔还能说啥呢,堆屎呗
    chenyu0532
        100
    chenyu0532  
       1 天前
    像游戏客户端改 UI 更是频繁,我都是把示意图放编辑器里,30%透明度,对着一个个 UI 去调整
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2482 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:46 · PVG 23:46 · LAX 08:46 · JFK 11:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.