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

教案编号：5

课题：第5章软件界面设计

课时：16课时

授课类型：讲授+实训

教学目标：

・了解软件界面设计的基础知识

•掌握软件界面设计的规范

•认识软件界面常用界面类型

教学重点：

软件界面设计的规范、软件界面常用界面的设计方法

教学难点：

软件界面常用界面的设计方法

本章技能点：

音乐播放器软件-首页、歌单页、歌曲列表页的绘制方法

本章教学技巧：

1.知识讲解

2.案例实训

教学过程:

(-)课前准备

1.授课前准备

准备好教学用具和教学设备

2.板书

课题：第5章软件界面设计

项目目标：

・了解软件界面设计的基础知识

•掌握软件界面设计的规范

•认识软件界面常用界面类型

3.课程引入

通过“制作音乐播放器软件”案例效果展示引入软件界面设计的概念

首页

合乐

OR历史

三试断列衰

Ream*

我的音F

澹行*西

歌单页

30ng音乐

2・9。n，：唔IR分

EEMSS

视第

个性电台

*«乐

玄地音乐

&下0篱理或手

O瘩攻历史

UndertheWestway>(B.r.日BlurUndertheWestway

=试行列表

QLaid(HJameilaid

ROttK*,*

TieUpMyHanASUrullarLovehHe<e

段暮吹的音东

二Thebbertinei

<7w*a'MUMCWhentheLightsGoOutTheUbertmes

。茶行家西She64095theDrum*回GJTheStoneRomCoffechcxjteCIIKUC.

BedthapednarSKean。HopesandFears

歌曲列表页

(二)课程内容

5.1软件界面设计基础知识

软件界面设计的基础知识包括软件界面设计的概念、软件界面设计的流程以及软件界面设计

的原则。

5.1.1软件界面设计的概念

软件界面(softwareinterface)设计是界面设计的一个分支，主要针对软件的使用界面进行交

互操作逻辑、用户情感化体验、界面元素美观的整体设计。具体工作内容包括软件启动界面设计、

软件框架设计、图标设计等，如图所示。

由波兰设计师LukePachytel创作的软件界面

5.1.2软件界面设计的流程

软件界面的设计流程可以按照分析调研、交互设计、交互自查、视觉设计、设计测试、验证总

结的步骤来进行，如图所示。

分析调研交互设计交互自查视觉设计设计测试

软件界面设计流程图

1.分析调研

与App和网页界面设计类似，软件界面的设计也要先分析需求，明确设计方向。下图所示是

3款聊天消息界面，但因产品需求不同，设计风格有所区别。

由斯洛伐克设计师StanoBagin创作

由印度设计师P「akha「NeelSharma仓“乍乌克兰设计Yuliya创作

不同风格的软件界面

2.交互设计

交互设计是对整个软件设计进行初步构思和制定的环节。T殳需要进行纸面原型、架构设计、

流程图设计、线框图设计等具体工作，如图所示。

Userflow

印度设计师GauthamMukesh创作的交互设计图

3.交互自查

交互设计完成之后，进行交互自查是整个软件界面设计流程非常重要的一个阶段。可以在执

行界面设计之前检查出是否有遗漏缺失的细节问题，具体可以参考App中的交互自直。

4.视觉设计

原型图审直通过，就可以进入视觉设计阶段了，这个阶段的设计图即产品最终呈现给用户的

界面，设计要求与网页设计类似。最后运用Axure、墨刀等软件制作成可交互的高保真原型以便后

续的设计测试，如图所示。

印度设计师PareshKhatri制作可交互的高保真原型

5.界面测试

界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、

记录。在测试中可以对设计的细节进行相关的调整，如图所示。

/

葡萄牙UX/UI设计师PedroRibeiro进行软件界面细节调整

6.验证总结

验证总结是最后一个阶段，是为整套软件进行优化的重要支撑。在产品正式上线后，通过用

户的数据反馈进行记录，验证前期的设计，并继续优化，如图所示。

印度产品设计师DivanRaj设计师创作的软件界面

5.1.3软件界面设计的原则

在进行软件界面设计时，我们主要针对计算机应用界面、移动应用界面、网页界面以及游戏

界面进行设计。针对移动应用界面、网页界面设计原则，我们在前两章中都已阐述，本节主要围

绕Windows系统下的FluentDesign语言（微软于2017年开发的设计语言）中的设计原则进行讲

解，如图所示。

Windows系统下的FluentDesign语言

FluentDesign有自适应、共鸣、美观三大原则。

1.自适应：在每台设备上都显得自然

FluentDesign可根据环境进行调整，可以很好地在平板电脑、台式机、XBOX甚至混合现实

头戴显示设备上运行。止矽卜，当用户添加更多硬件时，如增加额外的显示器，也会正常显示，如图

标

自适应

2.共鸣：直观且强大

FluentDesign能了解和预测用户需求，并根据用户的行为和意图进行调整，当某个体验的行

为方式符合用户的期望时，该界面就显得很直观，如图所示。

使用正确的控件可帮助用户更好的进行交互以符合用户期望

3.美观：吸引力十足且令人沉醉

FluentDesign重视华丽的效果，通过融入物理世界的元素，如光线、阻影、动效、深度以及纹

理，增强用户体验的物理效果，让应用变得更具吸引力，如图所示。

濯嗝川H

/3,«•.，

界面使用了阴影

5.2软件界面设计的规范

软件界面设计规范也包括设计尺寸及单位、界面结构、布局、字体及图标5个方面，我们围

绕FluentDesign语言中的规范进行讲解。FluentDesign语言可以为不同平台的Windows10设备软

件界面提供指导，如图所示。通过FluentDesign,不仅能呼应前面移动应用界面、网页界面设计规

范，更能系统掌握Windows计算机应用的设计规范。

FIuentDesign语言应用于不同平台的Windows10设备的软件界面

5.2.1软件设计的尺寸及单位

1.相关单位

有效像素(EffectivePixels,eps)简称"e像素"，是一个虚拟度量单位，用于表示布局尺寸和

间距(独立于屏幕密度X基于Windows通过系统缩放保证元素识别的工作原理，在设计通用

Windows平台应用时,要以有效像素而不是实际物理像素为单位进行设计，在这里eps可等同于

像素，如图所示。

eps=px

软件设计的单位

2.设计尺寸

软件应用在手机、平板电脑、台式机、电视等设备上运行，可建立一套完整的设计系统，而不

是为每台设备都进行独立的UI设计。其中，通用Windows平台应用建议针对Windows10设备的

关键断点进行设计，并实现通用，如图所示。

大小级别断点典型屏幕大小（对角线）设备窗口大小

小640px4"到6”；20”到65”手机、电视320x569、

或更小360x640、

480x854

中641px7"到12"平板电脑960x540

到

1007px

大1008px13"以及更大电脑、笔记本1024x640、

或更大电脑、1366x768、

SurfaceHub1920x1080

Windows10不同设备的设计尺寸

在针对特定断点进行设计时，应针对应用的屏幕可用空间大小进行设计，而不是屏幕大小。

当应用全屏运行时，应用窗口的大小与屏幕的大小相同，但当应用不全屏运行时，窗口的大小则

小于屏幕的大小，如图所示。

罗马尼亚产品设计师VladGrama创作的未全屏运行的软件界面

5.2.2软件设计的界面结构

通用Windows平台的软件界面通常都由导航，命令栏和内容元素组成,其结构如图所示。

NavigationContentConwnand

软件设计的界面结构

5.2.3软件设计的布局

1.页面布局

（1）导航

常见的导航模式有左侧导航和顶部导航两种，如图所示。

LeftnavTopnav

左侧导航（左）顶部导航（右）

•左侧导航：当有超过5个导航项目或应用程序中超过5个页面时，建议使用左侧导航。导航

内通常包含：导航项目、应用设置栏目以及账户设置栏目，如图所示。

口

左侧导航

菜单按钮允许用户展开和折叠导航窗格。当屏幕尺寸大于640像素时，单击菜单按钮会将导

航面板展开为条形，如图所示。

折叠（左）展开（右）

当屏幕尺寸小于640像素时，导航面板将完全折叠，如图所示。

图5-20完全折叠（左）展开（右）

•顶部导航：顶部导航也可以作为一级导航。相较于可折叠的左侧导航，顶部导航始终可见,

如图所示。

图5-21顶部导航

（2）命令栏

命令栏为用户提供应用程序中最常见任务的快速访问方式。命令栏可以提供对应用程序级或

页面级命令的访问，并且可以与任何导航模式一起使用，如图所示。

Primarycommands

一口X

I-----Overflowmenu

顶部命令栏

命令栏可以放在页面的顶部或底部，以最适合应用程序的设计为准，如图所示。

底部命令栏

(3)内容

内容因应用程序而异，因此可以通过多种不同方式呈现内容。这里，主要通过剖析常见的页

面模式从而认识内容的布局方式。

•着陆页：着陆页，又称为“登录页"，通常为用户使用软件时最先出现的页面。在软件应用中,

大面积的设计区域是为了突出显示用户可能想要浏览和使用的内容的，如图所示。

登录页

•集合页：集合页方便用户浏览内容组或数据组。其中，网格视图适用于照片或以媒体为中心

的内容，列表视图则适用于文本或数据密集型的内容，如图所示。

置、账户创建、反馈中心等，如图所示。

表单页

2.响应式布局

通过响应式布局保证软件在所有设备上清晰可辨、易于使用。其中所有设备尺寸及内外边距

的增量都应为4epx0对于较小的窗口宽度（小于640像素），建议使用12epx外边距，而对于较

大的窗口宽度，建议使用24epx外边距，如图所示。

Smallwindowwidth<640pixelslargewindowwidth>640pixels

响应式布局

5.2.4软件设计的文字

文字在前面的App和网页界面设计中都已详细介绍过，因此本节主要针对Windows平台应用

介绍文字的使用。

1.系统字体

通用Windows平台应用中，建议英文使用默认字体SegoeUI,如图所示。

ABCDEFGHIJKLMNOP

QRSTUVWXYZ

abcdefghijklmnopqurs

tuvwxyz

1234567890

SegoeUI字体

当应用显示非英语语言时可选择另一种字体，其中中文建议使用默认字体微软雅黑，如图所

非拉丁语言字体

字体系列样式注意

Ebrima常燃、相体非洲语言脚本的用户界面字体（埃塞俄比亚文、西非书面文、索马里文、提芬纳格

文、瓦伊文）.

Gadugi鬻规、相体北美语言脚本的用户界面字体（加拿大音节文字、切罗基语）.

Leelawadee常规、半细、东南亚语言脚本的用户界面字体（布吉斯语、老搔语、泰语）.

UI粗体

Malgun常规朝鲜语的用户界面字体。

Gothic

Microsoft常规、粗体、繁体中文的用户界面字体。

JhengHei打，

UI

Microsoft常规、相体、篇体中文的用户界面字体.

YaHeiUI细体

Myanmar常燃缅甸文脚本的后备字体.

Text

NirmalaUI常规、半细、南亚语言脚本的用户界面字体（孟加拉语、梵文、古吉拉特语、锡克教文、埃纳德

粗体语'马拉雅拉姆语、奥里亚语、欧甘谱、僧伽罗语、索拉文,泰米尔语、泰卢固

语）

SimSun常规传蜕的中文用户界面字体.

YuGothic细体、半细、日语的用户界面字体.

UI篇技、半粗、

粗体

微软雅黑字体

在进行UI设计时Sans-serif字体是适合用于标题和UI元素的，如下所示。Serif字体适合

用于显示大量正文，如下所示。

标题字体

Sans-serif字体

Sans-serif字体是用于标题和UI元素的不错选择。

字体系列样式注意

Arial常规、斜体、粗体、粗斜体、黑体支持欧洲和中东语言脚本（拉丁

文'希腊语,西里尔文、阿拉伯

语、亚美尼亚语和希伯来语）黑粗

体仅支持欧洲语言脚本.

Calibri常规、斜体、粗体、粗斜体、细支持欧洲和中东语言脚本（拉丁

体、细斜体文、希腊语、西里尔文、阿拉伯语

和希伯来语）.阿拉伯语仅在竖体

中可用。

Consolas常规、斜体、粗体、粗斜体支持欧洲语言脚本（拉丁文、希腊

语和西里尔文）的固定宽度字体。

SegoeUI常规、斜体、细斜体、黑斜体、粗欧洲和中东语言脚本（阿拉伯语、

体、粗斜体、细体、半细、半粗、亚美尼亚语、西里尔文、格普吉亚

黑体语、希腊语、希伯来语、拉丁文）

以及像像语脚本的用户界面字体.

Selawik常规、半细、细体、粗体'半粗计量方面与SegoeU1兼容的开源字

体,用于其它平台上不希望包含

SegoeUI的应用。

正文字体

Serif字体

Serif字体适合用于显示大量文本。

字体系列样式注意

Cambria常规支持欧洲语言脚本（拉丁文、希腊语、西里尔文）的Serif字体.

Courier常规、斜体、粗支持欧洲和中东语言脚本（拉丁文、希腊语、西里尔文、阿拉伯语、亚美尼亚

New体、粗斜体语和希伯来语）的Serif固定宽度字体.

Georgia常规、斜体、粗支持欧洲语言脚本（拉丁文、希腊语和西里尔文）。

体、粗斜体

TimesNew常规、斜体、粗支持欧洲语言脚本（拉丁文、希腊语、西里尔文、阿拉伯语、亚美尼亚语、希

Roman体、粗斜体伯来语）的传统字体.

2.字体大小

通用Windows平台上的字体通过字号及字重的变化，在页面上建立了信息的层次关系，帮助

用户轻松阅读内容，如图所示。

TypeWeight5mUnehNglw

HeaderLight46px56px

SubheaderLight34px40px

TitleSemilight24px28px

SubtitleRegular20px24px

BaseSemibold15px20px

BodyRegular15px20px

CaptionRegular12Px14px

不同字重和字号

5.2.5软件设计的图标

软件中的图标主要分为应用图标和界面图标，如图所示。

应用图标示例（左）界面图标示例（右）

1.应用图标

应用图标在前面针对iOS和Android系统进行过详细的讲解，本节主要讲解Windows平台中

的应用图标。应用图标会应用于Windows中的不同场景，由于场景不同，图标的具体名称也会有

所变化，如下所示。

应用图标的名称

图标名称显示在资产文件名称

小磁贴“开始"菜单SmallTile.png

中等磁贴开始菜单中，MicrosoftStorelisting、*Squarel50xl50Logo.png

宽磁贴"开始”菜单Wide310xl50Logo.png

大磁贴开始菜单中，MicrosoftStorelisting\*LargeTile.png

应用图标在开始菜单、任务栏、任务管理器的应用列Square44x44Logo.png

表

初始屏幕应用的初始屏幕是SplashScreen.png

锁屏提醒微你的应用磁贴BadgeLogo.png

标

程序包截应用安装程序，合作伙伴中心中，在应用商StoreLogo.png

标/应用商店，在应用商店中的''写评论"选项中的”报告

店徽标应用程序”选项

(1)磁贴图标

4个磁贴大小分别为小(71pxx71pxX中(150pxxl50px\宽(310pxxl50px\大(310pxx

310pxX

小磁贴：将图标宽度和高度限制为磁贴大小(71pxx71px)的66%,如图所示。

小磁贴

中磁贴：将图标宽度限制为磁贴大小(150Pxx150px)的66%,将高度限制为50%,这样可以

防止品牌栏中的元素重叠，如图所示。

66%

FourthCoffee50%

Munson'sPickles

中磁贴

宽磁贴：将图标宽度限制为磁贴大小(310pxxl50px)的66%,将高度限制为50%,这样可以

防止品牌栏中的元素重叠，如图所示。

66%

FourthCoffee50%

宽磁贴

大磁贴：将图标宽度限制为磁贴大小(310pxx310px)的66%,将高度限制为50%,如图所

大磁贴

(2)应用图标

桌面开始菜单的应用列表、桌面任务栏、桌面快捷方式、桌面控制面板中，应用图标的设计

尺出口图所示.

应用图标的设计尺寸

资源大小文件名示例

16x16*Square44x44Logo.targetsize-16.png

24x24*Square44x44Logo.targetsize-24.png

32x32*Square44x44Logo.targetsize-32.png

48x48*Square44x44Logo.targetsize-48.png

256x256*Square44x44Logo.targetsize-256.png

20x20Square44x44Logo.targetsize-20.png

30x30Square44x44Logo.targetsize-30.png

36x36Square44x44Logo.targetsize-36.png

40x40Square44x44Logo.targetsize-40.png

60x60Square44x44Logo.targetsize-60.png

64x64Square44x44Logo.targetsize-64.png

72x72Square44x44Logo.targetsize-72.png

80x80Square44x44Logo.targetsize-80.png

96x96Square44x44Logo.targetsize-96.png

"*"表示建议最少提供的尺寸

(3)初始屏幕图标

初始屏幕的尺寸如图所示，图标对应放置于屏幕内，一般建议在620x300像素的初始屏幕内

进行图标设计。

ApplicationVisualAssetsCapabilitiesDeclarationsOContentURlsPackaging

SplashSaeen

Wt'dcwtitcttippjshcUdd4Pto»diffen*renAXcni-WindowspraMds•amplew»ytodothisVMosourcetotdn9

mTh«»w<t>oniitialltha“Mt\wh«hat*vwdmlh«nwn^E.H*，Stfrwy

btodumTito

HtmtSt*M»i$crttn

\MdeT««

UrgeTde

DestmibonAsuts

RkonScHtsMlScabs

XFModeB<ubk(5MT>eC<»9«l

邑>v<Ofnm»nd«dp«ddng

PKk»9elogo

*DisplaySettings

SpteshsaeenbKk^round

*PreviewImages

Screen

Autti\$cM\$<r«*<vpng

ScaledAn«ts

Scale400Scale150Scale125Scale100

2ttO>t2tOR1240>e00p>..9K>450p<EIJKM..62O»XOp-

初始屏幕

(4)锁屏提醒图标

锁屏提醒图标和其他应用图标不同，设计师不能提供自己的锁屏提醒图像，仅可以使用系统

提供的锁屏提醒图像。

(5)应用商店图标

在应用商店中，可以上传图标代替图像，其尺寸分别为300x300、150x150和71x71像素。

虽然需要提供3个大小，但设计只进行300x300像素即可，如图所示。

QForcustomersonWindows10andXbox,displayuploadedlogoimagesinsteadoftheimagesfrommypackages

Storedisplayimages

•300x300sizerequired;othersizesoptional

1:1Apptileicon1:1•Acceptedfiletypes:png

3+00x300++71x71,Lessthan5MB

DisplayedintheStore

forWindows10

customers(andforany

customersonWindows

Phone8.1orearlier)

应用商店图标

2.界面图标

界面图标在前面针对App和网页界面设计中进行过详尽的讲解，因此这里主要总结Windows

软件界面图标的一些正确使用方法。

•使用系统自带图标

Microsoft向用户提供了1000多个SegoeMDL2Assets字体格式的图标，如图所示。这些字体

图标能够在不同的显示器、分辨率、甚至尺寸下都能保证清晰简洁。

□