萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> APP設計的肢體語言

APP設計的肢體語言

   如果把APP比作一位美女,那麼icon是她的證件照,界面是她的形體,而動效則是她的肢體語言。

APP設計的肢體語言 sanl

  引言:如果把APP比作一位美女,那麼icon是她的證件照,界面是她的形體,而動效則是她的肢體語言。

  在如今玲琅滿目的App中,如何脫穎而出?設計師要考慮的,不光是產品如何更合理的展現結構與功能,更重要的是思考自己的App是否能做到簡便易懂的同時,又給用戶新穎感?此時,有限的屏幕空間緊靠文字的提示是不夠的,App需要更多的新鮮血液——“動效設計”。動效設計可以拓展空間內容,簡化引導流程,降低學習成本,更重要的是給用戶帶來意想不到——類似於“Cool”的驚喜,它就像人類的肢體語言,通過肢體語言傳達更多的抽象信息和性格展現。

  肢體語言(body language)又稱身體語言,是指通過頭、眼、頸、手、肘、臂、身、胯、足等人體部位的協調活動來傳達人物的思想,形象地借以表情達意的一種溝通方式。一個人要向外界傳達完整的信息,單純的語言成分只占7/100,聲調占38/100,另外的55/100信息都需要由非語言的體態來傳達。肢體語言的重要性可見一斑。

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

  1.基本動效讓用戶舒服

  基本動作也可稱為日常動作,如坐立,行走,握手,擁抱等.對應APP中的基本動作分三類:1.指向性動效(滑動,彈出等)

  2.提示性動效(滑動刪除,下拉刷新等)

  3.空間擴展(翻動,放大等)

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

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

  1.系統兼容和資源占用

  2.動態速度的節奏

  3.仿生性or現實重現

  舉例:

  圖片1.3X3動效控件

156-001
156-002
156-006

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

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

  這類動效設計需要注意的是:

  1.操作前的提示引導

  2.誇張化和個性化的表現

  3.對動態趨勢的預測

  舉例:

  圖片1.手勢提示的動畫

156-003
156-004
156-005

  基本動效讓用戶舒服,招牌動效讓用戶印象深刻,只有這些對於一款“高逼格”標簽的App還不夠。在這個大家都很拼的世界,不來點讓人經驗的高難度動作很難讓別人對你刮目相看。這類動效很酷,很炫,可讓用戶作長時間的視線停留享受,讓用戶『WOW』的同時,不得不為設計動效的同學點贊,大大提升了對APP所屬品牌及開發團隊實力的認可。當然不要忘了APP的主要功用,高難度動作只是錦上添花抑或畫龍點睛。所以在APP設計中高難度動作並不一定都會使用,要根據APP的切實需要進行設計。在不干擾主功能的前提下,進行探索展示。所以這類動效多出現在引導頁或者特殊功能展示上例如手機清理APP展示清理進度的儀表動效等。

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

  圖片:儀表盤動畫

156-007
copyright © 萬盛學電腦網 all rights reserved