從安卓4.0到8.0探析手機界面的視覺設(shè)計趨勢

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

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

引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 明亮與漸變色

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

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

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

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

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

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

6. 多主題性——個性化

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

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

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

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

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

7. 文字型多彩圖標與表情

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

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

8. 視覺的平面化——柵格風正在8.0中演繹

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

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

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

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

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

10.現(xiàn)實增強技術(shù)

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

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

結(jié)語

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

參考文獻：

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

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

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

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

注釋：

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

②安卓設(shè)計風格規(guī)范

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

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

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

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

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

作者簡介：黃穎宜（1977—），女，浙江人，清華大學美術(shù)學院碩士，中國計量大學講師，主要研究方向為視覺傳達設(shè)計、互聯(lián)網(wǎng)環(huán)境下的UI界面設(shè)計和量化設(shè)計。