創(chuàng)造流動(dòng)的瞬間—探討移動(dòng)端交互動(dòng)效設(shè)計(jì)

2022-06-28    分類: 網(wǎng)站建設(shè)

iOS7的發(fā)布帶來了蘋果歷史上大的一次設(shè)計(jì)風(fēng)格的改變,強(qiáng)調(diào)依從于內(nèi)容的扁平化UI、纖細(xì)的字體和鮮明的圖標(biāo)、帶有縱深感的層次與動(dòng)畫表現(xiàn)構(gòu)成了它的全新設(shè)計(jì)特點(diǎn)。撇開飽受爭議的細(xì)節(jié)設(shè)計(jì),靜觀iOS7,不難發(fā)現(xiàn),許多讓我們眼前一亮的瞬間,來自以下一些交互動(dòng)效設(shè)計(jì)的創(chuàng)新點(diǎn):

  3D視差(Parallax Effect)在用戶傾斜和移動(dòng)屏幕的時(shí)候,IOS主屏可以根據(jù)感應(yīng)器數(shù)據(jù),調(diào)整壁紙和圖標(biāo)的相對(duì)位置,產(chǎn)生一種三維空間上的景深效果。

  擬真動(dòng)態(tài) 將現(xiàn)實(shí)中的運(yùn)動(dòng)現(xiàn)象簡化抽象,形成了iOS 7中一些蠻有特色的動(dòng)畫效果。天氣應(yīng)用中,全屏的氣象動(dòng)畫優(yōu)雅而逼真,洋洋灑灑的雪粒、悠然飄浮的云朵、劃破天際的閃電傳達(dá)出一種獨(dú)特的表現(xiàn)力,贏得了發(fā)布會(huì)上的陣陣掌聲。指南針工具中的水平儀動(dòng)畫,采用兩個(gè)圓圈逐漸相合的過程生動(dòng)地表現(xiàn)了水平校準(zhǔn)的過程。iOS7中還增加了動(dòng)態(tài)圖標(biāo),時(shí)鐘圖標(biāo)和設(shè)置圖標(biāo)還原了時(shí)針分針走動(dòng)和齒輪轉(zhuǎn)動(dòng)的狀態(tài)。

  彈性 信息應(yīng)用中,聊天氣泡隨著文字一起被丟上屏幕,當(dāng)用戶滾動(dòng)屏幕,它們互相碰撞并產(chǎn)生擠壓緩動(dòng)。類似的,一打開Game Center,六個(gè)鮮艷的泡泡富有節(jié)奏地彈出然后在與手指的交互過程中彈開消散。IOS7中的通知中心可以從鎖屏界面激活,而激活過程中面板會(huì)與屏幕底部碰撞產(chǎn)生回彈效果。

  縮放(Zoom) 當(dāng)用戶解鎖之后,圖標(biāo)以屏幕中心為軸漸次縮放每個(gè)圖標(biāo),產(chǎn)生一種由遠(yuǎn)及近貼到主屏上的感覺,點(diǎn)擊打開應(yīng)用、打開分組均采用放大展開的形式,這里的縮放更多地體現(xiàn)了系統(tǒng)的空間感。

  手指跟隨 iOS7中跟隨手勢(shì)的動(dòng)畫很多,比如點(diǎn)擊撥號(hào)鍵盤相應(yīng)的按鈕會(huì)變?yōu)榘胪该?,右滑返回中?dāng)前頁面的拖動(dòng)效果,滑動(dòng)解鎖過程中的漸變動(dòng)效,這些為我們帶來了很強(qiáng)的操縱體驗(yàn)。

  如果說之前在移動(dòng)端交互設(shè)計(jì)中,動(dòng)效可有可無,那IOS7的出現(xiàn),可以說宣告了動(dòng)效設(shè)計(jì)已經(jīng)不容忽視。還記得在《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》一書中,探討了如何創(chuàng)造卓越的IOS用戶體驗(yàn),提出了“令人驚嘆”的設(shè)計(jì)要素這一概念,即那些給用戶帶來的體驗(yàn)感受可以達(dá)到其心中某個(gè)“情感閥值”的表現(xiàn)層元素。而以下三方面因素將決定著產(chǎn)品帶來的體驗(yàn)感受能否跨越用戶心中的“情感閥值”:

  符合直覺:保證設(shè)計(jì)能引導(dǎo)用戶做出最符合直覺的操作;

  差異化的創(chuàng)新特征:設(shè)計(jì)中要有顯著的創(chuàng)新特征,即讓用戶感覺到某些不同尋常的產(chǎn)品體驗(yàn);

  積極響應(yīng):設(shè)計(jì)方案要以積極的姿態(tài)去緩解那些由于差異化導(dǎo)致的用戶陌生感。

  書中還提出,上述的三點(diǎn)推動(dòng)因素主要在三個(gè)屬性維度上得以體現(xiàn):

  界面外觀:即基本的靜態(tài)視覺元素;

  交互方式:包括人機(jī)物理交互、手勢(shì)以及其他常規(guī)的輸入方式;

  交互動(dòng)效:包括哪些能夠?yàn)楫a(chǎn)品賦予生機(jī)的動(dòng)態(tài)的界面元素及視覺效果,這些交互效果通常與特定的響應(yīng)行為相關(guān),甚至包括那些與交互行為沒有直接關(guān)聯(lián)的臨時(shí)狀態(tài)。

  在某一方面做到出類拔萃,產(chǎn)品就會(huì)讓人印象深刻。對(duì)照iOS7的設(shè)計(jì)不難發(fā)現(xiàn),Apple選擇了交互動(dòng)效這一方向進(jìn)行著重,而這也讓我們記住了iOS。 翻看iOS7的HIG,文檔中這樣描述動(dòng)效的作用“精細(xì)而恰當(dāng)?shù)膭?dòng)畫效果可以傳達(dá)狀態(tài)、增強(qiáng)用戶對(duì)于直接操縱的感知、通過視覺化的方式向用戶呈現(xiàn)操作結(jié)果”。 在移動(dòng)產(chǎn)品交互設(shè)計(jì)中,我們可以把動(dòng)效的作用更深入地歸結(jié)為以下幾點(diǎn):

  1.流暢過渡

  如果說界面布局可以組織UI元素的靜態(tài)位置,那么動(dòng)效可以組織UI元素在時(shí)間維度上的演進(jìn)。每一個(gè)毫秒里界面元素如何出現(xiàn)和消失,它的大小、位置、透明度和顏色如何變化,通過動(dòng)效的詮釋,用戶與產(chǎn)品的交互過程會(huì)更加順暢。Appflow中,界面元素的出現(xiàn),菜單的停靠,都伴隨著富有節(jié)奏感的動(dòng)畫效果,讓整個(gè)使用過程一氣呵成。多米音樂中使用旋轉(zhuǎn)的唱片來作為場(chǎng)景過渡之間的連接點(diǎn),契合音樂應(yīng)用的主題,也是轉(zhuǎn)場(chǎng)過程連貫自然。

  2. 高效反饋

  作為與用戶之間發(fā)生聯(lián)系的一個(gè)很重要的交互元素,良好的反饋設(shè)計(jì)可以讓用戶更好地了解到操作的結(jié)果與程序當(dāng)前的狀態(tài),減輕用戶在等待過程中的焦慮。與文字型的靜態(tài)反饋相比,使用動(dòng)效可以讓反饋高效直觀。iOS7的app store中通過環(huán)狀的進(jìn)度圈來表現(xiàn)應(yīng)用的下載過程,并將其與暫停按鈕結(jié)合,讓用戶對(duì)進(jìn)度一目了然,還可以便捷地暫停進(jìn)程。

  3. 增強(qiáng)操縱

  “直接操縱”是移動(dòng)產(chǎn)品用戶體驗(yàn)中很重要的一個(gè)概念,簡單來說,它要求我們的產(chǎn)品與用戶交互的方式盡量接近真實(shí)世界的互動(dòng)方式。它要求交互對(duì)象的反應(yīng)行為是可以預(yù)測(cè)的,不需要任何提示,并且符合我們對(duì)于現(xiàn)實(shí)世界規(guī)律的認(rèn)知。這就要求我們拉近界面操作與用戶的距離,讓用戶難以發(fā)現(xiàn)虛擬的交互對(duì)象與現(xiàn)實(shí)的操作行為之間的屏障,很多令人新奇和興奮的設(shè)計(jì)點(diǎn)都來源于此。通過交互動(dòng)效對(duì)于現(xiàn)實(shí)世界的模擬,我們可以顯著地增強(qiáng)產(chǎn)品的“直接操縱”特性。以Paper App為例,使用過它的同學(xué)都會(huì)被它精致的交互動(dòng)畫所吸引。輕輕翻動(dòng)繪圖本,打開一頁開始繪畫,栩栩如生的體驗(yàn)讓你即使初次使用也能很快投入。

  4. 幫助引導(dǎo)

  由于移動(dòng)界面的空間非常有限,我們經(jīng)常要藏起一部分功能,同時(shí)手勢(shì)操作也是移動(dòng)應(yīng)用中很常見的交互元素。我們要怎么樣讓用戶發(fā)現(xiàn)隱藏的功能,告訴他們?cè)趺词褂檬謩?shì)呢?這個(gè)時(shí)候,動(dòng)效作為一種生動(dòng)的表現(xiàn)形式,往往可以起到很好的幫助引導(dǎo)效果。iOS7中鎖屏界面滑動(dòng)解鎖的提示會(huì)顯示一種從左到右的漸變效果,用戶可以根據(jù)這種運(yùn)動(dòng)方向去預(yù)知手勢(shì)的方向。在打開read it!的時(shí)候,會(huì)短暫顯示左側(cè)的菜單,然后右邊的主內(nèi)容區(qū)域劃過來逐漸覆蓋,直到左側(cè)只剩下圖標(biāo)作為入口,這幫助用戶了解了側(cè)邊欄所隱藏的功能。

  5. 升華體驗(yàn)

  如果你的產(chǎn)品已經(jīng)擁有了良好的可用性,卻缺乏亮點(diǎn),也許你可以考慮為其增加動(dòng)效。將動(dòng)效融入產(chǎn)品之中,往往帶來更愉悅地使用體驗(yàn),也更細(xì)膩地表達(dá)應(yīng)用的情緒和氣質(zhì)。具有一致性的標(biāo)志動(dòng)效,常常幫助產(chǎn)品在細(xì)節(jié)中流露出獨(dú)有的品牌特性,增加產(chǎn)品的魅力值。

  我們可以發(fā)現(xiàn),交互動(dòng)效的設(shè)計(jì)既在產(chǎn)品的功能層面提供支持,又在表現(xiàn)層面發(fā)揮影響,而且在移動(dòng)產(chǎn)品的交互設(shè)計(jì)中,它確實(shí)很有實(shí)用價(jià)值。那么,要怎么做才能更好地為我們的產(chǎn)品設(shè)計(jì)交互動(dòng)效呢?在這里,總結(jié)出以下一些設(shè)計(jì)要關(guān)注的點(diǎn):

  關(guān)注當(dāng)前動(dòng)效設(shè)計(jì)風(fēng)格的潮流,順應(yīng)輕動(dòng)畫的設(shè)計(jì)趨勢(shì)。以iOS 7為代表的動(dòng)效設(shè)計(jì)摒棄了復(fù)雜的擬物動(dòng)畫,風(fēng)格更為靈活,輕快,強(qiáng)調(diào)響應(yīng),可以作為我們?cè)O(shè)計(jì)動(dòng)效時(shí)的一種參考方向。

  讓動(dòng)畫符合基本的現(xiàn)實(shí)運(yùn)動(dòng)規(guī)律。如何位移、如何緩動(dòng)都是一門要下功夫的學(xué)問,要讓設(shè)計(jì)的動(dòng)效更自然,有時(shí)候我們可以借鑒傳統(tǒng)動(dòng)畫行業(yè)的運(yùn)動(dòng)規(guī)律。

  重視應(yīng)用內(nèi)整體動(dòng)畫的編排,保持和諧一致。對(duì)于自定義的動(dòng)畫效果,要在應(yīng)用內(nèi)保持使用方式的一致性,讓用戶通過使用你的應(yīng)用不斷積累認(rèn)知。要有一個(gè)整體觀,對(duì)動(dòng)效的數(shù)量、時(shí)長、類型分配、風(fēng)格統(tǒng)一做出規(guī)劃。在AltWWDC上 ,Ben Johnson提出了“1個(gè)單元的歡迎動(dòng)畫+6個(gè)單元的向?qū)?dòng)畫+1-2個(gè)單元讓人愉悅的細(xì)節(jié)性動(dòng)畫”的程序內(nèi)動(dòng)畫的編排公式。如何對(duì)動(dòng)效進(jìn)行整體設(shè)計(jì),確實(shí)是一個(gè)值得進(jìn)一步探討的話題。

  考慮執(zhí)行效率,在實(shí)現(xiàn)效果、設(shè)備限制與技術(shù)方案之間作出平衡。移動(dòng)設(shè)備配置都不盡相同,在Android等一些硬件機(jī)型多的平臺(tái)上設(shè)計(jì)動(dòng)效要注意確保動(dòng)畫在執(zhí)行時(shí)不會(huì)給機(jī)器帶來過大壓力,做到整個(gè)效果不卡頓。

  恰到好處,服從體驗(yàn)。有時(shí)候動(dòng)效是一把雙刃劍,用的好為產(chǎn)品增色不少,用的不好則會(huì)適得其反。這要求我們?cè)谠O(shè)計(jì)的時(shí)候,以用戶的操作體驗(yàn)為先:尊重用戶習(xí)慣,過于花哨,標(biāo)新立意的動(dòng)效不可取;在效率型應(yīng)用中用過度、無意義的動(dòng)畫阻塞任務(wù)流程;和動(dòng)作結(jié)合的動(dòng)畫最好不要超過0.5-1秒;當(dāng)用戶專注內(nèi)容的時(shí)候盡量不要用吸引注意的動(dòng)畫去打擾;對(duì)一些出現(xiàn)頻率高的操作也要謹(jǐn)慎設(shè)計(jì)動(dòng)畫,以免過多次的出現(xiàn)引起用戶反感,延長操作時(shí)間。


  作為移動(dòng)端的交互設(shè)計(jì)師,我們?cè)崎喿x設(shè)計(jì)組也一直在思考怎么用動(dòng)效來豐富自己的產(chǎn)品。但是在日常交互設(shè)計(jì)工作中進(jìn)行動(dòng)效設(shè)計(jì)時(shí),我們常常會(huì)遇到以下的一些問題:第一,對(duì)于動(dòng)效的相關(guān)素材搜集有一定的難度,且缺乏管理,這導(dǎo)致設(shè)計(jì)的時(shí)候缺乏靈感來源,無法借鑒常見的動(dòng)效,也不利于整體把握當(dāng)前的動(dòng)效設(shè)計(jì)趨勢(shì);第二,動(dòng)效設(shè)計(jì)很難在傳統(tǒng)的交互文檔中進(jìn)行表述,以前總是由設(shè)計(jì)師拿類似的應(yīng)用去和開發(fā)溝通,不夠規(guī)范;第三, 程序員開發(fā)的過程中也期待有一個(gè)常用界面動(dòng)畫效果的代碼庫,可以作為開發(fā)時(shí)的參考。

  “交互動(dòng)效庫”就是我們對(duì)解決上述問題制作的一款工具。設(shè)計(jì)師們可以把自己平時(shí)看到的應(yīng)用中出現(xiàn)的動(dòng)效,錄制成短視頻并上傳,通過簡短的相關(guān)說明填寫,就可以在網(wǎng)站上相應(yīng)頁面呈現(xiàn)剛上傳的動(dòng)效視頻。在設(shè)計(jì)項(xiàng)目中遇到需要?jiǎng)有⒖嫉臅r(shí)候可以去網(wǎng)站上尋找靈感,找到合適的,可以把動(dòng)效視頻的網(wǎng)頁地址直接黏貼在交互稿上,加上簡單的說明,就可以讓開發(fā)同學(xué)直觀了解要做的效果。開發(fā)所搜集的常見效果的代碼也可以上傳入動(dòng)效庫,在該動(dòng)效視頻的頁面上可直接下載代碼。

  第一個(gè)方面,需要設(shè)計(jì)整個(gè)動(dòng)效庫網(wǎng)站的信息結(jié)構(gòu),也就是對(duì)動(dòng)效做一個(gè)利于設(shè)計(jì)參考的分類。要做這樣一個(gè)分類首先要對(duì)動(dòng)效有所積累,由于很少有類似的搜集動(dòng)效的網(wǎng)站,我們下載了600多個(gè)比較新穎的富有設(shè)計(jì)感的應(yīng)用,一個(gè)個(gè)打開使用,將發(fā)現(xiàn)的比較有價(jià)值的動(dòng)效記錄下來,總共錄制了202段視頻,作為我們動(dòng)效庫的第一批動(dòng)效記錄。在這些記錄的基礎(chǔ)上,我們根據(jù)設(shè)計(jì)中常常會(huì)涉及的方面將動(dòng)效分為引入動(dòng)效、頁面動(dòng)效、轉(zhuǎn)場(chǎng)動(dòng)效、組件動(dòng)效四大類,具體的層級(jí)結(jié)構(gòu)如下:

  在此分享下記錄動(dòng)效的兩個(gè)比較好的工具:

  Mac系統(tǒng)下

  AirServer: 同步移動(dòng)設(shè)備屏幕到電腦 http://www.airserver.com

  screenflow: 錄屏軟件 http://www.telestream.net/screenflow/overview.htm

  Win系統(tǒng)下

  Reflection:同步移動(dòng)設(shè)備屏幕到電腦 http://www.reflectionapp.com/

  FastStone Capture:錄屏軟件 http://www.itopdog.cn/graphic-image/image-capture/fscapture.html

  第二個(gè)方面,主要是功能實(shí)現(xiàn)上的問題,要研究一種技術(shù)代價(jià)比較小的解決方案,實(shí)用為先。我們選擇了HTML5的視頻組件去呈現(xiàn)動(dòng)效記錄,因?yàn)樗容^輕量,在集中總覽的瀑布流頁面,和詳情頁面都可以便捷地播放視頻。對(duì)動(dòng)效視頻數(shù)據(jù)的管理,我們沒有搭建數(shù)據(jù)庫,而是在每一個(gè)目錄下設(shè)置了一個(gè)JS文件存放記錄視頻信息的數(shù)組,再通過全局JS在加載每個(gè)頁面的時(shí)候去讀取相應(yīng)目錄下的這個(gè)JavaScript數(shù)組將相關(guān)文件加載進(jìn)來。設(shè)計(jì)師在將自己搜集的視頻放到相應(yīng)目錄下后,為該目錄下的JS文件,添加相關(guān)數(shù)組記錄,即可以把自己上傳的視頻添加到動(dòng)效庫的網(wǎng)站上。

  在具體的云閱讀新版本的交互設(shè)計(jì)中,我們利用交互動(dòng)效庫來說明和解釋相關(guān)的動(dòng)效設(shè)計(jì)。交互動(dòng)效庫對(duì)推動(dòng)動(dòng)效設(shè)計(jì)落實(shí)到具體產(chǎn)品中,起到一定的作用。它雖然還很不完善,但是對(duì)于有限的資源下小團(tuán)隊(duì)如何創(chuàng)建自己的設(shè)計(jì)工具庫,我們提出一個(gè)解決問題的思路,希望也能給大家?guī)韱l(fā)。

  總結(jié)對(duì)移動(dòng)端動(dòng)效的相關(guān)研究,還存在這以下一些值得深入探究的點(diǎn):

  1. 動(dòng)效創(chuàng)意方面的創(chuàng)新。如今國內(nèi)的交互動(dòng)效設(shè)計(jì)大多數(shù)還停留在使用國外已經(jīng)出現(xiàn)的設(shè)計(jì),很少有獨(dú)創(chuàng)性的動(dòng)效設(shè)計(jì)出現(xiàn),如何去設(shè)計(jì)動(dòng)效也缺乏相關(guān)的指導(dǎo)。

  2.表達(dá)動(dòng)效設(shè)計(jì)的Demo方法。如何更好地高效地表現(xiàn)我們?cè)O(shè)計(jì)的動(dòng)效,對(duì)AE、Flash等軟件呈現(xiàn)動(dòng)畫效果原型的實(shí)踐會(huì)是比較有實(shí)用價(jià)值的一個(gè)方向。

  3. 關(guān)于移動(dòng)端界面交互技術(shù)方面的學(xué)習(xí)研究。網(wǎng)頁設(shè)計(jì)領(lǐng)域,有不少設(shè)計(jì)師對(duì)前端技術(shù)已經(jīng)有了一定的了解。但是在移動(dòng)設(shè)計(jì)領(lǐng)域,學(xué)習(xí)界面和交互效果如何用代碼實(shí)現(xiàn)還沒有受到設(shè)計(jì)師們的廣泛重視。但我們認(rèn)為這是很重要的一步,如果你了解了技術(shù)實(shí)現(xiàn)層面的知識(shí),很多設(shè)計(jì)阻礙就會(huì)消除,創(chuàng)意更容易得到發(fā)揮也更容易在產(chǎn)品中落實(shí)。這會(huì)有點(diǎn)難,但也許真正的設(shè)計(jì)推動(dòng)力來源于此。

  最后,想把2013 WWDC上的開場(chǎng)寫在這次分享的結(jié)尾?!叭绻總€(gè)人都在忙于完成設(shè)計(jì),那么誰來完善產(chǎn)品?我們?cè)?jīng)對(duì)為方便而設(shè)計(jì)還是為愉悅而設(shè)計(jì)感到困惑。當(dāng)決定要設(shè)計(jì)一個(gè)大家所真正需要的產(chǎn)品時(shí),我們開始面對(duì)許多選擇,而幫助我們專注的,是最初提出的一個(gè)問題:我們希望自己的產(chǎn)品帶給用戶什么樣的感受?快樂、驚喜、愛、聯(lián)系。抱持這樣的初心,我們開始精益求精地創(chuàng)造,每一次肯定背后都是上千次的否定。我們簡化、我們不斷優(yōu)化,然后推倒重來,直到確信讓我們感動(dòng)的設(shè)計(jì)可以讓每一個(gè)用戶的生活更美好?,F(xiàn)在我們做到了,它真正觸動(dòng)人心?!蓖高^這段文字,我們可以感受到蘋果所堅(jiān)持的一種精神:專注于用戶情感,對(duì)體驗(yàn)精益求精?;蛟S,這就是蘋果的產(chǎn)品會(huì)讓我們記住的原因,也是體驗(yàn)設(shè)計(jì)由優(yōu)秀邁向卓越的秘訣。

  PS:感謝安董的指導(dǎo)和云閱讀設(shè)計(jì)組的每一位設(shè)計(jì)師,從實(shí)習(xí)生到入職,在大家身上學(xué)到很多,能加入到這樣的一個(gè)集體實(shí)在幸運(yùn)~另外,我們也一直在努力,希望動(dòng)效設(shè)計(jì)能夠最終落實(shí)到產(chǎn)品上,歡迎有對(duì)這方面感興趣的同學(xué),和我們分享你的經(jīng)驗(yàn)。

當(dāng)前文章:創(chuàng)造流動(dòng)的瞬間—探討移動(dòng)端交互動(dòng)效設(shè)計(jì)
網(wǎng)頁地址:http://www.bm7419.com/news36/172486.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷全網(wǎng)營銷推廣、網(wǎng)站設(shè)計(jì)公司、面包屑導(dǎo)航、用戶體驗(yàn)、網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都app開發(fā)公司