视觉设计思路和技法

视觉设计思路和技法

目录

前言 (2)

项目 (2)

构思 (2)

制作 (3)

背景 (3)

主界面（普通模式） (3)

歌曲列表 (11)

主界面（迷你模式） (13)

均衡器 (13)

歌词显示 (13)

互联网歌曲库 (16)

完成 (16)

作业 (19)

史上最好的平面设计视频教程

https://www.360docs.net/doc/b24288964.html,/item.htm?spm=2013.1.1000774.68.RTKvys&id=1712179509

2

免费广告学视频教程成功电视广告案例分析和CorelDRAW案例实战全

https://www.360docs.net/doc/b24288964.html,/item.htm?spm=2013.1.31-8314319771.3.RTKvys&id=15918

726206

武汉大学平面广告设计最新视频教程

https://www.360docs.net/doc/b24288964.html,/item.htm?spm=2013.1.31-8314319771.12.weuVo5&id=1620

9661249

武汉大学广告策划与创意新视频教程

这是我参与部门技术分享的第三次了，前两次的分享偏重于概念和理论，对于一些实际的设计思路和方法分享的比较少，为了保证部门分享在技术应用层面的有效性和可持续，我计划将一些曾经做过的独特的、有意义的项目进行梳理和总结之后，给大家进行介绍，这里将减少一些理论性的描述，重点会放在界面构思和视觉设计实际的操作，希望大家的工作能够有所收获。

项目

千千静听皮肤设计，选择这个项目的目的是因为技术类培训相对比较枯燥，而此类皮肤设计有别于通常的系统类界面设计，相对要求界面生动活泼，可自由发挥度高，用它作为第一次的技术类设计分享，目的是希望能够调动大家对于界面设计更深的兴趣，使培训不再那么单调，仅此而已。

构思

我们要设计一个界面，首先要了解一个界面的应用范围，受众，包括哪些必备元素，哪些元素是可以个性化的，哪些是必须严格遵守规范的。

我们知道播放器通常包括主界面（普通模式、迷你模式）、均衡器、歌曲列表、歌词显示、互联网歌曲库5大部分，按应用划分就有6个界面需要设计，我对这个界面设计的定位是温馨的、独特的，在造型方面希望有别于一般的播放器界面，我把日常生活用到的电器、家具等应用在上面提到的6个界面组件中，那么“家”这个概念就已经成型了，具体需要设计的界面分别是：

1.主界面(普通模式)—家庭影院

2.主界面(迷你模式)—书柜顶部

3.均衡器—空调

4.歌曲列表—明亮的窗台

5.歌词显示—投影布

6.互联网歌曲库—书柜

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

背景

既然皮肤的定位是“温馨、家的概念”，那么在整体色彩的选择上也要向这一点靠近，在PS中新建一个画布，,1000 x600，颜色值#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.对一些关键的界面元素进行模仿或重新设计，例如均衡器可以采用其他的方式

来设计。