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

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

  •  1
     
  •   Ccxdcyl · 2020-07-16 16:11:57 +08:00 · 4386 次点击
    这是一个创建于 1573 天前的主题,其中的信息可能已经有所发展或是发生改变。
    急需一名 web 开发大佬解决疑惑。
    设计图按照 1920 做的,内容区域 1200.
    设计图上传到蓝湖,开发根据蓝湖标注。
    但是效果偏差很大,比方说设计图上导航栏高度用的 80px 。前端写出来后比视觉上看起来很高。但也是 80px 。
    第 1 条附言  ·  2020-07-17 14:10:15 +08:00
    粘贴了代码,各位帮忙看一下
    <body>
    <!-- 头部 -->
    <div class="head">
    <!-- 导航栏 -->
    <nav class="navbar navbar-default navigation1" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
    <span class="sr-only">切换导航</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="col-xs-7 col-xs-offset-2 navbar-brand logo" href="index.html"><img src="img/logo.png" class="img"></a>
    </div>
    <div class="collapse navbar-collapse " id="example-navbar-collapse">
    <ul class="nav navbar-nav navbar-right top-top ">
    <li class="navigation-li li"><a href="index.html">首页</a></li>
    <li class="navigation-li"><a href="news.html">新闻中心</a></li>
    <li class="navigation-li"><a href="about.html">关于我们</a></li>
    <li class="navigation-li"><a href="company.html">公司业务</a></li>
    <li class="navigation-li"><a href="market.html">市场动态</a></li>
    <li class="navigation-li"><a href="policy.html">政策法规</a></li>
    </ul></div>
    </div>
    </nav>
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
    <!-- 轮播( Carousel )指标 -->
    <ol class="carousel-indicators">
    <!-- <li v-for="var i=0;i<index.length-1;i++">
    <li data-target="#myCarousel" data-slide-to="this.i" v-for="(item,index) in chart" :key="index"></li>
    </li> -->
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class=""></li>
    <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
    </ol>
    <!-- 轮播( Carousel )项目 -->
    <div class="carousel-inner">
    <div class="item">
    <a class="item-a">
    <img src="img/index/1.jpg">
    <p class="item-p"></p>
    </a>
    39 条回复    2020-07-17 14:07:52 +08:00
    lxk11153
        1
    lxk11153  
       2020-07-16 16:19:32 +08:00
    来? d3gvcXE6IDQ0M+S9lTk3NOWNuDE1OQ==
    yaphets666
        2
    yaphets666  
       2020-07-16 16:24:43 +08:00
    蓝湖这东西我也感觉到了 标注的根本不准确 不成比例
    Ccxdcyl
        3
    Ccxdcyl  
    OP
       2020-07-16 16:26:19 +08:00
    @yaphets666 对照过尺寸,都是看 px 对比,跟设计图还是一致的。这是哪里出了问题呢
    liyang5945
        4
    liyang5945  
       2020-07-16 16:27:57 +08:00
    我猜是浏览器开了缩放模式,或系统开了缩放模式
    H15018327040
        5
    H15018327040  
       2020-07-16 16:29:21 +08:00
    我觉你可能放大了网页,在网页按 Ctrl+0 恢复默认大小
    vvong
        6
    vvong  
       2020-07-16 16:30:08 +08:00
    他的效果图是全屏的效果图 你的页面是你浏览器内可视区域的页面 中间隔个浏览器的工具栏、标签栏、windows 底部导航栏
    takemeaway
        7
    takemeaway  
       2020-07-16 16:30:58 +08:00
    想跟设计图一模一样? 那是不可能滴。

    首先浏览器色彩显示跟 PS 就不一样,其次浏览器里面间距都是有偏差的,每个浏览器都不一样。
    SakuraKuma
        8
    SakuraKuma  
       2020-07-16 16:33:14 +08:00
    你设计图确定 100%显示了嘛( 看起来高这肯定有毒.
    liuhuihao
        9
    liuhuihao  
       2020-07-16 16:42:56 +08:00
    虽说 真实效果和设计图可能会有一定的偏差,你就你描述的这个导航栏高度来讲是不可能出现肉眼可见的偏差的,一定是哪里有问题导致的
    Hoye
        10
    Hoye  
       2020-07-16 16:49:29 +08:00
    show code and img
    Ccxdcyl
        11
    Ccxdcyl  
    OP
       2020-07-16 17:10:56 +08:00
    细微的偏差肯定是都能接受,但现在是在网页中的效果,字号也不对、行高也不对
    web 前端按照 px 写,浏览器会根据浏览器窗口自适应么?
    其实我是设计,前端解决的方法是:设计图的行高是 80px,然后写出来后很高,然后跟我说要降低一点,我觉得问题不是这么解决的😂。但又不知道怎么跟他解释。
    Ccxdcyl
        12
    Ccxdcyl  
    OP
       2020-07-16 17:18:22 +08:00
    @Hoye 代码不太方便要,图片截图看一下,
    链接: https://pan.baidu.com/s/13NTujMKHYkY8vZv2Bp0ITg 提取码: c6sv
    zarte
        13
    zarte  
       2020-07-16 17:29:37 +08:00
    分辨率不一样
    Hoye
        14
    Hoye  
       2020-07-16 17:48:37 +08:00
    @Ccxdcyl 看起来像是 line-height 的问题,不过看不到代码不好说,你不用去要,你打开他的页面,按 f12,左上角有个箭头点一下,然后去页面选中哪个头部, 然后再 f12 弹出的框里面找到 elements->computed 滚动到最下面,有个方框再看看呢
    Kusoku
        15
    Kusoku  
       2020-07-16 17:50:15 +08:00
    你应该了解下 css 尺寸单位的区别,px 在不同的分辨率下的视觉效果肯定是有差别的,比如同样是固定 80px,低分辨率下看起来就会很大,而且本身视口高度会被别的部分压缩空间,比如书签栏搜索栏状态栏标签页等等
    miloooz
        16
    miloooz  
       2020-07-16 17:52:34 +08:00
    蓝湖你是有吧右下角调成 100%显示吗? 日常我们都是 50% 75% 显示,所以看起来比较小,但是把蓝湖右下角的页面比例调成 100%,就很大
    Ccxdcyl
        17
    Ccxdcyl  
    OP
       2020-07-16 17:52:53 +08:00
    @Kusoku 这个问题我考虑过,所以我也有问是不是不用 px,用 rem 之类的。
    wangritian
        18
    wangritian  
       2020-07-16 17:53:24 +08:00
    发个网址不好吗
    Hoye
        19
    Hoye  
       2020-07-16 17:53:52 +08:00
    还有感觉你的图片缩放了,啊哈哈~
    Ccxdcyl
        20
    Ccxdcyl  
    OP
       2020-07-16 17:58:51 +08:00
    @Hoye 没有找到😂,点完头部出现<nav class="navbar navbar-default navigation1" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
    <span class="sr-only">切换导航</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="col-xs-7 col-xs-offset-2 navbar-brand logo" href="index.html"><img src="img/logo.png" class="img"></a>
    </div>
    <div class="collapse navbar-collapse " id="example-navbar-collapse">
    <ul class="nav navbar-nav navbar-right top-top ">
    <li class="navigation-li li"><a href="index.html">首页</a></li>
    <li class="navigation-li"><a href="news.html">新闻中心</a></li>
    <li class="navigation-li"><a href="about.html">关于我们</a></li>
    <li class="navigation-li"><a href="company.html">公司业务</a></li>
    <li class="navigation-li"><a href="market.html">市场动态</a></li>
    <li class="navigation-li"><a href="policy.html">政策法规</a></li>
    </ul></div>
    </div>
    </nav>
    WellLee
        21
    WellLee  
       2020-07-16 18:17:25 +08:00   ❤️ 2
    想起有一个简单粗暴的方法做到高保真,就是生成一整张的 UI 图,调整一定的透明度后放预览效果最顶层,然后再对照一下有出入的细节
    rabbbit
        22
    rabbbit  
       2020-07-16 18:26:50 +08:00
    外包给我, 只要钱给够, 1px 都不差.
    zzl22100048
        23
    zzl22100048  
       2020-07-16 21:28:54 +08:00 via iPhone
    导航栏比你高轮播图比你矮啊
    TabGre
        24
    TabGre  
       2020-07-16 22:08:47 +08:00
    @WellLee 我刚开始还原设计稿的时候,就是这么搞的

    截图写好的页面,在 ps 中将一张图设置一定的透明度,然后对比。
    everyx
        25
    everyx  
       2020-07-16 22:11:00 +08:00
    应该是高分屏缩放的问题吧
    tikazyq
        26
    tikazyq  
       2020-07-16 22:17:16 +08:00
    用尺子量
    lynan
        27
    lynan  
       2020-07-16 22:28:02 +08:00
    在蓝湖上 比如两行文字 font-size: 14px; line-height: 24px; 蓝湖标注间隔是 8px 的话,那么实际的间隔是 (24 - 14) / 2 + 8 + (24 - 14) / 2 = 18px
    whisky221
        28
    whisky221  
       2020-07-16 22:36:28 +08:00
    害,最早也是受蓝图之苦,做出来的东西丑的一比
    后来我就纯品感觉做了,只要配色,间距“大致”相同,基本就可以,好看了很多
    weiqk
        29
    weiqk  
       2020-07-16 22:38:26 +08:00 via Android
    @WellLee 这方法值得推广
    ChanKc
        30
    ChanKc  
       2020-07-17 00:19:48 +08:00 via Android
    #15 应该是对的
    ppi 你知道吧,就是 pixels per inch,每英尺多少个像素
    如果用 px 的话,在同样大小的屏幕上,288ppi
    ChanKc
        31
    ChanKc  
       2020-07-17 00:21:06 +08:00 via Android
    #30 288ppi 的屏幕上的字会比 72ppi 的小很多
    px 的好处是文字相对图片的大小固定,因为图片大小都是 px 。除了这方面的考虑,一般都不推荐 px
    ccraohng
        32
    ccraohng  
       2020-07-17 08:22:23 +08:00
    楼上你让你使用浏览器的控制台左上角的 inspect, 我猜是代码有问题。
    sam014
        33
    sam014  
       2020-07-17 10:13:48 +08:00
    这个问题我碰到过,你光注意到可视宽度,你注意到可视高度了吗?

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

    我感觉这就是设计缺经验
    Ccxdcyl
        34
    Ccxdcyl  
    OP
       2020-07-17 10:58:43 +08:00
    @ccraohng
    @sam014
    你们俩的判断貌似有冲突。
    这个问题还没确定是什么具体原因,还有一个情况是,这个网站还要视频移动端。会有影响么?
    mikoshu
        35
    mikoshu  
       2020-07-17 11:22:43 +08:00
    你直接把设计稿放同一个浏览器上看看效果 然后在对比前端的页面 如果确实偏差大 那就是有问题
    ccyu220
        36
    ccyu220  
       2020-07-17 11:50:35 +08:00
    1 、只会蓝湖不会 photoshop
    2 、不知道盒子模型、视觉差和字体区别的
    以上都是菜逼前端,17 年后的普遍,而且还不少。
    justin2018
        37
    justin2018  
       2020-07-17 11:52:23 +08:00
    你倒是放设计图和代码呀~

    都是官网页面 有啥保密的?
    ccraohng
        38
    ccraohng  
       2020-07-17 12:23:41 +08:00
    @Ccxdcyl 楼上不指 n - 1 :)
    很简单, show code
    Ccxdcyl
        39
    Ccxdcyl  
    OP
       2020-07-17 14:07:52 +08:00
    @justin2018 跟保密没关啊,网页都没上线。在开发阶段还没进行完
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2951 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 14:54 · PVG 22:54 · LAX 06:54 · JFK 09:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.