實(shí)戰(zhàn)案例:如何讓你的UI界面更加有趣而富有生命力

2 評論 16211 瀏覽 92 收藏 10 分鐘

動(dòng)效可以以更加廣泛、多樣的方式,打通產(chǎn)品,將產(chǎn)品的美學(xué)和功能統(tǒng)一到一個(gè)系統(tǒng)之下。

如果重新審視10年前的網(wǎng)頁和移動(dòng)端應(yīng)用的話,你會(huì)發(fā)現(xiàn)動(dòng)效和動(dòng)畫在這個(gè)時(shí)期簡直是犯規(guī)一般的存在:瀏覽器和硬件設(shè)備吃不消,它們根本無法成為設(shè)計(jì)最佳實(shí)踐。十年前你所能看到的動(dòng)畫和動(dòng)效,通常是使用Flash實(shí)現(xiàn),或者短暫的存在于彈出框和閃爍的按鈕特效中。但是情況在最近的幾年出現(xiàn)了巨大的轉(zhuǎn)變,iOS和Android 設(shè)備的大規(guī)模普及,移動(dòng)端芯片的性能提升,讓設(shè)計(jì)師在移動(dòng)端APP上實(shí)現(xiàn)多樣的動(dòng)畫和動(dòng)效,成為了可能,而今天,動(dòng)畫和動(dòng)效已經(jīng)成為了如今UI和UX設(shè)計(jì)當(dāng)中,最重要的組成部分之一。時(shí)間這一維度的加入,令靜態(tài)的UI動(dòng)態(tài)地呈現(xiàn),設(shè)計(jì)師可以因此而可以創(chuàng)造出更加豐富多彩的世界。

現(xiàn)代的UI界面不再是一系列靜態(tài)的分屏。將時(shí)間的維度添加到UI界面中就產(chǎn)生了動(dòng)效,它彌合了人類認(rèn)知和軟件本身之間的溝壑,用戶更容易理解和使用軟件了。

那些最直觀、令人愉悅的動(dòng)效設(shè)計(jì)常常將一些有趣的細(xì)節(jié)加入到其中,在之前的那篇《動(dòng)效在UI設(shè)計(jì)中的三個(gè)關(guān)鍵用途》當(dāng)中,已經(jīng)詳細(xì)闡述了UI設(shè)計(jì)中動(dòng)效的三個(gè)關(guān)鍵用途,這些用例大都是這樣做的。在今天的文章中,我將繼續(xù)通過實(shí)戰(zhàn)案例,為你闡釋如何讓你的UI界面更加有趣而富有生命力。

讓加載動(dòng)效更具視覺愉悅感

當(dāng)APP 的打開動(dòng)效足夠有視覺愉悅感的時(shí)候,用戶每次打開的時(shí)候都會(huì)為之感到開心愉悅。但是,動(dòng)效能做的并不止于此,下面的案例中,Uber的打開動(dòng)效不僅讓用戶體會(huì)到愉悅感,而且它的展開式動(dòng)效還很好地“控制”了用戶雙眼的視覺焦點(diǎn)。

用有吸引力的視覺設(shè)計(jì)引導(dǎo)新用戶

新用戶第一次打開你的APP的時(shí)候,通常需要經(jīng)過新用戶引導(dǎo)流程,快速了解APP的功能和特色,而這也是用戶和你的APP的第一次交互。而APP給用戶的第一印象也非常重要,所以初次的引導(dǎo)體驗(yàn)應(yīng)該足夠好,平滑的過渡動(dòng)效加持的引導(dǎo)流程,對于初次使用的用戶而言有著巨大的影響,同APP的用戶留存率有著直接的關(guān)聯(lián)。

下面的新用戶引導(dǎo)的動(dòng)效就充滿了創(chuàng)意和個(gè)性,充滿驚喜的視覺設(shè)計(jì)和直觀簡練的文案都給用戶以良好的印象,非常值得學(xué)習(xí)。

交互式提醒

不同的APP在功能上有著許多差異,許多新的功能可能用戶之前從未接觸過,加入交互式的小貼士能夠幫助用戶更好的熟悉APP,而這種動(dòng)態(tài)而智能的呈現(xiàn)方式,能讓APP顯得更加貼心而靈活。

提供方向上的視覺線索

當(dāng)UI界面中狀態(tài)發(fā)生改變的時(shí)候,動(dòng)效的重要作用就顯現(xiàn)出來了。狀態(tài)改變之后,新的界面出現(xiàn),用戶需要知道新的界面和之前的界面之間的關(guān)系,而動(dòng)效就是線索。

靜態(tài)的設(shè)計(jì)通常難以闡明狀態(tài)之間的相互關(guān)系。

