PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第5章.docx

《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,如图所示。AbcdefghijklmnopQrstuvwxyzabcdefghijklmopqurstuvwxyz1234567890SegoeUl字体当应用显示非英语语言时可选择另一种字体，其中中文建议使用默认字体微软雅黑，如图所ZF0非拉丁语言字体字体系列惮式注息Ebrima相体非洲语言Bl本的用户界面字体（埃塞俄比亚文.西非书面文、索马里文.提芬纲格文、用伊文）,Gadugi租体北美语言88本的用户界面字体（加掌大音节文字、切罗基诺）.LeelawadeeUl常SL半期.粗体东南亚语言BO本的用户界面字体（布西斯诺、老挝语、泰诺）.MalgunGothk常规朝鲜话的用户界面字体.MicrosoftJ