PhotoshopCCUI设计案例教程 教案 第3、4章 App界面设计、网页界面设计

教案编号：3

课题：第3章App界面设计

课时：16课时

授课类型：讲授+实训

教学目标：

・了解App的基础知识

•掌握App的设计规范

•认识App常用界面类型

教学重点：

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

教学难点：

App常用界面的设计方法

本章技能点：

社交类App-闪屏页的绘制方法、社交类App-欢迎页的绘制方法、社交类App-首页的绘

制方法、社交类App-消息列表页的绘制方法、社交类App-聊天页的绘制方法、社交类App-

个人中心页的绘制方法

本章教学技巧：

1.知识讲解

2.案例实训

教学过程:

（一）课前准备

1.授课前准备

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

2.板书

课题：第3章App界面设计

项目目标：

•了解App的基础知识

•掌握App的设计规范

•认识App常用界面类型

3.课程引入

通过“制作侃侃App”案例效果展示引入App界面设计的概念

（二）课程内容

3.1App基础知识

本节介绍App相关的基础知识，包括App的概念、App的流程以及App设计的原则。

3.1.1App的概念

App是应用程序Application的缩写，T殳指智能手机的第三方应用程序，如图所示。用户主

要从应用商店下载App,比较常用的应用商店有苹果的AppStore、华为应用市场等。应用程序的

运行与系统密不可分，目前市场上，主要的智能手机操作系统有苹果公司的iOS和谷歌公司的

Android系统。对于UI设计师而言，要进行移动界面设计工作，需要分别学习两大系统的界面设

计知识。

由RonDesignAgency创作的App界面

3.1.2.App设计的流程

App设计可以按照分析调研、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来

进行，如图所示。

分析调研交互设计交互自查界面设计界面测试设计验证

App设计的流程图

1.分析调研

App的设计是根据品牌的调性、产品的定位而进行的，不同应用领域的App,设计风格也会

有区别。因此，我们在设计之前应该先分析需求，了解用户特征，再进行相关竞品的调研，明确设

计方向，如图所示。

■许生三的李iWH始出H2不林高*灵文I?腐除

C(V)©88

*W\»LZ9MI-

QQ音乐（左）、网易云音乐（中）虾米音乐（右），三款虽然同是音乐App,但产品定位不同，因此设

计风格也有所区别

2.交互设计

交互设计是对整个App设计进行初步构思和流程制定的环节。一般需要进行纸面原型设计、

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

MobrteWYourelfWireframe

乌克兰UI/UX设计师TatianaLazarenko创作的App交互设计

3.交互自查

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

面设计之前检查出是否有遗漏缺失的细节问题，如下所示。

3SEWta«»

居次角度自置点

□值”架杓与海&值・架杓值晌是否再曷建解

信息层级是否清晰

□信息分类是否合理

信息视觉流是否流标

□庭蚓用户体■也是否一致

返回和出口是否符合用户预期

□逆向^全

跳转名称与目的是否一致

□是否充分考殖了好的e惭性

界面呈现控件呈现控件是否符合用户认知

□具有一»性

控件交互行为是否具有一致怪

□控件的不可用状却C何呈现

数据呈现空态如何呈现

□字数有取制时超用如何处建

无法完整显示的数据如何处理

□敷据过就何提示用户

数据按什么规则排序

□欺值是和限物定峋格式的显示

数据是否存在极值

□文祖现句式是否一致

用词是否一致、准确

□文案是否书制度■

输入与选择是否为用户提供了默认值

□1aAi示神J断

是否存在不必要的输入

□是否推定了城和"引起的页面渣动

交互过程与反馈是否周全地考虑了所有操作成功的反馈

□是杳冏全瑚9成了所秘酢失败的反使

操作过程中是否允许取消

□

特殊情形角色权限与状态不同造成会造成哪些差异

□是否提供将殊模式

4.界面设计

原型图审直通过之后，就可以进入界面的视觉设计阶段了，这个阶段的设计图就是产品最终

呈现给用户的界面。界面设计要求设计规范，图片、文字内容真实，并运用墨刀、principle等软件

制作成可交互的高保真原型，以便后续的界面测试，如图所示。

Account

overview

UMTcantwlpeandt«4»ctanscasMry

