收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 10276|回复: 52

[教程] 页面制作是如何精确还原设计稿的

[复制链接]
发表于 2009-3-20 13:33:13 | 显示全部楼层 |阅读模式
作为一名合格的页面重构者,其实基础能力项有一条:网页还原设计稿。

    你能做到页面与设计稿丝毫不差吗?

    有人可能会想,又不是造原子弹,哪能一像素不差啊?

    我想说: 细节真的很重要!细节决定成败,真可谓失之毫米差之千里,如果你是想打造一个精品项目真的有那么可怕。所以在前面啰嗦那么多是想大家多重视页面细节问题,真的要把页面当原子弹来做。这里分享一下我工作中的一点经验吧,请多多拍砖。

    第一步:打蛇打七寸——视觉规范

    有时候我们从设计师那里拿到的设计稿不一定是精确无误的,例如:同一类的模块标题文字,一个地方是13PX,另外一个地方是14PX;一个页面有多种字体颜色肉眼看起来一样却实际取到的色值不一样;每个段落的行高不一样;同一类型的弹出框多种尺寸;等等…… 这样的情况,我们不能为了还原设计稿而还原设计稿。

    为了减少与设计师沟通上的成本,重构师不得不督促设计师做前期整站的视觉规范,把一些公共能约定的内容以文档的形式写明,后期严格执行起来。

    设计师最好是在页面开始制作前定好视觉规范,这样可以大大减少页面制作后期联调的成本。另外页面制作可以对模板化的东西前期做统一的规范,如字体、ICON、边框、背景色、间距等做统一的class接口,等后期设计规范固定下来后有变动的地方调起来就很容易了。

    第二步:万事俱备,只欠东风——设计稿标注

      务必要求设计师在设计稿上对各种间距、宽度、特殊字体、特殊字色、特殊行高等等进行标注,这样在页面制作的时候不用去重新量取也大大加强了还原设计稿的准确度,更减少了与设计师的沟通成本和后期联调成本。如下样例:


    第三步:工欲善其事,必先利其器——网页标尺工具(FastStone Capture)

      航海用的指南针、医生用的体温计、木匠用的卷尺……很多职业都有它专用的测量仪器,那么我们在制作页面的时候势必也要测量间距、宽度、高度、颜色……等等数据,那么页面制作是不是也应该有一个专业的页面精确测量的工具呢?

   这里有一款可以精确测量网页的软件想分享给大家,软件名是FastStone Capture,记得是一同事去年推荐给我的,当时只是为了找一款可以截屏的小软件,而今我想找一款可以专门用来测量网页的软件的时候,想不到它还能排上用场——软件虽小,却五脏俱全。
   软件下载地址:http://www.topcss.cn/fscapture.7z
     注册:
         Name:BaMuYu
                code:IPYMW-IFDUG-ONHYW-WGVDX


       简单教程:
    1、打开测量工具
      
       点击控制面板最右边的图标,打开选择“屏幕尺”,会在屏幕上显示如下图的尺子、为了方便透视测量,可将尺子设置成透明或半透明:

   
    2、横向测量
       默认尺子是横放的,可以按键盘上、下、左、右键单像素移动尺子,鼠标点在尺子的刻度上,屏幕右上角会有一个放大镜显示测量的区域,拖动鼠标可以精确测量水平的长度。拖动尺子横向两边缘可将尺子任意拉长或缩短。

    3、垂直测量
       点击尺子上的如图的按钮图标可将尺子垂直:
       或双击尺子可将尺子垂直。
       垂直测量和横向测量的方法类似,这里就不重复说了。

    4、点对点测量
       点击尺子上的图标: ,屏幕右上角放大镜会显示线长度。
       用鼠标拖动从A点到B点的直线,测量两点间的距离。

    5、矩形测量
       可惜该软件没有三角板也没有圆规,难以测量矩形。别急,可以用其他方法代替,这里用到截屏功能。
       点击尺子上的图标 关闭尺子,返回软件控制面板,点第三个图标 (扑捉矩形区域):
       拖动鼠标测量想要测量的网页矩形模块吧,屏幕左(或右)上角的放大镜会显示w*h=值*值,w是宽度,h是高度。

    6、网页取色
       点击软件控制面板右边的图标: ,出现下拉框,选择“屏幕取色器”,出现吸管图标,移动吸管指示的坐标点击获取屏幕任一地方的颜色值。

      OK,简单教程到此结束,本想搞个视频演示的,但想想这个软件其实很简单很简单,如果有不明白的地方可以实际操作一下 ^_^
            
           如果严格做到以上设计师到重构师流程的三个步骤,页面还会有那么多页面还原设计稿的问题吗?

      实践证明,我在负责的新项目中这样的问题已经减少了很多了。


     难得我第一次在这里发帖子,大家顶顶哦!~~

        原文地址:http://www.topcss.cn/?p=102

