《Photoshop CC UI设计案例教程》课件 第5章 软件界面设计

本章介绍：软件界面设计泛指对软件的使用界面进行设计。本章针对软件界面设计的基础知识、软件界面的设计规范、软件常用的界面类型以及软件界面的绘制方法进行系统讲解与演练，通过课堂案例、课堂练习、课后习题和AI扩展案例，读者可掌握软件常用界面的设计流程和绘制方法。第5章软件界面设计熟悉软件界面设计的基础知识掌握软件界面的设计规范掌握软件常用的界面类型知识目标掌握软件界面设计思路掌握绘制软件首页的方法掌握绘制软件歌单页的方法掌握绘制软件歌曲列表页的方法掌握利用AI工具生成软件界面的能力能力目标培养良好的软件界面设计习惯培养对软件界面的审美能力培养软件界面设计的创意能力素质目标软件界面设计的概念软件界面设计的流程软件界面设计的原则5.1 软件界面设计的基础知识软件界面（softwareinterface）设计是界面设计的一个分支，主要针对软件的界面进行交互操作逻辑、用户情感化体验、界面元素美观的整体设计，具体设计内容包括软件启动界面设计、软件框架设计、图标设计等。5.1.1 软件界面设计的概念软件界面的设计流程包括分析调研、资料收集、交互设计、交互自查、视觉设计、测试验证等环节。5.1.2 软件界面设计的流程1.分析调研与App和网页界面的设计类似，软件界面的设计也要先分析需求，明确设计方向。下图是3款音乐播放器的界面，由于产品需求不同，因此设计风格有所区别。5.1.2 软件界面设计的流程2.资料收集根据初步确定的设计方向和界面风格，进行软件界面相关的资料收集以及整理，为接下来的交互设计做准备。5.1.2 软件界面设计的流程3.交互设计交互设计是对整个软件设计进行初步构思和流程制定的环节，一般需要进行纸面原型设计、架构设计、流程图设计、线框图设计等。5.1.2 软件界面设计的流程4.交互自查交互设计完成之后，进行交互自查，这是整个软件界面设计流程中非常重要的一个环节。5.视觉设计原型图审查通过后，就可以进入视觉设计环节了，这个环节的设计图即产品最终呈现给用户的界面，其设计要求与网页界面设计的类似。5.1.2 软件界面设计的流程6.测试验证测试验证是指让具有代表性的用户进行典型操作，设计人员和开发人员在此环节共同观察、记录，可以对设计的细节进行相关的调整。在产品正式上线后，设计人员应继续通过用户的数据反馈进行记录，验证前期的设计，并持续优化。5.1.2 软件界面设计的流程在进行软件界面设计时，主要针对计算机应用界面、App界面、网页界面及游戏界面进行设计。对于App界面、网页界面的设计原则，前文已阐述，本小节主要围绕Windows下的FluentDesign语言（微软于2017年正式发布的设计语言）中的设计原则进行讲解。5.1.3 软件界面设计的原则1.自适应：在每台设备上都显得自然FluentDesign可根据环境进行调整，可以很好地在平板计算机、台式机、Xbox甚至混合现实头戴显示设备上运行。此外，当用户添加更多硬件时，如增加额外的显示器，也会正常显示。5.1.3 软件界面设计的原则2.共鸣：直观且强大FluentDesign能了解和预测用户需求，并根据用户的行为和意图进行调整，当某个体验的行为方式符合用户的期望时，该界面就显得很直观。5.1.3 软件界面设计的原则3.美观：吸引力十足且令人沉醉FluentDesign重视视觉效果，通过融入光线、阴影、动效、深度及纹理等方面的元素，增强用户体验，让应用变得更具吸引力。5.1.3 软件界面设计的原则软件界面的设计规范也包括设计的尺寸及单位、界面结构、布局、文字及图标5个方面，本节围绕FluentDesign语言中的规范进行讲解。FluentDesign语言可以为不同平台的Windows软件界面的设计提供指导。通过FluentDesign，我们不仅能掌握前面的App界面、网页界面的设计规范，还能系统掌握Windows软件界面的设计规范。5.2 软件界面的设计规范5.2 软件界面的设计规范软件界面设计的单位及尺寸软件界面设计的界面结构软件界面设计的布局软件界面设计的文字软件界面设计的图标1.单位有效像素（EffectivePixels，eps），是一个虚拟度量单位，用于表示布局尺寸和间距（独立于PPI）。基于Windows缩放系统保证元素可识别的工作原理，在设计通用Windows平台应用时，要以有效像素而不是实际物理像素（px）为单位进行设计，在这里有效像素可等同于物理像素。5.2.1 软件界面设计的单位及尺寸2.尺寸软件应用可在手机、平板计算机、计算机、电视等设备上运行，设计人员可建立一套完整的设计系统，而不是为每台设备都进行独立的UI设计。例如在设计通用Windows平台应用时，可以针对Windows设备的关键断点进行设计，并实现通用。5.2.1 软件界面设计的单位及尺寸在针对特定断点进行设计时，应针对应用的屏幕可用空间大小进行设计，而不是针对实际屏幕大小进行设计。当应用全屏运行时，窗口的大小与屏幕的大小基本相同；但当应用不全屏运行时，窗口的大小则小于屏幕的大小。5.2.1 软件界面设计的单位及尺寸通用Windows平台的软件界面通常由导航、命令栏和内容组成。5.2.2 软件界面设计的界面结构1.界面布局（1）导航。常见的导航模式有左侧导航和顶部导航两种。5.2.3 软件界面设计的布局左侧导航顶部导航•左侧导航：当有超过5个导航项目或应用程序中超过5个界面时，建议使用左侧导航。5.2.3 软件界面设计的布局菜单按钮允许用户展开和折叠导航面板。当屏幕宽度大于640px时，单击菜单按钮可以将导航面板展开。当屏幕宽度小于等于640px时，导航面板将完全折叠，单击菜单按钮后可展开。5.2.3 软件界面设计的布局•顶部导航：也可以作为一级导航。相较于可折叠的左侧导航，顶部导航始终可见。5.2.3 软件界面设计的布局命令栏可以放在页面的顶部或底部，以最适合应用程序的设计为准。5.2.3 软件界面设计的布局顶部命令栏底部命令栏（3）内容。内容因应用程序而异，因此可以通过多种不同方式呈现内容。这里主要通过剖析常见的页面模式来介绍内容的布局方式。5.2.3 软件界面设计的布局着陆页表单页集合页主/细节页详细信息页2.响应式布局使用响应式布局可保证软件界面在所有设备上清晰可辨、易于使用，其中所有设备的尺寸及内外边距都应为4px的整数倍。对于较小的窗口宽度（小于等于640px），建议使用12px外边距；而对于较大的窗口宽度，建议使用24px外边距。5.2.3 软件界面设计的布局1.系统字体SegoeUIVariable是Windows的新系统字体。它是对经典SegoeUI字体的全新演绎，应用这个字体，可以在非常小的尺寸下提供出色的易读性，并能改进轮廓。5.2.4 软件界面设计的文字应用的全部UI会使用同一种字体，建议始终使用Windows应用的默认字体SegoeUIVariable。其设计目的是为了在不同大小和像素密度下，保持字体的最佳可读性，并提供清晰、美观的美学效果。5.2.4 软件界面设计的文字2.字号及文字粗细用户在观看页面时会受视觉层次结构影响，所以不同层级的内容有不同的字体大小和字重。5.2.4 软件界面设计的文字软件中的图标主要分为应用图标和界面图标。5.2.5 软件界面设计的图标1.应用图标前文针对iOS和Android的应用图标进行过详细的讲解，本小节主要讲解Windows平台中的应用图标。应用图标会应用于Windows中的不同场景。5.2.5 软件界面设计的图标不同的应用图标可以显示在Windows的相同位置。5.2.5 软件界面设计的图标当应用图标的缩小至48px×48px以下时，需要简化图标的设计细节。在缩小时，建议缩小为图标的固定尺寸，而不是随意缩放，这样才能保证清晰的视觉效果。5.2.5 软件界面设计的图标当将应用图标放大至48px×48px及以上时，应保证图标的分辨率，并按四倍比例放大，如将图标从48px×48px放大至192px×192px，可确保图标清晰显现。5.2.5 软件界面设计的图标2.文件类型图标文件类型图标是指特定的文件或文件格式的图标。在大多数微软用户界面中，文件类型图标的建议尺寸为16px×16px、48px×48px和96px×96px。5.2.5 软件界面设计的图标3.界面图标在用户界面中，可以通过使用界面图标来执行打开命令栏、导航栏或状态指示栏等操作。5.2.5 软件界面设计的图标界面图标有线性界面图标和面性界面图标两种，可以适应各种界面布局、提升视觉权重和图标可用性，左侧为线性界面图标，右侧为面性界面图标。5.2.5 软件界面设计的图标（1）使用系统自带图标。微软公司向用户提供了1000多个SegoeMDL2Assets字体格式的图标。这些图标能够在不同的显示器、分辨率，甚至不同尺寸下保证清晰的外观。5.2.5 软件界面设计的图标（2）使用图标字体。除了系统自带的SegoeMDL2Assets字体，还可以使用SegoeFluent等图标字体。5.2.5 软件界面设计的图标（3）使用SVG文件图标。SVG文件图标可以在任何尺寸或分辨率下都保持清晰的外观，并且大多数绘图软件都可以将图标导出为SVG文件，因此它非常适合作为图标资源。5.2.5 软件界面设计的图标（4）使用几何图形。几何图形与SVG文件一样，也是一种基于矢量的资源，所以可以保证清晰的外观。由于必须单独指定每个点和每条曲线，因此创建几何图形比较复杂。如果需要在应用运行时修改图标（以便对其进行动画处理等），则几何图形非常合适。5.2.5 软件界面设计的图标（5）使用位图（如PNG图像、GIF图像或JPEG图像）。位图要以特定尺寸创建，当图像缩小时，它通常会变模糊；当图像放大时，它通常会带有像素颗粒，因此不建议使用位图设计。如果必须使用位图，建议使用PNG图像或GIF图像而不是JPEG图像。5.2.5 软件界面设计的图标软件界面设计是影响整体软件用户体验的关键要素。在软件界面中，常用的界面类型有启动页、着陆页、集合页、主/细节页、详细信息页以及表单页。1.启动页启动页（launchscreen）通常是用户等待应用程序启动时的界面。出色的启动页可令用户在等待软件启动时眼前一亮，对软件产生深刻的印象。5.3 软件常用的界面类型2.着陆页着陆页又称为登录页，通常为用户使用软件时出现的界面。在软件应用中，大面积的设计区域用来突出显示用户可能想要浏览和使用的内容。5.3 软件常用的界面类型3.集合页集合页方便用户浏览内容组或数据组。其中，网格视图适用于以照片或媒体为中心的内容，列表视图则适用于文本或数据密集型的内容。5.3 软件常用的界面类型4.主/细节页主/细节页由列表视图（主）和内容视图（细节）共同组成。两个视图都是固定且可以垂直滚动的。当选择列表视图中的项目时，内容视图也会对应更新。5.3 软件常用的界面类型5.详细信息页当用户要查看详细内容时，在主/细节页基础之上可创建内容的详细信息页，以便用户能够不受干扰地查看页面。5.3 软件常用的界面类型6.表单页表单由一组控件组成，用于收集和提交来自用户的数据。大多数应用将表单用于页面设置、账户创建、意见反馈等。5.3 软件常用的界面类型5.4 课堂案例——制作天籁音乐播放器软件界面课堂案例——制作天籁音乐播放器软件首页课堂案例——制作天籁音乐播放器软件歌单页课堂案例——制作天籁音乐播放器软件歌曲列表页使用“矩形”工具添加底图颜色，使用“置入”命令置入图片，使用剪贴蒙版调整图片显示区域，使用“横排文字”工具添加文字，使用“矩形”工具、“椭圆”工具和“直线”工具绘制基本形状。5.4.1 课堂案例——制作天籁音乐播放器软件首页效果图使用“置入”命令置入图片，使用剪贴蒙版调整图片显示区域，使用“横排文字”工具添加