Photoshop 中文版基礎(chǔ)與實(shí)例教程-創(chuàng)新圖像設(shè)計(jì) 課件 第9章 手機(jī)APP界面設(shè)計(jì)

第3部分

綜合實(shí)例演練

第9章手機(jī)

APP

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

第10章

海報(bào)設(shè)計(jì)

第11章

產(chǎn)品包裝設(shè)計(jì)第9章

手機(jī)APP界面設(shè)計(jì)本章重點(diǎn)本章將講解以“新擬物設(shè)計(jì)”為主要思路的現(xiàn)代UI設(shè)計(jì)案例。新擬物設(shè)計(jì)的前身是擬物設(shè)計(jì)，是由Apple

公司最先提出的，即在界面中模仿現(xiàn)實(shí)物紋理材質(zhì)的設(shè)計(jì)，讓人們在使用界面時聯(lián)想到現(xiàn)實(shí)物體的使用方式。新擬物設(shè)計(jì)摒棄了傳統(tǒng)擬物設(shè)計(jì)的厚重感與扁平化設(shè)計(jì)的單調(diào)感，在UI

設(shè)計(jì)中，在保留模擬物的特性與真實(shí)感的同時，整體界面設(shè)計(jì)風(fēng)格更為干凈輕盈。通過對光線的運(yùn)用，既保留了模擬物的真實(shí)特質(zhì)，又賦予界面元素適當(dāng)?shù)牧Ⅲw感，使界面信息以更為直接有效的方式傳遞。本章將通過中國傳統(tǒng)樂器與運(yùn)動健康監(jiān)測兩個APP

的界面設(shè)計(jì)來具體講解以“新擬物設(shè)計(jì)”為主要思路的現(xiàn)代UI

設(shè)計(jì)。提示：在UI互動設(shè)計(jì)中Photoshop主要用于策劃初期的概念設(shè)計(jì)和視覺設(shè)計(jì)部分，具體的UI互動設(shè)計(jì)是由其他軟件來完成的。9.1

新擬物設(shè)計(jì)（毛玻璃效果）——食譜APP界面設(shè)計(jì)本節(jié)將制作一個以食譜為主題的APP界面設(shè)計(jì)，如圖9-0所示。圖9-0

以食譜為主題的APP

界面展示效果設(shè)計(jì)要點(diǎn)：1.新擬物設(shè)計(jì)中的毛玻璃效果，主要是通過半透明的圖形重疊，以及微妙的陰影效果來形成。2.

在UI

界面設(shè)計(jì)中，按鍵的設(shè)計(jì)是通過多個圖層的圖層樣式的疊加來完成的，每一個小的按鈕步驟較多，指令較多，在實(shí)際操作中要注意圖層的區(qū)分與細(xì)節(jié)的變化。3.

新擬物設(shè)計(jì)是通過對光線的運(yùn)用使畫面元素產(chǎn)生立體感，在整體的界面設(shè)計(jì)中要注意光線的來向，陰影與投影的方向的統(tǒng)一，以免造成畫面的混亂操作步驟：1.制作手機(jī)界面的基本形態(tài)及立體按鈕手機(jī)界面設(shè)計(jì)分為左右兩部分，下面就來進(jìn)行具體制作。（1）制作左側(cè)的手機(jī)食譜APP

界面1）執(zhí)行菜單中的“文件|新建”（快捷鍵〈Ctrl+N〉）命令,

新建一個35c

m×25cm、“分辨率”為300

像素/

