1.1 概念解讀：認識APP UI設計

設計就是把一種計劃、規劃、設想通過視覺的形式傳達出來的行為過程。簡單地說，設計就是一種創造行為，是一種解決問題的過程，其區別于其他藝術類的主要特征之一就是設計更具有獨創性。

APP UI設計的相關知識，包括UI設計、APP UI的概念和特點、手機的界面特色以及不同APP UI的視覺效果等，只有認識并且了解APP UI設計的基本知識，才能更好地設計出優秀的APP產品。

1.1.1 UI設計：人和工具之間的界面

UI是指用戶界面，由英文User Interface翻譯而來，是User Interface的縮寫，概括成一句話就是——它是人和工具之間的界面。這個界面實際上體現在生活中的每一個環節，例如，操作電腦時鼠標與手就是這個界面，吃飯時筷子和飯碗就是這個界面，在景區旅游時路邊的線路導覽圖就是這個界面。

在設計領域中，UI可以分成硬件界面和軟件界面兩個大類。本書主要講述的是軟件界面，介于用戶與平板電腦、手機之間的一種移動界面，也可以稱之為特殊的或者是狹義的UI設計。

如圖1-1所示是熱門的圖像處理類應用軟件“美圖秀秀”APP的啟動界面和主菜單界面。

1.1.2 APP UI：用戶和手機之間的界面

APP是可以安裝在手機上的軟件，完善原始系統的不足，體現個性化。

APP UI是指移動APP的人機交互、操作邏輯、界面美觀的整體設計。好的APP UI設計可以提升產品的個性和品位，為用戶帶來舒適、簡單、自由的使用體驗，同時也可以體現出APP產品的基本定位和特色。

圖1-2所示為手機APP UI展示效果。

圖1-3所示為平板電腦中的游戲APP UI展示效果。

1.1.3 設計特點：小巧輕便、通信便捷

APP UI將各類手機應用和UI設計結合起來，使其成為一個整體，且具備小巧輕便、通信便捷的特點。

? 小巧輕便：APP可以內嵌到各種智能手機中，用戶可以隨身攜帶，隨時隨地打開這些APP，滿足某些需求。另外，移動互聯網的優勢使用戶可以通過各種APP快速溝通并獲得資訊。圖1-4所示為“百度糯米”APP的界面，用戶通過手機即可獲得各種吃喝玩樂的生活資訊。

? 通信便捷：移動APP使人與人之間的溝通變得更加方便，可以跨通信運營商、跨操作系統平臺，通過無線網絡快速發送免費語音短信、視頻、圖片和文字。圖1-5所示為“微信”APP的“搖一搖”界面，用戶可以通過“搖一搖”“搜索號碼”“附近的人”和掃二維碼等方式添加好友和關注公眾平臺，同時可以將內容分享給好友或分享到朋友圈。

1.1.4 設計基礎：熟悉手機的界面特色

隨著科技的發展，現在智能手機的功能越來越多，而且越來越強大，甚至可以和計算機相媲美。

想要設計出優秀的APP用戶界面，用戶還需要熟悉智能手機的界面構造。手機的主要界面可分為幾個標準的信息區域（主要針對按鍵手機，而觸屏手機相對靈活）：狀態欄、標題區、功能操作區和公共導航區等。

圖1-6所示為“工商銀行手機銀行”APP的UI構成。

? 狀態欄：用于顯示手機目前的運行狀態及事件的區域，主要包括應用通知、手機狀態、網絡信號強度、運營商名稱、電池電量、未處理事件及數量，以及時間等要素。在APP UI設計過程中，狀態欄并不是必須存在的元素，用戶可依照交互需求進行取舍。

? 標題區：主要用于放置APP的Logo、名稱、版本及相關圖文信息。

? 功能操作區：它是APP應用的核心部分，也是手機版面上面積最大的區域，通常包含有列表（list）、焦點（highlight）、滾動條（scroalbar）和圖標（icon）等多種不同元素。在各個APP內部，不同層級的用戶界面包含的元素可以相同，也可以不同，用戶可以根據實際情況進行合理的搭配運用，如圖1-7所示。

