蔣珍珍，知名電商設計師，擅長各電商平臺（天貓、淘寶、京東、微店等）店面整體形象設計，優化商品視覺美感。同時也是一名UI設計師，精通UI界面各元素的設計，特別是移動APP基于用戶體驗、人機交互的圖形化設計，以及H5的設計與制作，有著豐富的一線實戰經驗。
第11 章 蘋果系統：常見蘋果系統UI 設計
學習提示
蘋果公司的移動產品( 如iPhone 系列手機、iPad 平板電腦、iPod 音樂播放器等) 如今已風靡全球，其iOS 操作系統對硬件性能要求不高，應用程序豐富，操作非常流暢，其獨特的魅力吸引了越來越多的用戶。本章主要介紹蘋果系統UI 的設計方法。
本章重點導航
設計天氣控件界面的背景效果
設計天氣控件界面的主體效果
設計日歷APP 界面的背景效果
設計日歷APP 界面的主體效果
11.1 天氣界面：掌握天氣控件界面的設計
在蘋果智能移動設備上經常可以看到各式各樣的天氣軟件，這些天氣軟件的功能都很全面，除了可以隨時隨地查看本地甚至其他地方連續幾天的天氣和溫度，還有其他資訊小服務，是移動用戶居家旅行的必需工具。本實例最終效果如圖11-1 所示。
圖11-1 實例效果
素材文件
素材\ 第11 章\ 蘋果系統天氣控件背景.jpg、天氣控件界面狀態欄.psd、天氣圖標1.psd、天氣圖標2.psd
效果文件
效果\ 第11 章\ 蘋果系統天氣控件界面.psd、蘋果系統天氣控件界面.jpg
視頻文件
視頻\ 第11 章\11.1.1 設計天氣控件背景效果.mp4、11.1.2 設計天氣控件主體效果.mp4
11.1.1 設計天氣控件界面的背景效果
下面主要使用“亮度/ 對比度”命令、“曲線”命令、“USM 銳化”命令及圖層混合模式等，設計蘋果系統天氣控件界面的背景效果。
步驟 01 選擇“文件”|“打開”命令，打開“蘋果系統天氣控件背景”素材圖像；選擇“圖像”|“調整”|“亮度/ 對比度”命令，彈出“亮度/ 對比度”對話框，設置“亮度”為18、“對比度”為31，單擊“確定”按鈕，即可調整背景圖像的亮度與對比度，效果如圖11-2 所示。
步驟 02 選擇“圖像”|“調整”|“曲線”命令，彈出“曲線”對話框，在曲線上添加一個控制點，設置“輸出”和“輸入”的參數值分別為187、175，然后在曲線上添加另一個控制點，設置“輸出”和“輸入”的參數值分別為70、77，如圖11-3 所示，單擊“確定”按鈕，即可調整背景圖像的色調。
圖11-2 使用“亮度/ 對比度”命令調節圖像 圖11-3 設置“曲線”參數值步驟 03 選擇“濾鏡”|“銳化”|“USM 銳化”命令，彈出“USM 銳化”對話框，設置“數量”為30%、“半徑”為3.6 像素、“閾值”為19 色階，單擊“確定”按鈕，即可銳化背景圖像，如圖11-4 所示。
圖11-4 銳化背景圖像
步驟 04 展開“圖層”面板，按Ctrl+J 組合鍵復制“背景”圖層，得到“圖層1”圖層，設置“圖層1”圖層的“混合模式”為“疊加”、“不透明度”為60%，即可改變圖像效果，如圖11-5 所示。
步驟 05 打開“天氣控件界面狀態欄.psd”素材圖像，將其拖曳至“蘋果系統天氣控件背景”圖像編輯窗口中的合適位置處，效果如圖11-6 所示。
圖11-5 調整圖像效果 圖11-6 添加狀態欄素材圖像
11.1.2 設計天氣控件界面的主體效果
下面主要使用矩形工具、“投影”圖層樣式、漸變工具、魔棒工具、橫排文字工具等，設計蘋果系統天氣控件界面的主體效果。
步驟 01 在“圖層”面板中，新建“圖層2”圖層，設置前景色為淺藍色(RGB 參數值為121、140、239)，如圖11-7 所示。
圖11-7 設置前景色
步驟 02 選擇工具箱中的矩形工具，在工具屬性欄中設置“選擇工具模式”為“像素”，繪制一個矩形。雙擊“圖層2”圖層，彈 出“圖層樣式”對話框，勾選“投影”復選框，保持默認設置即可，如圖11-8 所示。
圖11-8 勾選“投影”復選框
步驟 03 單擊“確定”按鈕，應用“投影”圖層樣式，效果如圖11-9 所示。
步驟 04 在“圖層”面板中，為“圖層2”圖層添加圖層蒙版，如圖11-10 所示。
圖11-9 應用“投影”圖層樣式效果 圖11-10 添加圖層蒙版
步驟 05 使用漸變工具，從右至左填充黑色到白色的線性漸變，效果如圖11-11 所示。
步驟 06 在“圖層”面板中設置“圖層2”圖層的“不透明度”為60%，如圖11-12 所示。
圖11-11 填充線性漸變效果 圖11-12 設置圖層的不透明度
步驟 07 復制“圖層2”圖層，得到“圖層2 拷貝”圖層，將“圖層2 拷貝”圖層中的圖像拖曳至相應位置處，效果如圖11-13 所示。
步驟 08 按Ctrl+T 組合鍵，調出變換控制框，適當調整圖像的大小和位置，按Enter 鍵確認操作，如圖11-14 所示。
圖11-13 復制并移動圖像 圖11-14 調整圖像的大小和位置
步驟 09 選擇工具箱中的魔棒工具，單擊調整后的圖像，創建選區，如圖11-15 所示。
步驟 10 設置前景色為藍色(RGB 參數值為78、111、231)，按Alt+Delete 組合鍵，為選區填充前景色，按Ctrl+D 組合鍵，取消選區，效果如圖11-16 所示。
圖11-15 創建選區 圖11-16 填充效果
步驟 11 在“圖層”面板中，復制“圖層2”圖層，得到“圖層2 拷貝2”圖層，適當調整“圖層2 拷貝2”圖層中圖像的大小和位置，效果如圖11-17 所示。
步驟 12 選擇工具箱中的魔棒工具，單擊調整后的圖像，創建選區，如圖11-18 所示。
圖11-17 調整圖像大小和位置 圖11-18 創建選區
步驟 13 設置前景色為白色，按Alt+Delete組合鍵，為選區填充前景色，按Ctrl+D組合鍵，取消選區，效果如圖11-19 所示。
步驟 14 設置“圖層2 拷貝2”圖層的“不透明度”為80%，即可改變圖像效果，如圖11-20 所示。
圖11-19 填充效果 圖11-20 調整圖層的不透明度
步驟 15 選擇“圖層2 拷貝2”圖層，按住Ctrl+Alt 鍵的同時向下拖曳，復制兩個圖層，如圖11-21 所示。
步驟 16 適當調整各圖像的位置，效果如圖11-22 所示。
圖11-21 復制圖層 圖11-22 調整圖像的位置
步驟 17 打開“天氣圖標1.psd”素材圖像，將其拖曳至“蘋果系統天氣控件背景”圖像編輯窗口中的合適位置處，效果如圖11-23 所示。
步驟 18 打開“天氣圖標2.psd”素材圖像，將其拖曳至“蘋果系統天氣控件背景”圖像編輯窗口中，并適當調整各圖像的位置，效果如圖11-24 所示。
圖11-23 拖入素材圖像 圖11-24 拖入素材圖像
步驟 19 選擇工具箱中的橫排文字工具，確認插入點，在“字符”面板中設置“字體系列”為“微軟雅黑”、“字體大小”為60 點、“顏色”為白色(RGB 參數值均為255)，如圖11-25 所示。
步驟 20 使用橫排文字工具在圖像中輸入相應文本，如圖11-26 所示。
圖11-25 設置文字屬性 圖11-26 輸入相應文本
步驟 21 使用橫排文字工具確認插入點，在“字符”面板中設置“字體系列”為“微軟雅黑”、“字體大小”為12 點、“顏色”為白色(RGB 參數值均為255)，如圖11-27 所示。
步驟 22 在圖像中輸入相應文本，完成蘋果系統天氣控件界面的設計，最終效果如圖11-28所示。
圖11-27 設置文字屬性 圖11-28 最終效果
新書資訊