教案編號：3

課題：第3章App界面設計

課時：16課時

授課類型：講授+實訓

教學目標：

?了解App的基砒知識

?掌握App的設計規(guī)范

?認識App常用界面類型

教學重點：

App的設計規(guī)范、App常用界面的設計方法

教學難點：

App常用界面的設i-方法

本章技能點：

社交類App-閃屏頁的繪制方法、社交類App-歡迎頁的繪制方法、社交類App?首頁的繪

制方法、社交類App-消息列表頁的繪制方法、社交類App-聊天頁的繪制方法、社交類App-

個人中心頁的繪制方法

本章教學技巧：

1.知識講解

2.案例實訓

教學過程:

（一）課前準備

1.授課前準備

準備好教學川具和教學設備

2.板書

課題：第3章App界面設計

項目目標：

?了解App的基礎知識

?掌握App的設計規(guī)范

?認識App常用界面類型

3.課程引入

（二）課程內容

3.1App基礎知識

本節(jié)介紹App相關的基礎知識，包括App的概念、App的流程以及App設計的原則，

3.1.1App的概念

App是應用程序Application的縮寫，一般指智能手機的第三方應用程序,如圖所示。用戶主

要從應用商店下載App,比較常用的應用商店有蘋果的AppStore.華為應用市場等。應月程序的

運行與系統(tǒng)密不可分，目前市場上，主要的智能手機操作系統(tǒng)有蘋果公司的iOS和谷歌公司的

Android系統(tǒng)。對于UI設計師而言,要進行移動界面設計工作，需要分別學習兩大系統(tǒng)的界面設

計知識。

由RonDesignAgency創(chuàng)作的App界面

3.1.2.App設計的流程

App設計可以按照分析調研、交互設計、交互自查、界面設計、界面測試、設計瞼證的步驟來

進行，如圖所示。

App設計的流程圖

1.分析調研

App的設計是根據品牌的調性、產品的定位而進行的，不同應用領域的App,設計風格也會

有區(qū)別。因此，我們在設計之前應該先分析需求，了解用戶特征，再進行相關競品的調研，明確設

計方向，如圖所示。

|—------yy

推再歐能

或于生弟乳率我被㈤0冷?卷■不升豪魯更女賤然a

QQ音樂（左）、網易云音樂（中）、蝦米音樂（右），三款雖然同是音樂App,但產品定位不同，因此設

計風格也有所區(qū)別

2.交互設計

交互設計是對整個App設計進行初步構思和流程制定的環(huán)節(jié)。一般需要進行紙面原型設計、

架構設計、流程圖設計、線框圖設計等具體工作，如圖所示。

MoMtaco*Vbur?IT

烏克蘭UI/UX設計師TatianaLazarenko創(chuàng)作的App交互設計

3.交互自查

交互設計完成之后,進行交互自查是整個App設計流程非常重要的一個階段。可以在執(zhí)行界

面設計之前檢查出是否有遺漏缺失的細節(jié)問題，如下所示。

交互惺計自宣寰

自宣點|

1居次角度

□但蛛杓與誨程俗信煉構是否害曷建解

信息層級是否清晰

□值息分類是否合襄

信息視覺流是否流暢

□用戶體一眼是否T

返回和出口是否符合用戶隕期

□逆向at*的設計是否g"全

跳轉名稱與目的是否一致

O墨告充分了骨件的。侑件

界面發(fā)觀控件泉現控件是否符合用戶認知

□律件樣式是否具有T件

控件交互行為累否H有一致性

□舞件的不可岫閨B何?現

數裾呈現空態(tài)如何呈現

□亭散書￡制時超融如何加i

無法完整顯示的數據如何處理

□用默岬0例》示《廣

fit據援什么雙則博序

□歐值是朝炳定的格式的顯示

效據是否存在極值

□文玄呈理句瓢香一！i

用詞是否一致、準確

□文玄是否書

抬人與遺捋是否為用戶提供了款認值

□

是否存在不必要的g入

□是否報定了引起的RE滾動

交互過程與反饋是否同全地考慮了所有操作成功的反饋

