您現在的位置是:電腦技術吧?>? 編程技術 ??>??交互動效,ui交互動效??>??正文詳情

交互動效,ui交互動效

召翰林2019-11-07 13:22:13 人圍觀
簡介ui交互動效必修課首先,我想你會有以下問題:什么是微觀互動來自uxpin(一個在線交互原型工具)的Carrier cosins給出了以下定義:微觀交互是交互設備上單個交互過程的細prd交互動效

首先,我想大家會有這樣的問題:什么是微交互 (micro-interaction)?

  來自 UXPin(一款在線可交互原型制作工具)的 Carrie Cousins 給出了如下定義:微交互是在交互設備上的單一交互流程的細節優化。

  可能不是太容易理解,那就多看幾遍吧。

  在進入正題之前,有一點我要先聲明一下,接下來我要分析的 UI 動效都是出自非常牛逼的大神之手。

我非常尊敬他們和他們的作品,他們非常樂意分享他們的經驗和未完成的稿件。

不過在我分析作品的時候不少設計師的態度都非常差。

這可不是我的風格。

我都是用嚴肅的眼光去看待設計的,但是會用娛樂性的方式表達我的觀點。

如果我碰巧說了些不中聽的話,還請多多包涵。

  一、看在手繪板的份上,克制一下自己

  設計師就像一朵含苞待放的花兒一樣需要精(Jin)心(Qian)的照顧和呵護,但在設計高質量的微交互時,在你完稿前都充滿著摧殘。

  動效設計是個嘗試新想法并驗收成果的好途徑。

下面這個作品出自 Sergey Valiukh(一位在字型、排版、色彩以及動效方面特別牛逼的人)之手,一起來看看。

  Credit Sergey Valiukh

  下面我們一幀一幀地來分析:

  1、首先能最直觀的感受到的是圖片的3D翻動效果,這在我看來是完全沒必要的,甚至是違法的(開個玩笑,只是確保你還在看)。

在這個作品中,如果把任何一個多余的動效去掉來簡潔的表述的話會是一個不錯的想法。

  2、其次,你可能注意到了預覽流中的圖片是被裁剪過的,而在編輯界面中是原圖尺寸。

在實際應用中這顯然是不可行的。

  3、第三點,可以注意到頂部導航欄的圖標過渡的時間特別特別地長。

第一次看會覺得很棒,但是看久了就會很煩。

微交互要迅速,要簡潔,要有明顯地速度變化,持續時間最多在300~400毫秒。

  4、看完了這些之后,咱們再來看看底部,這里兩個圖標并不是同時出現,這意味著一個錯誤的交互敘述流程(多余地強調)和理解時間的延長。

  總結:動效設計時會有許許多多這樣的參數需要考慮。

你需要明確哪些可以用、哪些不可以用、哪里可以再簡短、哪里不用花太多精力,并從中獲取清晰易用的經驗。

這并不是說你不能天馬行空加上一些有趣的細節,只是說這些細節可能會讓整體顯得很累贅。

  小技巧:去掉多余的部分。

時刻提醒自己這些細節動效是不是保持了簡潔的微交互,還是讓交互體驗變糟了?

  關鍵詞:克制

  二、不要為了效果而犧牲敘述

  交互敘述流程(narrative)在用戶體驗中非常重要,一部分是因為這與使用者的預期相關,連貫的交互敘述流程不會超出使用者的認知負荷;另一部分是因為這與我們大腦收集和理解信息大致模式相關。

此外這還與我們的心智模式有關聯。

總之,交互敘述流程很重要。

  SrikantShetty(一位強壯的動畫設計師)的這個作品為我們呈現了一個非常好的例子。

  Credit Srikant Shetty

  看到這個動效的第一感覺是不是很詭異,以為是在線條上輸入文字,然而卻彈出了一個隱藏式的文本框。

這種點按-彈出-輸入的交互敘述流程挺讓人心煩的,或許是想看上去酷炫一點吧。

然而這種交互敘述流程打斷了我們輸入信息時的預期流程。

我們不得不停下來去面對這樣的意外,調整好心態后才能繼續操作。

  當設計師有所靈感的時候多半會設計出這種詭異的交互敘述流程。

