页面设计三步走

摘要

作为一个后台类管理系统的开发，经常没有前端开发的人力资源，很多项目不得不自己兼做前端设计和开发。我之前的做法都是直接开始用Axure画原型图，想到什么就画什么，因此经常返工，设计效率很低。最近看了一个国外设计师的帖子，模仿了他页面设计的“套路”，感觉挺实用，现在把这个三步走的套路总结一下。

第一步：手绘

设计应用最困难的部分就是描绘出整个过程。脑子好的人，可以脑中完成页面交互的模拟，但如果你和我一样脑子存储量没那么大，拿出纸和笔来画吧。用本子和笔真的挺方便的，最近项目的页面设计我都是在开大会的时候完成的。

有3个小技巧：

1. 在一页纸的最右侧，上面写功能列表，下面各种设计过程中问题记录。把问题记下来很重要，如果规划过程中产生的问题，你每次都要停下来研究，那你可能发现一下午过去了，你还在设计第一个界面。先记下来，可以让你放心的先继续往前走
2. 这页剩下的空白，从左上角开始画小小的线框图。这一步的要点，只关注用户流（user
   flow）和主要元素，千万不要陷入细节中，画出的原型图分辨率一定要低
3. 一定要把所有的页面都画出来，哪怕是很简单的。在脑中的模拟，我们经常会认为已经覆盖到所有交互了，但其实总会漏掉一些细节。想想用你的笔指向手绘的页面上按钮，想想点击后你会跳到哪里或者得到什么提示消息？

下是两个手绘的例子

第二步：提高分辨率

经过第一步后我们已经尝试了几种不同的交互方案，最终理顺出一个合理易用的。现在是时候提高分辨率，获取较真实的模拟页面了。使用的工具不限，直接编码、用Photoshop或者画原型图都行，本人不是专业的前端设计，页面也不用考虑太多UED，习惯用Axure画原型图。这一步的要点是，列出所有元素。这个过程可以帮助我们估算开发时间及思考如何合理布局。

第三步：隐藏复杂性

这一步的重点调整布局并优化复杂页面。上一步的例子中Setting页面看起来非常拥挤复杂，会让用户不只所错。可以将设置项分类到多个选项卡中，一次只展示某类的设置项，看看下图是不是会让用户轻松很多。

参考资料

Wireframing your web application