从设计稿到demo

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从设计稿到demo相关的知识,希望对你有一定的参考价值。

前言


先省略产品设计师的wireframe和mockup,为什么线框图和视觉设计稿不在叙述范围内,由于这里要做的是网页重构,从接收设计师的PSD那一刻開始:


一、接到设计稿

1、接收到PSD后。不要着急立刻切片,要写出符合语义、扩展性好、节点数少的Xhtml,是要花上非常多时间去斟酌和思考的。假设还要考虑整站样式优化和模块组件化的话,预计半天时间又过去了,等要写CSS时候,预计又快下班了…


在分析设计稿、切图和XHTML、CSS编写之前。另一件事情极其重要。那就是网站文件夹结构和资源文件的分布。千万不要蒙着头脑就PS、DW里自娱自乐!

一定要向相关负责人问清楚。各项目目的录结构和文件分布怎么处理,相互关系怎样!


分享一下近期工作中出现过的状况,警示下自己和同行在以后工作中须要注意哪些。公司全部专题模板重构。一百多个专题模块。噼里啪啦两个星期重构完,FTP到server,给编辑大概写了使用文档。后来由于网站文件夹和文件结构没约定好,须要调整,就開始挪文件、调文件夹、删server文件又一次FTP…一个无比郁闷的下午就这么过去鸟…


所以…接下来第二步…


二、分析设计稿

2、開始分析设计稿。PS里Ctrl+1,从头至尾。又从尾到头,四面八方,细致看设计稿。要比看Graphis系列图片还要认真。而且还要想:

  • 页面有哪些模块和框架?
  • 页面公共部分有哪些?
  • 页面重用结构和样式有哪些,有哪些须要派生和重写?
  • 标题、正文、链接…等字体、大小和颜色怎样处理?
  • 怎样统一界面元素?
  • 此处用ul还是dl?
  • 图片哪些是jpg格式。哪些是gif,哪些是png格式。宽高取整…
  • 小图标是否须要css sprite?
  • 圆的、方的、三角…的几何图形能否够用border实现?
  • 第一个列表和最后一个列表大概怎么处理?
  • 单位取值是否考虑黄金切割比?(坏笑ing)
  • 考虑页面扩展性、复用性及页面性能…
  • …(想到的没想到的都要想)…

时间过的好快…伤不起,不想那么多了,開始切图吧…


PS:PS 编辑-首选项-性能 里调节内存大小、暂存盘和使用图形处理器。工作起来更顺手…


三、切图设计稿

3、经过“怎么切、从哪切”后。总算把图片切完了。Alt+Shift+Ctrl+S中设置不同格式总算是导出图片了,归拣到不同文件夹里,開始编写XHTML和CSS,


四、还原设计稿

4、经过上面那一阵狂风骤雨般胡思乱想和精细到1px的切片后,接下来的工作须要:

还原设计稿的视觉效果,兼容各家浏览器和其马甲;

标签语义化,差别一下:<div class="title">我是标题</div><h3>我是标题</h3>,尽搞div不如无div!

优雅简洁的实现。尽量避免冗杂臃肿;

多重继承时,考虑后期维护是否须要修改HTML结构?尽量避免结构修改;

差点儿相同通过标准验证(块级元素和行内元素特殊情况下相互嵌套难以通过W3C验证能够理解)

除了类似 .last{margin-right:0!important;}之外,一个项目下来真的不须要用!important * 和 _ 。

完事之后。本着“高内聚低耦合”的精神,尽可能的去分离、整合结构和样式。


五、后话

5、上面都做完了,好了吧?还没好!问题是一个潜伏者。也许会暴露出来被发现,也许一直藏匿着。这是一场没有硝烟的战争,我们要时刻准备着。


说这么多都是在一个比較理想的环境和团队里工作。现实是残酷的;

如自身技术能力和承受工作强度的毅力;

如负责人的重视程度,如设计师不具备模块化的思想。项目须要Grid System却不了解Grid System,不严格精确的控制,比較任意多样的公用元素,1px的差错。psd文件不规范、分组不清晰,做网页重构和前端的,就可能是一边DW里敲样式。一边PS里无限放大设计稿量间距或提颜色。毕竟重构或前端的人margin、padding多1px,页面都会乱版…

我个人眼下还没有遇到和程序的问题。他们事儿太多。我做的他们还没嵌套到项目里,预计会存在套错地方和最后视觉实现的问题(这是前年写的总结。如今补充:没出现多大问题和程序交接,倒是有时产品规划上有问题,好多东西是改了又改,最后有的就搁浅没用着);当然还有其它人的不理解,不就是做个页面吗?怎么这么慢?还有页面重构的地位感和薪水都比較低…这些都会影响到你的工作激情、质量和效率,所以工作不是一蹴而就的,团队全部成员各有各的优势。多包容。多沟通,同一时候保持较高的工作热情和信心。相信可以解决一些问题。






















以上是关于从设计稿到demo的主要内容,如果未能解决你的问题,请参考以下文章

Assistor PS切图

任务七:实现常见的技术产品官网的页面结构及样式布局

浅谈下页面中字体设置(font-family)和粗细(font-weight)问题

流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)

设计模式-工厂方法(Demo)

干货分享 | 创业公司绝对不会告诉你他们在用的工具们