WingKing的互联网生活: 2009/5/10

2009年5月13日星期三

创意方法杂谈

作者：kevin_chung | 发布： (编辑)稻草

写在前面的话：
Part 1
记得刚毕业那时，常幻想着自己是个大艺术家，满怀憧憬的想找一份理想的工作。后来入了行，慢慢的发现自己好像不是这块料；不但没有好的想法与创意，而且软件也不懂得怎么去操作，再后来接触多了、看多了、被蹂躏得多了、想法也慢慢的多了；却又发现，在天马行空的想法面前，却根本不知道怎么去实现，从一个痛苦的坑里跳回了另一个坑中。后来记得有位前辈告诉我说，做这行是需要慢慢沉淀和积累的，形成风格是需要时间的，在职业生涯的前几年里，都是布满荆棘的学习和积累的过程。现在慢慢的开始明白，原来在我们年轻的时候，我们总是把我们的创作冲动当作是创作才华，发现自己才智平庸没有好创意、理想与梦幻破灭时，内心会是那样很痛苦。

Part 2
常常会想，什么样的设计才是最好的设计(其实本来就没有最好的)。常常觉得，这个表现已经很完美了(其实还很有差距)……事后抽身回来再看，还是有很多不如意的地方。类似的问题想多了，渐渐的觉得，一个好的作品是由多方面组成的，比如色彩、布局、构成、风格、细节等。而在现下的互联网环境下，只要有足够的时间，我们都可以将自己的想法做到尽善尽美。但其实我们不难发现，设计工作中的创意才是设计作品成功与否的关键，如果我们在设计创意上出现了偏离，那所有的努力，也就付之东流了。

这篇探讨并没有能上升到理论的高度，每个设计师都有自己独到的创意方法。这些文字仅是我在平时工作中的一些方法与认识，与大家分享。

创意设计过程

1、收集与归纳素材
确定项目设计方案、确定项目创意要点、确定项目表现形式、确定项目文案以及确定项目相关素材。

2、预处理酝酿
让思想自由驰骋，发挥思维的灵活性；对前期收集的信息进行综合处理；运用各种方法勾画出若干可实施方案。

3、总结可实施方案
对一众方案进行筛选并挑选出最具备可行性特质的方案。

4、项目实施与后期校验
在整个项目进行过程中，都要对项目的各个关键点进行全面的思考，并要与项目相关的各个角色保持高效的沟通，善于抓住问题核心并能给出相应的解决方案，很多时候设计师的沟通水平决定了项目的进展、推进速度与最后输出成果的质量。

创意方法
在我们日常工作中创意方法不一而足，不胜枚举。可创意工具与方法并不是万能的，正如创意没有固定的法则一样。当我们为没有一个好的创意表现而头疼时，如果我们掌握一定的创意方法，通过这些方法与技巧，在项目操作之前做足功夫，无疑会有利于激发我们思想的火花和创造性。

创意方法之一-借鉴创意法
特点：较适用于短平快．但又要求有细节的项目。

借鉴创意法可以从我们已知的一切入手，一如街边的路牌、途中的风景、斑驳的墙漆、月夜下的街灯，再到同行的案例启发，这些都是我们可以吸取的地方。相信我们都有逛网的习惯，这不仅是积累各方知识及了解时下流行视觉趋势的好方法，无形中也丰富了我们的创意阅历，无形中也为借鉴创意种下良好的因子。在工作中，当我们黔驴技穷，为找不出一个好的创意解决方案而挠头时，可以吸取日常工作、生活中见到的，与进行中的工作项目相关的成功因子，从其中的一个点，或者一个表现出发，借鉴其成功之处，拓宽创意思路，结合项目现状，给出优质的创意设计。

创意方法之二-情景(情感)映射创意法
特点：较适用于短平快．对情感有一定诉求的项目。
说明：情景创意法的进行要求对一个想法进行纵向深入发掘，思维忌横向发散。

生活中，我们都是独一无二的，不同的成长的历程赋予了我们不同的阅历、不同的性格、不同的想法与世界观。我们每个人都有自己独一无二的想像力、理解力和判断力。于是乎，当我们面对同一件事物时，会做出不同的情感反映。同样的，在我们的日常创作过程中，也就有了不同视觉风格，不同创意想法的出现。

情景映射创意法是把我们所要表达的概念化的、抽像化的东西（如文案、主题等）丰富化、立体化。把这些所要表达的概念逐步的从低级抽象向高级抽象演变，直至获得满意的创意表达为止。

比如说春天，在想到春天的时候。在脑海里我们都会出现不同的元素，丰富而又富有诗意，绿色、和风、细雨、春泥、青草，还有风筝、燕子、春游的人们诸如此类。由此，我们可以充份发挥我们的主观能动性，根据主题组合创造出富有感染力的创意画面。

创意方法之三-思维导图创意
特点：要求有较好的视觉表现力，有思想深度、延展度的项目，如海报、平面、广告、富媒体等。

思维导图是一种放射性的创意模式，被认为是最自然的一种创意工具(自认为是这样)，很多时候，当项目对创意表达要有较高的要求时，它是一个简单、有效、且又美丽的创意工具。思维导图法以需要解决的问题为起点，把我们所认识的、与问题有关的元素进行联想细分，向外延展，再延展，充分发挥联想的创造力。然后思维再跳出来，把这些之前创造性的想法都结合起来，进而激发出我们创意的火花。

