今天米醋將給大家分享一款空氣凈化器的介面設計，包含「良好」和「較差」兩種狀態，在用色上採用了紅色和藍色的微漸變效果，這種配色比純色的視覺效果更佳。另外，本例還涉及到了如何對整體介面進行布局以及各種圖標的製作方法和技巧

啟動PhotoshopCC 2017，按【Ctrl+N】組合鍵新建一個文件，將【文檔類型】設置為【畫板】，將【畫板大小】設置為【iPhone6（750，1334）】，如圖所示。

這裡假如先設計空氣品質較差的頁面。該頁面的主色調需要用一種警示性比較強的顏色，這裡選擇一種帶有微漸變（微漸變的效果比純色看起來更舒服一些）的紅色。

先按【Alt+Delete】組合鍵用任意一種顏色填充背景圖層，然後執行【圖層>圖層樣式>漸變疊加】菜單命令，為圖層添加一個【漸變疊加】樣式，設置一種紅色到淺紅色的漸變色（顏色的差異不要過大），接著設置【角度】為115°，如圖所示，效果如圖所示。

下面先設定底部欄。底部欄的高度一般設定為98像素，因此用【矩形工具】繪製一個750像素×98像素的矩形，填充色修改為白色，並關閉描邊功能，如圖所示。

按住【Shift】鍵使用【橢圓工具】在底部欄中間位置繪製一個大小合適的圓形作為開始按鈕，顏色依然選擇紅色【R:255，G:78，B:78】，如圖所示

繼續按住【Shift】鍵使用【橢圓工具】在頁面的中上部位置繪製一個大小合適的圓形來劃分空氣品質的狀態區域，將圓形的填充關閉，同時將描邊顏色改為白色，描邊的寬度改為4像素，如圖所示。

使用【圓角矩形工具】在頁面中下部繪製一個330像素×220像素、圓角大小為10像素的圓角矩形，關閉填充功能，同時將描邊色改為深紅色【R:231，G:43，B:43】、描邊寬度設置為2像素，如圖所示，然後按住【Shift+Alt】組合鍵使用【移動工具】向右移動複製一個圓角矩形，接著排列好兩個圓角矩形的位置，讓左右間距以及兩個圓角矩形之間的間距均為30像素，如圖所示。這兩個圓角矩形將作為空氣指數和濾網次數的顯示區域。

按住【Shift】鍵使用【橢圓工具】在頁面的下部繪製一個150像素×150像素的圓形，關閉填充功能，將描邊顏色設置為白色、描邊寬度設置為2像素，如圖所示，接著複製兩個圓形並排列好其位置，如圖所示。這3個圓形將用來劃分節能、自動和殺菌的功能區。到此，頁面的布局劃分完成。

設計「較差」頁面

頁面的布局劃分完成後，下面就可以在框架內對頁面進行完善，例如輸入文字、製作功能圖標、製作按鈕等。

下面完善頂部欄。使用【橫排文字工具】在頁面頂部輸入產品名稱以及地域的溫度，字體選擇苹方粗體、字體顏色選擇白色、字體大小選擇34點，同時要讓文字與頁面左右兩邊的間距為30像素，如圖所示。

這裡告訴大家一個小技巧，使用【移動工具】選擇對象後，按住【Shift】的同時按鍵盤上的上、下、左、右鍵可以按照10像素為一個單位進行移動。

下面繼續完善其他區域的文字。在空氣品質狀態區域輸入相應的文字，字體均用苹方中等，「較差」兩個字的字號用120點進行醒目顯示，下面的文字用34點的字號大小即可，如圖所示。

繼續在空氣指數區域和濾網區域輸入相應的文字，漢字用34號大小的苹方中等字體，數字選用一種比較粗的字體（例如Bebas Neue字體）、字號大小可以選擇72號，如圖所示。

繼續在功能區域的圓形下面輸入節能、自動和殺菌文字，字體選擇苹方中等、字號大小可以選擇28點（頁面中的文字最小不能小於24點），如圖所示。