他們往往會為了吊炸天的效果下半天功夫,對交互的核心敘述流程卻不怎么在意。

這么做事實上讓交互流程看上去像是一團糟。

  好的微交互的敘述流程是清晰且順暢的,看看下面的作品,順便和上面這幅做個對比:

  Credit Andrej Radisic Matt D. Smith, respectively

  高下立現,交互敘述流程非常的簡潔和自然。

雖然左邊的動效有一個線框彈跳的效果,它卻起到了細節優化的效果,而不是畫蛇添足。

  小技巧:保持交互敘述流程的簡潔和順暢。

  關鍵詞:交互敘述流程

  三、動效如果不能一步完成,那就干脆放棄

  幾乎所有出彩的微交互的動效都是一步到位或是步驟統一,那些不是很好的往往敗在了過于復雜的動效上。

  在這個例子中,Romain Passelande(他的 Dribbble 不要太?)的動效讓我虎軀一震。

  Credit Romain Passelande

  不太熟悉動畫的朋友可能看不到我所看到的內容。

這幅動效中有兩個單獨的動作:直線的轉換和圖標的旋轉。

這兩個動作實際上可以合并為一個動作,然而實際上并沒有這樣,Romain把他們分開了。

如果看的不是很明顯,那么看一下這張對比圖:

  Credit Naseer Ahmed

  左右兩邊的動效就是把直線的轉換和圖標的旋轉這兩個動作分開進行的,中間的動效則是用一個動作整齊劃一的完成,既不繁瑣也不累贅。

  小技巧:確保微交互的動效是一步完成的,如果有多個動作在不同時間和位置進行,那么干脆放棄吧。

  關鍵詞:一步完成

  四、問題不是出在動效上,而是在設計規劃上

  學習過 UI 精細動畫的朋友可能深有體會:在靜態樣本做成拆分細節動作的時候往往會遇到困難。

這個可以理解,好的微交互設計都會有這樣的問題:把動作精確到每一幀非常難。

然而糟糕的微交互設計讓人更糟心。

  下面這張表格是我對設計和動效的理論知識的總結歸納,你們拿去當做參考好了。

  一般來說,大家都會往點點的位置努力。

點點我用了紫粉色好讓大家在項目中期趕時間的時候快速定位。

  接下來讓我們跳出理論進入實踐:如何拆分動效的動作。

  Credit Sam Thibault

  這是由 Sam Thibault 完成的動效作品,作品中加入購物車(add to cart)按鈕那令人費解的轉換和形狀的改變填充了圖片下方的空白,然而這顯得很多余,也加重了使用者的認知負荷。

  在影片制作過程中有這樣一個說法:如果有問題那一定是劇本出了問題,糟糕的劇本就是糟糕的電影,設計也是如此,糟糕的設計就是糟糕的微交互。

  小技巧:在你挑動效的問題之前先確保你的設計沒有問題。

  關鍵詞:不是動效的錯

  五、不遺漏任何一個細節

  你不接球的話一定會錯過射門。

這話是 Wayne Gretzky(冰球運動員)說的。

顯然他很擅長躲避著撞擊的同時在冰面上翩翩起舞。

仔細想想,用這話形容交互設計師進行微交互設計的時候是多么貼切:有太多太多細節了。

大部分設計師并不是很習慣設計300~400毫秒的動畫,所以很容易敷衍了事。

  下面這個作品由 Ivan Bjelajac 設計,在這作品中我發現有5個細節還可以優化一下。

  Credit Ivan Bjelajac

  1、菜單按鈕和返回按鈕可以添加簡潔優雅的過渡動效,菜單按鈕隨頁面上滑顯得不是很協調。

  2、黃色方塊的右箭頭的縮放旋轉效果不是很必要。

這樣看上去有些奇怪,它應該隨著內容進行轉變。

  3、漸隱漸出的正文段落其實沒有必要。

  4、從左向右滑動的標題如果是從內容上淡入淡出的話會比滑動漸隱要好很多。

  5、在圖片轉換為頂部橫幅的時候人物照片被裁剪了。

