亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

恭喜你成為UI中國推薦設計師 (詳情)
//百度統(tǒng)計 20220402 uicn

您的意見是我們 UI 中國進步的動力!
點擊立即反饋按鈕,發(fā)表您的意見!
立即反饋
QQ群反饋
您也可以加入UI中國官方反饋群進行反饋!
群號:302892100
備注:反饋問題后@管理員能讓我們及時了解您的意見

提交需求

賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱?,我們會在第一時間與您聯(lián)系!

0/20
0/200

設計大賽

  • 設計大賽
  • 發(fā)布廣告
  • 發(fā)布招聘
  • 其它需求

提交完成
感謝您對UI中國的支持和信賴!
移動界面的動效設計-文字版
0.0°

應該說是一片遲到的文章,基于我的筆記,可能導致文章連接性不夠,整理的蠻匆忙,如有錯誤歡迎交流、指正。

轉(zhuǎn)載注明出處 (dribbble@zhaoian) ,謝謝


移動界面的動效設計 Motion Design in User Interface


動效在用戶體驗設計中正變得越來越重要,那么動效能帶來什么好處呢?

  • 體現(xiàn)交互層級
  • 動態(tài)界面使人更容易理解交互層級關系,減輕了人們的認知負擔
  • 給予反饋
  • 給人感覺界面是活的,讓體驗流暢
  • 彌補靜態(tài)頁面的表達不足
  • 在內(nèi)容優(yōu)先的設計趨勢下,用戶界面變的更加簡潔。這將給用戶帶來操作上的盲目感;動效則可以在不打破界面美感的前提下,彌補認知的損失

原則

設計是為了解決問題,動效設計作為設計的手段之一,能解決一些靜態(tài)界面設計無法解決的問題。但是,它并不是萬能的,動效要克制,過多、過慢或不適合的動效,只能讓界面失去重點,讓團隊和用戶怨聲載道。

在實際項目中應用的動效,只有精準地對齊需求,才能使動效帶來真正應有的價值。那么,如何評估一個動效是否有價值呢?

1. 動效是否必要
2. 動效是否帶來體驗提升?
3. 動效開發(fā)的成本是否過高


如果都沒有問題,送給工程師一個飛吻吧。


動效工具

  • Adobe After Effect
  • 視頻特效軟件,被普遍使用的動效和 MG 制作軟件,功能強大,和其他 Adobe 軟件無縫配合,可做的效果也是不限量的。
  • Quartz Composer + Origami Studio
  • Apple 的可視化編程軟件,搭配 Facebook 的 Origami 可以非常好的模擬機器效果,做單頁面的動效可以用它,Origami 還可以導出直接可實施的代碼。
  • Hype 3
  • 可交互的 Demo ,雖然是 HTML5 制作工具,但是做動效也算是一只[好貓]吧。

其他的還有原型工具 Framer、Pixate、Form 等和 QuartzCode、PaintCode 也都可以用來做動效。具體工作時候可以選用適合的來做,目前還沒有一站式解決的軟件出現(xiàn)。


數(shù)值化動效

只談制作動效,不談實現(xiàn)都是耍流氓,動效設計師同樣需要為動效標注。
常規(guī)的值包括:

  • 屬性移動距離 旋轉(zhuǎn)角度
  • 時間運動持續(xù)時間 延遲出現(xiàn)時間 重復時間
  • 曲線Android 插值器曲線
    iOS 運動曲線
    自定義曲線
Image title





動效標注模版,包括常用動作、曲線、表格。?Sketch?格式,Sketch?的快速、矢量特性也非常適合進行動效標注

動效標注技巧

Image title



有些運動需要分解成多種值標注。比如 Material Design 里面的「重力運動」
設計師的思維是 Position 到 Position 的弧線運動,但實現(xiàn)時并沒有運動軌跡的開發(fā)方式。
?
那么如何表述這個運動軌跡呢?

兩種方法
  • 時間錯位:

Image title



延遲單個值的時間(真實運動曲線為綠色虛線略有夸張)
  • 不同曲線

Image title



兩個值持續(xù)時間相同,但應用的曲線不同

曲線 /?插值器

