摘要：移動(dòng)互聯(lián)網(wǎng)到智能時(shí)代，Google發(fā)布Android4.0到8.0以來，它占據(jù)了很大的市場(chǎng)份額，從Android系統(tǒng)更新的設(shè)計(jì)規(guī)范中解析視覺設(shè)計(jì)的一些設(shè)計(jì)元素和設(shè)計(jì)手法，并分析設(shè)計(jì)趨勢(shì)，包含新字體更新、多圖顯示畫中畫和多任務(wù)切換、柵格設(shè)計(jì)和響應(yīng)式設(shè)計(jì)、智能生物識(shí)別、深度個(gè)性化、UI動(dòng)效和視頻趨勢(shì)，從而幫助提升用戶體驗(yàn)。

關(guān)鍵詞：手機(jī)界面；安卓；視覺設(shè)計(jì)；視覺趨勢(shì)

引言

“Android 的規(guī)模實(shí)在太大了，不由得你忽視， 未來 Android 將會(huì)成為主角。” SearchMan 的 CEO Niren Hiro 在2011年表示。Android是由Google公司和開放手機(jī)聯(lián)盟領(lǐng)導(dǎo)及開發(fā)，基于Linux的自由及開放源代碼的操作系統(tǒng)，主要使用于智能手機(jī)和平板電腦等升級(jí)移動(dòng)設(shè)備。① 從Google2011年發(fā)布Android4.0以來使雙核大屏手機(jī)一度處于熱賣中，至2013年9月24日，安卓系統(tǒng)五周歲，其設(shè)備數(shù)量已經(jīng)超過了10億臺(tái)。2014年10月15日，Android 5.0 系統(tǒng)開始使用Material Design設(shè)計(jì)風(fēng)格。2015年5月28日新系統(tǒng)的整體設(shè)計(jì)風(fēng)格依然保持扁平化的（棉花糖），2016年8月22日發(fā)布了（牛軋?zhí)牵?017 年 8 月 21 日升級(jí)（奧利奧）。

近年很多手機(jī)廠商喜歡通過安卓系統(tǒng)上定制化元素，尋求差異化。原生版的界面視覺設(shè)計(jì)再度成為視覺焦點(diǎn)。大量的APP應(yīng)用及眾多手機(jī)廠商的定制蛻變，即如何處理界面的視覺設(shè)計(jì)將成為界面視覺設(shè)計(jì)師探究的重中之重。

Android4.0到8.0的更新就像一個(gè)制造精良的工具，第一次操作使用時(shí)，就能憑借直覺捕獲到最重要的信息和最重要的功能，即使是復(fù)雜的任務(wù)也會(huì)為人量身打造，不受任何年齡和文化的局限。這就是安卓系統(tǒng)精彩和杰出的視覺設(shè)計(jì)，它的視覺設(shè)計(jì)將字體、圖片、圖標(biāo)、排版、色彩完美地融合，將信息第一時(shí)間準(zhǔn)確地傳遞給你，讓你感覺那么自然，那么舒適而又貼切，同時(shí)又別具一格。

1. 現(xiàn)代的字體選擇

Android的視覺設(shè)計(jì)靈活運(yùn)用大小，空間，節(jié)奏，底層網(wǎng)格等排版方式。構(gòu)建標(biāo)準(zhǔn)化的文字字體、字號(hào)、字間距和字色幫助用戶創(chuàng)建視覺層次結(jié)構(gòu)，進(jìn)而快速愉悅地獲取信息。為了更好支持排版，Android采用了一種新的字體：Roboto，專門為高分辨率屏幕下的UI而設(shè)② 。這款字體設(shè)計(jì)屬于無襯線字體，簡(jiǎn)潔、現(xiàn)代、時(shí)尚，字體呈細(xì)長(zhǎng)型，比較秀氣，平和，帶有幾分親和力與情感，適合在手機(jī)中的閱讀和識(shí)別，也適合不同用戶群體的使用。

