页面设计三步走

男娘i 2023-06-16 10:35 2阅读 0赞

## 摘要 ##

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

## 第一步：手绘 ##

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

有3个小技巧：

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

下是两个手绘的例子  
![1][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xhbWJfSVQ_size_16_color_FFFFFF_t_70]

## 第二步：提高分辨率 ##

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

## 第三步：隐藏复杂性 ##

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

## 参考资料 ##

[Wireframing your web application][]

[1]: https://img-blog.csdnimg.cn/20191126084126837.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xhbWJfSVQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xhbWJfSVQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191126084237990.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xhbWJfSVQ=,size_16,color_FFFFFF,t_70
[3]: https://img-blog.csdnimg.cn/20191126090007374.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xhbWJfSVQ=,size_16,color_FFFFFF,t_70
[4]: https://img-blog.csdnimg.cn/20191127192028490.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xhbWJfSVQ=,size_16,color_FFFFFF,t_70
[Wireframing your web application]: https://nathanbarry.com/wireframing-web-application/