日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > 經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

時(shí)間:2024-03-07 15:46作者:下載吧人氣:16

@TCWison (阿里高級視覺設(shè)計(jì)師):隨著軟件與終端的發(fā)展,如今的用戶體驗(yàn)設(shè)計(jì)中動(dòng)效的作用正變得越發(fā)重要,也有越來越多的設(shè)計(jì)師開始嘗試讓自己的作品“動(dòng)”起來。但在實(shí)際工作中,相信大家常會(huì)有這樣的疑問:怎樣才能將自己精心設(shè)計(jì)的動(dòng)態(tài)效果,準(zhǔn)確的傳達(dá)給工程師,避免實(shí)現(xiàn)的偏差呢?下面我想根據(jù)自己的經(jīng)驗(yàn),拋磚引玉,和大家聊一下這個(gè)話題。

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

沒錯(cuò),我們是設(shè)計(jì)師,設(shè)計(jì)師要做的是可視化。對于動(dòng)效來說,憑空描述永遠(yuǎn)是隔靴搔癢,將自己心中的設(shè)計(jì)最快速的可視化,是實(shí)現(xiàn)的第一步。

一、準(zhǔn)確展示:視頻Demo

視頻Demo是個(gè)不錯(cuò)的開始,一段可以反復(fù)播放并在大部分設(shè)備上均可觀看的視頻,是讓別人快速理解自己想法的最佳媒介。制作視頻Demo,本人最常用的工具是After Effects。AE對于動(dòng)效的控制與表現(xiàn)能力,至今無人能出其右,是我心目中最佳的概念設(shè)計(jì)工具。

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(不夸張的說,通過對速度曲線與層級的控制,AE能實(shí)現(xiàn)你所見過任何的動(dòng)效)

除視頻外,AE的另一個(gè)優(yōu)勢是,它輸出的PNG序列幀素材可以直接應(yīng)用到一些PC甚至移動(dòng)端的軟件中,作為實(shí)現(xiàn)效果。

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(Andriod L中一些控件動(dòng)畫的實(shí)現(xiàn)方式,就是通過程序直接播放設(shè)計(jì)好的序列幀素材)

二、操作體驗(yàn):交互原型

視頻Demo的局限是無法交互,而很大一部分動(dòng)效都是在用戶與界面交互時(shí)觸發(fā)的。這部分動(dòng)效的啟動(dòng)時(shí)機(jī),與手勢的關(guān)系,僅靠視頻Demo就無法100%準(zhǔn)確的傳達(dá)了。這時(shí),如果能有一個(gè)可交互的原型,很多問題就會(huì)迎刃而解。

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

    制作好的原型是否便于多人分享是否可以直接輸出可用于開發(fā)的參數(shù)

基于這兩點(diǎn),我個(gè)人的第一個(gè)選擇是Flash。

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(沒錯(cuò),就是Adobe Flash,這個(gè)優(yōu)缺點(diǎn)都很鮮明的軟件)

由于Apple的原因,F(xiàn)lash如今的境況可算是江河日下。但作為一個(gè)動(dòng)效原型工具,它卻有一些獨(dú)特的優(yōu)勢。

優(yōu)勢 1:可以直接導(dǎo)入AE生成的序列幀素材。

對于我這種以AE作為動(dòng)效設(shè)計(jì)起始的人來說,這點(diǎn)太重要了。它意味著無需任何重復(fù)勞動(dòng),只需要在Flash中添加一些基于AS3.0的交互代碼,就可以完成原型的制作,并保證自己最初的設(shè)計(jì)思路在原型階段不打折扣的實(shí)現(xiàn)。

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(Action Script是可視化很強(qiáng)的一門語言,結(jié)合AE的素材,你設(shè)計(jì)的動(dòng)效基本可以完美復(fù)現(xiàn))

優(yōu)勢2:可以導(dǎo)出.apk或.ipa的安裝包,共享給任何有手機(jī)的人。

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

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(左一就是通過Flash打包生成的.apk文件,可以直接復(fù)制到手機(jī)上安裝)

