[[56319]]

2011年涌現(xiàn)出諸多優(yōu)秀設(shè)計(jì)，隨著操作系統(tǒng)的更新和硬件性能的提升，用戶對移動(dòng)應(yīng)用的品質(zhì)需求也呈現(xiàn)上升趨勢，界面設(shè)計(jì)又被提升到一個(gè)新的高度。 移動(dòng)應(yīng)用不再是將內(nèi)容從互聯(lián)網(wǎng)搬至移動(dòng)設(shè)備，而是解決設(shè)備本身的問題，根據(jù)用戶需求從視覺感受、風(fēng)格趨勢、操作方式、信息架構(gòu)和內(nèi)容呈現(xiàn)等各個(gè)方面挖掘設(shè) 計(jì)的可能性，為用戶帶來新穎的體驗(yàn)。

本文匯總今年熱門產(chǎn)品的界面設(shè)計(jì)，從中總結(jié)出未來一年需要重點(diǎn)關(guān)注的設(shè)計(jì)趨勢，供大家參考。

趨勢一：極簡主義的應(yīng)用圖標(biāo)

從App Store的國外知名產(chǎn)品的設(shè)計(jì)動(dòng)態(tài)看， 啟動(dòng)軟件的圖標(biāo)設(shè)計(jì)正在趨近極簡化風(fēng)格的設(shè)計(jì)。

極簡主義風(fēng)格的設(shè)計(jì)，視覺表現(xiàn)的元素簡約，能夠讓用戶快速的記憶應(yīng)用類產(chǎn)品。LBS產(chǎn)品Gowalla ，在2010年初時(shí)候的應(yīng)用圖標(biāo)如下圖左效果，應(yīng)用圖標(biāo)呈現(xiàn)為復(fù)雜的袋鼠造型和GO字母的結(jié)合體，表現(xiàn)元素造型復(fù)雜；經(jīng)過1年多的產(chǎn)品升級(jí)版本迭代，此時(shí) 的Gowalla的圖標(biāo)已經(jīng)是右邊效果圖，典型的極簡主義應(yīng)用圖標(biāo)，簡約美觀。

如下圖所示的path軟件的應(yīng)用圖標(biāo)設(shè)計(jì)，由原來的立體感的設(shè)計(jì)演變?yōu)闃O簡的、相對扁平化微漸變的設(shè)計(jì)風(fēng)格。極簡的應(yīng)用圖標(biāo)設(shè)計(jì)，背景色統(tǒng)一，突出品牌“P”，視覺上傳達(dá)給用戶一種十足的品質(zhì)感。

又如入圍2011***產(chǎn)品工具類排行的百度搜索，應(yīng)用圖標(biāo)的設(shè)計(jì)也趨向極簡主義設(shè)計(jì)風(fēng)格。由原來的相對具象的圖形表現(xiàn)方式向極簡主義的設(shè)計(jì)風(fēng)格趨近,從視覺傳達(dá)的角度，提升了應(yīng)用圖標(biāo)的整體感和品質(zhì)感。

#p#

趨勢二：適配多樣化的分辨率

回顧過去幾年，從智能手機(jī)發(fā)展初始階段的240×320的分辨率手機(jī)，到目前主流的480×800的分辨率手機(jī)，手機(jī)的分辨率呈現(xiàn)多樣化并向高精度發(fā)展，目前Galaxy Nexus的分辨率甚至達(dá)到了1280×720，所以屏幕適配性是衡量操作系統(tǒng)的重要指標(biāo)之一。

Android3.0之后重要的改進(jìn)就是增強(qiáng)了適配性，平面化的圖形便于橫向拉伸，分辨率增大時(shí)，頂部可以由兩欄合并為一欄，手機(jī)和平板可以使用同一個(gè)程序，所以應(yīng)用程序?qū)⒏嗟目紤]高分辨率的顯示效果。

