• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 5個動效設計技巧提升界面設計的用戶體驗—- 設計教程




    教學主題: 5個動效設計技巧提升界面設計的用戶體驗

    大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

    今天的這個教學主題是: 5個動效設計技巧提升界面設計的用戶體驗

    這教學的重點為這幾點 [ 用戶,體驗,提升,技巧,設計,這個,按鈕,過程,一個,界面, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    動效能講述故事。和圖片不同,動效能夠呈現變化的過程,講述一段簡短而有趣的故事,能夠同你進行對話:“嘿,你該看這個按鈕了”或者“哦耶!你剛剛完成了一個操作!”不過,動效的目標並不是單純的娛樂用戶,而是幫助用戶了解交互的效果和界面中發生的變化,讓

    動效能講述故事。和圖片不同,動效能夠呈現變化的過程,講述一段簡短而有趣的故事,能夠同你進行對話:“嘿,你該看這個按鈕了”或者“哦耶!你剛剛完成了一個操作!”不過,動效的目標並不是單純的娛樂用戶,而是幫助用戶了解交互的效果和界面中發生的變化,讓用戶更為有效地使用你的APP。Zurb 有一句話很好的解釋了這一點:

    “我們設計的不再僅僅只是靜態的界面,實際上,我們所設計的是用戶從界面獲得內容的過程。”

    動效廣泛運用於網頁內容和背景當中,用來強化功能,提升美感:它會直接影響用戶的行為,引導用戶注意到特定的內容,呈現狀態,幫助用戶找到他們想要的內容,達成目標。想要藉助動效提升用戶體驗,可以參考下面的指引來進行優化:

    加載過程不要讓用戶感到單調無聊

    如果你無法縮短加載和等待的過程,那麼你應當盡量讓用戶在等待過程中感到愉悅,這個時候的動效基本只是在提醒用戶後台正在加載。而幾乎所有的網站和APP都會碰到這樣的情況,而好的設計通常都是通過微妙而有趣的動效,讓用戶的注意力轉移到動效本身上,而不是被無聊的情緒所左右。下面的的案例中,設計師讓界面從基本的框架結構開始加載,明顯地縮短了等待的主觀體驗。

    5個動效設計技巧提升界面設計的用戶體驗

    不要讓狀態改變過於生硬

    動效最重要的功能之一是強化過渡效果,所以,它需要讓過程的起始和結束都要被明顯的呈現出來。一個設計良好的過度動效應當合理地將用戶的注意力引導到需要被關注的地方。

    Adrian Zumbrunnen 有個非常不錯的案例,它展現了用戶點擊了鏈接之後,滾動動效是如何讓用戶明白變化過程的。對比下面硬生生的轉變和加了動態效果之後的版本:

    5個動效設計技巧提升界面設計的用戶體驗

    5個動效設計技巧提升界面設計的用戶體驗

    正如你所見,這個動效讓用戶明白了界面的結構和轉變的過程,有助於用戶了解下一步應當如何與之進行交互。

    闡明元素之間的關係

    動效還能提升用戶對界面的操控感。

    正如同下面的案例所展示的,一個菜單按鈕隨着平滑的動效展開為一個播放控制界面,隨後點擊返回,又收縮為一個按鈕。這個特效不僅僅讓界面看起來神奇無比,而且告知了用戶按鈕的實際功能。有意思的是,這個動效還強調了播放和暫停兩種狀態的差別,兩者可以互相變化,而不會共存。

    5個動效設計技巧提升界面設計的用戶體驗

    這個案例中,動效將用戶的注意力引導到了屏幕的正中央,播放和暫停兩種狀態的改變是用戶注意的焦點。

    5個動效設計技巧提升界面設計的用戶體驗

    另外一個案例則是更為常見的浮動按鈕,點擊“+”按鈕,按鈕展開其中隱藏的其他功能按鈕,而按鈕中的“+”則變化為意為編輯的鉛筆圖標。這個圖標變化的細節向用戶暗示了接下來會發生什麼,並且明確了按鈕不同狀態下的差異。

    出錯的時候給用戶以反饋

    當用戶執行了某個操作之後,動效能夠強化這個交互所產生的效果。報錯,就是最常見的反饋機制之一。

    下面的案例就相當典型,一個簡單的左右晃動的特效給用戶一種界面“正在搖頭”的感覺,讓他們明白所輸入的內容並不正確。這種擬人化的動效讓界面充滿了真實的質感,信息的反饋也更直覺化。

    5個動效設計技巧提升界面設計的用戶體驗

    通過反饋告知用戶目標達成

    動效不僅能夠“搖頭”還能“點頭”,它同樣能夠以視覺化的方式告知用戶交互所達成的結果。當用戶操作完成之後,結果不應當是生硬的彈出,而是自然的過渡並呈現出來,“展現,而不是單純的告知”。

    在下面 Stripe 的案例中,用戶點擊“支付”之後,一個簡單微妙的動效聯通了“支付”和“支付成功”兩種狀態,這個時候,動效賦予了支付這個操作一種輕鬆寫意的感覺,是一種讓用戶欣賞甚至沉迷的細節體驗。

    5個動效設計技巧提升界面設計的用戶體驗

    結語

    當你熟練運用動效的時候,它會成為你UI設計過程中最強大的工具之一。一個動效是否合適,你確實需要花費時間仔細思考。我們應當在設計之處就開始思考動效要如何展現,並且將它視之為界面的天然的組成部分,因為它的存在並不僅僅能夠強化界面的視覺,而且能夠優化功能,強化體驗。正如同喬布斯曾經所說的那樣:

    “設計並不僅僅關乎視覺和感受,它要呈現的是事物運作的規律。”

    看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

    希望我們所介紹的 5個動效設計技巧提升界面設計的用戶體驗 這教學會喜歡

    文章標題: 骨子愛創意- 5個動效設計技巧提升界面設計的用戶體驗–轉載請註明來源處

    本教學分類為平面理論教程中的 設計教程相關教學

    文章相關關鍵字為: 用戶,體驗,提升,技巧,設計,這個,按鈕,過程,一個,界面,

    本文永久連結 :5個動效設計技巧提升界面設計的用戶體驗

    本文轉載自 :VIA