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

0 評(píng)論 13616 瀏覽 5 收藏 20 分鐘

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

1 轉(zhuǎn)場(chǎng)動(dòng)效的極致平滑(TRANSITION ANIMATION IS SMOOTH EXTREME)

移動(dòng)APP越來(lái)越強(qiáng)調(diào)沉浸式的體驗(yàn),頁(yè)面和頁(yè)面之間切換也需要更加的流暢,轉(zhuǎn)場(chǎng)動(dòng)效需要更加的極致和平滑。如果你還沒(méi)有為你的APP提供轉(zhuǎn)場(chǎng)動(dòng)效, 那么你已經(jīng)落伍了,如果你還是使用比較傳統(tǒng)的轉(zhuǎn)場(chǎng)動(dòng)效,如向左滑動(dòng)、放大縮小,那么你的體驗(yàn)也已經(jīng)落伍了。平滑無(wú)縫的切換和體驗(yàn),信息需要沒(méi)有阻力的傳 遞,用戶(hù)需要集中注意力,專(zhuān)注于目標(biāo)任務(wù)來(lái)進(jìn)行一系列的操作。我們相信,優(yōu)先注重轉(zhuǎn)場(chǎng)動(dòng)效的移動(dòng)產(chǎn)品,會(huì)有極大的產(chǎn)品競(jìng)爭(zhēng)力。

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

Yahoo! New Digest ?Making of Making Facebook Paper

Yahoo! New Digest/Making of Making/Facebook Paper,都對(duì)轉(zhuǎn)場(chǎng)的動(dòng)效進(jìn)行了精心的設(shè)計(jì),平滑流暢的體驗(yàn)讓我們眼前一亮。
設(shè)計(jì)師設(shè)計(jì)移動(dòng)APP的的動(dòng)效,需要像導(dǎo)演一樣,布局不同場(chǎng)景中,界面元素的登場(chǎng)方式,不同元素之間的出現(xiàn)、運(yùn)動(dòng)、消失要足夠的連貫。必要時(shí),信息框架需要優(yōu)化重構(gòu)。動(dòng)效的語(yǔ)義需要保持一致,避免認(rèn)知的混淆。如果使用擬物化的動(dòng)效語(yǔ)言需要符合物理定律。

2 多樣化新手引導(dǎo)( VARIOUS GUIDANCE)

靜態(tài)圖片或蒙灰圖層的新手引導(dǎo)容易被用戶(hù)忽略,眼前一亮的新手引導(dǎo)才能讓用戶(hù)有學(xué)習(xí)的欲望與沖動(dòng)。新穎的新手引導(dǎo)往往會(huì)突破靜態(tài)圖片這種方式,通過(guò)生動(dòng)的故事、吸引眼球的動(dòng)效、場(chǎng)景化的圖片、語(yǔ)音引導(dǎo)及視頻小短片等新穎的新手引導(dǎo)突破靜態(tài)圖片的方式,吸引用戶(hù)的眼球。

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

Hue

視覺(jué)動(dòng)效類(lèi)的引導(dǎo),各種視差動(dòng)效、過(guò)渡動(dòng)效、入場(chǎng)動(dòng)效、強(qiáng)化動(dòng)效等等多種多樣,”Hue”通過(guò)動(dòng)效將功能及引導(dǎo)元素串聯(lián)起,活潑的展現(xiàn)在用戶(hù)面前,也不失為一種吸引眼球的方式。

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

為T(mén)a鬧鐘

語(yǔ)音視頻類(lèi)的引導(dǎo),”為ta鬧鐘”則直接應(yīng)用一個(gè)制作精良的動(dòng)畫(huà)短片讓你了解APP的使用場(chǎng)景,激起用戶(hù)對(duì)功能的嘗試欲望。
另外,F(xiàn)acebook paper的新手引導(dǎo)使用真人語(yǔ)音配合動(dòng)效教學(xué)基本的操作手勢(shì),而且是一步一提醒的交互形式,非常簡(jiǎn)單、”醒耳”。

3 信息框架扁平化(FLAT INFORMATION FRAMEWORK)

APP設(shè)計(jì)中一個(gè)比較重要的設(shè)計(jì)因素,是效率的最大化。2013年我們追求界面扁平,注重通過(guò)弱化視覺(jué)效果,來(lái)強(qiáng)化功能主義,界面風(fēng)格的扁平化,還遠(yuǎn)遠(yuǎn)不夠,2014年應(yīng)該從信息架構(gòu)角度,再進(jìn)一步的去應(yīng)用扁平化的設(shè)計(jì)理念,這就是信息架構(gòu)的扁平化趨勢(shì)。

