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

[Tomfe]

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

大佬们的指点与批评在下都看了，有一点我要申诉一下，我并不是那种一股脑自己乱做一气不看设计图那种前端，而是设计图很多时候和现实场景差距很多，举个例子，一个页面 UI 设计头部一行五个下拉框，图里的下拉框展示文字都是五个字 看起来很平均美观，但是实际场景 每个下拉框内容可能是有长有短 不可能强制搞成一个宽度 这时候我就会根据情况修改每个下拉框长度 最后结果看起来和设计图不符

[gechang]

《改》

[lingyan223]

你的难受本质上是因为你受到了 UI 的单方面压力，并且从政治正确的角度来讲，似乎无法反驳这种强迫。我建议你反向要求 UI 进行组件化设计，不要按照 UI 的喜好随意设计，以提升开发与设计效率。

[kera0a]

你想法太多了，如果确实和 UI 设计效果不一致，那就应该改。这并不是没什么用的工作，相反细节一塌糊涂对整体观感影响巨大。

[kakakakaka8889]

改呗，UI 图都出了你还能分布不均匀文字过大输入框短本身就是你的问题，既然有 UI 图就按 UI 图来呗，你这些也不是什么难以还原的

[AlanBrian]

正视 UI 问题

[catch]

看你公司什么水平吧，大厂就 听话，垃圾公司 无所吊慰，就说改一部分

[root71370]

应该的

[shadowyue]

还原设计稿都做不到，那还能叫前端吗？
除非是很难的设计

[paopjian]

工作量这不就有了, 让他提供精细设计稿直接抄

[LHRUN]

如果是 C 端项目, 这肯定有用啊, 要改的

[ZE3kr]

前端最基本的不就是像素级对其吗？如果楼主是后端那我还可以理解

[Jaosn]

还原设计稿都做不到，那还能叫前端吗？还好意思来发帖

[Tomfe]

@paopjian 有设计稿 但是设计稿是按照大屏显示器 1920 这种尺寸设计的 所以图里面很多设计都是尺寸较大 但是验收时候又是小屏幕笔记本和显示器都要看下效果，所以我的做法是用相对适中的尺寸 flex 布局这种方式处理 所以 UI 觉得没有按照设计稿来 问他屏幕尺寸的情况 他又说要两边都能满足 一个 ToB 的项目 在做个响应式 感觉又有点犯不上 因为业务开发量本身就很重

[miloooz]

“不影响整体的情况下，这些完全是没什么用的工作内容” ？？？
能将设计的内容在页面呈现是前端的基本要求。
如果设计图有问题，在开发前应向设计组提出。
在编写时应尽可能符合设计的要求，如果有 figma 、蓝湖等工具，还让 UI 提出这么多样式问题，应该反思而不是吐槽。

[ryan4290]

我也是遇到了这个问题。

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

否则 ta 就岌岌可危了。

[whoosy]

这本身就是你的问题，人家对你负责，你却不对人家负责

[kinkin666]

你是不是比较喜欢用 flex 来做定位？

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

况且现在 UI 出的图都鼠标点一下都能看到 css 样式，在 rem2px 的基础上配合 relative 和 absolute 定位，任何东西都是一把梭哈，脑都不用动还不好吗

[zhangpulin]

改，不能 1:1 还原 UI 设计，做什么前端？

[YVAN7123]

安排工作量，每天改改这种也不错啊。 调整一个输入框算一条任务。 一天下来任务量巨多

[emiyamuto]

有种理工直男的美
产品的外观本身就是产品最重要的一部分，粗制滥造的 ui 产品我根本看都不看
还没什么用，我看到乱七八糟的设计语言我直接换平台了，谁管你里面雕了什么花

[xing666]

100%还原设计稿，前端基操啊，设计都是像素眼，你没还原就是没还原，这怪不了设计，乖乖改吧

[shadowyue]

@Tomfe #13
那你问 UI 啊，小屏幕尺寸是等比例缩小，还是给你一套新的设计稿，商量下呗

