PhotoshopCCUI設(shè)計(jì)案例教程（全彩慕課版）教學(xué)教案 第5章

教案編號(hào)：5

課題：第5章軟件界面設(shè)計(jì)

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

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

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

?了解軟件界面設(shè)計(jì)的基礎(chǔ)知識(shí)

?掌握軟件界面設(shè)計(jì)的規(guī)范

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

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

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

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

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

本章技能點(diǎn)：

音樂(lè)播放器軟件-首頁(yè)、歌單頁(yè)、歌曲列表頁(yè)的繪制方法

本章教學(xué)技巧：

1.知識(shí)講解

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

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

(-)課前準(zhǔn)備

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

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

2.板書(shū)

課題：第5章軟件界面設(shè)計(jì)

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

?了解軟件界面設(shè)計(jì)的基礎(chǔ)知識(shí)

?掌握軟件界面設(shè)計(jì)的規(guī)范

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

3.課程引入

通過(guò)“制作音樂(lè)播放器軟件”案例效果展示引入軟件界面設(shè)計(jì)的概念

首頁(yè)

合樂(lè)

OR歷史

三試斷列衰

Ream*

我的音F

澹行*西

歌單頁(yè)

30ng音樂(lè)

2?9。n，：唔IR分

EEMSS

視第

個(gè)性電臺(tái)

*?樂(lè)

玄地音樂(lè)

&下0籬理或手

O瘩攻歷史