另外一些可關(guān)注的工具,還有Pixate和Form,它們都可以通過共享工程文件的方式遠(yuǎn)程傳遞,還能通過官方App將原型投射在手機(jī)上實(shí)時(shí)預(yù)覽,缺點(diǎn)是只能做一些基礎(chǔ)的效果,創(chuàng)新一點(diǎn)兒的就搞不定了,不過他們都在不斷地迭代更新,尤其是后者,剛被Google收購,未來說不定會(huì)有快速的發(fā)展。

我個(gè)人的第二個(gè)工具選擇,是Framer Studio。當(dāng)我把制作好的原型拿給工程師看的時(shí)候,經(jīng)常被問到這樣一個(gè)問題:“能不能把源碼給我們看一下?”這時(shí)氣氛通常會(huì)比較尷尬,因?yàn)镕lash也好Form也罷,它們制作的原型只能起到演示的作用,而無法直接生成對開發(fā)有幫助的代碼。此時(shí),除了報(bào)班現(xiàn)學(xué)Android或iOS開發(fā)外,還有沒有別的辦法呢?答案是:“有!” Framer Studio給了我們一線曙光。

Framer Studio是一個(gè)純編程實(shí)現(xiàn)的原型制作工具,有很強(qiáng)的動(dòng)效實(shí)現(xiàn)能力,它的語言是基于Javas cript衍生出的Coffees cript。雖然語法與AndroidiOS有不小的區(qū)別,但僅就動(dòng)效這塊,很多邏輯是可以共通的。

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(Framer的界面,左側(cè)是代碼區(qū),右側(cè)可以直接看到實(shí)現(xiàn)效果,很方便)

當(dāng)然,它的學(xué)習(xí)成本也會(huì)高一些,不過當(dāng)你拿著一段Framer的源碼給工程師看的話,當(dāng)中的一些動(dòng)畫參數(shù)和實(shí)現(xiàn)邏輯,多少能給到他們些實(shí)際的幫助,所以付出和回報(bào)還是成正比的。

另外,如果你專注于iOS平臺(tái),也可以直接嘗試一下Origami,這是個(gè)由Facebook團(tuán)隊(duì)開發(fā)的原型工具,通過鏈接節(jié)點(diǎn)式的操作,無需自己寫代碼,在它最新的更新中,已經(jīng)支持導(dǎo)出可供iOS和Android使用的代碼

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(Origami最新版支持代碼的導(dǎo)出,雖然可用性還有待提升,但絕對值得持續(xù)關(guān)注)

三、協(xié)助開發(fā):參數(shù)文檔

有了視頻Demo,有了交互原型,相信工程師們已經(jīng)理解你要做什么了,那他們是否就可以愉快的把動(dòng)效實(shí)現(xiàn)了呢?答案是:不一定。一些簡單的動(dòng)效,工程師或許可以憑經(jīng)驗(yàn)搞定。如果你的動(dòng)效設(shè)計(jì)很復(fù)雜,涉及眾多的參數(shù)與速率變化,那僅憑你的描述與工程師肉眼的感覺,恐怕要出偏差。這時(shí),就需要參數(shù)文檔的幫助了。

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

(譬如這段元素移動(dòng)很復(fù)雜的動(dòng)畫,工程師即使看明白了,也不一定能準(zhǔn)確的實(shí)現(xiàn))

想要自己的設(shè)計(jì)能被精確的實(shí)現(xiàn),就一定要對實(shí)現(xiàn)的原理有所了解。根據(jù)實(shí)現(xiàn)原理,把對應(yīng)的參數(shù)精確的寫出來,這就是參數(shù)文檔。對于動(dòng)效來說,基本參數(shù)無非這三類:

    動(dòng)畫的起始時(shí)間、持續(xù)時(shí)間(duration offset)變化的屬性(rotation position scale alpha)運(yùn)動(dòng)速率(interpolator)