剛才提到了曲線是什么呢?

?Android 系統(tǒng)內(nèi),調(diào)用系統(tǒng)內(nèi)置曲線插值器,改變動畫的播放速率,可以實現(xiàn)大部分動態(tài)速率的效果。







Image title



圖為 Android?插值器

自定義曲線

插值器默認的速率無法完全符合需求時,還需要給它進行數(shù)值調(diào)整。

調(diào)整 Factor 的值,就可以快速改變速率:

Image title



當然,你也可以嘗試使用自定義的去曲線,將曲線換算成二次貝塞爾曲線,可以直接用于開發(fā)。
如下圖,為 cubic-bezier (.82,?.25,?.29,?.78)

Image title



Android 和 iOS 都支持二次貝塞爾和三次貝賽爾曲線。


交互與動效

動效和交互聯(lián)系很緊密,這也要求動效是先于視覺考慮的。

Image title



如上圖,在內(nèi)容優(yōu)先的設計中常用的共享元素樣式,從交互層面就需要對動效有一定的規(guī)劃,否則會遇到動效很牽強或視覺返工的情況。


動畫與動效

動效不同于動畫,動效常發(fā)生在過場或操作之后,有趨向于表現(xiàn)更快的傾向。動畫中看上去恰到好處的運動時間,直接套用在動效中應用會顯得拖沓沉冗效率不高。顯然,簡單粗暴的把動畫中的時間直接應用在動效中,是不合適的。
在 Material Design Motion 中,對動效時間有比較詳細的定義,對各種設備的動畫時間都有推薦,實際應用時還需要考慮元素變化的范圍,給出合適的時間。
雖然 Android 動效已經(jīng)支持 60fps 的速度,但是在實際應用中,有時運動不夠平滑*確實存在,甚至為了達到理想效果,要同之前標注時間相差很大。這時,可能需要對部分標注時間進行修改,不過我一般會遵循一個原則:盡量保持時間之間的比例,傾向相信模擬中的時間。因為機器的個體差異導致的問題很難被量化。當然,解決這種問題,需要工程師和設計師的通力配合。


項目中的動效

就好像工業(yè)設計師需要懂材料、平面設計師需要了解印刷知識,動效設計同樣需要設計師具有「跨專業(yè)」的視野。

在 iOS 和 Android 上,系統(tǒng)其實已經(jīng)幫你完成了不少工作,很多常見的、被經(jīng)常使用的動效,可能已經(jīng)有做好的「輪子」,這些「輪子」往往經(jīng)過多次驗證,效果和性能都說的過去,有些稍加改動就可以滿足項目要求。

在實現(xiàn)這類動效的時候:

除非有信心實現(xiàn)的比已有的好,不然還是直接使用吧

使用已有的「輪子」、將常用基礎動效控件化,減少整個團隊重復工作,提高效率,設計師和工程師也可以把精力用在能讓項目更為出彩的地方。



更新:2017-09-12

下載
收藏

12人已收藏

eion

詳情點擊頭像

  • 25

    作品

  • 226

    粉絲

  • 56

    關注

  • [主題]野蒜苗炒鮭魚
  • 移動界面 動效設計-圖片版
  • Photo - Icon
  • Browser Icon

    猜你喜歡

      移動界面的動效設計-文字版

      0.0°

      你確定要舉報移動界面的動效設計-文字版?

      如果查出惡意舉報,十天內(nèi)禁止提交任何舉報申請。

      0/200

      上傳證據(jù): 超過10M的附件請使用網(wǎng)盤地址

      點擊上傳附件

      對誰可見:

      全部設計師
      • 全部設計師
      • 推薦設計師和認證設計師

      您確認要推薦?

      該作品發(fā)布時間:2016年12月13日

      評分

      完整度

      啟發(fā)性

      勤奮性

      排版布局

      推薦心得

      建議20-200字以內(nèi)

      0/200

      6
      12
      0

      賬號或密碼錯誤,請重新輸入

      賬號或密碼錯誤,請重新輸入

      登錄

      手機號

      發(fā)送驗證碼 120s 驗證碼錯誤

      登錄
      第三方賬號登錄