來點驚喜!APP動效設計分為哪幾種?

編者按:什么樣的動效讓人舒服,什么樣的動效讓人一下就想到某個產品,什么樣的動效讓人沉浸其中?今天百度的同學從這三個維度,分別聊聊對應的APP動效設計,想給用戶一個驚喜的同學,來漲姿勢吧。

14年你錯過了哪些精品教程+高人氣資源?來這兒搜羅 >>>?《年度頒獎盛典!2014年最受歡迎的設計資源大盤點》

如果把APP比作一位美女,那么icon是她的證件照,界面是她的形體,而動效則是她的肢體語言。在如今玲瑯滿目的App中,如何脫穎而出?設計師要考慮的,不光是產品如何更合理的展現結構與功能,更重要的是思考自己的App是否能做到簡便易懂的同時,又給用戶新穎感?

此時,有限的屏幕空間緊靠文字的提示是不夠的,App需要更多的新鮮血液——“動效設計”。動效設計可以拓展空間內容,簡化引導流程,降低學習成本,更重要的是給用戶帶來意想不到——類似于“Cool”的驚喜,它就像人類的肢體語言,通過肢體語言傳達更多的抽象信息和性格展現。肢體語言(body language)又稱身體語言,是指通過頭、眼、頸、手、肘、臂、身、胯、足等人體部位的協調活動來傳達人物的思想,形象地借以表情達意的一種溝通方式。一個人要向外界傳達完整的信息,單純的語言成分只占7/100,聲調占38/100,另外的55/100信息都需要由非語言的體態來傳達。肢體語言的重要性可見一斑。

肢體語言大致可分為三類動作:基本動作,招牌動作和高難度動作,這三種動作是如何在APP設計中體現呢?

一、基本動效讓用戶舒服

基本動作也可稱為日常動作,如坐立,行走,握手,擁抱等.對應APP中的基本動作分三類:

  1. 指向性動效(滑動,彈出等)
  2. 提示性動效(滑動刪除,下拉刷新等)
  3. 空間擴展(翻動,放大等)

不要小瞧基本動作,試想當你看到一位美女起身向你走來結果駝背,外八字,是啥感覺!APP亦是如此。流暢,自然映射,重力模擬這些看似簡單但卻能讓用戶在操作時輕松自在并有強烈的代入感。這類動效最重要的是讓用戶感到毫無負擔又如沐春風,也就是不要奪人眼球,悄無聲息的順應用戶行為,引導用戶需求。

這類動效在設計過程中需要主意幾點:

  1. 系統兼容和資源占用
  2. 動態速度的節奏
  3. 仿生性or現實重現

舉例:

動效控件

來點驚喜!APP動效設計分為哪幾種?

2.加載動畫

來點驚喜!APP動效設計分為哪幾種?

3.翻頁動畫

來點驚喜!APP動效設計分為哪幾種?

二、招牌動效加深用戶印象

招牌動作是基于基本動作有選擇性的差異化展現。例如針對空間擴展而設計的path加號按鈕動畫。facebook 推出的paper關閉消息的拉伸曲線動畫等。

巧妙的設計在滿足產品功能需求的基礎上更能讓用戶驚艷。這類動效是APP的專屬符號,APP的品牌和逼格展現通過此類動效有較大的發揮空間。這就像Michael Jackson的亮相pose,他本人or模仿者只要一擺出這個POSE我們就立馬想到MJ。同樣這類動效的設計更具嘗試性和前瞻性,它是動效趨勢的實踐和探索,甚至能引發跟風潮流。

  1. 這類動效設計需要注意的是:
  2. 操作前的提示引導
  3. 夸張化和個性化的表現
  4. 對動態趨勢的預測

舉例:

手勢提示的動畫

來點驚喜!APP動效設計分為哪幾種?

特型動畫

來點驚喜!APP動效設計分為哪幾種?

前瞻性動效演示

來點驚喜!APP動效設計分為哪幾種?

三、高難度動效讓用戶『WOW』

基本動效讓用戶舒服,招牌動效讓用戶印象深刻,只有這些對于一款“高逼格”標簽的App還不夠。在這個大家都很拼的世界,不來點讓人經驗的高難度動作很難讓別人對你刮目相看。這類動效很酷,很炫,可讓用戶作長時間的視線停留享受,讓用戶『WOW』的同時,不得不為設計動效的同學點贊,大大提升了對APP所屬品牌及開發團隊實力的認可。

當然,不要忘了APP的主要功用,高難度動作只是錦上添花抑或畫龍點睛。所以在APP設計中高難度動作并不一定都會使用,要根據APP的切實需要進行設計。在不干擾主功能的前提下,進行探索展示。所以這類動效多出現在引導頁或者特殊功能展示上例如手機清理APP展示清理進度的儀表動效等。

這類動效的需要注意的是:在滿足系統資源占用的前提下盡可能發揮吧!Just do it!

儀表盤動畫

來點驚喜!APP動效設計分為哪幾種?

基本動效,招牌動效和高難度動效的合理運用,可以讓App變得更出眾,更性感,更有趣。在App設計過程中,這三類動效要遵循以基本動效為主,招牌動效為輔,高難度動效精選使用,切勿過度炫技的準則。在全民扁平化的設計趨勢中,相信動效會為設計帶來更多的可能和驚喜。設計師們又多了一片可發揮的領域,各位加油吧!

動效設計好文合集!

教你快速保存動效!
《經驗分享:如何快速保存APP動效?》

手把手教你設計動態界面!
《PS高手教程!教你打造流暢酷炫的動態演示》

騰訊出品的動效設計指南!
《超贊!高大上的動效設計方法及流程總結》

原文地址:mux.baidu

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

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/
設計微博:擁有粉絲量88萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
官方微信:想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎?添加優設哥微信號:youshege

來點驚喜!APP動效設計分為哪幾種?

收藏 16
點贊 2

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。