未分類
21 7 月 2020

怎么解决 web 前端开发与设计图的偏差？

怎么解决 web 前端开发与设计图的偏差？

資深大佬 : Ccxdcyl 7

急需一名 web 开发大佬解决疑惑。
设计图按照 1920 做的，内容区域 1200.
设计图上传到蓝湖，开发根据蓝湖标注。
但是效果偏差很大，比方说设计图上导航栏高度用的 80px 。前端写出来后比视觉上看起来很高。但也是 80px 。
大佬有話說 (39)

  • 資深大佬 : lxk11153

    来? d3gvcXE6IDQ0M+S9lTk3NOWNuDE1OQ==

  • 資深大佬 : yaphets666

    蓝湖这东西我也感觉到了 标注的根本不准确 不成比例

  • 主 資深大佬 : Ccxdcyl

    @yaphets666 对照过尺寸，都是看 px 对比，跟设计图还是一致的。这是哪里出了问题呢

  • 資深大佬 : liyang5945

    我猜是浏览器开了缩放模式，或系统开了缩放模式

  • 資深大佬 : H15018327040

    我觉你可能放大了网页，在网页按 Ctrl+0 恢复默认大小

  • 資深大佬 : vvong

    他的效果图是全屏的效果图 你的页面是你浏览器内可视区域的页面 中间隔个浏览器的工具栏、标签栏、windows 底部导航栏

  • 資深大佬 : takemeaway

    想跟设计图一模一样？ 那是不可能滴。

    首先浏览器色彩显示跟 PS 就不一样，其次浏览器里面间距都是有偏差的，每个浏览器都不一样。

  • 資深大佬 : SakuraKuma

    你设计图确定 100%显示了嘛( 看起来高这肯定有毒.

  • 資深大佬 : liuhuihao

    虽说 真实效果和设计图可能会有一定的偏差，你就你描述的这个导航栏高度来讲是不可能出现肉眼可见的偏差的，一定是哪里有问题导致的

  • 資深大佬 : Hoye

    show code and img

  • 主 資深大佬 : Ccxdcyl

    细微的偏差肯定是都能接受，但现在是在网页中的效果，字号也不对、行高也不对
    web 前端按照 px 写，浏览器会根据浏览器窗口自适应么？
    其实我是设计，前端解决的方法是：设计图的行高是 80px，然后写出来后很高，然后跟我说要降低一点，我觉得问题不是这么解决的

  • 主 資深大佬 : Ccxdcyl

    @Hoye 代码不太方便要，图片截图看一下，
    链接: https://pan.baidu.com/s/13NTujMKHYkY8vZv2Bp0ITg 提取码: c6sv

  • 資深大佬 : zarte

    分辨率不一样

  • 資深大佬 : Hoye

    @Ccxdcyl 看起来像是 line-height 的问题，不过看不到代码不好说，你不用去要，你打开他的页面，按 f12，左上角有个箭头点一下，然后去页面选中哪个头部， 然后再 f12 弹出的框里面找到 elements->computed 滚动到最下面，有个方框再看看呢

  • 資深大佬 : Kusoku

    你应该了解下 css 尺寸单位的区别，px 在不同的分辨率下的视觉效果肯定是有差别的，比如同样是固定 80px，低分辨率下看起来就会很大，而且本身视口高度会被别的部分压缩空间，比如书签栏搜索栏状态栏标签页等等

  • 資深大佬 : zmlq7

    蓝湖你是有吧右下角调成 100%显示吗？ 日常我们都是 50% 75% 显示，所以看起来比较小，但是把蓝湖右下角的页面比例调成 100%，就很大

  • 主 資深大佬 : Ccxdcyl

    @Kusoku 这个问题我考虑过，所以我也有问是不是不用 px，用 rem 之类的。

  • 資深大佬 : wangritian

    发个网址不好吗

  • 資深大佬 : Hoye

    还有感觉你的图片缩放了，啊哈哈~

  • 主 資深大佬 : Ccxdcyl

    @Hoye 没有找到

  • 資深大佬 : WellLee

    想起有一个简单粗暴的方法做到高保真，就是生成一整张的 UI 图，调整一定的透明度后放预览效果最顶层，然后再对照一下有出入的细节

  • 資深大佬 : rabbbit

    外包给我, 只要钱给够, 1px 都不差.

  • 資深大佬 : zzl22100048

    导航栏比你高轮播图比你矮啊

  • 資深大佬 : TabGre

    @WellLee 我刚开始还原设计稿的时候，就是这么搞的

    截图写好的页面，在 ps 中将一张图设置一定的透明度，然后对比。

  • 資深大佬 : everyx

    应该是高分屏缩放的问题吧

  • 資深大佬 : tikazyq

    用尺子量

  • 資深大佬 : lynan

    在蓝湖上 比如两行文字 font-size: 14px; line-height: 24px; 蓝湖标注间隔是 8px 的话，那么实际的间隔是 (24 – 14) / 2 + 8 + (24 – 14) / 2 = 18px

  • 資深大佬 : whisky221

    害，最早也是受蓝图之苦，做出来的东西丑的一比
    后来我就纯品感觉做了，只要配色，间距“大致”相同，基本就可以，好看了很多

  • 資深大佬 : weiqk

    @WellLee 这方法值得推广

  • 資深大佬 : ChanKc

    #15 应该是对的
    ppi 你知道吧，就是 pixels per inch，每英尺多少个像素
    如果用 px 的话，在同样大小的屏幕上，288ppi

  • 資深大佬 : ChanKc

    #30 288ppi 的屏幕上的字会比 72ppi 的小很多
    px 的好处是文字相对图片的大小固定，因为图片大小都是 px 。除了这方面的考虑，一般都不推荐 px

  • 資深大佬 : ccraohng

    上你让你使用浏览器的控制台左上角的 inspect， 我猜是代码有问题。

  • 資深大佬 : sam014

    这个问题我碰到过，你光注意到可视宽度，你注意到可视高度了吗？

    我猜你肯定偏设计一点，需要注意首屏可视高度啊，

    我感觉这就是设计缺经验

  • 主 資深大佬 : Ccxdcyl

    @ccraohng
    @sam014
    你们俩的判断貌似有冲突。
    这个问题还没确定是什么具体原因，还有一个情况是，这个网站还要视频移动端。会有影响么？

  • 資深大佬 : mikoshu

    你直接把设计稿放同一个浏览器上看看效果 然后在对比前端的页面 如果确实偏差大 那就是有问题

  • 資深大佬 : ccyu220

    1 、只会蓝湖不会 photoshop
    2 、不知道盒子模型、视觉差和字体区别的
    以上都是菜逼前端，17 年后的普遍，而且还不少。

  • 資深大佬 : justin2018

    你倒是放设计图和代码呀~

    都是官网页面 有啥保密的？

  • 資深大佬 : ccraohng

    @Ccxdcyl 上不指 n – 1 🙂
    很简单, show code

  • 主 資深大佬 : Ccxdcyl

    @justin2018 跟保密没关啊，网页都没上线。在开发阶段还没进行完