设计分享

[教程] 如何制作一张3D复古拼贴海报 Part II

先应景儿普及一下3D知识啊

那么3D究竟是什么呢?

D是英文Dimension(线度、维)的字头,3D是指三维空间。国际上是以3D电影来表示立体电影。   
人的视觉之所以能分辨远近,是靠两只眼睛的差距。人的两眼分开约5公分,两只眼睛除了瞄准正前方以外,看任何一样东西,两眼的角度都不会相同。虽然差距很小,但经视网膜传到大脑里,脑子就用这微小的差距,产生远近的深度,从而产生立体感。一只眼睛虽然能看到物体,但对物体远近的距离却不易分辨。根据这一原理,如果把同一景像,用两只眼睛视角的差距制造出两个影像,然后让两只眼睛一边一个,各看到自己一边的影像,透过视网膜就可以使大脑产生景深的立体感了。各式各样的立体演示技术,也多是运用这一原理,我们称其为“偏光原理”。   
3D立体电影的制作有多种形式,其中较为广泛采用的是偏光眼镜法。它以人眼观察景物的方法,利用两台并列安置的电影摄影机,分别代表人的左、右眼,同步拍摄出两条略带水平视差的电影画面。放映时,将两条电影影片分别装入左、右电影放映机,并在放映镜头前分别装置两个偏振轴互成90度的偏振镜。两台放映机需同步运转,同时将画面投放在金属银幕上,形成左像右像双影。当观众戴上特制的偏光眼镜时,由于左、右两片偏光镜的偏振轴互相垂直,并与放映镜头前的偏振轴相一致;致使观众的左眼只能看到左像、右眼只能看到右像,通过双眼汇聚功能将左、右像叠和在视网膜上,由大脑神经产生三维立体的视觉效果。展现出一幅幅连贯的立体画面,使观众感到景物扑面而来、或进入银幕深凹处,能产生强烈的“身临其境”感。
以上介绍来自百度百科

看完了我们继续我们的教程,3D眼镜准备好了么?
先看下今天的最终效果:
yecoir-3D

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[大图见此]

[下载PSD分层文件]

然后我们就开始吧!

第一步
打开你之前做的海报。复制所有图层,合并它们,命名为“green”。注意不要把图层直接合并,因为分层文件接下来我们还会用到。
现在复制“green”图层,命名为“red”。注意保持red图层一直在green图层上面。
39

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第二步
这一步是非常关键的,请仔细看好,这两个叠加图层将在接下来的几步中帮我们完成3D效果。
01.选择red图层,选择“图像”〉“调整”〉“通道混合器”。“输出通道”选择“红”,“源通道”中“红色”值调至100%,其他参数为0%。
40

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

02.接着“输出通道”选择“绿”,“源通道”中“红色”“绿色”“蓝色”数值均设为0%。
41

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

03.最后“输出通道”选择“蓝”,“源通道”中“红色”“绿色”“蓝色”数值均设为0%。点“确定”。
42

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

现在你的red图层看上去应该是这样的:
43

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

04.暂时隐藏red图层,选择green图层,选择“图像”〉“调整”〉“通道混合器”。“输出通道”选择“红”,“源通道”中“红色”值调至0%,其他参数均为0%。注意:这次不用动其他输出通道。
44

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

设置完成后green图层的样子:
45

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第三步
重新点亮red图层。设置混合模式为“滤色”。你会发现整体图像的颜色又回到了之前的状态:
46

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第四步
这时候~神奇的事情发生了。选择红色图层,向左移动近30个像素。戴上你的3D眼镜,告诉我你看见了什么?:)
47

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

没错,现在已经有一些3D效果了,但还不是特别理想。因为3D效果覆盖了整个画面,看起来还是显得平均。
接下来我们处理一下层次……

第五步
先来处理恐龙的3D效果。
01.复制red和green图层,合并它们命名为monster-3D。然后隐藏red和green图层。
找出分层文件里monster图层,复制2个。然后拖到monster-3D层以下。
48

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

02.把monster其中一个副本向左移动到与red层恐龙重合的位置。然后跟另一个monster层合并。
49

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

03.选中monster-3D层,右键〉创建剪贴蒙版。
50

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

好~再戴上3D眼镜看下~现在只有恐龙是立体的了。但是还没有结束。

04.将monster-3D层向下拼合图层,然后点击添加图层蒙版。
51

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

05.保持蒙版被选中,前景色为黑色,选择渐变工具:
52

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