UndertheWestway>(B.r.日BlurUndertheWestway

=試行列表

QLaid(HJameilaid

ROttK*,*

TieUpMyHanASUrullarLovehHe<e

段暮吹的音東

二Thebbertinei

<7w*a'MUMCWhentheLightsGoOutTheUbertmes

。茶行家西She64095theDrum*回GJTheStoneRomCoffechcxjteCIIKUC.

BedthapednarSKean。HopesandFears

歌曲列表頁(yè)

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

5.1軟件界面設(shè)計(jì)基礎(chǔ)知識(shí)

軟件界面設(shè)計(jì)的基礎(chǔ)知識(shí)包括軟件界面設(shè)計(jì)的概念、軟件界面設(shè)計(jì)的流程以及軟件界面設(shè)計(jì)

的原則。

5.1.1軟件界面設(shè)計(jì)的概念

軟件界面(softwareinterface)設(shè)計(jì)是界面設(shè)計(jì)的一個(gè)分支，主要針對(duì)軟件的使用界面進(jìn)行交

互操作邏輯、用戶情感化體驗(yàn)、界面元素美觀的整體設(shè)計(jì)。具體工作內(nèi)容包括軟件啟動(dòng)界面設(shè)計(jì)、

軟件框架設(shè)計(jì)、圖標(biāo)設(shè)計(jì)等，如圖所示。

由波蘭設(shè)計(jì)師LukePachytel創(chuàng)作的軟件界面

5.1.2軟件界面設(shè)計(jì)的流程

軟件界面的設(shè)計(jì)流程可以按照分析調(diào)研、交互設(shè)計(jì)、交互自查、視覺(jué)設(shè)計(jì)、設(shè)計(jì)測(cè)試、驗(yàn)證總

結(jié)的步驟來(lái)進(jìn)行，如圖所示。

分析調(diào)研交互設(shè)計(jì)交互自查視覺(jué)設(shè)計(jì)設(shè)計(jì)測(cè)試

軟件界面設(shè)計(jì)流程圖

1.分析調(diào)研

與App和網(wǎng)頁(yè)界面設(shè)計(jì)類似，軟件界面的設(shè)計(jì)也要先分析需求，明確設(shè)計(jì)方向。下圖所示是

3款聊天消息界面，但因產(chǎn)品需求不同，設(shè)計(jì)風(fēng)格有所區(qū)別。

由斯洛伐克設(shè)計(jì)師StanoBagin創(chuàng)作

由印度設(shè)計(jì)師P「akha「NeelSharma倉(cāng)“乍烏克蘭設(shè)計(jì)Yuliya創(chuàng)作

不同風(fēng)格的軟件界面

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

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

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

Userflow

印度設(shè)計(jì)師GauthamMukesh創(chuàng)作的交互設(shè)計(jì)圖

3.交互自查

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

行界面設(shè)計(jì)之前檢查出是否有遺漏缺失的細(xì)節(jié)問(wèn)題，具體可以參考App中的交互自直。

4.視覺(jué)設(shè)計(jì)

原型圖審直通過(guò)，就可以進(jìn)入視覺(jué)設(shè)計(jì)階段了，這個(gè)階段的設(shè)計(jì)圖即產(chǎn)品最終呈現(xiàn)給用戶的

界面，設(shè)計(jì)要求與網(wǎng)頁(yè)設(shè)計(jì)類似。最后運(yùn)用Axure、墨刀等軟件制作成可交互的高保真原型以便后

續(xù)的設(shè)計(jì)測(cè)試，如圖所示。

印度設(shè)計(jì)師PareshKhatri制作可交互的高保真原型

5.界面測(cè)試

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

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

/

葡萄牙UX/UI設(shè)計(jì)師PedroRibeiro進(jìn)行軟件界面細(xì)節(jié)調(diào)整

6.驗(yàn)證總結(jié)

驗(yàn)證總結(jié)是最后一個(gè)階段，是為整套軟件進(jìn)行優(yōu)化的重要支撐。在產(chǎn)品正式上線后，通過(guò)用

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

印度產(chǎn)品設(shè)計(jì)師DivanRaj設(shè)計(jì)師創(chuàng)作的軟件界面

5.1.3軟件界面設(shè)計(jì)的原則

在進(jìn)行軟件界面設(shè)計(jì)時(shí)，我們主要針對(duì)計(jì)算機(jī)應(yīng)用界面、移動(dòng)應(yīng)用界面、網(wǎng)頁(yè)界面以及游戲

界面進(jìn)行設(shè)計(jì)。針對(duì)移動(dòng)應(yīng)用界面、網(wǎng)頁(yè)界面設(shè)計(jì)原則，我們?cè)谇皟烧轮卸家殃U述，本節(jié)主要圍

繞Windows系統(tǒng)下的FluentDesign語(yǔ)言（微軟于2017年開(kāi)發(fā)的設(shè)計(jì)語(yǔ)言）中的設(shè)計(jì)原則進(jìn)行講

解，如圖所示。

Windows系統(tǒng)下的FluentDesign語(yǔ)言

FluentDesign有自適應(yīng)、共鳴、美觀三大原則。

1.自適應(yīng)：在每臺(tái)設(shè)備上都顯得自然

FluentDesign可根據(jù)環(huán)境進(jìn)行調(diào)整，可以很好地在平板電腦、臺(tái)式機(jī)、XBOX甚至混合現(xiàn)實(shí)

頭戴顯示設(shè)備上運(yùn)行。止矽卜，當(dāng)用戶添加更多硬件時(shí)，如增加額外的顯示器，也會(huì)正常顯示，如圖

標(biāo)

自適應(yīng)

2.共鳴：直觀且強(qiáng)大

FluentDesign能了解和預(yù)測(cè)用戶需求，并根據(jù)用戶的行為和意圖進(jìn)行調(diào)整，當(dāng)某個(gè)體驗(yàn)的行

為方式符合用戶的期望時(shí)，該界面就顯得很直觀，如圖所示。

使用正確的控件可幫助用戶更好的進(jìn)行交互以符合用戶期望

3.美觀：吸引力十足且令人沉醉

FluentDesign重視華麗的效果，通過(guò)融入物理世界的元素，如光線、阻影、動(dòng)效、深度以及紋

理，增強(qiáng)用戶體驗(yàn)的物理效果，讓?xiě)?yīng)用變得更具吸引力，如圖所示。

濯嗝川H

/3,??.，

界面使用了陰影

5.2軟件界面設(shè)計(jì)的規(guī)范

軟件界面設(shè)計(jì)規(guī)范也包括設(shè)計(jì)尺寸及單位、界面結(jié)構(gòu)、布局、字體及圖標(biāo)5個(gè)方面，我們圍

