當前位置:
首頁 > 最新 > 用這4個超實用的方法,做出有價值的功能性動效!

用這4個超實用的方法,做出有價值的功能性動效!

@喪心病狂十六夜貓:約在10年之前,在用戶界面使用的動效,大部分是一些廣告和閃爍的彈窗。然而到了今天,已經發生了翻天覆地的變化。

交互設計和動態效果的詳情,帶來的是網站或APP的根本改變。這種思維方法,在下面有詳細的描述。

為了設計出更好的數字產品,從一開始網頁或APP就要有良好的交互性質是非常有必要的。這一次,就將如何有效的運用UI動效的方法詳細介紹給大家。

使用動效的理由

動態(英: Motion)在從他的性質上來說,就是用戶界面上最突出的元素。相較於文字文本和靜止的圖像,動態的更容易被發覺。我們的視線會不由自主的追尋著動態的物體,這也可以說是一種條件反射。試著將這個利用在功能性的動效上吧。

功能性的動效是?

功能性動效,指的是在UI設計中作為功能的一部分被採用的小動效,有著非常明確和合理的目的。

為了減輕認知的負擔。

防止發生變化時看漏(英: Change Blindness)。

在空間關係中確立良好的層級關係。

以用戶為中心的設計方法,直觀的用戶界面,響應性,人性化等等都是必須的。功能性動效,將有助於你實現這些目標。那麼,就讓我們詳細的來看一看功能性動效吧。

用功能性動效完善UX

對APP或網站的體驗或印象,通過在好的地方使用動效,會更易於使用,讓功能性更加完善。

通過仔細研究測試,功能性動效,都包含以下的功能、要點。

01. 可視化的反饋

舒適的交互設計可以提供更好的反饋。無論是否成功,反饋能告訴用戶系統已經識別到了你的操作。顯示出相互作用的結果。這組動效應特別注意控制。

GIF/273K

△ 反饋按鈕

在我們的生活中,對按鈕會有按下去的反應。進行會有怎樣的反應的預測是十分重要的。

GIF/533K

?

△ 操作結果的可視化

按照基本規則,使用動畫進行反饋,你可以很好的強調什麼操作是錯誤的。

例如,如果你輸入密碼錯誤,讓我們添加一個左右抖動的視覺動畫吧。像出錯啦,請再試一次這樣,左右搖頭的效果。當用戶看到這些動效後,可以立即了解當前的狀況。

GIF/103K

?另外,您還可以強化用戶當前正在運行的動作。在下面的例子中,當用戶點擊提交按鈕,在成功之前通過一點點載入動畫來顯示。載入的動效使用戶感覺過程已經成功完成。

02. 抑制狀態的變化

至於添加動效最好的地方,就是讓變化的瞬間變得引人注目。用戶界面狀態的變化,特別是網站上突然的變化,很難讓用戶理解當前究竟發生了什麼。在這變化的瞬間,就可以在UI中添加動效進行緩和。

建立連接

動畫的變化,能向用戶界面展示各種各樣的狀態,作為一個如同中介一樣的角色,幫助用戶理解當前正在發生著什麼。用戶只需跟隨動效,就能夠理解2個UI狀態之間究竟有著怎樣的聯繫。

GIF/1606K

另外,也可以顯示縮略圖和詳細信息。

GIF/4361K

?這張動畫卡片,是通過點擊將重疊的詳細信息進行展示,它清楚地表明了是同一個項目。

注意變化

當一個新的對象已經公開時,動效有助於我們在被掩蓋的信息中清楚的找到它。比如通過滑動打開內容來隱藏信息,你可以在需要關注時用到這種變化效果。

在下面的案例中,當您單擊漢堡包圖標時,導航菜單用幻燈片展示。通過這種動作,用戶就可以明白,導航菜單不會消失。

GIF/44K

03. 系統狀態的可視化

作為Jakob Nielsen為了可用性推導出來的答案之一,系統狀態的可見性仍然是用戶界面設計中最重要的原則之一。對於用戶來說,把握理解系統當前的狀況,是非常重要的。

進度條

上傳和下載數據的過程是採用功能性動效的一個很好的機會。有動效的載入欄,可以直觀的看到動作載入完成預計還要多少時間。

