解决这13个问题,可以实现99.9%的设计稿还原

首先从题目来说,为什么不是100%设计稿还原?其实100%是一个理想的状态,有很大一部分设计师是不懂“页面重构”的,很多时候设计师在做设计的时候,会着重考虑视觉因素,实现成本考虑的不会特别仔细。面对这些设计细节,浏览器兼容、开发周期、后台数据循环因素等等都会影响到设计稿的还原效果,我们能做的就是尽可能的还原设计稿,无限接近100%还原,而不是追求100%的还原效果。可能有些人会不服,我就要100%还原,那么OK,ps中和浏览器中相同字体显示效果不一样,你怎么办?难道文字也全切成图吗?所以在大部分“页面重构”的时候,最负责任的做法是,在考虑易用性、合理性的前提下尽可能的实现设计稿99.9%的还原。

重构的工作并不是前端工程师一个人的工作,还要包含与设计师、后台工程师(php等)以及产品之间的沟通,中间很可能会涉及到设计图的修改。

下边从几个方面聊聊页面重构中的一些问题:

1,页面宽度问题

主要内容部分,目前主要的分辨率一般都在960以上:960、1000、1200等,这些都属于正常的尺寸,但也有设计师做出类似973、1011等奇葩尺寸… 这个问题我不太好意思拿出来聊,太低级了。当然,奇葩的单数行高、相同元素不同大小等等这都是属于相似问题。

2,毛边问题

一个方方正正的按钮,带着一圈毛边。这个问题也是在重构中经常看到的事情,虽然这个在写页面的时候可以很轻易的避开这个问题,但是不是看着很不爽?看下图:

解决这13个问题,可以实现99.9%的设计稿还原

正常边给人的感觉整齐干净,毛边显得边缘模糊不清,并且容易造成按钮高度不明确。假如是半透明按钮需要切图的时候,还会造成图片体积变大,所以这个问题应当避免。

3,图层模式

有些设计图中,某个元素例如某个按钮,需要切png半透明图片,但是这个按钮居然跟背景图是正片叠底或者颜色叠加。每当我遇到这个问题的时候会有一股想自杀的冲动,所以为了世界和平,这个问题一定要避免。

4,图层链接

页面重构的某些时候需要选择某些图层进行移动,结果一动发现坏了,好多其它的元素跟着刷刷移动,瞬间感觉无力,默默的一个个取消图层链接。不需要的图层链接,能取消就取消吧。

5,某些图片的尺寸

例如在某些列表中,缩略图的尺寸,经常会遇到119*73等等奇怪的尺寸。其实这种最好是用整数:120*80等,对页面的栅格化、响应式以及后台裁图存图等都有很大的好处。

6,图层命名和文件夹

这个其实跟题目关系不大,但这里要提一下。举个例子:

解决这13个问题,可以实现99.9%的设计稿还原

你喜欢哪个?不用说了吧…

7,奇葩的边距和填充

同等级的模块,从视觉及内容上都属于同一类型,但上下边距一个20px一个27px,左右填充一个10px一个7px,这种问题跟“1.页面宽度问题”类似,都属于低等级问题。

8,需要运营的文字内容使用特殊字体

这个请google一下网络安全字体,中文的安全字体少的可怜,放过非设计师的页面使用者吧。

9,不做极限设计

假如要设计一个按钮,放在某个比较小的模块里,那么请考虑一下按钮包含的字数最长的情况下是怎样的。再比如一个类似微博名片的东西的简介,设计图中做了30个字,那么请考虑下100个字的情况。假如需要做截字,请规定多少字或者几行字开始截,不要让前端去猜。

以上问题都是设计师经常遇到的一部分问题,并不是全部,下边说说前端这边的。

1,用辅助线说话而不是自己猜测

很多前端自诩像素眼,一眼就知道某个模块的边距是多少,字体有多大。这个一般问题不大,但有些时候差一两个像素你不一定看的出来。凡是涉及到尺寸问题,一律辅助线。

2,css3圆角还是切图圆角?css3投影还是切图投影?

在遇到这种纠结的时候,请联系设计师以及产品经理,讲明两种方式的优劣,这个问题可延展到其它类似css3实现效果的问题。

3,各种宽度写死,各种切大图啪啪啪

前者会导致,只要编辑或者数据与设计图中的不一样,你的页面效果就完全“不一样”了,做页面重构怎么算优秀?最大程度的模块化、最大程度的模块可移植性、最大程度的自适应性、各种极限情况的考虑。也就是你考虑的情况越多,自适应性越强,你的代码越健壮。

后者会导致啥?后台或者编辑拿着刀子捅你…

4,字体问题

假如一段需要后期编辑或者拿数据的文字内容,设计图里是一个特殊字体,例如:“方正兰亭西黑”,你自己电脑上也有,然后你直接在css样式里用了这个字体… 会有啥结果不用多说了。遇到这种情况最重要的是需要跟设计商议,替换成安全字体,例如:微软雅黑、宋体、黑体、Arial等,假如设计死活不同意,讲道理!再不同意,叫上产品经理一起讲这个问题。

同样,以上问题也只是众多问题中的一小部分,以后想到的话也会逐渐补充进去。解决各种问题最好的办法是:多沟通。

「那些优秀设计作品背后的故事」

《月熊志》:国际顶尖作品!《月熊志》公益主题网站背后的设计故事

Medium:LOGO改版实战!聊聊MEDIUM 2.0新LOGO背后的设计故事

QQ音乐巅峰榜:字体设计实战!QQ音乐巅峰榜诞生记

原文地址:ued.qq

解决这13个问题,可以实现99.9%的设计稿还原

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量130万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

收藏 21
点赞 1

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。