試想我們在設(shè)計(jì)一款應(yīng)用軟件的界面時(shí)，需要同時(shí)照顧到多種分辨率手機(jī)用戶，并不是一件非常容易把握的事情。密切關(guān)注移動(dòng)硬件市場情況，了解適配多樣化硬件分辨率的手機(jī)用戶的使用習(xí)慣，分析多樣化分辨率界面設(shè)計(jì)的方法，也是2012年我們設(shè)計(jì)師需要關(guān)注和研究的趨勢之一。#p#

趨勢三：平面化的視覺風(fēng)格

自WP7使用Metro風(fēng)格之后，Windows8為代表的界面會(huì)將這種新興設(shè)計(jì)風(fēng)格推向主流，Metro的特點(diǎn)就是簡潔與直觀，沒有過分華麗的炫目背景與精致的功能圖標(biāo)。

除了windows 8的設(shè)計(jì)外，X box360等產(chǎn)品也在使用這種設(shè)計(jì)風(fēng)格，界面風(fēng)格設(shè)計(jì)也呈現(xiàn)平面化、格子風(fēng)的設(shè)計(jì)趨勢，簡約而華麗的設(shè)計(jì)給用戶帶來了全新的視覺體驗(yàn)，強(qiáng)化Metro統(tǒng)一的品牌感。如下圖：

除此之外，Android 4.0系統(tǒng)的視覺設(shè)計(jì)風(fēng)格也整體趨向平面化、格子風(fēng)趨勢。android 4.0系統(tǒng)的視覺設(shè)計(jì)，放棄了原有的設(shè)計(jì)風(fēng)格，整體正在向平面化、格子風(fēng)的設(shè)計(jì)方向進(jìn)化。雖然沒有那么強(qiáng)烈的Metro設(shè)計(jì)風(fēng)格，但是這足以可以體現(xiàn) Metro風(fēng)格的影響力。如下圖所示：

平面化、格子風(fēng)正在流行，并正在影響著眾多的移動(dòng)應(yīng)用的視覺設(shè)計(jì)，但未來移動(dòng)應(yīng)用不會(huì)嚴(yán)格遵從官方的標(biāo)準(zhǔn)，在此基礎(chǔ)上將衍生出更多的創(chuàng)新設(shè)計(jì)，豐富這一設(shè)計(jì)風(fēng)格。#p#

趨勢四：越來越豐富的動(dòng)效

動(dòng)效設(shè)計(jì)和交互視覺都息息相關(guān)，是一種動(dòng)態(tài)的交互行為的用戶反饋特效。優(yōu)秀的動(dòng)效設(shè)計(jì)，能夠增加用戶交互的親和力和趣味性，提升產(chǎn)品的用戶體驗(yàn)。動(dòng) 效會(huì)被越來越多的平臺(tái)軟件應(yīng)用，智能手機(jī)硬件的提升，給動(dòng)效體驗(yàn)設(shè)計(jì)帶來了展示的機(jī)會(huì)，給軟件產(chǎn)品的用戶體驗(yàn)升級(jí)提供了更大的空間。

如上圖是韓國Naver的一款看房地圖的軟件，它采用了放大收縮的動(dòng)效。用戶點(diǎn)擊地圖后，地圖本身放大，然后轉(zhuǎn)入街景界面；用戶關(guān)閉街景時(shí)，采用收縮的動(dòng)效還原到地圖界面。這一細(xì)節(jié)的動(dòng)效設(shè)計(jì)，給用戶一種酷炫的感覺，同時(shí)增強(qiáng)了界面間變化的連貫性。

如上圖的Path左下角的動(dòng)效設(shè)計(jì)，這已經(jīng)成為2011年代表性的設(shè)計(jì)。此軟件多處用到了動(dòng)效，用的恰到好處，為產(chǎn)品贏得了良好的用戶口碑，為產(chǎn)品在短時(shí)間類增加了大量的用戶。

另外，在PC端的動(dòng)效已經(jīng)在Metro設(shè)計(jì)中廣泛運(yùn)用，參見蘋果電腦酷炫的動(dòng)效體驗(yàn)設(shè)計(jì)可以贏得用戶的欽賴。動(dòng)效設(shè)計(jì)豐富了交互，補(bǔ)充了視覺，恰當(dāng)?shù)倪\(yùn)用動(dòng)效能夠提升產(chǎn)品的用戶體驗(yàn)。#p#

