《UI界面设计》课件第六章 播放器界面设计.pptx
UIDESIGN主编：殷辛、李茜
第一节播放器界面设计概述第二节播放器界面设计特点第三节如何设计个性化的播放器界面第四节音乐播放器界面设计与制作UIDESIGN
一、进行播放器界面设计的原因播放器界面属于应用软件界面的一种，在视觉设计中也要注重应用的功能性。
二、播放器界面设计的情感化因素在具体设计中，应通过色彩、图形、版式等视觉语言将情感表现在界面上，让应用产品具有丰富的情感和深刻的思想，不再是冰冷的电子设备。
第一节播放器界面设计概述第二节播放器界面设计特点第三节如何设计个性化的播放器界面第四节音乐播放器界面设计与制作UIDESIGN
一、功能性播放器是一种功能性强的应用软件，设计师应从用户的使用角度出发，设计出美观又实用的播放器界面。
二、创意性各种播放器所包含的功能都大同小异，创意性可以让作品从众多播放器应用中脱颖而出，吸引用户。
三、视觉冲击力用户希望看到更多富有质感、精美又细致的播放器界面，在使用时已经不满足于基本的使用需求，更在乎界面带来的视觉享受。
第一节播放器界面设计概述第二节播放器界面设计特点第三节如何设计个性化的播放器界面第四节音乐播放器界面设计与制作UIDESIGN
一、界面结构的统一性界面的图标和按钮功能具有高度的统一认知性，结构也相对具有统一性。
二、界面操作的可靠性在用户做出危险的操作时，应弹出相应的提示、警告信息，对可能造成等待时间较长的操作应提供取消功能。
三、视觉效果的舒适性在设计播放器界面之前，设计师要明确该产品的使用对象，并选择适合该人群的界面风格与颜色搭配。
第一节播放器界面设计概述第二节播放器界面设计特点第三节如何设计个性化的播放器界面第四节音乐播放器界面设计与制作UIDESIGN
案例分析：此款音乐播放器界面采用有质感的元素进行设计，通过主次操作按钮在界面中的不同视觉效果来体现播放器的功能性。
步骤1：启动PhotoshopCC2018，执行【文件】→【新建】命令，在【新建文档】对话框中设置各项参数。
步骤2：单击“图层0”图层右侧的锁状按钮，解锁该图层。单击面板底部的【添加图层样式】图标?，然后选择【渐变叠加】选项。将该图层更名为“背景”。
步骤3：在工具栏中选择【矩形工具】，绘制一个矩形，将其内部填充颜色设置为“R：44，G：54，B：66”，并将图层更名为“底图”。同时选中“底图”与“背景”图层，使其居中对齐。
步骤4：选择“底图”图层，单击面板底部的【添加图层样式】图标?，然后选择【斜面和浮雕】选项。
步骤5：继续在“底图”图层的【图层样式】对话框中添加【投影】效果。图层样式中的颜色可根据画面美感设置，没有固定数值要求。
步骤6：同时选中“底图”与“背景”图层，单击【图层】面板上方的【锁定】按钮?，将图层锁定。
步骤7：在工具栏中选择【自定形状工具】，选择如图所示形状，将其内部填充颜色设置为“R：176，G：176，B：176”。利用【直接选择工具】?对形状锚点进行调整，然后按【Ctrl】+【T】组合键进入自由变换状态，将形状进行水平翻转。将图层更名为“返回”。
步骤8：在工具栏中选择【椭圆工具】，按住【Shift】键绘制一个正圆形，将其描边填充颜色设置为“R：176，G：176，B：176”。选中该图层并右击，在弹出的快捷菜单中执行【栅格化图层】命令。在工具栏中选择【矩形选框工具】，利用参考线删除圆形右上角1/4部分。
步骤9：在工具栏中选择【自定形状工具】，选择如图所示形状，将其内部填充颜色设置为“R：176，G：176，B：176”。利用【直接选择工具】?对形状锚点进行调整，然后按【Ctrl】+【T】组合键进入自由变换状态，将形状旋转45°。
步骤10：将多边形与3/4圆形组合，效果如图所示，并将图层编组，将图层组更名为“分享”，使其与“返回”图层垂直居中对齐。
步骤11：在工具栏中选择【横排文字工具】?，输入文字，将其填充颜色设置为“R：243，G：166，B：166”。
步骤12：单击面板底部的【添加图层样式】图标?，然后选择【外发光】选项，具体设置如图所示。
步骤13：在工具栏中选择【横排文字工具】?，输入文字，将其填充颜色设置为“R：255，G：255，B：255”。
步骤14：在工具栏中选择【横排文字工具】?，输入文字，将其填充颜色设置为“R：176，G：176，B：176”，字符等各项参数设置如图所示。
步骤15：复制“返回”图层，按【Ctrl】+【T】组合键进入自由变换状态，调整形状大小，并水平翻转形状，各项参数设置如图所示，将图层更名为“更多”。
步骤16：将歌曲封面拖拽至PSD文件中，调整图片大小并置入。在工具栏中选择【椭圆