□是否陶全也■了斯E網收的反飲

操作過程中是否允許取消

□j?swr?Hae4iM0jt

特姝情形角色權限與狀態(tài)不同造成會造成哪些差異

□是杳提供村制I式

4.界面設計

原型圖審查通過之后，就可以進入界面的視覺設計階段了，這個階段的設計圖就是產品最終

呈現給用戶的界面。界面設計要求設計規(guī)范，圖片、文字內容真實，并運用墨刀、principle等軟件

制作成可交互的高保真原型，以便后續(xù)的界面測試，如圖所示。

烏克蘭設計師StasAristov、AlyaPrigotskaxThanhDo聯合創(chuàng)作的App界面

5.界面測試

界面測試階段是讓具有代表性的用戶進行典型操作，設計人員和開發(fā)人員在此階段共同觀察、

記錄。在測試中可以對設計的細節(jié)進行相關的調整，如圖所示。

4.7K

越南設計師TranMauTriTam進行的App細節(jié)調整

6.設計驗證

設計驗證是最后一個階段，是為App進行優(yōu)化的重要支撐。在產品正式上線后，通過用戶的

數據反饋進行記錄，驗證前期的設計，并繼續(xù)優(yōu)化，如圖所示。

MW

App界面優(yōu)化，由XTokenOx設計師創(chuàng)作，圖片來源于追波網

3.1.3App設計的原則

在進行App設計時，需要遵循iOS和Android系統(tǒng)的規(guī)范，因此可以根據iOS下的設計原則

以及Android系統(tǒng)下MaterialDesign語言中的設計原則進行設計。

1.iOS設計原則

iOS系統(tǒng)設計有清晰、遵從、深度三大原則。

(1)清晰

在整個系統(tǒng)中，文字在各種尺寸上都要清晰易讀，圖標精確而清晰，裝飾精巧且恰當，令用

戶更易理解功能。利用負空間、顏色、字體、圖形等界面元素巧妙地突出重要內容，并傳達交互

性，如圖所示。

以色列設計師VladTyzun創(chuàng)作的App界面，各元素通過精心設計后，巧妙的突出重要內容

(2)遵從

流暢的動畫和清晰美觀的界面可以幫助用戶理解內容并與之互動，同時不干擾到用戶的使用。

內容一般填滿整個屏幕，而半透明和模糊效果通常暗示有更多內容。最低限度地使用邊框、漸變

和陰影可使界面輕盈，同時確保內容明顯，如圖所示。

印度設計師AbhisekDas創(chuàng)作的App界面。其中位于左側App界面中橙色漸變銀行卡旁邊的卡采用了半透

明效果，暗示用戶可以進行滑動查看更多內容。兩張App界面的漸變、邊框以及陰影都不是很明顯，使界

面非常輕盈

(3)深度

獨特的視覺層級和真實的動畫效果傳達層次結構，賦予界面活力，并促進用戶理解。令用戶

通過觸摸和探索發(fā)現程序的功能，不僅會使用戶提高樂趣，更加方便用戶了解功能，還能使用戶

關注到額外的內容。在瀏覽內容時，層級的過渡可提供深度感，如圖所示。

a—」

0*****?

烏克蘭設計公司CadabraStudio創(chuàng)作的App界面

2.MaterialDesign設計原則

MaterialDesign語言有材質隱喻、大膽夸張、動效表意、靈活、跨平臺五大原則。

(1)材質隱喻

MaterialDesign的靈感來自物理世界及其紋理，包括它們如何反射光線和投射陰影。它對材料

表面進行了重新構想，加入了紙張和墨水的特性，如圖所示。

材質隱喻

(2)大膽夸張

MaterialDesign以印刷設計方法中的排版、網格、空間、比例、顏色和圖像為指導，來創(chuàng)造視

覺層次、視覺意義以及視覺焦點，使用戶沉浸其中，如圖所示。

大膽夸張

(3)動效表意

通過微妙的反饋和平滑的過渡使動效保持連續(xù)性。當元素出現在屏幕上時，它們在環(huán)境中轉

換和重組，相互作用并產生新的變化，如圖所示。

