身在设计行业，无论你是哪个领域，改稿总是避免不了的，我们唯一能做的就是把改稿次数降到最低，向着一稿就过这个理想一步步靠近。方法总是有的，就看你能不能get到。这几天我看了一篇不错的文章，Dustin Senos的《How to get value from wireframes》，通过他自己的工作历程讲述了线框图是怎样帮助设计师更好的完成设计工作的，一篇很实用文章，分享给大家，希望你能有所收获。

11年前，我在一家小设计公司工作，我的第一份全职工作，我那时21。在这家公司的最开始几年，我专注于视觉设计。我能不能把这个结构做的更实用？把光源换个角度能不能让这个网站看起来更美观？怎样让我设计的按钮看起来更炫？听客户抛出一个点子，然后我问一些问题，接着打开Photoshop就开始设计，几天之后，给客户展示一到两个视觉方案，客户给出反馈，我再进行修改，之后就在xhtml中编写网站，这是我当时的工作常态。

“公司里最好的设计师做最漂亮的网站。”

当我的职业生涯有了进一步发展后，我才知道在进行视觉设计之前，先向客户展示线框图可以节省彼此的时间。不得不说的是，线框图是一条捷径，为我们之后的快速修改留有空间。它比视觉图像设计更容易创建，也更容易修改。然而稿纸上的手绘线框图直接展示给客户有点简单粗暴，所以我会花些时间电子版本。在展示线框图之后，我发现我这很少促进一场有意义的谈话，而且几乎让我们从没改过设计方案。

再回头去看，以前我并没有发现线框图的价值，因为我没有正确的使用它。我把它当做一个“过渡盒子”，将项目从“待开发状态”过渡为“可以开始设计状态”，也能有效防止过后客户改变他们的想法。然而我没有发现的是，线框图的最大用处是建立一个机制，从而脱离固定的设计套路。它能够帮助你稳住你的设计方向，在你偏离轨道时把你拉回来。

一名初级设计师的设计过程

上图来自Julie Zhou的一篇文章《Junior Designers vs. Senior Designers》，描述了一个容易中招的陷阱：脑海中有了第一个想法就马上开始设计，如果我将它设计的更漂亮也许结果会更好。初级设计师关注视觉设计多于功能设计仍然是很普遍的现象。视觉设计更容易评判和分享：这一屏看起来符合当前的流行趋势吗？它在Dribble上收获了很多赞吗？够扁平吗？元素运用的到位了吗？这几点尤为符合新手和正在求职的设计师。浮夸的设计能够更快更容易的实现，然后放到我们的作品集里，指着说“这是我设计的”。

一名高级设计师的设计过程

在设计领域沉淀了十年后，我懂得了去了解项目怎样运行以及有些事情为什么是这样，比去发掘事物看起来怎么样更重要。高级设计师花较少的时间在美化上，而是花更多的时间去证实他的设计方案是可行的。如上图所示，高级设计师以独特的方式来实现设计成果。

“一辆出了故障的汽车，无论给它喷多炫的漆，它都无法上路行驶。”

那么怎样来避免打磨你脑海中的第一个想法？在没有充足的时间条件下，怎样得出更多的方法？怎么决定其中一个方案比另一个方案好呢？

线框图是极有价值的

我想分享一下在我开始进行设计之前使用的一项技能，这个技能我用来探索和实现多个方案。在之后的文章里，我说的“线框图”是指草稿纸上的手绘线框图。纸版线框图建立快速，将点子具象化的成本低，而且可以让团队中的每个人都能参与其中。

“纸版的线框图，使得我们不用再纠结于是否要改因为一个好点子而设计好的线框图”。

安排

让我们开始吧。首先先拿一个笔记本，然后在上面画出至少20个矩形框。如果你正在做移动端界面，最好让它和你要设计的设备的尺寸比例大体上相同。如果你设计的是桌面界面，那就和电脑屏幕比例相同。

步骤

现在，拿起你的笔，用你脑海中解决面临的问题的一些不同的方法去填满每一个矩形框，先从最显而易见的点子开始，进行头脑风暴，直到所有矩形框都填满了再停下。矩形框里的每一个点子都是很好地方案几乎是不可能的，而这就是我要说的。你想将你的思考广度从舒适区扩大到未知区域，如果你在为一个新点子而挣扎时，强迫你自己去思考一些问题并去实践，比如：如果菜单是放射状的会怎样？如果没有图片会是什么样的？苹果公司会怎么做？谷歌会怎么做？如果这里没有列表和网格会怎样？把最重要的元素放在离用户拇指最近的地方还有其他不同的方式吗？对我来说，一般开始10个之后，这件事就变得有趣了。

如果你正在寻找给屏幕布局的最好方式，那么使用关键字是很方便的，比如：T (title), V (video), RV (related videos), Sub (sub-navigation)等等，这样会使你专注于布局而不是界面元素。

或者一个💡来代表文件，一个📈来代表数据。

如果你专注于界面的布局和元素，你可以绘制更高的保真度。

到这里，你的大脑已经很疲劳了，所有矩形框也都填满了。如果还有矩形框没填满，那么强迫自己继续。如果你还有剩余的脑汁，那么翻一页继续绘制你脑中的想法。现在所有矩形框都被填满了，找出一些看起来比较靠谱的，去和别人讨论，并记录他们的想法。强迫自己用语言去表现这些概念，你会发现很多有趣新奇的点子。

重复

下一步不是进行视觉设计，即使有这种情况也很少。再一次强调，到这一步时，重要的不是去实现每一个像素。把稿纸上的想法不断弱化，所有都是可以改变的。现在把那些靠谱的想法绘制成更高的保真度。在新的一页上面画更大的矩形框（我发现在一页A4之上画四个正合适）。到这一步，我们再去看这些想法能不能Hold住更多的细节。

当你完成了上述这些步骤后，此时把你的高保真想法展示给别人并获取反馈是十分有益的，之前我曾经用苹果手机把我的成果拍照发给我的客户。当你得到反馈后，你不用再担心会花费很多的时间去修改，因为你并没有花多少时间在这些线框图上。

下一步

在很短的时间里，为了一个问题你用很多不同的想法和点子填满了每个页面。你强迫自己去延伸思考，然后得出一些非显而易见的想法。在整个过程中，你得到了多次反馈，更理想的是，其中一些很靠谱，并且能够完善更多的细节。你并没有上色，打字，做光效，或者其他的视觉细节打磨，你得到的反馈也都是高层次的，概念性的，而不是关于审美的、具体的细节等等，并且很容易应用到更多的线框图中当去。

下一步做什么取决于你自己。我这种时候更多的是重复我的线框图绘制过程，思考怎样更流畅。在这一屏之前应该是怎样的？之后呢？当我给交互流程绘制了不同的方案后，我会创建电子版的原型图，去切身感受一下在真实设备上的交互。

诚挚地希望通过我这个技能分享，能够让你更快速的产生更多想法，选择去完善那些你在众多想法中万里挑一的方案，而不是在项目开始时你脑海中迸发的第一个想法。

以上内容由本人原创转译，转载请注明出处，否则后果必究。

关于大宝（我本人）：

互联网领域设计师，跨界于广告、创意、工业设计、用户体验等领域，喜欢潮流，本身却很土，定期写文，欢迎提出你感兴趣的设计、艺术、创意等话题，试着做一个书写设计来影响你的人。

欢迎关注，阅读更多原创设计思考。