这一系列文章都是笔者初次承担网站项目的总结报告，其中的想法绝对不适用经验丰富的设计师和F2E。
线框图
作为F2E,当我们（虽然这篇文章的输出文档理应是设计师完成，但是通常小团队里，设计师和前端往往是一个人）与产品经理探讨完网站层次结构和呈现内容后，就要开始绘制粗糙的线框图。
线框图是最初产品定位的一个文档，通常可以使用铅笔直接绘制在白纸上，能够表达出对网站结构和内容清晰认识，以及网站内的交互逻辑。
与此同时，网络上也有很多能够实时共享的原型稿（精致的线框图也可以认为是原型稿了）设计工具，可以帮助F2E 在web网页上轻松完成线框图的绘制工作，也可能得到一个共享链接，方便团队内其他成员对你的初期构思给出建议。
网上摘取的线框图
笔者的线框图实在是太糟糕了，所以从网络上摘取一张比较精致的线框图。从这张图里大致能看出网页内容的布局结构和大部分交互逻辑
设计稿
粗糙的线框图完成后，就可以开始设计稿了。
笔者认为设计稿阶段，输出的最重要的是网页静态样式，这是网页最初呈现给访问站点人的样式。所以，团队拥有一个逼格满满的设计师小伙伴是非常重要的，不然只能让F2E(这里指笔者)这样在设计和代码边缘的来成为设计师，虽然团队省钱，但设计时肯定各种心塞！除了网页设计稿（其中包含各种标注和切图文件，这都属于输出文档）外，还要记录下布局中各级标题，文本，链接，图片文字等部分的字体和字号。当然，以及总体网站使用的配色方案都要记录下来，这是设计稿附加的输出文档。
参数标注笔者建议使用像素厨房这类工具来完成，因为笔者使用PS做设计稿时，各种比例，间距参数都是在反复调整后才得出的，而PS内的参考线数据必须使用查看工具才能知道，而这种方式远不如使用像素厨房这类标注工具高效。
还有，在切图时应该也可以获得各种尺寸，间距的数据，由于笔者的网站没有做切图，故此，没有太多好的建议。
免费的商业主题 PSD from 365.com
这是一款来自365.com的免费商业主题，读者可以从这个网站获得psd的文件。
仿真稿
提到仿真稿，其实一般小型的网站都是不需要这个仿真稿的。因为网站不大，所以其中的交互也就不会很复杂。但是，这个仿真稿也同样很有用，并且仿真精度越高，越能模拟网站最终上线时的样子，这在后期开发中同样可以避免很多问题，因为仅仅依靠设计稿的静态文件，在后期开发中再一步步思考添加交互，这可是是一件很辛（ku）苦(bi)的事。而且，如果F2E们要实时向项目主管汇报，那么拥有一份高精度的仿真稿，也是可以最大程度展示你的想法，避免后期程序写完，主管各种不满，各种修改。当然，这份输出文档，最好是由设计师和F2E共同完成。
笔者推荐使用Axure来完成仿真稿。网上有各种文章介绍Axure,也有专门的社区网站来提供全面的教程。
最后来个总结：这部分属于网站开发的第一阶段，最终输出文档是线框图、设计稿（包括字体、字号规范文档，配色方案，部件间距）、仿真稿。
网友评论