這里如果將圖片重構一下與內容相呼應會更好一些。

  和下面的對細節嚴格要求的動效作品相比簡直是天壤之別。

  Credit Colin Garven Nick Frost Ramotion, respectively

  小技巧:對待細節不能松懈,不遺漏任何一個細節。

  關鍵詞:把握細節

  總結

  這里我想說就算你沒有任何動畫經驗,只要時刻記住下面這些要點,你也有可能制作出精美絕倫的微交互設計。

  克制

  交互敘述流程

  一步完成

  不是動效的錯

  把握細節

  盡管這不能保證你一定能做出牛逼的動效,但這是邁向正確的方向。

版權聲明:本文由 召翰林 整理編輯。

原標題:網頁交互動效,交互動效用什么軟件

轉載注明出處:http://www.dn9ww09s.icu/program/11428.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦機箱加裝風扇,電腦機箱風扇怎么裝

    電腦機箱加裝風扇,電腦機箱風扇怎么裝 相關圖片機箱風扇一般裝幾個沒關系。現在,小編和你機箱風扇需要裝嗎...

  • css,css寬

    css,css寬 相關圖片css inline隨著智能手機的增多,手機網站也可以更加個性化最近,在自己的手機網站的改版中,我們遇到了網站圖片大小的問題,而且手機屏幕比較小如何讓上傳的不同規則的圖片在手機...

  • 筆記本電腦屏幕亮度,筆記本電腦屏幕不亮

    筆記本電腦屏幕亮度,筆記本電腦屏幕不亮 相關圖片筆記本電腦亮度快捷鍵調整筆記本電腦屏幕使其更柔和可以保護您的眼睛另外,適當調低筆記本電腦屏幕的亮度更節能,特別是在使用筆記本電池時,還可以提高筆記本電腦的續航力如...

  • 空格,如何打空格

    空格,如何打空格 相關圖片空格是什么字符方法1:按住Ctrl Shift 空格鍵方法2:在菜單欄中,編輯--首選參數--常規方法3:切換到代碼嘗試,輸入要鍵入的空格空格符號代碼復制...

  • diy電腦配件,組裝電腦教程

    diy電腦配件,組裝電腦教程 相關圖片diy電腦配件安裝隨著計算機硬件的不斷普及,擁有一臺個人電腦已不再是遙不可及的夢想,特別是對于一些熱衷于組裝自己DIY電腦的資深電腦愛好者來說,這不僅節省了很多不必要的開...

  • 查看電腦系統,怎樣查看電腦系統

    查看電腦系統,怎樣查看電腦系統 相關圖片電腦怎么恢復出廠設置操作系統是用戶與計算機之間的接口,也是計算機硬件與其它軟件之間的接口許多人不知道他們的計算機系統是XP還是win7,win8還是其他系統如何檢查現在,小編帶...

  • 最早做隔空手勢,隔空手勢感應app

    最早做隔空手勢,隔空手勢感應app 相關圖片隔空手勢電視羨慕鐵人電影中的酷手勢操作其實,它背后的互動思維遠遠超出了你的想象未來的交互方式將會發生巨大的變化,而gap手勢是一個完全陌生的領域今天的好文章來自于Expp...

  • 電腦組裝有哪些配件,電腦組裝需要哪些配件

    電腦組裝有哪些配件,電腦組裝需要哪些配件 相關圖片自己組裝電腦需要買哪些配件現在,無論是單機游戲還是網絡游戲,對電腦配置的要求都很高但是筆記本和品牌機的價格很高關鍵是電腦配置很低這是致命的說,視頻卡通常是低端或集...

  • 怎么把照片傳到電腦上,手機照片怎樣傳到電腦上

    怎么把照片傳到電腦上,手機照片怎樣傳到電腦上 相關圖片手機照片直接傳到u盤里智能手機的功能越來越發達,所以在我們的日常生活中,我們可以用智能手機做很多事情,有時候我們可以用智能手機拍漂亮的照片,從而留下漂亮的照片作為記...

  • 虛線css,css長條虛線

    虛線css,css長條虛線 相關圖片HTML虛線單擊鏈接時,將出現一個虛線框即使它被松開,它仍然存在。有時看起來很難看因為它不好看,所以不要用它如何擺脫它方法1在ie下,可以使用它的私有HTML屬性:hidehtml一條虛線...