iOS與Android各自的程序語法不太相同,大家可以去官網(wǎng)翻看一下它們的開發(fā)者文檔,了解兩者在動(dòng)效實(shí)現(xiàn)上大概的語法格式,然后對應(yīng)著把這些參數(shù)標(biāo)好,傳遞給工程師,他們就真正可以愉快的開發(fā)了。

經(jīng)驗(yàn)分享!如何準(zhǔn)確的向工程師傳達(dá)動(dòng)效設(shè)計(jì)?

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

當(dāng)然,開發(fā)過程中少不了和工程師的不斷溝通(一些如像素位置、不同機(jī)型屏幕比例的細(xì)節(jié),包括可能出現(xiàn)的誤差),換位思考,不能丟給他文檔或demo之后做甩手掌柜,那也是不負(fù)責(zé)任的表現(xiàn)。

總結(jié):

簡單的說,要想準(zhǔn)確傳達(dá)自己的設(shè)計(jì)可以分三步。

第一步:要快速可視化

你可以選擇任何用的順手的工具,把自己的想法快速準(zhǔn)確的呈現(xiàn)出來,就已經(jīng)是成功的一半。

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

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

第三步:把設(shè)計(jì)參數(shù)化,盡可能減少讓工程師憑感覺開發(fā)的情況

相信我,如果你不希望工程師憑感覺調(diào)UI顏色,那么動(dòng)效同理。一份精確的文檔,是你專業(yè)性的體現(xiàn)。

最后我想提醒一下,本文提到了很多工具,而工具似乎有能讓人著迷的魔力。所以請注意了,千萬不要在追求工具的過程中迷失了設(shè)計(jì)的本源。電影《夜行者》里有一句臺(tái)詞:“想贏彩票的話,你得先賺夠買彩票的錢。”同樣,我們是設(shè)計(jì)師,想要工程師實(shí)現(xiàn)出酷炫的動(dòng)效,你得先把它酷炫的設(shè)計(jì)出來。抓住一切機(jī)會(huì)提升自己的設(shè)計(jì)能力吧!那才是你最寶貴的東西。

標(biāo)簽TCWison,ps基礎(chǔ)教程,理論教程,ps理論,ps知識(shí)

相關(guān)下載

查看所有評論+

網(wǎng)友評論

網(wǎng)友
您的評論需要經(jīng)過審核才能顯示

熱門閱覽

最新排行

公眾號(hào)

主站蜘蛛池模板: 国产精品免费_区二区三区观看 | 成人网18免费看 | 黄 色 三 片 | 国产90后美女露脸在线观看 | 国产日韩欧美精品 | 欧美视频在线观看 | 狼伊千合综网中文 | 日韩欧美国产一区二区三区 | 久草在线资源网站 | 俄罗斯美女在线观看一区 | 欧美一及| 九九大香尹人视频免费 | 欧美一区二区三区男人的天堂 | 窝窝女人体国产午夜视频 | 欧美一级v片 | 在线播放高清国语自产拍免费 | 中文偷拍视频在线观看 | 亚洲伦乱 | 国产一区二区三区免费在线视频 | 成人欧美一区二区三区视频 | 日本一区午夜爱爱 | 久久久久久免费播放一级毛片 | 久草视频资源站 | 久久精品亚洲乱码伦伦中文 | 亚洲日本va| 欧美成人观看免费完全 | 国产一级片毛片 | 手机国产日韩高清免费看片 | 一级做a爱过程免费观看 | 国产精品极品美女自在线看免费一区二区 | 久久国产精品久久久久久 | 久久精品国产三级不卡 | 中文字幕乱码中文乱码综合 | 在线观看国产精品入口 | 我要看欧美精品一级毛片 | 国产综合成人久久大片91 | 亚洲成人欧美 | 国产理论视频 | 韩国一级毛片在线观看 | 爽爽免费视频 | 欧美最大成人毛片视频网站 |