下面製作功能圖標，先製作節能圖標。該圖標是由一個閃電圖形和一個雨滴圖形組成的，先用【鋼筆工具】勾畫出閃電的圖形，如圖所示，然後在相應的位置添加一個錨點，接著使用【直接選擇工具】調整錨點的位置，將閃電的頂部調整得圓潤一些，如圖所示。

按住【Shift】鍵使用【橢圓工具】繪製一個大小合適的圓形，關閉填充功能，將描邊顏色改為白色、描邊寬度設置為4像素，與外面的圓形形成一個粗細差，以突出重點，如圖所示，接著使用【轉換點工具】單擊圓形頂部的錨點，將其轉換為角點，如圖所示，最後使用【直接選擇工具】將角點向上拖動，調整成雨滴的形狀，如圖所示。

使用【鋼筆工具】在如圖所示的位置添加兩個錨點，然後選擇底部中間的錨點，最後按【Delete】鍵將其刪除，得到如圖所示的圖形。

下面製作自動圖標。該圖標是由3個圓狀的箭頭組成，因此可以先按住【Shift】鍵使用【橢圓工具】繪製一個大小合適的圓形，關閉填充功能，將描邊顏色改為白色、描邊寬度設置為4像素，然後按【Ctrl+J】組合鍵將圓形複製一份，並將其隱藏，接著使用【鋼筆工具】在左側錨點的下方添加一個錨點，如圖所示，再使用【直接選擇工具】選擇右側和底部的錨點，如圖所示，最後按【Delete】鍵將其刪除，得到如圖所示的圖形。

使用【鋼筆工具】繪製一個箭頭圖形，將描邊顏色改為白色、描邊寬度設置為4像素，如圖所示，然後在選項欄中將描邊的【對齊】設置為【據中】、【端點】和【角點】設置為圓形，如圖所示，這樣會讓箭頭變得圓潤一些，如圖所示。

將前面隱藏的圓形顯示出來，然後按【Ctrl+R】組合鍵調出標尺，接著在圓形的中心處添加兩條參考線，如圖所示。參考線添加完成後可以刪除或隱藏圓形。

將箭頭的兩個圖形同時選中，按【Ctrl+G】組合鍵將其變為一個組，然後按兩次【Ctrl+J】組合鍵複製兩個組，接著選擇其中複製出來的一個組，再按【Ctrl+T】組合鍵進入自由變換狀態，將變換的中心點拖到參考線的中心處，如圖所示，並將組順時針旋轉120°，如圖所示，最後重複操作，旋轉好另外一組箭頭，如圖所示。

下面製作殺菌圖標。使用【多邊形工具】在頁面中單擊滑鼠左鍵，在彈出的【創建多邊形】對話框中設置【寬度】和【高度】為77像素、【邊數】為12，並勾選【平滑拐角】選項、【星形】選項和【平滑縮進】選項，然後設置【縮進邊依據】為15%，接著單擊【確定】按鈕創建出星形，如圖所示（同樣設置描邊寬度為4像素），最後在星形內繪製兩個大小合適的圓形作為細菌的眼睛，如圖所示。

底部欄圖標的製作方法這裡就不再介紹了，製作思路基本上都大同小異，完成後的效果如圖所示。

下面完善頁面的細節。將空氣品質顯示區域的大圓形的【填充】降低到50%，然後為其添加一個【外發光】樣式，將發光顏色設置為深紅色【R:255，G:55，B:55】、【不透明度】設置為58%、【大小】設置為32像素，如圖所示，這樣可以讓圓形看起來更自然一些，如圖所示。

為較差兩個字添加一個【投影】樣式，設置投影顏色為紅色【R:255，G:102，B:102】、【不透明度】為35%、【距離】為10像素、【大小】為8像素，如圖所示，然後將【投影】樣式拷貝並粘貼給下面的一行小字，效果如圖所示。

考慮到這類App一般會有動畫效果，因此還可以在發光圓上添加一個小圓點作為發光體，如圖所示。到此，「較差」頁面製作完成。

設計「良好」頁面

良好頁面的製作方法非常簡單，只需要將製作好的較差頁面複製一份，然後將其中的紅色全部修改為與空氣品質為良好狀態相對應的藍色即可，如圖所示是這個頁面完成後的效果。