繞FluentDesign語(yǔ)言中的規(guī)范進(jìn)行講解。FluentDesign語(yǔ)言可以為不同平臺(tái)的Windows10設(shè)備軟

件界面提供指導(dǎo)，如圖所示。通過(guò)FluentDesign,不僅能呼應(yīng)前面移動(dòng)應(yīng)用界面、網(wǎng)頁(yè)界面設(shè)計(jì)規(guī)

范，更能系統(tǒng)掌握Windows計(jì)算機(jī)應(yīng)用的設(shè)計(jì)規(guī)范。

FIuentDesign語(yǔ)言應(yīng)用于不同平臺(tái)的Windows10設(shè)備的軟件界面

5.2.1軟件設(shè)計(jì)的尺寸及單位

1.相關(guān)單位

有效像素(EffectivePixels,eps)簡(jiǎn)稱"e像素"，是一個(gè)虛擬度量單位，用于表示布局尺寸和

間距(獨(dú)立于屏幕密度X基于Windows通過(guò)系統(tǒng)縮放保證元素識(shí)別的工作原理，在設(shè)計(jì)通用

Windows平臺(tái)應(yīng)用時(shí),要以有效像素而不是實(shí)際物理像素為單位進(jìn)行設(shè)計(jì)，在這里eps可等同于

像素，如圖所示。

eps=px

軟件設(shè)計(jì)的單位

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

軟件應(yīng)用在手機(jī)、平板電腦、臺(tái)式機(jī)、電視等設(shè)備上運(yùn)行，可建立一套完整的設(shè)計(jì)系統(tǒng)，而不

是為每臺(tái)設(shè)備都進(jìn)行獨(dú)立的UI設(shè)計(jì)。其中，通用Windows平臺(tái)應(yīng)用建議針對(duì)Windows10設(shè)備的

關(guān)鍵斷點(diǎn)進(jìn)行設(shè)計(jì)，并實(shí)現(xiàn)通用，如圖所示。

大小級(jí)別斷點(diǎn)典型屏幕大?。▽?duì)角線）設(shè)備窗口大小

小640px4"到6”；20”到65”手機(jī)、電視320x569、

或更小360x640、

480x854

中641px7"到12"平板電腦960x540

到

1007px

大1008px13"以及更大電腦、筆記本1024x640、

或更大電腦、1366x768、

SurfaceHub1920x1080

Windows10不同設(shè)備的設(shè)計(jì)尺寸

在針對(duì)特定斷點(diǎn)進(jìn)行設(shè)計(jì)時(shí)，應(yīng)針對(duì)應(yīng)用的屏幕可用空間大小進(jìn)行設(shè)計(jì)，而不是屏幕大小。

當(dāng)應(yīng)用全屏運(yùn)行時(shí)，應(yīng)用窗口的大小與屏幕的大小相同，但當(dāng)應(yīng)用不全屏運(yùn)行時(shí)，窗口的大小則

小于屏幕的大小，如圖所示。

羅馬尼亞產(chǎn)品設(shè)計(jì)師VladGrama創(chuàng)作的未全屏運(yùn)行的軟件界面

5.2.2軟件設(shè)計(jì)的界面結(jié)構(gòu)

通用Windows平臺(tái)的軟件界面通常都由導(dǎo)航，命令欄和內(nèi)容元素組成,其結(jié)構(gòu)如圖所示。

NavigationContentConwnand

軟件設(shè)計(jì)的界面結(jié)構(gòu)

5.2.3軟件設(shè)計(jì)的布局

1.頁(yè)面布局

（1）導(dǎo)航

常見(jiàn)的導(dǎo)航模式有左側(cè)導(dǎo)航和頂部導(dǎo)航兩種，如圖所示。

LeftnavTopnav

左側(cè)導(dǎo)航（左）頂部導(dǎo)航（右）

?左側(cè)導(dǎo)航：當(dāng)有超過(guò)5個(gè)導(dǎo)航項(xiàng)目或應(yīng)用程序中超過(guò)5個(gè)頁(yè)面時(shí)，建議使用左側(cè)導(dǎo)航。導(dǎo)航