accountwMhanoeportvntytoopandatellcd

«nfof»nMionaboutituung•wnpMtM),

乌克兰设计师StasAristov、AlyaPrigotska%ThanhDo联合创作的App界面

5.界面测试

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

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

越南设计师TranMauTriTam进行的App细节调整

6.设计验证

设计验证是最后一个阶段，是为App进行优化的重要支撑。在产品正式上线后，通过用户的

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

Top0ng

IS*I-Topptng

App界面优化，由XTokenOx设计师创作，图片来源于追波网

3.1.3App设计的原则

在进行App设计时，需要遵循iOS和Android系统的规范，因此可以根据iOS下的设计原则

以及Android系统下MaterialDesign语言中的设计原则进行设计。

1.iOS设计原则

iOS系统设计有清晰、遵从、深度三大原则。

(1)清晰

在整个系统中，文字在各种尺寸上都要清晰易读，图标精确而清晰，装饰精巧且恰当，令用

户更易理解功能。利用负空间、颜色、字体、图形等界面元素巧妙地突出重要内容，并传达交互

性，如图所示。

1，。一.

Chats”

HO1

■二A

一•tn"―

■MjfOMce*

9tMi«

1:awCMTw**

9Uamnwifev

1A0m«1*(«**

o

以色列设计师VladTyzun创作的App界面,各元素通过精心设计后，巧妙的突出重要内容

(2)遵从

流畅的动画和清晰美观的界面可以帮助用户理解内容并与之互动，同时不干扰到用户的使用。

内容一般填满整个屏幕，而半透明和模糊效果通常暗示有更多内容。最低限度地使用边框、渐变

和阴影可使界面轻盈，同时确保内容明显，如图所示。

印度设计师AbhisekDas创作的App界面。其中位于左侧App界面中橙色渐变银行卡旁边的卡采用了半透

明效果，暗示用户可以进行滑动查看更多内容。两张App界面的渐变、边框以及阴影都不是很明显，使界

面非常轻盈

(3)深度

独特的视觉层级和真实的动画效果传达层次结构，赋予界面活力，并促进用户理解。令用户

通过触摸和探索发现程序的功能，不仅会使用户提高乐趣，更加方便用户了解功能，还能使用户

关注到额外的内容。在浏览内容时，层级的过渡可提供深度感，如图所示。

三@

岁

•士.+[

ay+K

乌克兰设计公司CadabraStudio创作的App界面

2.MaterialDesign设计原则

MaterialDesign语言有材质隐喻、大胆夸张、动效表意、灵活、跨平台五大原则。

(1)材质隐喻

MaterialDesign的灵感来自物理世界及其纹理，包括它们如何反射光绩口投射阴影。它对材料

表面进行了重新构想，加入了纸张和墨水的特性，如图所示。

材质隐喻

(2)大胆夸张

MaterialDesign以印刷设计方法中的排版、网格、空间、比例、颜色和图像为指导，来创造视

觉层次、视觉意义以及视觉焦点，使用户沉浸其中，如图所示。

大胆夸张

(3)动效表意

通过微妙的反馈和平滑的过渡使动效保持连续性。当元素出现在屏幕上时，它们在环境中转

换和重组，相互作用并产生新的变化，如图所示。

动效表意

(4)灵活

MaterialDesign系统旨在实现品牌表达。它与自定义代码库集成，允许无缝实现组件、插件和

设计元素，如图所示。

灵活

(5)跨平台

MaterialDesign使用包括Android、iOS、Flutter和Web的共享组件跨平台管理，如图所示。

跨平台

3.2App设计的规范

App设计的规范分为iOS设计规范和Android设计规范两部分。

3.2.1iOS设计规范

iOS的基础设计规范包括单位及尺寸、界面结构、布局、字体4个方面。

1.iOS设计单位及尺寸

(1)相关单位

•PP1：像素密度(PixelsPerInch,PPI)是屏幕分辨率单位，表示的是每英寸所拥有的像素数

量，如图所示。像素密度越大，画面越细腻。因此，iPhone4与iPhone3Gs屏幕尺寸虽然相同，但

实际像素大了f,清晰度自然变高。

X2+Ya

PPI=-------------------

对角线英寸

^4802+320

163=--------------------

3.5

以储个公式代入QtwWasPPl.JM

PPI的计算公式(X、Y分别为横向、纵向的像素数)

•Asset:比例因子。标准分辨率显示器具有1:1的像素密度，用@以表示，其中一个像素等于

一个点。高分辨率显示器具有更高的像素密度，比例因子为2.0或3.0,分别用@2x和@3x表示，

如图所示。因此，高分辨率显示器需要具有更多像素的图像。

•逻辑像素和物理像素：逻辑像素(LogicPoint),单位为"点"(points,pt),是根据内容尺寸

计算的单位。iOS开发工程师和使用Sketch软件设计界面的UI设计师使用的单位都是pt。物理像

素(PhysicalPixel),单位"像素”(pixels,px),是按照像素格计算的单位，也就是移动设备的实

际像素。使用Photoshop软件设计界面的UI设计师使用的单位都是px0

例如，iPhoneX/XS逻辑像素是375x812pt,由于视网膜屏像素密度的增加，即lpt=3px,因此

iPhoneX/XS的物理像素是1125x2436Px,如图所示。

逻辑像素与物理像素的转换

(2)设计尺寸

iOS常见的设备尺寸，如图下所示。在进行界面设计时，为了一稿适配多种尺寸，都是以

iPhone6/6s/7/8为基准的。如果使用Photoshop就创建750x1334px尺寸的画布，如果使用Sketch就

建立375x667pt尺寸的画布。

iOS常见设备的尺寸

设备名褥屏克尺寸PPIAsset竖屏点(point)翌屏分辨率(px)

iPhoneXSMAX6.5in458@3x414x8961242x2688

iPhoneXS5.8in458@3x375x8121125x2436

iPhoneXR6.1In326@2x414x896828x1792

iPhoneX5.8in458@3x375x8121125x2436

iPhone8+,7+,6s*,6+5.5in401@3x414x7361242x2208

iPhone8.7,6s,64.7in326@2x375x667750x1334

iPhoneSE,5,5S,5C4.0In326@2x320x568640x1136

iPhone4,4S3.5in326@2x320x480640x960

iPhone1,3G.3GS3.5in163@1x320x480320x460

iPadPro12.912.9In264@2x1024x13662048x2732

iPadPro10.510.5In264@2x834x11121668x2224

iPadPro,iPadAir2,RetinaiPad9.7in264@2x768x10241536x2048

iPadMini4,iPadMini27.9in326@2x768x10241536x2048

iPad1,29.7in132@1x768x1024768x1024

lOS0itlS灌尺寸

O2x@2xO2xQ3xO3x

640X960640X1136750X13341125X24361242X2208

PXPXPXpxpx

IPhone4iPhone5IPhone6/7/8IPhoneXIPhone6/7/8

Pius

iOS设计标准尺寸

2.iOS界面结构

iOS界面主要由状态栏、导航栏、标签栏组成，其结构如图和图所示。

iftftPPI标签栏高度

iPhoneXSMax1242«2688P*4SSW

iPhorwX1US>2436(»4S«W88P«176Px

•Ph<x*6P.6sp.7P.眇1242x2208px401PR60Px132Px13

*hone6.6S•7750x1334px326Ppi40p«88P«98Px

fronts.SC-5$640>1136p>326W4OP«88P>98Px

6Kz-45640.960P>326W40P.MP，98P»

-f*horwftFodToutMl—ft.*Z

320>480P»163PPI20Px44p«49Px

-t»=n

640px

320px640Px

状态栏赛40Px

匚状融导展离

MOpx44Px状态栏昌40Px

导Jficas8Px

1136px

480px960px

标签栏高98Px标答七麻98Px

iPhone&iPodTouch

第一代、第二代、第三代iPhona4-iPhone4sPhoneSs5cx5S

750px1080px1242px

状态化自40Px状态栏高60Px

导航栏高饯州

133419202206

P«pxpx

标董栏S5M6Px

Phone6Puls稗理做Phone6Plus设计版

iOS手机端界面结构图图片来源于520设计网

ift®尺寸状态栏高度导航栏高度

iPad3•4•5•6-Air-Airi-88Px

LJ2048x1536px264PPI40Px98px

iPad1•21024x768px132PPI