06.编辑渐变模式为半透明,选择线性渐变,从恐龙脚的位置自下向上拉到文字位置:
53

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第六步
用同样的方法处理标题文字。
01.复制red和green层,拼合图层,命名为“大袭来-3D”。
复制大袭来文字和其阴影图层,拖到“大袭来-3D”层下方。
54

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

02.拼合“3D”下方的文字和阴影层,并复制一个。将其中一个向左移动至与“red”层中重合的位置。
55

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

03.拼合两个文字层。选择其上面的“大袭来-3D”层,创建剪贴蒙版。
56

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

04.向下拼合“大袭来-3D”层。
打开“monster-3D”层,戴上眼镜检查下,效果还不错是吧?
57

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

但是我们看到跟恐龙叠加在一起的副标题部分还需要处理一下。
58

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

05.把两个文字图层复制并拖到“monster-3D”层上。
59

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

06.复制上述的这俩图层,左移至red层相应位置。然后拼合他们和之前的俩层。命名为“文字”
60

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

07.然后,选中原海报的所有层,复制,合并。拖该层到“文字”层上方。创建剪贴蒙版。
61

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

向下拼合该层,然后命名为“副标题”。
好了~这时你可以放到100%大小检查一下,没问题!
62

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第六步
再用同样的方法处理建筑残破的碎片。
经过上面的练习你应该记得大致步骤吧:
(1)复制碎片图层拖放到“red”“green”以上。
(2)复制“red”和“green”俩图层,合并,命名为Destruction-3D,然后拖放到刚才复制的碎片图层以上。
(3)复制一个碎片图层,左移,移到跟red层里它的形状重合的位置,然后跟原位置的碎片层合并。
(4)将Destruction-3D层创建剪贴蒙版。
63

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

向下拼合Destruction-3D。这就是碎片层的3D层。

第六步
再用同样的方法处理建筑残破的碎片。
经过上面的练习你应该记得大致步骤吧:
(1)复制碎片图层拖放到“red”“green”以上。
(2)复制“red”和“green”俩图层,合并,命名为Destruction-3D,然后拖放到刚才复制的碎片图层以上。
(3)复制一个碎片图层,左移,移到跟red层里它的形状重合的位置,然后跟原位置的碎片层合并。
(4)将Destruction-3D层创建剪贴蒙版。
64

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

向下拼合Destruction-3D。这就是碎片层的3D层。

第七步
返回kid图层,复制它。将眼镜部分抠图,然后拖到red层之上。
接下来不用说了,用之前的方法,把眼镜部分做成3D的。
65

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

至此,本教程基本结束。
当然你可以根据自己的兴趣继续添加好玩的效果。
你也可以运用本教程中提到的各种PS技巧,将自己的照片做成好玩的3D图片。
祝愉快~

[教程] 如何制作一张3D复古拼贴海报 Part I

前言:
插画画过很多~但写这种记录式的教程还是第一次~
欢迎讨论提问吹捧膜拜以及批评指正:)

好~先来看看今天这部分的最终效果:

yecoir

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  [大图见此]

接下来我将一步步展示给你制作的过程~
对了~你可以在[这里]下载到本教程中用到的图片素材:)

第一步
在photoshop中创建一个新文件:大小A4(21cm x 29.7cm)、分辨率300dpi、RGB颜色模式、白色背景。如下图:
1

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

由于后面添加3D效果的时候需要将图片偏移,所以我们需要增加一些“出血”来确保图片的完整。在“图像”〉“画布大小”中,把宽和高增加2cm(23cm x 31.7cm)。
2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第二步
拖进来一张街景的照片做为一个新层,ctrl+T变换图像至下图所示位置。命名这个层为“City”。
该图片可以在前面下载的压缩包里找到。
3

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第三步
接下来的几步里,我们要替换一个更加诡异的、具有视觉表现力的天空,所以我们需要把建筑物“抠图”。
抠图的方法和技巧有很多种,通常我都会用钢笔工具来完成。
如果目标物体轮廓清晰、与背景明度差距较大,也可以用以下方法:
01.切到“通道”,复制蓝色通道,如图:
4

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

02.ctrl+L打开“色阶”,调整至以下效果:

 
5

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

03.这时可以打开其他层通道做对比,用黑色笔刷仔细将建筑物轮廓线以内填满,细节处适当借助钢笔工具。这个区域将是你最后保留的区域(所以天空位置如有黑色应该用白色填充)。

 
6

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

