1.1 概念解讀：認(rèn)識(shí)APP UI設(shè)計(jì)

設(shè)計(jì)就是把一種計(jì)劃、規(guī)劃、設(shè)想通過(guò)視覺(jué)的形式傳達(dá)出來(lái)的行為過(guò)程。簡(jiǎn)單地說(shuō)，設(shè)計(jì)就是一種創(chuàng)造行為，是一種解決問(wèn)題的過(guò)程，其區(qū)別于其他藝術(shù)類(lèi)的主要特征之一就是設(shè)計(jì)更具有獨(dú)創(chuàng)性。

APP UI設(shè)計(jì)的相關(guān)知識(shí)，包括UI設(shè)計(jì)、APP UI的概念和特點(diǎn)、手機(jī)的界面特色以及不同APP UI的視覺(jué)效果等，只有認(rèn)識(shí)并且了解APP UI設(shè)計(jì)的基本知識(shí)，才能更好地設(shè)計(jì)出優(yōu)秀的APP產(chǎn)品。

1.1.1 UI設(shè)計(jì)：人和工具之間的界面

UI是指用戶(hù)界面，由英文User Interface翻譯而來(lái)，是User Interface的縮寫(xiě)，概括成一句話(huà)就是——它是人和工具之間的界面。這個(gè)界面實(shí)際上體現(xiàn)在生活中的每一個(gè)環(huán)節(jié)，例如，操作電腦時(shí)鼠標(biāo)與手就是這個(gè)界面，吃飯時(shí)筷子和飯碗就是這個(gè)界面，在景區(qū)旅游時(shí)路邊的線(xiàn)路導(dǎo)覽圖就是這個(gè)界面。

在設(shè)計(jì)領(lǐng)域中，UI可以分成硬件界面和軟件界面兩個(gè)大類(lèi)。本書(shū)主要講述的是軟件界面，介于用戶(hù)與平板電腦、手機(jī)之間的一種移動(dòng)界面，也可以稱(chēng)之為特殊的或者是狹義的UI設(shè)計(jì)。

如圖1-1所示是熱門(mén)的圖像處理類(lèi)應(yīng)用軟件“美圖秀秀”APP的啟動(dòng)界面和主菜單界面。

1.1.2 APP UI：用戶(hù)和手機(jī)之間的界面

APP是可以安裝在手機(jī)上的軟件，完善原始系統(tǒng)的不足，體現(xiàn)個(gè)性化。

APP UI是指移動(dòng)APP的人機(jī)交互、操作邏輯、界面美觀(guān)的整體設(shè)計(jì)。好的APP UI設(shè)計(jì)可以提升產(chǎn)品的個(gè)性和品位，為用戶(hù)帶來(lái)舒適、簡(jiǎn)單、自由的使用體驗(yàn)，同時(shí)也可以體現(xiàn)出APP產(chǎn)品的基本定位和特色。

圖1-2所示為手機(jī)APP UI展示效果。

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

1.1.3 設(shè)計(jì)特點(diǎn)：小巧輕便、通信便捷

APP UI將各類(lèi)手機(jī)應(yīng)用和UI設(shè)計(jì)結(jié)合起來(lái)，使其成為一個(gè)整體，且具備小巧輕便、通信便捷的特點(diǎn)。

? 小巧輕便：APP可以?xún)?nèi)嵌到各種智能手機(jī)中，用戶(hù)可以隨身攜帶，隨時(shí)隨地打開(kāi)這些APP，滿(mǎn)足某些需求。另外，移動(dòng)互聯(lián)網(wǎng)的優(yōu)勢(shì)使用戶(hù)可以通過(guò)各種APP快速溝通并獲得資訊。圖1-4所示為“百度糯米”APP的界面，用戶(hù)通過(guò)手機(jī)即可獲得各種吃喝玩樂(lè)的生活資訊。

? 通信便捷：移動(dòng)APP使人與人之間的溝通變得更加方便，可以跨通信運(yùn)營(yíng)商、跨操作系統(tǒng)平臺(tái)，通過(guò)無(wú)線(xiàn)網(wǎng)絡(luò)快速發(fā)送免費(fèi)語(yǔ)音短信、視頻、圖片和文字。圖1-5所示為“微信”APP的“搖一搖”界面，用戶(hù)可以通過(guò)“搖一搖”“搜索號(hào)碼”“附近的人”和掃二維碼等方式添加好友和關(guān)注公眾平臺(tái)，同時(shí)可以將內(nèi)容分享給好友或分享到朋友圈。