用戶可以在設(shè)置app中選擇系統(tǒng)級(jí)的文本縮放，根據(jù)瀏覽器的寬度自適應(yīng)。Roboto跟隨字號(hào)的縮放時(shí)依然顯得簡(jiǎn)潔而清晰，并適合老年人大字號(hào)的需求。8.0 Android O中谷歌增加了對(duì)系統(tǒng)字體的支持，開發(fā)者可以自行更改字體樣式，讓用戶有了更多字體的選擇。

2. 大量的圖片顯示——多圖功能畫中畫

讀圖時(shí)代的到來，使用圖片來解釋想法和吸引眼球。圖片的展示獲得人們更多的注意力，比文字有效率。當(dāng)Instagram 普及時(shí)，拍照已經(jīng)成為人們記錄生活和分享快樂的重要組成部分，利用圖片成為人們聯(lián)系的名片，既可以快速識(shí)別，也添加了使用時(shí)的趣味性、靈動(dòng)感與親和力。手機(jī)界面中的色彩也變得豐富而活躍。著名設(shè)計(jì)師 Dustin Curtis 認(rèn)為照片除了藝術(shù)表達(dá)和記錄生活這兩個(gè)用途外，用作交流方式是更重要的用法。圖片可以刺激我們的眼球，并激發(fā)我們的求知欲和觸動(dòng)麻木的神經(jīng)。

在Android4.0到8.0系統(tǒng)中個(gè)人聯(lián)系方式中就采用了富有情感的頭像，不僅個(gè)性化了聯(lián)系名片，美化了視覺，信息內(nèi)容的本身也得到了優(yōu)化，提供了快速識(shí)別和更多無法用語言快速描述的個(gè)人信息。比如興趣愛好，穿著打扮，情感特征等等個(gè)人信息。在微信和微博等社區(qū)軟件中，照片提供了更多個(gè)人信息，可以告訴我們?cè)谑裁吹攸c(diǎn)，什么時(shí)間，和誰在一起，正在做什么，甚至涵蓋更多內(nèi)容。 彩色微笑的圖片能讓人產(chǎn)生愉悅的心情及與人互動(dòng)交流的欲望，生活在社會(huì)化的環(huán)境中讀圖似乎是不可避免的。

Android O在8.0中，分屏畫中畫功能得到強(qiáng)化，更加流暢，懸浮窗可隨意拖動(dòng)位置，然后在主屏幕中繼續(xù)你的工作。畫中畫不僅會(huì)讓我們想起7.0版本推出的分屏多任務(wù)。在安卓8.0中，谷歌著重強(qiáng)調(diào)了多任務(wù)流暢度的重要性。這一突破性特性可能會(huì)改變用戶使用手機(jī)的習(xí)慣。

多任務(wù)和多屏幕的切換成為界面重要趨勢(shì)之一，為app的界面切換或者多功能展示提供了廣闊的前景。

3. 信息的關(guān)聯(lián)性處理——柵格設(shè)計(jì)

界面將特定的視覺信息要素，根據(jù)主題表達(dá)的需求在特定的頁面上進(jìn)行的一種編輯和安排。格式塔心理學(xué)派通過對(duì)視覺感知的生理研究，提出了一系列視感知規(guī)律，其中包含了“圖底”這個(gè)核心概念，以及“簡(jiǎn)明原則”“接近原則”“相似原則”“閉合原則”等視感知特性。③