04.关掉其他颜色通道后检查一下,没错应该是这样的:

 
7

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

05.选中蓝色副本通道,点“载入选区”按钮:

 
8

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

06.然后,点选RGB通道如下图:

 
9

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

选好了吗?点“Delete”删除键。
07.现在抠图的工作已经完成,删除“蓝 副本”通道。回到图层面板,这就是我们要的结果:

 
10

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第四步
01.现在打开天空的图片并拖到我们的场景中,调整大小,放在city图层下面命名为“clouds”。

 
11

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

我们看到主体场景已经出来了,但建筑跟天空的光影关系结合得并不算太好,别急,稍作调整。

02.选择“city”层,双击进入图层样式,点选“光泽”,按照下图参数进行设置。

 
12

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

03.现在,建筑物的明暗更加明显,并且跟天空发出的光源方向基本融合了:

 
13

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

04.但是这样还不够,选回“clouds”层,创建新的填充或调整图层 〉照片滤镜,进行如下设置:

 
14

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

15

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

05.现在的结果:

 
16

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

现在的整个场景基本达到了我们要的氛围,差强人意的是街道上过于悠闲的人……
当然我们可以用“克隆图章”工具把他们P掉,但考虑到之后的工作可以用其他前景物进行遮挡,所以为了节省时间暂时不做处理了。

第五步
这一步的主要任务是把恐龙置入场景。这里我选择了一张3D渲染的图片素材(因为实在没找着更好的)。
01.按照下图位置置入并用之前建筑图层的抠图方法把背景去掉。

 
17

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

结果:

 
18

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

02.给被怪物冲过的街道和建筑添加一些残破的效果,把Destruction_1、Destruction_2俩图拖入层中,至于建筑物周围。

 
19

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

03.合并俩层,再来点动感模糊吧……

 
20

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

04.现在给恐龙添加投影。
(1)复制恐龙的图层命名为“Monster shadow”并把该层置于恐龙层下,填充为黑色。
(2)编辑〉变换〉垂直翻转
(3)Ctrl+T 自由变换

 
21

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

但你知道,阳光从后上方射过来,投影肯定有一部分是被身体遮挡,不可能出现如此清晰的剪影。
所以请发挥想象力自行修改一些局部的影子轮廓。

 
22

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

设置阴影层不透明度为60%,高斯模糊为5。

 
23

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第六步
用上一步骤的方法,加入一些奔跑的士兵。注意影子的位置,它应该是在恐龙后面的。

 

24

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第七步
选择“矩形工具”,在图下方做一个遮挡,颜色值为#605d39。这是接下来填写文案的位置。

 
25

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第八步
把主体人物置入画面中,抠图步骤不再赘述。
当然不是每一张你选择的图片都能非常适合场景的环境,无论在颜色还是明度上多少都需要一些调整和修改。
这里我提供直接去掉背景的PSD文件,节省大家的时间。
日后在设计自己的插图时你会发现,其实抠图改图也是一种乐趣。:)

 
26

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第九步
下面添加一点趣味性,从小枪里发出一缕光束。用钢笔工具勾画,颜色值为#cdac5f,填充50%。

 
27

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第十步
到这里我觉得有必要再统一一次颜色。从“创建新的填充或调整图层”去“照片滤镜”,按下图设置。

 
28

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

现在我们得到的结果是这样的:

 
29

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第十一步
到了该添加标题文字的时候了。
现在我决定休息一下,顺便检查整个画面……
做图的过程就是这样,有时你盯着画面一两个小时后会有一定的惯性或审美疲劳,很难发现其中的问题。
这时不妨换换脑子休息一下,或者邀请别人来看下你的画面。
不要吝啬把做图的过程步骤与别人分享,这对自己来说也是很好的进步的机会。(真虚伪……)
话说回来,最后我发现,中间建筑边缘的线条过于平均、天空细节过于丰富跟前景抢视觉,这些都使画面看起来不那么顺眼。
接下来调整一下吧。
01.我希望画面中的建筑剪影高低错落,有节奏感。
查看整个画面,我发现右边那部分是可以改动的,而且很简单,复制一层楼上去就可以了。
首先复制出另一个city图层,用钢笔工具勾出你需要的部分>>>建立选区>>>反选>>>删除多余的。
把这层楼拉高到合适的位置。如下:

 
30

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

02.选择天空图片所在的图层,将其水平翻转,调至合适的位置。
再来看看结果:

 
31

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

