app動效設計

Ⅰ UI設計：如何使用PS時間軸製作APP界面動效

首先，得看你在什麼平台什麼機型上面展示，現在移動端很雜，具體要做什麼機型的然內後在網路那個平台機型圖標容尺寸，就可以了。 做練習的話一般大家通常會按照蘋果最新機型做，你可以找找蘋果的尺寸順便找下手機素材，展示的時候放到手機裡面展示效...

Ⅱ UI動效用什麼軟體做

動效設計軟體有哪些？
看到這里可能你最想要知道的就是哪些軟體可以做動效？
目前市面上確實蠻多的，絲路教育小編建議學好一個，夠用就好。學多而不精其實就是浪費時間！
1.Adobe After Effects
AE這個軟體我想都該知道~火得一塌糊塗，如果我沒猜錯的話，它目前屬於設計師學動效的首選。
它的特點就是強大且牛逼。基本上要的功能都有~UI動效製作其實只是用到了這個軟體很小的一部分功能而已~要知道很多美國大片都是通過它來進行後期合成製作的~ 配合PS和AI等自家軟體來說，更是得心應手啊~dribbble上炒雞多的大神都是用這個軟體在show哦~畢竟這個軟體做demo那是擰〔犇逼的~
但是有些效果程序猿不見得能夠幫你實現出來哦~ 因為實際的項目產品受太多的制約啦~木有那麼多程序猿會沒事給你做動效的！
2.Adobe Photoshop
可能很多人都認為ps只用來作圖和處理圖像的，並不知道ps可以做gif~然而當AE沒有火起來的時候，我們這些老ui設計師們都是用ps做gif，用flash做demo（過去我們只需要做PC桌面的動效）。如果我沒記錯的話，ps從cs6之後開始進一步加強了動效的模塊，現在的版本能夠實現很多相對復雜的動效哦~
而筆者喜歡用ps來製作簡單的表情動畫，逐幀動畫用得居多
3.Adobe Flash
Flash可以說是過去的王者，也是由於時代的發展原因，現在基本被淘汰了，這里不多做解釋，具體可以網路哦。（據說特別耗費cpu和佔用內存，軟體裡面有都爆卡~不淘汰才怪）現在很多很low的網頁游戲還在用這種技術~
4.Pixate
這個軟體被大牛Google收購了~然而它被Google收購一年後：Pixate Studio宣布卻於10月31號被停止更新了~凄凄慘慘戚戚。簡單說下它的優缺點：
Pixate是圖層類交互原型軟體。優點：可交互，共享性強，和Sketch結合相對高，同時對Google Material Design的支持比較好，有許多MD相關預設。Pixate的缺點是沒有時間線，層級管理不是很明確，圖層一多就會非常的繁雜。
5.Origami
這個軟體可以用一句話來形容：超強大的高難度原型工具。
要是沒點代碼知識做壓驚~~建議遠處觀望就好~
6.Hype 3
hype 3也算是火了一小段時間的~號稱無代碼動效神器，像AE一樣使用時間軸就做可互動的動畫。PC、手機、pad端都可以直接訪問（以web的形式），也可以導出視頻或者GIF。3.0版還有物理特性和彈性曲線，可以發揮更強大的動畫效果。對中國人來講，它原生支持中文這一點也非常棒！配合sketch效果也是杠杠的·~~
7.Flinto
界面跟Sketch很像，如果會用sketch那麼上手很快。能夠快速實現各種滾動、轉場、點擊反饋效果。手機和電腦端的預覽都非常的流暢。貌似現在用的人不少。
8.Principle
這個軟體的和上面的flinto有點類似~界面和sketch類似，同時配合sketch也是非常方便。它主要是做 2 個頁面間過渡專場特效，元素切換，細節動效的工具。優點很明顯，效率高，質感好，缺點就是不能做整套原型。
9.CINEMA 4D
說到C4D或者大家第一反應是它是三維軟體啊~沒錯！但是它做起動效來也是帥破天際的。
10.keynote
keynote相當於windows的powerpoint，是個幻燈片軟體。但是！或許你並不知道，據說蘋果的交互設計師都是用keynote做交互演示的......只要能夠熟練掌握這個軟體，目前app里的絕大多數動效都是可以做出來的~但是相對復雜一點的動效實現起來就有點不夠.......但是已經很屌了好吧~~筆者經常為了省事直接都是用它做個簡單demo給程序猿看的。快捷方便啊~要知道時間就是金錢啊！
好啦~由於絲路小編也並不是全部了解目前市面上的動效軟體，按照自己的理解基本上一些相對主流的動效製作軟體就是上面這些，如有漏或者不對的地方還請見諒~

