这是一个创建于 4140 天前的主题，其中的信息可能已经有所发展或是发生改变。
http://keinez.tumblr.com/post/56618785609/web
这段时间做着一个网站流程再设计的工作，从中发现自己不少不足，在此给大家一一分享。
以往我的设计流程是，接到项目，进行分析，确定需要多少个页面，需要怎样的功能，大致归纳过后在纸上确定几个框架，然后直接打开Photoshop开始根据草图作业。
虽然在草图阶段有可能给同一个页面画出四五个版式，或者画出十来个页面，然而真正开始制作的时候，还是一个一个页面的做。
这个时候问题就出来了。
由于我曾经做过一段时间的平面设计，因而习惯于先做初步效果然后逐步细化，慢慢使用各种工具调整细节直至达到满意。
到了web上，实际的情况却是，很多时候你不需要那么细致的去完成一个组件——要么组件内容不多，要么组件实在太小。这个时候把时间消耗在调整单个组件的效果上，是非！常！不值得！的！
然而我却花费大量时间在这上面。直到认识到这个错误前，我仍然是画好一个导航条就开始千方百计的调节色彩，阴影，描边，hover效果——力图让我的第一个组件好看到爆炸。
如此也花费了我近半的时间。按照今天突然悟道的眼光来看，我把时间花费在搭建功能框架上，效率会高上四五倍不止。
要知道做设计的人，强迫症发作起来简直就是个无穷无尽的大坑。我曾经多次花费一整个上午或者下午的时间，为的就是微调一个纹理角度，或者几度的色相，又或者几个px的对齐。在这期间我除了很努力的对付那些“完美细节”之外，对于整体进度的贡献毫无建树。
幸而在做这份工作的时候，我终于发现了自己的愚蠢，并迅速的总结出了一套正确的工作流程。
在介绍并实施这套工作流程之前，让我们先来看一个类似的比喻。
---------
我曾经是一名绘画爱好者，当然现在也是。虽然这项技能由于工作的缘故被逐渐搁置甚至“退化”成画草图，却仍不影响我回忆一些基本原理。
总所周知，要描绘一个对象，首先必须绘制出大致的草稿和轮廓（若你是右脑发达能从细节开始一丝不差画完的天才，请跳过这段）。然后在草稿的基础上一步一步的添加细节，如明暗，纹理，乃至空气感，都必须按照既定的规则逐渐深入。
你可以看到初学画画的麻瓜们经常在细节的地方花费大量的时间，他们会把人物的眼睛雕琢得尽善尽美，或是将首饰之类的东西努力画得足够华丽，却往往忽视肢体或透视上的明显错误。当他们发现这个大麻烦的时候，只能说：“哦操，我已经画了这么多，看样子改不回来了。”
Web设计也是如此。
作为一名麻瓜，在我完成一个组件之后，我经常会遇到如何与剩下的组件协调的问题。由于这些东西没有在草图画清楚 我也并未估计他们实际绘制起来是会是什么情况。然而当你用麻瓜的方式设计页面的时候，你就会发现这些元素完全无法统一。
“链接的hover状态要用什么颜色？按钮呢！干，这里怎么会多一个复选框出来？卧槽，这里有三个层次，两种颜色不好配啊……”
诸如此类混乱的情况会经常出现在麻瓜的设计流程中，针对这种情况，我们需要准备自己的Resource Kit，有关这点我会在以后的文章中提及，下面我们继续谈工作流程的问题。
---------
那么怎样避免这些问题？
在我看来，做web设计一定要摒弃“先专注于细节”的习惯，而应改为从整体入手。
和通常一样，分析你的需求，列成表，根据这些表格开始画草图。
不同的是，从草图阶段开始就要细致要求。版式确定后，这项工作便应开始。
内容是怎样的，无所谓。需要专注的是功能。
导航栏的结构是怎样的？文字链接还是可点击的按钮？有下拉菜单么？菜单有几层？
内容区域有几块？每块由什么内容和组件构成？组件上有哪些可操作部分？有怎样的操作形式？
有多少个页面？页面之间是怎样连接和跳转的？
……诸如此类，我的建议是尽量在草图阶段就做好。
然后打开Photoshop做什么呢？当然是将草图转化成视觉原型。这个时候不要关注样式如何，先把“能用”的部分全部画出来。
然后做Grid。把东西好好对齐一下，视觉顺序调整好。
接下来根据需求，功能和已经搭建好的结构确定一个视觉规范，按着这个视觉规范去选择色彩，添加交互效果。
最后才应该是强迫症发作的时候。这个时候可以大胆的扔纹理和各种效果上去，只要你确定前端搞得定而且不会对服务器和带宽影响太大。
然后就是出～稿～子～啦～
同理，这个理论也可以推导到App设计，书籍设计，各种需要整合信息的设计，或者程序设计……不过由于我对代码一窍不通，还是不要信口开河的比较好。
---------
写完这部分，突然发觉不知道要以什么作为总结。毕竟是睡觉之前突然产生的灵感，匆忙行文，以挑剔的眼光来看并不甚完美。
不过按照上述的法则，我已经把想要表达的表达出来了，接下来阅读本文的各位如何想，如何总结，如何吐槽我的文笔，这不是我应该关注的。
感谢你在百忙之中阅读拙作，欢迎对本文提出你的意见和建议 :)
这段时间做着一个网站流程再设计的工作，从中发现自己不少不足，在此给大家一一分享。
以往我的设计流程是，接到项目，进行分析，确定需要多少个页面，需要怎样的功能，大致归纳过后在纸上确定几个框架，然后直接打开Photoshop开始根据草图作业。
虽然在草图阶段有可能给同一个页面画出四五个版式，或者画出十来个页面，然而真正开始制作的时候，还是一个一个页面的做。
这个时候问题就出来了。
由于我曾经做过一段时间的平面设计，因而习惯于先做初步效果然后逐步细化，慢慢使用各种工具调整细节直至达到满意。
到了web上，实际的情况却是，很多时候你不需要那么细致的去完成一个组件——要么组件内容不多，要么组件实在太小。这个时候把时间消耗在调整单个组件的效果上，是非！常！不值得！的！
然而我却花费大量时间在这上面。直到认识到这个错误前，我仍然是画好一个导航条就开始千方百计的调节色彩，阴影，描边，hover效果——力图让我的第一个组件好看到爆炸。
如此也花费了我近半的时间。按照今天突然悟道的眼光来看，我把时间花费在搭建功能框架上，效率会高上四五倍不止。
要知道做设计的人，强迫症发作起来简直就是个无穷无尽的大坑。我曾经多次花费一整个上午或者下午的时间，为的就是微调一个纹理角度，或者几度的色相，又或者几个px的对齐。在这期间我除了很努力的对付那些“完美细节”之外，对于整体进度的贡献毫无建树。
幸而在做这份工作的时候，我终于发现了自己的愚蠢，并迅速的总结出了一套正确的工作流程。
在介绍并实施这套工作流程之前，让我们先来看一个类似的比喻。
---------
我曾经是一名绘画爱好者，当然现在也是。虽然这项技能由于工作的缘故被逐渐搁置甚至“退化”成画草图，却仍不影响我回忆一些基本原理。
总所周知，要描绘一个对象，首先必须绘制出大致的草稿和轮廓（若你是右脑发达能从细节开始一丝不差画完的天才，请跳过这段）。然后在草稿的基础上一步一步的添加细节，如明暗，纹理，乃至空气感，都必须按照既定的规则逐渐深入。
你可以看到初学画画的麻瓜们经常在细节的地方花费大量的时间，他们会把人物的眼睛雕琢得尽善尽美，或是将首饰之类的东西努力画得足够华丽，却往往忽视肢体或透视上的明显错误。当他们发现这个大麻烦的时候，只能说：“哦操，我已经画了这么多，看样子改不回来了。”
Web设计也是如此。
作为一名麻瓜，在我完成一个组件之后，我经常会遇到如何与剩下的组件协调的问题。由于这些东西没有在草图画清楚 我也并未估计他们实际绘制起来是会是什么情况。然而当你用麻瓜的方式设计页面的时候，你就会发现这些元素完全无法统一。
“链接的hover状态要用什么颜色？按钮呢！干，这里怎么会多一个复选框出来？卧槽，这里有三个层次，两种颜色不好配啊……”
诸如此类混乱的情况会经常出现在麻瓜的设计流程中，针对这种情况，我们需要准备自己的Resource Kit，有关这点我会在以后的文章中提及，下面我们继续谈工作流程的问题。
---------
那么怎样避免这些问题？
在我看来，做web设计一定要摒弃“先专注于细节”的习惯，而应改为从整体入手。
和通常一样，分析你的需求，列成表，根据这些表格开始画草图。
不同的是，从草图阶段开始就要细致要求。版式确定后，这项工作便应开始。
内容是怎样的，无所谓。需要专注的是功能。
导航栏的结构是怎样的？文字链接还是可点击的按钮？有下拉菜单么？菜单有几层？
内容区域有几块？每块由什么内容和组件构成？组件上有哪些可操作部分？有怎样的操作形式？
有多少个页面？页面之间是怎样连接和跳转的？
……诸如此类，我的建议是尽量在草图阶段就做好。
然后打开Photoshop做什么呢？当然是将草图转化成视觉原型。这个时候不要关注样式如何，先把“能用”的部分全部画出来。
然后做Grid。把东西好好对齐一下，视觉顺序调整好。
接下来根据需求，功能和已经搭建好的结构确定一个视觉规范，按着这个视觉规范去选择色彩，添加交互效果。
最后才应该是强迫症发作的时候。这个时候可以大胆的扔纹理和各种效果上去，只要你确定前端搞得定而且不会对服务器和带宽影响太大。
然后就是出～稿～子～啦～
同理，这个理论也可以推导到App设计，书籍设计，各种需要整合信息的设计，或者程序设计……不过由于我对代码一窍不通，还是不要信口开河的比较好。
---------
写完这部分，突然发觉不知道要以什么作为总结。毕竟是睡觉之前突然产生的灵感，匆忙行文，以挑剔的眼光来看并不甚完美。
不过按照上述的法则，我已经把想要表达的表达出来了，接下来阅读本文的各位如何想，如何总结，如何吐槽我的文笔，这不是我应该关注的。
感谢你在百忙之中阅读拙作，欢迎对本文提出你的意见和建议 :)
第 1 条附言 · 2013-07-29 07:35:41 +08:00
发现了我好几个月前的帖子：
http://www.v2ex.com/t/51728
如今的感想却是，道理谁都会说，只有真正面对问题的人，才会接触到问题的细节。
很多时候你不能确定细节到底做到多么好才是真的好？然而即便你有这样的念头，就像此帖中的我一样，也会因为“接下来应该做什么？”而困惑。再接下来，依然是无穷无尽的调整细节——因为你不知道要干什么，还不如调整已有元素简单。
这是人偷懒的本性。调整永远比创造轻松而来的有成就感。
我所领悟到的即是，如果不把计划定得细致，造成目标（草图）和实现（设计稿）之间存在断层的时候，即，如果无法将创造的过程转变成逐渐调整的过程：草图——细节的草图——细节的线框图——加细节，强迫症该发作的时候还是会发作。
人性啊。
http://www.v2ex.com/t/51728
如今的感想却是，道理谁都会说，只有真正面对问题的人，才会接触到问题的细节。
很多时候你不能确定细节到底做到多么好才是真的好？然而即便你有这样的念头，就像此帖中的我一样，也会因为“接下来应该做什么？”而困惑。再接下来，依然是无穷无尽的调整细节——因为你不知道要干什么，还不如调整已有元素简单。
这是人偷懒的本性。调整永远比创造轻松而来的有成就感。
我所领悟到的即是，如果不把计划定得细致，造成目标（草图）和实现（设计稿）之间存在断层的时候，即，如果无法将创造的过程转变成逐渐调整的过程：草图——细节的草图——细节的线框图——加细节，强迫症该发作的时候还是会发作。
人性啊。
 |
