国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。研究界面----图形设计师国内目前大部分UI工5研究人与界面的关系---交互设计师
在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。交互设计师一般都是软件工程师背景居多。研究人与界面的关系---交互设计师在图形界面产生之6研究人----用户测试/研究工程师
任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。这个职位很重要，如果没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。用户研究工程师一般是心理学人文学背景比较合适。
巧妙性设计之UI按钮设计方法论一个漂亮的按钮11首先，我们知道按钮在效果表现上很大一部分我们是从质感的表现上来识别的，比如我们最常见VISTA风格的按钮就是从玻璃质感上变现。大家可以看我找的玻璃瓶素材，很明显就能看出玻璃瓶的高光、反光和投影。我们在变现按钮质感的时候也多是从这三方面出发。
首先，我们知道按钮在效果表现上很大一部分我们是12实例分析：
玻璃瓶素材
A按钮是完全按照玻璃瓶质感的方式来画的B按钮是经过对光规律的观察而总结出的自己想要表现方式的一种艺术处理。主要是为了说明我们在进行参照质感进行按钮设计的时候要考虑自己需要的艺术效果进行适当的艺术处理。这样也便于界面制作人员的制作。实例分析：玻璃瓶素材A按钮是完全按照玻璃瓶质感的方式来画13下面一种是我们经常所见的苹果风格的按钮设计，这种风格的按钮也是我们在生活中经常能见到的，键盘手机就经常采用这种设计方式，但是随着触摸屏手持设备的普遍，绝大数的键盘界面都采用模仿原来手机实物键盘的设计方式，这样是为了让用户对界面产生亲切感，同时这样的设计也看起来更加简洁美观。键盘素材
下面一种是我们经常所见的苹果风格的按钮设计，这种14C按钮是参照键盘的质感做的样稿
下面这个按钮是我们常见的开关按钮，我只是按照开关的样式，粗糙的画了一个实例，为的就是说明其实在做按钮设计的时候我们参考的实物是很多的，多观察周围的实物往往会得到一些意想不到的收获，并且我们还可以通过简单的艺术效果处理得到不同的按钮效果。如下图：界面设计师在做界面设计的时候应该多观察生活中看到的物品，这些都能给界面设计师很大的启发。下面这个按钮是我们常见的开关按钮，我只是按照开18多媒体界面设计课件19多媒体界面设计课件20本例中我们利用photoshop设计制作一款漂亮的MP3播放器界面，教程主要是练习我们的设计技巧和基本功，大家可以练习一下。好习惯：在新填充颜色前新建一层，命名要有意义，把相同的东西放在同一组里，这样就不会乱并且容易修改了。教程中的参数仅供参考，你可以自己灵活的调整，发挥自己的想像力，做出更好更漂亮的效果。
本例中我们利用photoshop设计制211：创建一600*600的文件2：用圆角矩形工具画一见P的矩形并填充成黑色：1：创建一600*600的文件2：用圆角矩形工具画一见P的矩223：给矩形加上图层样式4：渐变条的设定3：给矩形加上图层样式4：渐变条的设定235：做完后的图效果
6：创建一层再用圆角矩形工具画一见P的矩形并填充成黑色5：做完后的图效果6：创建一层再用圆角矩形工具画一见247：再用矩形选区画一见P的选区并删除8：给图层加上图层样式7：再用矩形选区画一见P的选区并删除8：给图层加上图层样式259：渐变条设定
10：运行完的效果9：渐变条设定10：运行完的效果2611：用魔术棒选取选区
12：将选区填充成黑色并运行描边11：用魔术棒选取选区12：将选区填充成黑色并运行描边2713：创建一层做下方按钮的背景.用圆角矩形工具画一矩形填充成黑色14：给创建的层加上图层样式13：创建一层做下方按钮的背景.14：给创建的层加上图层样式2815：留意渐变条的设定
16：效果见图
15：留意渐变条的设定16：效果见图2917：创建一层，画一很2-4像素的宽的白色矩形18：加上图层样式：(请留意)17：创建一层，画一很2-418：加上图层样式：(请留意)3019：渐变条的设定：20：在来一描边
19：渐变条的设定：20：在来一描边3121：拷贝刚才做的那个白色间隔条(当然加上图层样式后就不是白色了)6个，并成见P地方22：创建一层给这个按钮背景加个高光，用矩形工具画一见P的矩形21：拷贝刚才做的那个白色间隔条22：创建一层给这个按钮背景3223：调整图层模式为叠加，不透明度为：78%24：做到这儿的效果见P23：调整图层模式为叠加，24：做到这儿的效果见P3325：创建一层，载入刚才第7部操作的那个图层，进入选区，按照ALT键减选一部分26：填充成白色，将不透明度改成25%25：创建一层，载入刚才第7部26：填充成白色，将不透明3427：此时来画按钮，创建一层，用多边形套索工具画一三角形，填充成白色28：提高图层样式(渐变叠加)，这儿看看渐变条的设定27：此时来画按钮，创建一层，28：提高图层样式(渐变叠加)3529：加上图层样式(描边)，留意是渐变描边30：描边渐变条的设定29：加上图层样式(描边)，30：描边渐变条的设定3631：效果见图
最好的程序界面就是用户无需去阅读擦操作手册就知道该如何使用的界面。
原则：1.一致性
如果你可以在一个列表的项目上双击后能够弹出对话框，那么应该在任何列表中双击都能弹出对话框。要有统一的字体写号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。2.设置标准并遵循它
可以参数一些工业标准，如IBM的界面设计规范或MS的设计规则，它提供了90％你所需要的规范。界面设计技巧最好的程序界面就是用户无需去阅读463.设置向导
如果用户使用了一个功能后，不知道如何做下一个，他们就会放弃。如果工作流程和手工工作流程一致，用户就会努力去完成它。最好的方式来引导用户就是在桌面上设置一个流程向导。4.提示信息必须恰当且规范
提示信息必须容易理解并且口径统一，比如“您输入了错误的数据”、“用户编码不能超过8位”。一致的措词，提示信息还应该出现在一致的位置，如弹出提示窗口、窗口的上方或窗口的下方。对用户的称呼应该统一，比如有时提示“用户输入了错误的数据”，有时提示“您输入了错误的数据”，有时又提示“纳税人输入了错误的数据”，这样会使用户无所适从。3.设置向导
4.提示信息必须恰当且规范
475.借鉴好的程序
多了解同类软件的界面，并加以分析与了解，直到能够区别好的用户界面与差的用户界面。但不能够机械的模仿别人的界面。6.变灰的功能
有时有些功能不可用，最好不要删除这些按钮若项目，而是使他们变灰为不可用状态，这样有助于用户理解整个程序的功能。5.借鉴好的程序
6.变灰的功能
48界面设计禁忌
一、界面效果的整体性、一致性
界面的设计应该是基于这个应用平台的整体风格，这样有利于产品外观的整合。
1、界面的色彩及风格与系统界面统一
软件界面的总体色彩应该接近和类似系统界面的总体色调，例如：系统色调以蓝色为主，我们的软件界面的默认色彩最好与之吻合，若使用与之大相径庭的色彩，比如大红、柠檬黄，色彩的强烈变化会影响用户的使用情绪，假想你买了一款从外观到系统界面都很满意的MP3，操作的时候突然发现内置的应用软件和系统界面不统一，你会有何感想呢？第一感觉不好的东西我们的用户还会去用它吗？所以我们要知道MP3的外观和系统界面已经是由其制造商根据用户审美习惯定制的，它应该有他们的审美群体，我们要给这款产品做软件就应该有效地利用制造商基于此款产品的审美特征，以赢得喜爱此款MP3的用户，使他们对系统界面的肯定和喜爱有效的转移到我们的产品上来。当然合理地结合系统界面进行设计还包括图标、按钮的风格及在不同操作状态下的视觉效果。
随着科技的不断发展，MP3/MP4的功能俞之强522、操作流程的系统化
用户的操作习惯是基于系统的，我们的界面设计在操作流程的安排上，也得遵循系统的规范性，让用户达到可以使用产品就会使用我们的软件，简化用户操作流程！
二、界面效果的个性化
是不是我们追求整体性和一致性，就忽略软件界面的个性化呢整体性和一致性是基于手机系统视觉效果的和谐统一而考虑，个性化是基于软件本身的特征和用途而考虑。因此这一点也是不容忽视的！
2、操作流程的系统化
531、特有的界面构架
软件的实用性是软件应用的根本，我们设计应该结合软件的应用范畴，合理的安排版式，以求达到美观适用的目的，这一点不一定能与系统达到一致的标准，它应该具有它所具有的行业标准，例如:证券交易、地图操作等界面特征，需要分析软件应用的特征和流程制定相对规范性的界面构架。界面构架的功能操作区、内容显示区、导航控制区都应该统一规范，不同功能模块的相同操作区域的元素风格应该一致，让用户能够对不同的模块的操作迅速掌握。从而也使整个界面统一在一个特有的整体之中。
1、特有的界面构架542、专用的界面图标
软件的图标按钮是基于自身应用的命令集，它的每一个图形内容映射的是一个目标动作，因此作为体现目标动作的图标，它应该有强烈的表意性，制作过程中选择具有典型行业特征的图符，有助于用户的识别，方便操作。图标的图形制作不能太繁琐，要适应MP3本身显示面积很小的屏幕，在制作上尽量使用像素图，确保图形质量清晰，如果针对立体化的界面，可考虑部分像素羽化的效果，以增强图标的层次感。
2、专用的界面图标
553、界面色彩的个性化设置
色彩影响一个人的情绪，不同的色彩会让人产生不同的心理效应，反之不同的心理状态所能接受的色彩也是不同的，不断变化的事物才能引起人的注意，界面设计的色彩个性化，目的就是用色彩的变换来协调用户的心理，让用户对软件产品时常保持一种新鲜度，它是通过用户根据自己的需要来改变默认的系统设置，选择一种自己满意的个性化设置，达到软件产品与用户之间的协调性。在众多的软件产品中都涉及到了界面的换肤技术，在手机的软件界面设计过程中，应用这一个性设置可以更大的提升软件的魅力，满足用户的多方面需要！在具体操作实现的过程中，色彩的搭配显得尤为重要，要考虑图标色彩与换肤色彩的色彩反差和效果的统一，以不至于造成花、乱的界面效果。
3、界面色彩的个性化设置
56三、界面视觉元素的规范
1、图形图像元素的质量
尽量使用较少的色深表现色彩丰富的图形图像，既确保数据量小又确保图形图像的效果完好，使图形图像在软件系统中所占数据量尽量减小，提高程序的工作效率。
常见手机显示屏分辨率
96x65，
96x96，
128x96，
128x128，
160x128，
160x160，
176x144，
220x176，
240x176，
320x240
三、界面视觉元素的规范
常见手572、线条色块与图形图像的结合
界面上的线条和色块后期都会用程序来实现，这就需要考虑程序部分和图像部分的结合，需要自然的结合才能协调界面效果的整体感，所以需要需要程序员与界面设计人员的密切沟通，达成一致。
2、线条色块与图形图像的结合
58实例演示1、首先使用ILLUSTRATOR来勾画一个整体的形状，因为ILLUSTRATOR会让这个过程变得更加简单，做好以后将它导入到photoshop。当然也可以直接在PS里做形状。2、将你得到的这些元素，调整到合适的大小，然后栅格化后分布到各个不同的图层上，如图：实例演示1、首先使用ILLUSTRATOR来勾画一个整体的形593、到这一步，开始运用所用你会的，比如减淡工具、混合模式、调节透明度、图层样式等等，来给各个部分加上高光、打上底色等，以便得到如下的效果。如图：4、现在我们来给那些应该加上效果的边缘部分加上立体效果，在这个案例里，我假设光源是从左上角打过来的，几乎跨越了整个界面。这是非常重要的一点，因为只有你在头脑中形成一个这样的假设，你才能更好的起表现你的设计作品。只有合理地选择好光源的方向和角度，你才能更好的把握和表现各个细节部分的明暗变化和质感体现。如果你的光线是从左上角打过来的，那么你的阴影就应该在右下角，很简单，这是最基本的常识。现在你可以看到，阴影已经出来了，但是我更希望，你能够明白和理解这样做的目的。如图：
3、到这一步，开始运用所用你会的，比如减淡工具、4、现在我们605、接下来，我将给它增加更多的元素，在右边蓝灰色的圆形下边建一层，放一个稍微大一点的圆，那里就是显示屏的凹陷部分，中间就是放液晶屏幕用的，同时也要注意留出一定的空间来放置控件。如图：
6、在左边蓝灰色圆的旁边围上一圈金属环，这样可以让它看上去更具质感（填充渐变色后用表面模糊和镜头模糊可达其效果），如图：5、接下来，我将给它增加更多的元素，在右边蓝灰色6、在左边蓝617、现在给主控按钮（就是刚才所说的左边那个蓝灰色的圆）加上效果8、用同样的方法给显示屏也加上效果，但是要注意的是高光的方向强弱要把握好，如图：7、现在给主控按钮（就是刚才所说的左边那个蓝8、用同样的方法629、这时候可以加上更多的细节了，让玻璃的质感更突出，颜色更鲜艳，细节更丰富。要注意玻璃附近区域的反光，如图：
10、进一步添加细节，比如用圆和线条将各个功能按钮区分开来，如图：
9、这时候可以加上更多的细节了，让玻璃的质感10、进一步添加6311、这一步还是添加和调整细节，很烦琐，可是越是好东西就越是会很精致，这就需要设计师，也就是你拥有更多的耐心来雕琢它们。加上一个音量调节器，再给主显示屏的周围画上一圈刻度线，加上一些文字。画刻度线的技巧其实很简单，方法也很多，简单地介绍一下，第一个方法，也是最简单的一个方法，画一个圆，然后沿着这个路径输入字符“|”，这样一来就可以画出很规则、间距相等的刻度线了，而且，还可以随意调整间距，颜色，大小等，但是这个方法只使用与photoshopcs版，使用其他版本的朋友，可以考虑另一个方法，画一条线，要么水平要么垂直，然后使用复制加调整角度的方法来得到一组射线，值得注意的是这个角度一定要精确，要能够被360整除的，然后把中间多余的部分删掉，也就可以了。
11、这一步还是添加和调整细节，很烦琐，可是越是好东西就越是6413、继续添加点元素，继续表现细节，以下是大功告成的效果图，如图：
13、继续添加点元素，继续表现细节，以下是大功告成的效果图，65多媒体界面设计课件66多媒体界面设计课件67多媒体界面设计课件68多媒体界面设计课件69多媒体界面设计课件70多媒体界面设计课件71多媒体界面设计课件72多媒体界面设计课件73多媒体界面设计课件74多媒体界面设计课件75多媒体界面设计课件76多媒体界面设计课件77多媒体界面设计课件78多媒体界面设计课件79多媒体界面设计课件80多媒体界面设计课件81多媒体界面设计课件82课业：寻找MP3各种外形及界面，手绘草图课业：寻找MP3各种外形及界面，手绘草图83期末大作业手机设计流程ID工业设计
包括手机的外观、材质、手感、颜色配搭，主要界面的实现与及色彩等方面的设计。MD结构设计
手机的前壳、后壳、手机的摄像镜头位置的选择，固定的方式，电池如何连接，手机的厚薄程度。如果是滑盖手机，如何让手机滑上去，怎样实现自动往上弹，SIM卡怎样插和拔的安排，这些都是手机结构设计的范畴。
HW硬件设计
硬件主要设计电路以及天线，而HW是要和MD保持经常性的沟通。
SW软件设计
相对来说，SW是更容易为大家所理解，由于计算机的普及，让我们最大程度地接触了各种各样的软件，手机操作界面的模式，大家经常看到的手机九官格操作菜单的实现，这都是SW设计的范畴。
期末大作业手机设计流程ID工业设计
包括手机的外观、材质84摩托罗拉“明”翻盖的半透明
诺基亚7610的圆弧形外观
索爱W550的阳光橙
摩托罗拉“明”翻盖的半透明诺基亚7610的圆弧形外观索爱85低端机低端机86中端机中端机87高端手机高端手机88多媒体界面设计课件89多媒体界面设计课件90多媒体界面设计课件91多媒体界面设计课件92多媒体界面设计课件93多媒体界面设计课件94多媒体界面设计课件95多媒体界面设计课件96课业：先草图临摹，后设计一款手机界面（只要求正视图）最后做出效果图。要求：
国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。研究界面----图形设计师国内目前大部分UI工102研究人与界面的关系---交互设计师
在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互模型，交互规范。交互设计师一般都是软件工程师背景居多。研究人与界面的关系---交互设计师在图形界面产生之103研究人----用户测试/研究工程师
巧妙性设计之UI按钮设计方法论一个漂亮的按钮108首先，我们知道按钮在效果表现上很大一部分我们是从质感的表现上来识别的，比如我们最常见VISTA风格的按钮就是从玻璃质感上变现。大家可以看我找的玻璃瓶素材，很明显就能看出玻璃瓶的高光、反光和投影。我们在变现按钮质感的时候也多是从这三方面出发。
首先，我们知道按钮在效果表现上很大一部分我们是109实例分析：
A按钮是完全按照玻璃瓶质感的方式来画的B按钮是经过对光规律的观察而总结出的自己想要表现方式的一种艺术处理。主要是为了说明我们在进行参照质感进行按钮设计的时候要考虑自己需要的艺术效果进行适当的艺术处理。这样也便于界面制作人员的制作。实例分析：玻璃瓶素材A按钮是完全按照玻璃瓶质感的方式来画110下面一种是我们经常所见的苹果风格的按钮设计，这种风格的按钮也是我们在生活中经常能见到的，键盘手机就经常采用这种设计方式，但是随着触摸屏手持设备的普遍，绝大数的键盘界面都采用模仿原来手机实物键盘的设计方式，这样是为了让用户对界面产生亲切感，同时这样的设计也看起来更加简洁美观。键盘素材
下面一种是我们经常所见的苹果风格的按钮设计，这种111C按钮是参照键盘的质感做的样稿
下面这个按钮是我们常见的开关按钮，我只是按照开关的样式，粗糙的画了一个实例，为的就是说明其实在做按钮设计的时候我们参考的实物是很多的，多观察周围的实物往往会得到一些意想不到的收获，并且我们还可以通过简单的艺术效果处理得到不同的按钮效果。如下图：界面设计师在做界面设计的时候应该多观察生活中看到的物品，这些都能给界面设计师很大的启发。下面这个按钮是我们常见的开关按钮，我只是按照开115多媒体界面设计课件116多媒体界面设计课件117本例中我们利用photoshop设计制作一款漂亮的MP3播放器界面，教程主要是练习我们的设计技巧和基本功，大家可以练习一下。好习惯：在新填充颜色前新建一层，命名要有意义，把相同的东西放在同一组里，这样就不会乱并且容易修改了。教程中的参数仅供参考，你可以自己灵活的调整，发挥自己的想像力，做出更好更漂亮的效果。
本例中我们利用photoshop设计制1181：创建一600*600的文件2：用圆角矩形工具画一见P的矩形并填充成黑色：1：创建一600*600的文件2：用圆角矩形工具画一见P的矩1193：给矩形加上图层样式4：渐变条的设定3：给矩形加上图层样式4：渐变条的设定1205：做完后的图效果
6：创建一层再用圆角矩形工具画一见P的矩形并填充成黑色5：做完后的图效果6：创建一层再用圆角矩形工具画一见1217：再用矩形选区画一见P的选区并删除8：给图层加上图层样式7：再用矩形选区画一见P的选区并删除8：给图层加上图层样式1229：渐变条设定
10：运行完的效果9：渐变条设定10：运行完的效果12311：用魔术棒选取选区
12：将选区填充成黑色并运行描边11：用魔术棒选取选区12：将选区填充成黑色并运行描边12413：创建一层做下方按钮的背景.用圆角矩形工具画一矩形填充成黑色14：给创建的层加上图层样式13：创建一层做下方按钮的背景.14：给创建的层加上图层样式12515：留意渐变条的设定
15：留意渐变条的设定16：效果见图12617：创建一层，画一很2-4像素的宽的白色矩形18：加上图层样式：(请留意)17：创建一层，画一很2-418：加上图层样式：(请留意)12719：渐变条的设定：20：在来一描边
19：渐变条的设定：20：在来一描边12821：拷贝刚才做的那个白色间隔条(当然加上图层样式后就不是白色了)6个，并成见P地方22：创建一层给这个按钮背景加个高光，用矩形工具画一见P的矩形21：拷贝刚才做的那个白色间隔条22：创建一层给这个按钮背景12923：调整图层模式为叠加，不透明度为：78%24：做到这儿的效果见P23：调整图层模式为叠加，24：做到这儿的效果见P13025：创建一层，载入刚才第7部操作的那个图层，进入选区，按照ALT键减选一部分26：填充成白色，将不透明度改成25%25：创建一层，载入刚才第7部26：填充成白色，将不透明13127：此时来画按钮，创建一层，用多边形套索工具画一三角形，填充成白色28：提高图层样式(渐变叠加)，这儿看看渐变条的设定27：此时来画按钮，创建一层，28：提高图层样式(渐变叠加)13229：加上图层样式(描边)，留意是渐变描边30：描边渐变条的设定29：加上图层样式(描边)，30：描边渐变条的设定13331：效果见图
可以参数一些工业标准，如IBM的界面设计规范或MS的设计规则，它提供了90％你所需要的规范。界面设计技巧最好的程序界面就是用户无需去阅读1433.设置向导
1445.借鉴好的程序
145界面设计禁忌
随着科技的不断发展，MP3/MP4的功能俞之强1492、操作流程的系统化
1501、特有的界面构架
1、特有的界面构架1512、专用的界面图标
1523、界面色彩的个性化设置
153三、界面视觉元素的规范
常见手1542、线条色块与图形图像的结合
155实例演示1、首先使用ILLUSTRATOR来勾画一个整体的形状，因为ILLUSTRATOR会让这个过程变得更加简单，做好以后将它导入到phot