也说说互联网产品开发中的设计

摘要: 最近一年都在折腾一个小软件，在开发的过程中，前端设计是一个非常让人头大的事情，一个避不开的东西就是设计，今天就聊聊设计的那些事儿。

一、何谓WEB设计？
WEB设计也是视觉传达设计的一个方向，而且在视觉传达、信息表现方面，体现的尤为重要，从产品构成要素方面说，设计由三个要素构成：
1、创意
创意，也可以理解为创作的意图，这是最基本的一个要素，需要考虑产品的特性、企业文化、受众文化、传播媒介、表达意图等方面，来综合考虑，有了创意才能决定后续的两个要素。
2、构图
构图决定了作品的基本骨架，解决图形、色彩、文字三者的空间关系，大气磅礴和小清新的构图肯定是不一样的。
3、色彩
我们经常说这个色彩给人喜庆的感觉，那个色彩给人感觉好压抑。中国红给人深沉、内敛，蓝色的科技感更强，OSC的色调是绿色的，这些就是色彩，也是视觉传达中最直接最有效的元素，这也就是为什么梵高的油画都是浓墨重彩的原因。



（这张图清晰的表现了各企业的LOGO在色环中的位置）

基于以上三点，其实设计是一个非常复杂的工作，而WEB产品的设计和常规的平面设计更是有非常大的区别。WEB设计是立体的，有XYZT四个轴线，平面设计只有XY两个轴线。说人话就是：WEB设计需要考虑z-index属性，T则是time，菜单的hove事件弹出隐藏层，这就是Z属性和T属性的具体表现。因此，在WEB产品的设计中，我们除了要考虑设计的三个基本要素，还需要考虑WEB设计特有的两个属性Z和T。



（这个就是404网站出生的样子，相信内测的时候比这个还丑。
）

当然，Z和T属性也不是WEB设计一出生就有的东西，而是随着互联网技术井喷以后才有的概念，这中间的技术发展我们在此按下不表，Z属性主要就是我们的各种模拟弹窗、各种TAB、各种提示框的大量应用，T则是各种动画效果的应用，而在HTML5的发展中，这两个属性则是被发挥到了极致。这写设计元素是常规平面设计所不能思考的，甚至部分WEB从业者也无法在开发中接受这俩个元素。然而正是这两个元素让WEB设计的空间变得更加广阔。
说道这里，其实什么是WEB设计相信大家已经清楚了，我就不说我自己的定义了，欢迎大家各抒己见。

（其实是我也说不来。）

二、WEB设计是怎么做的？

说完是什么，接下来我们说说怎么做的事儿。其实就我自己的经历而言，来写这节是比较没有自信的，我没有经历过复杂的团队协作的大项目，所以这节的算是我自己的一些思考，大家看看就行，别当真，另外就是我们这里只讨论设计，实际的工作中，我们总会因为这样那样的原因而采取妥协，在此我们也不做细说。

上文我们说了WEB设计的几个要素将成为我们做的指导思想。设计的三要素其实并不是队列的，而是并行的，在设计的过程中相辅相成，最终影响到我们的产品设计走向。
第一步，肯定是了解客户需求，包括客户的文化、客户的痛点等，了解客户需要什么功能，实现怎样的效果，是要狂拽酷炫，还是要简单方便又省钱？
第二步，自然就是产品构图了，在客户的要求及财务允许的情况下，对产品进行设计，例如我正在使用的这个OSC的博客发布功能，每次键盘弹起后，系统就会自动保存草稿，如果不小心按下关闭，则会alert提示是否要离开页面。这些功能，包括了我们之前说到的XYZT等元素，在产品构思的过程中，我们就需要对业务链进行梳理，从流程图变成产品原型，最后是设计稿，然后编写CSS\HTML\JS，而使用各种框架则可以给我们省去了很多基础工作。但还是需要对产品构思，比如按下提交后，是否要ajax返回一个信息，并用弹窗提示一下。这些都是需要构思的。

第三步，有了产品构思，就需要给出详细的设计稿，而在设计稿这个阶段，则是参考我们的创意和构图，来选择我们的配色，并根据配色来调整我们的构图，最终完成我们的产品设计稿。
第四步，当然就是写代码咯。是的没错，写代码只是其中的一小步。
当然，这四步只是一个大概的流程，而我自己在做的过程中，因为自己对产品的把控和时间需求，通常我都是从第一部直接跳到第三步，第三步做的差不多直接就第四步了，并且不会完全开发出静态文件再来套模板，而是写完页面框架就直接套在模版里，其他模块直接开发。具体的工作过程，每个人都有自己的习惯，这个就不做讨论了。

三、什么样的设计是好设计？
相信做过设计的人，一定都有千万个想要捏死甲方的心情。为什么？撇下哪些极品甲方，其实也是我们自己在前几步没有认真思考，分析。而再遇上一个二逼的产品经理你就更没法搞了。其实我们在设计的时候，应该尽量克制这种“甲方是傻逼，不懂设计”的思想，即便他真的是个SB。因为这种思想对我们的工作百害无益，只会干扰我们的工作，没有其他。
好的设计，首先是要满足人的使用，其次是尽量人性化的界面。在开发招财猪进销存的时候，右侧的菜单引发了各种吐槽，相信对比word2010和word2003大家就可以感受出“人性化”是什么东西了。设置一个表格属性，以前得左点右点，现在只要嗖的一下即可。然而，你能说word2010不是一个重度设计的产品么？任何做到正真简单的产品，那都是经过了无数复杂的思考和设计，而那些为了简单而简单的产品，则是一坨翔，比如苹果的那个操蛋的鼠标。

一个好的作品，一定是一个重度设计的东西，不仅能让用户方便的使用，而且他的配色、构图一定也是非常舒适安全的，包含了设计人员的思考、以及对待产品的态度，用老罗的话说，每个元素都在他应该在的位置上。虽然这句话说的比较夸张，但设计的精髓就是这个，如果只是简单的烂泥巴糊上墙，把信息输出来屏幕上，那谁都会，然而那不是设计，那只能是echo和var_dump的输出而已。