英寸，“顏色模式”為“RGB顏色模式”，名稱為“菜單APP”的文件。2）選擇背景圖層，然后將其填充為紫色(RGB

參考數(shù)值為（125，105，245）），作為整體展示效果圖的大背景。接著利用工具箱中的

（矩形工具），在畫面中繪制出一個矩形，并將該層重命名為“底層1”，再在“屬性”面板的“外觀”選項(xiàng)中，將“填充”設(shè)置為白色，“描邊”設(shè)置為無，“角半徑”數(shù)值為120，如圖9-1

所示。最后在“圖層”面板中將“底層1”的不透明度設(shè)置為40%，“填充”設(shè)置為40%，從而得到一個基本的手機(jī)界面圖形，如圖9-2

所示。圖9-1

“角半徑”參數(shù)圖9-2

更改“填充”和“不透明度”參數(shù)3）為了使模擬的手機(jī)界面更為立體，下面在圖層面板中雙擊“底層1”，打開“圖層樣式”對話框，然后勾選“斜面和浮雕”和“投影”選項(xiàng)，并設(shè)置參數(shù)如圖9-3a

和9-3b

所示。接著按快捷鍵〈Ctrl+J〉，復(fù)制出一個“底層1”的副本，并將其重命名為“底層2”，再將其移動到合適位置，效果如圖9-4

所示效果。4）下面開始在手機(jī)界面上增加各種按鈕，在制作之前，我們先來講解一下按鈕的設(shè)計(jì)原理。新擬物設(shè)計(jì)是一種介于擬物與扁平之間的風(fēng)格，為了避免了圖形的扁平化，它的按鈕一般設(shè)計(jì)成凸凹的風(fēng)格。這種按鈕的結(jié)構(gòu)由背景色+

高光色+

陰影色組成，圖9-5

所示。圖9-3a

“斜面和浮雕”參數(shù)圖9-3b

“投影”參數(shù)圖9-4

底圖效果圖9-5

新擬物按鈕的基本設(shè)計(jì)規(guī)律5）下面利用該原理來制作手機(jī)APP

界面上每個按鍵的細(xì)節(jié)，先從左側(cè)界面底部按鍵開始。方法

：新建“APP

工具欄”層，然后利用工具箱中的

（矩形工具）繪制一個矩形，再在“屬性”面板中將“填色”設(shè)置為白色，描邊設(shè)置為無，將所有的“角半徑”的數(shù)值設(shè)置為120。接著在“圖層”面板中將“不透明度”設(shè)置為35%。最后雙擊“APP

工具欄”層，打開“圖層樣式”對話框，勾選“斜面和浮雕”和“投影”選項(xiàng)，并參數(shù)設(shè)置如圖9-6a

和9-6b

所示，單擊“確定”按鈕，效果如圖9-7

所示。圖9-6a

“斜面和浮雕”參數(shù)圖9-6b

“投影”參數(shù)圖9-7

APP

界面效果6）制作底部工具欄左側(cè)的Home鍵。方法：利用工具箱中的（多邊形工具），單擊畫面，然后在彈出的對話框中將“寬度”和“高度”的數(shù)值均設(shè)置為100

像素，“邊數(shù)”設(shè)置為5，“圓角半徑”設(shè)置為10

像素，如圖9-8

所示，單擊“確定”按鈕。接著在“屬性”面板的“外觀”選項(xiàng)中，將“填色”設(shè)置為紫色（RGB

參考數(shù)值為（85，70，230）），單擊“確定”按鈕，再將此圖層重命名為“home鍵”。7）在“home鍵”層下新繪制一個矩形，然后將圖層重命名為“home底”，并將其填充設(shè)置為白色，描邊設(shè)置為無。然后雙擊“home底”層，打開“圖層樣式”對話框，勾選“斜面和浮雕”選項(xiàng)，并設(shè)置參數(shù)如圖9-9

所示，單擊“確定”按鈕。接著利用工具箱中的

（橫排文字工具）輸入文字“Home”，字體選擇為“阿里巴巴惠普體-heavy”，字號大小為11

點(diǎn)。

最后，

為了便于管理，將“home鍵”、“home

底”和文字層置于一個圖層組中，并將組的名稱重命名為“home”，如圖9-10

所示。圖9-8

多邊形參數(shù)圖9-9

設(shè)置Home鍵的“斜面和浮雕”參數(shù)圖9-10

home鍵效果8）繪制三角形。方法

：利用工具箱中的

（三角形工具）單擊畫面，然后在彈出的“創(chuàng)建三角形”對話框中將“寬度”和“高度”的數(shù)值均設(shè)置為100像素“，圓角半徑”設(shè)置為10

像素，如圖9-11

所示，單擊“確定”按鈕。9）同理，繪制出右側(cè)的笑臉圖形，然后為了便于管理，將底部工具欄中的所有圖標(biāo)放置到一個圖層組中，并將組的名稱重命名為“底部工具欄”，如圖9-12

所示。圖9-11

三角形參數(shù)圖9-12

底部工具欄效果10）制作APP

界面中以圓角矩形形狀為主的其他板塊。方法

：利用工具箱中的

（矩形工具），在畫面中繪制出一個矩形，然后雙擊矩形，打開“圖層樣式”對話框，勾選“斜面和浮雕”和“投影”選項(xiàng)，并設(shè)置參數(shù)如圖9-13a

和圖9-13b

所示，單擊“確定”按鈕。接著在“圖層”面板中將該層“不透明度”設(shè)置為35%，，單擊“確定”按鈕。同理，制作出一系列圓角矩形，如圖9-14所示。最后，為了便于管理，將所有的矩形置于一個圖層組中，并將組的名稱重命名為“板塊分區(qū)”。圖9-13a

“斜面和浮雕”參數(shù)圖9-13b

“投影”參數(shù)圖9-14

APP

界面板塊提示1：為什么UI設(shè)計(jì)中多采用圓角？?圓角設(shè)計(jì)對于使用者體驗(yàn)有許多正面的影響。圓角會使得資訊更容易被大腦處理，因?yàn)樗軌蚪档痛竽X的認(rèn)知負(fù)荷。?圓角更容易具有辨識性，對我們的視覺更友好。例如當(dāng)我們連續(xù)對齊卡片，當(dāng)它們具有圓角時，更容易計(jì)算卡片的總數(shù)。?在網(wǎng)格布局中，圓角的表現(xiàn)會更好。?圓角傳達(dá)了簡約、樂觀、開放、溫暖、值得信賴的印象，國外甚至將圓角矩形稱作“友善的矩形”。請讀者觀察一下，圖9-15中這個常見的郵箱頁面中，充滿了各種圓角的設(shè)計(jì)。圖9-15

