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

教案編號：3

課題：第3章App界面設計

課時：16課時

授課類型：講授+實訓

教學目標：

?了解App的基礎知識

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

?認識App常用界面類型

教學重點：

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

教學難點：

App常用界面的設計方法

本章技能點：

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

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

個人中心頁的繪制方法

本章教學技巧：

1.知識講解

2.案例實訓

教學過程:

（一）課前準備

1.授課前準備

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

2.板書

課題：第3章App界面設計

項目目標：

?了解App的基礎知識

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

?認識App常用界面類型

3.課程引入

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

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

3.1App基礎知識

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

3.1.1App的概念

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

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

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

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

計知識。

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

3.1.2.App設計的流程

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

進行，如圖所示。

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

App設計的流程圖

1.分析調(diào)研

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

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

計方向，如圖所示。

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

C(V)?88

*W\?LZ9MI-

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

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

2.交互設計

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

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

MobrteWYourelfWireframe

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

3.交互自查

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

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

3SEWta??

居次角度自置點

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

信息層級是否清晰

□信息分類是否合理

信息視覺流是否流標

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

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

□逆向^全

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

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

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

□具有一?性

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

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

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

□字數(shù)有取制時超用如何處建

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

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

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

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

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

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

用詞是否一致、準確

□文案是否書制度■

輸入與選擇是否為用戶提供了默認值

□1aAi示神J斷

是否存在不必要的輸入

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

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

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

操作過程中是否允許取消

□

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

□是否提供將殊模式

4.界面設計

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

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

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

Account

overview

UMTcantwlpeandt?4?ctanscasMry

accountwMhanoeportvntytoopandatellcd

?nfof?nMionaboutituung?wnpMtM),

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

5.界面測試

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

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

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

6.設計驗證

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

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

Top0ng

IS*I-Topptng

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

3.1.3App設計的原則

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

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

1.iOS設計原則

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

(1)清晰

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

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

性，如圖所示。

1，。一.

Chats”

HO1

■二A

一?tn"―

■MjfOMce*

9tMi?

1:awCMTw**

9Uamnwifev

1A0m?1*(?**

o

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

(2)遵從

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

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

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

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

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

面非常輕盈

(3)深度

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

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

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

三@

歲

?士.+[

ay+K

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

2.MaterialDesign設計原則

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

(1)材質(zhì)隱喻

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

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

材質(zhì)隱喻

(2)大膽夸張

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

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

大膽夸張

(3)動效表意

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

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

動效表意

(4)靈活

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

設計元素，如圖所示。

靈活

(5)跨平臺

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

跨平臺

3.2App設計的規(guī)范

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

3.2.1iOS設計規(guī)范

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

1.iOS設計單位及尺寸

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

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

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

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

X2+Ya

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

對角線英寸

^4802+320

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

3.5

以儲個公式代入QtwWasPPl.JM

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

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

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

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

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

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

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

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

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

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

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

(2)設計尺寸

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

iPhone6/6s/7/8為基準的。如果使用Photoshop就創(chuàng)建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界面結(jié)構(gòu)

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

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

狀態(tài)欄賽40Px

匚狀融導展離

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

導Jficas8Px

1136px

480px960px

標簽欄高98Px標答七麻98Px

iPhone&iPodTouch

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

750px1080px1242px

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

導航欄高餞州

133419202206

P?pxpx

標董欄S5M6Px

Phone6Puls稗理做Phone6Plus設計版

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

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

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

LJ2048x1536px264PPI40Px98px

iPad1?21024x768px132PPI