信息框架扁平目的是減少信息層級(jí),追求信息到達(dá)用戶(hù)的最短距離。通常,移動(dòng)APP的層級(jí)關(guān)系不比網(wǎng)頁(yè)直觀,不不存在面包屑或是站點(diǎn)地圖允許用戶(hù)任意跳轉(zhuǎn)??v深的返回機(jī)制會(huì)增加用戶(hù)操作成本,扁平的信息框架會(huì)從根本上解決上述問(wèn)題。

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

Google Now

Google Now使用卡片式列表框架展示信息,把用戶(hù)需要的信息展示在首頁(yè),將搜索結(jié)果前置,省去輸入、點(diǎn)擊和頁(yè)面跳轉(zhuǎn)的步驟,讓用戶(hù)更快捷的獲取所需要的信息。

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

Drippler

Drippler主要提供和自己設(shè)備相關(guān)的提示、軟件更新等所有信息。首頁(yè)以瀑布流的方式展示信息,支持頂部下拉菜單進(jìn)行篩選,省去更多分類(lèi)入口,縮短用戶(hù)到達(dá)信息詳情頁(yè)的步驟。

4 動(dòng)態(tài)數(shù)據(jù)可視化(Dynamic data visualization)

人類(lèi)身體的微妙變化、運(yùn)動(dòng)耗能都會(huì)產(chǎn)生大量的數(shù)據(jù)。近幾年由于可穿戴設(shè)備的興起,人們可以通過(guò)數(shù)據(jù)更深入了解自己的身體。結(jié)合數(shù)據(jù)可視化的概念,這將掀起又一熱浪。
現(xiàn)今數(shù)據(jù)可視化不只是靜態(tài)展現(xiàn)數(shù)據(jù),用戶(hù)希望通過(guò)互動(dòng)及時(shí)獲取數(shù)據(jù)流,動(dòng)態(tài)數(shù)據(jù)可視化(Dynamic data visualization)將更加強(qiáng)調(diào)數(shù)據(jù)轉(zhuǎn)譯實(shí)時(shí)更新的圖形,以及動(dòng)態(tài)的圖形化表達(dá)。

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

Moves

實(shí)時(shí)數(shù)據(jù)監(jiān)測(cè),Moves會(huì)根據(jù)你的運(yùn)動(dòng)情況在后臺(tái)計(jì)算步數(shù)、距離和時(shí)間,然后生成簡(jiǎn)單易懂的圖表幫助你了解一天的運(yùn)動(dòng)情況和地點(diǎn),如果你一邊走一 邊掏出手機(jī)查看Moves,隨著你步數(shù)的一步步邁出,oves相應(yīng)運(yùn)動(dòng)的圓形會(huì)跟著你的步伐震動(dòng),同時(shí)數(shù)字也在不斷增長(zhǎng),伱會(huì)產(chǎn)生一種莫名的成就 感;Nike+會(huì)隨著你跑步的行為以語(yǔ)音方式提醒你跑步的公里、速度;其他還有 Nike+furlband、latin。

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

UP Coffee

動(dòng)態(tài)數(shù)據(jù)呈現(xiàn),靜態(tài)圖形僅能表現(xiàn)數(shù)據(jù)的單一數(shù)據(jù)屬性,當(dāng)圖形以動(dòng)態(tài)效果呈現(xiàn)時(shí),便能多維度呈現(xiàn)給用戶(hù)實(shí)時(shí)信息、同時(shí)能與用戶(hù)形成互動(dòng),提高數(shù)據(jù)表現(xiàn)的趣味性。
UP Coffee是一款追蹤你體內(nèi)咖啡因影響你睡眠的動(dòng)態(tài)展示APP,計(jì)算你飲入的咖啡因與體內(nèi)水分反應(yīng),引導(dǎo)你睡眠的最佳時(shí)間。

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

視差是指讓多層背景以不同的速度移動(dòng),形成立體的運(yùn)動(dòng)效果,帶來(lái)非常出色的感官體驗(yàn)。視差動(dòng)效在網(wǎng)站中應(yīng)用不少了,在移動(dòng)應(yīng)用中,除了一些讓人眼前一亮的新手引導(dǎo)頁(yè),還有一些精細(xì)的視差效果應(yīng)用也能給我們帶來(lái)錯(cuò)落有致的新鮮體驗(yàn)。
視差效果的應(yīng)用需要橫向考慮哪些是前景,哪些是背景元素,考慮在滾動(dòng)的過(guò)程中狀態(tài)的停留和過(guò)程中的效果呈現(xiàn)。

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