觀察普通頁面中的圓角設(shè)計(jì)提示2：在使用圓角的時候，radius（半徑）的大小會影響UI帶給用戶的印象。如果想保留直角所帶來的方正、穩(wěn)重的感覺，可以考慮使用radius=

1～2pt/dp的微圓角。如果想要塑造圓潤、平易近人的形象，可以使用radius

=

8～12pt/dp的圓角，如圖9-16所示。這里需要強(qiáng)調(diào)的是如果radius的數(shù)值過大，整個APP就會看起來很不專業(yè)，效果反而會不好。圖9-16

不同半徑值的圓角矩形按鈕11）在圓角矩形的結(jié)構(gòu)之上，添加一些細(xì)節(jié)文字，首先從頂部開始。方法

：利用工具箱中的

（橫排文字工具），輸入文字“GoodMorning！”，字體選擇為“阿里巴巴惠普體-Medium”，字號大小為18

點(diǎn)，文字顏色為白色。12）在文字右側(cè)制作一個凸起的按鈕。方法：利用工具箱中的

（矩形工具）繪制一個矩形，并將圖層重命名為“突出按鈕”。然后雙擊“突出按鈕”層，打開“圖層樣式”對話框，勾選“斜面和浮雕”和“投影”選項(xiàng)，并設(shè)置參數(shù)如圖9-17a

和9-17b

所示。接著在“屬性”面板中的“外觀”選項(xiàng)中，將“填色”設(shè)置為白色，描邊設(shè)置為無色。最后，在“圖層”面板中將“填充”設(shè)置為為0，效果如圖9-18

所示。13）與上一步驟的凸起效果相反，下面在按鈕上添加有凹陷的部分，從而形成微妙的對比。方法

：利用工具箱中的

（橢圓工具）繪制一個圓形，并將該層重命名為“漸變凹陷”。同理，為其添加“斜面和浮雕”圖層樣式，參數(shù)設(shè)置如圖9-19

所示，單擊“確定”按鈕。請自己為其選擇一種漸變顏色，效果參考圖9-20

所示。3-圖9-17a

“斜面和浮雕”參數(shù)圖9-17b

“投影”參數(shù)圖9-18

文字與凸起的按鈕圖9-19

“斜面和浮雕”參數(shù)圖9-20

添加漸變色后的按鈕局部14）制作APP

界面左上方“頭像”部分的圓形按鈕。方法：利用工具箱中的

（橢圓工具）繪制一個圓形，并將圖層重命名為“頭像”，然后為其添加“投影”圖層樣式，參數(shù)設(shè)置如圖9-21a所示，單擊“確定”按鈕。接著在“屬性”面板的“外觀”選項(xiàng)中，為其填充一種合適的漸變色，并將描邊設(shè)置為無，效果如圖9-21b

所示，此時圖層分布及整體效果如圖9-22

所示。15）在“頭像”部分的圓形按鈕下方，添加代表日歷的文字。方法：利用工具箱中的

（橫排文字工具），分別輸入文字“20，21，22，23”“Today.24.Feb”和“25，26，27，2”，字體為“阿里巴巴惠普體-heavy”，字號為14

點(diǎn)，放置文字的位置如圖9-23

所示。圖9-21a

“投影”參數(shù)圖9-21b

按扭漸變色效果圖9-22

APP

界面整體效果圖9-23

添加代表日歷的文字16）在UI

界面中，細(xì)節(jié)設(shè)計(jì)非常重要，下面繼續(xù)在界面中制作出各種微妙的凸起與凹陷效果。方法

：在日歷文字下面繪制一個圓角矩形，并將圖層重命名為“日歷”，然后將其置于日歷數(shù)字層之下。接著在“屬性”面板中將“填色”設(shè)置為白色，描邊設(shè)置為無，“角半徑”設(shè)置為50，從而形成適度的圓角。最后在“圖層”面板中將該層“填充”設(shè)置為25%，并為其添加“斜面和浮雕”圖層樣式，參數(shù)設(shè)置如圖9-24a

所示，單擊“確定”按鈕，效果如圖9-24b

所示（該圓角矩形主要對日歷內(nèi)容起到強(qiáng)調(diào)的作用）。圖9-24a

“斜面和浮雕”參數(shù)圖9-24b

起強(qiáng)調(diào)作用的圓角矩形17）繼續(xù)處理細(xì)節(jié)，在日歷的下部增加一個很小的滑動條。方法

：繪制一個窄小的矩形，并將圖層重命名為“日歷滑動條”，然后在“屬性”面板中將“填充”設(shè)置為白色，描邊設(shè)置為無，“角半徑”設(shè)置為10。接著在“圖層”面板中將該層“填充”設(shè)置為30%，并為其添加“斜面和浮雕”和“投影”兩種圖層樣式，參數(shù)如圖9-25a

和9-25b

所示，單擊“確定”按鈕，從而得到一個浮凸效果的圖形，如圖9-26

所示。18）前面已確定好了設(shè)計(jì)的整體框架與基調(diào)，下面可以在界面中不斷地加入各種內(nèi)容，使界面更加豐富。方法

