《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第5章.docx》由会员分享，可在线阅读，更多相关《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第5章.docx（71页珍藏版）》请在三一办公上搜索。
1、教案编号：5课题：第5章软件界面设计课时：16课时授课类型：讲授+实训教学目标： 了解软件界面设计的基础知识 掌握软件界面设计的规范 认识软件界面常用界面类型教学重点：软件界面设计的规范、软件界面常用界面的设计方法教学难点：软件界面常用界面的设计方法本章技能点：音乐播放器软件-首页、歌单页、歌曲列表页的绘制方法本章教学技巧：1 .知识讲解2 .案例实训教学过程：（一）课前准备1 .授课前准备准备好教学用具和教学设备2 .板书课题：第5章软件界面设计项目目标： 了解软件界面设计的基础知识 掌握软件界面设计的规范 认识软件界面常用界面类型3 .课程引入通过“制作音乐播放器软件”案例效果展示引入软件
2、界面设计的概念歌单页Song音乐理，a，帕Sa、-o欧美热歌：你没有听过的气质英伦摇滚“HarrytX(WJIMJ团ZL电台土桢举IttwnIQRM乐ftH讦须5J下(Tfi专Q的历史UnderhWtv*tyMjfUMertbeWttw*y三RWWUdi(jUdmrcttvzasTeUpMfHvxhSunafcxLowBMene喇埠FAjwc2Cth*UgMtGoOutTbebtefWrtThtUtwlNm浪行”SheteDmmsTheStOfvRcMesCortechouseCteuicBedthpcd.BMeneHoPCTandFrJOOOOCcw.)U话耻歌曲列表页(二)课程内容5.1
3、软件界面设计基础知识软件界面设计的基础知识包括软件界面设计的概念、软件界面设计的流程以及软件界面设计的原则。5.1.1 软件界面设计的概念软件界面(softwareinterface)设计是界面设计的一个分支，主要针对软件的使用界面进行交互操作逻辑、用户情感化体验、界面元素美观的整体设计。具体工作内容包括软件启动界面设计、软件框架设计、图标设计等，如图所示。由波兰设计师LUkePachytel创作的软件界面5.1.2 软件界面设计的流程软件界面的设计流程可以按照分析调研、交互设计、交互自查、视觉设计、设计测试、验证总结的步骤来进行，如图所示。分析调研交互设计交互自查视觉设计设计测试览证总结软件
4、界面设计流程图1.分析调研与APP和网页界面设计类似，软件界面的设计也要先分析需求，明确设计方向。下图所示是3款聊天消息界面，但因产品需求不同，设计风格有所区别。由斯洛伐克设计师StanOBagin创作由印度设计师Prakhar Neel Sharma创作乌克兰设计YUIiya创作不同风格的软件界面2 .交互设计交互设计是对整个软件设计进行初步构思和制定的环节。一般需要进行纸面原型、架构设计、流程图设计、线框图设计等具体工作，如图所示。Userflow印度设计师GauthamMukesh创作的交互设计图3 .交互自查交互设计完成之后，进行交互自查是整个软件界面设计流程非常重要的一个阶段。可以在
5、执行界面设计之前检查出是否有遗漏缺失的细节问题，具体可以参考App中的交互自查。4 .视觉设计原型图审查通过，就可以进入视觉设计阶段了，这个阶段的设计图即产品最终呈现给用户的界面，设计要求与网页设计类似。最后运用Axurex墨刀等软件制作成可交互的高保真原型以便后续的设计测试，如图所示。印度设计师PareShKhatri制作可交互的高保真原型5 .界面测试界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整，如图所示。葡萄牙UX/UI设计师PedroRibeirO进行软件界面细节调整6 .验证总结验证总结是最后一个阶段，
6、是为整套软件进行优化的重要支撑。在产品正式上线后，通过用户的数据反馈进行记录，验证前期的设计，并继续优化，如图所示。印度产品设计师DiVanRaj设计师创作的软件界面5.1.3软件界面设计的原则在进行软件界面设计时，我们主要针对计算机应用界面、移动应用界面、网页界面以及游戏界面进行设计。针对移动应用界面、网页界面设计原则，我们在前两章中都已阐述，本节主要围绕Windows系统下的FluentDesign语言（微软于2017年开发的设计语言）中的设计原则进行讲WindoWS系统下的FIUentDeSign语言FlUentDeSign有自适应、共鸣、美观三大原则。1 .自适应：在每台设备上都显得自
7、然FluentDesign可根据环境进行调整，可以很好地在平板电脑、台式机、XBOX甚至混合现实头戴显示设备上运行。此外，当用户添加更多硬件时，如增加额外的显示器，也会正常显示,如图O自适应2共鸣：直观且强大FluentDesign能了解和预测用户需求，并根据用户的行为和意图进行调整，当某个体验的行为方式符合用户的期望时，该界面就显得很直观，如图所示。使用正确的控件可帮助用户更好的进行交互以符合用户期望3.美观：吸引力十足且令人沉醉FlUentDeSign重视华丽的效果，通过融入物理世界的元素，如光线、阴影、动效、深度以及纹理，增强用户体验的物理效果，让应用变得更具吸引力，如图所示。界面使用了
8、阴影5.2软件界面设计的规范软件界面设计规范也包括设计尺寸及单位、界面结构、布局、字体及图标5个方面，我们围绕FlUentDesign语言中的规范进行讲解。FlUentDesign语言可以为不同平台的Windows10设备软件界面提供指导，如图所示。通过FIUemDeSign,不仅能呼应前面移动应用界面、网页界面设计规范，更能系统掌握Windows计算机应用的设计规范。FIuentDeSign语言应用于不同平台的WindOWS10设备的软件界面5.2.1软件设计的尺寸及单位1 .相关单位有效像素(EffectivePixels,eps)简称“c像素”，是f虚拟度量单位，用于表示布局尺寸和间距(
9、独立于屏幕密度基于Windows通过系统缩放保证元素识别的工作原理,在设计通用Windows平台应用时，要以有效像素而不是实际物理像素为单位进行设计，在这里eps可等同于像素，如图所示。eps=px软件设计的单位2 .设计尺寸软件应用在手机、平板电脑、台式机、电视等设备上运行，可建立一套完整的设计系统，而不是为每台设备都进行独立的UI设计。其中，通用Windows平台应用建议针对Windows10设备的关键断点进行设计，并实现通用，如图所示。SmallMedium大小级别断点典型屏幕大小（对角线）设备窗口大小小640px或更小4“到6”；20到65手机、电视320x569、360x640、48
10、0x854中641px到1007pxT到12平板电脑960x540大1008p或更大13”以及更大电脑、笔记本电脑、SurfaceHub1024x640,1366x768.1920x1080WindowslO不同设备的设计尺寸在针对特定断点进行设计时，应针对应用的屏幕可用空间大小进行设计，而不是屏幕大小。当应用全屏运行时，应用窗口的大小与屏幕的大小相同，但当应用不全屏运行时，窗口的大小则小于屏幕的大小，如图所示。罗马尼亚产品设计师VIadGrama创作的未全屏运行的软件界面5.2.2 软件设计的界面结构*三9*ComvmCommnd软件设计的界面结构5.2.3 软件设计的布局1 .页面布局（1
11、）导航常见的导航模式有左侧导航和顶部导航两种，如图所示。1.eftiwvVdpnev左侧导航（左）顶部导航（右）左侧导航：当有超过5个导航项目或应用程序中超过5个页面时，建议使用左侧导航。导航内通常包含：导航项目、应用设置栏目以及账户设置栏目，如图所示。II左侧导航菜单按钮允许用户展开和折叠导航窗格。当屏幕尺寸大于640像素时，单击菜单按钮会将导航面板展开为条形，如图所示。折叠（左）展开（右）当屏幕尺寸小于640像素时,导航面板将完全折叠，如图所示。图5-20完全折叠（左）展开（右）顶部导航：顶部导航也可以作为一级导航。相较于可折叠的左侧导航，顶部导航始终可见，如图所示。图5-21顶部导航（2
12、）命令栏命令栏为用户提供应用程序中最常见任务的快速访问方式。命令栏可以提供对应用程序级或页面级命令的访问，并且可以与任何导航模式一起使用，如图所示。集合页主/细节页：在主/细节页中，由列表视图（主）和内容视图（细节）共同组成。两个视图都是固定且可以垂直滚动的。当选择列表视图中的项目时，内容视图也会对应更新，如图所示。主/细节页详细信息页：当用户要查看详细内容时，在主/细节页基础之上可创建内容的查看页面，以便用户能够不受干扰地查看页面，如图所示。详细信息页表单页：表单是一组控件，用于收集和提交来自用户的数据。大多数应用将表单用于页面设置、账户创建、反馈中心等，如图所示。表单页2.响应式布局通过响
13、应式布局保证软件在所有设备上清晰可辨、易于使用。其中所有设备尺寸及内外边距的增量都应为4epx0对于较小的窗口宽度（小于640像素），建议使用12epx外边距，而对于较大的窗口宽度，建议使用24epx外边距，如图所示。SmellWindOWwidth640pcb响应式布局5.2.4软件设计的文字文字在前面的APP和网页界面设计中都已详细介绍过，因此本节主要针对Windows平台应用介绍文字的使用。1.系统字体通用Windows平台应用中，建议英文使用默认字体SegoeUI,如图所示。AbcdefghijklmnopQrstuvwxyzabcdefghijklmopqurstuvwxyz1234
14、567890SegoeUl字体当应用显示非英语语言时可选择另一种字体，其中中文建议使用默认字体微软雅黑，如图所ZF0非拉丁语言字体字体系列惮式注息Ebrima相体非洲语言Bl本的用户界面字体（埃塞俄比亚文.西非书面文、索马里文.提芬纲格文、用伊文）,Gadugi租体北美语言88本的用户界面字体（加掌大音节文字、切罗基诺）.LeelawadeeUl常SL半期.粗体东南亚语言BO本的用户界面字体（布西斯诺、老挝语、泰诺）.MalgunGothk常规朝鲜话的用户界面字体.MicrosoftJhengHeiUIXS.相体、细体繁体中文的用户界面字体.MicrosoftYaHetUI常般、祖体、期体葡体
15、中文的用户界面字体.MyanmarTextIii匍文脚本的后备字体.NirmalaUlM.半细、相体南亚语宫脚本的用户界面字体（孟加拉语、比文、古吉拉将语、锡克敦文、馍纳德iS.马1履拉婶语.奥里亚语、RHiS,借伽罗语、索拉文、泰米尔诺.泰卢固谢SimSunMS传统的中文用户界面字体.YuGothicUl细体、半岫、半粗、粗体日语的用户界面字体.微软雅黑字体在进行UI设计时,Sans-serif字体是适合用于标题和UI元素的,如下所示。Serif字体适合用于显示大量正文，如下所示。标题字体Sans-serif字体Sans-serif字体是用于标题和UI元素的不错选择.字体系列Arial样式常
16、规、斜体、粗体、粗斜体、IK体注富支捋欧洲和中东语言脚本（拉丁文、希瞄谓、西里尔文、阿拉伯语、亚美尼亚语和希伯来语）黑箱体仅支持欧洲语言脚本.Calibri常现、斜体、粗体、相斜体、细体如斜体支持欧洲和中东语言脚本（拉丁文、希Iffl语、西里尔文、阿拉伯语和希伯来语）.阿拉伯语仅在竖体中可用.Consolas常规、斛体、粗体、粗斜体支持欧洲语言脚本（拉丁文、希施遇和西里尔文）的固定宽度字体.SegoeUI常观、斜体、细斜体、熏斜体、相体、粗斜体、细体、半却、半粗、黑体欧洲和中东语言脚本（阿拉伯透、亚美尼亚沿、西里尔文、格吉亚语、希!语、希伯来语、拉丁文）以及CtflliSIffl本的用户界面字
17、体.Selawik常规、半细、细体、粗体、半粗正文字体计方面与SegOeUl兼容的开源字体，用于其它平台上不希望包含SegoeUI的应用.Serif字体Serif字体适合用于显示大量文本。字体系列样式注意Cambria靠现支持欧洲语言脚本（拉丁文、希朋语、西里尔文）的Serif字体.Courier常现、斜体、粗支持欧洲和中东语言脚本（拉丁文、希腊诺、西里尔文、阿拉伯语、亚美尼亚New体、粗料体语和希伯来语）的Serif固定宽度字体.Georgia常规、斜体、相体、粗料体支持欧洲语言脚本（拉丁文、希88语和西里尔文）.TimesNew常规、斜体、粗支持欧洲语言脚本（拉丁文、用肥语、西里尔文、阿拉
18、伯语、亚美尼亚语、第Roman体、粗科体伯来语）的传统字体.2.字体大小通用Windows平台上的字体通过字号及字重的变化，在页面上建立了信息的层次关系，帮助用户轻松阅读内容，如图所示。wghtHeaderLight46px56pxSubheaderLight34px40pTitleSemilight24p28pSubtitleRegular2024pxBaseSemiboldISpx20pxBodyRegular1Spx20pxCapsotR*guUr12AS不同字重和字号5.2.5软件设计的图标软件中的图标主要分为应用图标和界面图标，如图所示。应用图标示例（左）界面图标示例（右）Album
19、s1.应用图标应用图标在前面针对iOS和Androici系统进行过详细的讲解，本节主要讲解Windows平台中的应用图标。应用图标会应用于Windows中的不同场景,由于场景不同，图标的具体名称也会有所变化，如下所示。应用图标的名称图标名称显示在资产文件名称小磁贴开始菜单SmallTile.png中等磁贴开始菜单中,MicrosoftStorelisting*Squarel50xl50Logopng宽密贴11开始菜单Wde310xl50Logo.png大型贴开始菜单中，MicrosoftStorelisting*LargeTiIepng应用图标在开始菜单、任务栏、任务管理器的应用列衰Squar
20、e44x44Logo.pg初始屏幕应用的初怡屏幕是SpIashScreenpiig锁房提醒弑标你的应用磁贴BadgeLogctpng程序包徵标/应用商店徽标应用安装程序,合作伙伴中心中，在应用商店,在应用商店中的“写评论选项中的.报告应用程序”选项StoreLogopng(1)磁贴图标4个砌占大小分别为小(71pxx71px)(150px150pxX宽(310pxx15Opx)大(31OPXX3IOpxX小磁贴：将图标宽度和高度限制为磁贴大小(71px71px)的66%,如图所示。66%小磁贴中磁贴：将图标宽度限制为磁贴大小(150px150px)的66%,将高度限制为50%o这样可以防止品牌
21、栏中的元素重叠,如图所示。66%50%FourthCoffMMunsonsPickles中磁贴宽磁贴：将图标宽度限制为磁贴大小(310px150px)的66%,将高度限制为50%这样可以防止品牌栏中的元素重叠,如图所示。66%FourthCoffee.MunsonsPicklesandPreserves宽磁贴大磁贴：将图标宽度限制为磁贴大小(310px310px)的66%,将高度限制为50%,如图所66%BMusonPicklesandPreserves大磁贴(2)应用图标桌面开始菜单的应用列表、桌面任务栏、桌面快捷方式、桌面控制面板中，应用图标的设计尺寸如图所示。应用图标的设计尺寸资源大小文
22、件名示例16x16*SqUare44x44Logo.targetsize-16.png24x24*Square4444Logo.targetsize-24.png32x32*Square44x44Logo.targetsize-32.png48x48.Square4444Logo.targetsize-48.png256x256*Square44x44Logo.targetsize-256.png20x20Square44x44Logo.targetsize-20.png30x30Square44x44Logo.targetsize-30.png36x36Square4444Logo.targ
23、etsize-36.png40x40Square4444Logo.targetsize40.png60x60Square4444Logo.targetsize-60.png64x64Square44x44Logo.targetsize-64.png72x72Square44x44Logo.targetsize-72.png80x80Square4444Logo.targetsize-80.png96x96Square4444Logo.targetsize-96.png表示建议最少提供的尺寸(3)初始屏幕图标初始屏幕的尺寸如图所示，图标对应放置于屏幕内，一般建议在620x300像素的初始屏幕内进
24、行图标设计。ApplkationViRNASseCapdbiWiesOcIardtionsOContentURIsPMkagingSpIashSaeenWE*vafiR4K*teFd441w*tfKm.*“Km4mntftodtMMmcTAitvM.twf*l*u*wCi=A4Mtl11“tcen4iM*Mg4MMmzA*fy9SteSecnAMttXaJODfB初始屏幕(4)锁屏提醒图标锁屏提醒图标和其他应用图标不同，设计师不能提供自己的锁屏提醒图像，仅可以使用系统提供的锁屏提醒图像。(5)应用商店图标在应用商店中，可以上传图标代替图像，其尺寸分别为300x300、150x150和7171像
25、素。虽然需要提供3个大小，但设计只进行3OO3OO像素即可，如图所示。QForcustomersonWindows10andXbox4displayuploadedlogoimagesinsteadoftheimagesfrommypackagesStoredisplayimages11Apptilicon300x3001:1150x1501:171x71 300X300sizerequired;othersizesOptiO2 Acceptedfiletypcpng 1.essthanSMB+DisplayedintheStoreforWindows10customers(andforany
26、customersonWindowsPhone8.1orearlier)应用商店图标2.界面图标界面图标在前面针对APP和网页界面设计中进行过详尽的讲解，因此这里主要总结WindoWS软件界面图标的一些正确使用方法。使用系统自带图标MiCrOSofI向用户提供了1000多个SegOeMDL2Assets字体格式的图标，如图所示。这些字体图标能够在不同的显示器、分辨率、甚至尺寸下都能保证清晰简洁。口 今治曰空 N) 口%ool0 行 0国/厚CD 6加04/口口 B ，*5/=-5 l V -困 CJ%E - 口。AA3 口 四 一 -A -gQI 8系统自带图标使用图标字体推荐使用图标字体，这
27、里除了系统自带的SegoeMDL2Assets字体，还可以使用如WingdingS或Webdings的图标字体,如图所示。，M6猛CD区国Bg前十3QaSDI3日/0，e*fbPxoGf*。Q庭令YHn9Q他总%Mer(jO*Gm”OOnO,0力ky个力匕“3图标字体使用可缩放的矢量图形SVG文件SVG文件可以再任何尺寸或分辨率下都拥有清晰的外观，并且大多数绘图软件都可以导出为SVG,因此它非常适合作为图标资源，如图所示。237X208SVG文件使用几何图形对象几何图形与SVG文件一样，也是一种基于矢量的资源，所以可以保证清晰的外观。由于必须单独指定每个点和曲线，因此创建几何图形比较复杂，如图
28、所示。不过当需要在应用运行时修改图标（以便对其进行动画处理等），它确实非常适用。几何图形对象可以使用位图图像（如PNG、GlF或JPEG）,不过不建议这样做位图要以特定尺寸创建，当图像缩小时，它通常会变模耦；当放大时，它通常会带有像素颗粒，如图所示，因此不建议这样设计。如果必须使用位图,建议使用PNG或GIF而不是JPEGo5.3软件常用界面类型软件界面设计是影响整个软件用户体验的关键所在。在软件界面中，常用界面类型为启动页、着陆页、集合页、主/细节页、详细信息页以及表单页。1 .启动页启动页，英文名称SplashScreen,通常是用户等待应用程序启动时的界面。出色的启动页令用户在等待软件启
29、动时眼前一亮，并对产品有更为深刻的印象，如图所示。启动页2 .登录页登录页，通常为用户使用软件时最先出现的页面。在软件应用中，大面积的设计区域用来突出显示用户可能想要浏览和使用的内容，如图5-50所示。登录页3 .集合页集合页方便用户浏览内容组或数据组。其中，网格视图适用于照片或以媒体为中心的内容，列表视图则适用于文本或数据密集型的内容，如图所示。PR新建参考线版面”命令，弹出“新建参考线版面”对话框，设置如图所示。单击“确定”按钮，完成参考线的创建。(3)选择“视图新建参考线”命令，弹出“新建参考线”对话框，在74像素的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建
30、。用相同的方法，在520像素处创建另一条水平参考线，在194像素处创建一条垂直参考线，效果如图所示。(4)选择“矩形”工具口.,在属性栏中的“选择工具模式”选项中选择“形状”，将“填充”颜色设为浅灰色(246、246、246),“描边”颜色设为无。在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形1”。(5)选择“椭圆”工具。，按住Shift键的同时，在图像窗口中适当的位置绘制圆形。在属性栏中将“填充”颜色设为黑色，“描边”颜色设为无，如图所示，在“图层”控制面板中生成新的形状图层“椭圆1”。(6)选择文件置入嵌入对象”命令，弹出“置入嵌入的对象”对话框，选择
31、云盘中的“Ch05素材制作Song音乐播放器软件制作Song音乐播放器软件首页01”文件，单击“置入”按钮，将图片置入到图像窗口中。将其拖曳到适当的位置并调整其大小，按EnIer键确定操作，在“图层”控制面板中生成新的图层并将其命名为“头像”。按Alt+CW+G组合键，为“头像”图层创建剪贴蒙版，效果如图所示。(7)选择“横排文字”工具T.,在适当的位置分别输入需要的文字并分别选取文字。选择“窗口字符”命令,弹出“字符”面板,将“颜色”设为灰色(103、103、103),其他选项的设苣分别如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中分别生成新的文字图层。(8)选择“横排
32、文字”工具T.,在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为灰色(103、103、103),其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。笳:普*-Re93-oca)-VaONfi.0%7IT100%工：8工.sa*o点加R翔Song音乐TTTTTtTT.I2双倍取分RJ*-图5-66图5-67图5-68(9)选择“圆角矩形”工具O.,在属性栏中将“填充”颜色设为蓝色(63、170、254),“描边”颜色设为无，“半径”选项设为2像素。在距离上方文字12像素的位置绘制圆角矩形，如图所示，在“图层”控制面板中生成新的
33、形状图层“圆角矩形1。在建詹乐(10)按CE+0组合健,打开云盘中的Ch05素材制作Song音乐播放器软件制作Song音乐播放器软件首页02”文件。选择“移动”工具于，将耳机图形拖曳到图像窗口中适当的位置并调整其大小，效果如图所示，在“图层”控制面板中生成新的形状图层“耳机”。在康春乐(11)选择横排文字”工具T.,在适当的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为白色，其他选项的设置如图所示，按Emel键确定操作，在“图层”控制面板中生成新的文字图层，效果如图所示。右微软普JRReflgr.12点ltWA0四Sfto%!T100%X在魏啻乐发现音乐MojSIITTTTTr
34、T,T.TTfi少CNi三T1%MSS8-*W*J-(12)选择“横排文字”工具T.,在适当的位置拖曳文本框，输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为黑色，其他选项的设置如图所示，按Enter键确定操作，在“图层”控制面板中生成新的文字图层，效果如图所示。用相同的方法输入其他文字，效果如图所示。厦乐发现音乐视频个性电台个性电台*MMI乐w三ase试所列表m三m.nx的商乐WMB(13)在“02”图像窗口中，选择“移动”工具.,选中“视频”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“视频”。用相同的方法分别将需要的图层拖曳
35、到图像窗口中并调整其大小，如图所示。1.个性电台本地乐,下理:放历史三试斫列及在线乐发现音乐我武的,乐WWttA6Vta(14)按住Shift键的同时，单击“视频”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“小图标”。按住ShifI键的同时，单击“矩形1”图层，将需要的图层同时选取，按Ctrl+G组合键，群组图层并将其命名为“侧导航”。2.制作导航栏(1)选择“矩形”工具口一在属性栏中将“填充颜色设为白色，“描边”颜色设为无。在图像窗口中适当的位置绘制矩形，如图所示，在“图层”控制面板中生成新的形状图层“矩形2”。6埠SOng音乐V份(2)选择“视图新建参考线”命令
36、，弹出“新建参考线”对话框，在36像素的位置新建一条水平参考线，设置如图所示，单击“确定”按钮，完成参考线的创建，效果如图所示。(3)选择“圆角矩形工具Q,在属性栏中将“粗细”选项设为1像素，“半径”选项设为2像素，在图像窗口中适当的位置绘制圆角矩形。在属性栏中将填充”颜色设为无，“描边”颜色设为灰色(148、148、148),效果如图所示，在“图层”控制面板中生成新的形状图层“圆角矩形2。(4)选择“直线”工具,在属性栏中将“粗细”选项设为1像素，按住Shift键的同时，在图像窗口中适当的位置绘制直线。在属性栏中将“填充”颜色设为无，“描边”颜色设为灰色(148、148、148),效果如图所
37、示，在“图层”控制面板中生成新的形状图层“形状1”。m(5)在“02”图像窗口中，选择“移动”工具也，选中“上一页”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“上一页”。用相同的方法，拖曳“下一页”图层到图像窗口中适当的位置，效果如图所示。(6)选择“圆角矩形”工具Q,在属性栏中将“半径”选项设为10像素，在图像窗口中适当的位置绘制圆角矩形。在属性栏中将“填充”颜色设为浅灰色(234、234、234),“描边”颜色设为无，如图所示，在“图层”控制面板中生成新的形状图层“圆角矩形3。(7)选择“横排文字”工具T.,在适当的位置输入需要的文字
38、并选取文字，在“字符”面板中，将“颜色”设为灰色(234、234、234),其他选项的设置如图所示，按Enter键确定操作，效果如图所示，在“图层”控制面板中生成新的文字图层。(8)在“02”图像窗口中，选择“移动”工具也，选中“搜索”图层，将其拖曳到图像窗口中适当的位置并调整大小，效果如图所示，在“图层”控制面板中生成新的形状图层“搜索”。搜索音乐，视频,歌词,电台Q(9)用相同的方法，分别将其他需要的图层拖曳到图像窗口中适当的位置，如图所示。曜索乐.携戴荻询,电台Q廿回(10)选择“横排文字”工具T,在距离上方图形14像素的位置输入需要的文字并选取文字，在“字符”面板中，将“颜色”设为深灰
39、色(39、39、39),其他选项的设置如图所示，按Enter键确定操作，在“图层”控制面板中生成新的文字图层。再次选取需要的文字，在“字符”面板中，将“颜色”设为蓝色(63、170、254),效果如图所示。切r口e、30*理。PgS!ftC:Tw工oo%6ojsr-*TTTTTT,TfcIT2-i三p%EQQ-OX-j8f.W传行电台分类欧H*IW(Il)选择“直线”工具在属性栏中将“填充”颜色设为无，“描边”颜色设为蓝色(63、170、254),“粗细”选项设为2像素。按住Shift键的同时，在图像窗口中适当的位置绘制直线，如图所示，在“图层”控制面板中生成新的形状图层“形状2”。bMrB.M.M.9ilQt?V-OX逸”行分提*场声”专(12)按住Shift键的同时，单击“矩形2”图层，将需要的图层同时选取，按CtrlG组合键，群组图层并将其命名为“导航栏”，如图所示。(I)选择“视图新建参考线”命令，弹出“新建参考线”对话框，在228像素的位置新建一条垂直参考线,设置如