Android4.0到8.0的信息編排設(shè)計(jì)也是基于格式塔原理的柵格設(shè)計(jì)，將信息重新梳理和規(guī)劃，讓用戶閱讀更順暢，并提高信息傳達(dá)的速度與準(zhǔn)確度。柵格是一種利用視覺來組織事物的標(biāo)準(zhǔn)方式，網(wǎng)頁柵格系統(tǒng)的定義：以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。在Android界面設(shè)計(jì)中，設(shè)計(jì)師根據(jù)黃金柵格標(biāo)準(zhǔn)化頁面。不僅讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，具有可用性。而且，對(duì)于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。通過柵格來排布字母和文字，使頁面變得更加和諧，手機(jī)界面與人的溝通也變得更加便捷。頁面和頁面元素之間的一致性有助于一個(gè)有凝聚力的品牌和用戶體驗(yàn)，所以在Android系統(tǒng)中相同的版式——垂直滾動(dòng)形成的和諧垂直節(jié)奏和相同的間距（包括頭部、腳部、導(dǎo)航、信息塊、標(biāo)題與內(nèi)容之間）。如通常把48dp作為可觸摸的UI元件的標(biāo)準(zhǔn)，每個(gè)UI元素之間的間距是8pd，形成了一套標(biāo)準(zhǔn)的設(shè)計(jì)規(guī)范，這樣一個(gè)干凈的和一致的頁面結(jié)構(gòu)，大大加強(qiáng)了用戶在使用界面時(shí)的易用性和可預(yù)測(cè)性。

設(shè)計(jì)師的創(chuàng)意越來越強(qiáng)了，即使是柵格也能玩出新花樣。通過自定義創(chuàng)造出實(shí)驗(yàn)性的柵格系統(tǒng)，設(shè)計(jì)師在此基礎(chǔ)上能夠創(chuàng)造出更加靈活原創(chuàng)的布局，創(chuàng)造性地使用各種視覺元素。不過，實(shí)驗(yàn)性的柵格系統(tǒng)通常都需要多次迭代和測(cè)試，確保可用性。

4. 明亮與漸變色

色彩是設(shè)計(jì)師手上最強(qiáng)大的工具之一。色彩能夠吸引用戶的注意力，影響用戶的情緒和行為。對(duì)于移動(dòng)端應(yīng)用而言，色彩是用戶獲取到的第一信息，鮮艷的色彩對(duì)于用戶的影響是巨大而明顯的。

將色彩作為功能性元素。色彩并不僅僅具有美學(xué)特征，而且也能塑造功能和體驗(yàn)。安卓界面設(shè)計(jì)師使用色彩來區(qū)分不同類型的按鈕和通知。色彩的使用通常需要結(jié)合色彩心理學(xué)和配色規(guī)則來使用，而時(shí)下流行的明亮的色彩，更是要注意。

5. 多面板布局和響應(yīng)式設(shè)計(jì)

Android3.0之后重要的改進(jìn)就是增強(qiáng)了適配性，平面化的圖形便于橫向拉伸，分辨率增大時(shí)，頂部可以由兩欄合并為一欄，手機(jī)和平板可以使用同一個(gè)程序，所以應(yīng)用程序?qū)⒏嗟目紤]高分辨率的顯示效果。有效地利用平板電腦的屏幕空間，扁平化層級(jí)結(jié)構(gòu)，簡(jiǎn)化導(dǎo)航。④扁平化層級(jí)結(jié)構(gòu)不僅能夠減輕用戶對(duì)導(dǎo)航層級(jí)的負(fù)擔(dān)，也讓用戶更快達(dá)到目的，操作更簡(jiǎn)潔。

近年界面設(shè)計(jì)都符合響應(yīng)式設(shè)計(jì)的趨勢(shì)。響應(yīng)式設(shè)計(jì)是根據(jù)移動(dòng)端的不同寬度自動(dòng)適應(yīng)。響應(yīng)式設(shè)計(jì)能確保用戶無論是在行動(dòng)裝置，或者在 PC 上都能按你的意愿瀏覽內(nèi)容。無論你的終端是什么，都可以舒適地閱讀到自適應(yīng)的信息。即使是不同的像素密度 （DPI），從Android4.0提供的資源也使應(yīng)用的所有設(shè)備上都看起來很棒。響應(yīng)式設(shè)計(jì)賦予了成千上萬的手機(jī)、平板電腦和其他移動(dòng)設(shè)備靈活的編排和自適應(yīng)，將信息從大屏幕到小屏幕進(jìn)行了優(yōu)雅的轉(zhuǎn)化。

