?(阿里高級視覺設計師):隨著軟件與終端的發展,如今的用戶體驗設計中動效的作用正變得越發重要,也有越來越多的設計師開始測驗考試讓自己的作品“動”起來。但在實際工作中,相信人人常會有這樣的疑問:怎樣能力將自己精心設計的動態效果,準確的轉達給工程師,避免實現的偏差呢?下面我想根據自己的經驗,拋磚引玉,和人人聊一下這個話題。

試想一下,在一個沉寂的的夜晚,你正為一個界面的過渡動畫而苦思冥想,突然一道靈感之光穿越你的腦海,完美的方案浮現眼前。此刻你最想做的,恐怕不是翻閱開發文檔研究實現原理,“老子得立刻把它表示出來。”

云南体彩网沒錯,我們是設計師,設計師要做的是可視化。對于動效來說,憑空描述永遠是隔靴搔癢,將自己心中的設計最快速的可視化,是實現的第一步。

一、準確展示:視頻Demo

云南体彩网視頻Demo是個不錯的開始,一段可以反復播放并在大部分設備上均可觀看的視頻,是讓別人快速理解自己想法的最佳媒介。制作視頻Demo,本人最常用的工具是After?Effects。AE對于動效的控制與表示能力,至今無人能出其右,是我心目中最佳的概念設計工具。

(不夸張的說,通過對速度曲線與層級的控制,AE能實現你所見過任何的動效)

除視頻外,AE的另一個優勢是,它輸出的PNG序列幀素材可以直接應用到一些PC甚至移動端的軟件中,作為實現效果。

(Andriod L中一些控件動畫的實現方式,就是通過法式直接播放設計好的序列幀素材)

二、操作體驗:交互原型

視頻Demo的局限是無法交互,而很大一部分動效都是在用戶與界面交互時觸發的。這部分動效的啟動時機,與手勢的關系,僅靠視頻Demo就無法100%準確的轉達了。這時,如果能有一個可交互的原型,很多問題就會迎刃而解。

對于可交互的原型(Prototype),網上已經有很多文章在討論,制作工具也五花八門(Flash、Adobe?Edge、Quartz?Composer、Keynote、Framer、Pixate、Form…),我們該如何選擇呢?對于這個問題,我主要看兩個點:

  1. 制作好的原型是否便于多人分享
  2. 是否可以直接輸出可用于開發的參數

基于這兩點,我個人的第一個選擇是Flash。

?

云南体彩网(沒錯,就是Adobe Flash,這個優缺點都很鮮明的軟件)

云南体彩网由于Apple的原因,Flash如今的境況可算是江河日下。但作為一個動效原型工具,它卻有一些奇特的優勢。

優勢 1:可以直接導入AE生成的序列幀素材。

云南体彩网對于我這種以AE作為動效設計起始的人來說,這點太重要了。它意味著無需任何重復勞動,只需要在Flash中添加一些基于AS3.0的交互代碼,就可以完成原型的制作,并担保自己最初的設計思路在原型階段不打折扣的實現。

云南体彩网(Action Script是可視化很強的一門語言,結合AE的素材,你設計的動效基本可以完美復現)

?優勢2:可以導出.apk或.ipa的安裝包,共享給任何有手機的人。

云南体彩网由于本人的工作經常需要異地溝通,原型的可傳遞性就是個很關鍵的需求了(總不克不及把電腦快遞過去給人家看吧…)。Flash的打包發布功能,這時就派上了用場。做好的原型通過Air?for?Android打包一個apk文件,郵件發過去安裝在對方手機上,輕松又愉快。

云南体彩网(左一就是通過Flash打包生成的.apk文件,可以直接復制到手機上安裝)

云南体彩网另外一些可關注的工具,還有Pixate和Form,它們都可以通過共享工程文件的方式遠程傳遞,還能通過官方App將原型投射在手機上實時預覽,缺點是只能做一些基礎的效果,立異一點兒的就搞不定了,不過他們都在賡續地迭代更新,尤其是后者,剛被Google收購,未來說不定會有快速的發展。

我個人的第二個工具選擇,是Framer?Studio。當我把制作好的原型拿給工程師看的時候,經常被問到這樣一個問題:“能不克不及把源碼給我們看一下?”這時氣氛通常會比較尷尬,因為Flash也好Form也罷,它們制作的原型只能起到演示的作用,而無法直接生成對開發有贊助的代碼。此時,除了報班現學Android或iOS開發外,還有沒有別的方法呢?謎底是:“有!”?Framer?Studio給了我們一線曙光。