1
fangzhzh 2013-07-28 02:15:22 +08:00  1
先大后小, 先整体后部分, 先列任务列表, 给每条任务估算时间, 再按照任务列表去工作.
多么简单的事情, 多么明显的道理, 但是做起来多么的难啊. 我自己也总是往往会像楼主一样,陷入到一个具体的问题, 不能自拔. 开发时最大的幻象之一:再差一点点就好了. |
 |
2
Keinez OP 原文修改了一些文字，行文没有那么别扭了，推荐点击链接阅读。
|
 |
6
tangzx 2013-07-28 09:46:18 +08:00 via iPhone
是的，线框图和交互图应该在视觉稿之前出来，直接画视觉稿之对于设计师就像直接编码之对于切图工一样纠结
|
|
7
Keinez OP @tangzx 都是这样的，关键在于线框图和交互图的粒度做到多细。以前我是画好框框写上备注然后就直接开始了，仅作布局参考之用，没想到问题这么多
|
 |
8
jjplay 2013-07-28 10:12:47 +08:00
的确是强迫症，不弄出最终的细节很难受~ 其实是种怕，怕最后客户认为你不细致 敷衍他 最后还得返工~~
|
 |
9
darasion 2013-07-28 10:24:46 +08:00
我认为，撸主总结的，就是所谓 “设计模式”。
一旦形成模式，就像机械设计手册一样，设计什么就查一下手册，然后按照标准去做就好了。 这样效率会很高，不纠结，少踩坑。 |
 |