好了,图片部分暂时这样。我们开始下一部分—–字体。

第十二步
无论在一张海报还是宣传单或者名片封面的设计中,字体的选择都是成败的关键。
关于如何使用恰当的字体有很多资料可供学习,在这里不是讨论的重点。
关于标题,我需要一款类似于六七十年代武打片或科幻片那种字体。就像《恐龙特急克塞号》。
可是在我有限的字体库里实在找不到合适的,只能用钢笔工具画一个。

 
32

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第十三步
把字体置入图中。
01.Ctrl+T自由变换〉透视〉斜切。最终如下图:

 
33

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

02.复制该图层填充较深颜色,向右下方稍微移动做为文字的阴影。

 
34

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

03.下面要把恐龙的嘴露出来:复制恐龙图层,勾选被文字遮挡部分,删除其余,拖到文字上方。

 
35

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

04.调整文字位置(向下稍微移动一点就好了),现在的效果:

 
36

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

05.置入副标题和其他文字。这里副标字体为“方正汉真广标简体”颜色为#c3ee85,变换〉斜切;小字为“方正兰亭特黑长_GBK”颜色#dcd4ab。同时把主标题颜色改为#f8f2d2。

 
37

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第十四步
再次检查图像,整体调整。
01.还记得前面给建筑物做的残破肌理吗?可以再强烈一点。复制>水平翻转,移至适当位置。
02.主体人物枪的光速,复制该图层,拖到原图层下面,动感模糊。
03.光速原图层前面缩窄,高斯模糊15。

 
38

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

做好了吗?
明天我们继续利用这张海报添加3D效果~
请自备3D眼镜:)

精确搜索&快乐消费组 大清谷outing

4589095568_cd92d44cf2_o

因天公不作美,一直小雨不断,不过该做的都做了!

【分享会笔记】“所有程序”与“回收站”的讨论

本周团队内部设计师交流会上,月漓同学的原型评审中一个问题引发了一段长时间的讨论。这是一个用户自定义导航链接的交互设计任务,用户可以对List A和List B的链接做排序和隐藏操作,与windows开始菜单非常相似。

l1

月漓的做法如下,鼠标悬停在ListA下的链接a2上,出现一个删除按钮。

l2

点击删除a2后,List  A中的a2消失。同时所有菜单中的a2变灰,显示“已隐藏”文案,增加一个“显示”链接。

l3

先来回想一下windows “开始菜单”的操作方式:点击“所有程序”弹出程序列表,选择某个程序点击右键“附到开始菜单”。该程序会出现在“开始菜单”中,在“所有程序”中也不会消失。也就是说“开始菜单”是“所有程序”子集。月漓的方案正是这个思路。

之后有同学提出不同意见,认为已删除和未删除的链接都出现在右侧区域内意义不大,只需要把已删除的链接展示出来即可。把“查看所有菜单”改成“查看其它菜单”,显示已隐藏的链接。理由是用户不用看到重复的信息。

l4

按照这种思路,两者就变成“开始菜单”与“回收站”的关系了。

如果说 “所有程序” 与 “开始菜单”是复制粘贴关系,那么 “开始菜单”与“回收站”则是剪切粘贴关系。

那么这时候应该用“所有程序”还是“回收站”呢?归根结底是信息初始化的问题。

在windows系统里,用户根据需要从 “所有程序” 发送链接到“开始菜单”,这是“初始为空,按需增加”的过程。在互联网产品里,比如用户在开心网上安装一个应用,这个应用在应用列表中并不会消失,只会标记“已安装”。这也是 “初始为空,按需增加”的过程。

月漓这个项目场景则是“初始为全,按需删减”,如果用“所有程序”那么初始情况下会出现两个“所有程序”,难怪有同学提出:信息太重了。

最后,把个人观点总结成一句绕口令:

1、  列表初始内容为空的时候,应该用“所有程序”,信息从“所有程序”复制到列表

2、  列表初始内容为全的时候,应该用“回收站”,信息从列表剪切到“回收站”

交互设计师-成功有效的团体沟通(3)

本文主要涉及三个部分内容:

  • 演讲的基本要素
  • 演讲、演讲人、听众
  • 有利演说的挑战(提高技艺)

Read more »

卖家增值生产队,我们的2009

web设计团队角色关系

一个国外设计师定义的web团队的角色之间的关系,如图。个人感觉还是定义的蛮科学的。