1.1.4 設(shè)計(jì)基礎(chǔ)：熟悉手機(jī)的界面特色

隨著科技的發(fā)展，現(xiàn)在智能手機(jī)的功能越來(lái)越多，而且越來(lái)越強(qiáng)大，甚至可以和計(jì)算機(jī)相媲美。

想要設(shè)計(jì)出優(yōu)秀的APP用戶(hù)界面，用戶(hù)還需要熟悉智能手機(jī)的界面構(gòu)造。手機(jī)的主要界面可分為幾個(gè)標(biāo)準(zhǔn)的信息區(qū)域（主要針對(duì)按鍵手機(jī)，而觸屏手機(jī)相對(duì)靈活）：狀態(tài)欄、標(biāo)題區(qū)、功能操作區(qū)和公共導(dǎo)航區(qū)等。

圖1-6所示為“工商銀行手機(jī)銀行”APP的UI構(gòu)成。

? 狀態(tài)欄：用于顯示手機(jī)目前的運(yùn)行狀態(tài)及事件的區(qū)域，主要包括應(yīng)用通知、手機(jī)狀態(tài)、網(wǎng)絡(luò)信號(hào)強(qiáng)度、運(yùn)營(yíng)商名稱(chēng)、電池電量、未處理事件及數(shù)量，以及時(shí)間等要素。在A(yíng)PP UI設(shè)計(jì)過(guò)程中，狀態(tài)欄并不是必須存在的元素，用戶(hù)可依照交互需求進(jìn)行取舍。

? 標(biāo)題區(qū)：主要用于放置APP的Logo、名稱(chēng)、版本及相關(guān)圖文信息。

? 功能操作區(qū)：它是APP應(yīng)用的核心部分，也是手機(jī)版面上面積最大的區(qū)域，通常包含有列表（list）、焦點(diǎn)（highlight）、滾動(dòng)條（scroalbar）和圖標(biāo)（icon）等多種不同元素。在各個(gè)APP內(nèi)部，不同層級(jí)的用戶(hù)界面包含的元素可以相同，也可以不同，用戶(hù)可以根據(jù)實(shí)際情況進(jìn)行合理的搭配運(yùn)用，如圖1-7所示。

? 導(dǎo)航欄：也稱(chēng)之為公共導(dǎo)航區(qū)或軟鍵盤(pán)區(qū)，它是對(duì)APP的主要操作進(jìn)行宏觀(guān)操控的區(qū)域，可以出現(xiàn)在該APP的任何界面中，方便用戶(hù)進(jìn)行切換操作。

APP運(yùn)行在手機(jī)操作系統(tǒng)的軟件環(huán)境中，其UI設(shè)計(jì)應(yīng)該要符合這個(gè)應(yīng)用平臺(tái)的整體風(fēng)格，這樣有利于產(chǎn)品外觀(guān)的整合。

手機(jī)界面效果的規(guī)范性包括以下兩個(gè)方面，如圖1-8所示。

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

1.1.5 視覺(jué)效果：為用戶(hù)帶來(lái)不一樣的美感

做得好的APP UI設(shè)計(jì)具有一定的視覺(jué)效果，可以直觀(guān)、生動(dòng)、形象地向用戶(hù)展示信息，從而簡(jiǎn)明便捷地讓用戶(hù)產(chǎn)生審美想象。

1．簡(jiǎn)約明快的視覺(jué)效果

簡(jiǎn)約明快型的APP UI設(shè)計(jì)追求的是空間的實(shí)用性和靈活性，可以讓用戶(hù)感受到簡(jiǎn)潔明快的時(shí)代感和純抽象的美。

在視覺(jué)效果上，應(yīng)盡量突出個(gè)性和美感，如圖1-10所示。

簡(jiǎn)約明快型的APP UI設(shè)計(jì)更適合色彩支持?jǐn)?shù)量較少的彩屏手機(jī)，其主要特點(diǎn)如下。

? 通過(guò)組合各種色塊和線(xiàn)條，使移動(dòng)界面更加簡(jiǎn)約大氣，如圖1-11所示。

? 通過(guò)點(diǎn)、線(xiàn)、面等基本形狀構(gòu)成的元素，再加上純凈的色彩搭配，使界面更加整齊有條理，給用戶(hù)帶來(lái)賞心悅目的感覺(jué)，如圖1-12所示。

2．趣味型的視覺(jué)效果

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