：首先添加所有的文字內(nèi)容，并將字體設(shè)置為“阿里巴巴惠普體”，字號大小設(shè)置為14

點(diǎn)，放置文字的位置如圖9-27

所示。19）接下來，將素材庫中的食物圖片放置到畫面中。方法

：打開網(wǎng)盤中的“源文件\9.1

新擬物設(shè)計(jì)（毛玻璃效果）——食譜APP

界面設(shè)計(jì)\

雞蛋.jpg、木瓜.jpg、分散雞蛋.jpg”圖片，然后將它們拖入“菜單APP.psd”的文件中，如圖9-28

所示，接著將所有關(guān)于第一個菜單APP界面的圖層置于一個圖層組中，并將組名重命名為“界面1”，至此，左側(cè)第一個菜單APP

界面就完成了。圖9-25a

“斜面和浮雕”參數(shù)圖9-25b

“投影”參數(shù)圖9-26

日歷下面小滑動條效果圖9-27

添加文字圖9-28

置入食物素材（2）制作右側(cè)的手機(jī)食譜APP

界面1）在圖層面板中找到“界面1”組中的“底部工具欄”組，然后按快捷鍵〈Ctrl+J〉復(fù)制組，接著將其置于“底層2”層之上，并移至右側(cè)相應(yīng)位置，如圖9-29

所示。圖9-29

復(fù)制“底部工具欄”層2）和制作左側(cè)界面一樣的思路，首先利用圓角矩形進(jìn)行分區(qū)板塊的規(guī)劃。方法

：利用工具箱中的

（矩形工具）繪制出一系列矩形，然后雙擊圖層打開“圖層樣式”面板，勾選“斜面和浮雕”和“投影”選項(xiàng)，并設(shè)置參數(shù)如圖9-30a

和9-30b

所示，單擊“確定”按鈕。接著將圖層“不透明度”設(shè)置為35%，此時板塊之間會產(chǎn)生透明重疊的效果，最后請讀者參照圖9-31進(jìn)行半透明圓角矩形板塊的排布。提示：透明重疊是后面步驟中毛玻璃效果得以產(chǎn)生的基礎(chǔ)。圖9-30a

“斜面和浮雕”參數(shù)圖9-30b

“投影”參數(shù)圖9-31

設(shè)置矩形板塊3）選擇界面中下部分兩側(cè)的矩形圖層，然后在圖層面板中單擊右鍵，從彈出的快捷菜單中選擇“柵格化圖層”命令，接著利用工具箱中的（矩形選框工具）框選手機(jī)形狀之外的部分，按〈Delete〉鍵將多余內(nèi)容刪除，效果如圖9-32

所示。圖9-32

刪除手機(jī)形狀之外的部分4）在界面頂部制作兩個可愛的圓形按鈕。方法

：利用工具箱中的

（橢圓工具）繪制一個白色圓形，并將該層重命名為“底圓”，然后在“圖層”面板中將其“不透明度”設(shè)置為15%，再為其添加“斜面和浮雕”和“投影”圖層樣式，參數(shù)如圖9-33a和9-33b所示，單擊“確定”按鈕，效果如圖9-34

所示。圖9-33a

“底圓”斜面和浮雕參數(shù)圖9-33b

“底圓”陰影參數(shù)圖9-34

第一個圓形按鈕的放大效果5）接下來，按快捷鍵〈Ctrl+J〉，復(fù)制“底圓”層，并將復(fù)制后的圖層重命名為“圓環(huán)”，然后在“圖層”面板中將“填充”設(shè)置為“0%”“，不透明度”設(shè)置為“25%”，并為其添加“斜面和浮雕”選項(xiàng)和“投影”圖層樣式，參數(shù)設(shè)置如圖9-35a

和圖9-35b

所示，單擊“確定”按鈕。接著將“底圓”層和“圓環(huán)”層放置到一個圖層組，并將組名重命名為“圓底”。最后按快捷鍵〈Ctrl+J〉復(fù)制組，并將其移動至界面右端，如圖9-36

所示。此時整體格局與圖層分布如圖9-37所示。圖9-35a

“圓環(huán)”斜面和浮雕參數(shù)圖9-35b

“圓環(huán)”陰影參數(shù)圖9-36

界面兩側(cè)圓形按鈕圖9-37

右側(cè)界面頂部圓形按鈕及圖層分布6）下面繪制出“放大鏡”圖形和四個小圓點(diǎn)，并將顏色填充為紫色（RBG

值為（85,70,230)），至此，鈕扣式的小按鈕制作完成，效果如圖9-38

所示。7）在右側(cè)的手機(jī)食譜APP

界面中繼續(xù)添加所有文字，字體選擇為“阿里巴巴惠普體”，效果如圖9-39

所示。提示：在文字的排版中，要注意字號大小、字體粗細(xì)和顏色的變化。圖9-38

鈕扣式的小按鈕圖9-39

添加所有文字8）將素材庫中的食物圖片導(dǎo)入畫面中。方法

