平面设计 发布日期:2024/9/8 浏览次数:1
首先从题目来说,为什么不是100%设计稿还原?其实100%是一个理想的状态,有很大一部分设计师是不懂“页面重构”的,很多时候设计师在做设计的时候,会着重考虑视觉因素,实现成本考虑的不会特别仔细。面对这些设计细节,浏览器兼容、开发周期、后台数据循环因素等等都会影响到设计稿的还原效果,我们能做的就是尽可能的还原设计稿,无限接近100%还原,而不是追求100%的还原效果。可能有些人会不服,我就要100%还原,那么OK,ps中和浏览器中相同字体显示效果不一样,你怎么办?难道文字也全切成图吗?所以在大部分“页面重构”的时候,最负责任的做法是,在考虑易用性、合理性的前提下尽可能的实现设计稿99.9%的还原。
重构的工作并不是前端工程师一个人的工作,还要包含与设计师、后台工程师(php等)以及产品之间的沟通,中间很可能会涉及到设计图的修改。
下边从几个方面聊聊页面重构中的一些问题:
1,页面宽度问题
主要内容部分,目前主要的分辨率一般都在960以上:960、1000、1200等,这些都属于正常的尺寸,但也有设计师做出类似973、1011等奇葩尺寸… 这个问题我不太好意思拿出来聊,太低级了。当然,奇葩的单数行高、相同元素不同大小等等这都是属于相似问题。
2,毛边问题
一个方方正正的按钮,带着一圈毛边。这个问题也是在重构中经常看到的事情,虽然这个在写页面的时候可以很轻易的避开这个问题,但是不是看着很不爽?看下图:
正常边给人的感觉整齐干净,毛边显得边缘模糊不清,并且容易造成按钮高度不明确。假如是半透明按钮需要切图的时候,还会造成图片体积变大,所以这个问题应当避免。
3,图层模式
有些设计图中,某个元素例如某个按钮,需要切png半透明图片,但是这个按钮居然跟背景图是正片叠底或者颜色叠加。每当我遇到这个问题的时候会有一股想自杀的冲动,所以为了世界和平,这个问题一定要避免。
4,图层链接
页面重构的某些时候需要选择某些图层进行移动,结果一动发现坏了,好多其它的元素跟着刷刷移动,瞬间感觉无力,默默的一个个取消图层链接。不需要的图层链接,能取消就取消吧。
5,某些图片的尺寸
例如在某些列表中,缩略图的尺寸,经常会遇到119*73等等奇怪的尺寸。其实这种最好是用整数:120*80等,对页面的栅格化、响应式以及后台裁图存图等都有很大的好处。
6,图层命名和文件夹
这个其实跟题目关系不大,但这里要提一下。举个例子:
你喜欢哪个?不用说了吧…
7,奇葩的边距和填充
同等级的模块,从视觉及内容上都属于同一类型,但上下边距一个20px一个27px,左右填充一个10px一个7px,这种问题跟“1.页面宽度问题”类似,都属于低等级问题。
8,需要运营的文字内容使用特殊字体
这个请google一下网络安全字体,中文的安全字体少的可怜,放过非设计师的页面使用者吧。
9,不做极限设计
假如要设计一个按钮,放在某个比较小的模块里,那么请考虑一下按钮包含的字数最长的情况下是怎样的。再比如一个类似微博名片的东西的简介,设计图中做了30个字,那么请考虑下100个字的情况。假如需要做截字,请规定多少字或者几行字开始截,不要让前端去猜。
以上问题都是设计师经常遇到的一部分问题,并不是全部,下边说说前端这边的。
1,用辅助线说话而不是自己猜测
很多前端自诩像素眼,一眼就知道某个模块的边距是多少,字体有多大。这个一般问题不大,但有些时候差一两个像素你不一定看的出来。凡是涉及到尺寸问题,一律辅助线。
2,css3圆角还是切图圆角?css3投影还是切图投影?
在遇到这种纠结的时候,请联系设计师以及产品经理,讲明两种方式的优劣,这个问题可延展到其它类似css3实现效果的问题。
3,各种宽度写死,各种切大图啪啪啪
前者会导致,只要编辑或者数据与设计图中的不一样,你的页面效果就完全“不一样”了,做页面重构怎么算优秀?最大程度的模块化、最大程度的模块可移植性、最大程度的自适应性、各种极限情况的考虑。也就是你考虑的情况越多,自适应性越强,你的代码越健壮。
后者会导致啥?后台或者编辑拿着刀子捅你…
4,字体问题
假如一段需要后期编辑或者拿数据的文字内容,设计图里是一个特殊字体,例如:“方正兰亭西黑”,你自己电脑上也有,然后你直接在css样式里用了这个字体… 会有啥结果不用多说了。遇到这种情况最重要的是需要跟设计商议,替换成安全字体,例如:微软雅黑、宋体、黑体、Arial等,假如设计死活不同意,讲道理!再不同意,叫上产品经理一起讲这个问题。
同样,以上问题也只是众多问题中的一小部分,以后想到的话也会逐渐补充进去。解决各种问题最好的办法是:多沟通。