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

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

2016/07/01 7465评论区

fix-13-issus-restore-design-1

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

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

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

1,页面宽度问题

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

2,毛边问题

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

bt20160701 (1)

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

3,图层模式

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

4,图层链接

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

5,某些图片的尺寸

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

6,图层命名和文件夹

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

bt20160701 (2)

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

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

yestone-uisdc-2

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.sh-liangmao.cn/fix-13-issus-restore-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

UI sketch 转场动效 界面设计 设计师 交互设计师 扁平化设计 平面设计 排版布局 职场 设计师专访 素材下载 设计流程 视觉设计 配色 用户体验设计 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里