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

教案編號(hào)：3

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

課時(shí)：16課時(shí)

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

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

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

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

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

教學(xué)重點(diǎn)：

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

教學(xué)難點(diǎn)：

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

本章技能點(diǎn)：

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

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

個(gè)人中心頁(yè)的繪制方法

本章教學(xué)技巧：

1.知識(shí)講解

2.案例實(shí)訓(xùn)

教學(xué)過(guò)程:

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

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

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

2.板書(shū)

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

項(xiàng)目目標(biāo)：

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

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

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

3.課程引入

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

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

3.1App基礎(chǔ)知識(shí)

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

3.1.1App的概念

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

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

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

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

計(jì)知識(shí)。

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

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

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

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

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

App設(shè)計(jì)的流程圖

1.分析調(diào)研

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

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

計(jì)方向，如圖所示。

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

C(V)?88

*W\?LZ9MI-

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

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

2.交互設(shè)計(jì)

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

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

MobrteWYourelfWireframe

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

3.交互自查

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

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

3SEWta??

居次角度自置點(diǎn)

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

信息層級(jí)是否清晰

□信息分類是否合理

信息視覺(jué)流是否流標(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í)超用如何處建

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

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

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

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

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

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

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

□文案是否書(shū)制度■

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

□1aAi示神J斷

是否存在不必要的輸入

□是否推定了城和"引起的頁(yè)面渣動(dòng)

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

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

操作過(guò)程中是否允許取消

□

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

□是否提供將殊模式

4.界面設(shè)計(jì)

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

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

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

Account

overview

UMTcantwlpeandt?4?ctanscasMry

accountwMhanoeportvntytoopandatellcd

?nfof?nMionaboutituung?wnpMtM),

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

5.界面測(cè)試

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

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

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

6.設(shè)計(jì)驗(yàn)證

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

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

Top0ng

IS*I-Topptng

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

3.1.3App設(shè)計(jì)的原則

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

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

1.iOS設(shè)計(jì)原則

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

(1)清晰

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

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

性，如圖所示。

1，。一.

Chats”

HO1

■二A

一?tn"―

■MjfOMce*

9tMi?

1:awCMTw**

9Uamnwifev

1A0m?1*(?**

o

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

(2)遵從

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

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

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

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

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

面非常輕盈

(3)深度

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

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

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

三@

歲

?士.+[

ay+K

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

2.MaterialDesign設(shè)計(jì)原則

MaterialDesign語(yǔ)言有材質(zhì)隱喻、大膽夸張、動(dòng)效表意、靈活、跨平臺(tái)五大原則。

(1)材質(zhì)隱喻

MaterialDesign的靈感來(lái)自物理世界及其紋理，包括它們?nèi)绾畏瓷涔饪?jī)口投射陰影。它對(duì)材料

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

材質(zhì)隱喻

(2)大膽夸張

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

覺(jué)層次、視覺(jué)意義以及視覺(jué)焦點(diǎn)，使用戶沉浸其中，如圖所示。

大膽夸張

(3)動(dòng)效表意

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

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

動(dòng)效表意

(4)靈活

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

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

靈活

(5)跨平臺(tái)

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

跨平臺(tái)

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

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

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

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

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

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

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

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

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

X2+Ya

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

對(duì)角線英寸

^4802+320

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

3.5

以儲(chǔ)個(gè)公式代入QtwWasPPl.JM

PPI的計(jì)算公式(X、Y分別為橫向、縱向的像素?cái)?shù))

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

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

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

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

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

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

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

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

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

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

(2)設(shè)計(jì)尺寸

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

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

建立375x667pt尺寸的畫(huà)布。

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

設(shè)備名褥屏克尺寸PPIAsset豎屏點(diǎn)(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è)計(jì)標(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è)計(jì)版

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

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

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

LJ2048x1536px264PPI40Px98px

iPad1?21024x768px132PPI