2014年移動應(yīng)用交互設(shè)計10大趨勢

2014-11-06 09:50:36來源:百度MUX作者:

2014年,又有哪些新的設(shè)計趨勢脫穎而出呢? 百度MUX有一群關(guān)注趨勢的小伙伴,從大量的APP中去發(fā)現(xiàn)設(shè)計范式,挖掘設(shè)計趨勢,預(yù)測出2014年在移動產(chǎn)品中會被廣泛應(yīng)用的十大交互設(shè)計趨勢。希望這些新穎的設(shè)計模式,為設(shè)計師們帶來創(chuàng)新設(shè)計靈感,進(jìn)而為用戶帶來新鮮有趣的體驗(yàn)。

5 精細(xì)的視差效果(FINE PARALLAXF EFFECT)

視差是指讓多層背景以不同的速度移動,形成立體的運(yùn)動效果,帶來非常出色的感官體驗(yàn)。視差動效在網(wǎng)站中應(yīng)用不少了,在移動應(yīng)用中,除了一些讓人眼前一亮的新手引導(dǎo)頁,還有一些精細(xì)的視差效果應(yīng)用也能給我們帶來錯落有致的新鮮體驗(yàn)。

視差效果的應(yīng)用需要橫向考慮哪些是前景,哪些是背景元素,考慮在滾動的過程中狀態(tài)的停留和過程中的效果呈現(xiàn)。

\
CORSSFADER

CORSSFADER/ IFTTT/ HUE產(chǎn)品都采用了精細(xì)化的視差設(shè)計,效果非常吸引人。

\
App Flow

微視差的設(shè)計,App Flow在從圖文結(jié)構(gòu)向文字轉(zhuǎn)換閱覽體驗(yàn)的過程中,標(biāo)簽前景、圖片背景、底部文字區(qū)域部分在滾動過程中速度均不相同,呈現(xiàn)錯落有致的效果,并且前景標(biāo)簽的形狀會發(fā)生變化與文字場景融為一體。

\
Yahoo天氣

Yahoo天氣通過橫向劃動切換的方式查看兩個城市天氣時,前景的框和背景的圖片以不同的速度滾動,如話劇表演序幕徐徐拉開的效果。

6 分層結(jié)構(gòu) (LAYERED INTERFACES)

通常,屏幕界面以水平方式展示,沒有縱深層級感。然而iOS7的發(fā)布引發(fā)了一種層次感的變革,模糊背景、帶有縱深感的層次及動效,拓展了屏幕空間,塑造出內(nèi)容的層級感,這種設(shè)計手法,也被很多設(shè)計師逐漸運(yùn)用到自己產(chǎn)品中去了。

\

分層結(jié)構(gòu)可以想象在立體空間中,在XY軸的基礎(chǔ)上,增加Z軸。將當(dāng)前所在的界面蓋在另一個的上面,將信息分層歸納,體驗(yàn)上能夠感覺到明顯的層級感,區(qū)分主次信息的展示 。這種設(shè)計更專注于內(nèi)容,更多的暴露信息,減少結(jié)構(gòu)層級,操作高效 。

\
Cal

Cal是Any.Do 的團(tuán)隊推出的一款設(shè)計精良的智能日歷應(yīng)用,主要內(nèi)容的展示采用卡片形式而非全屏顯示,大家可以明顯的感覺到卡片和底圖兩個層級,能夠烘托場景、交代背景、渲染氣氛,帶入情境,給人無限想象 。

\
DayBoard

還有的設(shè)計雖然在當(dāng)前界面沒有看出層次,其實(shí)只是將層級隱藏起來了。如DayBoard,它其實(shí)是側(cè)邊欄形式變更過來的,通過動效擴(kuò)展了屏幕空間,渲染出帶有縱深感的層次,將操作區(qū)和內(nèi)容區(qū)劃分開,培養(yǎng)用戶使用習(xí)慣,使人印象深刻。

7 大視野背景(FULLSCREEN IMAGE BACKGROUND)

不不論是大屏電子設(shè)備、汽車的全景天窗甚至是落地的陽臺玻璃,人們總在追求更大的顯示區(qū)域和更佳的顯示效果,大視野在同類產(chǎn)品中總是能在同類產(chǎn)品中帶來更突出的體驗(yàn),在移動應(yīng)用中也是如此。

大背景圖片已經(jīng)成為營造設(shè)計氛圍主要手法,需要設(shè)計師具有更好的細(xì)節(jié)雕琢能力才能出效果,會讓APP更生動,更具創(chuàng)造力。

小貼士提醒,由于背景可能造成干擾,導(dǎo)致前景的內(nèi)容可讀性變?nèi)。需要把重要操作用明確的按鈕區(qū)隔出來,閱讀型文字跟背景圖要用明顯的反色,甚至把文字浮在半透明蒙層上。

\
The Whole Pantry

\
Flink

\
VSCO Cam

來看這些產(chǎn)品The Whole Pantry / Flink / VSCO Cam,他們都有一些共同的特點(diǎn),提升視覺表現(xiàn)力度,豐富情感化元素。一些信息或操作,浮動在圖片上。這種設(shè)計方法,對字體和排版設(shè)計要求更高,難度也更多,但極容易渲染出氛圍。

8 虛擬現(xiàn)實(shí)的游戲化(GAMIFICATIONS OF VIRTUAL REALITY)

