PhotoshopCCUI設(shè)計案例教程 教案 第3、4章 App界面設(shè)計、網(wǎng)頁界面設(shè)計

教案編號：3

課題：第3章App界面設(shè)計

課時：16課時

授課類型：講授+實訓(xùn)

教學(xué)目標(biāo)：

?了解App的基礎(chǔ)知識

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

?認(rèn)識App常用界面類型

教學(xué)重點：

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

教學(xué)難點：

App常用界面的設(shè)計方法

本章技能點：

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

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

個人中心頁的繪制方法

本章教學(xué)技巧：

1.知識講解

2.案例實訓(xùn)

教學(xué)過程:

（一）課前準(zhǔn)備

1.授課前準(zhǔn)備

準(zhǔn)備好教學(xué)用具和教學(xué)設(shè)備

2.板書

課題：第3章App界面設(shè)計

項目目標(biāo)：

?了解App的基礎(chǔ)知識

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

?認(rèn)識App常用界面類型

3.課程引入

通過“制作侃侃App”案例效果展示引入App界面設(shè)計的概念

（二）課程內(nèi)容

3.1App基礎(chǔ)知識

本節(jié)介紹App相關(guān)的基礎(chǔ)知識，包括App的概念、App的流程以及App設(shè)計的原則。

3.1.1App的概念

App是應(yīng)用程序Application的縮寫，T殳指智能手機(jī)的第三方應(yīng)用程序，如圖所示。用戶主

要從應(yīng)用商店下載App,比較常用的應(yīng)用商店有蘋果的AppStore、華為應(yīng)用市場等。應(yīng)用程序的

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

Android系統(tǒng)。對于UI設(shè)計師而言，要進(jìn)行移動界面設(shè)計工作，需要分別學(xué)習(xí)兩大系統(tǒng)的界面設(shè)

計知識。

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

3.1.2.App設(shè)計的流程

App設(shè)計可以按照分析調(diào)研、交互設(shè)計、交互自查、界面設(shè)計、界面測試、設(shè)計驗證的步驟來

進(jìn)行，如圖所示。

分析調(diào)研交互設(shè)計交互自查界面設(shè)計界面測試設(shè)計驗證

App設(shè)計的流程圖

1.分析調(diào)研

App的設(shè)計是根據(jù)品牌的調(diào)性、產(chǎn)品的定位而進(jìn)行的，不同應(yīng)用領(lǐng)域的App,設(shè)計風(fēng)格也會

有區(qū)別。因此，我們在設(shè)計之前應(yīng)該先分析需求，了解用戶特征，再進(jìn)行相關(guān)競品的調(diào)研，明確設(shè)

計方向，如圖所示。

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

C(V)?88

*W\?LZ9MI-

QQ音樂（左）、網(wǎng)易云音樂（中）蝦米音樂（右），三款雖然同是音樂App,但產(chǎn)品定位不同，因此設(shè)

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

2.交互設(shè)計

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

架構(gòu)設(shè)計、流程圖設(shè)計、線框圖設(shè)計等具體工作，如圖所示。

MobrteWYourelfWireframe

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

3.交互自查

交互設(shè)計完成之后，進(jìn)行交互自查是整個App設(shè)計流程非常重要的一個階段?？梢栽趫?zhí)行界

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

3SEWta??

居次角度自置點

□值”架杓與海&值?架杓值晌是否再曷建解

信息層級是否清晰

□信息分類是否合理

信息視覺流是否流標(biāo)

□庭蚓用戶體■也是否一致

返回和出口是否符合用戶預(yù)期

□逆向^全

跳轉(zhuǎn)名稱與目的是否一致

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

界面呈現(xiàn)控件呈現(xiàn)控件是否符合用戶認(rèn)知

□具有一?性

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

□控件的不可用狀卻C何呈現(xiàn)

數(shù)據(jù)呈現(xiàn)空態(tài)如何呈現(xiàn)

□字?jǐn)?shù)有取制時超用如何處建

無法完整顯示的數(shù)據(jù)如何處理

□敷據(jù)過就何提示用戶

數(shù)據(jù)按什么規(guī)則排序

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

數(shù)據(jù)是否存在極值

□文祖現(xiàn)句式是否一致

用詞是否一致、準(zhǔn)確

□文案是否書制度■

輸入與選擇是否為用戶提供了默認(rèn)值

□1aAi示神J斷

是否存在不必要的輸入

