激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計(jì)如何提升，大廠的交互動(dòng)效設(shè)計(jì)是怎么做的

發(fā)布時(shí)間：2024-03-08 11:15:55 瀏覽量：276次

大屏手機(jī)中的交互設(shè)計(jì)越來越講究用戶體驗(yàn)，而對設(shè)計(jì)來說提升用戶體驗(yàn)除了完善友好的產(chǎn)品鏈路和精致的視覺體驗(yàn)之外，還有一個(gè)被越來越多設(shè)計(jì)師重視起來的地方，就是交互動(dòng)畫設(shè)計(jì)。我們熟知的蘋果開關(guān)按鈕就是使用交互動(dòng)畫的典型案例，它精準(zhǔn)的模仿了現(xiàn)實(shí)中用戶按下按鈕后的轉(zhuǎn)換過程并且給到用戶實(shí)時(shí)的點(diǎn)擊反饋。

▲ 蘋果經(jīng)典按鈕開關(guān)

添加動(dòng)畫效果是為界面服務(wù)并給到用戶能夠控制的預(yù)期，用戶在操作頁面的同時(shí)也樂于看到生動(dòng)活潑的情感化響應(yīng)。制作時(shí)需要注意一些規(guī)則，比如參考現(xiàn)實(shí)中物體的運(yùn)動(dòng)規(guī)律，這樣會(huì)使頁面功能的展示方式更加豐富、更富有吸引力，但動(dòng)畫的加入要根據(jù)場景和功能而定，不宜過多，否則會(huì)使用戶感覺混亂分散注意力。



01

動(dòng)畫組件-有溫度的設(shè)計(jì)


安卓和iOS的動(dòng)畫組件庫都支持針對目標(biāo)的基礎(chǔ)動(dòng)畫屬性調(diào)整，如目標(biāo)的透明度、大小、旋轉(zhuǎn)角度，顏色變化等，經(jīng)過不同的組合后便成為了豐富的動(dòng)畫樣式。具體表現(xiàn)形式可以參考Jorge Rolando Canedo Estrada基于迪士尼動(dòng)畫原理提煉的十條動(dòng)畫設(shè)計(jì)原則。


▲ 動(dòng)畫設(shè)計(jì)的十個(gè)原則

1.1 漸進(jìn)漸出

漸進(jìn)漸出模仿了現(xiàn)實(shí)中目標(biāo)進(jìn)入和滑出的方式，會(huì)伴有加速和減速的過程，部分樣式還會(huì)加入彈跳的效果，這種樣式多用于表現(xiàn)頁面的上下級切換。


▲ 漸進(jìn)漸出動(dòng)效


1.2 縮放

這種動(dòng)畫效果模擬了現(xiàn)實(shí)中近大遠(yuǎn)小的物理關(guān)系，多用于圖片內(nèi)容的查看，一般會(huì)配合上下滑動(dòng)來切換。


▲ 頁面縮放動(dòng)效


1.3 疊加遮罩

疊加遮罩的效果動(dòng)畫常用于界面中的彈層展示和一些細(xì)節(jié)界面，常伴隨著同一頁面中前后目標(biāo)之間的形變和轉(zhuǎn)換。

▲ 疊加遮罩動(dòng)效


02

動(dòng)畫功能-附魔產(chǎn)品


2.1 轉(zhuǎn)場動(dòng)效- 貼近現(xiàn)實(shí)的動(dòng)畫

針對多層且復(fù)雜的頁面層級需要在多個(gè)頁面之間轉(zhuǎn)換，這些場景中往往需要簡單的滑動(dòng)和點(diǎn)擊操作向用戶傳達(dá)清楚頁面之間的層級鏈路關(guān)系，而默認(rèn)的動(dòng)畫效果如橫滑和平移并不能很好的加深用戶的印象，這時(shí)可以結(jié)合app的特性來添加動(dòng)畫以強(qiáng)化屬性。比如下圖中這款圖書類的app設(shè)計(jì)對頁面的轉(zhuǎn)場加入了翻滾的動(dòng)效，用戶在操作時(shí)和現(xiàn)實(shí)中的翻書類似，很好的串聯(lián)了界面前后轉(zhuǎn)換的過程，強(qiáng)化了界面之間的關(guān)系。


▲ 閱讀app的翻頁動(dòng)效


下面這個(gè)日歷app也模擬了現(xiàn)實(shí)中紙張的層疊效果，滑動(dòng)切換待辦事件就可以輕松丟掉已完成事項(xiàng)的便箋，讓完成的動(dòng)作更輕松有趣，同時(shí)也賦予了用戶成就感。


▲ 日歷app的層疊動(dòng)效


當(dāng)頁面中有詳細(xì)信息但又不至于跳轉(zhuǎn)頁面的時(shí)候也可以使用疊加效果，對頁面的局部信息進(jìn)行放大，同時(shí)弱化模糊其他非必要信息，可以有效的幫助用戶抓到內(nèi)容重點(diǎn)。


▲ 圖片app瀏覽動(dòng)效


2.2 加載動(dòng)效-趣味化的設(shè)計(jì)

現(xiàn)實(shí)使用過程中常常會(huì)因?yàn)橛布渲煤途W(wǎng)絡(luò)等因素導(dǎo)致頁面的加載速度極不穩(wěn)定，為了讓用戶感知到當(dāng)前頁面正在運(yùn)行，通過豐富有趣的小動(dòng)畫可以很好地緩解用戶在等待中產(chǎn)生的焦慮情緒。


▲ loading動(dòng)畫

空白頁面的加載也可以和過場動(dòng)畫相結(jié)合，如下圖所示，首先是擬物化的卡片抽出效果，之后的數(shù)據(jù)讀取用色塊的滑動(dòng)效果取代死板的填充。同時(shí)卡片成功刪除后的效果并不是直接確認(rèn)的生硬文案，而是符合現(xiàn)實(shí)中消除卡片的粉碎動(dòng)畫，幫助用戶加深確認(rèn)效果。


▲ 支付app的加載和刪除動(dòng)效


下圖中足球比賽的app也用到了同樣的設(shè)計(jì)方式，當(dāng)用戶點(diǎn)擊球隊(duì)比分時(shí)會(huì)顯示詳細(xì)的進(jìn)球數(shù)據(jù)，因?yàn)槭菍?shí)況比賽用戶需要快速閱讀了解當(dāng)下比分，這時(shí)的加載畫面用球場的輪廓形狀展現(xiàn)，這樣既切合了app本身的屬性，也弱化了用戶對數(shù)據(jù)加載的焦急等待。


▲ 體育app的加載動(dòng)效


2.3 引導(dǎo)動(dòng)效-情緒的引導(dǎo)

在app版本升級和一些頁面新功能介紹時(shí)我們經(jīng)?？吹竭@類動(dòng)畫效果，主要功能是給用戶介紹更新內(nèi)容，ios15更新后將多國語言的hello文字轉(zhuǎn)換成更加友好的動(dòng)畫形式，增加了溫度也更貼合用戶的情感需求。


▲ iOS15設(shè)置歡迎引導(dǎo)


支付寶的集五?；顒?dòng)把五福做成了開屏動(dòng)畫，動(dòng)畫結(jié)束時(shí)落在了頁面的頂部五?；顒?dòng)入口，動(dòng)畫上的前后無縫承接既起到了活動(dòng)入口宣傳的作用也幫助用戶強(qiáng)化了對于活動(dòng)的理解。


▲ 支付寶集五福開屏動(dòng)效


03

智能設(shè)備動(dòng)效


智能設(shè)備逐漸普及的當(dāng)下，很多交互界面是非常規(guī)或是沒有屏幕的，這就更需要利用軟硬件的結(jié)合動(dòng)效來傳達(dá)用戶的操控反饋，這些動(dòng)畫效果和特殊的硬件設(shè)計(jì)結(jié)合在一起起到了1+1>2的效果。


▲ LV智能手表三代

LV采用鴻蒙系統(tǒng)的三代智能手表，與特殊印花表盤結(jié)合的動(dòng)畫效果在非常的炫酷流暢，凸顯了品牌的調(diào)性。


▲ LV智能手表表盤動(dòng)畫

蘋果Homepod mini的觸控面板動(dòng)畫模仿了手機(jī)上呼出siri的動(dòng)畫效果，讓用戶在呼叫音箱的時(shí)候代入了手機(jī)的操作體驗(yàn)，延續(xù)了體驗(yàn)的一致性。


▲ Home pod mini

▲ Home pod mini操作動(dòng)效


04

動(dòng)效設(shè)計(jì)工具


目前安卓和ios平臺都有自己的工具來支持開發(fā)者制作交互動(dòng)畫，可以直接加入貝塞爾曲線來設(shè)置動(dòng)畫目標(biāo)的各項(xiàng)參數(shù)，這里分享兩款常用動(dòng)畫制作軟件，都支持精致且舒適的動(dòng)畫效果，讓吸引人的動(dòng)畫效果向用戶呈現(xiàn)操作結(jié)果，傳達(dá)界面狀態(tài)，增強(qiáng)用戶的感知。


▲ 貝塞爾曲線


Adobe After Effects擁有豐富的圖層效果和動(dòng)畫參數(shù)設(shè)置選項(xiàng)，可以根據(jù)需求輸出多種格式，缺點(diǎn)是上手有一定難度，在導(dǎo)入素材時(shí)一些常用的設(shè)計(jì)軟件無法很好的兼容。

▲ Adobe AE 2021

相較之下Principle則更為小巧便捷，可以直接導(dǎo)入sketch和figma的源文件，并且默認(rèn)設(shè)置了多種轉(zhuǎn)場的交互動(dòng)畫和預(yù)置的貝塞爾動(dòng)畫參數(shù)供使用者選擇，可以用來快速的制作交互動(dòng)畫原型。


▲ Principle


寫在最后

隨著智能設(shè)備硬件的不斷升級，平時(shí)習(xí)以為常的設(shè)計(jì)細(xì)節(jié)也需要不斷地推陳出新。不論是基礎(chǔ)組件還是鏈路設(shè)計(jì)，都可以結(jié)合實(shí)際界面做出驚艷的動(dòng)畫效果，幫助用戶帶來更好的體驗(yàn)，交互動(dòng)畫設(shè)計(jì)將是未來設(shè)計(jì)師必備的一項(xiàng)專業(yè)技能。

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請保持電話暢通！
確定