[[i] 本帖最后由 karlen 于 2009-3-20 14:57 编辑 ]

评分

参与人数 1威望 +2 收起 理由
goos + 2 我很赞同

查看全部评分

发表于 2009-3-20 13:44:54 | 显示全部楼层
支持一下!!!
回复 支持 反对

使用道具 举报

发表于 2009-3-20 13:46:36 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2009-3-20 13:47:52 | 显示全部楼层
真的是好东西哦~~收下了,谢谢LZ分享
回复 支持 反对

使用道具 举报

发表于 2009-3-20 13:49:04 | 显示全部楼层
不错,顶
回复 支持 反对

使用道具 举报

发表于 2009-3-20 13:50:42 | 显示全部楼层
不错,很值得也推荐给自己TEAM里的设计师看看。。。
回复 支持 反对

使用道具 举报

发表于 2009-3-20 13:51:10 | 显示全部楼层
我顶……我顶……又学到一点点……
回复 支持 反对

使用道具 举报

发表于 2009-3-20 14:05:09 | 显示全部楼层
这工具不赖啊
回复 支持 反对

使用道具 举报

发表于 2009-3-20 14:15:04 | 显示全部楼层
小工具真不错
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-20 14:48:09 | 显示全部楼层
感动天、感动地、感动我,终于得了2点威望,谢谢版主!
回复 支持 反对

使用道具 举报

发表于 2009-3-20 14:52:16 | 显示全部楼层
测量现在fwcs4也自带测量工具了,也很方便
回复 支持 反对

使用道具 举报

发表于 2009-3-20 15:02:28 | 显示全部楼层
工具看起来很实用,顶~~谢谢分享!
回复 支持 反对

使用道具 举报

发表于 2009-3-20 15:09:50 | 显示全部楼层
不错;平时作图用PS,不过PS的标尺真的让人发疯啊!
回复 支持 反对

使用道具 举报

发表于 2009-3-25 14:22:24 | 显示全部楼层
再次支持下!
回复 支持 反对

使用道具 举报

发表于 2009-3-25 14:42:42 | 显示全部楼层
受益匪浅啊
回复 支持 反对

使用道具 举报

发表于 2009-3-25 15:08:35 | 显示全部楼层
还好我是自己出效果图自己出HTML页面
回复 支持 反对

使用道具 举报

发表于 2009-3-25 15:41:37 | 显示全部楼层
好东西~
回复 支持 反对

使用道具 举报

发表于 2009-3-27 10:21:17 | 显示全部楼层
工具很好用,谢谢LZ
回复 支持 反对

使用道具 举报

发表于 2009-3-27 10:23:36 | 显示全部楼层
好文章。收藏了。
回复 支持 反对

使用道具 举报

发表于 2009-3-27 10:34:59 | 显示全部楼层
下载出现乱码,有没有人能提供下测量工具的名字,谢谢!!!
回复 支持 反对

使用道具 举报

发表于 2009-4-6 15:02:05 | 显示全部楼层
“网页标尺工具(FastStone Capture)”
卡巴报“包含木马程序”,怎么回事呢?
回复 支持 反对

使用道具 举报

发表于 2009-4-6 16:25:23 | 显示全部楼层
很好 谢谢lz
回复 支持 反对

使用道具 举报

发表于 2009-4-7 14:56:31 | 显示全部楼层
工具不错,谢谢分享了
回复 支持 反对

使用道具 举报

发表于 2009-4-8 17:44:31 | 显示全部楼层
你好毒 avast报毒
回复 支持 反对

使用道具 举报

发表于 2009-4-8 18:14:15 | 显示全部楼层
不错,下载用了,挺方便的,谢谢楼主了
回复 支持 反对

使用道具 举报

发表于 2009-4-8 18:35:04 | 显示全部楼层
很专业的说,楼主是在哪弄到这么专业的软件的??
回复 支持 反对

使用道具 举报

发表于 2009-4-8 22:20:28 | 显示全部楼层
不建议使用D版软件
回复 支持 反对

使用道具 举报

发表于 2009-4-9 09:43:23 | 显示全部楼层
一般都是自己画效果图,自己写DIV。
回复 支持 反对

使用道具 举报

发表于 2009-4-9 10:01:10 | 显示全部楼层
好东西已经收下了
回复 支持 反对

使用道具 举报

发表于 2009-4-9 11:01:14 | 显示全部楼层
不错不错,这个工具很好用,感谢楼主分享
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-23 07:57 , Processed in 0.140271 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表