一点Web设计的悟道

http://keinez.tumblr.com/post/56618785609/web

这段时间做着一个网站流程再设计的工作，从中发现自己不少不足，在此给大家一一分享。

以往我的设计流程是，接到项目，进行分析，确定需要多少个页面，需要怎样的功能，大致归纳过后在纸上确定几个框架，然后直接打开Photoshop开始根据草图作业。

虽然在草图阶段有可能给同一个页面画出四五个版式，或者画出十来个页面，然而真正开始制作的时候，还是一个一个页面的做。

这个时候问题就出来了。

由于我曾经做过一段时间的平面设计，因而习惯于先做初步效果然后逐步细化，慢慢使用各种工具调整细节直至达到满意。

到了web上，实际的情况却是，很多时候你不需要那么细致的去完成一个组件——要么组件内容不多，要么组件实在太小。这个时候把时间消耗在调整单个组件的效果上，是非！常！不值得！的！

然而我却花费大量时间在这上面。直到认识到这个错误前，我仍然是画好一个导航条就开始千方百计的调节色彩，阴影，描边，hover效果——力图让我的第一个组件好看到爆炸。

如此也花费了我近半的时间。按照今天突然悟道的眼光来看，我把时间花费在搭建功能框架上，效率会高上四五倍不止。

要知道做设计的人，强迫症发作起来简直就是个无穷无尽的大坑。我曾经多次花费一整个上午或者下午的时间，为的就是微调一个纹理角度，或者几度的色相，又或者几个px的对齐。在这期间我除了很努力的对付那些“完美细节”之外，对于整体进度的贡献毫无建树。

幸而在做这份工作的时候，我终于发现了自己的愚蠢，并迅速的总结出了一套正确的工作流程。

在介绍并实施这套工作流程之前，让我们先来看一个类似的比喻。

---------
我曾经是一名绘画爱好者，当然现在也是。虽然这项技能由于工作的缘故被逐渐搁置甚至“退化”成画草图，却仍不影响我回忆一些基本原理。

总所周知，要描绘一个对象，首先必须绘制出大致的草稿和轮廓（若你是右脑发达能从细节开始一丝不差画完的天才，请跳过这段）。然后在草稿的基础上一步一步的添加细节，如明暗，纹理，乃至空气感，都必须按照既定的规则逐渐深入。

你可以看到初学画画的麻瓜们经常在细节的地方花费大量的时间，他们会把人物的眼睛雕琢得尽善尽美，或是将首饰之类的东西努力画得足够华丽，却往往忽视肢体或透视上的明显错误。当他们发现这个大麻烦的时候，只能说：“哦操，我已经画了这么多，看样子改不回来了。”

Web设计也是如此。

作为一名麻瓜，在我完成一个组件之后，我经常会遇到如何与剩下的组件协调的问题。由于这些东西没有在草图画清楚我也并未估计他们实际绘制起来是会是什么情况。然而当你用麻瓜的方式设计页面的时候，你就会发现这些元素完全无法统一。

“链接的hover状态要用什么颜色？按钮呢！干，这里怎么会多一个复选框出来？卧槽，这里有三个层次，两种颜色不好配啊……”

诸如此类混乱的情况会经常出现在麻瓜的设计流程中，针对这种情况，我们需要准备自己的Resource Kit，有关这点我会在以后的文章中提及，下面我们继续谈工作流程的问题。

---------
那么怎样避免这些问题？

在我看来，做web设计一定要摒弃“先专注于细节”的习惯，而应改为从整体入手。

和通常一样，分析你的需求，列成表，根据这些表格开始画草图。

不同的是，从草图阶段开始就要细致要求。版式确定后，这项工作便应开始。

内容是怎样的，无所谓。需要专注的是功能。

导航栏的结构是怎样的？文字链接还是可点击的按钮？有下拉菜单么？菜单有几层？

内容区域有几块？每块由什么内容和组件构成？组件上有哪些可操作部分？有怎样的操作形式？

有多少个页面？页面之间是怎样连接和跳转的？

……诸如此类，我的建议是尽量在草图阶段就做好。

然后打开Photoshop做什么呢？当然是将草图转化成视觉原型。这个时候不要关注样式如何，先把“能用”的部分全部画出来。

然后做Grid。把东西好好对齐一下，视觉顺序调整好。

接下来根据需求，功能和已经搭建好的结构确定一个视觉规范，按着这个视觉规范去选择色彩，添加交互效果。

最后才应该是强迫症发作的时候。这个时候可以大胆的扔纹理和各种效果上去，只要你确定前端搞得定而且不会对服务器和带宽影响太大。

然后就是出～稿～子～啦～

同理，这个理论也可以推导到App设计，书籍设计，各种需要整合信息的设计，或者程序设计……不过由于我对代码一窍不通，还是不要信口开河的比较好。

---------
写完这部分，突然发觉不知道要以什么作为总结。毕竟是睡觉之前突然产生的灵感，匆忙行文，以挑剔的眼光来看并不甚完美。

不过按照上述的法则，我已经把想要表达的表达出来了，接下来阅读本文的各位如何想，如何总结，如何吐槽我的文笔，这不是我应该关注的。

感谢你在百忙之中阅读拙作，欢迎对本文提出你的意见和建议 :)