內(nèi)通常包含：導(dǎo)航項(xiàng)目、應(yīng)用設(shè)置欄目以及賬戶設(shè)置欄目，如圖所示。

口

左側(cè)導(dǎo)航

菜單按鈕允許用戶展開(kāi)和折疊導(dǎo)航窗格。當(dāng)屏幕尺寸大于640像素時(shí)，單擊菜單按鈕會(huì)將導(dǎo)

航面板展開(kāi)為條形，如圖所示。

折疊（左）展開(kāi)（右）

當(dāng)屏幕尺寸小于640像素時(shí)，導(dǎo)航面板將完全折疊，如圖所示。

圖5-20完全折疊（左）展開(kāi)（右）

?頂部導(dǎo)航：頂部導(dǎo)航也可以作為一級(jí)導(dǎo)航。相較于可折疊的左側(cè)導(dǎo)航，頂部導(dǎo)航始終可見(jiàn),

如圖所示。

圖5-21頂部導(dǎo)航

（2）命令欄

命令欄為用戶提供應(yīng)用程序中最常見(jiàn)任務(wù)的快速訪問(wèn)方式。命令欄可以提供對(duì)應(yīng)用程序級(jí)或

頁(yè)面級(jí)命令的訪問(wèn)，并且可以與任何導(dǎo)航模式一起使用，如圖所示。

Primarycommands

一口X

I-----Overflowmenu

頂部命令欄

命令欄可以放在頁(yè)面的頂部或底部，以最適合應(yīng)用程序的設(shè)計(jì)為準(zhǔn)，如圖所示。

底部命令欄

(3)內(nèi)容

內(nèi)容因應(yīng)用程序而異，因此可以通過(guò)多種不同方式呈現(xiàn)內(nèi)容。這里，主要通過(guò)剖析常見(jiàn)的頁(yè)

面模式從而認(rèn)識(shí)內(nèi)容的布局方式。

?著陸頁(yè)：著陸頁(yè)，又稱為“登錄頁(yè)"，通常為用戶使用軟件時(shí)最先出現(xiàn)的頁(yè)面。在軟件應(yīng)用中,

大面積的設(shè)計(jì)區(qū)域是為了突出顯示用戶可能想要瀏覽和使用的內(nèi)容的，如圖所示。

登錄頁(yè)

?集合頁(yè)：集合頁(yè)方便用戶瀏覽內(nèi)容組或數(shù)據(jù)組。其中，網(wǎng)格視圖適用于照片或以媒體為中心

的內(nèi)容，列表視圖則適用于文本或數(shù)據(jù)密集型的內(nèi)容，如圖所示。

置、賬戶創(chuàng)建、反饋中心等，如圖所示。

表單頁(yè)

2.響應(yīng)式布局

通過(guò)響應(yīng)式布局保證軟件在所有設(shè)備上清晰可辨、易于使用。其中所有設(shè)備尺寸及內(nèi)外邊距

的增量都應(yīng)為4epx0對(duì)于較小的窗口寬度（小于640像素），建議使用12epx外邊距，而對(duì)于較

大的窗口寬度，建議使用24epx外邊距，如圖所示。

Smallwindowwidth<640pixelslargewindowwidth>640pixels

響應(yīng)式布局

5.2.4軟件設(shè)計(jì)的文字

文字在前面的App和網(wǎng)頁(yè)界面設(shè)計(jì)中都已詳細(xì)介紹過(guò)，因此本節(jié)主要針對(duì)Windows平臺(tái)應(yīng)用

介紹文字的使用。

1.系統(tǒng)字體

通用Windows平臺(tái)應(yīng)用中，建議英文使用默認(rèn)字體SegoeUI,如圖所示。

ABCDEFGHIJKLMNOP

QRSTUVWXYZ

abcdefghijklmnopqurs

tuvwxyz

1234567890

SegoeUI字體

當(dāng)應(yīng)用顯示非英語(yǔ)語(yǔ)言時(shí)可選擇另一種字體，其中中文建議使用默認(rèn)字體微軟雅黑，如圖所

非拉丁語(yǔ)言字體

字體系列樣式注意

