多媒体界面设计课件

首先，我们知道按钮在效果表现上很大一部分我们是从质 感的表现上来识别的，比如我们最常见VISTA风格的按钮就是从 玻璃质感上变现。大家可以看我找的玻璃瓶素材，很明显就能看 出玻璃瓶的高光、反光和投影。我们在变现按钮质感的时候也多 是从这三方面出发。
实例分析：
玻璃瓶素材
A按钮是完全按照玻璃瓶质感的方式来画的
禁忌： 1、同一页面包含重复功能的链接或按钮 2、将复选框用作单选按钮 3、无初始值的多选一设置 4、在非开/关设置中使用复选框 5、用文本框显示只读数据 6、单选按钮之间间隔太大 7、属性标记对齐方式不一致 8、当前无效的控件不充分置灰 9、显示对用户无意义的错误提示 10、不同的类型页面窗口显示相同的标题 11、窗口的标题和调用的命令不一致 12、要求用户输入随机数
5.借鉴好的程序
多了解同类软件的界面，并加以分析与了解，直到能够区别好的用户 界面与差的用户界面。但不能够机械的模仿别人的界面。
6.变灰的功能 有时有些功能不可用，最好不要删除这些按钮若项目，而是使他们 变灰为不可用状态，这样有助于用户理解整个程序的功能。
界面设计禁忌
基本原则：
1、关注用户及其任务，而不是技术 2、首先考虑功能，然后才是表示 3、从用户的视角看问题，使用用户的词汇进行描述 4、不要向用户暴露实现细节 5、使常用的用户任务简单化，不要让用户解决额外的问题 6、保持一致性，引导用户的使用习惯 7、保持显示惯性，传递信息，而不仅仅是数据 8、设计应满足响应需求
本例中我们利用photoshop设计制 作一款漂亮的MP3播放器界面，教 程主要是练习我们的设计技巧和基 本功，大家可以练习一下。好习惯： 在新填充颜色前新建一层，命名要 有意义，把相同的东西放在同一组 里，这样就不会乱并且容易修改了。 教程中的参数仅供参考，你可以自 己灵活的调整，发挥自己的想像力， 做出更好更漂亮的效果。
研究人----用户测试/研究工程师
任何的产品为了保证质量都需要测试，软件的编码需要测试，自然 UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互 设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组， 用目标用户问卷的形式来衡量UI设计的合理性。这个职位很重要，如果 没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来 评判，这样就会给企业带来严重的风险性。 用户研究工程师一般是心理学人文学背景比较合适。 综上所述UI设计师就是：软件图形设计师、交互设计师和用户研究 工程师。
从这张色谱，大家可以看出色相的微妙关系。 有利于我们做渐变类型的按钮
其它的我会根据我生活中的观察来和大家分享一些生活中的按钮设计， 如图所示这个按钮设计是我仿常见的复印机上面的按钮来设计的，这种按钮 的设计方法也很简单，但是效果很好。同时也加强了用户对界面的亲切感， 更加有利于用户的使用。如下图：
研究人与界面的关系---交互设计师
在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设 计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作 规范（spec）等。一个软件产品在编码之前需要作的就是交互设计，并且 确立交互模型，交互规范。 交互设计师一般都是软件工程师背景居多。
22：创建一层给这个按钮背景加个高光， 用矩形工具画一见P的矩形
23：调整图层模式为叠加， 不透明度为：78%
24：做到这儿的效果见P
25：创建一层，载入刚才第7部 操作的那个图层，进入选区，按 照ALT键减选一部分
26：填充成白色，将不透明 度改成25%
27：此时来画按钮，创建一层， 用多边形套索工具画一三角形， 填充成白色
B按钮是经过对光规律的观察而总结出的自己想要表现方式的 一种艺术处理。主要是为了说明我们在进行参照质感进行按钮 设计的时候要考虑自己需要的艺术效果进行适当的艺术处理。 这样也便于界面制作人的按钮设计，这种风格 的按钮也是我们在生活中经常能见到的，键盘手机就经常采用这 种设计方式，但是随着触摸屏手持设备的普遍，绝大数的键盘界 面都采用模仿原来手机实物键盘的设计方式，这样是为了让用户 对界面产生亲切感，同时这样的设计也看起来更加简洁美观 。
28：提高图层样式(渐变叠加)， 这儿看看渐变条的设定
29：加上图层样式(描边)， 留意是渐变描边
30：描边渐变条的设定
31：效果见图
32：按ctrl+r将标尺调出来，好 对齐,创建一层画个相同的矩形， 填充白色，并将刚才播放按钮的 图层样式复制粘贴到暂停按钮中来
33：之后分别做出，停止.快退.快进
键盘素材
C按钮是参照键盘的质感做的样稿
D按钮是选择了同一色相不同明度和纯度所做的按钮，之所以列举这个列子， 是为了说明我们在做这种风格的按钮设计的时候，一定要把握住一个很重要 的问题，那就是一定是在同一种色相中拉渐变，这样的按钮效果才自然，当 然除了设计师追求一些不一样的效果。
E按钮就是我采用的45度角径向渐变的 按钮，是为了说明渐变方式不同最后按 钮的最后出现的效果也会不同，就这一 点我们设计师可以设计出很多不同形式 的按钮。
3.设置向导 如果用户使用了一个功能后，不知道如何做下一个，他们就会放弃。 如果工作流程和手工工作流程一致，用户就会努力去完成它。最好的方式 来引导用户就是在桌面上设置一个流程向导。
4.提示信息必须恰当且规范 提示信息必须容易理解并且口径统一，比如“您输入了错误的数据”、 “用户编码不能超过8位”。一致的措词，提示信息还应该出现在一致的位置， 如弹出提示窗口、窗口的上方或窗口的下方。对用户的称呼应该统一，比如 有时提示“用户输入了错误的数据”，有时提示“您输入了错误的数据”，有时 又提示“纳税人输入了错误的数据”，这样会使用户无所适从。
界面设计技巧
最好的程序界面就是用户无需去阅读擦操作手册就知道该如何 使用的界面。
原则：
1.一致性 如果你可以在一个列表的项目上双击后能够弹出对话框，那么应该 在任何列表中双击都能弹出对话框。要有统一的字体写号、统一的色调、 统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。
2.设置标准并遵循它 可以参数一些工业标准，如IBM的界面设计规范或MS的设计规则， 它提供了90％你所需要的规范。
多媒体界面设计
近几年，有一个新兴的词在设计领域诞生，这个词就是“UI”。 在短 短的几年里UI设计师越来越多，设立UI部门的企业越来普遍，各大院校也 出现了和UI相关的专业， UI 设计的组织和网站层出不穷。这一切都预示 着一个“UI”大时代已经到来。 到底什么叫UI设计，什么是UI设计师，UI设计师负责什么，UI设计师 的知识背景是什么，什么样的企业需要UI设计部门， UI 设计和ID设计的 关系是什么，UI设计的发展现状是什么，UI设计的将来的是什么？我想很 多人都会对这些问题感兴趣。在本文我以一个一线UI设计师的视角解析这 个行业，这个领域。
什么样的企业需要UI设计部门
随着“UI”热的到来，近几年国内很多从事手机，软件，网站， 增值服务等企业和公司都设立了这个部门。还有很多专门从事UI设计 的公司也应运而生。软件UI设计师的待遇和地位也逐渐上升。
软件UI设计的将来
软件UI 设计应该属于ID(工业产品设计)的一个特殊形式，只是针 对的材质有所不同。但随着智能化电子产品的普及，带有液晶屏显示的 产品将越来越多。也就意味着越来越多的产品设计需要软件UI设计。 随着科技的发展，不久的将来所有的产品会组成一体，变成一个无 处不在的电脑，这个电脑控制着用户的所有家用产品和资料。用户只要 有自己的一个账号，就可以通过任何一个产品来控制所有其它产品，而 所有的产品都具有终端的功能。而这个终端操作的基本形式就是软件的 UI设计。 产品设计由物质设计向非物质设计转变已经开始了，而且必将成为 未来产品设计的主流，一个UI大时代即将到来。
巧妙性设计之UI按钮设计方法论
一个漂亮的按钮，我们要看他的表现方式、形态、质感是否符合 整个界面所要传达的整体风格是值得每一个设计师去重视的。随着网络 媒体的发展。各行各业都在网络媒体上来展示自己，也相继出现了许多 行业界面，那么这些界面的设计风格肯定不会千篇一律，那么涉及到的 按钮设计也是各有风格的。 “艺术来源于模仿”，“设计来源于生活”。在画按钮的时候主要从生 活中发现自己需要的元素。
UI设计的发展阶段
市场经济需要竞争，竞争就会需要设计来提高产品竞争力。2000年 以前国内的UI设计刚开始萌芽，但当时做UI等于做平面设计,基本也体现 在网页设计上，后来随着flash的流行，一部分美术设计师开始去思考互 动性。到了2002年一些企业开始重视到UI设计的重要性，纷纷把 UI部门 从软件编码团队里提出来，开始有了专门针对软件产品的图形设计师和 交互设计师。2004年以后随着手机，电脑附加软件，MP3等大量产品上市， ID设计就和UI设计越来越紧密了，UI设计也开始被提升到一个新的高度和 重视程度。2005年国内的UI设计已经相对成熟了，有了专门的职业分工也 出现了很多不错的UI一线设计师与UI设计交流组织。
UI设计师是做什么的，背景是什么
UI设计从工作内容上来说分为3个方向。图 它主要是由UI 研究 的3个因素决定的， 其分别是研究工具，研究人与界面的关系，研 究人 。
(图中：蓝色代表工具，红色代表关系，绿色代表人)
研究界面----图形设计师
国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但 实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。 这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背 景，例如工业外形设计，装潢设计，信息多媒体设计等。
12：将选区填充成黑色并运行描边
13：创建一层做下方按钮的背景. 用圆角矩形工具画一矩形填充成黑色
14：给创建的层加上图层样式
15：留意渐变条的设定
16：效果见图
17：创建一层，画一很2-4 像素的宽的白色矩形
18：加上图层样式：(请留意)
19：渐变条的设定：
20：在来一描边
21：拷贝刚才做的那个白色间隔条 (当然加上图层样式后就不是白色了)6个， 并成见P地方
什么叫UI设计
UI的本意是用户界面( user interface ) ，概括成一句话就是——人和 工具之间的界面。这个界面实际上是体现在我们生活中的每一个环节的， 例如我们切菜的时候刀把手就是这个界面，开车时候方向盘和仪表盘就是 这个界面 ，看电视的时候遥控器和屏幕就是这个界面，用电脑的时候键盘 和显示器就是这个界面。 于是我们可以把UI可以分成两大类：硬件界面和软件界面。本文所关注 的UI设计特指软件界面，我们也可以称为特殊的或者狭义的UI设计。
1：创建一600*600的文件
2：用圆角矩形工具画一见P的矩形并 填充成黑色：
3：给矩形加上图层样式
4：渐变条的设定
5：做完后的图效果
6：创建一层再用圆角矩形工具画一见 P的矩形并填充成黑色
7：再用矩形选区画一见P的选区并删除
8：给图层加上图层样式
9：渐变条设定
10：运行完的效果
11：用魔术棒选取选区
下面这个按钮是我们常见的开关按钮，我只是按照开关的样式，粗糙 的画了一个实例，为的就是说明其实在做按钮设计的时候我们参考的实物是 很多的，多观察周围的实物往往会得到一些意想不到的收获，并且我们还可 以通过简单的艺术效果处理得到不同的按钮效果。如下图：
界面设计师在做界面设计的时候应该多观察生活中看到的物品， 这些都能给界面设计师很大的启发。
34：之后创建一层做屏幕中的 时间条，这儿可自由发挥
35：按CTRL+刚才的时间条层， 载入选区，按ALT减选一部分，创 建一层并填充白色
36：复制刚才快进层的图层样 式粘贴到刚才白色的图层中
37：将图层模式的描边去掉
38：给蓝色的时间层做高光，这个 可载入蓝色层填充成白色，调整不 透明的，之后朝下拖动，删除多余的， 效果见P
39：创建一层，做时间 轴上方的按钮：
40：加上图层样式(渐变 叠加)，留意渐变条的设定
41：在加上一描边
42：在给时间轴上方的按钮做个 高光，手法就同上方给蓝色条做 相同的
43：将刚才做的播放时 间的图层添加到一组里 44：拷贝刚才这个组，并调节地方
45：到这儿做完的几乎了，后面给屏幕里面加上一点文字，这儿 就可自由发挥了，之后吧2-45步全部加上的一组里，做个倒影的 效果，加个蒙版