云南体彩网Framer?Studio是一個純編程實現的原型制作工具,有很強的動效實現能力,它的語言是基于Javas cript衍生出的Coffees cript。雖然語法與Android\iOS有不小的區別,但僅就動效這塊,很多邏輯是可以共通的。

云南体彩网(Framer的界面,左側是代碼區,右側可以直接看到實現效果,很方便)

當然,它的學習成本也會高一些,不過當你拿著一段Framer的源碼給工程師看的話,傍邊的一些動畫參數和實現邏輯,多少能給到他們些實際的贊助,所以付出和回報還是成正比的。關于運用Framer的流程,Twitter的設計師分享了他們的經驗,人人可以看下這篇文章:

另外,如果你專注于iOS平臺,也可以直接測驗考試一下Origami,這是個由Facebook團隊開發的原型工具,通過鏈接節點式的操作,無需自己寫代碼,在它最新的更新中,已經支持導出可供iOS和Android使用的代碼,這篇文章做了介:

(Origami最新版支持代碼的導出,雖然可用性還有待提升,但絕對值得連續關注)

三、協助開發:參數文檔

云南体彩网有了視頻Demo,有了交互原型,相信工程師們已經理解你要做什么了,那他們是否就可以愉快的把動效實現了呢?謎底是:紛歧定。一些簡單的動效,工程師或許可以憑經驗搞定。如果你的動效設計很復雜,涉及眾多的參數與速率變更,那僅憑你的描述與工程師肉眼的感覺,恐怕要出偏差。這時,就需要參數文檔的贊助了。

(譬如這段元素移動很復雜的動畫,工程師即使看明白了,也紛歧定能準確的實現)

云南体彩网想要自己的設計能被精確的實現,就一定要對實現的原理有所了解。根據實現原理,把對應的參數精確的寫出來,這就是參數文檔。對于動效來說,基本參數無非這三類:

  1. 動畫的起始時間、連續時間(duration\?offset)
  2. 變更的屬性(rotation\?position\?scale\?alpha)
  3. 運動速率(interpolator)

iOS與Android各自的法式語法不太相同,人人可以去官網翻看一下它們的開發者文檔,了解兩者在動效實現上也許的語法格式,然后對應著把這些參數標好,傳遞給工程師,他們就真正可以愉快的開發了。

(分享一下我的Andriod部分文檔,只要能把開發所需的參數標明,格式隨意)

云南体彩网當然,開發過程中少不了和工程師的賡續溝通(一些如像素位置、分歧機型屏幕比例的細節,包含可能涌現的誤差),換位思考,不克不及丟給他文檔或demo之后做甩手掌柜,那也是不負責任的表示。

總結:

云南体彩网簡單的說,要想準確轉達自己的設計可以分三步。

第一步:要快速可視化

你可以選擇任何用的順手的工具,把自己的想法快速準確的涌現出來,就已經是勝利的一半。

第二步:最大限度的還原使用場景

如果是PC端,就在電腦上演示。如果是移動端,就在手機上演示。如果可操作,那最好做可交互的原型,當然,是在時間成本允許的條件下。

第三步:把設計參數化,盡可能減少讓工程師憑感覺開發的情況

云南体彩网相信我,如果你不希望工程師憑感覺調UI顏色,那么動效同理。一份精確的文檔,是你專業性的體現。

最后我想提醒一下,本文提到了很多工具,而工具似乎有能讓人著迷的魔力。所以請注意了,千萬不要在追求工具的過程中迷失了設計的本源。片子《夜行者》里有一句臺詞:“想贏彩票的話,你得先賺夠買彩票的錢。”同樣,我們是設計師,想要工程師實現出酷炫的動效,你得先把它酷炫的設計出來。抓住一切機會提升自己的設計能力吧!那才是你最名貴的器械。

【從新人到大牛的交互設計完全修煉手冊】

菜鳥入門必讀好文!
《網易美女設計主管!交互設計菜鳥如何入門?》

阿里資深設計師手把手帶你認識交互設計
《交互設計那些事兒(一)》
《交互設計那些事兒(二)》

多位資深前輩經驗合集!交互設計師自學指南!
《交互設計師修煉指南!教你從零開始成為優秀交互設計師》

投稿者:

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網7daer.cn“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.7daer.cn/book/
設計微博:擁有粉絲量91萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.7daer.cn
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

sdcweixin

點贊
收藏 9
繼續閱讀相關文章

發表評論 已發布 1

還可以輸入 800 個字
 
 
載入中....
1 收藏