熱評文章

  • 筆記本關機慢,筆記本關機很慢

    筆記本關機慢,筆記本關機很慢 相關圖片筆記本藍屏怎么關機雖然筆記本電腦是一種很好的電器,但在使用過程中總會出現一些小問題如果我們不能解決這些問題,我們將永遠心煩意亂,所以有必要掌握一些電腦維修的小知識...

  • 錨記鏈接,網頁錨記鏈接

    錨記鏈接,網頁錨記鏈接 相關圖片錨點鏈接使用命名錨定,可以在文檔中設置標記,這些標記通常放置在文檔中特定主題的頂部然后,您可以創建指向這些命名錨的鏈接,如果網頁中有很多內容并且網頁很長,則可以快...

  • 電腦運行速度慢的解決方法,筆記本電腦運行慢怎么解決

    電腦運行速度慢的解決方法,筆記本電腦運行慢怎么解決 相關圖片電腦慢卡 怎樣解決雖然計算機的使用過于落后,但計算機運行緩慢的問題是不可避免的,特別是在最關鍵的時候,計算機被卡住了這是一件很麻煩的事情,但是由于錢已經熟悉了舊電腦...

  • 字體設計教程,文字排版設計

    字體設計教程,文字排版設計 相關圖片ps字體設計藝術字教程文本鏈接是網頁中最常見的頁面元素默認情況下,文本鏈接的樣式為下劃線,這使得網頁無法突出個性和滿足布局的需要為了使文本鏈接符合頁面的整體效果,可以...

  • 筆記本電腦無線網卡怎么打開,筆記本無線網卡在哪

    筆記本電腦無線網卡怎么打開,筆記本無線網卡在哪 相關圖片筆記本電腦怎么打開無線網絡在無線網絡普及的時代,網絡的使用越來越普遍,無線網卡的功能就像普通的計算機網卡一樣被用來連接局域網有筆記本電腦的用戶問如何打開筆記本電腦...

  • 怎么把照片傳到電腦上,手機照片怎樣傳到電腦上

    怎么把照片傳到電腦上,手機照片怎樣傳到電腦上 相關圖片手機照片直接傳到u盤里在我們的日常生活中,手機中的照片越來越多,不僅占據了手機的存儲空間,而且影響了手機的運行速度因此,經常有必要將手機拍攝的照片轉移到電腦上,以節...

  • background_,background是什么

    background_,background是什么 相關圖片html中background下面是我想使用的背景圖:代碼如下:在HTML頁面中,有162*162個灰色背景div塊和三種不同位置的背景圖片在瀏覽器中看到的效果可以從上圖中看到:當它是背景位background設置...

  • 電腦開機顯示器黑屏,開機顯示器沒反應

    電腦開機顯示器黑屏,開機顯示器沒反應 相關圖片顯示器亮一下就黑屏當電腦開機時,顯示器的黑屏通常是硬件問題很多用戶都想檢查并解決這個問題打開電腦后,小編將分享顯示屏黑屏的解決方案如果你需要知道,你可以看看顯示器...

  • 機械硬盤和固態硬盤的區別,固態硬盤和機械硬盤哪個好

    機械硬盤和固態硬盤的區別,固態硬盤和機械硬盤哪個好 相關圖片ssd硬盤隨著科學技術的發展,固態硬盤(SSD)應運而生ssd分發已經有很長一段時間了不過,目前主流的安裝方式仍然是選擇傳統的機械硬盤,而大部分的固態硬盤都采用高端配置安ssd固...

  • 網頁優化包括什么,網站怎么優化

    網頁優化包括什么,網站怎么優化 相關圖片如何提高性功第一期回顧:《有圖有案例!125個提升網頁可用性的優化小技巧(一)》  讓常用功能和重要數據信息更接近用戶  預測用戶的意圖,讓他們盡可能接近目標。  △ 篩選...

關注微信

变脸官网查询