2022-06-06 分類: 用戶體驗(yàn)
創(chuàng)新互聯(lián)編輯為你展現(xiàn),app界面設(shè)計(jì),如何利用動(dòng)畫效果來提升用戶體驗(yàn)動(dòng)畫效果會(huì)講故事。但不是冗長和完整的故事,而是簡單的故事,比如“嗨,你現(xiàn)在該看這里了”或者“哇,你的操作完全正確?!比欢瑒?dòng)效的目的不是為了愉悅用戶,而是為了幫助理解操作會(huì)有什么進(jìn)展亦或是提高用戶使用APP的效率。這一點(diǎn)我們可以在 Zurb 的陳述里證實(shí)。
我們不僅僅只是設(shè)計(jì)圖形界面。我們?cè)O(shè)計(jì)的是用戶與他們的屏幕如何互動(dòng)。
或許動(dòng)畫效果應(yīng)用在廣范圍的背景來構(gòu)建美學(xué)與功能的統(tǒng)一:動(dòng)效能夠影響用戶行為,溝通狀態(tài),引導(dǎo)用戶的注意力以及幫助用戶看到自己動(dòng)作的反饋。這里有一些例子說明你可以在界面的什么地方增加動(dòng)畫效果來提升用戶體驗(yàn)。
加載不能太無聊
你應(yīng)該嘗試讓等待變得愉悅,如果你不能縮減等待時(shí)間的話。動(dòng)效可以代替煩人的轉(zhuǎn)啊轉(zhuǎn)啊轉(zhuǎn)(這基本上只是提醒用戶他們正在等待)。幾乎任何網(wǎng)頁或者應(yīng)用都可以利用屏幕框架和巧妙的動(dòng)畫來維持用戶的興趣。
在頁面完全加載完之前用屏幕框架遞增的方式完成
狀態(tài)切換不能太生硬
動(dòng)畫效果可以讓過渡更加顯著,所以當(dāng)用戶開始和結(jié)束,動(dòng)畫效果要能展示到底發(fā)生了什么。好的過渡設(shè)計(jì)會(huì)讓用戶清楚的明白自己的注意力應(yīng)該往什么地方放。
Adrian Zumbrunnen 舉了一個(gè)關(guān)于當(dāng)用戶點(diǎn)擊鏈接的時(shí)候,滾動(dòng)動(dòng)畫是如何幫助用戶保持所在的環(huán)境的好例子。只要比較靜止的那一瞬間的變化就能明白切換的感覺就像硬切一樣:
突然,不自然地就改變了,這樣的界面切換對(duì)用戶來說是非常不舒服的
有動(dòng)畫效果動(dòng)作時(shí):
動(dòng)效給畫面帶來生氣,解釋元素之間的關(guān)系,動(dòng)畫可以提升用戶直接操作的感覺。
舉個(gè)例子,一個(gè)菜單按鈕平滑過度變成播放控制,再變回來。這個(gè)效果會(huì)告知用戶這個(gè)按鈕的功能,當(dāng)用戶不太明白這個(gè)交互的作用時(shí)候。播放按鈕轉(zhuǎn)變正暫停表明這兩個(gè)動(dòng)作是有關(guān)系的,當(dāng)其他元素出現(xiàn)的時(shí)候它們是不存在的。
這個(gè)例子里,動(dòng)畫用來引導(dǎo)眼鏡去看屏幕的中心也就是音樂控件的位置。
另外一個(gè)例子,當(dāng)按下浮動(dòng)按鈕的時(shí)候,加號(hào)就會(huì)變成一支筆。這說明筆是最主要的創(chuàng)作方式。一個(gè)小小的細(xì)節(jié)也能顯示出接下來會(huì)發(fā)生什么,讓用戶明白不同情況下標(biāo)識(shí)的含義之間的不同。
錯(cuò)誤的操作必須有鮮明的反饋
動(dòng)畫可以加強(qiáng)用戶習(xí)慣的的操作。
舉個(gè)例子,表上登記的項(xiàng)目可以極大的增強(qiáng)一些動(dòng)畫。如果正確的數(shù)據(jù)允許登錄,一個(gè)簡單的“點(diǎn)頭”的動(dòng)畫可以解釋這一點(diǎn)。而水平的抖動(dòng)可以用來表示未輸入或者輸入錯(cuò)誤。當(dāng)用戶注意到動(dòng)畫的時(shí)候他們立刻就能明白這個(gè)動(dòng)作的含義是什么。
圖中展現(xiàn)的是最基本的抖動(dòng)形式
利用反饋來展現(xiàn)動(dòng)作完成
動(dòng)畫可以幫助用戶明白他們操作之后的結(jié)果。根據(jù)“別說,展現(xiàn)出來”的原則,你可以用動(dòng)畫反饋展示出到底完成了什么。
下面的例子中,當(dāng)用戶點(diǎn)擊“付款”,一個(gè)簡單的旋轉(zhuǎn)加載出現(xiàn)在APP支付成功的情況下。對(duì)號(hào)標(biāo)志動(dòng)畫讓用戶覺得很輕松的付了款并且用戶會(huì)感謝這些重要的細(xì)節(jié)。
總結(jié)
當(dāng)動(dòng)效使用的非常成熟了時(shí)候,它是非常有用的。這對(duì)與時(shí)間安排以及考慮一個(gè)動(dòng)畫是否是有效的是非常重要的。我們需要從開始就接受動(dòng)畫效果,并且考慮這對(duì)于我們?cè)O(shè)計(jì)來說是否自然,因?yàn)樵O(shè)計(jì)不僅僅只是視覺的展示。就像喬布斯曾經(jīng)說過一樣:設(shè)計(jì)不只是看起來及摸起來像什么,設(shè)計(jì)是如何運(yùn)作。
創(chuàng)新互聯(lián)還為你提供更過的APP界面設(shè)計(jì)資訊。
本文名稱:app界面設(shè)計(jì):怎樣用動(dòng)畫效果提升用戶體驗(yàn)
瀏覽地址:http://redsoil1982.com.cn/news/164036.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有用戶體驗(yàn)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容