2011年涌現(xiàn)出諸多優(yōu)秀設(shè)計(jì)，隨著操作系統(tǒng)的更新和硬件性能的提升，用戶對(duì)移動(dòng)應(yīng)用的品質(zhì)需求也呈現(xiàn)上升趨勢(shì)，界面設(shè)計(jì)又被提升到一個(gè)新的高度。移動(dòng)應(yīng)用不再是將內(nèi)容從互聯(lián)網(wǎng)搬至移動(dòng)設(shè)備，而是解決設(shè)備本身的問(wèn)題，根據(jù)用戶需求從視覺(jué)感受、風(fēng)格趨勢(shì)、操作方式、信息架構(gòu)和內(nèi)容呈現(xiàn)等各個(gè)方面挖掘設(shè)計(jì)的可能性，為用戶帶來(lái)新穎的體驗(yàn)。
本文匯總今年熱門產(chǎn)品的界面設(shè)計(jì)，從中總結(jié)出未來(lái)一年需要重點(diǎn)關(guān)注的設(shè)計(jì)趨勢(shì)，供大家參考。
趨勢(shì)一：極簡(jiǎn)主義的應(yīng)用圖標(biāo)
從App Store的國(guó)外知名產(chǎn)品的設(shè)計(jì)動(dòng)態(tài)看， 啟動(dòng)軟件的圖標(biāo)設(shè)計(jì)正在趨近極簡(jiǎn)化風(fēng)格的設(shè)計(jì)。
極簡(jiǎn)主義風(fēng)格的設(shè)計(jì)，視覺(jué)表現(xiàn)的元素簡(jiǎ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)過(guò)1年多的產(chǎn)品升級(jí)版本迭代，此時(shí)的Gowalla的圖標(biāo)已經(jīng)是右邊效果圖，典型的極簡(jiǎn)主義應(yīng)用圖標(biāo)，簡(jiǎn)約美觀。
如下圖所示的path軟件的應(yīng)用圖標(biāo)設(shè)計(jì)，由原來(lái)的立體感的設(shè)計(jì)演變?yōu)闃O簡(jiǎn)的、相對(duì)扁平化微漸變的設(shè)計(jì)風(fēng)格。極簡(jiǎn)的應(yīng)用圖標(biāo)設(shè)計(jì)，背景色統(tǒng)一，突出品牌“P”，視覺(jué)上傳達(dá)給用戶一種十足的品質(zhì)感。
又如入圍2011最佳產(chǎn)品工具類排行的百度搜索，應(yīng)用圖標(biāo)的設(shè)計(jì)也趨向極簡(jiǎn)主義設(shè)計(jì)風(fēng)格。由原來(lái)的相對(duì)具象的圖形表現(xiàn)方式向極簡(jiǎn)主義的設(shè)計(jì)風(fēng)格趨近,從視覺(jué)傳達(dá)的角度，提升了應(yīng)用圖標(biāo)的整體感和品質(zhì)感。
趨勢(shì)二：適配多樣化的分辨率
回顧過(guò)去幾年，從智能手機(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ū)⒏嗟目紤]高分辨率的顯示效果。
試想我們?cè)谠O(shè)計(jì)一款應(yīng)用軟件的界面時(shí)，需要同時(shí)照顧到多種分辨率手機(jī)用戶，并不是一件非常容易把握的事情。密切關(guān)注移動(dòng)硬件市場(chǎng)情況，了解適配多樣化硬件分辨率的手機(jī)用戶的使用習(xí)慣，分析多樣化分辨率界面設(shè)計(jì)的方法，也是2012年我們?cè)O(shè)計(jì)師需要關(guān)注和研究的趨勢(shì)之一。
趨勢(shì)三：平面化的視覺(jué)風(fēng)格
自WP7使用Metro風(fēng)格之后，Windows8為代表的界面會(huì)將這種新興設(shè)計(jì)風(fēng)格推向主流，Metro的特點(diǎn)就是簡(jiǎn)潔與直觀，沒(méi)有過(guò)分華麗的炫目背景與精致的功能圖標(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ì)，簡(jiǎn)約而華麗的設(shè)計(jì)給用戶帶來(lái)了全新的視覺(jué)體驗(yàn)，強(qiáng)化Metro統(tǒng)一的品牌感。如下圖：
除此之外，Android 4.0系統(tǒng)的視覺(jué)設(shè)計(jì)風(fēng)格也整體趨向平面化、格子風(fēng)趨勢(shì)。android 4.0系統(tǒng)的視覺(jué)設(shè)計(jì)，放棄了原有的設(shè)計(jì)風(fēng)格，整體正在向平面化、格子風(fēng)的設(shè)計(jì)方向進(jìn)化。雖然沒(méi)有那么強(qiáng)烈的Metro設(shè)計(jì)風(fēng)格，但是這足以可以體現(xiàn)Metro風(fēng)格的影響力。如下圖所示：
平面化、格子風(fēng)正在流行，并正在影響著眾多的移動(dòng)應(yīng)用的視覺(jué)設(shè)計(jì)，但未來(lái)移動(dòng)應(yīng)用不會(huì)嚴(yán)格遵從官方的標(biāo)準(zhǔn)，在此基礎(chǔ)上將衍生出更多的創(chuàng)新設(shè)計(jì)，豐富這一設(shè)計(jì)風(fēng)格。
趨勢(shì)四：越來(lái)越豐富的動(dòng)效
動(dòng)效設(shè)計(jì)和交互視覺(jué)都息息相關(guān)，是一種動(dòng)態(tài)的交互行為的用戶反饋。優(yōu)秀的動(dòng)效設(shè)計(jì)，能夠增加用戶交互的親和力和趣味性，提升產(chǎn)品的用戶體驗(yàn)。動(dòng)效會(huì)被越來(lái)越多的平臺(tái)軟件應(yīng)用，智能手機(jī)硬件的提升，給動(dòng)效體驗(yàn)設(shè)計(jì)帶來(lái)了展示的機(jī)會(huì)，給軟件產(chǎn)品的用戶體驗(yàn)升級(jí)提供了更大的空間。
如上圖是韓國(guó)Naver的一款看房地圖的軟件，它采用了放大收縮的動(dòng)效。用戶點(diǎn)擊地圖后，地圖本身放大，然后轉(zhuǎn)入街景界面；用戶關(guān)閉街景時(shí)，采用收縮的動(dòng)效還原到地圖界面。這一細(xì)節(jié)的動(dòng)效設(shè)計(jì)，給用戶一種酷炫的感覺(jué)，同時(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ǔ)充了視覺(jué)，恰當(dāng)?shù)倪\(yùn)用動(dòng)效能夠提升產(chǎn)品的用戶體驗(yàn)。
趨勢(shì)五：電影化的開場(chǎng)界面
好的開場(chǎng)是成功的一半，越來(lái)越多的應(yīng)用會(huì)采用動(dòng)態(tài)的全景照片作為自己的開場(chǎng)界面，或者采用高保真的圖片作為應(yīng)用的首屏壁紙。這種斑斕艷麗的視覺(jué)效果，為應(yīng)用爭(zhēng)得了良好的第一印象，讓應(yīng)用變得更加的生動(dòng)和迷人。
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)到艷麗多彩的視覺(jué)沖擊。
中文攝影雜志PhotoMagazine的開場(chǎng)，則像是一場(chǎng)精心炮制的剪切動(dòng)畫，多個(gè)鏡頭依次出現(xiàn)在屏幕上，一張張美麗的攝影照片襯托出鮮艷的人像和風(fēng)景，讓攝影雜志的文藝氣息深入人心。電影化的啟動(dòng)界面，可以直接提升用戶對(duì)產(chǎn)品的好感度但也要考慮到多張圖片的大小，及動(dòng)畫效果加載效率的問(wèn)題。
趨勢(shì)六：合理的用戶引導(dǎo)
由于手機(jī)界面的承載能力有限，產(chǎn)品功能的不斷膨脹，必須要在用戶打開應(yīng)用之后告知他某些新奇的功能，引導(dǎo)他完成某些主要任務(wù)流程，讓用戶不至于迷失在陌生應(yīng)用中不知所措。幫助用戶快速掌握應(yīng)用的使用方法，體驗(yàn)到應(yīng)用的樂(lè)趣，新手引導(dǎo)成了一個(gè)必須考慮的設(shè)計(jì)環(huán)節(jié)。
Foursquare和Gowalla會(huì)在合適的時(shí)機(jī)，提醒你可以執(zhí)行某個(gè)操作。某個(gè)按鈕挪了位置，快速去添加好友，開始簽到并與好友分享圖片。通過(guò)這樣一種Tips告知的形式，讓用戶關(guān)注到系統(tǒng)的狀態(tài)，引導(dǎo)用戶可以繼續(xù)走向哪里，可以啟動(dòng)很好的幫助用戶熟悉應(yīng)用的作用。
用戶引導(dǎo)的直接目標(biāo)是幫助用戶更好的使用產(chǎn)品，終極目標(biāo)是提升用戶滿意度。雖然，大多數(shù)情況下，我們可以通過(guò)合理的設(shè)計(jì)，盡可能的簡(jiǎn)化功能，讓用戶無(wú)需引導(dǎo)和幫助，就可以完成必要的任務(wù)。但是實(shí)際上，手機(jī)產(chǎn)品的限制和對(duì)強(qiáng)大功能的追求，導(dǎo)致這個(gè)目標(biāo)很難達(dá)到，因此越來(lái)越多的應(yīng)用開始使用用戶引導(dǎo)來(lái)幫助用戶快速熟悉產(chǎn)品。
趨勢(shì)七：突出顯示的主要功能
產(chǎn)品的定位和核心功能決定了主界面的布局，對(duì)于不同信息架構(gòu)的產(chǎn)品，主界面會(huì)有很大的不同，但是如何使產(chǎn)品從同類產(chǎn)品的相似界面中脫穎而出呢？答案是：專注。
對(duì)于秉承了“開啟即用”設(shè)計(jì)策略的移動(dòng)應(yīng)用來(lái)說(shuō)，多而全的功能點(diǎn)和復(fù)雜的應(yīng)用結(jié)構(gòu)并不適用。從主界面點(diǎn)擊超過(guò)三次才能操作的功能被使用機(jī)率則非常低，普通用戶不會(huì)樂(lè)于使用深層界面被掩藏的功能
同樣，也有數(shù)據(jù)表明，在界面上突出某項(xiàng)功能的視覺(jué)特征，會(huì)提高用戶使用該功能的機(jī)率；對(duì)具有“利用碎片化時(shí)間”和“顯示區(qū)域較小”特征的移動(dòng)應(yīng)用來(lái)說(shuō)，讓用戶在多個(gè)功能按鈕中進(jìn)行選擇，也會(huì)成為影響用戶體驗(yàn)的因素。
因此，一定要找出產(chǎn)品的核心功能，并在主界面上突出顯示。
integram是一個(gè)以圖片為媒介的垂直化社交網(wǎng)絡(luò)，對(duì)這個(gè)產(chǎn)品來(lái)說(shuō)，圖片只是作為載體的形式出現(xiàn)，核心價(jià)值是通過(guò)分享建立的朋友關(guān)系。所以在產(chǎn)品的主界面上，將“share”按鈕的樣式區(qū)分于其他標(biāo)簽，突出顯示核心功能。
拍照和簽到類應(yīng)用中，在標(biāo)簽欄突出主要功能，主要功能的使用率也是衡量產(chǎn)品交互的重要指標(biāo)。
另一個(gè)影響視覺(jué)設(shè)計(jì)的因素是：設(shè)計(jì)的重點(diǎn)與單個(gè)功能的使用率。
在UGC模式的拍照和簽到類應(yīng)用中，從用戶處得到內(nèi)容是設(shè)計(jì)中的難點(diǎn)，而“拍照”則是使用率較高的功能，所以在標(biāo)簽欄的視覺(jué)設(shè)計(jì)上突出“拍照功能”。
趨勢(shì)八：隱藏的側(cè)邊欄菜單
部分移動(dòng)應(yīng)用由于發(fā)展時(shí)間比較長(zhǎng)，已經(jīng)變得有些“臃腫”，默認(rèn)的五個(gè)標(biāo)簽欄已經(jīng)滿足不了架構(gòu)需求。類似Pad的側(cè)邊欄越來(lái)越多出現(xiàn)在手機(jī)界面設(shè)計(jì)，有助于減少界面的層級(jí)關(guān)系，充分利用顯示空間，或者讓目錄型數(shù)據(jù)便于在較低分辨率的界面中操作。
Facebook&Path
如果返回上一級(jí)才能跳轉(zhuǎn)頁(yè)面，會(huì)極大的增加用戶查找信息的難度，使用側(cè)邊欄可以讓應(yīng)用的架構(gòu)更為清晰。
側(cè)邊欄可以保證視覺(jué)的穩(wěn)定性，如果和界面操作不沖突的話，可以依靠左右滑動(dòng)手勢(shì)調(diào)出側(cè)邊欄，提示操作效率。側(cè)邊欄也可以放置操作按鈕，但可能會(huì)導(dǎo)致界面看起來(lái)顯得擁擠，更多的側(cè)邊欄樣式及應(yīng)用場(chǎng)景還需要設(shè)計(jì)師不斷地進(jìn)行嘗試。
側(cè)邊欄也是手機(jī)界面架構(gòu)的一種新方式，容納更多的功能，同時(shí)要保證界面層級(jí)關(guān)系清晰。
趨勢(shì)九：革命性的語(yǔ)音交互
設(shè)備硬件為取代其他終端產(chǎn)品和實(shí)現(xiàn)新穎的功能提供了技術(shù)基礎(chǔ)，用戶與設(shè)備之間的交互方式不僅局限受觸摸屏，語(yǔ)音和拍攝在2011年的移動(dòng)應(yīng)用中發(fā)揮了巨大的作用，促成微信和instagram等熱門產(chǎn)品。
Siri被譽(yù)為革命性產(chǎn)品，不管其是否夸大其詞，它成功將語(yǔ)音交互引入到移動(dòng)設(shè)備中，比起語(yǔ)音命令更為智能，賦予它人性化的特征。語(yǔ)音可以用來(lái)操作界面、發(fā)起搜索和輸入內(nèi)容，但整個(gè)操作過(guò)程中像是與人對(duì)話，一定程度上降低的學(xué)習(xí)成本，同時(shí)讓應(yīng)用富有情感化。
百度手機(jī)瀏覽器Android率先引入語(yǔ)音搜索，目的也是解放雙手，提供更為自然的操作方式。語(yǔ)音交互比起單純的觸摸更難設(shè)計(jì)，除了要解決最基本的識(shí)別性問(wèn)題，還需要交互輔助解決識(shí)別率和使用環(huán)境嘈雜等問(wèn)題。
語(yǔ)聊可能是今年最火的功能，音頻讓用戶溝通更為方便，在此基礎(chǔ)之上還能衍生出更豐富的語(yǔ)音交互方式，比如語(yǔ)音表情、網(wǎng)絡(luò)電話和視頻電話等等。
語(yǔ)音輸入是語(yǔ)音識(shí)別的基礎(chǔ)應(yīng)用，技術(shù)基本成熟，2012年有望廣泛實(shí)現(xiàn)在手機(jī)的輸入法中，為用戶的輸入方式帶來(lái)便利。
新穎的交互技術(shù)必然還會(huì)存在各種缺陷，需要交互設(shè)計(jì)發(fā)揮自身設(shè)計(jì)優(yōu)勢(shì)，充分利用技術(shù)的優(yōu)點(diǎn)，盡量避免技術(shù)不成熟引發(fā)的體驗(yàn)問(wèn)題，一定程序上也是促進(jìn)技術(shù)的發(fā)展。
趨勢(shì)十：演變中的手勢(shì)操作
以N9為代表，滑動(dòng)手勢(shì)取代Home鍵，進(jìn)入多任務(wù)、功能列表還是應(yīng)用程序，都可以使用滑動(dòng)手勢(shì)操作?；瑒?dòng)操作將非常頻繁地出現(xiàn)在觸摸屏操作中，設(shè)計(jì)中使用滑動(dòng)手勢(shì)取代點(diǎn)擊有諸多優(yōu)點(diǎn)，比如避免點(diǎn)擊區(qū)域?qū)е碌恼`操作問(wèn)題、提升操作效率、隱藏控件并節(jié)約顯示空間等，百度手機(jī)輸入法獨(dú)創(chuàng)的滑動(dòng)輸入也是早期手勢(shì)操作的代表性案例。
N9手機(jī)
取締按鍵是未來(lái)手機(jī)的必然趨勢(shì)，滑動(dòng)手勢(shì)會(huì)發(fā)揮更大的作用。
iPhone版Flipboard向上滑動(dòng)實(shí)現(xiàn)翻頁(yè)，不過(guò)效果過(guò)于強(qiáng)烈，視覺(jué)上并不連貫，但也是滑動(dòng)手勢(shì)在移動(dòng)應(yīng)用中嘗試性設(shè)計(jì)?；瑒?dòng)手勢(shì)不但可以用來(lái)操作平級(jí)界面之間的跳轉(zhuǎn)，也能用來(lái)作為進(jìn)入上下級(jí)界面的操作方式。
百度手機(jī)瀏覽器WP7版獨(dú)創(chuàng)單指滑動(dòng)工具欄可以縮放頁(yè)面，隨意控制頁(yè)面比例，未來(lái)還會(huì)有更多的手勢(shì)應(yīng)用在常用界面中。還是瀏覽器利用兩指滑動(dòng)新建界面或者進(jìn)入其他多標(biāo)簽頁(yè)，將滑動(dòng)手勢(shì)定義為快捷操作，為高級(jí)用戶提高了操作效率。同時(shí)注意引導(dǎo)用戶學(xué)習(xí)特有的手勢(shì)操作，有助于提升用戶對(duì)于應(yīng)用的使用粘度。
結(jié)語(yǔ)
研究設(shè)計(jì)趨勢(shì)是為了掌握的設(shè)計(jì)資訊和前沿的研究方向，從眾多設(shè)計(jì)中感知規(guī)律并能靈活運(yùn)用到自己的設(shè)計(jì)當(dāng)中，甚至是引領(lǐng)設(shè)計(jì)潮流，這也是創(chuàng)新設(shè)計(jì)的必備要素。