国产欧美一级中文字幕_亚洲日韩欧美自拍他拍_影音先锋在线免费观看_精品中文亚洲自拍_亚洲免费福利视频_日本一区二区三区中文字幕视频_在线无码86超碰_亚洲第一站精品久久中文无码_A片高清免费观看视频_日韩激情无码免费毛片软件

網(wǎng)站建設(shè)聯(lián)系電話 010-52406013

全部新聞

新聞資訊

網(wǎng)站建設(shè)

網(wǎng)站制作

網(wǎng)站維護(hù)

常見問題

簽約動(dòng)態(tài)

網(wǎng)站開發(fā)

北京網(wǎng)頁設(shè)計(jì)之網(wǎng)頁設(shè)計(jì)中的動(dòng)畫詳解

時(shí)間:2015-08-17 11:44:04 作者:北京網(wǎng)站建設(shè)公司 訪問量:1463

  一.界面元素動(dòng)畫

  這是一種讓用戶了解他們的操作(比如點(diǎn)擊)被記錄的動(dòng)畫。變化的發(fā)生需要他們的點(diǎn)擊來催化,無論是轉(zhuǎn)向另一個(gè)頁面,打開側(cè)邊欄或模態(tài)窗口,還是在客服窗口中發(fā)送電子郵件。

  不是說有反饋更好,而是如今反饋是必須的,這是個(gè)扁平化設(shè)計(jì)的世界。人們需要了解界面與裝飾物之間的區(qū)別。讓元素運(yùn)動(dòng)起來,是簡(jiǎn)單微妙的交互方式,給予用戶他們所需的反饋。

  它就像改變按鈕背景色或讓它跳動(dòng)那么簡(jiǎn)單。這個(gè)類型也包含了側(cè)邊欄菜單“滑入”頁面的動(dòng)畫,還有模態(tài)窗口放大顯現(xiàn)的動(dòng)畫。

  

 

  二.等待動(dòng)畫

  這個(gè)也是,同樣是為了給用戶提供反饋。這類動(dòng)畫,會(huì)在某些操作正在后臺(tái)進(jìn)行時(shí)呈現(xiàn)給用戶,你可不想讓他們等到崩潰。

  這類動(dòng)畫的作用很久以前就得到了印證,就在圖形化用戶界面首次發(fā)明的時(shí)候。較早的方式是鼠標(biāo)指針變成沙漏,還有進(jìn)度條也是。Apple在某時(shí)刻采用了“旋轉(zhuǎn)的沙灘排球”,而windows則呈現(xiàn)了文件優(yōu)雅地從一個(gè)文件夾飛向另一個(gè)。這些慣例一時(shí)間就被網(wǎng)頁采用了,理由很充分。當(dāng)用戶開始疑惑正在發(fā)生什么時(shí),他們會(huì)一直點(diǎn)擊或點(diǎn)按。這是沮喪的一種表現(xiàn)。他們認(rèn)為這樣會(huì)讓進(jìn)度加快一點(diǎn)。

  北京網(wǎng)頁設(shè)計(jì)無論哪種方式,告訴用戶正在發(fā)生的事情,哪怕通過一個(gè)簡(jiǎn)單的進(jìn)度條,也能極大減輕精神負(fù)擔(dān)……即使對(duì)于我們這些使用電腦很久的用戶也是一樣。

  三.講故事的動(dòng)畫

  如今,用動(dòng)畫來講故事已經(jīng)超越了卡通。實(shí)際上,我要講的完全不是那些動(dòng)畫。而是那些被設(shè)計(jì)出來與用戶互動(dòng)(比如向下滾動(dòng))的網(wǎng)站,操作引發(fā)了動(dòng)畫,講述了故事。

  有些普遍例子,那些頁面會(huì)在你眼前將產(chǎn)品“裝配”起來,以此展現(xiàn)新產(chǎn)品。其他則更像卡通片,有個(gè)小卡通形象跟隨你到頁面的每個(gè)地方。

  這些動(dòng)畫的作用……存在爭(zhēng)議。通常它們并沒有提升可用性的意圖,只是為了讓用戶印象深刻,為他們提供頁面主題相應(yīng)的環(huán)境。它們可能是在試圖呈現(xiàn)一件產(chǎn)品的工藝,或是分享打造這件創(chuàng)造物的經(jīng)歷。

  動(dòng)畫能否做到這點(diǎn),取決于它們本身的質(zhì)量。是否過度影響了網(wǎng)站的性能,或是影響了頁面內(nèi)容本身。如果用戶在網(wǎng)站上找不到自己要的東西,世上所有的動(dòng)畫效果都救不了它。

  有兩個(gè)案例我的確很喜歡,它們來自深諳此道牌:Apple和Sony。

  Mac Pro的頁面,致力于向下滾動(dòng)時(shí)呈現(xiàn)內(nèi)部構(gòu)造:

  同時(shí),在Sony網(wǎng)站中,他們展現(xiàn)了多款不同設(shè)備。當(dāng)然,“裝配感”并沒有那么強(qiáng)烈,各部分相互撞擊,在火焰效果中成型。

  四.純裝飾動(dòng)畫

  無論好壞,有些人在網(wǎng)站上加入一些沒有目的的動(dòng)畫,只是為了讓人看到。這值得嗎?

  值得,也可以說不值得……

  我會(huì)盡量避免,因?yàn)樗谷朔中摹D阆胍藗兊囊暰€集中在商品信息和購買按鈕上。讓他們來此達(dá)成目的。如果網(wǎng)站沒有提供特定的目標(biāo),或者確定目標(biāo)時(shí)過于使人分心,他們就不會(huì)再回來了。

  

 

  裝飾性的動(dòng)畫應(yīng)該完全隱藏起來。在人們完成行動(dòng)召喚后再展現(xiàn)出來。還可以包含微妙的動(dòng)畫,只在用戶觸發(fā)某個(gè)特殊操作時(shí)才展現(xiàn),比如鼠標(biāo)懸停在頁頭和頁尾的某個(gè)小物件上面。

  在WDD網(wǎng)站中,鼠標(biāo)懸停在logo上會(huì)讓它動(dòng)起來,雖然這點(diǎn)尚存爭(zhēng)議。因?yàn)閘ogo是個(gè)鏈接,并非純裝飾物,但它仍然是個(gè)不錯(cuò)的例子。Google隨便一搜,就會(huì)找到很多帶有彩蛋的網(wǎng)站(比如跳出一只哥斯拉并且咆哮怒吼……我不是在開玩笑)。

  還有很多其他例子,包括Google眾所周知的彩蛋:

  

 

  在任何頁面一路滾動(dòng)到底部,會(huì)出現(xiàn)一只友善的恐龍“給你拍照”。而且在有氣球的頁面上,畫面中的氣球會(huì)微妙地來回飄浮。

  中企云達(dá)憑借網(wǎng)站建設(shè)團(tuán)隊(duì)(專業(yè)的網(wǎng)站策劃師、高端的美工設(shè)計(jì)師、的前端開發(fā)工程師、程序開發(fā)人員),豐富的網(wǎng)站制作經(jīng)驗(yàn)和高超的創(chuàng)意水平,同時(shí)根據(jù)您企業(yè)的行業(yè)類型、產(chǎn)品特點(diǎn),為您提供專業(yè)的網(wǎng)站建設(shè)方案,制作您的專屬展示型網(wǎng)站、營(yíng)銷型網(wǎng)站、電子商務(wù)型網(wǎng)站及特殊定制型網(wǎng)站。

  本站關(guān)鍵詞:北京網(wǎng)頁設(shè)計(jì),北京網(wǎng)站制作,北京網(wǎng)站建設(shè),北京網(wǎng)站優(yōu)化,北京高端網(wǎng)站建設(shè)公司,朝陽網(wǎng)站建設(shè)公司

  想要了解更多關(guān)于高端營(yíng)銷型網(wǎng)站建設(shè)常識(shí)或是運(yùn)營(yíng)技巧的,可以經(jīng)常關(guān)注中企云達(dá)的官方網(wǎng)站http://color-flow.cn/

聲明:轉(zhuǎn)載此文是出于傳遞更多信息的目的。若有來源標(biāo)注錯(cuò)誤或侵犯了您的合法權(quán)益,請(qǐng)作者持權(quán)屬證明與本網(wǎng)聯(lián)系,我們將及時(shí)更正、刪除,謝謝!

相關(guān)新聞