網(wǎng)站設(shè)計(jì)

Website development

現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中動(dòng)效又那些長(zhǎng)江的用法

發(fā)布時(shí)間：2017-02-13 17:53:32

<a href=http://mpian.cn target=_blank class=infotextkey>網(wǎng)頁(yè)設(shè)計(jì)</a>中動(dòng)態(tài)效果又哪幾種.jpg

令人愉悅的動(dòng)效幾乎已經(jīng)成為如今網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)配置了，融入動(dòng)效的交互細(xì)節(jié)讓現(xiàn)代網(wǎng)頁(yè)同以往的設(shè)計(jì)在根本上區(qū)別開(kāi)來(lái)。動(dòng)效不僅可以表現(xiàn)狀態(tài)，引導(dǎo)用戶的關(guān)注點(diǎn)，幫助用于預(yù)測(cè)交互的結(jié)果，甚至影響用戶的行為。

在逐步的探索和發(fā)展過(guò)程中，動(dòng)效在網(wǎng)頁(yè)和APP中的運(yùn)用方法與技巧已經(jīng)逐步成熟，形成了一套相對(duì)系統(tǒng)的模式。今天的文章我們通過(guò)一系列實(shí)例，來(lái)展示一下動(dòng)效是如何改善整個(gè)用戶體驗(yàn)的。

加載動(dòng)效

動(dòng)效常用的一個(gè)地方就是進(jìn)度條。加載進(jìn)度條的加載動(dòng)效會(huì)改變用戶對(duì)于時(shí)間的感知，通過(guò)轉(zhuǎn)移注意力的方式讓用戶等待感降低。

如果你無(wú)法將等待的時(shí)長(zhǎng)縮短，那么盡量令這個(gè)過(guò)程有趣。

簡(jiǎn)單的加載動(dòng)效其實(shí)比復(fù)雜的更好。額外的東西，比如聲音效果就沒(méi)有存在的必要了。用戶在有趣的動(dòng)效上投注了越多的注意力，就越容易忽略等待的過(guò)程。

1-va6jnbV9wLSNdjJiUUJo2w

即使加載時(shí)間很短，有趣的動(dòng)效依然能讓這點(diǎn)時(shí)間變得好玩。

進(jìn)度動(dòng)效

動(dòng)效還可以用來(lái)展示交互或者操作的進(jìn)度。下面的這個(gè)加載進(jìn)度條就是這類動(dòng)效的代表：

這個(gè)是Aviasales 的進(jìn)度條。

同樣的，你還可以考慮使用進(jìn)度條來(lái)展示多個(gè)不同的步驟：

1-3YsMUfvSehqgdpTVk9F-pA

界面框架

界面框架會(huì)將界面加載之后的大概樣式給展示出來(lái)，界面框架會(huì)讓用戶產(chǎn)生內(nèi)容一瞬間就加載好了的錯(cuò)覺(jué)。這種動(dòng)效可以應(yīng)用在絕大多數(shù)的網(wǎng)頁(yè)和APP當(dāng)中，它會(huì)明顯強(qiáng)化用戶的參與感。

1-OFcMuGdL4xsWquFWB2v-gQ

視覺(jué)反饋

將界面反饋視覺(jué)化地呈現(xiàn)給用戶是非常實(shí)用的.良好的交互設(shè)計(jì)需要視覺(jué)反饋來(lái)支撐，傳達(dá)交互完成后的結(jié)果，讓交互可用、可見(jiàn)、可預(yù)期。網(wǎng)站界面中哪些元素可交互如果是不可知的、交互的結(jié)果也不可預(yù)期，混亂就不可避免了。周密的交互設(shè)計(jì)可以幫助用戶理解，將這種混亂降到低。

懸停動(dòng)效

桌面端交互主要還是借助觸控板和鼠標(biāo)，光標(biāo)懸停特效很大程度是為這種情況而存在的，同時(shí)，它也是常見(jiàn)的動(dòng)效之一。

1-UtyndJobYGq4uHRoWPYpCQ

當(dāng)用戶不知道某個(gè)控件怎用的時(shí)候，會(huì)很直覺(jué)地將光標(biāo)移動(dòng)到上面去，這個(gè)時(shí)候，懸停特效能夠很好的吸引他們的目光。

移動(dòng)端由于交互方式的差異，幾乎沒(méi)法使用懸停動(dòng)效。無(wú)論是按鈕還是輸入框，當(dāng)你點(diǎn)擊屏幕的時(shí)候就已經(jīng)觸發(fā)控件了，只能在隨后呈現(xiàn)結(jié)果，而無(wú)法像懸停動(dòng)效一樣預(yù)覽。

