UI動(dòng)效設(shè)計(jì)的原則和標(biāo)準(zhǔn)詳解，讓你的界面更加生動(dòng)和引人注目

發(fā)布時(shí)間：2024-08-23 14:44:25 瀏覽量：464次

動(dòng)畫(huà)效果如今已經(jīng)融入到UI界面的各個(gè)角落。屏與屏之間的切換因?yàn)閯?dòng)效而更加連貫，交互的邏輯也因動(dòng)效變得更加清晰。動(dòng)效對(duì)產(chǎn)品和用戶都是至關(guān)重要的組成部分。

在本文中，我們將會(huì)整合動(dòng)效設(shè)計(jì)的主要原則和標(biāo)準(zhǔn)，進(jìn)行總結(jié)：

動(dòng)效的持續(xù)時(shí)長(zhǎng)和速度

當(dāng)元素位置和狀態(tài)改變時(shí)，動(dòng)效速度應(yīng)該適中，足夠慢以讓用戶注意到變化，但又不能太慢讓用戶等待。

研究表明，動(dòng)效持續(xù)時(shí)長(zhǎng)最佳為200毫秒到500毫秒，超過(guò)1秒會(huì)讓用戶感到遲滯。在移動(dòng)端設(shè)備上，時(shí)長(zhǎng)應(yīng)控制在200~300毫秒之間。

△ 移動(dòng)端設(shè)備的屏幕尺寸影響動(dòng)畫(huà)時(shí)長(zhǎng)

網(wǎng)頁(yè)動(dòng)效處理略有不同，速度應(yīng)快一倍，持續(xù)時(shí)長(zhǎng)為150~200毫秒。太長(zhǎng)會(huì)讓用戶感覺(jué)卡頓。

不同尺寸的屏幕=不同的動(dòng)效速度？并非如此！

動(dòng)效時(shí)長(zhǎng)不僅取決于屏幕尺寸和距離，還應(yīng)考慮平臺(tái)特征、元素大小等。小元素或變化應(yīng)更快，大復(fù)雜元素應(yīng)持續(xù)更久。

△ 動(dòng)效時(shí)長(zhǎng)與元素大小、距離有關(guān)

動(dòng)效運(yùn)動(dòng)要符合物理規(guī)律，避免使用彈跳特效。元素運(yùn)動(dòng)應(yīng)清晰，不使用模糊效果。

△ 避免模糊效果

列表項(xiàng)運(yùn)動(dòng)過(guò)程需輕微延遲，控制在20~25毫秒，過(guò)長(zhǎng)會(huì)造成遲滯感。

△ 列表項(xiàng)延遲在20~25毫秒

緩動(dòng)

物體漸進(jìn)加速或減速，增加動(dòng)效自然感。避免機(jī)械感，元素運(yùn)動(dòng)應(yīng)有漸進(jìn)加減速特征。

運(yùn)動(dòng)規(guī)律：勻速直線 vs 緩動(dòng)曲線

勻速直線運(yùn)動(dòng)較不自然，均勻變化可用于色彩、透明度改變。緩動(dòng)曲線展現(xiàn)加速運(yùn)動(dòng)效果。

根據(jù)曲線可看到物體開(kāi)始時(shí)速度較慢，逐漸加速的特點(diǎn)，表示加速運(yùn)動(dòng)。

△ 加速曲線

元素飛出屏幕可使用加速曲線，但僅適合完全離開(kāi)界面。減速曲線適用于從屏幕外進(jìn)入屏幕的元素。

△ 減速曲線

界面元素的運(yùn)動(dòng)曲線應(yīng)考慮至終端點(diǎn)需要重點(diǎn)強(qiáng)調(diào)，讓動(dòng)效看起更真實(shí)。

動(dòng)畫(huà)設(shè)計(jì)如芭蕾舞一樣需要編排，讓元素自然過(guò)渡，吸引用戶注意力。

均等交互表示所有元素遵循特定規(guī)則，從屬交互中中心對(duì)象吸引注意力，其他元素從屬呈現(xiàn)。

△ 用戶的注意力應(yīng)該沿著一流量來(lái)引導(dǎo)

不成比例的變化指外觀長(zhǎng)寬不按比例縮放，運(yùn)動(dòng)軌跡應(yīng)為弧線。

△ 不成比例地改變對(duì)象外觀時(shí)，運(yùn)動(dòng)軌跡應(yīng)為弧線

若元素按比例改變大小，應(yīng)沿直線移動(dòng)。元素不應(yīng)相交，如果相交需逐個(gè)減速通過(guò)。

△ 在運(yùn)動(dòng)中，元素不應(yīng)相互穿越

動(dòng)效設(shè)計(jì)雖遵循規(guī)則，仍需不斷測(cè)試和嘗試，藝術(shù)勝過(guò)科學(xué)。

作者：Taras Skytskyi

原文：https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站