Ebrima常燃、相體非洲語(yǔ)言腳本的用戶界面字體（埃塞俄比亞文、西非書(shū)面文、索馬里文、提芬納格

文、瓦伊文）.

Gadugi鬻規(guī)、相體北美語(yǔ)言腳本的用戶界面字體（加拿大音節(jié)文字、切羅基語(yǔ)）.

Leelawadee常規(guī)、半細(xì)、東南亞語(yǔ)言腳本的用戶界面字體（布吉斯語(yǔ)、老搔語(yǔ)、泰語(yǔ)）.

UI粗體

Malgun常規(guī)朝鮮語(yǔ)的用戶界面字體。

Gothic

Microsoft常規(guī)、粗體、繁體中文的用戶界面字體。

JhengHei打，

UI

Microsoft常規(guī)、相體、篇體中文的用戶界面字體.

YaHeiUI細(xì)體

Myanmar常燃緬甸文腳本的后備字體.

Text

NirmalaUI常規(guī)、半細(xì)、南亞語(yǔ)言腳本的用戶界面字體（孟加拉語(yǔ)、梵文、古吉拉特語(yǔ)、錫克教文、埃納德

粗體語(yǔ)'馬拉雅拉姆語(yǔ)、奧里亞語(yǔ)、歐甘譜、僧伽羅語(yǔ)、索拉文,泰米爾語(yǔ)、泰盧固

語(yǔ)）

SimSun常規(guī)傳蛻的中文用戶界面字體.

YuGothic細(xì)體、半細(xì)、日語(yǔ)的用戶界面字體.

UI篇技、半粗、

粗體

微軟雅黑字體

在進(jìn)行UI設(shè)計(jì)時(shí)Sans-serif字體是適合用于標(biāo)題和UI元素的，如下所示。Serif字體適合

用于顯示大量正文，如下所示。

標(biāo)題字體

Sans-serif字體

Sans-serif字體是用于標(biāo)題和UI元素的不錯(cuò)選擇。

字體系列樣式注意

Arial常規(guī)、斜體、粗體、粗斜體、黑體支持歐洲和中東語(yǔ)言腳本（拉丁

文'希臘語(yǔ),西里爾文、阿拉伯

語(yǔ)、亞美尼亞語(yǔ)和希伯來(lái)語(yǔ)）黑粗

體僅支持歐洲語(yǔ)言腳本.

Calibri常規(guī)、斜體、粗體、粗斜體、細(xì)支持歐洲和中東語(yǔ)言腳本（拉丁

體、細(xì)斜體文、希臘語(yǔ)、西里爾文、阿拉伯語(yǔ)

和希伯來(lái)語(yǔ)）.阿拉伯語(yǔ)僅在豎體

中可用。

Consolas常規(guī)、斜體、粗體、粗斜體支持歐洲語(yǔ)言腳本（拉丁文、希臘

語(yǔ)和西里爾文）的固定寬度字體。

SegoeUI常規(guī)、斜體、細(xì)斜體、黑斜體、粗歐洲和中東語(yǔ)言腳本（阿拉伯語(yǔ)、

體、粗斜體、細(xì)體、半細(xì)、半粗、亞美尼亞語(yǔ)、西里爾文、格普吉亞

黑體語(yǔ)、希臘語(yǔ)、希伯來(lái)語(yǔ)、拉丁文）

以及像像語(yǔ)腳本的用戶界面字體.

Selawik常規(guī)、半細(xì)、細(xì)體、粗體'半粗計(jì)量方面與SegoeU1兼容的開(kāi)源字

體,用于其它平臺(tái)上不希望包含

SegoeUI的應(yīng)用。

正文字體

Serif字體

Serif字體適合用于顯示大量文本。

字體系列樣式注意

Cambria常規(guī)支持歐洲語(yǔ)言腳本（拉丁文、希臘語(yǔ)、西里爾文）的Serif字體.

Courier常規(guī)、斜體、粗支持歐洲和中東語(yǔ)言腳本（拉丁文、希臘語(yǔ)、西里爾文、阿拉伯語(yǔ)、亞美尼亞

