偶然发现的文章，谈到设计网站规划阶段线框图的设计，以及一些必要性，节选并翻译了一下。线框图(Wireframe)或者也叫做布局规划(Pagemap)，是网站设计前期必不可少的一个环节，但是实际中，网站的规划却经常从视觉设计直接开始，这样不仅造成可行性论证的缺失，也丧失了用户流程控制的一致性原则。好的线框图可以帮助设计及开发理解项目的规划，帮助各方面最快的了解即将获得东西，确保执行的结果在思想上和实际上都是一致的。
时间关系，没有翻译全文，见谅。

译者 Semon

什么是线框图(Wireframe)？

网站线框图是网站设计最简化的可能布局。在最初情况下，一系列餐巾纸上的手绘图就足以被当作是一套线框图。对于更复杂的网站来说，一套可被点击互联的网站线框图，可以用来验证在网站设计中用户的交互目标是如何被组合到iqi的。

网站线框图越精准（译者：指逻辑上，流程上的精准），执行中的重复返工将越少。线框图可以帮助：

  • 节约时间 – 线框图可以省下整小时、整天、整周的无谓返工时间。一些网站开发者，通过使用线框图生下了30%-80%的时间。
  • 提供方向 – (视觉设计)不需要考虑实现的限制，创意的发挥更自由。
  • 关注功能 – 在表现级别的创意完成前，避免分心，如选择怎样的颜色等等。
  • 帮助划分工作流程 – 在基础系统开发之前，把底层复杂的技术问题放到一边。
  • 任务划分 – 避免图形设计、开发和用户流量引导模型互相干扰。

这些可能吗？想像一下，假设需要缩小Wordpress默认的头部图片高度，需要花时间修改 functions.php,style.css和kubrickheader.jpg。几天后，有人又有一个高明的想法，你又要再修改一遍虽然花费的时间非常短。又过了一天，这些又要再重复一遍，因为侧边栏的形状需要调整。如果这些调整存在于线框图设计阶段，修改程序文件的过程可能只会需要一两次了。

线框图设计的第一步

  • 涂鸦

在开始做一些花时间和复杂的调整开始之前，按照网站计划画一些简单的手稿。你对网站设计的观点会改变。有时候，我更乐意通过CSS做视觉设计，但是有时没有东西比得上一些“餐巾纸手稿”可以让我发现新的设计创意和行进上的错误。

  • 绘制流程图

画出至少两条可能的用户路径，一条按照用户希望的流程，另一条按照网站所有者希望的。什么是用户需要的?什么又是网站所有者需要的呢？

  • 分享还是后退

用新的角度查看，无论是自己或求助于其他团队成员。听取建议后实施比开发完成之后重新做新的想法更少痛苦。

  • 备份已有的工作

保存可能被重用的代码，减少出错的压力。在线框图有任何新增的发展时对之前的主题进行备份。

  • 规划注释库

经常从小的挑剔入手工作是非常有效的做法。不管怎么说，如果从一个现存的主题开始工作就不会太混乱，我习惯于对每行样式表代码都这样进行注释：
/* added */.

原文全文：Developing a WordPress Wireframe
下载PDF：WordPress 2.7 Wireframes