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