在A(yíng)PP UI設(shè)計(jì)中，趣味性主要是指通過(guò)一種活潑的版面視覺(jué)語(yǔ)言，使界面具備親和力、視覺(jué)魅力和情感魅力，讓用戶(hù)在新奇、振奮的情緒下深深地被界面中展示的內(nèi)容所吸引。圖1-13所示為趣味與獨(dú)創(chuàng)型界面。

3．高貴華麗型的視覺(jué)效果

高貴華麗型的APP UI設(shè)計(jì)，主要是通過(guò)運(yùn)用飽和的色彩和華麗的質(zhì)感來(lái)塑造超酷、超炫的視覺(jué)感受，整體營(yíng)造出一種華麗、高貴、溫馨的感覺(jué)。圖1-14所示為高貴華麗型的APP界面。

由于高貴華麗型的APP界面設(shè)計(jì)需要用到很多的色彩和各類(lèi)設(shè)計(jì)元素，因此更適合色彩支持?jǐn)?shù)量較多的彩屏手機(jī)。

1.2 APP平臺(tái)：主流手機(jī)操作系統(tǒng)

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，Android、iOS、Windows等智能操作系統(tǒng)成為用戶(hù)應(yīng)用APP的基本入口，如圖1-15所示。

因此，用戶(hù)除了要了解APP UI設(shè)計(jì)的基本概念外，還必須認(rèn)識(shí)Android、iOS、Windows三大主流系統(tǒng)，以此熟悉移動(dòng)設(shè)備的主流平臺(tái)和設(shè)計(jì)的基本原則。

1.2.1 谷歌Android系統(tǒng)

Android是由Google基于Linux開(kāi)發(fā)的一款移動(dòng)操作系統(tǒng)。

在移動(dòng)設(shè)備的操作系統(tǒng)領(lǐng)域，iOS和Android系統(tǒng)的競(jìng)爭(zhēng)十分激烈，它們都希望占據(jù)更大的市場(chǎng)份額。目前，由于市面上存在眾多的Android系統(tǒng)OEM廠(chǎng)商，因此Google的Android操作系統(tǒng)處在移動(dòng)系統(tǒng)的領(lǐng)先位置，如圖1-16所示。

Android操作系統(tǒng)的APP UI設(shè)計(jì)基本原則就是要擁有漂亮的界面，設(shè)計(jì)者可以設(shè)置精心的動(dòng)畫(huà)或者及時(shí)的音效，帶給用戶(hù)一種更加愉悅的體驗(yàn)，如圖1-17所示。

另外，Android用戶(hù)可以直接觸屏操作APP中的對(duì)象，這樣有助于降低用戶(hù)完成任務(wù)時(shí)的認(rèn)知難度，進(jìn)一步提高用戶(hù)對(duì)APP的滿(mǎn)意度。例如，在“最美天氣”APP的界面中，用戶(hù)可以通過(guò)滑動(dòng)屏幕的方式，查看更多的天氣資訊，如圖1-18所示。

在設(shè)計(jì)Android操作系統(tǒng)的APP界面時(shí)，設(shè)計(jì)者應(yīng)盡量使用圖片來(lái)表達(dá)信息，圖片比文字更容易理解，而且更加吸引用戶(hù)的注意力。例如，在“暴風(fēng)影音”APP的界面中，就采用了大量直觀(guān)的圖標(biāo)菜單和圖片目錄列表，如圖1-19所示。

1.2.2 蘋(píng)果iOS系統(tǒng)

iOS是由蘋(píng)果公司開(kāi)發(fā)的一種采用類(lèi)Unix內(nèi)核的移動(dòng)操作系統(tǒng)，最初是為iPhone設(shè)計(jì)的，后來(lái)陸續(xù)套用到iPod touch、iPad以及Apple TV等產(chǎn)品上。

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

? iPad：蘋(píng)果公司發(fā)布的平板電腦系列，提供瀏覽網(wǎng)站、收發(fā)電子郵件、觀(guān)看電子書(shū)、播放音頻或視頻、玩游戲等功能，如圖1-21所示。

? Apple TV：由蘋(píng)果公司設(shè)計(jì)、營(yíng)銷(xiāo)和銷(xiāo)售的數(shù)字多媒體播放機(jī)。

喬布斯在首次展示iPhone手機(jī)時(shí)說(shuō)：“我們今天將創(chuàng)造歷史。1984年Macintosh改變了計(jì)算機(jī)，2001年iPod改變了音樂(lè)產(chǎn)業(yè)，2007年iPhone要改變通信產(chǎn)業(yè)”。