安卓7.0更新主要變化在于取消程序抽屜圖標(biāo)，改為桌面上滑拉出全部程序列表。同時(shí)桌面的谷歌搜索框也換成了懸浮的“G”拉環(huán)，點(diǎn)擊可快速搜索。⑤

6. 多主題性——個(gè)性化

正如Android設(shè)計(jì)規(guī)范中所講“人們總是喜歡增加個(gè)性的東西，它們讓人感覺更有親切感及控制感。提供實(shí)用、漂亮、有趣、可自定義，且不妨礙主要任務(wù)的默認(rèn)設(shè)置。”

Android運(yùn)用圖片作為背景，增加個(gè)性化特征。全景視圖和卡片式視圖成為核心體驗(yàn)的一部分。

背景圖片位于全景應(yīng)用的最底層，通常是一張全景圖，它可能是應(yīng)用程序最直觀的部分。由它來給出類似于雜志的體驗(yàn)。交互功能不僅做到了視覺顯性化，樣式也更趨于統(tǒng)一化。

從安卓系統(tǒng)誕生起就一直存在的一項(xiàng)元老級(jí)特性，在安卓7.0上被終結(jié)。應(yīng)用抽屜，不少用戶也把它視作是安卓與iOS系統(tǒng)的顯著差異之一。

深度個(gè)性化個(gè)性化的用戶體驗(yàn)將會(huì)成為2018-2019年的熱門趨勢(shì)。定制化的用戶界面UI界面中的個(gè)性化設(shè)計(jì)不僅僅是關(guān)乎內(nèi)容，每個(gè)用戶都是非常不同的，不僅僅是偏好不同，用戶的視力狀況、需求、愛好、文化背景都有著明顯的差異。個(gè)性化的UI界面應(yīng)該單獨(dú)適配每一個(gè)用戶，借助內(nèi)置的傳感器和其他的輔助信息，來實(shí)現(xiàn)更加深度定制的UI界面。由于移動(dòng)端設(shè)備通常會(huì)隨著用戶的位置改變而變化，基于不同的地理位置信息，而為用戶提供不同的內(nèi)容并不難實(shí)現(xiàn)，甚至成為用戶體驗(yàn)優(yōu)化的一個(gè)固定方向。以星巴克為代表的服務(wù)商已經(jīng)在他們的APP當(dāng)中內(nèi)置了這樣的功能，用戶能在不同的門店享受到不同的優(yōu)惠服務(wù)。

7. 文字型多彩圖標(biāo)與表情

另外，一些圖標(biāo)和操作也省略了復(fù)雜的文字解說，而采用了簡(jiǎn)潔的圖形設(shè)計(jì)，這種單色平面化的符號(hào)——視覺隱喻也讓人一目了然。在Android4.0 app設(shè)計(jì)準(zhǔn)則中，特別強(qiáng)調(diào)為Android設(shè)計(jì)純粹的Android app。在Twitter， Facebook， 以及Pinterest，它們的App體驗(yàn)都比移動(dòng)瀏覽版的頁面要好多了。用戶會(huì)越來越多的選擇你的App而不是移動(dòng)瀏覽版。多樣而統(tǒng)一的APP應(yīng)用圖標(biāo)無疑成為重要的識(shí)別標(biāo)志。屏幕中小小的一寸之地，卻為復(fù)雜的操作、狀態(tài)和APP提供了一個(gè)快速而直觀的表現(xiàn)形式。在Android4.0中采用了獨(dú)特的挖版，三維，且?guī)в袕纳隙碌耐敢暫凸飧?，打破了蘋果系統(tǒng)中的圓角方形，而更顯靈動(dòng)和深度。