對于建立內(nèi)容之間的關(guān)系這件事而言,動(dòng)效非常的實(shí)用,它可以作為不同UI狀態(tài)之間的連接點(diǎn)。

闡述元素之間的關(guān)系

精心設(shè)計(jì)的過渡動(dòng)效能夠?qū)⒂脩舻囊暰€引導(dǎo)到設(shè)計(jì)師希望用戶看到的位置,引導(dǎo)用戶去交互。動(dòng)效在UI當(dāng)中能夠有針對性地對一些元素進(jìn)行強(qiáng)調(diào),并且闡明不同元素之間的關(guān)系。

轉(zhuǎn)場動(dòng)效連接了播放和暫停按鈕之間的兩個(gè)狀態(tài),從而闡明了兩者之間的關(guān)系。

空間意識

意境地圖是人類對于空間和關(guān)系的理解的關(guān)鍵點(diǎn),而動(dòng)效能夠幫助用戶對界面的空間關(guān)系有更深的了解,明白界面元素從哪里來,到哪里去。

用戶借助動(dòng)效明白他們所處的位置,找到他們想去的地方。

提供清晰的反饋

動(dòng)效能夠強(qiáng)化用戶正在進(jìn)行的交互的效果,幫助用戶了解操作的進(jìn)行方向,產(chǎn)生的結(jié)果,確定操作成功與否,以及為何會(huì)如此。

揭示問題

當(dāng)你需要設(shè)計(jì)界面中的錯(cuò)誤狀態(tài)的時(shí)候,你需要讓用戶清晰的意識到系統(tǒng)正在報(bào)錯(cuò),而動(dòng)效在此處作用也很重要。密碼輸入錯(cuò)誤的時(shí)候,密碼輸入框抖動(dòng)的特效,就是一個(gè)很好的實(shí)例。它模擬了人們搖頭抖動(dòng)的效果,直觀而擬人化地給予用戶以報(bào)錯(cuò)反饋。

多個(gè)元素層協(xié)同為用戶傳遞信息將會(huì)更加有效。

確認(rèn)效果

動(dòng)效能夠以更視覺化的方式呈現(xiàn)用戶操作之后的結(jié)果。展示結(jié)果,而不要去描述,通過反饋呈現(xiàn)交互所產(chǎn)生的結(jié)果。

在Stripe 這個(gè)APP實(shí)例中,當(dāng)用戶點(diǎn)擊支付之后,按鈕呈現(xiàn)出短暫的加載過程之后,顯示支付成功。成功的對勾標(biāo)識會(huì)讓用戶覺得支付很簡單,而短暫的加載則讓用戶感受到了這個(gè)過程,但是這又不會(huì)讓他們等待很久。

展現(xiàn)邏輯

邏輯是幾乎所有的動(dòng)效都具備的一個(gè)特征。你需要讓你的動(dòng)效符合整體的邏輯,尤其是在移動(dòng)端的APP上。有限的空間和復(fù)雜的實(shí)際狀況是用戶絕大多數(shù)所面臨的狀況,你需要充分利用空間,打通環(huán)節(jié),降低產(chǎn)品的復(fù)雜性,使用動(dòng)效將界面和元素以富有邏輯的方式呈現(xiàn)出來,就很有必要了。

你需要讓你的動(dòng)效充滿目的性,也富有邏輯,有太多的APP因?yàn)椴豢深A(yù)測的交互和過于繁復(fù)花哨的動(dòng)效而最終失敗。雖然有的動(dòng)效做到很贊,在實(shí)現(xiàn)上也沒問題,但是它讓界面顯得混亂,這就成問題了。

現(xiàn)實(shí)中約定俗成的交互習(xí)慣和之前產(chǎn)品給用戶養(yǎng)成的習(xí)慣,使得手勢交互有了一套常規(guī)的法則。不一致的交互方式,會(huì)破壞用的使用習(xí)慣,毀掉整個(gè)用戶體驗(yàn)。

結(jié)語

動(dòng)效可以以更加廣泛、多樣的方式,打通產(chǎn)品,將產(chǎn)品的美學(xué)和功能統(tǒng)一到一個(gè)系統(tǒng)之下。所以,你需要有目標(biāo)的設(shè)計(jì)動(dòng)效,因?yàn)閯?dòng)效存在的首要目的并不是讓你的產(chǎn)品看起來酷,而是功能,是讓產(chǎn)品可用,具備好的體驗(yàn),然后才是其他。

 

原文作者:Nick Babich

原文地址:uxplanet

譯者:@陳子木

譯文地址:http://www.uisdc.com/motion-bring-apps-to-life

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 動(dòng)效是需要專門動(dòng)效開發(fā)人員做嗎?還是開發(fā)客戶端就能完成?

    來自北京 回復(fù)
  2. 說的太好了!學(xué)到了!

    來自上海 回復(fù)