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




  • [ 平面理論教程 ] UX設計值得參考的四個動效使用方法—- 設計教程




    教學主題: UX設計值得參考的四個動效使用方法

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

    今天的這個教學主題是: UX設計值得參考的四個動效使用方法

    這教學的重點為這幾點 [ 參考,值得,設計,用戶,可以,我們,這樣,一個,動畫,完成, ]

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

    本文重點

    微交互是明年流行的設計趨勢,至於原因,來看這4個用動效完成微交互的設計實例你就懂了。

    微交互是明年流行的設計趨勢,至於原因,來看這4個用動效完成微交互的設計實例你就懂了。

    動效可以告訴我們一些故事。例如「現在就讓我看看吧。」、「操作已經完成了。」等等,像這樣既不會很長,又不會很複雜的故事。

    動效的目的,並不是為了娛樂用戶,而是為了讓用戶理解現在所發生的事情,更有效的說明他們的使用方法。

    我們不再只是去設計一個靜態的畫面。去思考怎樣才能將用戶從單純的畫面,引導到實際操作的內容對設計來說是非常重要的。

    為了讓動效變得好看,功能統一,可以廣泛的應用於內容之中。用戶的行為和條件狀況,被用戶注意的地方、或者成功的傳達執行動作所得到的結果這樣各種各樣的要素影響着。

    這一次,為了改善UI設計的體驗。讓我們用一些具體的實例來一起看看可以添加動效的位置和情況吧。

    01. 不要讓載入時間變得又長又無聊

    如果無論如何打開網頁都需要很長的時間的話,就想辦法讓用戶在等待的時候感受到樂趣吧。動效可以作為能夠消除用戶的無聊感的代替(讓用戶不會感覺到一直在等待)。通過利用幾個連續的動畫,讓用戶感覺到並不是一直在等待,這在絕大多數網站都是十分管用的方法。

    UX設計值得參考的四個動效使用方法

    例如左側的列表型屏幕,在內容完全載入之前,我們可以看到,UI是一點一點分開顯示出來的。

    02.不要讓頁面切換變得生硬

    利用動畫效果,可以在切換頁面(英: Transition)的時候,讓用戶清楚的看到什麼時候在哪裡開始,又是在哪裡結束。精心設計你的轉場,不僅可以吸引用戶的注意,還能讓他們很快理解現在所發生事情。

    當點擊鏈接的時候,滾動可以很好的幫助用戶來理解當前所發生的事情。首先讓我們來看看下面這個例子,瞬間的切換頁面能讓人感受到僵硬和牽強的感覺。

    UX設計值得參考的四個動效使用方法

    突然的切換讓人感到強烈的不適感,讓用戶在接下來的操作上會感到困惑。

    然後讓我們來看下面這個案例,追加了滑動的動畫效果。

    UX設計值得參考的四個動效使用方法

    通過添加了滑動的動效,讓頁面的切換變得流暢順滑。

    如你所見,通過這樣動態的切換界面,可以幫助用戶理解當前狀態,也可以很好的誘導用戶,再銜接到下面的頁面。

    03. 說明各個要素之間的關聯性

    動畫,可以直接的提高操作感。

    例如通常在導航欄菜單,可以添加平滑的動畫來使操作更流暢平穩。利用這種效果,可以讓用戶輕鬆的明白按鈕有着怎樣的功能。

    在下面這個例子中,播放按鈕和停止按鈕這兩個圖標在切換的過程中添加了使他們具有關聯性的動效,意味着當你使用其中一個的時候,另一個將不能被使用。

    UX設計值得參考的四個動效使用方法

    在這種情況下,通過利用動效,屏幕上的音樂播放器變得能吸引用戶注意而展現在了屏幕中央。

    讓我們再來看另一個案例。在材料設計中我們可以看到,當我們點擊浮動的圖標時,加號的圖標變換成了鉛筆。通過這樣的一個小細節,我們可以知道每個圖標會有什麼作用,接下來又會發生些什麼。

    UX設計值得參考的四個動效使用方法

    為了強調一些有趣的事情,讓我們來利用反饋吧

    動效,可以為用戶的操作進行一些輔助。

    例如這個登錄框,通過添加一些動效,便可以極大的引起重視。如果他輸入的是正確的內容,我們可以通過添加一個簡單的「點頭效果(英: Nod)」的動畫,來表示輸入完成。另一方面,我們可以通過添加水平方向的震動來表示輸入錯誤的效果。當用戶看到這樣的動畫時,便可以立刻明白其中的含義。

    UX設計值得參考的四個動效使用方法

    利用上面所介紹的這種動效,可以很方面的讓用戶理解“你還沒有輸入”這樣的意思。

    04. 為了表示已經完成,讓我們給用戶一個反饋

    動效,在給用戶的行為動作的結果一個視覺化的反饋時也是非常有用的。「去表現,而不是說。(英: Show, don’t tell)」基於這樣的動效設計原則,為了讓用戶明白,他們做了些什麼,是否已經完成,你可以使用動效來給用戶一個反饋。

    在下面的設計案例中,當用戶點擊付款按鈕之後,便可以插入一個支付完成的小動畫。對號這樣的動效,可以告訴用戶支付已經完成,這樣的細節對用戶體驗來說也是非常重要的。

    UX設計值得參考的四個動效使用方法

    最後

    通過不斷的摸索與使用,動效也會成為你一個非常強大的工具。怎樣的動效是必須的,怎樣又是不需要的,通過不斷的反思,總結經驗對於設計這來說是非常必要的。

    在網頁設計的開始階段,首先來好好考慮一下接下來會用到哪些動效吧。像這樣來完成設計,可以將內容以視覺性的效果呈現出來。

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

    希望我們所介紹的 UX設計值得參考的四個動效使用方法 這教學會喜歡

    文章標題: 骨子愛創意- UX設計值得參考的四個動效使用方法–轉載請註明來源處

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

    文章相關關鍵字為: 參考,值得,設計,用戶,可以,我們,這樣,一個,動畫,完成,

    本文永久連結 :UX設計值得參考的四個動效使用方法

    本文轉載自 :VIA