歡迎來到培訓(xùn)無憂網(wǎng)!
咨詢熱線 400-001-5729
2022-12-03 10:35:43|已瀏覽:111次

ui動(dòng)效界面交互設(shè)計(jì)技巧
ui動(dòng)效界面交互設(shè)計(jì)技巧:動(dòng)效廣泛運(yùn)用于網(wǎng)頁內(nèi)容和背景當(dāng)中,用來強(qiáng)化功能,提升美感,它會(huì)直接影響用戶的行為,引導(dǎo)用戶注意到特定的內(nèi)容,今天小編主要給大家分享ui動(dòng)效界面交互設(shè)計(jì)技巧,希望對(duì)你們有幫助!
加載過程不應(yīng)讓用戶感到單調(diào)乏味
如果不能縮短加載和等待過程,那么應(yīng)該盡量讓用戶在等待過程中感到愉快,此時(shí)的動(dòng)態(tài)效果基是提醒用戶后臺(tái)正在加載。幾乎所有的網(wǎng)站和應(yīng)用都會(huì)遇到這種情況,好的設(shè)計(jì)通常會(huì)用微妙有趣的動(dòng)態(tài)效果來轉(zhuǎn)移用戶對(duì)動(dòng)態(tài)效果本身的注意力,而不是受無聊情緒的影響。所以設(shè)計(jì)師可以讓界面從基本框架結(jié)構(gòu)加載,明顯縮短了等待的主觀體驗(yàn)。
不要讓狀態(tài)改變太僵硬
動(dòng)效最重要的功能之一是加強(qiáng)過渡效應(yīng),因此需要清楚地呈現(xiàn)這一過程的開始和結(jié)束。一個(gè)設(shè)計(jì)良好的動(dòng)效應(yīng)合理的把用戶的注意力引導(dǎo)到需要注意的地方。
Adrian Zumbrunnen有一個(gè)非常好的案例,展示了滾動(dòng)效果如何讓用戶在點(diǎn)擊鏈接后理解變化過程,大家可以去看一下。
闡明元素之間的關(guān)系
動(dòng)效還可以增強(qiáng)用戶對(duì)界面的控制感。
菜單按鈕以平滑的動(dòng)效展開為播放控制界面,然后單擊返回,又收縮為一個(gè)按鈕。這種特效不僅讓界面看起來很棒,還告訴用戶按鈕的實(shí)際功能。有趣的是,這種動(dòng)效也強(qiáng)調(diào)了播放和暫停之間的差異,這種差異可以在不共存的情況下相互改變。
在這種情況下,動(dòng)效將用戶的注意力引導(dǎo)到了屏幕的正中央,播放和暫停兩種狀態(tài)的改變是用戶注意力的焦點(diǎn)。
另一種情況是更常見的浮動(dòng)按鈕,單擊“+”按鈕可展開其其它隱藏功能按鈕,而按鈕中的“+”則變化為編輯的鉛筆圖標(biāo)。該圖標(biāo)變化的細(xì)節(jié)向用戶指示接下來會(huì)發(fā)生什么,并闡明按鈕不同狀態(tài)的差異。
出錯(cuò)時(shí)向用戶提供反饋
當(dāng)用戶執(zhí)行操作時(shí),動(dòng)效可以增強(qiáng)交互產(chǎn)生的效果,報(bào)錯(cuò)是最常見的反饋機(jī)制之一。
一個(gè)簡(jiǎn)單的左右晃動(dòng)的特效給用戶一種界面在“搖頭”的感覺,讓他們明白所輸入的內(nèi)容是不正確的。這種擬人化的動(dòng)態(tài)效果使界面充滿真實(shí)的質(zhì)感,信息反饋更加直觀。
注:尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://www.hebeijilong.cn/news-id-72783.html 違者必究!部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們,了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多,了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多:150 3333 6050