[BigPiggggg]

你直接用 px to vw 来做等比例缩放不就完了

[Aolose]

多尺寸适配让 UI 给设计 不给设计 备注适配方案也行
UI 报 bug 就是一种协作的沟通方式 哪些地方要改 帮你列出来不是很好吗
至于优先级 那是浮云 高低都是要改的

[thoo61871]

领导不懂技术
但是领导不瞎

[TiAmo998]

用 design token 就可以啊，推一推这个落地，就不用关注细节了

[zy0829]

同前端 看着改就行了，都是工作

[kneep]

你说的这些问题，我觉得都不是小问题。为什么有些应用看起来简洁高雅有品味，而有些应用看起来像村办企业做的，差别就在这些地方。

[ilovecqrwx]

评估工时的时候把还原设计稿这项也加上去就好了

[q2677855779]

UI 要走查的，一点不同就要返工改，除非是那种大屏不好实现的，反正基本上能还原 UI 就还原，至于适配这个得提前沟通好，不然小屏笔记本很难受。遇到过几次了我

[zuosiruan]

转后端？

[snimstice]

@BigPiggggg 宽高都用 vw 来做适配吗？

[wangpao]

花了很多精力设计 UI ，结果前端做出来根本是另外一个东西，字号、颜色、线框粗细完全不一样，而且是一眼不一样！！！
这和像素眼没关系，纯粹就是前端做出来的完全不是同一个东西，字体磅重、字号大小和设计稿一致很难吗？输入框这个大黑框和设计稿是一回事吗？ 还有为啥你改了我所有的圆角啊！！！！图片为啥拉伸了？ 真是不是设计龟毛，老老实实还原设计就好，请不要随意按照自己的想法修改设计稿！！

实在是被坑过太多次了！！！

[Tomfe]

理解楼上各位说的前端要还原设计稿，反思了下也有我的问题，不知道为什么改业务加需求什么的都能接受，但是改样式这种工作做起来就是特别抓狂

[hwdq0012]

mvvm 本来 Ui 和业务是分开的，可以两个人搞，现在都是压一个程序员身上
看微软的 wpf ， 前端有一个 blend ， 功能简直和 photoshop 有得打， 后端用 visual studio
但国内会 blend 的很少， 基本就是后端用 vs 完成 ui 和业务

[Leon777]

商业产品 UI 非常重要，字体间距组件要精确到像素

[Tomfe]

@hwdq0012 初入行时候是这样的 那时候我只负责 html css 还有特效部分 做完页面把代码给后端，后端加上业务逻辑

[i33]

没有 UI, 自己做也应该细节拉满, 字号 、标题、对齐、层级感等，前端应该有基础审美， 并且对自己有要求，不吹毛求疵， 做不出来好产品。

[leokun]

也许你看不出来，但是 UI 确实能看出来，而且大多时候改了后的确好看了
虽然让人抓狂，但也是本职工作呀

[finab]

@Tomfe
改 UI 问题特别抓狂的话, 应该是 UI 不够漂亮，俺们公司 UI 贼漂亮我就爱和她说话

[RSTAR]

这就像一个爱整洁的人指摘邋遢的人，但邋遢的人觉得他事太多，本质是认知问题。

[Tomfe]

@finab 嗯 是有点丑

[irisdev]

跑路，别干前端了。我就是因为这个原因跑路的

[ccraohng]

理论是应该还原。
但是 ui 设计的很随意、很乱，间距、大小都不统一，那只能也随意了

[Tomfe]

@RSTAR 有道理 对样式这个问题确实是不太关注

[Tomfe]

@irisdev 现在做啥了 我目前是下了班后在学后端 打算往后端或者全栈路线走

[NoManPlay]

还原设计稿是基本标准，有设计稿已经很好了

[xiaoqidev]

100% 还原是基操，响应式页面 UI 应该出不同尺寸的多个设计稿，字节有款走查验收工具 https://copixel.bytedance.com 交付前可以自己检查一下