趨勢五：電影化的開場界面

好的開場是成功的一半，越來越多的應(yīng)用會(huì)采用動(dòng)態(tài)的全景照片作為自己的開場界面，或者采用高保真的圖片作為應(yīng)用的首屏壁紙。這種斑斕艷麗的視覺效果，為應(yīng)用爭得了良好的***印象，讓應(yīng)用變得更加的生動(dòng)和迷人。

[[56328]]

Flipboard是一個(gè)華麗的閱讀產(chǎn)品，最開始推出的是iPad版，目前已經(jīng)推出了iPhone版，它讓你在手機(jī)上也能擁有雜志一般的閱讀體驗(yàn)。 Flipboard在iPhone版本上，推出了封面故事功能，將熱點(diǎn)的新聞和圖片，直接在封面上展示。用戶還可以詳細(xì)定制出現(xiàn)在封面故事上的內(nèi)容，當(dāng)然 你也可以關(guān)閉它。

iPhone版Flickr客戶端啟動(dòng)之后，就是一系列高精度圖片的動(dòng)態(tài)輪播，讓你體驗(yàn)到艷麗多彩的視覺沖擊。

中文攝影雜志PhotoMagazine的開場，則像是一場精心炮制的剪切動(dòng)畫，多個(gè)鏡頭依次出現(xiàn)在屏幕上，一張張美麗的攝影照片襯托出鮮艷的人像 和風(fēng)景，讓攝影雜志的文藝氣息深入人心。電影化的啟動(dòng)界面，可以直接提升用戶對產(chǎn)品的好感度但也要考慮到多張圖片的大小，及動(dòng)畫效果加載效率的問題。#p#

趨勢六：合理的用戶引導(dǎo)

由于手機(jī)界面的承載能力有限，產(chǎn)品功能的不斷膨脹，必須要在用戶打開應(yīng)用之后告知他某些新奇的功能，引導(dǎo)他完成某些主要任務(wù)流程，讓用戶不至于迷失在陌生應(yīng)用中不知所措。幫助用戶快速掌握應(yīng)用的使用方法，體驗(yàn)到應(yīng)用的樂趣，新手引導(dǎo)成了一個(gè)必須考慮的設(shè)計(jì)環(huán)節(jié)。

Tweebot會(huì)在程序剛啟動(dòng)的時(shí)候，用簡短的幾頁介紹，告訴你應(yīng)用程序的高級(jí)使用技巧，一些隱藏的功能可以讓你更方便快捷的執(zhí)行操作，比如雙擊查看詳情，長按喚出操作，向右滑動(dòng)查看對話歷史，長按標(biāo)簽欄可以自定義標(biāo)簽內(nèi)容。

Foursquare和Gowalla會(huì)在合適的時(shí)機(jī)，提醒你可以執(zhí)行某個(gè)操作。某個(gè)按鈕挪了位置，快速去添加好友，開始簽到并與好友分享圖片。通過這樣一種Tips告知的形式，讓用戶關(guān)注到系統(tǒng)的狀態(tài)，引導(dǎo)用戶可以繼續(xù)走向哪里，可以啟動(dòng)很好的幫助用戶熟悉應(yīng)用的作用。

用戶引導(dǎo)的直接目標(biāo)是幫助用戶更好的使用產(chǎn)品，***目標(biāo)是提升用戶滿意度。雖然，大多數(shù)情況下，我們可以通過合理的設(shè)計(jì)，盡可能的簡化功能，讓用戶 無需引導(dǎo)和幫助，就可以完成必要的任務(wù)。但是實(shí)際上，手機(jī)產(chǎn)品的限制和對強(qiáng)大功能的追求，導(dǎo)致這個(gè)目標(biāo)很難達(dá)到，因此越來越多的應(yīng)用開始使用用戶引導(dǎo)來幫 助用戶快速熟悉產(chǎn)品。#p#

趨勢七：突出顯示的主要功能