10
gaoshougaoshou 2013-07-28 16:27:31 +08:00
哈哈，我也常犯这种错！楼主很棒!
|
 |
11
Ricepig 2013-07-28 21:11:11 +08:00
lz如果仅仅是设计师，这么做完全没有问题啊，设计师不抠设计细节，那还有啥是主要工作？
如果是设计实现一把抓，那确实是先把框架搭好，然后再自顶向下比较好。 其实，自顶向下和自底向上都行，视各种条件选择吧 |
 |
13
Gawie 2013-07-28 23:10:55 +08:00
深有同感！ 强迫症！
|
 |
15
aisensiy 2013-07-29 01:25:57 +08:00
讲的真好呀～我觉得对于产品的设计也是类似的：真正让产品起飞的不是哪个 px 的问题，而是整体的设计问题。等到大的东西搞定了，再来慢条斯理的把东西做到无懈可击。
|
 |
16
rayps 2013-07-29 02:01:33 +08:00
“要知道做设计的人，强迫症发作起来简直就是个无穷无尽的大坑。”
|
 |
17
vivianalive 2013-07-29 13:18:00 +08:00
“要知道做设计的人，强迫症发作起来简直就是个无穷无尽的大坑。”
我有一个强迫症就是,PSD上的各个元素的间距和对齐一定要精确到1像素... 所以,经常是缩放到最大,然后一格一格地数像素. |
 |
18
66beta 2013-07-29 13:39:56 +08:00
拿到手psd，同一系列的icon都不是一个尺寸，都是泪啊
|
 |
19
jinwyp 2013-07-31 14:01:13 +08:00
其实线框图最重要,工具的使用要知道时间成本, 很多时候是功能重要还是细节重要, 先快速设计功能,然后在功能定型后 在设计细节.
|
 |
21
JoyNeop 2013-08-09 22:35:49 +08:00
画完草图直接写代码的情何以堪。。。
|
 |
22
flyingkid 2013-08-09 22:44:42 +08:00
@vivianalive 要精确到1px那是必须的。
|
|
23
JoyNeop 2013-08-09 22:54:57 +08:00
|
Select Language