[tricker1215]

我认为前端要兼顾考虑 ui 的还原程度问题和工时问题，工时长可以细节控，工时短的话确保颜色，字号对得上，定宽定高，不同 size 的屏幕兼容整体美观就可以了，做 b 端根本没必要对 ui 吹毛求疵，做 c 端的话 uiux 自然是好马要配好鞍。

[guguji5]

我们不是 UI 让改。是 UI 出了，前端还原了，老板继续改。说设计稿框框太多，空间太大

[tcper]

你这一看没啥经验，搞得好像自己还挺有责任感，还特别不招人待见。

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

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

不要和大原则做对，你所做的一切都是还原 UI 设计
让老板去做取舍，而不是你自己做取舍

[AokiNet]

@xiaoqidev #48 chrome 说是什么没有遵循最佳实践不让下载，不过看操作视频是有点意思，平常开发到处切屏看 ui 也挺麻烦

[loadin]

既然是前端，理应就按照 UI 的设计进行啊。 如果 UI 没有规则，那么就反馈这个问题。

[rabt]

楼主是前端吗，是的话菜就多练

[forschers]

UI 扣的细还不好么

[zsc8917zsc]

让 UI 用 figma ，直接生成样式，像素级还原

[calmlyman]

还原 UI 设计稿是应该的，但如果 UI 只出了一份稿却让我实现三个终端的适配，那我就得提刀了/doge

[xiaoqidev]

@AokiNet #52 以前装的没注意，很多插件不升 v3 都不让装了，找到另外一个链接，有需要可以手动下载安装一下 https://www.crxsoso.com/webstore/detail/iljifliapaimkofafkddpgkfkmnocajf

[ynxh]

都有 UI 了，你当公司出钱养人是在闹着玩呢？ 正视自己的问题，1:1 还原 UI 是前端的基本工作职责。

[w3]

@Tomfe 让他针对不同尺寸的屏幕都做一套设计方案

[rainsounds]

@Tomfe #13
UI 没给适配方案，你也没问，测试阶段 BUG 都指给你，优先级还特别高，那你肯定越改越不爽。

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

另外楼上说的组件化设计也非常对，对于字体、字号、边框这些和你们的 UI 库差异比较大的问题，多跟领导沟通改动所需要的工时，领导肯定还是以工时为重的。

[Marmot]

这是基本职责

[me1onsoda]

果然大部分前端是没有 100%还原设计稿的能力

[chairuosen]

所有数字，要么自动标注，要么让 UI 手动标注，开发按照标注来，只要跟标注一样就不是 BUG

[ltmst]

"分布不均匀，文字过大，输入框有点短 " 这些属于基本工作内容
就像测试跟你提出这个接口响应有点慢一样

[arron2022]

评估工作量的时候把这一块时间评估进去

[wyman222]

之前公司都是要求像素级对齐，迫于 UI 的压力，慢慢的对布局，控件，还有一些简单的设计都了属于心。而且养成了对事情较真的习惯，在我的个人感知里，我很感谢那时候的认真

[IanHo]

对着蓝湖的代码抄，也不至于出现这种小问题……

[duanxianze]

同为前端，我能理解你，本质并不是不愿意还原设计稿，而是某些 UI 水平太次，根本考虑不到例如屏幕尺寸，分辨率，不同的字体宽度大小粗细不一，图片放大缩小导致的比例不一等等适配的问题，就说和设计稿不一样，无法沟通

[jobscolin]

我觉得 UI 挺负责任的，我们的 UI 出个图，一套图一个边距，把我整崩溃了

[zepc007]

作为切图仔都做不到设计稿还原, 那还做个啥切图仔, 小项目做多了就容易产生这种错觉. 像素级验收人家是对自己负责, 你做不到那是你对自己不负责

[connection]

推动组件化设计可以一定解决这种问题。
但是我遇到的问题是 组件化后，设计仍然对组件化内容“微调”“特性调整”

[connection]