Ⅲ 設計師設計出來的app動效程序員如何去做

想要說服人，最好先理解對方吧。
實現一個牛B的功能在研發眼裡會比反復調試一個UI界面要更內有成就感的多。而且容可能研發也真心覺得這個UI視覺並不好看，所以更加不願意合作。
所以遇到一個願意認真仔細調試UI的研發人員，請主動給他們32個贊。

首先你得讓研發人員清晰的認識到按照你說的這樣做對讓產品本身有什麼好處？這個得靠你的溝通能力了。我的建議是不要等到需要上需求了才跟研發人員說這個怎麼怎麼好，功夫在線下。平時就該多拿一些別人的產品里比較好的設計給研發看看，勾起他們的興趣，讓他們心裡認可好UI的價值。
另外就是不要把自己放在一個下命令的角色位置，多嘗試跟研發人員多溝通，不同的動效和視覺在研發時的麻煩程度也是不一樣的。聽聽研發人員的意見，不要強制只能按照你想的來。

總之，多理解，多溝通。都不容易

Ⅳ 如何開發android app 動效

1、APP動效的外在美

一段動效首先需要是生動且有趣的，不僅要有好看的外觀還要有流暢的體驗。要做到這點，需要賦予動效以生命力，具體有如下幾種方法：

1.1模擬慣性

現實中物體的運動是有慣性的，比如公交車突然剎車時乘客會突然往前一倒。

1.2模擬重力

與慣性一樣，重力也是現實中存在的現象，所有物體在無向上的支持力的情況下都會下墜，比如傾倒垃圾。一般APP刪除卡片的動效就是橫向滑動直至消失， 但是下面這段動效卻加入了重力效應。即卡片在橫向滑動的同時也在翻轉並下墜，就像現實中往垃圾桶中傾倒垃圾一樣。在使得整個動效生動有趣的同時也便於用戶理解操作含義。

1.3均勻變速

一個優秀的動效肯定不會是勻速運動的，勻速運動的物體顯得生硬和死板，就像機器人一樣。要想讓一個圖像運動的有活力，就需要對其運動的速度進行「設計」。

1.4碎片化運動

使一款應用變得個性十足的一個好方法就是給它加上炫酷的動效，而使一個動效炫酷的常用方法就是碎片化運動。簡單說就是把界面中的圖像拆解成一個個碎 片，然後讓它們進行不同步的運動，利用時間間隔和變速產生炫酷的效果。

2、APP動效的內在美

真正優秀的動效不是只有漂亮外表的花瓶，還得具備優化交互和提升體驗的作用。

2.1引導

圖形界面本是難懂且抽象的，增強引導是降低軟體操作難度和提升用戶體驗的好方法。

2.1.1動態聚焦

通過動態化的處理引導用戶聚焦界面的關鍵部位，以使體驗更加的流暢。青蛙能夠快速捕捉移動中的物體，人眼也具有相似特徵，運動中的物體總能引起下意識 的關注。

2.1.2示意過渡

過渡動效就是給界面的變化加上流暢的過渡，目的是引導用戶理解到底發生了什麼，而不會使其不知所措。

2.1.3空間轉場

轉場動效是被設計師所普遍重視的一種特效，它的作用也是引導用戶，讓用戶更好地理解頁面跳轉，知道自己身在何方。

2.2簡化

有時優秀的設計就是出色的簡化。簡化界面信息和交互層級可以降低操作難度和提升用戶體驗。

2.2.1隱藏二級操作項

利用動效可以使界面中的部分信息隱藏，當進行某些操作後隱藏的內容會動態展開，從而達到簡化初始界面的目的，使界面簡潔大氣。

2.2.2 按鈕動效化

使按鈕動效化能夠讓界面重要信息動態浮現在同一按鈕上，使得用戶的目光緊緊盯著按鈕，弱化了頁面跳轉帶來的干擾，使體驗更加流暢。

2.3增強反饋

軟體的反饋對於體驗的提高來講至關重要，增強反饋可以起到更好的提示作用，使體驗過程更加輕松和愉悅。抖動是增強反饋的方法之一，用動效反饋替代圖形 文字的靜態提示，更加自然和引人注目。

Ⅳ AE做出來的app動效怎麼在實際app中實現

Ps、Flash、Ae都可以，用在交互動效中flash就可以AE是純粹的視覺特效軟體雖然定位是影視後期專，但是網頁也有使屬用，作為UI設計師用AE只能說你很新潮很厲害，AE也有自己基於JavaScript語言的表達式來實現高級動畫控制，目前來看AE現在用的最多的領域是CG、多媒體行業的領域。 Flash給大多數人的印象，這是一個矢量動畫軟體，但是容易忽略的一點就是動畫並非是Flash的全部，它並不像AE一樣純粹的構建視覺特效它還可以做游戲、做網站開發，能做很多東西一個明顯的特徵就是「交互性」，比如玩游戲就是一種交互。 作為UI設計師flash用於做動效就可以，畢竟AE做出來的東西更適合看。

Ⅵ app 動效是用什麼軟體設計的

1. app動效的外在美
一段動效首先需要是生動且有趣的，不僅要有好看的外觀還要有流暢的體驗。要做到這點，需要賦予動效以生命力，具體有如下幾種方法：
1.1 模擬慣性
現實中物體的運動是有慣性的，比如公交車突然剎車時乘客會突然往前一倒。仔細觀察下面3段動效，圖像在變化（放大、縮小和翻轉）的末端都會「超出」一點再立即「反彈」回來，如此的處理方法使得整個動效充滿活力，顯得生動有趣。

1.2 模擬重力
與慣性一樣，重力也是現實中存在的現象，所有物體在無向上的支持力的情況下都會下墜，比如傾倒垃圾。一般app刪除卡片的動效就是橫向滑動直至消失，但是下面這段動效卻加入了重力效應。即卡片在橫向滑動的同時也在翻轉並下墜，就像現實中往垃圾桶中傾倒垃圾一樣。在使得整個動效生動有趣的同時也便於用戶理解操作含義。
1.3 均勻變速
一個優秀的動效肯定不會是勻速運動的，勻速運動的物體顯得生硬和死板，就像機器人一樣。要想讓一個圖像運動的有活力，就需要對其運動的速度進行「設計」。仔細觀察下圖所示動效，雖然界面中不同元素的運動速度不盡相同，但其運動均遵循一定的原則，其中之一就是均勻變速，切記「急起」。就是說界面元素在運動時的初始速度要為0，以勻加速開始運動，而在運動結束階段往往是可以急停的。

1.4 碎片化運動
使一款應用變得個性十足的一個好方法就是給它加上炫酷的動效，而使一個動效炫酷的常用方法就是碎片化運動。簡單說就是把界面中的圖像拆解成一個個碎片，然後讓它們進行不同步的運動，利用時間間隔和變速產生炫酷的效果。就如下面一則動效，圖像中的不同元素有節奏的呈現，利用時間差來製造效果。

2. app動效的內在美
真正優秀的動效不是只有漂亮外表的花瓶，還得具備優化交互和提升體驗的作用。下面總結了3個動效的「內在美」，分別為引導、簡化和增強反饋。
2.1 引導
圖形界面本是難懂且抽象的，增強引導是降低軟體操作難度和提升用戶體驗的好方法。
2.1.1 動態聚焦
通過動態化的處理引導用戶聚焦界面的關鍵部位，以使體驗更加的流暢。青蛙能夠快速捕捉移動中的物體，人眼也具有相似特徵，運動中的物體總能引起下意識的關注。如下圖所示動效，屏幕上方的數字不是直接顯示一個數值，而是從0迅速遞增到該數值，特意表現一個動態的效果，目的就是為了吸引用戶的目光，起到聚焦的作用。國內的支付寶錢包APP也利用了此類特效。
2.1.2 示意過渡
過渡動效就是給界面的變化加上流暢的過渡，目的是引導用戶理解到底發生了什麼，而不會使其不知所措。如下圖所示動效，添加卡片的過程進行了生動的模擬，讓用戶很輕易地理解發生了什麼。試想一下，如果該頁面沒有滑動效果，而是直接生硬的跳轉，是不是差勁很多？
2.1.3 空間轉場
轉場動效是被設計師所普遍重視的一種特效，它的作用也是引導用戶，讓用戶更好地理解頁面跳轉，知道自己身在何方。下圖所示一則動效就是一個漂亮的轉場動效，為了避免兩個頁面之間的跳轉過於生硬，利用動效填補上了頁面跳轉的中間過程，使得體驗更加流暢和自然。

2.2 簡化
有時優秀的設計就是出色的簡化。簡化界面信息和交互層級可以降低操作難度和提升用戶體驗。
2.2.1 隱藏二級操作項
利用動效可以使界面中的部分信息隱藏，當進行某些操作後隱藏的內容會動態展開，從而達到簡化初始界面的目的，使界面簡潔大氣。

2.2.2 按鈕動效化
使按鈕動效化能夠讓界面重要信息動態浮現在同一按鈕上，使得用戶的目光緊緊盯著按鈕，弱化了頁面跳轉帶來的干擾，使體驗更加流暢。
2.3 增強反饋
軟體的反饋對於體驗的提高來講至關重要，增強反饋可以起到更好的提示作用，使體驗過程更加輕松和愉悅。抖動是增強反饋的方法之一，用動效反饋替代圖形文字的靜態提示，更加自然和引人注目。下圖所示動效出自蘋果的Pages軟體，當進入編輯態後待編輯對象進入不斷的抖動狀態，起到很好的引導作用。

3. 總結
動效化顯然已成為移動互聯網產品的新趨勢，如何設計出有趣且吸引人的動效已成為設計師們的新課題。不同的產品適合不同類型的動效，有些產品適合炫酷的動效，有些則不適合。切記不要把動效設計成華而不實的花架子，而應該將其視為提升用戶體驗的新方法。

Ⅶ 如何選擇合適的App動效設計工具

引用篇最近站酷上看到的文章，覺得講得不錯，原文地址：如何准確的向工程師傳達動效設計？|UE|原創/自譯教程|TCWison

隨著軟體與終端的發展，如今的用戶體驗設計中動效的作用正變得越發重要，也有越來越多的設計師開始嘗試讓自己的作品「動」起來。但在實際工作中，相信大家常會有這樣的疑問：怎樣才能將自己精心設計的動態效果，准確的傳達給工程師，避免實現的偏差呢？下面我想根據自己的經驗，拋磚引玉，和大家聊一下這個話題。
試想一下，在一個沉靜的的夜晚，你正為一個界面的過渡動畫而苦思冥想，突然一道靈感之光穿越你的腦海，完美的方案浮現眼前。此刻你最想做的，恐怕不是翻閱開發文檔研究實現原理，「老子得立刻把它表現出來。」
沒錯，我們是設計師，設計師要做的是可視化。對於動效來說，憑空描述永遠是隔靴搔癢，將自己心中的設計最快速的可視化，是實現的第一步。
一、准確展示：視頻Demo
視頻Demo是個不錯的開始，一段可以反復播放並在大部分設備上均可觀看的視頻，是讓別人快速理解自己想法的最佳媒介。製作視頻Demo，本人最常用的工具是After Effects。AE對於動效的控制與表現能力，至今無人能出其右，是我心目中最佳的概念設計工具。

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

二、操作體驗：交互原型
視頻Demo的局限是無法交互，而很大一部分動效都是在用戶與界面交互時觸發的。這部分動效的啟動時機，與手勢的關系，僅靠視頻Demo就無法100%准確的傳達了。這時，如果能有一個可交互的原型，很多問題就會迎刃而解。
對於可交互的原型（Prototype），網上已經有很多文章在討論，製作工具也五花八門（Flash、Adobe Edge、Quartz Composer、Keynote、Framer、Pixate、Form...），我們該如何選擇呢？對於這個問題，我主要看兩個點：1、製作好的原型是否便於多人分享。2、是否可以直接輸出可用於開發的參數。

基於這兩點，我個人的第一個選擇是Flash。

由於Apple的原因，Flash如今的境況可算是江河日下。但作為一個動效原型工具，它卻有一些獨特的優勢。
優勢1：可以直接導入AE生成的序列幀素材。

對於我這種以AE作為動效設計起始的人來說，這點太重要了。它意味著無需任何重復勞動，只需要在Flash中添加一些基於AS3.0的交互代碼，就可以完成原型的製作，並保證自己最初的設計思路在原型階段不打折扣的實現。
優勢2：可以導出.apk或.ipa的安裝包，共享給任何有手機的人。

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

另外一些可關注的工具，還有Pixate和Form，它們都可以通過共享工程文件的方式遠程傳遞，還能通過官方App將原型投射在手機上實時預覽，缺點是只能做一些基礎的效果，創新一點兒的就搞不定了，不過他們都在不斷地迭代更新，尤其是後者，剛被Google收購，未來說不定會有快速的發展。
我個人的第二個工具選擇，是Framer Studio。當我把製作好的原型拿給工程師看的時候，經常被問到這樣一個問題：「能不能把源碼給我們看一下？」這時氣氛通常會比較尷尬，因為Flash也好Form也罷，它們製作的原型只能起到演示的作用，而無法直接生成對開發有幫助的代碼。此時，除了報班現學Android或iOS開發外，還有沒有別的辦法呢？答案是：「有！」 Framer Studio給了我們一線曙光。
Framer Studio是一個純編程實現的原型製作工具，有很強的動效實現能力，它的語言是基於Javas cript衍生出的Coffees cript。雖然語法與Android\iOS有不小的區別，但僅就動效這塊，很多邏輯是可以共通的。

當然，它的學習成本也會高一些，不過當你拿著一段Framer的源碼給工程師看的話，當中的一些動畫參數和實現邏輯，多少能給到他們些實際的幫助，所以付出和回報還是成正比的。關於運用Framer的流程，Twitter的設計師分享了他們的經驗，大家可以看下這篇文章：《Twitter視頻功能設計流程全程剖析》
另外，如果你專注於iOS平台，也可以直接嘗試一下Origami，這是個由Facebook團隊開發的原型工具，通過鏈接節點式的操作，無需自己寫代碼，在它最新的更新中，已經支持導出可供iOS和Android使用的代碼，這篇文章做了介：《Introcing Origami Live》

三、協助開發：參數文檔
有了視頻Demo，有了交互原型，相信工程師們已經理解你要做什麼了，那他們是否就可以愉快的把動效實現了呢？答案是：不一定。一些簡單的動效，工程師或許可以憑經驗搞定。如果你的動效設計很復雜，涉及眾多的參數與速率變化，那僅憑你的描述與工程師肉眼的感覺，恐怕要出偏差。這時，就需要參數文檔的幫助了。

想要自己的設計能被精確的實現，就一定要對實現的原理有所了解。根據實現原理，把對應的參數精確的寫出來，這就是參數文檔。對於動效來說，基本參數無非這三類：
1、動畫的起始時間、持續時間（ration\ offset）
2、變化的屬性（rotation\ position\ scale\ alpha）
3、運動速率（interpolator）
iOS與Android各自的程序語法不太相同，大家可以去官網翻看一下它們的開發者文檔，了解兩者在動效實現上大概的語法格式，然後對應著把這些參數標好，傳遞給工程師，他們就真正可以愉快的開發了。

當然，開發過程中少不了和工程師的不斷溝通（一些如像素位置、不同機型屏幕比例的細節，包括可能出現的誤差），換位思考，不能丟給他文檔或demo之後做甩手掌櫃，那也是不負責任的表現。
總結：
簡單的說，要想准確傳達自己的設計可以分三步。
第一步：要快速可視化。
你可以選擇任何用的順手的工具，把自己的想法快速准確的呈現出來，就已經是成功的一半。
第二步：最大限度的還原使用場景。
如果是PC端，就在電腦上演示。如果是移動端，就在手機上演示。如果可操作，那最好做可交互的原型，當然，是在時間成本允許的條件下。
第三步：把設計參數化，盡可能減少讓工程師憑感覺開發的情況。
相信我，如果你不希望工程師憑感覺調UI顏色，那麼動效同理。一份精確的文檔，是你專業性的體現。
最後我想提醒一下，本文提到了很多工具，而工具似乎有能讓人著迷的魔力。所以請注意了，千萬不要在追求工具的過程中迷失了設計的本源。電影《夜行者》里有一句台詞：「想贏彩票的話，你得先賺夠買彩票的錢。」同樣，我們是設計師，想要工程師實現出酷炫的動效，你得先把它酷炫的設計出來。抓住一切機會提升自己的設計能力吧！那才是你最寶貴的東西。

Ⅷ APP中一些簡單的載入動效是如何實現的需要用什麼軟體去做

Ps、Flash、Ae都可以，用在交互動效中flash就可以AE是純粹的視覺特效軟體雖然定版位是影視後期，權但是網頁也有使用，作為UI設計師用AE只能說你很新潮很厲害，AE也有自己基於JavaScript語言的表達式來實現高級動畫控制，目前來看AE現在用的最多的領域是CG、多媒體行業的領域。
Flash給大多數人的印象，這是一個矢量動畫軟體，但是容易忽略的一點就是動畫並非是Flash的全部，它並不像AE一樣純粹的構建視覺特效它還可以做游戲、做網站開發，能做很多東西一個明顯的特徵就是「交互性」，比如玩游戲就是一種交互。
作為UI設計師flash用於做動效就可以，畢竟AE做出來的東西更適合看。

Ⅸ Web，App中添加動效設計有哪些優點

曾近某高級產品經理指導工作中一再的強調要炫酷炫酷，動效交互不能少。於是苦逼兮兮地內在原容型上加各種交互。但是最終做出來的成品很差強人意。用戶體驗糟糕，炫酷的效果大打折扣。吸取了如此教訓，那一起來看看動效炫酷的效果應該如何做吧~
沒有用戶請求就不會產生交互當你關閉一個標簽時，它就會從屏幕上消失：簡單地說，這給了用戶一個即時的反饋動作(這個視覺效果對我們來說非常重要)。深入地說，動作讓人類感受到了現實生活中的行為。動畫讓界面變得鮮活，帶給用戶真實的響應感覺。

Ⅹ 國外漂亮的APP 動效UI設計有哪些

目前在國內UI還是一個相對陌生的詞，即便是一些設計人員也對這個詞不太了解。版我們經常看到一些權招聘廣告寫著：招聘界面美工、界面美術設計師等等。這表明在國內對UI的理解還停留在美術設計方面，認為UI的工作只是描邊畫線，缺乏對用戶交互的重要性的理解；另一方面在軟體開發過程中還存在重技術而不重應用的現象。許多商家認為軟體產品的核心是技術，而UI僅僅是次要的輔助，這點在人員的比例與待遇上可以表現出來。 但這不是UI設計真正的價值體現，只是UI設計發展的一個必經過程。《轉UI網》很看好這個行業。