新款 emoji 表情：斗圖再也不單調(diào)。emoji斗圖成為時(shí)下網(wǎng)民常用的方式，而 iOS 11 和安卓 8.0 都新增了大量的emoji新款表情。安卓 8.0 不僅新增了超過 60 個(gè)全新設(shè)計(jì)的表情，還拋棄了以往 " 布丁 " 的外形設(shè)計(jì)，采用擬人化和更為夸張的風(fēng)格。

8. 視覺的平面化——柵格風(fēng)正在8.0中演繹

以Windows8為代表的界面將這種簡(jiǎn)潔而直觀的設(shè)計(jì)風(fēng)格推向主流。色彩方格構(gòu)成，細(xì)線分割，形成強(qiáng)烈的對(duì)比，容易引起用戶的視覺興趣，進(jìn)而繼續(xù)探索下去。在Android系統(tǒng)的視覺設(shè)計(jì)，放棄了原有的設(shè)計(jì)風(fēng)格，整體正在向平面化、格子風(fēng)的設(shè)計(jì)方向進(jìn)化。明顯的藍(lán)色塊，視覺的平面化處理界面顯得清晰而了然，似乎與Windows 8系統(tǒng)中的平面風(fēng)格有了些許聯(lián)系。簡(jiǎn)約而時(shí)尚的平面風(fēng)格強(qiáng)化了Android統(tǒng)一的品牌感。簡(jiǎn)潔風(fēng)格儼然成為一種設(shè)計(jì)趨勢(shì)，復(fù)雜的元素會(huì)增加用戶的識(shí)別成本，過多的信息容易造成審美和使用的疲勞。簡(jiǎn)而言之Android的界面風(fēng)格是平面、中性和簡(jiǎn)潔。

Android 8.0比Android 7.0在人工智能等方面有了更大的提升。如果說安卓7.0注重系統(tǒng)上的自身強(qiáng)化，以加強(qiáng)流暢性、穩(wěn)定性為目的。那么，安卓8.0在保證原有基礎(chǔ)上，又加強(qiáng)了對(duì)系統(tǒng)“大腦”等方面的強(qiáng)化。⑥Google表示，Android Oreo能讓你的手機(jī)獲得超能力：更快、更強(qiáng)、更智能。

9. 多樣的UI動(dòng)效及視頻內(nèi)容的大范圍普及

從靜態(tài)內(nèi)容到動(dòng)態(tài)和視頻。在動(dòng)效設(shè)計(jì)這件事情上，你會(huì)發(fā)現(xiàn)8.0版本比7.0版本越加成熟，融入交互的動(dòng)效越來越圓融，用戶體驗(yàn)引人入勝的APP也越來越多了。交互動(dòng)效越來越多的使用在ui設(shè)計(jì)中，它對(duì)于產(chǎn)品設(shè)計(jì)的作用包含：以提高可用性為前提，提升體驗(yàn)為目的，傳遞層級(jí)和狀態(tài)信息，做到隱形的動(dòng)效。它的幾點(diǎn)特性：快速且流暢、恰到好處的反饋、提升操作感受、提供良好的視覺效果。

根據(jù)HubSpot的數(shù)據(jù)，作為營(yíng)銷和展示的視頻內(nèi)容和視頻元素在過去的2017年當(dāng)中有明顯的上升，平均每周有超過78%的用戶在線看視頻，而超過55%的用戶每天都在看視頻。視頻內(nèi)容正在成為大勢(shì)所趨。

10.現(xiàn)實(shí)增強(qiáng)技術(shù)

和對(duì)話式界面和語音交互一樣，現(xiàn)實(shí)增強(qiáng)技術(shù)為用戶提供了全新的、可用的交互方式。2018年將會(huì)是顯示增強(qiáng)技術(shù)爆發(fā)式增長(zhǎng)的一年，每個(gè)用戶的手機(jī)鏡頭都會(huì)成為和虛擬世界溝通的橋梁。