動效表意

(4)靈活

MaterialDesign系統(tǒng)旨在實現品牌表達。它與自定義代碼庫集成，允許無縫實現組件、插件和

設計元素，如圖所示。

靈活

(5)跨平臺

MaterialDesign使用包括Android、iOS、Flutter和Web的共享組件跨平臺管理,如圖所示。

跨平臺

3.2App設計的規(guī)范

App設計的規(guī)范分為iOS設計規(guī)范和Android設計規(guī)范兩部分。

3.2.1iOS設計規(guī)范

iOS的基礎設計規(guī)范包括單位及尺寸、界面結構、布局、字體4個方面。

1.iOS設計單位及尺寸

(?)相關單位

?PPI：像素密度(PixelsPerinch,PPI)是屏幕分辨率單位,表示的是每英寸所擁有的像素數

量，如圖所示。像素密度越大，畫面越細膩。因此，iPhone4與iPhone3GS屏幕尺寸雖然相同，但

實際像素大了f，清晰度自然變高。

+320

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

3.5

口1個公式

FPI的計算公式(X、Y分別為橫向、縱向的像素數)

?Asset：比例因子。標準分辨率顯示器具有1:1的像素密度，用@lx表示，其中一個像素等于

一個點。高分辨率顯示器具有更高的像素密度，比例因子為2.0或3.0,分別用@2x和@3x表示,

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

一個10pxX10px的標準分辨率(@1x)圖像，該圖像的02x版本為20PxX20px,@3x版本為30pxX30Px

?邏輯像素和物理像素：邏輯像素(LogicPoint),單位為“點”(points,pl),是根據內容尺寸

計算的單位。iOS開發(fā)工程師和使用Sketch軟件設計界面的UI設計師使用的單位都是p"物理像

素(PhysicalPixel),單位"像素"(pixels,px),是按照像素格計算的單位，也就是移動設備的實

際像素。使用Photoshop軟件設計界面的UI設計師使用的單位都是px。

例如，iPhoneX/XS邏輯像素是375x812pt,由于視網膜屏像素密度的增加，即lpt=3px,因此

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

邏輯像素與物理像素的轉換

(2)設計尺寸

iOS常見的設備尺寸，如圖下所示。在進行界面設計時，為了一稿適配多種尺寸，都是以

iPhone6/6s/7/8為基準的。如果使用Photoshop就創(chuàng)建750x1334Px尺寸的畫布，如果使用Sketch就

建立375x667pt尺寸的畫布。

iOS常見設備的尺寸

設各名稱標觸尺寸PPIAsset善解點(point)善蚓分帳軍(px)

iPhoneXSMAX6.5in458?3x414x8%1242x2688

IPhoneXS5.8in458@3x375x8121125x2436

IPhoneXR6.1In326@2x414x8%828x1792

IPhoneX5.8in458@3x375x8121125x2436

IPhone8*,7+,65+,6A5.5in401@3x414x7361242x2208

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

iPhoneSE5,5s.SC4.0in326@2x320x568640x1116

iPhone4,4S3.5in326@2x320x480640x960

iPhone1.3G3GS3.5in163@1x320x480320x480

iPadPro12.912.9in264@2x1024x13662048x2732

iPadPro10.510.5in264?2x834x11121668x2224

iPadPro,iPadAirZRetnaiPad9.7in264?2x768x10241536x2048

iPadMlnl4JPadMini27.9in326@2x768x10241936x2048

IPad1,29.7In132@1x768x1024768x1024

QS設計修準尺寸

O2x02xO2xO3xO3x

640X960640X1136750X13341125X24361242X2208

pxpxpx

iPhone4iPhone5iPhone6/7/8iPtx)neXiPhone6/7/8

Plus

iOS設計標準尺寸

2.iOS界面結構

iOS界面主要由狀態(tài)欄、導航欄、標簽欄組成，箕結構如圖和圖所示。

3PPIiMvejur

iPhoneXSMax1242?2688P?4S8PF1-

iPhoneX4S8PP!Mpx176px