原文地址:http://blog.braintraffic.com/2010/01/behold-the-mighty-hive/

p56715623-1


				

我们需要怎样的分享?

杀了几轮三国杀,稍微缓解了上班的疲劳,回来路上和平四同学聊起了设计师的分享,或者說我们的分享机制。

早年间,大团队内部的分享更多是答疑解惑,每个人把自己工作遇到的问题抛出来利用团队力量解决,或是把自己的老经验小巧思介绍给大家。后来呢,分享这件事变成了工作的一部分,连话题也渐渐审慎起来,多少有点例行公事。

不少新来的同学都苦闷于不知道要分享什么主题,而自己费劲巴拉准备的PPT又能给别人带来多大的收益呢? 我也时常为分享犯愁,所谓己所不欲,勿施于人,自己最怕听那些大道理,所以很想把写作或者演说内容搞得充分一些再分享给大家。无奈水平有限,尽管有时候用心准备了,对他人可能依然是无用之物。 所以在闲聊时总结了下自己比较倾向的三类分享:

1.方法+贴士

新人和老枪差在哪儿?多数时候无非是经验的差异。提及体验啊、交互啊,从业的同学们都能说出个10条准则、5 个要素的,但真到了工作中又不知道怎么做才能达到那个高度。人人心中都个美好的愿景,只是没人提供那理想的阶梯。 所以做事的方法和技巧很重要。方法也并非那种高深的方法论,而是着眼于小处,从实践中总结的步骤、手段,受众们只要照着去做再加上一点儿悟性就能提升自己的设计。 以前从觉得老外啰哩吧嗦,总把几句话的道理写成一大本书,然后填充各色的举例证明、贴心提示,细致到不行,现在觉得这类书或分享才是最快受用的。

2.工作坊

小团队中流行一句话,做过就比没做强,理论需要实践的验证。对于我这样的懒人,工作坊算是寓教于乐的方式。一方面传达了方法,一方面又能让受众马上去实践一下这个方法。高度的参与感 UPA时参加两场工作坊,美国同学的风格热情,多在训练意识和表达;台湾同学的风格精细,意在快速上手掌握方法。两场下来倒是学习不少做分享的经验。

3.工作范畴外的知识

页面需要留白,工作也需要呼吸,所以分享可以涉及一些与日常工作和专业无关的话题,放松的讨论。而交互设计或者广义的设计本身就是很包容的学科,需要我们什么都知道一些,让自己的思维不会僵化。艺术不是来源于生活?可生活不只是原型+代码。

自己悟性较差,所以现阶段还是喜欢比较实用的分享。

交互设计师-让世界因你而不同(1)总述

交互设计师-让世界因你而不同-系列文章目录

交互设计师-让世界因你而不同-系列文章目录


交互设计师-让世界因你而不同系列文章【脑图】

交互设计师-让世界因你而不同系列文章【脑图】

在不注重用户体验的公司,交互设计师等于美工。

在不注重商业审美的设计公司 ,交互设计师等于美工。

在不注重创意的广告公司,交互设计师等于美工。

美工没有什么不好,但是很多人都自称是设计师 ,都感觉自己在做设计。设计师也不是什么牛B的事情,很多人只会软件就会创意。

交互设计师的关键概念是什么?

  • 商业的,区别与非商业的艺术/画家/涂鸦/玩票/自己感觉很吊
  • 创造性,区别与抄袭/纯粹依靠图库/依赖装饰和素材
  • 科学的,区别与个人的主观臆断/所谓的灵感/没有事实的根据
  • 审美的,区别与垃圾的/文字和图片的堆砌/没有生命的图象/让人不感觉愉悦
  • 独立的,区别与没有见解/没有判断/没有坚持/完全受别人控制

Web交互设计师的定义

秉承以用户为中心的设计理念,应用“以目标为导向的设计”方法,进行互联网产品的设计

这是关于交互设计师的一个基本定义。无论是现有的交互设计师或是对交互设计有兴趣正打算入行的人都会考虑这个问题。“到底交互设计师是干什么的?”“怎么干?”“是因为我在网页设计方面有经验有能力于是就能当交互设计师了吗?”交互设计师首先需要 认同“以用户为中心”的设计理念。有了为用户着想的观念,接下来就是方法,怎么设计才能很好的为用户服务?在我看来,目前实现UCD最有效的方法就是 Alan cooper提出的“以目标为导向的设计”方案。实际上“交互设计”这个名词也是他提出来的。