CORSSFADER

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

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

App Flow

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

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

Yahoo天氣

Yahoo天氣通過(guò)橫向劃動(dòng)切換的方式查看兩個(gè)城市天氣時(shí),前景的框和背景的圖片以不同的速度滾動(dòng),如話(huà)劇表演序幕徐徐拉開(kāi)的效果。

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

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

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

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

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

Cal

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

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

DayBoard

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

7 大視野背景(FULLSCREEN IMAGE BACKGROUND)

不不論是大屏電子設(shè)備、汽車(chē)的全景天窗甚至是落地的陽(yáng)臺(tái)玻璃,人們總在追求更大的顯示區(qū)域和更佳的顯示效果,大視野在同類(lèi)產(chǎn)品中總是能在同類(lèi)產(chǎn)品中帶來(lái)更突出的體驗(yàn),在移動(dòng)應(yīng)用中也是如此。
大背景圖片已經(jīng)成為營(yíng)造設(shè)計(jì)氛圍主要手法,需要設(shè)計(jì)師具有更好的細(xì)節(jié)雕琢能力才能出效果,會(huì)讓APP更生動(dòng),更具創(chuàng)造力。
小貼士提醒,由于背景可能造成干擾,導(dǎo)致前景的內(nèi)容可讀性變?nèi)?。需要把重要操作用明確的按鈕區(qū)隔出來(lái),閱讀型文字跟背景圖要用明顯的反色,甚至把文字浮在半透明蒙層上。

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

The Whole Pantry

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

Flink

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

VSCO Cam

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

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

眾所周知,虛擬現(xiàn)實(shí)技術(shù)是對(duì)未來(lái)游戲產(chǎn)業(yè)發(fā)展關(guān)鍵的技術(shù)之一。近期,F(xiàn)acebook花20億美元收購(gòu)沉浸式虛擬現(xiàn)實(shí)技術(shù)廠(chǎng)商O(píng)culus VR,索尼也正式公開(kāi)了虛擬現(xiàn)實(shí)技術(shù),微軟以1.5億美金購(gòu)買(mǎi)可穿戴計(jì)算技術(shù)和專(zhuān)利。這些收購(gòu)都預(yù)示著巨頭公司要在虛擬現(xiàn)實(shí)領(lǐng)域里大展手腳了。
通過(guò)肢體、視覺(jué)和聽(tīng)覺(jué)等感官體系直接與虛擬場(chǎng)景交互,可以重建并簡(jiǎn)化交互方式,由原來(lái)的間接控制到直接交互;實(shí)現(xiàn)一維到多維空間體驗(yàn)全新體驗(yàn)。虛擬現(xiàn)實(shí)的游戲化和社交化都將會(huì)得到更廣泛的應(yīng)用。

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

口袋妖怪

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

Ingress

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

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

手機(jī)越來(lái)越大,視野越來(lái)越廣,給我們帶來(lái)更優(yōu)越體驗(yàn)的同時(shí)也帶來(lái)了很多煩惱。面對(duì)大屏手機(jī)單手操作和手指操作范圍有限的劣勢(shì),如何讓用戶(hù)靈活地操作成為設(shè)計(jì)師思考的問(wèn)題;而另一方面,設(shè)計(jì)上能否因?yàn)榇笃翈?lái)體驗(yàn)上更大的突破呢?
設(shè)計(jì)師們通過(guò)懸浮窗口進(jìn)行了很大膽的嘗試,利用小窗口鏡像操作大屏幕,甚至可以同時(shí)展示多窗口,執(zhí)行多任務(wù),不但解決大屏手機(jī)手指操作受限的問(wèn)題 ,而且拓展了大屏手機(jī)的功能,使屏幕空間得以充分的利用,給大屏手機(jī)帶來(lái)全新的交互體驗(yàn)。

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

Galaxy Note 3

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

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

百度瀏覽器PAD版

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

10 主動(dòng)服務(wù)式設(shè)計(jì)(PROAC SERVICE DESIGN)

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

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

Shopkick

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

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

Cover

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

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

原文地址:http://mux.baidu.com/?p=6166

原文來(lái)自:百度MUX

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!