视觉设计思路和技法Word文档格式.docx

视觉设计思路和技法Word文档格式.docx

《视觉设计思路和技法Word文档格式.docx》由会员分享，可在线阅读，更多相关《视觉设计思路和技法Word文档格式.docx（18页珍藏版）》请在冰豆网上搜索。

前期项目的构思非常重要，他直接影响到后期界面的成型，这个阶段所占用的时间应该不小于整个项目周期的20%。

制作

背景

既然皮肤的定位是“温馨、家的概念”，那么在整体色彩的选择上也要向这一点靠近，在PS中新建一个画布，,1000x600，颜色值#ffe9ae，#fdfcb9，我个人喜欢把画布铺满整个屏幕，这样在视觉上不会受到约束。

在图层样式中做线性渐变，由于渐变用到的比较多，在后面除非我特别指出，默认是在图层样式中做渐变，如图：

背景完成之后，有了这样环境氛围，开始制作组件界面了。

主界面（普通模式）

上面提到的6个应用中首先开始制作普通模式的主界面，因为主界面包含的元素较多，完成它对于定义整体界面的颜色样式有很大帮助。

既然主界面是以家庭影院为设计目标，那么包括的元素至少应该有电视机、机柜、音响构成。

电视机制作如下：

用矩形工具绘制一个180x100的矩形，并在图层样式中添加#2d2d2f、#19191b、#000000渐变和1像素的#000000描边，完成后如下图：

新建图层绘制一个170x90的矩形屏幕，垂直和横向居中，保持离黑色背景有5个像素，添加渐变值#0085e3、#0057cb、角度102，如图：

对屏幕进行修饰，增强屏幕的立体感，方法是对蓝色屏幕进行浅色和深色描边，并新建图层做透明的线性渐变，如图：

同样的，对电视机的黑色边框也进行描边和边框的高亮处理，先在边框上绘制一条白线：

然后选择矩形工具对白线删除羽化，羽化值设为25px，具体是指根据实际效果修改，如下图：

按照上面所讲的方法，完成其他几条边线的绘制，并添加电源显示，整体效果如下：

接下就是电视机柜的制作了，按照上面所讲的使用描边和渐变，先绘制一个大概的框架，如图：

柜子上面的分割线的构成大家请注意看，，一条深色线和一条相对颜色较浅的线，他们组合在一起就构成了一种立体感，这种方法在界面设计中应用很广泛。

现在开始给柜子制作如均衡器的开关了，绘制一个圆角矩形，设置#543007到#7d3809的渐变，#e18e21到#fddca1的外部渐变描边，效果如下：

在这个基础上需要添加按钮的说明和柜子抽屉的拉手，绘制一个高宽小于上图2px的椭圆形，设置#f7c975到#bf6408的渐变，然后再旁边的空白处添加文字，如图：

歌曲列表的按钮就完成了，接着绘制其他按钮，完成后如图：

到这里仍然感觉柜子比较单薄，缺乏质感，有两种方法，一种是采用木纹材质进行叠加渐变，一种是做一些小的修饰，在这里我采用了第二种方法：

现在开始制作音响了，首先仍然是构图，在构图的时候要注意，假如我们对某一样物体比较熟悉的情况下你可以直接绘制图形，比如上面的电视机，还有一种我们不太熟悉的物体，这时候你需要在baidu中找到相应的图片素材做参考，下面的音响是找的是LG的音响做原型的，基本构图如下：

有了形状之后开始制作样式，这里并没有什么特殊的样式，仍然是渐变描边之类的，完成后如下：

接下来要制作音响上的喇叭了，图形设计中看起来是很复杂的东西，只要我们把它拆分成几个元素，那他就很简单了，如下图，

这几个小元素对大家来说画起来应该很简单，几个大小不一的原型，几个像素点，那么组合起来放在音响上面是什么样子呢，如图：

音响上面需要绘制音量控制按钮，绘制一个圆角矩形，设置渐变描边，完成以下效果:

同样的方法绘制音量控制条：

音响部分就完成了，复制一个放在右边，搞成“立体环绕”的效果。

播放器中还有最小化、关闭、固定在顶部等功能，这里我使用电源开关座来表示，开关放在电视机的右边，它的大小取决于电视机和右边音响的距离，绘制正方形，如下图：

使用前面所讲的方法，描边制作如下效果：

第三个开关的制作要重点考虑立体感的效果，物体的立体感和光线的的角度、强弱明暗有关，开关放大后我们可以清楚的看到渐变和阴影在其中起到的效果：

一个看似复杂的图形，仍然是离不开描边、渐变、阴影这些最简单的PS操作，图形设计不在于工具，在于你的思维方式。

现在开始添加播放器的面板信息，如图：

面板中的播放、停止等按钮的绘制也很简单，绘制一个颜色值为#a1deff的圆形边框，在PS中自定义形状工具中有：