交互设计师的特点

交互设计师善于表达,以网页语言表达,以网页语言表达产品要告诉用户的信息,要显示给用户的操作功能。所以,凡是涉及到表达、传达的问题,都可以找交互设计师来做,也应该由交互设计师来做。产品经理考虑要做个什么产品才有价值,交互设计师考虑怎么把这个想法最有效的转化成一系列的界面展现给用户。除了展现,还有和用户的交互。这个展现、交互的过程就需要一定的表达能力。这种表达能力并不是我们平时所特指的口头表达,而是使用网页语言表达。我们经常会讨论一个按钮的位置,讨论某个状态下光标的样式,声讨应该写成“登录”而非“登陆”。这些都是网页语言表达。
有些时候,有些交互设计师会问,“网页上的文字要我来写吗?产品经理比我了解的更清楚,他(她)们写吧?”如果说交互设计师的应该具备“善于表达”的特点,那么,网页上的文字就应该由交互设计师来编写,虽然产品经理更了解产品,但是产品经理并 不是最懂得如何想用户表达的人,交互设计师是。我们会讨论“你”还是“我”这样的称谓问题,会注意不要在页面上出现“用户”这样的字眼,这些都是文字表达的问题。

对交互设计师的要求

文字表达能力:写邮件,写blog,写各种东西。如前所述,文字表达是页面表达的一部分,具备一定的文字表达能力是必要的。
语言表达能力:多说,开会的时候要发言,一对一的讨论要花心思。
较好的语言表达能力是与同事沟通的必要素质,更为重要的是,语言表达能力是表达能力的一种体现。如果面对面,一对一的交流都有困难,怎么能保证用页面间接的跟用户交流能交流清楚呢。

web交互设计师的工作内容

对产品进行行为设计和界面设计。

行为设计是指各种用户操作后的效果设计。Web的操作以点击为主,点击操作又可以分为“表单提交”类和“跳转链接”类两种。除点击外,还涉及到拖拽操作等。

界面设计包括:页面布局、内容展示等众多界面展现。例如:使用按钮还是使用图标?字号大小的应用,如何使用tab….. 之所以特意提出这样一个话题,是为了强调除了“界面设计”,还需要“行为设计”。交互设计在被认识的过程中会有很多误区,常见的是把交互设计理解为一种专 业的、高级的界面设计。一个产品不好用很多时候是因为流程上有问题,页面表现的挺合理,但是,点击了一下之后,就会发现“走不下去了”。流程是一系列的操 作,也需要设计。

如何进行一个产品的交互设计?

第一步.信息构架设计

深入理解产品的目标、功能需求。将这些目标、需求转化为界面表现。把内容合理的归类整理为若干的界面。信息构架的设计意味着对导航的设计。“导航栏共有几级?每级几项?”这些问题将随着信息构架的设计而确定。
信息构架设计的要求:

  1. 符合用户心理模型。
  2. 尽量保持窄而浅的信息树这一步工作需要和产品经理充分的交流。

第二步.界面细节设计

在整体信息构架确定的基础上,对界面上的细节进行推敲。界面细节设计的要求:

  1. 符合web可用性标准
  2. 符合图形用户界面的基本准则
  3. 符合现有互联网上业已形成的设计习惯……
  4. 符合大多数互联网用户使用电脑的习惯(目前只想到这几条)

这些细节设计更像是交互设计的专业,通常其他职位的人不会染指。显然这些工作是很有价值的,但是创造性并不大,价值也不很大。随着互联网这个行业的成熟,细节上的表现会更统一、规范。也许今天我们今天激烈争论的问题,几年后已经很成型了,不需要 再争论了。相比之下,信息构架的设计更具有创造性,自由度更大。

如何成为一名交互世界师?

5年前,Robert Reimann为Cooper通讯(the Cooper Newsletter)写了第一篇题为《如果你想成为一名交互设计师》的文章。和许多人一样,我读后大受启发:那正是我理想的职业。听从Reimann的 建议,我接受培训,成了一名交互设计师。

现在,因为我的书的缘故,我发现人们开始问我同样的问题:如何成为一名交互设计师?成为一名交互设计师意味着什么?每天究竟要做哪些工作作?Reimann的佳作依然值得借鉴,在此基础上我再补充些我自己的看法。

最近五年的交互设计