產(chǎn)品的定位和核心功能決定了主界面的布局，對于不同信息架構(gòu)的產(chǎn)品，主界面會(huì)有很大的不同，但是如何使產(chǎn)品從同類產(chǎn)品的相似界面中脫穎而出呢？答案是：專注。

對于秉承了“開啟即用”設(shè)計(jì)策略的移動(dòng)應(yīng)用來說，多而全的功能點(diǎn)和復(fù)雜的應(yīng)用結(jié)構(gòu)并不適用。從主界面點(diǎn)擊超過三次才能操作的功能被使用機(jī)率則非常低，普通用戶不會(huì)樂于使用深層界面被掩藏的功能

同樣，也有數(shù)據(jù)表明，在界面上突出某項(xiàng)功能的視覺特征，會(huì)提高用戶使用該功能的機(jī)率；對具有“利用碎片化時(shí)間”和“顯示區(qū)域較小”特征的移動(dòng)應(yīng)用來說，讓用戶在多個(gè)功能按鈕中進(jìn)行選擇，也會(huì)成為影響用戶體驗(yàn)的因素。

因此，一定要找出產(chǎn)品的核心功能，并在主界面上突出顯示。

integram是一個(gè)以圖片為媒介的垂直化社交網(wǎng)絡(luò)，對這個(gè)產(chǎn)品來說，圖片只是作為載體的形式出現(xiàn)，核心價(jià)值是通過分享建立的朋友關(guān)系。所以在產(chǎn)品的主界面上，將“share”按鈕的樣式區(qū)分于其他標(biāo)簽，突出顯示核心功能。

拍照和簽到類應(yīng)用中，在標(biāo)簽欄突出主要功能，主要功能的使用率也是衡量產(chǎn)品交互的重要指標(biāo)。

另一個(gè)影響視覺設(shè)計(jì)的因素是：設(shè)計(jì)的重點(diǎn)與單個(gè)功能的使用率。

在UGC模式的拍照和簽到類應(yīng)用中，從用戶處得到內(nèi)容是設(shè)計(jì)中的難點(diǎn)，而“拍照”則是使用率較高的功能，所以在標(biāo)簽欄的視覺設(shè)計(jì)上突出“拍照功能”。#p#

趨勢八：隱藏的側(cè)邊欄菜單

部分移動(dòng)應(yīng)用由于發(fā)展時(shí)間比較長，已經(jīng)變得有些“臃腫”，默認(rèn)的五個(gè)標(biāo)簽欄已經(jīng)滿足不了架構(gòu)需求。類似Pad的側(cè)邊欄越來越多出現(xiàn)在手機(jī)界面設(shè)計(jì)，有助于減少界面的層級(jí)關(guān)系，充分利用顯示空間，或者讓目錄型數(shù)據(jù)便于在較低分辨率的界面中操作。

Facebook&Path

如果返回上一級(jí)才能跳轉(zhuǎn)頁面，會(huì)極大的增加用戶查找信息的難度，使用側(cè)邊欄可以讓應(yīng)用的架構(gòu)更為清晰。

側(cè)邊欄可以保證視覺的穩(wěn)定性，如果和界面操作不沖突的話，可以依靠左右滑動(dòng)手勢調(diào)出側(cè)邊欄，提示操作效率。側(cè)邊欄也可以放置操作按鈕，但可能會(huì)導(dǎo)致界面看起來顯得擁擠，更多的側(cè)邊欄樣式及應(yīng)用場景還需要設(shè)計(jì)師不斷地進(jìn)行嘗試。

側(cè)邊欄也是手機(jī)界面架構(gòu)的一種新方式，容納更多的功能，同時(shí)要保證界面層級(jí)關(guān)系清晰。#p#

趨勢九：革命性的語音交互

設(shè)備硬件為取代其他終端產(chǎn)品和實(shí)現(xiàn)新穎的功能提供了技術(shù)基礎(chǔ)，用戶與設(shè)備之間的交互方式不僅局限受觸摸屏，語音和拍攝在2011年的移動(dòng)應(yīng)用中發(fā)揮了巨大的作用，促成微信和instagram等熱門產(chǎn)品。

