實戰練習01　制作扁平化按鈕

視　頻：資源包\視頻\第2章\2-4-1.mp4

源文件：資源包\源文件\第2章\2-4-1.psd

●案例分析

本案例是設計制作一款扁平化風格的按鈕，配色方案是用大面積的中性色搭配少量的黃色、紅色、綠色和藍色，使整個按鈕看起來簡單大方。按鈕的設計摒棄了大量的陰影和高光，選擇少量發光元素凸顯按鈕的外形，而圓形的外觀設計沿用了之前的設計理念，使大眾在看到圖形的瞬間就知道它是按鈕，案例的完成效果如圖2-23所示。

●制作步驟

01 執行“文件>新建”命令，彈出“新建”對話框，新建一個空白文檔，如圖2-24所示。使用“漸變工具”在畫布上拖動鼠標填充從RGB（237、243、246）到RGB（181、190、195）的線性漸變，效果如圖2-25所示。

02 執行“視圖>新建參考線”命令，彈出“新建參考線”對話框，在對話框中設置參數，如圖2-26所示。使用相同方法再次創建參考線，完成后的畫布效果如圖2-27所示。

03 使用“橢圓工具”在畫布中心繪制形狀，形狀屬性如圖2-28所示。繪制完成后，形狀的圖像效果如圖2-29所示。

04 雙擊形狀圖層縮覽圖，打開“圖層樣式”對話框，選擇“投影”選項進行相應設置，如圖2-30所示。設置完成后，單擊“確定”按鈕，圖像效果如圖2-31所示。

05 復制“橢圓1”圖層并清除圖層樣式，將“路徑操作”更改為“減去頂層形狀”選項后，繼續使用“橢圓工具”繪制一個720px×720px的橢圓形狀，如圖2-32所示。使用“路徑選擇工具”調整形狀位置，如圖2-33所示。

提示

使用“形狀工具”在畫布中繪制形狀時，可以首先在畫布中單擊，然后在彈出的“創建形狀”對話框中設置形狀的大小、半徑值和邊數等參數，設置完成后，單擊對話框中的“確定”按鈕，即可完成形狀的繪制。但是這樣創建的形狀往往會出現在畫布的任意位置，像圖2-31 中的橢圓形一樣，需要調整形狀的位置。

06 雙擊形狀圖層縮覽圖，打開“圖層樣式”對話框，選擇“斜面和浮雕”選項進行相應設置，如圖2-34所示。設置完成后繼續選擇“描邊”選項，設置具體參數，如圖2-35所示。

07 圖層樣式設置完成后，單擊“確定”按鈕，圖像效果如圖2-36所示。打開“圖層”面板，選擇除“背景”圖層以外的兩個形狀圖層，使用快捷鍵【Ctrl+G】將其編組，“圖層”面板如圖2-37所示。

08 使用“橢圓工具”繪制一個顏色為RGB（41、41、41）的形狀，為圖層添加“漸變疊加”圖層樣式，如圖2-38所示。執行“文件>打開”命令，將素材圖像“24101.png”拖曳到設計文檔中，并擺放到合適位置，如圖2-39所示。

09 執行“文件>打開”命令，將素材圖像“24101.png”拖曳到設計文檔中，并擺放到合適位置，如圖2-40所示。新建一個30px×30px的透明文檔，在畫布中填充顏色，如圖2-41所示。執行“編輯>定義圖案”命令，保存圖案。

10 雙擊形狀圖層縮覽圖，打開“圖層樣式”對話框，選擇“顏色疊加”選項進行相應設置，如圖2-42所示。設置完成后繼續選擇“圖案疊加”選項，設置具體參數如圖2-43所示。

11 設置完成后單擊“確定”按鈕，圖像效果如圖2-44所示。打開“字符”面板，設置參數如圖所示。使用“橫排文字工具”在畫布中輸入符號，符號顏色為RGB（223、223、223），如圖2-45所示。

12 雙擊形狀圖層縮覽圖，打開“圖層樣式”對話框，選擇“描邊”選項進行相應設置，如圖2-46所示。設置完成后繼續選擇“外發光”選項，設置具體參數，如圖2-47所示。

13 打開“圖層”面板，選中相關圖層將其編組，并重命名為“面”，如圖2-48所示。完成整個按鈕的繪制后，圖像效果如圖2-49所示。

14 打開“圖層”面板，隱藏“背景”圖層，執行“圖像>裁切”命令，彈出“裁切”對話框后設置參數，如圖2-50所示。執行“文件>導出>導出為”命令，彈出“導出為”對話框，參數設置如圖2-51所示。

15 設置完成后，單擊“全部導出”按鈕，在彈出的對話框中選擇存儲切圖的文件夾。文件導出后，圖像效果如圖2-52所示。

知識鏈接

按鈕和圖標的切圖輸出

1.切圖尺寸必須為雙數，是為了保證切圖圖片在工程師開發時高清顯示。因為1px 是智能設備能夠識別的最小單位，換句話說就是1px 不能在智能設備上被分為兩份。

2.圖標和按鈕的切圖輸出應根據標準尺寸輸出并且要考慮到手機適配，為了適配大分辨率的手機（如iPhone X），圖標和按鈕在切圖時需要輸出@2x 和@3x 的切圖。

3.為了提升App 的運行速度，要盡量減小圖片文件大小。如果切圖文件比較大，不利于用戶在使用UI 界面過程中加載頁面，因此切圖時要盡量壓縮圖片文件的大小。