在Reimann写下《如果你想成为一名交互设计师》之后的5年中,交互设计领域发生了许多变 化。网络泡沫导致不少设计师纷纷离开这个领域。但是网络新近的复苏又使新的从业者加入进来。为了促进业内知识的累积,交互设计师们成立了一个新的团体:交 互设计协会(Reimann为首届主席)。此外,继软件、互联网等“传统”业务之后,交互设计开始进入一些新的领域,包括手机,医疗设备,金融,娱乐与零售服务等。

而传统领域也在发生变化:互联网已成为应用软件设计的平台,即便是那些无需在线编程和运行的软 件,也日渐成为“在线工作”与“线下工作”的混合体。就连操作系统也在逐步摆脱25年前赖以建构的桌面隐喻的束缚。一切都显得那么自然,有如探囊取物—— 使交互设计师在今天成为一份理想的职业。

交互设计师的一天

根据时间和项目的不同,交互设计师的日常工作包括:客户访谈,现场研究,头脑风暴,撰写文档, 制作原型以及产品测试。具体工作取决于项目进程。除了埋头撰写文档的日子(如框架构建),每一天都会有所不同。不错,依然有很多EEMP:写邮件 (Email),收邮件(Email),会议(meeting)和报告(presentation)。但其间也不乏令人兴奋的时刻。

交互设计师受聘同创意打交道——使抽象的想法付诸现实。很少有工作能够这般精彩。你可以通过头 脑风暴,想象前所未有的事物,然后建造出来。还可以塑造行为,使世界变得更加有趣美好。你将用彩笔在白板和“随意贴”上描绘自己的创意,帮助人们解决问 题。如果你足够出色,还有机会同那些拥有先进科技及巨大影响力的公司合作,让世界因你而不同

要实现上述梦想,你必须具备3个条件:气质、培训和经验。

气质

Reimann对于气质价值的论述依旧准确。对于用户的“同情共感”与学习新事物的能力是任何设计师都不可或缺的两大特质。也是该职业必备的基石。

这并不意味着你需要成为“擅于交际的人物”(当然这样更好)。但确实意味着你应当对人类感兴 趣,包括人的行为与局限性。你至少理论上要关注人与社会环境。一名优秀的交互设计师需要学会设身处地为用户着想,而不是把自己想象成用户,或者把用户看作 与自己类似的人。你们很可能截然不同。

在MBTI人格测验中(Myers-Briggs personality scale),拥有“直觉型”人格(“N”:intuitive)同样十分关键。能够凭借直觉进行跳跃性思维对设计师而言至关重要。因为你不可能永远看清问题全局,接触每一个用户,对项目了然于胸。你不得不猜测与假设——这时你需要直觉。

培训

如果你认为自己的气质适合这样的工作,下一步就需要学习一些基础知识。选择好的入门书,如: About Face系列《软件观念革命-交互设计精髓》(About Face 2.0),《Designing Interfaces》与《Universal Principles of Design》。还需要了解你的工作介质,比如互联网,移动通讯和软件系统。你不必成为一名程序员,但需要了解每种介质技术上的可行性。工业设计准则与良好的沟通技巧也很有帮助。

与有经验的设计师共处,无论是在工作中,还是通过非正式的聚会、会议或者在线交流(比如交互设计协会(IxDA)的邮件讨论)同样受益匪浅(我在这里提到的很多问题都曾在那里讨论过)。那些信手拈来的知识,观点与方法都是设计文化的一部分。少说话,用心听。

快速培训的途径之一即在校学习(尽管过程紧凑,学费高昂)。我现在首推三所学校:卡耐基-梅隆 大学(Carnegie Mellon)、伊利诺斯州立大学的设计学院(Institute of Design)和英国皇家设计学院(Royal College of Art)。遗憾的是,上述学校提供的都是面向研究生的课程。我还不知道任何本科阶段的交互设计专业。不过相信未来几年将会出现。

没有交互设计的本科专业,大学阶段该如何准备呢?我的建议如下:进入一所好的设计院校学习工业 设计或传媒设计(你都能学到有用的技能),或者关注设计以外的任意领域。人文学科、人类学、文学、心理学、社会学、戏剧、政治、文化研究——都有助于你成 为一名更加丰富的设计师。

经验

培训与知识储备,这些还远远不够。即便作为一名交互设计读物的作者,我依然认为书本只能为你提供从业背景,只有设计本身才能让你成长为一名交互设计师。