如今，喬布斯的預(yù)言的確實(shí)現(xiàn)了，基于iOS系統(tǒng)的iPhone將智能手機(jī)推向了新的舞臺(tái)，引發(fā)了移動(dòng)互聯(lián)網(wǎng)時(shí)代的爆發(fā)，改變了互聯(lián)網(wǎng)行業(yè)的入口格局，如圖1-22所示。

對(duì)于UI設(shè)計(jì)者而言，iOS操作系統(tǒng)帶來(lái)了更多的開(kāi)發(fā)平臺(tái)。下面簡(jiǎn)單分析iOS操作系統(tǒng)APP應(yīng)用的UI設(shè)計(jì)基本原則。

? 便捷的操作：iOS操作系統(tǒng)中的APP應(yīng)用通常具有圓潤(rùn)的輪廓和程式化的梯度，操作非常便捷，如圖1-23所示。

? 清晰明朗的結(jié)構(gòu)，便捷的導(dǎo)航控制：在設(shè)計(jì)APP界面時(shí)，應(yīng)該盡量將所有的導(dǎo)航操作都安排在一個(gè)分層格式中，使用戶(hù)可以隨時(shí)看到當(dāng)前的位置，如圖1-24所示。

另外，蘋(píng)果公司還推出了車(chē)載iOS系統(tǒng)，用戶(hù)可以將iOS設(shè)備與車(chē)輛無(wú)縫結(jié)合，使用汽車(chē)的內(nèi)置顯示屏和控制鍵，或Siri免視功能與蘋(píng)果移動(dòng)設(shè)備實(shí)現(xiàn)互動(dòng)，如圖1-25所示。

1.2.3 微軟Windows Phone系統(tǒng)

Windows Phone（簡(jiǎn)稱(chēng)為WP）是微軟于2010年10月21日正式發(fā)布的一款手機(jī)操作系統(tǒng)，如圖1-26所示。

Windows Phone操作系統(tǒng)采用“Metro UI”的界面風(fēng)格，并在系統(tǒng)中整合了Xbox Live游戲、Xbox Music音樂(lè)與獨(dú)特的視頻體驗(yàn)。

2012年6月21日，微軟發(fā)布Windows Phone 8手機(jī)操作系統(tǒng)，采用與Windows系統(tǒng)相同的Windows NT內(nèi)核，并且支持很多新的特性，如圖1-27所示。

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

Windows 10 Mobile操作系統(tǒng)的界面非常整潔干凈，其獨(dú)特的內(nèi)容替換布局的設(shè)計(jì)理念更是讓用戶(hù)回到了內(nèi)容本身，其設(shè)計(jì)原則應(yīng)該是“光滑”“快”“現(xiàn)代”。

Windows 10 Mobile操作系統(tǒng)的“Metro UI”是一種界面展示技術(shù)，和蘋(píng)果的iOS界面、谷歌的Android界面最大的區(qū)別在于：后兩種都是以應(yīng)用為主要呈現(xiàn)對(duì)象，而Metro界面強(qiáng)調(diào)的是信息本身，而不是冗余的界面元素。

另外，Metro界面的主要特點(diǎn)是完全平面化、設(shè)計(jì)簡(jiǎn)約，沒(méi)有像iOS界面一樣采用漸變、浮雕等質(zhì)感效果，這樣可以營(yíng)造出一種身臨其境的感受，如圖1-29所示。

Windows操作系統(tǒng)不斷進(jìn)入移動(dòng)終端市場(chǎng)，試圖打破人們與信息和APP之間的隔閡，提供優(yōu)秀的“端到端”的體驗(yàn)，使其適用于人們的工作、生活和娛樂(lè)的方方面面。

1.3 入門(mén)基礎(chǔ)：手機(jī)界面與設(shè)計(jì)流程

APP界面是移動(dòng)設(shè)備的操作系統(tǒng)、硬件與用戶(hù)進(jìn)行人機(jī)交互的窗口，設(shè)計(jì)界面時(shí)必須基于手機(jī)的物理特性和軟件的應(yīng)用特性進(jìn)行合理的設(shè)計(jì)，界面設(shè)計(jì)者首先應(yīng)對(duì)移動(dòng)設(shè)備的常用界面有所了解。

1.3.1 手機(jī)界面：品類(lèi)繁多、特點(diǎn)各異

就互聯(lián)網(wǎng)入口的網(wǎng)絡(luò)部分而言，接入網(wǎng)絡(luò)總是需要設(shè)備的。目前國(guó)內(nèi)最流行的設(shè)備除了平板電腦，還有一種使用更為廣泛的設(shè)備就是智能手機(jī)。

