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

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

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

提交需求

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

0/20
0/200

設(shè)計大賽

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

提交完成
感謝您對UI中國的支持和信賴!
如何利用動畫效果來提升用戶體驗
0.0°
2017-01-06 自譯外文 經(jīng)驗/觀點 原作者: Nick Babich 舉報 4015 19 12 0

翻譯 UI中國的夾克君


動畫效果會講故事。但不是冗長和完整的故事,而是簡單的故事,比如“嗨,你現(xiàn)在該看這里了”或者“哇,你的操作完全正確。”然而,動效的目的不是為了愉悅用戶,而是為了幫助理解操作會有什么進展亦或是提高用戶使用APP的效率。這一點我們可以在 Zurb 的陳述里證實。



我們不僅僅只是設(shè)計圖形界面。我們設(shè)計的是用戶與他們的屏幕如何互動。


或許動畫效果應(yīng)用在廣范圍的背景來構(gòu)建美學(xué)與功能的統(tǒng)一:動效能夠影響用戶行為,溝通狀態(tài),引導(dǎo)用戶的注意力以及幫助用戶看到自己動作的反饋。這里有一些例子說明你可以在界面的什么地方增加動畫效果來提升用戶體驗。


加載不能太無聊


你應(yīng)該嘗試讓等待變得愉悅,如果你不能縮減等待時間的話。動效可以代替煩人的轉(zhuǎn)啊轉(zhuǎn)啊轉(zhuǎn)(這基本上只是提醒用戶他們正在等待)。幾乎任何網(wǎng)頁或者應(yīng)用都可以利用屏幕框架和巧妙的動畫來維持用戶的興趣。

Image title

在頁面完全加載完之前用屏幕框架遞增的方式完成


狀態(tài)切換不能太生硬


動畫效果可以讓過渡更加顯著,所以當(dāng)用戶開始和結(jié)束,動畫效果要能展示到底發(fā)生了什么。好的過渡設(shè)計會讓用戶清楚的明白自己的注意力應(yīng)該往什么地方放。


Adrian Zumbrunnen 舉了一個關(guān)于當(dāng)用戶點擊鏈接的時候,滾動動畫是如何幫助用戶保持所在的環(huán)境的好例子。只要比較靜止的那一瞬間的變化就能明白切換的感覺就像硬切一樣:

Image title

突然,不自然地就改變了,這樣的界面切換對用戶來說是非常不舒服的


有動畫效果動作時:

Image title

動效給畫面帶來生氣


解釋元素之間的關(guān)系


動畫可以提升用戶直接操作的感覺。


舉個例子,一個菜單按鈕平滑過度變成播放控制,再變回來。這個效果會告知用戶這個按鈕的功能,當(dāng)用戶不太明白這個交互的作用時候。播放按鈕轉(zhuǎn)變正暫停表明這兩個動作是有關(guān)系的,當(dāng)其他元素出現(xiàn)的時候它們是不存在的。

Image title

這個例子里,動畫用來引導(dǎo)眼鏡去看屏幕的中心也就是音樂控件的位置。


另外一個例子,當(dāng)按下浮動按鈕的時候,加號就會變成一支筆。這說明筆是最主要的創(chuàng)作方式。一個小小的細節(jié)也能顯示出接下來會發(fā)生什么,讓用戶明白不同情況下標識的含義之間的不同。

Image title


錯誤的操作必須有鮮明的反饋


動畫可以加強用戶習(xí)慣的的操作。


舉個例子,表上登記的項目可以極大的增強一些動畫。如果正確的數(shù)據(jù)允許登錄,一個簡單的“點頭”的動畫可以解釋這一點。而水平的抖動可以用來表示未輸入或者輸入錯誤。當(dāng)用戶注意到動畫的時候他們立刻就能明白這個動作的含義是什么。

Image title

圖中展現(xiàn)的是最基本的抖動形式


利用反饋來展現(xiàn)動作完成


動畫可以幫助用戶明白他們操作之后的結(jié)果。根據(jù)“別說,展現(xiàn)出來”的原則,你可以用動畫反饋展示出到底完成了什么。


下面的例子中,當(dāng)用戶點擊“付款”,一個簡單的旋轉(zhuǎn)加載出現(xiàn)在APP支付成功的情況下。對號標志動畫讓用戶覺得很輕松的付了款并且用戶會感謝這些重要的細節(jié)。

Image title


總結(jié)


當(dāng)動效使用的非常成熟了時候,它是非常有用的。這對與時間安排以及考慮一個動畫是否是有效的是非常重要的。我們需要從開始就接受動畫效果,并且考慮這對于我們設(shè)計來說是否自然,因為設(shè)計不僅僅只是視覺的展示。就像喬布斯曾經(jīng)說過一樣:



設(shè)計不只是看起來及摸起來像什么,設(shè)計是如何運作。


感謝!


- end -


更多精彩,關(guān)注UI中國微信公眾號!


Image title








更新:2017-01-06

收藏

19人已收藏

佳作分享

不定期分享優(yōu)秀的作品,讓你們知道什么叫好的作品!

  • 438

    作品

  • 8079

    粉絲

  • 1

    關(guān)注

  • 設(shè)計視野很重要,可是該如何開拓?
  • 產(chǎn)品思維:UX設(shè)計的下一個突破口?
  • 設(shè)計師才不管新美國總統(tǒng),"黑"川普沒商量
  • 對于Adobe CC的歸來我們應(yīng)該思考些什么?
相關(guān)標簽

    猜你喜歡

      2017-01-06 自譯外文 經(jīng)驗/觀點 原作者: Nick Babich 舉報 4015 19 12 0

      如何利用動畫效果來提升用戶體驗

      0.0°

      你確定要舉報如何利用動畫效果來提升用戶體驗

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

      0/200

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

      點擊上傳附件

      對誰可見:

      全部設(shè)計師
      • 全部設(shè)計師
      • 推薦設(shè)計師和認證設(shè)計師

      您確認要推薦?

      該作品發(fā)布時間:2017年01月06日

      評分

      完整度

      啟發(fā)性

      勤奮性

      排版布局

      推薦心得

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

      0/200

      12
      19
      0

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

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

      登錄

      手機號

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

      登錄
      第三方賬號登錄