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

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

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

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

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

　　手指跟隨 iOS7中跟隨手勢的動畫很多，比如點擊撥號鍵盤相應的按鈕會變?yōu)榘胪该?，右滑返回中當前頁面的拖動效果，滑動解鎖過程中的漸變動效，這些為我們帶來了很強的操縱體驗。

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

　　符合直覺：保證設計能引導用戶做出最符合直覺的操作;

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

　　積極響應：設計方案要以積極的姿態(tài)去緩解那些由于差異化導致的用戶陌生感。

　　書中還提出，上述的三點推動因素主要在三個屬性維度上得以體現(xiàn)：

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

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

　　交互動效：包括哪些能夠為產(chǎn)品賦予生機的動態(tài)的界面元素及視覺效果，這些交互效果通常與特定的響應行為相關，甚至包括那些與交互行為沒有直接關聯(lián)的臨時狀態(tài)。

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

　　1.流暢過渡

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

　　2. 高效反饋

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

　　3. 增強操縱

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

　　4. 幫助引導

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

　　5. 升華體驗

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

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

　　關注當前動效設計風格的潮流，順應輕動畫的設計趨勢。以iOS 7為代表的動效設計摒棄了復雜的擬物動畫，風格更為靈活，輕快，強調(diào)響應，可以作為我們設計動效時的一種參考方向。

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

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

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

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

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

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

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

　　在此分享下記錄動效的兩個比較好的工具：

　　Mac系統(tǒng)下

　　AirServer: 同步移動設備屏幕到電腦 http://www.airserver.com

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

　　Win系統(tǒng)下

　　Reflection:同步移動設備屏幕到電腦 http://www.reflectionapp.com/

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

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

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

　　總結對移動端動效的相關研究，還存在這以下一些值得深入探究的點：

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

　　2．表達動效設計的Demo方法。如何更好地高效地表現(xiàn)我們設計的動效，對AE、Flash等軟件呈現(xiàn)動畫效果原型的實踐會是比較有實用價值的一個方向。

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

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

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

本文名稱：創(chuàng)造流動的瞬間—探討移動端交互動效設計
網(wǎng)頁網(wǎng)址：http://www.rwnh.cn/news/172486.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、小程序開發(fā)、自適應網(wǎng)站、網(wǎng)站維護、服務器托管、網(wǎng)站營銷

廣告

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