：打開網(wǎng)盤中的“源文件\9.1

新擬物設(shè)計(jì)（毛玻璃效果）——食譜APP

界面設(shè)計(jì)\

西蘭花.jpg、西紅柿.jpg、辣椒.jpg、披薩.jpg、沙拉.jpg、面包.jpg”素材，然后將它們拖入“菜單APP.psd”的文件中，效果如圖9-40

所示圖9-40

置入食物素材9）在APP界面中，還有很多細(xì)微的小按鍵，如“今日推薦”面板中的滑動點(diǎn)(如圖9-41所示）、視頻暫停的三角暫停符號（如圖9-42

所示）、菜單中間的滑動條（如圖9-43

所示）等，具體制作此處不再累述，請讀者自己參照效果圖完成。圖9-41

滑動點(diǎn)效果圖9-42

三角暫停符號圖9-43

滑動條效果2.模擬毛玻璃效果UI

設(shè)計(jì)中有種流行的風(fēng)格叫Glassmorphism（毛玻璃），顯而易見，Glassmorphism

這個詞是Glass（玻璃）和Skeumorphism（擬物化）的結(jié)合，使用“玻璃擬物化”設(shè)計(jì)的界面，由于毛玻璃的通透性，會呈現(xiàn)出一種獨(dú)特的虛實(shí)結(jié)合的美感。圖9-44

就是一種典型的虛實(shí)結(jié)合的界面設(shè)計(jì)風(fēng)格，請大家注意觀察其中的按鈕與底層的搭配。這種毛玻璃的整體的效果是來自于陰影、透明和背景模糊的組合，需要使用微妙的、貼合環(huán)境色的投影來呈現(xiàn)層次感，如圖9-45

所示，重疊的部分變得虛化，是形成毛玻璃感的重要特征

之一。圖9-44

虛實(shí)結(jié)合的界面設(shè)計(jì)風(fēng)格圖9-45

重疊的部分變得虛化，是形成毛玻璃感的重要特征之一1）接下來制作毛玻璃效果。方法

：首先打開網(wǎng)盤中的“源文件\

9.1

新擬物設(shè)計(jì)（毛玻璃效果）——食譜APP

界面設(shè)計(jì)\

面包.psd”中的面包素材，，然后將其拖入“菜單APP.psd”的文件中，效果如圖9-46

所示。提示

：由于前面所有的界面圖形都設(shè)置了透明度，因此面包圖形仿佛置于半透明的玻璃面板之下。圖9-46

將面包圖形導(dǎo)入2）根據(jù)圖9-45

所示的原理，穿過玻璃的內(nèi)容需要降低清晰度，下面將面包區(qū)域的圖形處理成模糊效果。方法：在圖層面板中選擇“底層1”，然后按住〈Ctrl〉鍵單擊“底層1”的縮略圖，從而創(chuàng)建出“底層1”的選區(qū)，如圖9-47

所示。接著選中“面包”圖層組中的“Bread”層，執(zhí)行菜單中的“濾鏡|模糊|

高斯模糊”命令，在彈出來的“高斯模糊”對話框中將半徑改為10，如圖9-48

所示，單擊“確定”按鈕，此時可以看出“底層1”后的面包已被模糊了。同理，對“底圖2”層也進(jìn)行背景模糊處理，效果如圖9-49

所示。圖9-47

快速建立選區(qū)圖9-48

“高斯模糊”參數(shù)圖9-49

經(jīng)過初步處理的毛玻璃效果3）經(jīng)過初步對“面包”層處理，此時玻璃覆蓋的內(nèi)容已經(jīng)被模糊化，但畫面中還存在多層玻璃重疊的情況，如圖9-50

所示（一層與兩層玻璃重疊的效果），下面就對有兩層玻璃重疊的部分再次進(jìn)行模糊處理，具體步驟就不贅述。圖9-50

多層玻璃模糊效果4)

最后完成的手機(jī)食譜APP效果如圖9-51

所示。另外需要提示的一點(diǎn)，展示效果圖中要盡量選擇有明顯色彩變化的背景，這樣能夠讓玻璃效果更容易被用戶感知到。圖9-51

手機(jī)食譜APP效果9.2

暗背景光效設(shè)計(jì)——運(yùn)動健康監(jiān)測APP展示設(shè)計(jì)本例將制作一個運(yùn)動健康監(jiān)測APP

的展示效果，如圖9-52

所示。圖9-52

運(yùn)動健康監(jiān)測APP

的展示效果設(shè)計(jì)要點(diǎn)：1.

在暗背景的設(shè)計(jì)中要注意背景的彌散效果與暗色調(diào)的融合，在UI設(shè)計(jì)中重要的是準(zhǔn)確傳遞每個界面的信息，放置背景過“花”反而會導(dǎo)致信息的失真。2.

在暗背景中可以自由進(jìn)行發(fā)光按鈕的設(shè)計(jì)，每個微小的按鈕既可以是一個獨(dú)立的小發(fā)光體，又可以是借助其他光源被局部照亮的物體。3.