4.要把可點擊部件的相關狀態都切圖輸出，比如正常狀態、點擊狀態。在切圖過程中不僅要輸出正常狀態的切圖，更要注意不要遺漏其他狀態的切圖。

2.4.2　UI界面中的圖標

圖標是一種小的可視控件，是軟件UI界面設計中的指示路牌，以最便捷、簡單的方式指引瀏覽者獲取其想要的信息資源。圖標是具有明確指代含義的計算機圖形，其中，操作系統桌面圖標是軟件或快捷操作方式的標識，界面中的圖標是軟件或應用的某種功能的標識。

圖標在軟件界面中無處不在，是軟件UI界面設計中非常重要的設計元素。隨著科技的發展、社會的進步，人們對美、時尚、趣味和質感的不斷追求，圖標設計呈現出百花齊放的局面，越來越多精致、新穎、富有創造力和人性化的圖標涌入瀏覽者的視野。但是，圖標設計不僅要精美、富有質感，更重要的是具有良好的可用性，如圖2-53所示。

提示

好的圖標設計不僅要精美，具有可識別性、獨特性，而且要具有實用性，所以好的圖標設計具有以下幾個特點：多樣性、藝術性、準確性、實用性和持久性。

2.4.3　圖標的設計原則

界面設計的未來方向是簡潔、易用和高效，精美的扁平化設計往往起到畫龍點睛的作用，從而提升設計的視覺效果。現在，圖標的設計越來越新穎，扁平化圖標設計的核心思想是要盡可能地發揮圖標的優點：比文字直觀、漂亮，并在該基礎上盡可能使簡潔、清晰、美觀的圖形表達出圖標的意義。

●可識別性原則

可識別性是圖標設計的首要原則，具體是指設計的圖標要能夠準確地表達相應的操作，讓瀏覽者一眼看到就能明白該圖標要表達的意思。例如：道路上的圖標，可識別性強、直觀、簡單，即使不識字的人，也能立即了解圖標的含義，如圖2-54所示。

●差異性原則

這也是圖標設計的重要原則之一，同時也是容易被設計者忽略的一條原則。只有圖標之間有差異，才能被瀏覽者關注，從而對設計內容留有印象，否則圖標設計就是失敗的，如圖2-55所示。

●實用性原則

在軟件界面中，我們經常會看到一些系統操作小圖標。這些系統操作小圖標的設計雖然簡單，卻很實用。通常，軟件界面不需要精度很高、尺寸很大的圖標，并且這些圖標要有差異性、可識別性，并且風格要保持統一，如圖2-56所示。

●與環境協調原則

任何圖標或設計都不可能脫離環境而獨立存在，圖標最終要放在軟件界面中才會起作用。因此，圖標的設計要考慮圖標所處的環境，才能更好地為設計服務，如圖2-57所示。

●視覺效果原則

圖標設計追求視覺效果，一定要在保證差異性、可識別性和協調性原則的基礎上，先滿足其基本的功能需求，然后考慮更高層次的需求——視覺需求。如圖2-58所示為視覺效果出眾的軟件圖標。

●創造性原則

隨著時代的發展和人們審美的提高，圖標的設計層出不窮，要想讓瀏覽者注意到設計的內容，只有在保證圖標實用性的基礎上，提高圖標的創造性，才能給瀏覽者留下深刻的印象。如圖2-59所示為具有創造性的圖標，很容易讓瀏覽者印象深刻。

2.4.4　圖標的常用格式

圖標也稱“icon”，廣泛應用于程序標志、數據標志、命令選擇、模式信號或切換開關、狀態指示等，圖標有助于用戶快速執行命令或打開程序文件。一個圖標就是一套相似的圖片，每一張圖片有不同的格式，圖標包含透明區域，在透明區域內可以透出圖標下的背景。因為操作系統和顯示設備的多樣性，導致了圖標格式也要具有多樣性。圖標的常見格式如表2-1所示。

2.4.5　擬物化風格圖標

擬物化軟件圖標除了能夠給用戶帶來逼真的感覺，還會帶給用戶華麗感。通常擬物化軟件圖標的效果要比真實對象更好，因為在設計圖標時會將一些不和諧的內容進行美化處理，如不均勻的顏色和陰影、不清晰的紋理等，通過處理使擬物化圖標看起來更加真實、細膩、美觀，給人很強烈的視覺感受，如圖2-60所示。

擬物化軟件圖標具有很高的識別性，在設計過程中需要注意以下幾個要求∶

●確定一種風格

對于擬物化圖標也可以添加特殊的風格，使圖標效果看起來更一致，但是添加的特效不宜太多，適可而止，否則將失去圖標原有的意境。

●保持最小元素

創建圖標時，首先要使其含義明確且容易被理解。保持繪制對象的最小元素，除了可以使圖標效果更加真實，還有助于用戶理解圖標的含義。

●堅持簡單

圖標作為軟件界面中重要的元素，風格要與軟件界面的風格保持一致，所以設計時不要花費大量的時間在圖標的標新立異上，充分延續軟件界面特征的同時增加一些出色的設計。

●分步制作

擬物化圖標的設計過程一般都比較煩瑣，建議用戶分階段進行設計制作，這樣可以避免由于圖標效果未能達到要求需要修改，從而浪費大量的時間。

●適當夸張

一個逼真的擬物化圖標固然好，但也可以通過適當夸張將其需要表現的含義更清晰地表現出來，增強圖標的隱喻。