在智能手機(jī)中，通過(guò)結(jié)合“無(wú)線(xiàn)網(wǎng)絡(luò)+APP應(yīng)用”可以實(shí)現(xiàn)很多意想不到的功能，這些都為智能手機(jī)的流行和APP UI設(shè)計(jì)的發(fā)展奠定了一定的基礎(chǔ)。

常用的手機(jī)界面主要分為以下3類(lèi)。

? Android手機(jī)界面

Android操作系統(tǒng)的手機(jī)可以說(shuō)是品類(lèi)繁多，其屏幕尺寸和分辨率都有很大的差異。表1-1所示為Android智能手機(jī)常用的屏幕尺寸和分辨率。

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

小米5在UI設(shè)計(jì)上也有不少創(chuàng)新，例如，在視屏通話(huà)的過(guò)程中可以添加有趣的動(dòng)畫(huà)效果，如“么么噠（一個(gè)飛吻）”“閃瞎了”“給你一球”等。

? 蘋(píng)果手機(jī)界面

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

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

? 微軟手機(jī)界面

微軟系統(tǒng)的手機(jī)除了采用特立獨(dú)行的Metro用戶(hù)界面，并搭配動(dòng)態(tài)磁貼（Live Tiles）信息展示及告知系統(tǒng)等特色外，另一大特色就是無(wú)縫鏈接各類(lèi)應(yīng)用的豐富“中心”（Hub），如圖1-32所示。

1.3.2 平板界面：操作方便、性能優(yōu)越

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

平板電腦主要通過(guò)觸摸屏進(jìn)行操作，不需要主機(jī)、鼠標(biāo)和鍵盤(pán)等配件，使用起來(lái)非常方便。作為一種小型、便捷的微型計(jì)算機(jī)，平板電腦受到了越來(lái)越多用戶(hù)的喜愛(ài)，在2010年～2015年間，平板電腦呈現(xiàn)爆發(fā)式增長(zhǎng)，形成了一種新的產(chǎn)業(yè)格局。

如今，蘋(píng)果iPad在平板電腦市場(chǎng)中占據(jù)了主導(dǎo)地位，它使用的是iOS操作系統(tǒng)，另外一部分市場(chǎng)就是Android系統(tǒng)平板電腦的“天下”了。例如，華為、聯(lián)想、小米、三星、戴爾、HTC等廠(chǎng)家均推出了基于A(yíng)ndroid操作系統(tǒng)的平板電腦。圖1-34所示為華為M2 10.0平板電腦。

1.3.3 階段分析：APP UI設(shè)計(jì)的基本流程

APP UI設(shè)計(jì)的基本工作流程包括分析、設(shè)計(jì)、調(diào)研、驗(yàn)證與改進(jìn)4個(gè)階段，具體流程如圖1-36所示。

1.3.4 使用要點(diǎn)：APP UI設(shè)計(jì)的色彩與圖案

在設(shè)計(jì)APP界面的過(guò)程中，有很多需要注意的使用禁忌，如色彩、圖案等。

1．色彩的使用要點(diǎn)

對(duì)于A(yíng)PP界面設(shè)計(jì)來(lái)說(shuō)，色彩是最重要的因素，不同顏色代表不同的情緒，因此對(duì)色彩的使用應(yīng)該和APP的主題相契合。如圖1-37所示，該APP的導(dǎo)航欄通過(guò)運(yùn)用不同顏色的按鈕來(lái)代表其激活狀態(tài)，使用戶(hù)快速知道自己所處的位置。

在A(yíng)PP界面的制作過(guò)程中，根據(jù)彩色的特性，可以通過(guò)調(diào)整其色相、明度以及純度之間的對(duì)比關(guān)系，或通過(guò)各色彩間面積的調(diào)和，從而搭配出色彩斑斕、變化無(wú)窮的APP UI畫(huà)面效果。

總之，讓自己的APP界面更好看一點(diǎn)，更漂亮一點(diǎn)，這樣就會(huì)在視覺(jué)上更吸引用戶(hù)，給APP帶來(lái)更多的下載量。

2．圖案的使用要點(diǎn)

在A(yíng)PP UI的圖案設(shè)計(jì)過(guò)程中，每一個(gè)頁(yè)面不要放置過(guò)多的內(nèi)容，這樣會(huì)讓用戶(hù)難以理解，操作也會(huì)顯得更加煩瑣。

例如，可以使用一些半透明效果的圖案來(lái)作為播放器的控制欄，使用戶(hù)在操作時(shí)也可以看到視頻播放畫(huà)面，如圖1-38所示。