New體、粗斜體語(yǔ)和希伯來(lái)語(yǔ)）的Serif固定寬度字體.

Georgia常規(guī)、斜體、粗支持歐洲語(yǔ)言腳本（拉丁文、希臘語(yǔ)和西里爾文）。

體、粗斜體

TimesNew常規(guī)、斜體、粗支持歐洲語(yǔ)言腳本（拉丁文、希臘語(yǔ)、西里爾文、阿拉伯語(yǔ)、亞美尼亞語(yǔ)、希

Roman體、粗斜體伯來(lái)語(yǔ)）的傳統(tǒng)字體.

2.字體大小

通用Windows平臺(tái)上的字體通過(guò)字號(hào)及字重的變化，在頁(yè)面上建立了信息的層次關(guān)系，幫助

用戶輕松閱讀內(nèi)容，如圖所示。

TypeWeight5mUnehNglw

HeaderLight46px56px

SubheaderLight34px40px

TitleSemilight24px28px

SubtitleRegular20px24px

BaseSemibold15px20px

BodyRegular15px20px

CaptionRegular12Px14px

不同字重和字號(hào)

5.2.5軟件設(shè)計(jì)的圖標(biāo)

軟件中的圖標(biāo)主要分為應(yīng)用圖標(biāo)和界面圖標(biāo)，如圖所示。

應(yīng)用圖標(biāo)示例（左）界面圖標(biāo)示例（右）

1.應(yīng)用圖標(biāo)

應(yīng)用圖標(biāo)在前面針對(duì)iOS和Android系統(tǒng)進(jìn)行過(guò)詳細(xì)的講解，本節(jié)主要講解Windows平臺(tái)中

的應(yīng)用圖標(biāo)。應(yīng)用圖標(biāo)會(huì)應(yīng)用于Windows中的不同場(chǎng)景，由于場(chǎng)景不同，圖標(biāo)的具體名稱也會(huì)有

所變化，如下所示。

應(yīng)用圖標(biāo)的名稱

圖標(biāo)名稱顯示在資產(chǎn)文件名稱

小磁貼“開(kāi)始"菜單SmallTile.png

中等磁貼開(kāi)始菜單中，MicrosoftStorelisting、*Squarel50xl50Logo.png

寬磁貼"開(kāi)始”菜單Wide310xl50Logo.png

大磁貼開(kāi)始菜單中，MicrosoftStorelisting\*LargeTile.png

應(yīng)用圖標(biāo)在開(kāi)始菜單、任務(wù)欄、任務(wù)管理器的應(yīng)用列Square44x44Logo.png

表

初始屏幕應(yīng)用的初始屏幕是SplashScreen.png

鎖屏提醒微你的應(yīng)用磁貼BadgeLogo.png

標(biāo)

程序包截應(yīng)用安裝程序，合作伙伴中心中，在應(yīng)用商StoreLogo.png

標(biāo)/應(yīng)用商店，在應(yīng)用商店中的''寫(xiě)評(píng)論"選項(xiàng)中的”報(bào)告

店徽標(biāo)應(yīng)用程序”選項(xiàng)

(1)磁貼圖標(biāo)