黑暗中的光效與上一節(jié)講過的毛玻璃質(zhì)感的結(jié)合，也是很有趣的設(shè)計(jì)思路。操作步驟：1）執(zhí)行菜單中的“文件|新建”（快捷鍵〈Ctrl+N〉）命令，然后在彈出的對話框中選擇“移動設(shè)備”選項(xiàng)卡，再在下方選擇“iPhone”X大小的文件（1124像素

×2436像素）、“分辨率”設(shè)置為“72像素/英寸”，“顏色模式”設(shè)置為“RGB顏色模式”，名稱設(shè)置為“運(yùn)動健康檢測界面”，如圖9-53

所示，單擊“創(chuàng)建”按鈕，從而創(chuàng)建一個如圖9-54

所示的畫板界面。圖9-53

新建文件圖9-54

創(chuàng)建畫板2）新建“底色”圖層，然后選擇

（漸變工具），再在漸變編輯器中設(shè)置一種深色漸變（從左至右RGB

參考數(shù)值為（30，45，65）和（0，0，0）），如圖9-55a

所示。接著對畫面從上往下進(jìn)行填充，效果如圖9-55b所示。圖9-55a

設(shè)置底層漸變圖9-55b

漸變效果提示：下一步要為底圖增加一些“彌散效果”，以豐富整體畫面的視覺感受。在制作之前我們先講解一下什么是彌散效果？彌散效果是近些年開始流行起來的風(fēng)格，彌散效果比起漸變效果多出了更多的虛實(shí)變化，顯得更加朦朧夢幻。讀者可通過圖9-56的兩張圖來理解一下彌散效果的特點(diǎn)。圖9-56

彌散效果在設(shè)計(jì)中的運(yùn)用和常規(guī)的漸變效果相比，彌散效果在此基礎(chǔ)上又產(chǎn)生了新的特質(zhì)，從用法上來講，就是視覺聚焦和作為背景增加整體層次。視覺聚焦，也就是通過顏色對比來吸引人的目光，從而聚焦在想要凸顯的重要信息上

；作為背景可以增加整個版面的層次與細(xì)節(jié)，如圖9-58所示。圖9-58

彌散效果在設(shè)計(jì)中的視覺聚焦和作為背景增加整體層次3）制作彌散效果的背景。方法

：利用工具箱中的

（橢圓工具）在畫面中繪制兩個大小不同的正圓形，然后在“屬性”面板“外觀”選項(xiàng)組的“填色”選項(xiàng)中分別選擇兩種漸變色（盡量選擇軟件自帶的“紫色”和“藍(lán)色”文件夾中的漸變色）對它們進(jìn)行漸變填充，從而使顏色符合整體風(fēng)格，效果如圖9-59

所示。接著執(zhí)行菜單中的“濾鏡|模糊畫廊|

場景模糊”命令，再在彈出的對話框中單擊“柵格化”按鈕，再在畫面中添加模糊位置的錨點(diǎn)，并在“模糊工具”面板中調(diào)整“模糊”數(shù)值，如圖9-60

所示。最后并在“圖層”面板中分別將它們“不透明度”改為50%，從而得到如圖9-61

所示的彌散效果。最后，將所有效果放置到一個圖層組，并將組名重命名為“彌散效果”。圖9-59

圓形疊加

圖9-60

場景模糊參數(shù)圖9-61

彌散效果4）彌散效果的背景完成后，下面開始制作APP

界面頂端的記錄條。方法

：利用工具箱中的

（矩形工具）在畫面上方繪制一個矩形，然后將圖層重命名為“記錄條”，再在屬性面板“外觀”選項(xiàng)組中將該層“填色”設(shè)置為白色，“描邊”設(shè)置為無，將圓角改為50

像素，接著在圖層面板中將該層“填充”設(shè)置為20%，效果如圖9-62

所示。5）為圓角矩形添加立體浮凸感。方法

：雙擊“記錄條”圖層，打開“圖層樣式”對話框，然后勾選“斜面和浮雕”和“投影”選項(xiàng)，并設(shè)置參數(shù)如圖9-63a

和圖9-63b

所示，單擊“確定”按鈕，效果如圖9-64

所示。圖9-62

矩形邊框圖9-63a

“斜面和浮雕”參數(shù)圖9-63b

“投影”參數(shù)圖9-64

圓角矩形立體效果6）制作“記錄條”上方的滑動條。方法

：利用工具箱中的

（矩形工具），在“記錄條”上繪制一個矩形，然后在“屬性”面板中的“外觀”選項(xiàng)組中將“填色”設(shè)置為白色，“描邊”設(shè)置為無，圓角設(shè)置為24.5像素，再在“圖層”面板中將填充設(shè)置為30%，接著雙擊圖層，打開“圖層樣式”對話框，勾選“斜面和浮雕”和“投影”選項(xiàng)，并設(shè)置參數(shù)如圖9-65a

和圖9-65b所示，單擊“確定”按鈕，效果如圖9-66

所示。圖9-65a

“斜面和浮雕”參數(shù)圖9-65b

“投影”參數(shù)圖9-66