? 導航欄：也稱之為公共導航區或軟鍵盤區，它是對APP的主要操作進行宏觀操控的區域，可以出現在該APP的任何界面中，方便用戶進行切換操作。

APP運行在手機操作系統的軟件環境中，其UI設計應該要符合這個應用平臺的整體風格，這樣有利于產品外觀的整合。

手機界面效果的規范性包括以下兩個方面，如圖1-8所示。

手機界面的整體性和一致性是基于手機系統視覺效果的和諧統一而考慮的，而手機界面效果的個性化是基于軟件本身的特征和用途而考慮的。界面效果的個性化包括以下幾個方面，如圖1-9所示。

1.1.5 視覺效果：為用戶帶來不一樣的美感

做得好的APP UI設計具有一定的視覺效果，可以直觀、生動、形象地向用戶展示信息，從而簡明便捷地讓用戶產生審美想象。

1．簡約明快的視覺效果

簡約明快型的APP UI設計追求的是空間的實用性和靈活性，可以讓用戶感受到簡潔明快的時代感和純抽象的美。

在視覺效果上，應盡量突出個性和美感，如圖1-10所示。

簡約明快型的APP UI設計更適合色彩支持數量較少的彩屏手機，其主要特點如下。

? 通過組合各種色塊和線條，使移動界面更加簡約大氣，如圖1-11所示。

? 通過點、線、面等基本形狀構成的元素，再加上純凈的色彩搭配，使界面更加整齊有條理，給用戶帶來賞心悅目的感覺，如圖1-12所示。

2．趣味型的視覺效果

趣味性是指某件事或者物的內容能使人感到愉快，能引起人的興趣的特性。

在APP UI設計中，趣味性主要是指通過一種活潑的版面視覺語言，使界面具備親和力、視覺魅力和情感魅力，讓用戶在新奇、振奮的情緒下深深地被界面中展示的內容所吸引。圖1-13所示為趣味與獨創型界面。

3．高貴華麗型的視覺效果

高貴華麗型的APP UI設計，主要是通過運用飽和的色彩和華麗的質感來塑造超酷、超炫的視覺感受，整體營造出一種華麗、高貴、溫馨的感覺。圖1-14所示為高貴華麗型的APP界面。

由于高貴華麗型的APP界面設計需要用到很多的色彩和各類設計元素，因此更適合色彩支持數量較多的彩屏手機。

1.2 APP平臺：主流手機操作系統

在移動互聯網時代，Android、iOS、Windows等智能操作系統成為用戶應用APP的基本入口，如圖1-15所示。

因此，用戶除了要了解APP UI設計的基本概念外，還必須認識Android、iOS、Windows三大主流系統，以此熟悉移動設備的主流平臺和設計的基本原則。

1.2.1 谷歌Android系統

Android是由Google基于Linux開發的一款移動操作系統。

在移動設備的操作系統領域，iOS和Android系統的競爭十分激烈，它們都希望占據更大的市場份額。目前，由于市面上存在眾多的Android系統OEM廠商，因此Google的Android操作系統處在移動系統的領先位置，如圖1-16所示。

Android操作系統的APP UI設計基本原則就是要擁有漂亮的界面，設計者可以設置精心的動畫或者及時的音效，帶給用戶一種更加愉悅的體驗，如圖1-17所示。

另外，Android用戶可以直接觸屏操作APP中的對象，這樣有助于降低用戶完成任務時的認知難度，進一步提高用戶對APP的滿意度。例如，在“最美天氣”APP的界面中，用戶可以通過滑動屏幕的方式，查看更多的天氣資訊，如圖1-18所示。

在設計Android操作系統的APP界面時，設計者應盡量使用圖片來表達信息，圖片比文字更容易理解，而且更加吸引用戶的注意力。例如，在“暴風影音”APP的界面中，就采用了大量直觀的圖標菜單和圖片目錄列表，如圖1-19所示。

1.2.2 蘋果iOS系統