另外,當操作未能成功進行時,動效也很有用。例如在下載失敗的時候,你就需要考慮如何讓失敗畫面看起來比較舒服。

GIF/772K

下拉刷新

用戶的等待時間是從動作開始的瞬間開始,最糟糕的情況是不知道系統是否收到指示。

下拉刷新這一技術,讓我們嘗試在操作瞬間作出反應。告訴用戶你的進程已經開始,最重要的是給與用戶視覺反饋,在這裡使用動畫將非常有幫助。

GIF/953K

04. 解說動畫

有時,用戶需要一些額外的幫助來了解用戶流程或如何與某些界面元素進行交互。對於包含用戶的新的或不熟悉的功能或交互的用戶界面尤其如此。

新手上路

用戶入門需要一個完美的UX,第一次看到的操作動畫對於首次使用者如何與應用程序進行互動有著巨大的影響。無論多麼複雜的東西,動畫都能通過有趣的方法傳達出來。他有著無限的可能性。

GIF/4117K

視覺提示

動畫可以提供一些易於理解的視覺線索。解說動畫,通常是在網頁第一次被打開時看到,通過動畫可以表現頁面上特定的要素在什麼情況下可以使用。

這種類型的動畫,通過故事的進行漸漸的看到全體的效果,在遊戲中經常被利用。只有當用戶自己的經驗到達一個點的時候,才會觸發這個提示。

總結

動畫是一個複雜而強有力的工具。

我們需要從一開始就採納這種效果,並將其視為我們設計的自然部分,因為設計不僅僅是視覺呈現。正如史蒂夫·喬布斯談到設計時所說的:設計不僅是外形和感覺,設計關乎如何運作。

「動效設計三步走」

先學會分析:《動效丨七何分析法幫你全面分析界面動效》

動效設計方法:《改善你的UX設計!值得參考的四個動效使用方法》

提升用戶體驗:《5個小技巧,用動效提升界面的用戶體驗就這麼簡單》

原文地址:photoshopvip

優設譯者:@喪心病狂十六夜貓

================明星欄目推薦================

優優教程網:UiiiUiii.com是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手並製作出酷炫的視覺效果。

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 推酷 的精彩文章:

平面設計的前景好嗎?工資待遇又是如何?
告別酷熱體驗,這位「涼風搬運工」能迅速撫平你的盛夏綜合症
內容社交產品中的關鍵數據——獲得良好反饋的用戶比例
創業失敗三次他做共享雨傘 100把鋪設上海不知去向 擬估值1億

TAG:推酷 |

您可能感興趣

家裡經常用到的門墊還能自己做,按照這個步驟輕鬆做出一款,實用簡單
真的,自己也能做出超好吃的麵條
使用蜂蜜面膜多久有效果 怎樣才能做出一款好用的護膚產品
看清本質,才能做出最有效的努力
用6斤蹄膀也能做出烤乳豬的感覺?用這個方法,讓人對你刮目相看
不用電、不用氣,也能做出超好吃的美食
用這個方法做出的梅菜扣肉入口即化,關鍵是不柴不膩,大廚都在用
二戰後日本能快速恢復人口,只因用了這招,確實只有島國才能做出!
這種動物為獲取異性注意,竟做出這一行為,滑稽程度遠超你的想像
把兩個叉子綁在一起,做出來的小工具真不錯,有創意還實用
殲20能做出哪些動作?有一種全新的超音速機動能力
用這種方法做出的雞蛋餅口感筋道,還很好吃,值得收藏!
炸酥肉時,用麵粉還是用澱粉,很多人用錯,難怪做出來口感不好
2根蔥就能做出一碗超級好吃的麵條,學會了此做法,不用出去吃
自己手動也可以做出美麗的毯子,實在太實用了!
能做出這6個動作,說明你身體真的好!
只要有創意,哪怕是一張紙,也能做出彩虹的七彩效果,這方法真棒
能夠做出這5件事的女人,對你都不夠用心
用它當早餐,做出來的味道非常的美味,而且還有補鈣的作用
就算是神筆馬良也要用合適的方法才能做出好畫