设计经验从何而来呢?主要有两个方法:一所好的学校能让你接触到现实课题(关于商务、技术以及用户限制);你也可以提供专业设计或免费为别人设计(后者非无路可走请慎用)。

邮件讨论,本地团体与人才市场是着手找工作的首选。多数工作是通过口头推荐找来的,因此同其他设计者的联系也能有所帮助。

自我展示

尽管Cooper,Google那样的公司会在求职过程中或让你完成一系列的测试,所有的公司都要求作品展示(portfolio)。准确地说你要准备两类作品:一份在线,一份书面。

在线作品集应当提供作品综述,可以包含一些样本文件。

书面作品集(面试携带)则是对作品更加深刻的展现,以便你论述项目问题与解决过程。不要光介绍成果,工作过程很重要。没有作品怎么办?找找看。这个世界充满有待解决的问题,设计一个解决方案。

为什么要做交互设计师?

因为这样你就能改变世界。不错,我们貌似只是在修补按钮、下拉菜单、仪表什么的,但真正的工作 却是改变这个世界,一点一滴……让它更加人性。我们帮助人们完成日常工作,无论是游戏,救生还是转账。我们将自己的价值注入这个世界,让事物变得有用,易 用,愉快,健康。这样的工作真不赖。

高级交互设计师

职位描述:

  1. 对交互设计过程有深入的了解,可以独立完成整个设计过程(交互流程、角色模型等等交互设计方法能熟练应用);
  2. 开发产品原型,配合进行用户测试及分析。
  3. 协助产品开发人员和界面/视觉设计师进行详细设计和产品实现。

任职资格:

  1. 交互设计/工业设计/人因工程/工业心理学等相关专业本科(含)以上学历,
  2. IT交互设计从业经验两年以上,具有较多的实际产品经验者优先。

如果您 健康积极有朝气,对互联网行业充满兴趣与激情,渴望成功
如果您 具有创新意识和高度的责任心,具有较强的适应能力
如果您 具备较好的专业素养和职业修养,善于沟通协作

那么,你可以胜任一名交互设计师!

by 老三

经历TSP项目与服务大厅2期后感——期待高效的团队和规范的设计制作过程

在项目中成长自己:
         随着TSP项目进程逐步的深入,我对CRM后台也更加的了解,但对自我来说这些了解还远远不够;还需要更多的深挖。在项目中深知要想做好产品,必须先成为该类产品的专家才能做得更好。在TSP项目中这种深知的感觉尤为真切。

         在TSP项目由于前期很多细节逻辑和需求不够明确,导致后期在同一个问题上反复修改,并且是对已确认的方案进行反复修改,改动范围也较大。暴露出我和项目组成员对产品的深度和广度的了解还不够,对客服小二的操作细节研究得还不够细致,没有能即时发现问题。同时也发现在前期考虑不完善的情况下,后期集体确认的东西,到最后还是改动很大,这本身就不是高效和高质量团队的表现。为什么这么多的内容在后期会推翻重做或修改,这是我们急需考虑和解决的问题。注重效率和质量兼备才是好的项目团队;

          TSP还有一大特点:激烈的讨论演变的争吵。会上的极度争吵不能解决实质性的问题,冷静的沟通效果才会更好。争吵对与会者的思想和精神上的影响也很大的。
如果具有该产品专家的专业深度和专业广度的思维,我想很多产品问题是可以在前期避免的。所以具有专家深度和广度思维将是下一步的努力目标;

         再来说说服务大厅2期项目的一些总结和感受吧。

         在该项目中深知交互、前端、开发的之间交叉的痛苦。由于前端资源的紧张,交互设计师把MOCKUP交付前端之后,前端出完主要页面就交付开发了,开发得担负一定前端的任务把其他页面补全,同时也做必要的页面更改。这样的结果是开发补全的页面往往达不到交互设计师和前端的要求。这个时候交互和前端也需要参与修改,往往这时候的修改比新作页面更烦人。唯一可以解决的方法是以模块的形式组建后台系统。交互设计师利用模块搭建页面,开发根据搭建页面直接开发系统,前端只需要维护和新增模块就OK了。这样三者各负其职,产品展现也得到了高度的统一。现在这个解决方案已经在开始规划和实施了,希望能早日成形。

         在项目中发现问题解决问题,成长自己!

团队的成长才成长自己:
         不断的互相帮助和不断的团队分享,势必会让团队走上自由开放、技术优良的道路上。我会努力帮助团队成长,同时团队也努力帮助了自己的成长。