iOS是由蘋果公司開發的一種采用類Unix內核的移動操作系統，最初是為iPhone設計的，后來陸續套用到iPod touch、iPad以及Apple TV等產品上。

? iPod touch：一款由蘋果公司推出的便攜式移動產品。iPod touch與iPhone相比造型更加輕薄，徹底改變了人們的娛樂方式，如圖1-20所示。

? iPad：蘋果公司發布的平板電腦系列，提供瀏覽網站、收發電子郵件、觀看電子書、播放音頻或視頻、玩游戲等功能，如圖1-21所示。

? Apple TV：由蘋果公司設計、營銷和銷售的數字多媒體播放機。

喬布斯在首次展示iPhone手機時說：“我們今天將創造歷史。1984年Macintosh改變了計算機，2001年iPod改變了音樂產業，2007年iPhone要改變通信產業”。

如今，喬布斯的預言的確實現了，基于iOS系統的iPhone將智能手機推向了新的舞臺，引發了移動互聯網時代的爆發，改變了互聯網行業的入口格局，如圖1-22所示。

對于UI設計者而言，iOS操作系統帶來了更多的開發平臺。下面簡單分析iOS操作系統APP應用的UI設計基本原則。

? 便捷的操作：iOS操作系統中的APP應用通常具有圓潤的輪廓和程式化的梯度，操作非常便捷，如圖1-23所示。

? 清晰明朗的結構，便捷的導航控制：在設計APP界面時，應該盡量將所有的導航操作都安排在一個分層格式中，使用戶可以隨時看到當前的位置，如圖1-24所示。

另外，蘋果公司還推出了車載iOS系統，用戶可以將iOS設備與車輛無縫結合，使用汽車的內置顯示屏和控制鍵，或Siri免視功能與蘋果移動設備實現互動，如圖1-25所示。

1.2.3 微軟Windows Phone系統

Windows Phone（簡稱為WP）是微軟于2010年10月21日正式發布的一款手機操作系統，如圖1-26所示。

Windows Phone操作系統采用“Metro UI”的界面風格，并在系統中整合了Xbox Live游戲、Xbox Music音樂與獨特的視頻體驗。

2012年6月21日，微軟發布Windows Phone 8手機操作系統，采用與Windows系統相同的Windows NT內核，并且支持很多新的特性，如圖1-27所示。

2015年5月14日，微軟正式宣布以Windows 10 Mobile作為新一代Windows 10手機版的正式名稱，如圖1-28所示。Windows Phone 8.1則可以免費升級到Windows 10 Mobile版本。

Windows 10 Mobile操作系統的界面非常整潔干凈，其獨特的內容替換布局的設計理念更是讓用戶回到了內容本身，其設計原則應該是“光滑”“快”“現代”。

Windows 10 Mobile操作系統的“Metro UI”是一種界面展示技術，和蘋果的iOS界面、谷歌的Android界面最大的區別在于：后兩種都是以應用為主要呈現對象，而Metro界面強調的是信息本身，而不是冗余的界面元素。

另外，Metro界面的主要特點是完全平面化、設計簡約，沒有像iOS界面一樣采用漸變、浮雕等質感效果，這樣可以營造出一種身臨其境的感受，如圖1-29所示。

Windows操作系統不斷進入移動終端市場，試圖打破人們與信息和APP之間的隔閡，提供優秀的“端到端”的體驗，使其適用于人們的工作、生活和娛樂的方方面面。

1.3 入門基礎：手機界面與設計流程

APP界面是移動設備的操作系統、硬件與用戶進行人機交互的窗口，設計界面時必須基于手機的物理特性和軟件的應用特性進行合理的設計，界面設計者首先應對移動設備的常用界面有所了解。

1.3.1 手機界面：品類繁多、特點各異

就互聯網入口的網絡部分而言，接入網絡總是需要設備的。目前國內最流行的設備除了平板電腦，還有一種使用更為廣泛的設備就是智能手機。

在智能手機中，通過結合“無線網絡+APP應用”可以實現很多意想不到的功能，這些都為智能手機的流行和APP UI設計的發展奠定了一定的基礎。