滑動條效果7）制作記錄條右側(cè)精巧的彩色顯示點(diǎn)（它們象是黑暗中的發(fā)光點(diǎn)）。方法

：利用工具箱中的

（橢圓工具）繪制圓形，然后在“屬性”面板的“外觀”選項(xiàng)組中設(shè)置“填色”為藍(lán)-

紫色漸變，如圖9-67

所示，接著雙擊橢圓所在圖層，在彈出的“圖層樣式”對話框的左側(cè)勾選“斜面和浮雕”，參數(shù)設(shè)置如圖9-68

所示，單擊“確定”按鈕，從而得到如圖9-69

所示的彩色光點(diǎn)效果。圖9-67

漸變選擇圖9-68

“斜面和浮雕”參數(shù)圖9-69

一個滑動條及彩色發(fā)光點(diǎn)8）新建“滑動條”圖層組，然后將滑動條與圓形放入圖層組中。接著按快捷鍵〈Ctrl+J〉，復(fù)制出“滑動條1”圖層組，再

將圓形移動至左側(cè)，并在屬性面板中更改漸變顏色（請自己選擇漸變色），最后完成的界面頂端記錄條效果如圖9-70

所示。圖9-70

滑動條整體效果9）制作記錄條下方顯示卡路里攝入量的帶有漸變色邊緣的圓形按鈕。方法

：利用工具箱中的

（橢圓工具）繪制一個橢圓，并將圖層重命名為“圓底”，然后將該層“不透明度”設(shè)置為25%。接著雙擊該層，打開圖層樣式對話框，在左側(cè)勾選“斜面和浮雕”“、漸變疊加”和“投影”選項(xiàng)，并設(shè)置參數(shù)如圖9-71a、圖9-71b

和圖9-71c

所示，單擊“確定”按鈕。10）執(zhí)行菜單中的“濾鏡|

雜色|

添加雜色”命令，在彈出“添加雜色”對話框中，將“數(shù)量”設(shè)置為15%，如圖9-71d

所示，單擊“確定”按鈕，此時就可以看到一個帶有厚度與噪音點(diǎn)的圓形按鈕了，如圖9-72

所示。圖9-71c

“斜面和浮雕”參數(shù)圖9-71d

“漸變疊加”參數(shù)圖9-71c

“陰影”參數(shù)圖9-71d

“雜色”效果圖9-72

圓形效果11）整個APP

界面背景是暗色的，為了吸引人的視線，按鈕要設(shè)計(jì)為類似發(fā)光的物體，下面就來制作按鈕外圍環(huán)狀發(fā)光的效果。方法

：按快捷鍵〈Ctrl+J〉，復(fù)制“圓底”層，然后刪除之前的圖層樣式，并將圖層重命名為“彩色光環(huán)”，接著在“圖層”面板中將“填充”設(shè)置為0%，再雙擊“彩色光環(huán)”圖層，打開“圖層樣式”對話框，勾選“描邊”復(fù)選框，并設(shè)置描邊漸變色參數(shù)如圖9-73

所示，單擊“確定”按鈕，此時彩色環(huán)狀效果如圖9-74

所示。提示：為了使環(huán)狀漸變形成一個完整的閉環(huán)，需要在漸變的兩端設(shè)置相同的顏色。本例漸變色從左至右參考數(shù)值依次為（RGB值為（5,20,130）、（255,195215）、(250,165,95)、(255,120,130)、（5,20,130））。圖9-73

設(shè)置“描邊”漸變色參圖9-74

按鈕上的光環(huán)效果12）接下來制作位于環(huán)狀光按鈕下面一系列由立體小按鈕構(gòu)成的日歷條。方法

：利用工具箱中的（橢圓工具）繪制一個正圓形，并將圖層重命名為“日歷底圓”，然后將該層“不透明度”設(shè)置為15%，再為其添加“斜面和浮雕”和“投影”圖層樣式，參數(shù)設(shè)置圖9-75a

和圖9-75b

所示。接著復(fù)制該層，并將復(fù)制后的圖層重命名為“圓環(huán)”，再在“圖層”面板中將“填充”設(shè)置為“0%”，“不透明度”設(shè)置為“25%”，并為其添加“斜面和浮雕”和“投影”圖層樣式，參數(shù)設(shè)置如圖9-75c和圖9-75d

所示，單擊“確定”按鈕。最后，在按鈕上添加數(shù)字文本，字體和字號可自行設(shè)計(jì)，從而得到如圖9-76

所示的第一個小按鈕圖形，再將該按鈕所包含的所有圖層放入一個組內(nèi)，并將組名重命名為“8號”。圖9-75a

“日歷底圓”的“斜面和浮雕”參數(shù)圖9-75b

“日歷底圓”的“陰影”參數(shù)圖9-75c

“圓環(huán)”的“斜面和浮雕”參數(shù)圖9-75d

“圓環(huán)”的“陰影”參數(shù)圖9-76

日歷中第一個數(shù)字按鈕效果13）選中“8號”圖層組，按快捷鍵〈Ctrl+J〉，復(fù)制出四個副本，然后將它們水平排列，如圖9-77所示。接著在下方再增加一個

