摘要
作为一个后台类管理系统的开发,经常没有前端开发的人力资源,很多项目不得不自己兼做前端设计和开发。我之前的做法都是直接开始用Axure画原型图,想到什么就画什么,因此经常返工,设计效率很低。最近看了一个国外设计师的帖子,模仿了他页面设计的“套路”,感觉挺实用,现在把这个三步走的套路总结一下。
第一步:手绘
设计应用最困难的部分就是描绘出整个过程。脑子好的人,可以脑中完成页面交互的模拟,但如果你和我一样脑子存储量没那么大,拿出纸和笔来画吧。用本子和笔真的挺方便的,最近项目的页面设计我都是在开大会的时候完成的。
有3个小技巧:
- 在一页纸的最右侧,上面写功能列表,下面各种设计过程中问题记录。把问题记下来很重要,如果规划过程中产生的问题,你每次都要停下来研究,那你可能发现一下午过去了,你还在设计第一个界面。先记下来,可以让你放心的先继续往前走
- 这页剩下的空白,从左上角开始画小小的线框图。这一步的要点,只关注用户流(user
flow)和主要元素,千万不要陷入细节中,画出的原型图分辨率一定要低 - 一定要把所有的页面都画出来,哪怕是很简单的。在脑中的模拟,我们经常会认为已经覆盖到所有交互了,但其实总会漏掉一些细节。想想用你的笔指向手绘的页面上按钮,想想点击后你会跳到哪里或者得到什么提示消息?
下是两个手绘的例子
第二步:提高分辨率
经过第一步后我们已经尝试了几种不同的交互方案,最终理顺出一个合理易用的。现在是时候提高分辨率,获取较真实的模拟页面了。使用的工具不限,直接编码、用Photoshop或者画原型图都行,本人不是专业的前端设计,页面也不用考虑太多UED,习惯用Axure画原型图。这一步的要点是,列出所有元素。这个过程可以帮助我们估算开发时间及思考如何合理布局。
第三步:隐藏复杂性
这一步的重点调整布局并优化复杂页面。上一步的例子中Setting页面看起来非常拥挤复杂,会让用户不只所错。可以将设置项分类到多个选项卡中,一次只展示某类的设置项,看看下图是不是会让用户轻松很多。