常用的手機界面主要分為以下3類。

? Android手機界面

Android操作系統的手機可以說是品類繁多，其屏幕尺寸和分辨率都有很大的差異。表1-1所示為Android智能手機常用的屏幕尺寸和分辨率。

例如，小米手機就是國內Android系統手機的代表。其中，小米5（尊享版）的主屏尺寸為5.15英寸，主屏分辨率為1920像素×1080像素，搭載驍龍820處理器，提供4GB內存和128GB存儲空間（UFS 2.0）,3000毫安時電池以及索尼1600萬像素4軸防抖相機，如圖1-30所示。

小米5在UI設計上也有不少創新，例如，在視屏通話的過程中可以添加有趣的動畫效果，如“么么噠（一個飛吻）”“閃瞎了”“給你一球”等。

? 蘋果手機界面

以iPhone 6s Plus為例，其外觀顏色有金色、銀色、深空灰、玫瑰金等，屏幕采用高強度的Ion-X玻璃，支持4K（分辨率為4096像素×2160像素）視頻攝錄。

iPhone 6s Plus的主屏分辨率為1920像素×1080像素，屏幕像素密度為401ppi。iPhone 6s Plus在屏幕上的最大升級是加入了Force Touch壓力感應觸控（即3D Touch技術），使觸屏手機的操作性進一步擴展，如圖1-31所示。

? 微軟手機界面

微軟系統的手機除了采用特立獨行的Metro用戶界面，并搭配動態磁貼（Live Tiles）信息展示及告知系統等特色外，另一大特色就是無縫鏈接各類應用的豐富“中心”（Hub），如圖1-32所示。

1.3.2 平板界面：操作方便、性能優越

平板電腦（Tablet Personal Computer，簡稱Tablet PC、Flat Pc、Tablet、Slates），又稱為便攜式電腦，是一種體積較小、方便攜帶的微型計算機，以觸摸屏作為基本的輸入設備，如圖1-33所示。

平板電腦主要通過觸摸屏進行操作，不需要主機、鼠標和鍵盤等配件，使用起來非常方便。作為一種小型、便捷的微型計算機，平板電腦受到了越來越多用戶的喜愛，在2010年～2015年間，平板電腦呈現爆發式增長，形成了一種新的產業格局。

如今，蘋果iPad在平板電腦市場中占據了主導地位，它使用的是iOS操作系統，另外一部分市場就是Android系統平板電腦的“天下”了。例如，華為、聯想、小米、三星、戴爾、HTC等廠家均推出了基于Android操作系統的平板電腦。圖1-34所示為華為M2 10.0平板電腦。

1.3.3 階段分析：APP UI設計的基本流程

APP UI設計的基本工作流程包括分析、設計、調研、驗證與改進4個階段，具體流程如圖1-36所示。

1.3.4 使用要點：APP UI設計的色彩與圖案

在設計APP界面的過程中，有很多需要注意的使用禁忌，如色彩、圖案等。

1．色彩的使用要點

對于APP界面設計來說，色彩是最重要的因素，不同顏色代表不同的情緒，因此對色彩的使用應該和APP的主題相契合。如圖1-37所示，該APP的導航欄通過運用不同顏色的按鈕來代表其激活狀態，使用戶快速知道自己所處的位置。

在APP界面的制作過程中，根據彩色的特性，可以通過調整其色相、明度以及純度之間的對比關系，或通過各色彩間面積的調和，從而搭配出色彩斑斕、變化無窮的APP UI畫面效果。

總之，讓自己的APP界面更好看一點，更漂亮一點，這樣就會在視覺上更吸引用戶，給APP帶來更多的下載量。

2．圖案的使用要點

在APP UI的圖案設計過程中，每一個頁面不要放置過多的內容，這樣會讓用戶難以理解，操作也會顯得更加煩瑣。

例如，可以使用一些半透明效果的圖案來作為播放器的控制欄，使用戶在操作時也可以看到視頻播放畫面，如圖1-38所示。