<>hon^P.6sp.7P.8P1242x2208a401Ppi60Px132Pl146p>

利6”?6S?7750>1234p>326W40PxMP，如

*?hcne$-5C-5S640>ll)6pi326PM40PxMP?MP，

外one4-4S640■濃X326W40Px炯98P-

-4*ho0e&^odTouchM-ft.MZ

320-4WPM16WH20PM44Px4到

“代B=n

MOpx

3?Opx640px

狀態(tài)后身40Px

狀森欄高20Px

號JUS44nx9J&eMMpx

1136px

480Px

標警EM9Px標？BE恚98Px

iPhone&iPodTouch

第一代、第二代、第三代iPbono4.-iPhono4SPioneS.5058

750Px?KSOpxIt>4?px

狀森欄高54Px狀每欄MiOmc

3航￡離的2Btt€X132映0105132慳

2200

px

場第丁。1"；DX標第廣套1彷DX

Ptone6PUsWH甌KoneSPfcEfi計費

iOS手機端界面結構圖圖片來源于520設計網

設備尺寸煙欄離度

—iPad3?4?S?6?Air?A?2?

2048x1536P<264W40px炯98P*

一n

?Pad1-21024x768pi132W20Px44Px49Px

iP?dMint1024x768pi1Mm20Px44P.

1536px768px768px

204Bpx

Ped3-4-5-6iPadiPadMini

Air-Air2-mini??一二*二代

iOSiPad界面結構圖，圖片來源于520設計網

3.iOS布局

(I)網格系統(tǒng)

網格系統(tǒng)(GridSystems)，又稱為柵格系統(tǒng)，是利用一系列垂直和水平的參考線，將頁面分割

成若干個有規(guī)律的列或格子，再以這些格子為基準，進行頁面布局設計的方式，能使布局規(guī)范、

簡潔、有秩序，如圖所示。

(2)組成元素

網格系統(tǒng)由列、水槽以及邊距3個元素組成，如圖所示。列是內容放置的區(qū)域。水槽是列與

列之間的距離，有助于分離內容。邊距是內容與屏幕左右邊緣之間的距離。

組成元素(①列、②水槽、③邊距)

(3)網格的運用

