2017-01-03 分類: 網(wǎng)站建設(shè)
約在10年之前,在用戶界面使用的動(dòng)效,大部分是一些廣告和閃爍的彈窗。然而到了今天,已經(jīng)發(fā)生了翻天覆地的變化。
今天要講的是網(wǎng)頁(yè)中4個(gè)功能性動(dòng)效讓視覺(jué)體驗(yàn)更舒適!一起看這個(gè)動(dòng)效帶給大家的視覺(jué)盛宴吧。
【交互設(shè)計(jì)和動(dòng)態(tài)效果的詳情,帶來(lái)的是網(wǎng)站或APP的根本改變。這種思維方法,在下面有詳細(xì)的描述?!?/p>
不可能永遠(yuǎn)只是設(shè)計(jì)靜態(tài)的網(wǎng)站。也就是說(shuō)設(shè)計(jì)用戶從這些畫(huà)面實(shí)際查閱內(nèi)容的方法。
為了設(shè)計(jì)出更好的數(shù)字產(chǎn)品,從一開(kāi)始網(wǎng)頁(yè)或APP就要有良好的交互性質(zhì)是非常有必要的。這一次,就將如何有效的運(yùn)用UI動(dòng)效的方法詳細(xì)介紹給大家。
一、使用動(dòng)效的理由
動(dòng)態(tài)(英: Motion)在從他的性質(zhì)上來(lái)說(shuō),就是用戶界面上最突出的元素。相較于文字文本和靜止的圖像,動(dòng)態(tài)的更容易被發(fā)覺(jué)。我們的視線會(huì)不由自主的追尋著動(dòng)態(tài)的物體,這也可以說(shuō)是一種條件反射。試著將這個(gè)利用在功能性的動(dòng)效上吧。
二、功能性的動(dòng)效是?
功能性動(dòng)效,指的是在UI設(shè)計(jì)中作為功能的一部分被采用的小動(dòng)效,有著非常明確和合理的目的。
1.為了減輕認(rèn)知的負(fù)擔(dān)。
2.防止發(fā)生變化時(shí)看漏(英: Change Blindness)。
3.在空間關(guān)系中確立良好的收束。
4.以用戶為中心的設(shè)計(jì)方法,直觀的用戶界面,響應(yīng)性,人性化等等都是必須的。
功能性動(dòng)效,將有助于你實(shí)現(xiàn)這些目標(biāo)。那么,就讓我們?cè)敿?xì)的來(lái)看一看功能性動(dòng)效吧。
三、用功能性動(dòng)效完善UX
對(duì)APP或網(wǎng)站的體驗(yàn)或印象,是通過(guò)由各個(gè)接口的基礎(chǔ)工作組合而得來(lái)的通過(guò)在好的地方使用動(dòng)效,會(huì)更易于使用,讓功能性更加完善。
通過(guò)仔細(xì)研究測(cè)試,功能性動(dòng)效,都包含以下的功能、要點(diǎn)。
1.可視化的反饋
舒適的交互設(shè)計(jì)可以提供更好的反饋。無(wú)論是否成功,反饋能告訴用戶系統(tǒng)已經(jīng)識(shí)別到了你的操作。顯示出相互作用的結(jié)果。這組動(dòng)效應(yīng)特別注意小心控制,與之相應(yīng)的設(shè)計(jì)是必要的。
反饋按鈕
在我們的生活中,對(duì)按鈕會(huì)有按下去的反應(yīng)??梢灶A(yù)測(cè)在數(shù)字接口使用方法也是一樣的,進(jìn)行會(huì)有怎樣的反應(yīng)的預(yù)測(cè)是十分重要的。
操作結(jié)果的可視化
按照基本規(guī)則,使用動(dòng)畫(huà)進(jìn)行反饋,你可以很好的強(qiáng)調(diào)什么操作是錯(cuò)誤的。
例如,如果你輸入密碼錯(cuò)誤,讓我們添加一個(gè)左右抖動(dòng)的視覺(jué)動(dòng)畫(huà)吧。像【出錯(cuò)啦,請(qǐng)?jiān)僭囈淮巍窟@樣,左右搖頭的效果。當(dāng)用戶看到這些動(dòng)效后,可以立即了解當(dāng)前的狀況
另外,您還可以強(qiáng)化用戶當(dāng)前正在運(yùn)行的動(dòng)作。在下面的例子中,當(dāng)用戶點(diǎn)擊提交按鈕,在成功之前通過(guò)一點(diǎn)點(diǎn)加載動(dòng)畫(huà)來(lái)顯示。加載對(duì)號(hào)的動(dòng)效,使用戶感覺(jué)過(guò)程已經(jīng)成功完成。
2.抑制狀態(tài)的變化
至于添加動(dòng)效最好的地方,就是讓【變化的瞬間】變得引人注目。用戶界面狀態(tài)的變化,特別是網(wǎng)站上突然的變化,很難讓用戶理解當(dāng)前究竟發(fā)生了什么。在這變化的瞬間,就可以在UI中添加動(dòng)效進(jìn)行緩和。
建立連接
動(dòng)畫(huà)的變化,能向用戶接口展示各種各樣的狀態(tài),作為一個(gè)如同中介一樣的角色,幫助用戶理解當(dāng)前正在發(fā)生著什么。用戶只需跟隨動(dòng)效,就能夠理解2個(gè)UI狀態(tài)之間究竟有著怎樣的聯(lián)系。
另外,也可以利用他顯示縮略圖和詳細(xì)信息。
這張動(dòng)畫(huà)卡片,是通過(guò)點(diǎn)擊將重疊的詳細(xì)信息進(jìn)行展示,它清楚地表明了是同一個(gè)項(xiàng)目。
注意變化
當(dāng)一個(gè)新的對(duì)象已經(jīng)公開(kāi)時(shí),動(dòng)效有助于我們?cè)诒谎谏w的信息中清楚的找到它。比如通過(guò)滑動(dòng)打開(kāi)內(nèi)容來(lái)隱藏信息,你可以在需要關(guān)注時(shí)用到這種變化效果。
在下面的案例中,當(dāng)您單擊漢堡包圖標(biāo)時(shí),導(dǎo)航菜單用幻燈片展示。通過(guò)這種動(dòng)作,用戶就可以明白,導(dǎo)航菜單不會(huì)消失。
3.系統(tǒng)狀態(tài)的可視化
作為Jakob Nielsen為了可用性推導(dǎo)出來(lái)的答案之一,系統(tǒng)狀態(tài)的可見(jiàn)性仍然是用戶界面設(shè)計(jì)中最重要的原則之一。對(duì)于用戶來(lái)說(shuō),把握理解系統(tǒng)當(dāng)前的狀況,是非常重要的。
進(jìn)度條
上傳和下載數(shù)據(jù)的過(guò)程是采用功能性動(dòng)效的一個(gè)很好的機(jī)會(huì)。有動(dòng)效的加載欄,可以直觀的看到動(dòng)作加載完成預(yù)計(jì)還要多少時(shí)間。
另外,當(dāng)操作未能成功進(jìn)行時(shí),動(dòng)效也很有用。例如在下載失敗的時(shí)候,你就需要考慮如何讓失敗畫(huà)面看起來(lái)比較舒服。
下拉刷新
用戶的等待時(shí)間是從動(dòng)作開(kāi)始的瞬間開(kāi)始,最糟糕的情況是不知道系統(tǒng)是否收到指示。
下拉刷新這一技術(shù),讓我們嘗試在操作瞬間作出反應(yīng)。告訴用戶你的進(jìn)程已經(jīng)開(kāi)始,最重要的是給與用戶視覺(jué)反饋,在這里使用動(dòng)畫(huà)將非常有幫助。
4.解說(shuō)動(dòng)畫(huà)
有時(shí),用戶需要一些額外的幫助來(lái)了解用戶流程或如何與某些界面元素進(jìn)行交互。對(duì)于包含用戶的新的或不熟悉的功能或交互的用戶界面尤其如此。
新手上路
用戶入門需要一個(gè)好的UX,第一次看到的操作動(dòng)畫(huà)對(duì)于首次使用者如何與應(yīng)用程序進(jìn)行互動(dòng)有著巨大的影響。無(wú)論多么復(fù)雜的東西,動(dòng)畫(huà)都能通過(guò)有趣的方法傳達(dá)出來(lái)。他有著無(wú)限的可能性。
視覺(jué)提示
動(dòng)畫(huà)可以提供一些易于理解的視覺(jué)線索。解說(shuō)動(dòng)畫(huà),通常是在網(wǎng)頁(yè)第一次被打開(kāi)時(shí)看到,通過(guò)動(dòng)畫(huà)可以表現(xiàn)頁(yè)面上特定的要素在什么情況下可以使用。
這種類型的動(dòng)畫(huà),通過(guò)故事的進(jìn)行漸漸的看到全體的效果,在游戲中經(jīng)常被利用。只有當(dāng)用戶自己的經(jīng)驗(yàn)到達(dá)一個(gè)點(diǎn)的時(shí)候,才會(huì)觸發(fā)這個(gè)提示。
最后
動(dòng)畫(huà)是一個(gè)復(fù)雜而強(qiáng)有力的工具。
我們需要從一開(kāi)始就采納這種效果,并將其視為我們?cè)O(shè)計(jì)的自然部分,因?yàn)樵O(shè)計(jì)不僅僅是視覺(jué)呈現(xiàn)。正如史蒂夫·喬布斯談到設(shè)計(jì)時(shí)所說(shuō)的:設(shè)計(jì)不僅是外形和感覺(jué),設(shè)計(jì)關(guān)乎如何運(yùn)作。
文章標(biāo)題:網(wǎng)頁(yè)中4個(gè)功能性動(dòng)效讓視覺(jué)體驗(yàn)更舒適!
文章路徑:http://redsoil1982.com.cn/news/74045.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、Google、小程序開(kāi)發(fā)、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容