1.1　了解UI界面設計

本節將帶領大家了解UI界面設計，包括什么是UI界面設計、UI界面設計的發展歷史和UI界面設計的分類等。通過知識點的學習，讓大家對UI界面設計有一個初步的印象，方便大家之后的學習。

1.1.1　什么是UI界面設計

User Interface 簡稱“UI”，中文名稱為“用戶界面”。UI界面設計包括人機交互、操作邏輯和界面美觀的整體設計。

UI界面設計是為了滿足專業化、標準化需求而對軟件界面進行美化、優化和規范化的設計分支，具體包括軟件界面設計、按鈕設計、面板設計、菜單設計、標簽設計、圖標設計、滾動條（狀態欄設計）、安裝過程設計、包裝及商品化等，如圖1-1所示。

1.1.2　UI界面設計的發展歷史

UI界面設計在設計行業中一直存在，從最初的廣告燈箱、游戲機等電子產品設計，再到網站頁面的設計和現在的軟件App設計，這些都是UI界面設計。

從使用方式來看，最早的UI界面設計大概要追溯到Windows 1.0的用戶界面——游戲《俄羅斯方塊》的用戶界面，如圖1-2所示。

21世紀初，隨著互聯網的發展、計算機的普及促進了網站UI界面設計的快速發展。此時，多種多樣的網站UI界面設計席卷了整個UI設計領域，UI界面設計開始蓬勃發展，如圖1-3所示為網站UI界面。

移動端UI被大眾熟知主要是因為iPhone的問世，也就是iOS系統的開發和應用。iPhone手機將硬件和軟件UI界面完美地結合起來，再加上優秀的用戶體驗，創造了一個新時代的開始，如圖1-4所示為iOS系統的UI界面。

提示

移動端UI 設計的出現時間較早，而且隨著移動端設備的快速發展，移動端UI 設計將UI 界面設計推向了鼎盛時期。在這期間，不管是PC 端的網站UI 界面設計還是移動端的UI 界面設計，作品已經逐漸趨于成熟和完整。

手機和計算機界面是現在主流的UI界面體現形式，而且隨著審美水平的提高與技術的成熟，大眾對UI界面設計的要求也越來越高。同時，大眾對用戶體驗也越來越重視。這就使得UI界面設計逐漸向著更完美的趨勢發展，如圖1-5所示為最新的手機屏幕界面。

從設計風格上來看UI界面設計的發展，主要經歷了三個時期——從最初的擬物化風格，到后來的扁平化風格，再到現在流行的極簡風格。

●擬物化風格

擬物化設計是指在設計過程中通過添加高光、紋理、材質和陰影等效果，力求實物對象的再現，在設計過程中也可以適當地進行變形和夸張，模擬真實物體。

擬物化設計可以使用戶第一眼就能夠認出對象是什么，擬物化設計的交互方式也模擬現實生活中的交互方式。如圖1-6所示為兩個擬物化風格的圖標。

●扁平化風格

扁平化設計從其字面意義上理解，是指設計的整體效果趨向于扁平，無立體感。扁平化設計的核心是在設計中摒棄高光、陰影、紋理和漸變等裝飾性效果，通過符號化或簡化的圖形設計元素來進行表現。

扁平化設計去除了冗余的效果和交互，其交互核心在于突出功能本身的使用。如圖1-7所示為扁平化風格的圖標。

●極簡風格

UI界面設計是一項驅動性很強的工作。隨著用戶越來越偏好簡潔的交互界面，于是去除多余的元素，保留最基礎、最重要元素的極簡化設計成了UI界面設計的新潮流。

極簡設計將內容形式和主要功能進行完美結合，其最大的優點是簡單的表現形式、簡潔的線條、大方的留白、簡約的圖形化元素……即使很復雜的內容，在這樣的設計下也會顯得簡潔和干練。如圖1-8所示為極簡風格的圖標。

1.1.3　UI界面設計的分類

隨著信息技術的飛速發展，人們對信息的需求不斷增加，UI界面設計也越來越多樣化。UI界面設計主要可以分為移動端界面設計、網站頁面設計、軟件界面設計、播放器界面設計和游戲界面設計等，不同類型的界面設計風格和特點也各不相同。

●移動端界面設計

如今，手機儼然已經成為大眾生活的必需品，而手機的功能也越來越完善，很多高端手機的性能甚至可以與電腦相媲美。移動端UI界面設計最大的要求就是人性化，不僅要美觀而且要實用。如圖1-9所示為一些成功的移動端UI界面設計作品。

●網站頁面設計

近年來，隨著電子商務的高速發展，國內網站設計行業也在快速崛起。從最初的純文本網頁設計到版式古板、配色拙劣的設計，再到現如今的配色新奇、版式多元化的設計，網站設計得到了長足發展。網站界面設計必須具有獨立性和創意性，能夠最大限度地方便用戶檢索信息，從而提升用戶的操作體驗。如圖1-10所示為一些成功的網站頁面設計。

●軟件界面設計

用戶主要通過軟件與各種機器設備進行交流，更確切地說，是“軟件界面”。為了方便用戶使用，軟件界面設計應該簡潔美觀、易于操作。如圖1-11所示為一些成功的軟件界面設計作品。

●播放器界面設計

如今，市場上的播放器軟件層出不窮，用戶在追求軟件強大功能的同時，也對軟件界面設計提出了新的要求。如圖1-12所示為PC端和移動端的QQ音樂軟件界面，這兩款界面的排版布局和色彩搭配都極為出色。

為了滿足大眾對播放器界面的要求，越來越多的軟件開發了“皮膚”功能，用戶可以根據自己的喜好設置不同的軟件界面。

●游戲界面設計

相比于其他軟件界面，游戲界面通常比較華麗，主題鮮明，而且三維效果應用普遍，具有較強的視覺震撼力。如圖1-13所示為一款成功的游戲界面設計作品。