而且，有谁感受过，长迭代的前端项目人员遇到没有规范的设计人员的持续迭代的痛苦。

[dp]

...这不是基本要求吗

[ccraohng]

@connection 同感受，只能安慰自己世界是一个巨大的草台班子了😇 “设计得太烂不想花费太多的精力”

[CH122]

@lingyan223 这是正确的

[jydeng]

UI 这么做没问题，不过你要想办法减负。
包括但不限于：模块分级、建立设计标准、组件库、tailwind presets 等等

[dudubaba]

能理解，但难受。这是人家的工作，如果不较真那么对方的工作就没价值了。所以一般处理方式就是搞好关系，简单的改一改就算可以了。

[bello123]

同前端也经常与 ui 扯皮，一些问题确实存在只能改，一些问题不好实现就跟 ui 商量折中方案，ui 也不容易上面有领导压着

[irisdev]

@Tomfe 全干了，对于 ui 方面会比专业前端宽容点

[crysislinux]

设计工具和浏览器渲染方式都不一样，追求个屁的 100%还原。追求 100%直接挂图片得了。

[y4ZIZrCL74b9MYl6]

如果 UI 提供了设计稿，那么作为前端，按照设计稿精准实现，这算是基础能力

[terrysnake]

你（或者你的领导）要么就在设计稿定稿的那时候提出来前端实现很困难，或者有其他的想法。不能定了以后，说实现不了。本质上，这和改后端需求没什么两样。

[simo]

从 ie6 时代过来的，怎么抠细节都不觉得有麻烦了，还 css hack ，都妖精。

[gorvey]

还原设计稿是基本能力。
但是自己的还原能力，设计稿的质量，项目 UI 规范都会影响到写页面的痛苦程度

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

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

还有就是宽度的问题，按照我的经验最好是让 UI 出 1200 宽的设计稿比较方便适配小屏幕

[bitmin]

确定不是钓鱼吗，你这些个问题太大条了，如果是我老板，一眼看出 1px 不一致让你 1px 1px 的调

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

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

开发中我最怕的人就是啥都不说，闷头扑哧扑哧做，问有没有问题，都没问题，做完发现和目标相去甚远。问原因就是我认为，我以为，我觉的

[gorvey]

@crysislinux #81 用 figma 呗，直接生成组件了，100%还原

[geekfxxk]

正视 UI 问题，积极修改！

[learnshare]

所以说前端已经是另一个时代，pixel perfect 不是基本要求了吗？

如果能提供设计稿，为何不能要求 UI 实现更精细一些呢。
响应式的适配，如果已经明确要求了，那也是前端的工作内容之一。
对于质量不好的设计稿，或者实现有难度/工作量超标的任务，完全可以提出来。

[katwalk]

是你的活儿干的不行，还是 UI 设计师鸡蛋里挑骨头，你贴个对比图出来就一目了然了

[xzh654321]

@xiaoqidev 。。。chrome 插件不支持最佳实践已被暂停使用

[wangyzj]

如果设计图像素级别的数据都给了
那么照着做，做到一致是对的

[xu33]

用 ai 不就行了

[xuanbg]

你 100%按 UI 还原不就没事了？既然不一样被人找出来了，那就改啊。

[zcvvvbb]

@Tomfe 哈哈一模一样，我也是烦扣 ui 细节，也在转全栈

[tonytonychopper]

事先没有和 UI 对齐吧，不让走查的时候怎么会提这么多问题

[szyp]

我是后端，我们组没有 UX 、UI ，我看着前端自己按照产品的原型做的页面特别痛苦

[zgsi]

我是后端，我写前端非要扣到像素级别。所以我做不了全栈

[yunyuyuan]

干前端是这样的，有时遇到了设计稿太简陋了，一些报错或者警告的样式都没设计，使用项目里的组件，他们也给提 bug ，我一个切图仔还能说啥呢，堆屎呗

[chenyu0532]

像游戏客户端改 UI 更是频繁，我都是把示意图放编辑器里，30%透明度，对着一个个 UI 去调整