2.1　UI界面設計元素的分類

UI界面中包含多種不同的視覺設計元素，包括啟動界面設計、界面框架設計、按鈕設計、圖標設計、標簽設計、菜單設計、滾動條及狀態欄設計等。

●啟動界面設計

由于啟動界面會在不同的平臺和操作系統中出現，所以UI界面設計中的啟動界面多為高清圖像。在轉換不同的格式時，考慮到界面圖像存在清晰度問題，所以對色彩的選用不宜超過256色，最好使用216色的網頁安全色。

在啟動界面的設計上，可以在界面上添加醒目的Logo，也可以在界面中添加名稱、版本號、網址、版權聲明、序列號等信息，加深用戶對UI界面的印象，方便使用者或購買者在界面啟動的時候得到提示。如圖2-1所示為UI啟動界面，可以看到圖片、Logo和名稱等內容。

如果想要在啟動界面中插入圖片，圖片最好使用具有獨立版權的、象征性強的、識別性高的和視覺傳達效果較好的圖形。若使用動態圖片，則不宜幀數過長，但動態圖片更容易形成該UI界面的個性化特征。

提示

PC 端的啟動界面圖像的大小多為主流顯示器分辨率的1/6，而移動端的啟動界面大小則是完全占滿手機屏幕。如果UI 界面是一系列產品，還得考慮UI 界面整體設計的統一性和延續性。

●界面框架設計

UI界面的框架設計要比啟動界面復雜得多，因為涉及界面的使用功能，所以設計師應該對該產品的程序及其如何使用都比較了解，具備一定的界面開發經驗，并且能夠快速地學習和使用UI產品。這便于設計師能夠和UI產品的程序開發員及界面使用對象進行良好的溝通，同時也利于設計師設計出界面友好的、獨特的、符合程序開發原則的UI界面框架。如圖2-2所示為一款UI界面的框架設計。

UI界面的框架設計應該簡潔明快，盡量少用無謂的裝飾。在界面框架設計階段更應該考慮如何節省屏幕空間，不同分辨率下的大小問題，縮放時的狀態和原則，以及為按鈕、菜單、標簽、滾動條及狀態欄預留位置等。

提示

UI 界面的框架設計要將界面整體色彩組合進行合理搭配，首先要將軟件商標放在顯著位置，方便使用者看到。然后將主菜單放在左邊或上邊、滾動條放在右邊、狀態欄放在下邊，這樣符合視覺流程和用戶使用心理。

●按鈕設計

UI界面的按鈕設計應該具有交互性，即按鈕會有2～6種狀態效果。這幾種狀態效果分別為：點擊時的狀態、鼠標懸停時的狀態、點擊前的狀態、點擊后的狀態、不能點擊時的狀態和獨立自動變化的狀態。如圖2-3所示為兩種不同設計形式的按鈕。

按鈕的設計最好具備簡潔的圖示效果，最好能夠讓使用者產生功能關聯反應。而對于比較大型的UI界面，按鈕的設計風格應該統一，并且與界面整體風格相融合，否則，功能差異大的按鈕會讓使用者對界面產生分離感。

●圖標設計

UI界面的圖標設計色彩不宜超過64色，因為圖標設計是“方寸藝術”，所以設計師在設計時應該更加注重圖標的視覺沖擊力，以此給使用者留下深刻印象。如圖2-4所示為PC端和移動端的圖標。

在UI界面中圖標需要在很小的范圍內表現出UI界面的內涵，所以很多圖標設計師在設計圖標時使用簡單的顏色，利用眼睛對色彩和網點的空間混合效果，放大圖標在人眼中的視覺效果，讓使用者可以輕易看到圖標，從而體現了圖標的價值。如圖2-5所示為兩套不同形式的主題圖標。

●標簽設計

UI界面中的標簽其實就是網頁中常見的選項卡，在標簽的設計過程中應該注意轉角部分的變化，其狀態可以參考按鈕設計。

但是標簽設計的狀態一般情況下只有兩種，分別為選中狀態和未選中狀態，如圖2-6所示。

●菜單設計

UI界面的菜單設計通常情況下分為：選中狀態和未選中狀態，而且菜單的每個選項都包含文字和圖示兩項內容。簡單來說，每個菜單選項的左邊應為“圖示”或“快捷鍵”，右邊應為“菜單名稱”，如圖2-7所示為移動端和PC端的菜單界面。

提示

假如這個菜單選項還有下級菜單需要顯示，那么設計師應該為此菜單項添加下級箭頭符號或是其他符號，向使用者釋義。同時，不同功能區間的菜單選項應該使用線條進行分割，讓使用者可以更好地進行區分。

●滾動條及狀態欄設計

UI界面設計中的滾動條主要是為了在固定大小的界面中可以存放更多內容。滾動條的基礎設計應該有上下箭頭、滾動標示等，如果再精細一些的話，也可以為滾動條設計翻頁圖標。

滾動條的設計是對區域性空間進行擴展，是對固定大小界面的循環利用，如圖2-8所示。

在UI界面設計中，狀態欄是為了顯示當前UI界面的狀態。如圖2-9所示為移動端的UI界面狀態欄。