□是否推定了城和"引起的頁面渣動

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

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

操作過程中是否允許取消

□

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

□是否提供將殊模式

4.界面設(shè)計

原型圖審直通過之后，就可以進(jìn)入界面的視覺設(shè)計階段了，這個階段的設(shè)計圖就是產(chǎn)品最終

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

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

Account

overview

UMTcantwlpeandt?4?ctanscasMry

accountwMhanoeportvntytoopandatellcd

?nfof?nMionaboutituung?wnpMtM),

烏克蘭設(shè)計師StasAristov、AlyaPrigotska%ThanhDo聯(lián)合創(chuàng)作的App界面

5.界面測試

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

記錄。在測試中可以對設(shè)計的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整，如圖所示。

越南設(shè)計師TranMauTriTam進(jìn)行的App細(xì)節(jié)調(diào)整

6.設(shè)計驗證

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

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

Top0ng

IS*I-Topptng

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

3.1.3App設(shè)計的原則

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

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

1.iOS設(shè)計原則

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

(1)清晰

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

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

性，如圖所示。

1，。一.

Chats”

HO1

■二A

一?tn"―

■MjfOMce*

9tMi?

1:awCMTw**

9Uamnwifev

1A0m?1*(?**

o

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

(2)遵從

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

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

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

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

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

面非常輕盈

(3)深度

獨特的視覺層級和真實的動畫效果傳達(dá)層次結(jié)構(gòu)，賦予界面活力，并促進(jìn)用戶理解。令用戶

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

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

三@

歲

?士.+[

ay+K

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

2.MaterialDesign設(shè)計原則

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

(1)材質(zhì)隱喻

MaterialDesign的靈感來自物理世界及其紋理，包括它們?nèi)绾畏瓷涔饪兛谕渡潢幱?。它對材?/p>

表面進(jìn)行了重新構(gòu)想，加入了紙張和墨水的特性，如圖所示。

材質(zhì)隱喻

(2)大膽夸張

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

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

大膽夸張

(3)動效表意

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

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

動效表意

(4)靈活

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

設(shè)計元素，如圖所示。

靈活

(5)跨平臺

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

跨平臺

3.2App設(shè)計的規(guī)范

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

3.2.1iOS設(shè)計規(guī)范

iOS的基礎(chǔ)設(shè)計規(guī)范包括單位及尺寸、界面結(jié)構(gòu)、布局、字體4個方面。

1.iOS設(shè)計單位及尺寸

(1)相關(guān)單位

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

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

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

X2+Ya

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

對角線英寸

^4802+320

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

3.5

以儲個公式代入QtwWasPPl.JM

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

?Asset:比例因子。標(biāo)準(zhǔn)分辨率顯示器具有1:1的像素密度，用@以表示，其中一個像素等于

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

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

?邏輯像素和物理像素：邏輯像素(LogicPoint),單位為"點"(points,pt),是根據(jù)內(nèi)容尺寸

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

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

際像素。使用Photoshop軟件設(shè)計界面的UI設(shè)計師使用的單位都是px0

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

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

邏輯像素與物理像素的轉(zhuǎn)換

(2)設(shè)計尺寸

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

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

建立375x667pt尺寸的畫布。

iOS常見設(shè)備的尺寸

設(shè)備名褥屏克尺寸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設(shè)計標(biāo)準(zhǔn)尺寸

2.iOS界面結(jié)構(gòu)

iOS界面主要由狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄組成，其結(jié)構(gòu)如圖和圖所示。

iftftPPI標(biāo)簽欄高度

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

狀態(tài)欄賽40Px

匚狀融導(dǎo)展離

MOpx44Px狀態(tài)欄昌40Px

導(dǎo)Jficas8Px

1136px

480px960px

標(biāo)簽欄高98Px標(biāo)答七麻98Px

iPhone&iPodTouch

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

750px1080px1242px

狀態(tài)化自40Px狀態(tài)欄高60Px

導(dǎo)航欄高餞州

133419202206

P?pxpx

標(biāo)董欄S5M6Px

Phone6Puls稗理做Phone6Plus設(shè)計版

iOS手機(jī)端界面結(jié)構(gòu)圖圖片來源于520設(shè)計網(wǎng)

ift?尺寸狀態(tài)欄高度導(dǎo)航欄高度

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

LJ2048x1536px264PPI40Px98px

iPad1?21024x768px132PPI