?單元格：iOS的最小點擊區(qū)域是44pt,即88Px(@2x\因此，在適用性方面，能被整除的偶

數4和8作為iOS最小單元格比較合適。其中4px容易將頁面切割細碎，所以比較推薦使用8Px,

如圖所示。

單元格

?列：列的數量有4、6、8、10、12、24這幾種情況。其中4列通常在2等分的簡潔頁面時使

用，6、12和24基本滿足所有等分情況，然而24列將頁面切割太碎，如圖3-27所示，因此實際

使用還是以12列和6列為主。

列的使用

冰槽：水槽、邊距以及橫向間距的寬度可以依照最小單元格8Px為增量進行統(tǒng)一設置，如24、

32、40。其中32px(16pt@2x)最為常用,如圖所示。

所有間距均為最小單元格的整數倍

32px32px32px32px

?邊距：邊距的寬度也可以與水槽有所區(qū)別。在iOS中以@2x為基準,常見的邊距有20px、

24px、30px、32px、40Px以及50pxo邊距的選擇應結合產品本身的氣質,其中30px是最為舒適

的邊距，也是絕大多數App首選的邊距，如圖所示。

10：34..Ilm■10：35..(I令

設置《設置通用

ks飛行模式

關于本機

Q無線局域網CMCC-4Tky

軟件更新

Q藍牙未連接〉

遺寓移動網絡

GO隔空投送

⑥個人熱點關閉〉

接力

VPN

QCarPlay零或

iOS中的“設置”及“通用頁面都采用了30Px的邊距

4.iOS字體

(I)系統(tǒng)字體

iOS英文使用的是SanFrancisco(SF)字體，其中SF字體有SFUIText(文本模式)和SF

UIDisplay(展示模式)兩種尺寸。SFUIText適用于小于等于19pt的文字，SFUIDisplay適用于

大于等于20pt的文字。中文使用的是蘋方字體，共有6個字重，如圖所示。

?纖洛細體正常中黑中粗

ThinLightRegMedSmBd

iOS系統(tǒng)字體

(2)字號大小

iOS設計時要注意字號的大小，下所示。蘋果官網的建議全部是針對英文SF字體而言的，中

文字體需要UI設計師靈活運用，以最終呈現效果的實用性和美觀度為基準進行調整。其中10p(

(@2x為20px)是手機上顯示的最小字體，T殳位于標簽欄的圖標底部。為了區(qū)分標題和正文，

字體大小差異至少保持在4px(2pt@2x),正文的合適行間距在1.5~2倍之間。

蘋果對于字體大小的建議

字體行距

大宰題Regular34pt68Px41pt?Hom

?■-Regular28pt28px34Pt?ism

標?二Regular22Pt44Px28Pt?16?m

標?三Regular20pt40px25Pt?19em

頭條S?nhBold17pt34Px22Pt24em

正文Regular17pt34px22pt24em

*注Regular16Pt32px21Pt-20wn

副號?Regular15Pt30Px20pt-16?m

*Regular13Pt26px18pt&E

注”Regular12p<24Px16Pt0??n

注■二Regular11022px13pt,6em

?ell令9：41AM*100%1?

Title*-Edit1Mpu

iPhom6/7/8?？耙缀綑n

“Il令9：41AMt100%

+Edit

LargeTitle0

iPhone6/7/8大”導航欄

^rjmmmm

￡K]Ki[KCaj[K

labellabelLaMl2QcuLaMlab?

iPborw6/7/8底非標簽七

基于@2x即iPhone6/7/8App界面中的字號

3.2.2Android設計規(guī)范

Android系統(tǒng)基礎規(guī)范也包括設計尺寸及單位、界面結構、布局、字體4個方面。

l.Android設計尺寸及單位

(1)相關單位

?DPI：網點密度(DotPerinch,DPI)是打印分辨率的單位，表示每英寸打印的點數。在移動

設備上等同于PPI,表示的是每英寸所擁有的像素數量。通常PPI代表蘋果手機，DPI代表安卓手

機。

?獨立密度像素與獨立縮放像素：獨立密度像素(Density-independentpixels,dp)是安卓設備

上的基本單位，等同于蘋果設備上的pt.Android開發(fā)工程師使用的單位是dp,所以UI設計師進

行標注時應將px轉化成cp,公式為dpxppi/160=pxo當設備的DPI值是320時，通過公式可得

出ldp=2px,如圖所示(類似iPhone6/7/8的高清屏\

320x480480x800720x129010&0x?202160x3840

pixelspixelsa』…“屋pixels

dp與px的轉換

獨立縮放像素(Scale-independentPixel,sp)是Android設備上的字體單位。Android平臺允

許用戶自定義文字大小(小、正常、大、超大等)，當文字尺寸是"正常"狀態(tài)時，lsp=ldp,如圖

所示。而當文字尺寸是"大"或"超大"時，lsp〉ldp°UI設計師進行Android界面的設計時，標

記字體的單位選用sp。

(2)設計尺寸

Android常見的設備尺寸，如下所示。在進行界面設L時，如果想要一稿適配Android和iOS,

就使用Photoshop新建720x1280Px尺寸的畫布。如果根據MaterialDesign新規(guī)范單獨設計Android

設計稿，就使用Photoshop新建I080xl920px尺寸的畫布。無論哪種需求，使用Sketch只建立

36()x640dp尺寸的畫布即可。

Android常見的設備尺寸

名稱分辨率pxdpi像素比示例dp對應像素

xxxhdpi2160x38406404.048dp192px

xxhdpi1080x19204803.048dp144px

xhdpi720x12803202.048dp96px

hdpi480x8002401.548dp72px

mdpi320x4801601.048dp48px

Android設計標準尺寸

2.Android界面結構

Android界面主要由狀態(tài)欄、導航欄、頂部應用欄組成，其結構如圖所示。

720px1080px

“態(tài)欄程72P

調部應用欄離”2oxx注的向用欄離1688

1920

PX

。航欄昌144px

xhdpixxhdpi