1-ZIZSTlUWe5Vog-jXBiH5og (1)

吸引注意力

被運(yùn)動(dòng)的事物所吸引，是人類的生物本能。這也使得動(dòng)效成為了吸引用戶注意力的完美工具。

1-ElPUsW1dmFow8wXl2cfC_A

舉個(gè)例子，表單輸入的用戶體驗(yàn)加入動(dòng)效就有很大的提升空間。比如你可以在用戶輸入完成或者輸入正確之后，給用戶一個(gè)點(diǎn)頭的動(dòng)效，在輸入錯(cuò)誤之后左右晃動(dòng)提供“搖頭拒絕”的動(dòng)效，人性化地傳遞信息，用戶也是很容易理解的。

導(dǎo)航

從設(shè)計(jì)趨勢(shì)上來(lái)說(shuō)，越來(lái)越多的網(wǎng)站開(kāi)始選擇使用隱藏式的導(dǎo)航菜單，將更多的選項(xiàng)隱藏在漢堡菜單之后。而菜單的打開(kāi)和關(guān)閉中肯定需要?jiǎng)有Ъ映謥?lái)降低突兀的過(guò)渡，如果設(shè)計(jì)的足夠精巧，用戶會(huì)立刻被吸引住。

1-m2TxoUIx326uiSAnW3AIBw

下面是Brian Hoff Design 的網(wǎng)站設(shè)計(jì)，當(dāng)用戶單機(jī)圓形箭頭按鈕的時(shí)候，一個(gè)超大的菜單會(huì)從側(cè)面彈出，彈出過(guò)程中不僅有動(dòng)畫(huà)，而且整個(gè)界面變暗會(huì)讓用戶更加難以忽略菜單的存在。

1-GdF7ohwX1ruZwetCAR3CWA

動(dòng)效幫助用戶將兩種不同的狀態(tài)和界面連接到了一起。

平滑的狀態(tài)切換

無(wú)論是從一個(gè)Tab切換到另外一個(gè)Tab，還是界面模式的變化，狀態(tài)切換是UI界面中常見(jiàn)的情況，動(dòng)效能夠讓狀態(tài)切換平滑無(wú)比。在《Smart Transitions In User Experience Design》這篇文章中， Adrian Zumbrunnen 提供了一個(gè)很好的粒子，動(dòng)效是如何幫助用戶理解上下文和狀態(tài)變化和不同的部分的。

簡(jiǎn)單對(duì)比一下下面的兩個(gè)案例，就知道生硬的切換和平滑切換之間的差別了。

1-76b83ZH8jS_socUbsOOU2A

1-_j9wSabJIhJvqlUxzBD5zg

創(chuàng)意特效

充滿創(chuàng)意的特效總能讓用戶真正難以忘懷，它們的價(jià)值在于取悅用戶，讓人記住。

長(zhǎng)滾動(dòng)頁(yè)面

不得不說(shuō)，首屏的設(shè)計(jì)一直是網(wǎng)頁(yè)設(shè)計(jì)的焦點(diǎn)所在，設(shè)計(jì)師將注意力集中在這個(gè)充滿價(jià)值的區(qū)域是有道理的。但是頁(yè)面余下的部分同樣很重要，事實(shí)上，有個(gè)說(shuō)法是“正常媒體頁(yè)面上百分之66%的用戶注意力都在首屏之下”，因此結(jié)合了動(dòng)效的長(zhǎng)滾動(dòng)頁(yè)面同樣非常有用。

動(dòng)效讓滾動(dòng)式的交互充滿了趣味。

動(dòng)畫(huà)能夠讓長(zhǎng)滾動(dòng)頁(yè)面所承載的故事更加鮮活有意思，相比于炫酷的動(dòng)效，微妙的動(dòng)效給人的感覺(jué)更加到位。你可以將你的網(wǎng)站設(shè)計(jì)成可滾動(dòng)的“區(qū)塊”，每個(gè)區(qū)塊中呈現(xiàn)不同的內(nèi)容，下面的案例就是這么做的：

1-6_af_OuR6c_Q4vyUrR2fQA (1)

結(jié)語(yǔ)

動(dòng)效拓展了界面的視覺(jué)維度，它連接交互，讓界面的功能和效果都更加圓融。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,7099,0.html

上一篇：圖像編輯技巧，更好地吸引游客

下一篇：交互設(shè)計(jì)是扼殺你的創(chuàng)意？

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁(yè)面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問(wèn)題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問(wèn)題可以再里面提出，人員分工到位，解決問(wèn)題很及時(shí)。

張經(jīng)理