4個(gè)磁貼大小分別為小(71pxx71pxX中(150pxxl50px\寬(310pxxl50px\大(310pxx

310pxX

小磁貼：將圖標(biāo)寬度和高度限制為磁貼大小(71pxx71px)的66%,如圖所示。

小磁貼

中磁貼：將圖標(biāo)寬度限制為磁貼大小(150Pxx150px)的66%,將高度限制為50%,這樣可以

防止品牌欄中的元素重疊，如圖所示。

66%

FourthCoffee50%

Munson'sPickles

中磁貼

寬磁貼：將圖標(biāo)寬度限制為磁貼大小(310pxxl50px)的66%,將高度限制為50%,這樣可以

防止品牌欄中的元素重疊，如圖所示。

66%

FourthCoffee50%

寬磁貼

大磁貼：將圖標(biāo)寬度限制為磁貼大小(310pxx310px)的66%,將高度限制為50%,如圖所

大磁貼

(2)應(yīng)用圖標(biāo)

桌面開(kāi)始菜單的應(yīng)用列表、桌面任務(wù)欄、桌面快捷方式、桌面控制面板中，應(yīng)用圖標(biāo)的設(shè)計(jì)

尺出口圖所示.

應(yīng)用圖標(biāo)的設(shè)計(jì)尺寸

資源大小文件名示例

16x16*Square44x44Logo.targetsize-16.png

24x24*Square44x44Logo.targetsize-24.png

32x32*Square44x44Logo.targetsize-32.png

48x48*Square44x44Logo.targetsize-48.png

256x256*Square44x44Logo.targetsize-256.png

20x20Square44x44Logo.targetsize-20.png

30x30Square44x44Logo.targetsize-30.png

36x36Square44x44Logo.targetsize-36.png

40x40Square44x44Logo.targetsize-40.png

60x60Square44x44Logo.targetsize-60.png

64x64Square44x44Logo.targetsize-64.png

72x72Square44x44Logo.targetsize-72.png

80x80Square44x44Logo.targetsize-80.png

96x96Square44x44Logo.targetsize-96.png

"*"表示建議最少提供的尺寸

(3)初始屏幕圖標(biāo)

初始屏幕的尺寸如圖所示，圖標(biāo)對(duì)應(yīng)放置于屏幕內(nèi)，一般建議在620x300像素的初始屏幕內(nèi)

進(jìn)行圖標(biāo)設(shè)計(jì)。

ApplicationVisualAssetsCapabilitiesDeclarationsOContentURlsPackaging

SplashSaeen

Wt'dcwtitcttippjshcUdd4Pto?diffen*renAXcni-WindowspraMds?amplew?ytodothisVMosourcetotdn9

mTh??w<t>oniitialltha“Mt\wh?hat*vwdmlh?nwn^E.H*，Stfrwy

btodumTito

HtmtSt*M?i$crttn

\MdeT??

UrgeTde

DestmibonAsuts

RkonScHtsMlScabs

XFModeB<ubk(5MT>eC<?9?l

邑>v<Ofnm?nd?dp?ddng

PKk?9elogo

*DisplaySettings

SpteshsaeenbKk^round

*PreviewImages

Screen

Autti\$cM\$<r?*<vpng

ScaledAn?ts

Scale400Scale150Scale125Scale100

2ttO>t2tOR1240>e00p>..9K>450p<EIJKM..62O?XOp-

初始屏幕

(4)鎖屏提醒圖標(biāo)

鎖屏提醒圖標(biāo)和其他應(yīng)用圖標(biāo)不同，設(shè)計(jì)師不能提供自己的鎖屏提醒圖像，僅可以使用系統(tǒng)

提供的鎖屏提醒圖像。

(5)應(yīng)用商店圖標(biāo)

在應(yīng)用商店中，可以上傳圖標(biāo)代替圖像，其尺寸分別為300x300、150x150和71x71像素。

雖然需要提供3個(gè)大小，但設(shè)計(jì)只進(jìn)行300x300像素即可，如圖所示。

QForcustomersonWindows10andXbox,displayuploadedlogoimagesinsteadoftheimagesfrommypackages

Storedisplayimages

?300x300sizerequired;othersizesoptional

1:1Apptileicon1:1?Acceptedfiletypes:png

3+00x300++71x71,Lessthan5MB

DisplayedintheStore

forWindows10

customers(andforany

customersonWindows

Phone8.1orearlier)

應(yīng)用商店圖標(biāo)

2.界面圖標(biāo)

界面圖標(biāo)在前面針對(duì)App和網(wǎng)頁(yè)界面設(shè)計(jì)中進(jìn)行過(guò)詳盡的講解，因此這里主要總結(jié)Windows

軟件界面圖標(biāo)的一些正確使用方法。

?使用系統(tǒng)自帶圖標(biāo)

Microsoft向用戶提供了1000多個(gè)SegoeMDL2Assets字體格式的圖標(biāo)，如圖所示。這些字體

圖標(biāo)能夠在不同的顯示器、分辨率、甚至尺寸下都能保證清晰簡(jiǎn)潔。

□