用靈魂感悟設(shè)計(jì) · 用設(shè)計(jì)創(chuàng)造價(jià)值
WITH SOUL FEELING DESIGN WITH DESIGN TO CREATE VALUE
您當(dāng)前位置:  設(shè)計(jì)中國    ⁄    熱門文章    ⁄ 資訊內(nèi)容

這四個(gè)動(dòng)效小趨勢(shì),讓你可以把網(wǎng)頁設(shè)計(jì)得更加圓融

作者:admin      來源:互聯(lián)網(wǎng)      發(fā)布時(shí)間: 2017/11/20 16:24:27     瀏覽:
?隨著交互設(shè)計(jì)重要性的提升,動(dòng)效也越來越被設(shè)計(jì)師所重視。它不僅僅是取悅用戶的工具,而且被視作為改善用戶體驗(yàn)的重要手段

  隨著交互設(shè)計(jì)重要性的提升,動(dòng)效也越來越被設(shè)計(jì)師所重視。它不僅僅是取悅用戶的工具,而且被視作為改善用戶體驗(yàn)的重要手段。從為界面營(yíng)造氛圍的微小動(dòng)效,到用來溝通用戶的視覺線索,動(dòng)效解決方案越來越全面。

  盡管我們?cè)趯?shí)際運(yùn)用的過程中,經(jīng)常需要測(cè)試和試驗(yàn)效果,但是依然有一些經(jīng)過驗(yàn)證的、可行性較高的動(dòng)效,可以直接拿來使用。今天我們所探討的四種動(dòng)效,都貼合趨勢(shì),且頗為實(shí)用。接下來,我們一起探索吧!

  一、彈性動(dòng)效

  有趣而優(yōu)雅的彈性動(dòng)效每天都能看到。通常,彈性動(dòng)效是短暫而優(yōu)雅的,它常常能夠吸引用戶的注意力。成功的動(dòng)效通常不僅依賴于設(shè)計(jì)師的設(shè)計(jì),還需要代碼實(shí)現(xiàn),以及貼合物理規(guī)律的微積分函數(shù)作為支撐。在很多時(shí)候,這種看起來涉及物理學(xué)的動(dòng)效,很難創(chuàng)新。不過事實(shí)上,關(guān)鍵還是要看你如何實(shí)現(xiàn),以及在哪里實(shí)現(xiàn)這些動(dòng)效。如果你對(duì)于 Velocity.js 和 WebGL 這些工具一無所知,也能用CSS實(shí)現(xiàn)它。最受歡迎的彈跳動(dòng)效包括:

  類似彈簧一樣,快速拉伸變大,然后迅速壓縮成所需的形狀,在打開某個(gè)組件的時(shí)候強(qiáng)化視覺,通常,這個(gè)過程都很短暫。

  平滑的充滿流體動(dòng)感的動(dòng)效,伸展,浮動(dòng),然后收縮為初始狀態(tài)。一般而言,它會(huì)持續(xù)地彈跳,營(yíng)造氛圍。

  在具體的實(shí)施的過程中,設(shè)計(jì)師通常會(huì)合理地選擇兩種動(dòng)效作為支撐。比如 LatinoMedios 和 Oprette 都使用彈性動(dòng)效來增強(qiáng)控件的打開體驗(yàn)。前者采用了圓潤(rùn)流暢的彈性動(dòng)效,而后者則采用了彈簧式的動(dòng)效,更加搶眼。

  二、變化的LOGO

  花上幾秒鐘看著LOGO逐漸變化,似乎是一件頗為浪費(fèi)時(shí)間和資源的事情,但是在很多時(shí)候,它是非常有效的設(shè)計(jì)。作為品牌標(biāo)識(shí)的一部分,LOGO 承載著品牌信息(特征、風(fēng)格、元素、色彩等),也關(guān)乎審美。雖然LOGO在網(wǎng)頁中占據(jù)的位置并不大,但是它非常吸引眼球,在用戶心目中也會(huì)被視作為重要的組件,并不會(huì)被那么輕易被忽略。

  三、有意義的加載動(dòng)效

  是時(shí)候和無聊的等待加載的沙漏說再見了。優(yōu)秀的加載動(dòng)效已經(jīng)越來越智慧和復(fù)雜了。

  講真,現(xiàn)如今的加載動(dòng)畫已經(jīng)是聚光燈下的重要設(shè)計(jì)元素了。從最初簡(jiǎn)單的設(shè)計(jì),到如今加載動(dòng)效成為了承載著重要作用的小動(dòng)畫,它不僅告知用戶這個(gè)等待過程進(jìn)度,而且通過愉悅用戶,增強(qiáng)了整個(gè)用戶體驗(yàn)。

  四、動(dòng)畫化的漢堡圖標(biāo)

  盡管這個(gè)由三條橫杠組成的小圖標(biāo)在很久之前就已經(jīng)失去其魅力了,但是它如今依然無處不在。所以,不少設(shè)計(jì)師還是盡量想為這個(gè)圖標(biāo)注入更多的的魅力。你無需重新造輪子,不用進(jìn)行復(fù)雜的重設(shè)計(jì),你只需要為漢堡圖標(biāo)添加一個(gè)有趣的動(dòng)效就能產(chǎn)生為它注入生命力。讓它與周遭的設(shè)計(jì)融合起來,對(duì)于用戶更加友好即可。

  結(jié)語

  并不是每個(gè)人都會(huì)注意到動(dòng)效,但是動(dòng)效的加入讓體驗(yàn)更加優(yōu)秀了卻是不爭(zhēng)的事實(shí)。這也是為什么它會(huì)成為時(shí)下流行的趨勢(shì)。通過審視熟慮的設(shè)計(jì)和實(shí)現(xiàn),界面在動(dòng)效的驅(qū)動(dòng)下卻是會(huì)更上一層樓。許多東西看起來是不言自明的,但是在動(dòng)畫效果的加持下,邏輯和關(guān)系會(huì)更加順暢,重要的還是易于理解和更優(yōu)質(zhì)的體驗(yàn)。