更容易實(shí)現(xiàn)的AR體驗(yàn)?zāi)壳癆R類應(yīng)用越來越多， Google等大型企業(yè)也都推出了AR設(shè)計(jì)的規(guī)范和相應(yīng)的素材，讓設(shè)計(jì)師和開發(fā)者可以設(shè)計(jì)出體驗(yàn)更好的AR類APP。娛樂用AR以Pokemon Go 為代表的AR類應(yīng)用，讓大家看到了AR在娛樂領(lǐng)域的巨大潛力。它不僅可以用作游戲，還能集成在各種應(yīng)用中，提供更具吸引力的用戶體驗(yàn)。用AR解決現(xiàn)實(shí)問題AR技術(shù)從誕生之日起就是為了應(yīng)對(duì)具體問題而存在的，諸如 AR Measure 這樣的應(yīng)用就是用來幫助用戶測(cè)量各種真實(shí)物體的尺寸而生的。

結(jié)語

界面視覺設(shè)計(jì)隨著技術(shù)的突飛猛進(jìn)也在不斷更新，特別是巨大移動(dòng)端市場(chǎng)，更是眾多視覺設(shè)計(jì)師需要研究的課題。從Android4.0到8.0的系統(tǒng)風(fēng)格解析手機(jī)界面視覺設(shè)計(jì)是為了掌握移動(dòng)端的最新設(shè)計(jì)資訊和前沿的研究方向，拋磚引玉。不僅在設(shè)計(jì)中感知規(guī)律并能靈活運(yùn)用到界面設(shè)計(jì)中去，更要做到秉承“以用戶為中心的設(shè)計(jì)”理念，應(yīng)用“以目標(biāo)為導(dǎo)向的設(shè)計(jì)”方法，進(jìn)行互聯(lián)網(wǎng)產(chǎn)品的視覺設(shè)計(jì)。

參考文獻(xiàn)：

[1]（美）雷迪·歐格. 信息設(shè)計(jì)[M]. 郭瑽， 譯. 北京： 譯林出版社， 2009.

[2]（美）庫爾特·考夫卡. 格式塔心理學(xué)原理[M]. 北京： 北京大學(xué)出版社， 2010.

[3]（美）諾曼·唐納德·A. 設(shè)計(jì)心理學(xué)[M]. 小柯， 譯. 北京：中信出版社， 2015.

[4]（美）魯?shù)婪颉ぐ⒍骱Ｄ?藝術(shù)與視知覺 [M].成都：四川人民出版社，1998.

注釋：

①維基百科https：//zh.wikipedia.org/

②安卓設(shè)計(jì)風(fēng)格規(guī)范

③格式塔理論在網(wǎng)頁界面設(shè)計(jì)中的運(yùn)用 王慧；-《藝術(shù)教育》-2007-06-01

④移動(dòng)設(shè)備應(yīng)用軟件交互界面設(shè)計(jì) 王鵬飛-《昆明理工大學(xué)碩士論文》2013-04

⑤Nexus 2016安卓7.0新桌面Launcher亮相 http：//app.techweb.com.cn/android/2016-08-03/2369400.shtml

⑥Android 8.0正式發(fā)布，盤點(diǎn)“奧利奧”九大新功能http：//www.vccoo.com/v/mz5625

基金項(xiàng)目：2014 年教育廳課題《基于移動(dòng)端的網(wǎng)絡(luò)界面視覺設(shè)計(jì)研究》（Y201432690）

作者簡(jiǎn)介：黃穎宜（1977—），女，浙江人，清華大學(xué)美術(shù)學(xué)院碩士，中國(guó)計(jì)量大學(xué)講師，主要研究方向?yàn)橐曈X傳達(dá)設(shè)計(jì)、互聯(lián)網(wǎng)環(huán)境下的UI界面設(shè)計(jì)和量化設(shè)計(jì)。