从图中我们可以看出，这里的思维导图法我们可以理解成横向情景映射创意法的集成应用，只是在初始价段就展开扩展，先延展，再关联。

创意方法之四-头脑风暴与逆向思维
说明：较适用对整体创意有较高要求的项目，如大中型项目的创意起始阶段。
局限性：头脑风暴方法对会议的主持人有一定要求，要求具备相当的专业性与组织能力。

说起头脑风暴，似乎已经没有人不知道了；在创意工作开始的时候，想到的最优先的，也应该是头脑风暴，但也还是不得不提一下；因为还是觉得，在众多创意方法中，头脑风暴确实是优秀的可行性很高的创意方法之一。

头脑风暴的特点是：众志成城。是集众人才智解决创意缺失的良好方法，是众多创意方案的集合。是创意工作中的捷径。

头脑风暴的实施要求：
1、确定风暴主题。
2、确定主持人(负责主持风暴创意会议，对各创意进行记录)。
3、风暴与会人员积极对主题进行创意发言，避免出现争执及重复创意（不能重复但可引申）。
4、集合所有创意方案，把方案在进行循环深化风暴。
5、最终探讨并选出可行性最佳的创意方案。

逆向思维(突破思维定势，有助于激发与众不同的，另类的，超越平常的创意想法)
受阅历与教育的影响，对于某一样事物，我们都有自己固有的思维认识。逆向思维却是反其到而行，旨在突破我们的思维定势。逆向思维是指不在于我们能做什么，能激发出什么样的创意，指的是在同样的大创意环境下，我们现有的创意表现不了什么(或者说我们实现不了什么创意)。当我们认为做不到的时候，往往别人也觉得做不到(或许也许可能)，所以如果我们能实现他人不能实现的创意，那就是我们和他人最大的差异之处，所出的创意也往往会起到意想不到的效果。

2009年5月12日星期二

精通HTML表格的使用

制作网页表格，需要使用table标签。

用好table标签并不容易，复杂的表格做起来就很麻烦，比如下面这张表。

我整理了一些HTML表格的高级语法。你可以看看，自己会用多少？

1. 标题和内容描述

表格的标题用caption标签表示，它会自动出现在整张表格的上方。

除了标题以外，对内容的更长描述可以写在table标签的summary属性中。

代码示例（为了便于阅读，tr、th、td省略关闭标签）：

   a test table with merged cells   average       red
eyes   
height weight   
males 1.9 0.003 40%   
females 1.7 0.002 43%

*a test table with merged cells*
	average	red eyes
height	weight
males	1.9	0.003	40%
females	1.7	0.002	43%

在浏览器中的显示效果如下图：

2. 表头和表尾

从结构上看，表格可以分成表头、主体和表尾三部分，在HTML语言中分别用thead、tbody、tfoot表示。

代码示例：

...header information......footer information......first row of block one data......second row of block one data......first row of block two data......second row of block two data......third row of block two data...

这里有三个注意点：

1）thead和tfoot在一张表中都只能有一个，而tbody可以有多个。
2）tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要。
3）thead、tbody和tfoot里面都必须使用tr标签。

3. 列的分组

tbody可以用来对“行”进行分组，而colgroup则用来对“列”进行分组。

比如，下面的代码表示前40列为一组，每列的宽度为20像素。

        

span属性，可以指定colgroup标签能够影响到的列数。

在colgroup标签内部，可以使用col标签为这一列组中的每一列指定属性。

比如，下面的代码表示列组中每一列的段度为20像素：

                        ...a total of forty COL elements...

再比如，如果40列中只有最后一列的样式不一样，那就这样写，方便在CSS中指定：

                      

4. CSS中的table-layout语句

这个语句可以用来指定表格显示的样式，比如

table { table-layout: fixed }

它可以取三个值：

* auto（缺省）
* fixed
* inherit

auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。

顺便说一句，为了加快表格显示，最好事先就在CSS（或者table标签的width和height属性）中指定表格的宽度和高度。

5. th和td

表示单元格的标签是th（table head）和td（table data），前者用来显示数据的名称，后者用来显示数据的内容。

代码示例：

        Month      Savings    
        January      $100

Month	Savings
January	$100

这两个标签有一些很复杂的属性，分别是abbr、axis、char、headers和scope，详细解释参阅这里。

6. frame和rules

table标签的frame和rules属性，可以控制边框的显示。frame属性控制着表格最外围的四条边框的可见性，而 rules 则控制着表格内部边框的可见性。

frame属性可取的值及含义如下：

* void - 默认值。表示不显示表格最外围的边框。
* box - 同时显示四条边框。
* border - 同时显示四条边框。
* above - 只显示顶部边框。
* below - 只显示底部边框。
* lhs - 只显示左侧边框。
* rhs - 只显示右侧边框。
* hsides - 只显示水平方向的两条边框。
* vsides - 只显示垂直方面的两条边框。

rules 属性可取的值有五个，分别是：

* none - 默认值。无边框。
* groups - 为行组或列组加边框。
* rows - 为行加边框。
* cols - 为列加边框。
* all - 为所有行列（单元格）加边框

代码示例：

My Ultimate Table
cell 1-1 cell 1-2 cell 1-3 cell 1-4
cell 2-1 cell 2-2 cell 2-3 cell 2-4
cell 3-1 cell 3-2 cell 3-3 cell 3-4
cell 4-1 cell 4-2 cell 4-3 cell 4-4