设计图与最后上线的界面的差距究竟在哪里

鉴于大多数时候设计师的效果图和程序最终运行的程序之间的差距比较大，开发工程师的确是按照效果图来写代码，但是最终出现的页面和效果图相差巨大。在这个问题上设计师和开发工程师都没有错，大家都付出了辛苦的努力，根本原因还是开发工程师对设计图的理解不够透彻，设计师对开发的工具软件也不能足够的理解。现在将我们总结的问题总结为开发工程师要理解的问题和设计师们必须要做到的问题

一、单位

字号是组成页面美观的重要因素之一，写代码的工具软件中字号的单位一般为sp、dp等单位。设计师在ps或者sketch的设计软件中字号间距一般以px为单位，两个单位之间根据不同的屏幕分辨有不同换算的公式。例如1920*1080的页面中3px=1dp，设计师的效果图中标题给了54px在开发工具中再给文字54，就变成了54dp，文字就会变得非常大。网页开发工具中有一部分与ps或者sketch的单位相同，app和应用程序开发工具中的单位有不一部分不同。

因为计算的过程比较复杂，人工计算浪费时间，所以设计师借助了标注网站自动计算，标注网站可以直接将效果图中字号还有文字之间的间距从px换算成dp或者sp。程序开发的工具不尽相同，每次开始写代码之前，请首先了解清楚该开发工具中对于字号，间距的单位是什么，与设计师的效果图中字号间距单位px如何换算，了解清楚以后按照设计师给的效果图中标注的字号换算以后写代码。

二、字体

开发工具中有默认的字体，不单独设置基本上会让所有的字体都根据默字体设计，默认字体可能与设计师所用的字体相同或者高度相似，但是大部分时候是完全不会相同的。设计是一个整体的过程，设计师在设计效果图中，选择的字体、是与整体效果匹配的，如果强行替换掉风格差异很大的字体，就会影响最终的效果，请开发工程师按照效果图所用字体修改默认字体，如果遇到开发工具完全不能自定义字体的开发工具，请与设计师沟通协商解决。

三、颜色

颜色的敏感度不一样，各种显示设备造成的偏色，会导致看到的颜色有偏差，可能存在设计师在自己的电脑上看到的颜色非常正常，但换了显示设备以后，颜色偏差较大，不管因为主观原因觉得颜色不好看，还是因为客观原因造成了偏色，但是颜色的色值是固定，在色值中，颜色的色相，明度、纯度都包含，请开发工程师严格按照色值写代码，如果对颜色有疑问，可以直接与设计师沟通。

四、间距

设计有四个原则：对齐、对比、重复、亲密性，其中对齐、对比、亲密性都说明了间距的重要性，标题、内容一、内容二，标题与内容一和内容二所保持的距离一定是大于内容一与内容二保持的距离，如果标题与内容一和内容二保持的距离一致，这里就不符合设计中的亲密性原则，影响美观。标题与内容一距离比内容一与内容二的距离还要近，更加影响美观。间距是目前整理的网页开发和app开发中存最为严重的问题，字间距、行间距、内容边距、内容间距完全不符合效果图的规范，所有的间距没遵从应该遵守的规则，页面没有逻辑没有重点，整体混乱。

 

五、字体加粗

在网页设计和app设计中，字体加粗一般只在标题上使用，内容上用到的时候比较少，可能在新闻页面中这个表现的更加明显。这里要着重说明的是字体加粗与字号增加，字体颜色加深比较容易混淆，两者之间有区别。如果开发工程师不能区分，可以直接询问设计师。

六、透明度

对于网页或者是app中某一个文字、图片、标题、按钮降低透明度，使用率较低，但是也是一个值得注意的事项，设计师在效果图中使用以后，开发工程师并不能准确的估计出透明度，标注网站上有详细的介绍。

七、内容

效果图中的标题、文字内容是经过产品经理反复推敲以后确定的，如果开发工程师不认同请与产品经理直接沟通调整，不要自己调整。如果开发工程师按照自己的喜好随意调整标题的内容，按钮的内容就会影响整体布局。有时候开发会说我有一个非常好的建议，我想把这里改改，设计师想着好像也可以，然后就让改了，但是这一下就放开了权限，开发就开始自己默默的改了这里再改那里。

八、图标

设计师选用的图标都是遵循统一原则，按照界面整体风格和表现出来感觉，有轻松活泼、科技严谨，图标的表现方式，设计方式也会有不同。画出来的图标保持整体的统一性，从视觉上分，有尖角、圆角，线性和块状的区别，类型上有拟物化图标，和扁平化图标。但是开发工程师们全是在各种网站上找的图标，找的他们自己觉得非常好看的图标（其实就是觉得方便简单，可以直接用的代码）伟大的工程师们，我们的目标是做出超出用户期待，让用户觉得惊叹的产品，其中我们可以做到的不仅仅是开发出炫酷的功能，还有美观的界面。

1.     最终的开发效果图完成时，开发工程师、产品经理、设计师一起梳理清楚所有页面包含的功能和如何跳转，清楚逻辑流程和每一个页面的功能分布。此时可以提出自己对于操作过程和页面设计中的问题，或者在开发过程中提出自己的问题。包括使用何种开发工具实现效果图，可能存在的问题，请在这一阶段全部提出，可以避免浪费开发工程师的时间。但是不要按照自己的想法擅自修改，觉得有疑问，自己觉得不太正常的地方及时与设计师和产品经理进行沟通。

2.     平台或app开发中需要用到的切图，请在写代码之前先计划好，思考清楚需要的图片，与设计师沟通。按照自己规划的顺序一个页面一个页面的写代码，比如说资源平台，计划是第一步完成首页的开发、第二步完成直播页面的开发，第三步是同步课堂开发，按照顺序，设计师会先给首页切图，然后是直播页面，然后是同步课堂页面。因为任务优先级调整请及时通知，按照计划流程进行，不要随心所欲调整。调整的结果会造成开发工程师在开发当前页面时没有相对应的切图，找其他图片代替，后续替换浪费时间，而且容易替换漏掉，并且影响整体效果。

色彩介绍

色相是指能够比较具象地表示某种颜色色别的名称。如玫瑰红、桔黄、柠檬黄、钴蓝、群青、翠绿等等。通常纯度用来表现色彩的鲜艳和深浅。纯度是深色、浅色等色彩鲜艳度的判断标准。纯度最高的色彩就是原色，随着纯度的降低，色彩就会变的暗、淡。纯度降到最低就是失去色相，变为无彩色，也就是黑色、白色和灰色。明度：是指色彩的亮度或明度。颜色有深浅、明暗的变化。比如，深黄、中黄、淡黄、柠檬黄等黄颜色在明度上就不一样，紫红、深红、玫瑰红、大红、朱红、桔红等红颜色在亮度上也不尽相同。这些颜色在明暗、深浅上的不同变化，也就是色彩的又一重要特征。