懸浮感的小圓角矩形滑動條，制作方法就不贅述了，細(xì)節(jié)效果如圖9-78

所示。圖9-77

復(fù)制出一排日歷按鈕圖9-78

日歷條及下部滑動條14）至此APP

界面上半部分制作完畢，接下來制作下半部分記錄具體每日攝入食物的矩形框。方法：利用工具箱中的（矩形工具）繪制一個大的圓角矩形，并將圖層重命名為“攝入底層”，然后將該層“填充”設(shè)置為10%，并為其添加“斜面和浮雕”、“漸變疊加”和“投影”圖層樣式，參數(shù)設(shè)置如圖9-79a、圖9-79b

和圖9-79c

所示，此時半透明的圓角矩形效果如圖9-80

所示。圖9-79a

“斜面和浮雕”參數(shù)圖9-79b

“漸變疊加”參數(shù)圖9-79c

“陰影”參數(shù)圖9-80

圓角矩形效果15）利用工具箱的

（直線工具），在“攝入底層”層上方繪制直線，然后在“圖層”面板中將線條的“不透明度”設(shè)置為20%。接著給這些線條添加“斜面和浮雕”圖層樣式，參數(shù)設(shè)置如圖9-81

所示，單擊“確定”按鈕，此時細(xì)線也呈現(xiàn)出了細(xì)微的厚度感，從而保證了整體設(shè)計(jì)風(fēng)格的協(xié)調(diào)。最后，將線條進(jìn)行復(fù)制排列，效果如圖9-82

所示。圖9-81“斜面和浮雕”參數(shù)圖9-82

細(xì)線浮雕的效果16）按鈕是APP

中核心的設(shè)計(jì)元素，它的細(xì)節(jié)處理至關(guān)重要，下面在“攝入底層”上面，再添加一列有凹陷質(zhì)感的用于添加功能的按鈕。在制作之前，先來理解一下按鈕凹凸與光線照射的關(guān)系，如圖9-83

所示。圖9-83

按鈕凹陷與光線照射關(guān)系接下來就來制作這些“添加按鈕”。方法：利用工具箱中的

（橢圓工具）繪制一個圓形，然后在“圖層”面板中將該層“填充”設(shè)置為0，再為其添加“斜面和浮雕”圖層樣式，參數(shù)設(shè)置如圖9-84

所示，單擊“確定”按鈕。接著在圓形上新建文字圖層，輸入文字“+”號，再將該層“填充”設(shè)置為0%“,

不透明度”設(shè)置為40%，并為其添加“斜面和浮雕”和“投影”圖層樣式，參數(shù)設(shè)置如圖9-85a

和圖9-85b

所示，單擊“確定”按鈕，從而制作出具有凹陷效果的按鈕，如圖9-86

所示。最后，將圓形和“＋”號放置到一個圖層組，并將組名重命名為“添加按鈕”。17）選中“添加按鈕”組，按快捷鍵〈Ctrl+J〉，復(fù)制出幾個副本，然后將它們按圖9-87

所示的位置進(jìn)行排列。接著請參照圖9-88

所示位

置添加文字，字體和字號可以自己重新設(shè)計(jì)，注意文字大小和粗細(xì)的變化。至此，整個界面就初步完成了。圖9-84

圓形的“斜面和浮雕“參數(shù)圖9-85a

“＋”號的“斜面和浮雕”參數(shù)圖9-85b

“＋”號的“陰影”參數(shù)圖9-86“添加按鈕”效果圖9-87

復(fù)制一列按鈕圖9-88

添加文字18）接下來制作選中的按鈕（如日歷中當(dāng)前日期）顏色和光效的變化，使其產(chǎn)生仿佛發(fā)光或被光照亮的效果。方法

：選中文字“10”所在圖層，然后雙擊該層，打開“圖層樣式”面板，再在左側(cè)勾選“漸變疊加”項(xiàng)，再在右側(cè)設(shè)置一種明亮的漸變色（RGB

參考數(shù)值從左至右依次為（255，195，215）、(250，165，95)、(255，120，130)、（5，20，130）），如圖9-89

所示。接著選中“10”周圍的圓形，如圖9-90

所示，按快捷鍵〈Ctrl+J〉復(fù)制一層，并將復(fù)制后圖層的“不透明度”設(shè)置為100%，填充設(shè)置為0%。再單擊右鍵，從彈出的菜單中選擇“清除圖層樣式”命令，最后為其添加“描邊”圖層樣式，參數(shù)設(shè)置如圖9-91

所示，顏色數(shù)值可參考本例步驟11中的設(shè)置，效果如圖9-92

所示，此時日歷中當(dāng)前日期就產(chǎn)生了一種高亮突出的效果。圖9-89

“漸變疊加”參數(shù)圖9-90

選中數(shù)字周圍圓環(huán)圖9-91

“描邊”參數(shù)圖9-92

日歷按鈕發(fā)光效果19）下面在界面中部將彌散光效與毛玻璃效果相結(jié)合，以形成更豐富柔和的層次感。方法