你應(yīng)該了解的移動(dòng)APP UI動(dòng)態(tài)設(shè)計(jì)規(guī)則

2014-05-05 15:23:12來源:優(yōu)設(shè)網(wǎng)翻譯作者:@陳子木

這篇文章中,我主要闡述了UI動(dòng)效設(shè)計(jì)中需要注意的問題以及原因,而不是教授制作UI動(dòng)效額技巧。隨著大家對(duì)于這一領(lǐng)域的關(guān)注(很大程度上是源自iOS的UI設(shè)計(jì)),我們發(fā)現(xiàn)UI動(dòng)效設(shè)計(jì)同其他的UI設(shè)計(jì)分支一樣,同樣具備完整性和明確的目的性。

這篇文章中,我主要闡述了UI動(dòng)效設(shè)計(jì)中需要注意的問題以及原因,而不是教授制作UI動(dòng)效額技巧。隨著大家對(duì)于這一領(lǐng)域的關(guān)注(很大程度上是源自iOS的UI設(shè)計(jì)),我們發(fā)現(xiàn)UI動(dòng)效設(shè)計(jì)同其他的UI設(shè)計(jì)分支一樣,同樣具備完整性和明確的目的性。伴隨擬物化設(shè)計(jì)風(fēng)潮(Skeuomorphism,也就是蘋果所提出的擬物化設(shè)計(jì)風(fēng)格,強(qiáng)調(diào)的是模擬現(xiàn)實(shí)生活中物品的紋理,是廣泛意義上擬物化的子集。值得注意的是,“蘋果式扁平化設(shè)計(jì)”并非廣泛意義上的設(shè)計(jì)范式,而是帶有限定的特定風(fēng)格,僅為廣泛意義上扁平化設(shè)計(jì)的一個(gè)分支)的告一段落,UI設(shè)計(jì)更加自由隨心,仿如打破空間和物理規(guī)則一樣的交互設(shè)計(jì)不再尷尬荒謬,反而令界面更加靈動(dòng)奇幻,F(xiàn)如今,UI動(dòng)效設(shè)計(jì)已具備豐富的特性,炫酷靈活的特效已是UI動(dòng)效設(shè)計(jì)中不可分割的一部分了。

個(gè)性

這是UI動(dòng)效設(shè)計(jì)中最基本的原則,甚至可以說是動(dòng)效設(shè)計(jì)的最高原則。UI動(dòng)效設(shè)計(jì)就是要擺脫APP“開袋即食”的粗獷設(shè)定,設(shè)計(jì)獨(dú)特的動(dòng)效,創(chuàng)造引人入勝的效果。在確保UI風(fēng)格的一致性的前提下,表達(dá)出APP的鮮明個(gè)性,這就是UI動(dòng)效設(shè)計(jì)“個(gè)性化”要做的事情。同時(shí),還應(yīng)令動(dòng)效的細(xì)節(jié)符合那些約定俗成的交互規(guī)則,這樣動(dòng)效就具備了“可預(yù)期性”,用戶不會(huì)有“出戲”的感覺,如此一來,UI動(dòng)效設(shè)計(jì)便有助于強(qiáng)化用戶的交互經(jīng)驗(yàn),保持APP黏度。

Paper

Paper Makes 使用了擺動(dòng)特效(scale overshoot)表現(xiàn)APP的鮮明個(gè)性。

Dots

Dots 將這種輕松愉悅的慣性動(dòng)效貫穿在UI設(shè)計(jì)的每個(gè)角落,讓它從同類APP中脫穎而出。(慣性也屬于廣泛意義上擬物化的一種,別被風(fēng)格束縛了思想)

導(dǎo)向

動(dòng)效應(yīng)當(dāng)通過使用體驗(yàn)安撫用戶,令他們輕松愉悅。設(shè)計(jì)師需要將屏幕視作一個(gè)物理空間,將UI元素看作物理實(shí)體,它們能在這個(gè)物理空間中打開、關(guān)閉,任意移動(dòng)、完全展開或者聚焦為一點(diǎn)。動(dòng)效應(yīng)當(dāng)隨動(dòng)作移動(dòng)而自然變化,為用戶做出應(yīng)有的引導(dǎo),不論是在動(dòng)作發(fā)生前、過程中還是動(dòng)作完成以后。UI動(dòng)效就應(yīng)該如同導(dǎo)游一樣,為用戶指引方向,防止用戶感到無聊,減少額外的圖形化說明。

Orientation

第一個(gè)界面來自Yelp,它的動(dòng)效使用背景變暗和UI元素慣性彈出創(chuàng)建了視覺焦點(diǎn),第二個(gè)案例是Making,它的動(dòng)效則通過一個(gè)優(yōu)雅的向下展開引導(dǎo)用戶打開目錄,第三個(gè)APP是National Geographic,它使用了一個(gè)炫酷的3D視角過度令用戶始終明確他們?cè)谑裁吹胤健?/p>

背景

動(dòng)效應(yīng)當(dāng)為內(nèi)容賦予背景,通過背景來表現(xiàn)內(nèi)容的物理狀態(tài)和所處環(huán)境。再擺脫模擬物品細(xì)節(jié)和紋理的設(shè)計(jì)束縛之后,UI設(shè)計(jì)甚至可以自由地表現(xiàn)與環(huán)境設(shè)定矛盾的動(dòng)態(tài)效果。為對(duì)象添加拉伸或者形變的效果,或者為列表添加俏皮的慣性滾動(dòng)都不失為增加整體體驗(yàn)的有效手段。

Context

共鳴

動(dòng)效應(yīng)該具有直覺性和共鳴性。UI動(dòng)效的目的是與用戶互動(dòng),并產(chǎn)生共鳴,而非令他們困惑甚至感到意外。UI動(dòng)效和用戶操作之間的關(guān)系應(yīng)該是互補(bǔ)的,兩者共同促成交互完成。

Responsive

情感

好的UI動(dòng)效是能夠喚起積極的情緒反應(yīng)的,平滑流暢的滾動(dòng)能帶來舒適感,而有效的動(dòng)作執(zhí)行往往能帶來令人興奮的愉悅和快感。

Emotive

克制

濫用特效會(huì)讓用戶分心,把握好這個(gè)微妙的平衡。動(dòng)效是用來保持用戶的關(guān)注點(diǎn)、引導(dǎo)用戶操作的,不要為了動(dòng)效而動(dòng)效。過度表現(xiàn)和過多的轉(zhuǎn)場(chǎng)動(dòng)畫會(huì)令用戶煩躁,甚至沮喪。還好,目前沒有太多的反面案例。但是記住這一點(diǎn),沒有錯(cuò)。

贊助商鏈接: