10 招動畫效果讓你的 App 更有逼格

大量的實驗表明:

動態(tài)表情包比靜態(tài)表情圖更有趣;

動態(tài)圖比靜態(tài)圖更生動有吸引力宅粥;

App 里的動態(tài)效果也要比靜態(tài)設(shè)計更能體現(xiàn)逼格参袱。

看到這里,你是不是開始計算自己的 App 有幾處動效了秽梅?那么如何通過動態(tài)效果來提升自己 App 的用戶體驗?zāi)啬ㄊ矗靠赐杲裉斓奈恼履憔椭涝趺醋隽恕?/p>

首先要強(qiáng)調(diào)一點,好好閱讀安卓和 iOS 的官方文檔企垦,會避免很多彎路环壤。蘋果和谷歌的官方開發(fā)者文檔,都有一些專門講解動態(tài)效果的章節(jié)钞诡。他們也鼓勵開發(fā)者通過添加動效來優(yōu)化 App 界面郑现。

另外,一個 App 是討喜還是令人討厭荧降,這之間只有一線之差接箫。如果你的動效打擾到用戶的使用,那還不如還原靜態(tài)效果朵诫。動效的目的是為了提高用戶的興趣辛友,增加用戶的參與度,可不是為了趕走用戶拗窃。

想提升用戶體驗瞎领?試試這10招動畫效果

無聊的 App 和有趣的體驗之間可能只差了一個動畫效果。好的動效能促進(jìn)用戶的參與感随夸,越用越愛用。

1.下拉體驗

下拉刷新算是基本的動態(tài)效果震放,大部分智能手機(jī)用戶都已習(xí)慣這種操作宾毒。這樣的刷新動效可以減少用戶在等待內(nèi)容加載時的焦躁感。以 Fitness Tracker 為例:它采用了一個小人在走路的動態(tài)效果殿遂。

2.登錄引導(dǎo)

動態(tài)效果用得好诈铛,用戶引導(dǎo)不能少。在登錄的過程中墨礁,添加動畫效果也可以打動用戶幢竹。下圖這個減肥 App 的用戶引導(dǎo)過程就設(shè)計的非常有趣,用戶在初次使用并設(shè)置自己的身高體重信息時恩静,界面不僅設(shè)計的干凈整潔焕毫,還配有動畫效果蹲坷。給人留下良好的第一印象。

3.加載體驗

頁面加載的過程中邑飒,你需要暫時轉(zhuǎn)移用戶的注意力循签,讓他們忽略等待這個頁面的時間。有些做的很好的動畫就完美地達(dá)成了這個效果疙咸。比如下面這個聊天應(yīng)用县匠,就用一根線連接起了所有的朋友。

4.有趣的引導(dǎo)頁

現(xiàn)在有很多 App 會把引導(dǎo)頁也做成動效的撒轮,這樣不僅看起來更有品質(zhì)乞旦,也吧你的 App 特色介紹的更具體吊奢。Devin Ruppert 的引導(dǎo)頁設(shè)計民逼,將一個復(fù)雜的 App 渲染成了一次其妙的冒險。讓用戶胃口大增艇搀。

5.互動性的教程

在做用戶的使用教程時臀蛛,你也可以通過動效的形式來指導(dǎo)用戶亲桦,再也不需要長篇累牘的文字說明了。展示遠(yuǎn)比說教的效果好浊仆。比如你想要引導(dǎo)用戶怎么使用你的 App客峭,光靠圖片和文字很難說講明白,但是一個簡單的動畫就能讓用戶秒懂如何操作使用抡柿。

6.清晰的反饋

用戶在使用你的 App 期間舔琅,時不時需要確認(rèn)自己的操作是否正確,如果操作失敗洲劣,原因是什么备蚓。這些都需要設(shè)計者考慮在內(nèi),在何時向用戶反饋他們的操作結(jié)果囱稽。比如郊尝,用戶完成支付操作后,如果能提示一個對號的動效就能讓他們覺得已經(jīng)搞定了战惊。

7.自然的過渡

從一個界面到另一個界面流昏,如果兩者沒有太大的關(guān)聯(lián),用戶會覺得突兀和尷尬吞获。如果有一個過度效果况凉,就會緩和一下這種。查看一下Life minimal 經(jīng)驗的視覺效果各拷,他們是如何過渡的刁绒。

8.動態(tài)新聞流

在設(shè)計的時候,很重要的一點是將所有的元素以特別的形式排列烤黍,并邀請用戶繼續(xù)查看后面的頁面知市。新聞類的應(yīng)用可以采用這種點擊標(biāo)題傻盟、顯示更多內(nèi)容的方式。我們推薦你查看關(guān)于 UI 導(dǎo)航內(nèi)容初狰。

9.卡片動畫

在 App 內(nèi)部使用的卡片式動畫可以簡潔地呈現(xiàn)所有復(fù)雜的數(shù)據(jù)莫杈。如果你想表達(dá)的內(nèi)容用幾句話都說不完,不妨采用卡片式的結(jié)構(gòu)作為你的解決方案奢入。使用 3D touch 提供的互動效果則更佳筝闹,如下面的 Travel Blog。

10.按鈕互動

按鈕的動畫效果可以算是一種強(qiáng)烈的需求呀腥光!此處能將功能和用戶期待結(jié)合起來关顷,用戶點擊按鈕之后,如果能看到動畫效果武福,也是一種操作成功的心里暗示议双。此外,如果效果設(shè)計的有趣捉片,還會有小驚喜平痰。看一下 MarketMe 原型提供的范例:他們是如何添加搜索按鈕的伍纫?

結(jié)語

動畫效果是一項提升用戶體驗的工程宗雇。有些是必須有的,有些是有了會更好的莹规。你要做的不是一個平淡無奇的產(chǎn)品赔蒲,而是能為用戶帶來難忘體驗的 App。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末良漱,一起剝皮案震驚了整個濱河市舞虱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌母市,老刑警劉巖矾兜,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異窒篱,居然都是意外死亡焕刮,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進(jìn)店門墙杯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人括荡,你說我怎么就攤上這事高镐。” “怎么了畸冲?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵嫉髓,是天一觀的道長观腊。 經(jīng)常有香客問我,道長算行,這世上最難降的妖魔是什么梧油? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮州邢,結(jié)果婚禮上儡陨,老公的妹妹穿的比我還像新娘。我一直安慰自己量淌,他們只是感情好骗村,可當(dāng)我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著呀枢,像睡著了一般胚股。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上裙秋,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天琅拌,我揣著相機(jī)與錄音,去河邊找鬼摘刑。 笑死进宝,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的泣侮。 我是一名探鬼主播即彪,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼活尊!你這毒婦竟也來了隶校?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤蛹锰,失蹤者是張志新(化名)和其女友劉穎深胳,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體铜犬,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡舞终,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了癣猾。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片敛劝。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖纷宇,靈堂內(nèi)的尸體忽然破棺而出夸盟,到底是詐尸還是另有隱情,我是刑警寧澤像捶,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布上陕,位于F島的核電站桩砰,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏释簿。R本人自食惡果不足惜亚隅,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望庶溶。 院中可真熱鬧煮纵,春花似錦、人聲如沸渐尿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽砖茸。三九已至隘擎,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間凉夯,已是汗流浹背货葬。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留劲够,地道東北人震桶。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像征绎,于是被迫代替她去往敵國和親蹲姐。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 1人柿、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,969評論 3 119
  • 只要問自己“七個問題”凫岖,就可以在三分鐘內(nèi)江咳,立刻說出一個“有開頭、有結(jié)尾哥放、有沖突歼指、有轉(zhuǎn)折”的完整故事。 ...
    亦想亦開閱讀 605評論 1 4
  • 1甥雕、cd到項目目標(biāo)文件夾踩身,輸入 heroku login使用已注冊的heroku賬號進(jìn)行登錄,注意防火墻設(shè)置社露,如果...
    三刀不留Ethan刀奈特閱讀 250評論 0 0