并在图层样式中设置外发光：

如图：

复制出五个光圈，并加添相应的按键，如图：

对于上图中的按键如中间的播放按钮是没有锯齿的，我绘制此类小图标的方法是用像素一个一个去画，放大后可看到具体效果：

到这里主界面已基本完成，可是看起来感觉有些单一，那么我们为它在加添一些元素，让界面看起来更丰满真实一些。

在家庭影院中CD是必不可少的，我们需要一个放置CD的柜子，规则的结构比较简单，主要是分格的，里面可以设计一些CD的盒子，小饰品等等，如图先做出简单的布局，然后添加内容：

CD柜的背景需要木纹的素材来装饰，然后就是“摆放CD和小饰品”进去了，这部分和软件功能无关，可以自由发挥，但前提是不能脱离家的主题，如图：

歌曲列表

用房间的窗台来设计歌曲列表传达一种思想，在充满蓝天白云的天空下听音乐不是很惬意的事吗？

呵呵，那么开始吧。

它应该具备以下功能，增加，删除，歌曲信息，查找，编辑，滚动列表等等，最重要的关闭功能。

先绘制一个整体的框架，如图：

接下来制作窗户、云彩、光线，云彩用网上的素材来做，这部分的重点是窗户的明亮度和通透感，如图:

有窗户当然要有窗帘了，先绘制窗帘的滑竿，如图：

接下来的窗帘仍然是用素材来制作，窗帘的颜色不要与主色系差异过大，否则会显得比较突兀，如图：

接下来开始制作功能图标了，在这之前先给窗台做一个木板，如图：

功能图标的设计也不能脱离家的概念，我使用了花盆、相片、镜子、书籍来对应相应的功能，如下图:

图标的制作之前有专门的培训已经为大家讲解了，这里不在做描述。

接下来制作歌词列表和滚动条，完成后如图：

最后一个功能是关闭，这里强调一下，因为是家的概念，在设计元素的时候不能在简单的用一个叉来表示了，在这里我使用关闭窗帘的拉手，关闭窗户即代表关闭歌曲列表:

主界面（迷你模式）

迷你模式的播放器界面同样具备了普通模式播放器的功能，如歌曲类表按钮、音量、播放停止等等，设计的重点在于构思界面的布局和相应功能的摆放，以及各功能按键的图形样式。

上图中的每一个组件都是有相应功能的，千千静听的图标采用吊坠的设计，音量控制使用老式的播放器，歌曲属性使用书本加标签的设计，关闭功能使用台灯，功能按钮的构成仍然要家这个概念为主，尽可能的采用相应元素进行设计。

均衡器

均衡器的设计我思考了很久，才决定使用空调的样式来制作，这个界面从技术角度上讲我认为没有难度，重点在于这个“空调”相对于其他界面的大小比例设置以及界面上面各控件的大小，如果空调的大小和主界面一样大，那么在视觉会感到很不协调。

歌词显示

歌词显示让我想到了投影布，一直希望自己有个投影仪在超大的屏幕上看电影，既然买不起那就做一个吧。

在这个界面当中有二个设计点需要注意：

1.幕布边框的羽化；

首先绘制幕布的整体框架如图：

新建一个图层，描边1px#000

选择幕布的整体框架，模糊描边的这个图层，是描边模糊不会超出整体框架的范围，如图：

设置高斯模糊为4.0

确定后效果如图：

这样幕布的整体感觉就出来了。

2.幕布支撑的制作。

我希望绘制两个三角支架来支撑幕布，除中间的竖向支架外，斜角的支架我海事用铅笔一个像素一个像素的去构图，这样的好处是不会有边缘虚化。

使用矩形工具绘制然后变换到45度，可以看到周围边缘的虚化。

最后大家可以看到整体效果如下：

互联网歌曲库

这个界面从系统功能上来说比较简单，要做的应用只有一个关闭按钮，中间内容是采用框架载入web的，为了保持视觉设计上的统一，我使用mini主界面的书柜来做繁衍设计，关闭按钮继续使用台灯部分。

完成

所有的界面都已近完成了，接下来对每个界面场景进行最后一次审核，看看是否有改进或者修改的地方，举个例子，我发现在主界面电视机与电源开关的链接上可以有一点改进，缺少电源线，于是修改后的效果图如下：

回顾上面播放器设计，使用的ps技术包括渐变、描边、投影等，从技术角度来说我把我的设计方式总结为“分解化设计”，把复杂的图形分解为简单的图形逐步完成；

从界面本质来说重要的是产品的定位和概念，在进行视觉实际的时候我们要将产品的定位和概念贯穿始终。

作业

1.从UI的角度描述此项目界面设计的优缺点；

2.对一些关键的界面元素进行模仿或重新设计，例如均衡器可以采用其他的方式来设计。