眾所周知,虛擬現(xiàn)實(shí)技術(shù)是對未來游戲產(chǎn)業(yè)發(fā)展關(guān)鍵的技術(shù)之一。近期,F(xiàn)acebook花20億美元收購沉浸式虛擬現(xiàn)實(shí)技術(shù)廠商Oculus VR,索尼也正式公開了虛擬現(xiàn)實(shí)技術(shù),微軟以1.5億美金購買可穿戴計算技術(shù)和專利。這些收購都預(yù)示著巨頭公司要在虛擬現(xiàn)實(shí)領(lǐng)域里大展手腳了。

通過肢體、視覺和聽覺等感官體系直接與虛擬場景交互,可以重建并簡化交互方式,由原來的間接控制到直接交互;實(shí)現(xiàn)一維到多維空間體驗(yàn)全新體驗(yàn)。虛擬現(xiàn)實(shí)的游戲化和社交化都將會得到更廣泛的應(yīng)用。

\
口袋妖怪

“口袋妖怪”結(jié)合Google map,當(dāng)用戶到達(dá)Google 地圖上所標(biāo)注的妖怪捕捉點(diǎn)時,使用手中的智能手機(jī)的相機(jī)拍攝界面進(jìn)行掃瞄的方式交互,便可以從屏幕中發(fā)現(xiàn)它們的蹤影,進(jìn)而丟出“寵物球”來進(jìn)行捕捉;用虛擬現(xiàn)實(shí)技術(shù)給用戶創(chuàng)造一種輕量游戲化的現(xiàn)實(shí)增強(qiáng)的交互體驗(yàn)。

\
Ingress

Ingress的現(xiàn)實(shí)增強(qiáng)游戲, 通過真實(shí)世界的體驗(yàn)基礎(chǔ)上,用不同的視角觀察它,從而實(shí)現(xiàn)不同的“真實(shí)生活”。結(jié)合 Google 地圖和導(dǎo)航生成一副虛擬的游戲地圖,但是地圖上的街道、路線和地點(diǎn)都是真實(shí)的。玩家需要按照地圖收集并積攢虛擬的“XM”能源,就像真人版《吃豆人》。收集足夠的能源可以前往“傳送門”完成“黑客”任務(wù),傳送門一般都設(shè)置在美術(shù)館、圖書館這樣的公共場所。

9 任務(wù)窗口模式(TASK WINDOW MODE)

手機(jī)越來越大,視野越來越廣,給我們帶來更優(yōu)越體驗(yàn)的同時也帶來了很多煩惱。面對大屏手機(jī)單手操作和手指操作范圍有限的劣勢,如何讓用戶靈活地操作成為設(shè)計師思考的問題;而另一方面,設(shè)計上能否因?yàn)榇笃翈眢w驗(yàn)上更大的突破呢?

設(shè)計師們通過懸浮窗口進(jìn)行了很大膽的嘗試,利用小窗口鏡像操作大屏幕,甚至可以同時展示多窗口,執(zhí)行多任務(wù),不但解決大屏手機(jī)手指操作受限的問題 ,而且拓展了大屏手機(jī)的功能,使屏幕空間得以充分的利用,給大屏手機(jī)帶來全新的交互體驗(yàn)。

\
Galaxy Note 3

多任務(wù)窗口模式,跳出傳統(tǒng)手機(jī)單屏使用的思路,三星Galaxy Note 3允許多窗口同時存在,可以實(shí)現(xiàn)同屏顯示兩個應(yīng)用了。比如,同時顯示郵件和相冊,用戶可以在主屏幕選擇運(yùn)行幾個特定的任務(wù)。多任務(wù)窗口充分利用大屏手機(jī)顯示空間,提升用戶的操作效率。

\
百度瀏覽器PAD版

如今,手機(jī)和Pad的區(qū)別越來越小,Pad的大屏操作,已經(jīng)有些優(yōu)秀的設(shè)計,比如百度瀏覽器PAD版,可以同時展現(xiàn)2個預(yù)覽區(qū),還可以自由控制視頻懸浮窗。

10 主動服務(wù)式設(shè)計(PROAC SERVICE DESIGN)

現(xiàn)在的APP怎么才能獲得用戶的芳心呢?功能可靠、界面高大上?還有一種可能性,就是智能和貼心,如果可以讀懂用戶當(dāng)前的需求,并主動提供解決方案,為用戶省去那些搜索、選擇、糾結(jié)等不必要的步驟,還能抓不住用戶的心么?尤其是移動場景下,場景變化往往會產(chǎn)生新的需求,這時更需要我們主動提供貼合當(dāng)前場景的服務(wù)。

所謂的主動服務(wù)式設(shè)計,就是在用戶主動操作之前,識別到用戶的需求同時還能友好的給出最快捷的解決方式。

\
Shopkick

Shopkick讓智能推送和智能導(dǎo)購成為現(xiàn)實(shí),識別用戶的地理位置信息,推送更有場景引導(dǎo)式的信息,主動為用戶提供更有價值的信息。

\
Cover

Cover是一款支持安卓用戶自定義創(chuàng)建鎖屏菜單的應(yīng)用程序,同時支持識別用戶的情景(開車、家中或者工作),自動調(diào)整鎖屏的內(nèi)容,允許用戶快捷切換和喚起合適的應(yīng)用。

寫在最后:每位設(shè)計師都應(yīng)該對設(shè)計趨勢有自己的敏感度,研究前沿的設(shè)計方向,關(guān)注最新的設(shè)計模式,并靈活的應(yīng)用在實(shí)際的設(shè)計中,為你的設(shè)計增添有趣新穎的體驗(yàn)。