|
淺談UI設(shè)計中的動效設(shè)計思想理念时间:2018-07-27 【转载】 最近幾年UI設(shè)計領(lǐng)域最大的變化便是越來越強調(diào)用戶體驗設(shè)計,而在Web或者App中使用動效也就成了一大趨勢。這種趨勢是如此強烈,以至于我看到越來越多的應(yīng)用中所使用的那些動效已經(jīng)不再是為了提升用戶體驗,而更多是為了強調(diào)動效本身了。 這是一個非常棒的動效設(shè)計建議,甚至可以說是原則。作為這些Web或者App的設(shè)計和開發(fā)者,在我們設(shè)計和開發(fā)動效之前,首先應(yīng)該明確什么才是正確的動效:動效應(yīng)該是以提高可用性為前提,并且以令人覺得自然,含蓄的方式提供有效用戶反饋的一種機制。 了解動效 優(yōu)秀的動效往往會被無視,而糟糕的動效卻迫使用戶去注意界面,而非內(nèi)容本身。用戶都是帶著明確的目的來使用你的網(wǎng)站或者App的:買一件東西、學(xué)習(xí)新的知識、發(fā)現(xiàn)新音樂、或者僅僅是尋找最近的吃飯地點。他們不會只為了把玩你精心設(shè)計的界面而來,實際上,用戶根本不在意界面設(shè)計而只關(guān)心能否在你這兒方便地達(dá)到他們的目的。優(yōu)秀的動效應(yīng)該對用戶的點擊或手勢給予恰當(dāng)?shù)姆答,使用戶能夠非常方便地按照自己的意愿去掌控?yīng)用的行為,從而增強應(yīng)用的使用體驗。 基本動效 我們平時在Web或App中看到的動效其實都是由一些最基本的動效組合而成的,這些基本動效包括:移動(Translate),旋轉(zhuǎn)(Rotate),縮放(Scale)。在一些動效設(shè)計工具的幫助下,一般你只需要設(shè)置它的起點和終點,并告訴它你想要什么類型的動效,設(shè)計工具便會根據(jù)你的這些設(shè)置去渲染出整個動效。 動效曲線 自然界大部分物體的運動都不是線性的,而是按照物理規(guī)律呈曲線性運動的。通俗點來說,就是動效的響應(yīng)變化與執(zhí)行動效的物體本身質(zhì)量有關(guān)。優(yōu)秀的動效應(yīng)該反映真實的物理現(xiàn)象,如果你想表現(xiàn)的對象是一個沉甸甸的物體,那么他們的起始動畫響應(yīng)/參數(shù)的變化會比較慢。反之,物體如果是輕巧的,那么其起始動畫響應(yīng)/參數(shù)的變化會比較快。 屬性變換 屬性變換是非常常見的一種動效。比如可以通過改變透明度來實現(xiàn)淡入/淡出效果等。同時你還可以改變對象的大小,顏色,位置等幾乎所有屬性來體現(xiàn)動畫效果。 注意下面這個動效的底部的菜單欄,當(dāng)他的高度減小的同時,他的透明度也相應(yīng)地降低,從而產(chǎn)生出一種折疊的效果 組合動效 在大多數(shù)場景中,我們需要同時使用2種以上的動效,將它們有效地組合在一起,以達(dá)到更好的效果。另外你仍需要讓你的動效遵循普遍的物理規(guī)律,這樣才能使它們更容易被用戶接受。 動效不應(yīng)該太慢 我認(rèn)為理想的動效時長應(yīng)該在0.5-1秒之間,當(dāng)你設(shè)計淡入淡出,滑動,縮放等動效時都應(yīng)將時長控制在這個范圍內(nèi)。如果動效時長設(shè)置得太短,會讓人看不清效果,甚至更糟的是給用戶造成壓迫感。反過來如果動效持續(xù)時間過長,又會使人感覺無聊,特別是當(dāng)用戶在使用App的過程中,反復(fù)看到同一動效的時候。 動效的開發(fā): 很多設(shè)計人員往往會遇到這樣的困擾,他們看到的最終產(chǎn)品中出現(xiàn)的動效與他們在設(shè)計階段定義的有很大出入。那是因為,雖然作為設(shè)計師,可以定義非?犰诺膭有,但由于技術(shù)或成本上的限制,有些動效往往由于開發(fā)代價過高而被擯棄了。所以作為設(shè)計師,你可能需要同時理解如何設(shè)計動效,以及動效背后所使用的技術(shù)。這會幫助我們在整個項目的設(shè)計階段就能作出明智的取舍,從而節(jié)省大量的開發(fā)成本。 動效制作工具 目前有一些非常流行的動效設(shè)計工具,它們基于不同的技術(shù),也有各自的特點。你可以從中選擇你最喜歡的來使用。 更多網(wǎng)站建設(shè)內(nèi)容盡在常州云之家 http://www.eastern-nova.com/ |