UI界面視覺已然走到了一端池户,但動效在移動用戶體驗(yàn)領(lǐng)域卻逐步走向高峰。動效已成為用戶界面的重要組成部分,使其更具互動性校焦,趣味性和用戶友好性赊抖。
每個設(shè)計(jì)師都知道絲滑般的動效對產(chǎn)品的可用性有多大幫助,特別是對于移動應(yīng)用寨典。今天為大家分享來自Tubik團(tuán)隊(duì)的10個創(chuàng)意交互動畫氛雪。
素食食譜應(yīng)用
這是一個素食食譜應(yīng)用的概念產(chǎn)品,可以根據(jù)素食原則選擇菜品耸成,并將必要的成分添加到購物清單中报亩。用戶可以通過水平滑動來選擇配方,當(dāng)點(diǎn)擊特定配方時井氢,用戶可以看到有關(guān)成分和營養(yǎng)的詳細(xì)信息弦追。
美味漢堡應(yīng)用
第二個食物概念是新鮮多汁的美味漢堡應(yīng)用,允許用戶從菜單中訂購傳統(tǒng)漢堡花竞,或者自定義添加或移除配料劲件。界面增大所選漢堡的高品質(zhì)照片占比,使用戶更想要它约急。配料在屏幕的底部零远,方便用戶添加或刪除的操作。最后的黃色的CTA按鈕“添加到購物車”有助于完成購買厌蔽。
品牌名稱放在屏幕頂部以提高品牌辨識度遍烦。界面所有的UI元素層級清晰方便用戶交互體驗(yàn)。
移動游戲應(yīng)用
這是一個游戲應(yīng)用躺枕。玩家可以跳過或添加的一組隨機(jī)比賽來創(chuàng)建自己的網(wǎng)絡(luò)。三色的配色方案使得界面更加俏皮和有趣供填。小雞的插畫也為用戶帶來積極的情緒拐云。動畫展現(xiàn)雞蛋打破后,一名新球員加入隊(duì)伍近她。通過這種方式叉瘩,添加玩家的操作變得更加生動活潑。
名片應(yīng)用
以下是名片應(yīng)用粘捎,應(yīng)用可以創(chuàng)建虛擬名片薇缅,保存和發(fā)送聯(lián)系人數(shù)據(jù)。對于多角色工作的用戶攒磨,它可以保存一組卡片泳桦,如動畫中所示。通過向下拖動來顯示用戶組的卡片娩缰。
澆水跟蹤器應(yīng)用
這里有兩個交互動效灸撰。它提醒用戶給植物澆水,并跟蹤每個植物的澆水情況。當(dāng)用戶完成澆水時浮毯,點(diǎn)擊水滴按鈕變?yōu)闄z查標(biāo)志完疫。此外,還會顯示植物下次需要澆水的時間债蓝,當(dāng)人們確認(rèn)澆水時壳鹤,會立即改變數(shù)據(jù)。
第二個動效顯示了添加植物種類功能饰迹。用戶拍攝植物照片后芳誓,應(yīng)用會自動識別他的種類以及如何澆水。
照片應(yīng)用
這是一個照片應(yīng)用的概念作品蹦锋。在平臺中兆沙,攝影師可以優(yōu)雅展示作品并連接到世界。當(dāng)前視圖顯示個人相冊莉掂。用戶可以通過滑動查看照片并點(diǎn)擊打開全尺寸版本葛圃。
智能家居應(yīng)用
這是Homey的UI概念,該應(yīng)用可以幫助用戶管理智能家居憎妙。用戶通過主屏幕選擇房間并查看其基本數(shù)據(jù)库正,如溫度,濕度和能源消耗厘唾。此外褥符,還可以設(shè)置并轉(zhuǎn)換不同模式和安全性。所有的互動動畫都使用了深色背景抚垃,彰顯科技的穩(wěn)重喷楣。
iPhone X的加載動畫
這是在iPhone X狀態(tài)欄中顯示加載動畫的概念。當(dāng)用戶下拉交互時鹤树,會出現(xiàn)彩虹動畫铣焊。這是一個減少等待和娛樂用戶的明智方式。
財務(wù)平衡應(yīng)用
這是財務(wù)平衡應(yīng)用的概念罕伯,該應(yīng)用通過跟蹤財務(wù)狀況曲伊,可以幫助用戶輕松檢查他們的銀行卡余額,檢查特定類別的費(fèi)用并保持更新余額追他。設(shè)計(jì)師選擇綠色作為基礎(chǔ)色坟募,因?yàn)樗ǔEc安全,信息增長相關(guān)邑狸。
旅游應(yīng)用
這是Travel App的用戶界面概念懈糯。它提供有關(guān)世界各地的信息,包括住宿和門票的各種優(yōu)惠推溃,并讓用戶分享他們的評論昂利。使應(yīng)用為每個地方專門繪制插畫届腐。插畫和城市名稱在交互中非常絲滑
...
如你所見,動效可以有效解決用戶界面設(shè)計(jì)中的棘手難題蜂奸。我們在觀看這些炫酷犁苏、絲滑的動效時,也可以帶著產(chǎn)品的思維進(jìn)行深度的思考扩所。
如果你喜歡這篇文章围详,一定要關(guān)注我。
本文翻譯來自Medium,感謝Tubik Studio
https://uxplanet.org/mobile-motion-20-creative-concepts-of-ui-animation-b7c0f550a754