[[56332]]

Siri被譽(yù)為革命性產(chǎn)品，不管其是否夸大其詞，它成功將語音交互引入到移動(dòng)設(shè)備中，比起語音命令更為智能，賦予它人性化的特征。語音可以用來操作界面、發(fā)起搜索和輸入內(nèi)容，但整個(gè)操作過程中像是與人對話，一定程度上降低的學(xué)習(xí)成本，同時(shí)讓應(yīng)用富有情感化。

百度手機(jī)瀏覽器Android率先引入語音搜索，目的也是解放雙手，提供更為自然的操作方式。語音交互比起單純的觸摸更難設(shè)計(jì)，除了要解決最基本的識(shí)別性問題，還需要交互輔助解決識(shí)別率和使用環(huán)境嘈雜等問題。

語聊可能是今年最火的功能，音頻讓用戶溝通更為方便，在此基礎(chǔ)之上還能衍生出更豐富的語音交互方式，比如語音表情、網(wǎng)絡(luò)電話和視頻電話等等。

語音輸入是語音識(shí)別的基礎(chǔ)應(yīng)用，技術(shù)基本成熟，2012年有望廣泛實(shí)現(xiàn)在手機(jī)的輸入法中，為用戶的輸入方式帶來便利。

新穎的交互技術(shù)必然還會(huì)存在各種缺陷，需要交互設(shè)計(jì)發(fā)揮自身設(shè)計(jì)優(yōu)勢，充分利用技術(shù)的優(yōu)點(diǎn)，盡量避免技術(shù)不成熟引發(fā)的體驗(yàn)問題，一定程序上也是促進(jìn)技術(shù)的發(fā)展。#p#

趨勢十：演變中的手勢操作

以N9為代表，滑動(dòng)手勢取代Home鍵，進(jìn)入多任務(wù)、功能列表還是應(yīng)用程序，都可以使用滑動(dòng)手勢操作。滑動(dòng)操作將非常頻繁地出現(xiàn)在觸摸屏操作中，設(shè) 計(jì)中使用滑動(dòng)手勢取代點(diǎn)擊有諸多優(yōu)點(diǎn)，比如避免點(diǎn)擊區(qū)域?qū)е碌恼`操作問題、提升操作效率、隱藏控件并節(jié)約顯示空間等，百度手機(jī)輸入法***的滑動(dòng)輸入也是早 期手勢操作的代表性案例。

N9手機(jī)

取締按鍵是未來手機(jī)的必然趨勢，滑動(dòng)手勢會(huì)發(fā)揮更大的作用。

iPhone版Flipboard向上滑動(dòng)實(shí)現(xiàn)翻頁，不過效果過于強(qiáng)烈，視覺上并不連貫，但也是滑動(dòng)手勢在移動(dòng)應(yīng)用中嘗試性設(shè)計(jì)。滑動(dòng)手勢不但可以用來操作平級(jí)界面之間的跳轉(zhuǎn)，也能用來作為進(jìn)入上下級(jí)界面的操作方式。

百度手機(jī)瀏覽器WP7版***單指滑動(dòng)工具欄可以縮放頁面，隨意控制頁面比例，未來還會(huì)有更多的手勢應(yīng)用在常用界面中。還是瀏覽器利用兩指滑動(dòng)新建界 面或者進(jìn)入其他多標(biāo)簽頁，將滑動(dòng)手勢定義為快捷操作，為高級(jí)用戶提高了操作效率。同時(shí)注意引導(dǎo)用戶學(xué)習(xí)特有的手勢操作，有助于提升用戶對于應(yīng)用的使用粘 度。#p#

結(jié)語

研究設(shè)計(jì)趨勢是為了掌握***的設(shè)計(jì)資訊和前沿的研究方向，從眾多設(shè)計(jì)中感知規(guī)律并能靈活運(yùn)用到自己的設(shè)計(jì)當(dāng)中，甚至是***設(shè)計(jì)潮流，這也是創(chuàng)新設(shè)計(jì)的必備要素。