教案編號：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