龍崗公司

    2017網站設計趨勢|那些無所不能的懸停動效們

    日期:2018/4/16 人氣:123338
    導讀: 2016年不管是網站還是移動端,我們隨處可見一些扁平的動畫元素,他們顏色清爽視覺感覺很新穎。2017年,動效依然還是今年的主流設計元素,但跟去年相比又有些許不同。要說到動畫的流行其實還是得益于,過去蘋果設計的扁平風格以及動效部分,他們對于那些小細節的追求真的達到了極致,而今天懸停效果再次卷土重來。但并不是過去的那種俗氣,閃爍的效果,或者是簡單彈跳和旋轉動效,如今的懸停效果將給用戶帶來更好的幫助和體


    2016年不管是網站還是移動端,我們隨處可見一些扁平的動畫元素,他們顏色清爽視覺感覺很新穎。2017年,動效依然還是今年的主流設計元素,但跟去年相比又有些許不同。

    要說到動畫的流行其實還是得益于,過去蘋果設計的扁平風格以及動效部分,他們對于那些小細節的追求真的達到了極致,而今天懸停效果再次卷土重來。但并不是過去的那種俗氣,閃爍的效果,或者是簡單彈跳和旋轉動效,如今的懸停效果將給用戶帶來更好的幫助和體驗。

    懸停效果的設計范圍真的很廣,大到整個屏幕的視覺效果,小到導航元素都可以看到他不俗的表現。


    會動的首頁

    懸停效果可以是你用戶體驗的最關鍵的部分哦。當你的首屏被動畫元素充斥的時候,額外的一些懸停效果可以讓你首頁的魅力值直線UP。

    HAUS,這個網站的設計著實讓人驚喜,屏幕上有許多卡通人物在屏幕上移動,你可能完全無法把這些動畫效果跟懸停效果聯系到一起,看起來知識一個動作變換了另外一個動作而已。但是我負責任的告訴你,如果沒有懸停效果,每個元素也就是單純的在屏幕上規律的畫圈圈罷了。

    當你使用全屏懸停動畫這樣的效果時,訣竅是取悅用戶,而不是讓他們感到壓抑,這是一個相當棘手的問題。如何讓他們感到新奇又不至于太過于花哨?通過讓其他設計元素簡單例如例子中的黑色背景,一個再簡單不過的背景與一個易于閱讀的無襯線白色字體就十分合適了。這是一個用在首屏上的技巧,可以讓用戶去和體驗,讓他們更有興趣滾動翻看下面的內容。


    按鈕效果

    一個簡單的動畫設計實際上可以鼓勵用戶去點擊按鈕的。這看起來很簡單,對吧?這其實也是這種類型的動畫如此受歡迎的原因之一。

    設計一個好的按鈕效果,可以幫助用戶更好地了解你想讓他知道的東西。上面的例子就來自Luke Etheridge,當你鼠標移動到按鈕上時,他就會改變顏色,并告訴用戶點擊后會發生什么。這個懸停動畫效果,它不僅很有用并且也很好看哈~


    幻燈片效果

    網頁很多時候是被各種圖片和內容堆積起來的,他們經常看起來很擁擠。所以幾乎所有的網站設計的時候都會選用一些滾動動畫效果來平衡。在多個圖片中設計上箭頭和其他指示按鈕,告訴用戶如何前進或返回,這樣的設計其實是很多見的。

    而如今設計現代運動動畫的的關鍵是:

    1. 動作要快
    2. 軌跡明確
    3. 動作一致

    以上這個動效案例是來自Baptiste Dumas。你根本不知道鼠標點擊它后,下一步會怎么發生,它會在內容元素之間創建一條明顯的線,所有的東西都被這條線連接在了一起,形成一個類似無縫銜接的運動流程,是不是很神奇。


    導航菜單

    不管你喜歡與否,隱藏的導航風格一直是是一個很受歡迎的設計元素哦。這個動畫懸停效果可以幫助用戶更好地瀏覽內容,也能讓主頁視覺更簡潔。

    隨著指示圖標的顯示和隱藏,菜單信息可以輕松的在屏幕上彈出和隱藏甚至是移動,動畫效果的目錄,是是個非常強大的指示工具。

    Oxen Made,這個案例就使用了懸停效果和動畫效果兩種方式在主頁上,為了指導用戶如何使用網站,他們把右上角的菜單按鈕設計成可以更改年色的懸停效果,讓用戶知道這是一個可以點擊的元素。點擊后彈出完整的菜單,是從頁面的左側擺動出來非常顯眼。此外,右下角一個小三角形箭頭,使用和菜單按鈕相同的效果,讓用戶知道還有更多的內容可以滾動,不得不說你們真的好貼心哦~

    這些微妙的動效設計,和相對復雜的背景視頻搭配在一起,確實是十分合適的。在背景視頻強烈的運動襯托下,按鈕的那些柔和的動效更容易吸引用戶的注意力,讓用戶更好的使用網站,按鈕也充分起到了導航的作用。


    表格和字段

    還有一些使用懸停效果優秀案例,例如把表格融入其中。幾乎每一個你訪問的網站都會要求你注冊或者填寫一些問題信息。這確實是一個很讓人討厭的步驟,因為真的很繁瑣,所以如果用戶提供這些信息越容易,你就越容易得到那些對你有用的信息。

    但如果讓這些列表信息不那么乏味呢?一些視覺線索可以幫助用戶記住如何進入一個領域,并指引他們確認提交是非常重要的。

    上面的這個例子它做了兩件事。第一個是用戶被告知要輸入什么信息,他們可以看到整個操作過程,以及點擊登錄按鈕后,我將要填寫的信息是什么,這樣用戶就不必猜的我這一步操作完成后,下一步我要做什么了。

    如果你還不知道如何去應用懸停效果的話,這個效果可以作為一個很好的起點哦。其實在這樣簡單的引導下,用戶是享受跟網站進行互動的,這樣簡單的動畫就能讓我們收獲到不錯的反饋哦。


    結論


    在我們看來懸停動畫是十分棘手和復雜的設計技術,但實際情況卻是,利用CSS,幾乎任何人都可以輕松添加一個簡單的動畫效果。他們其實很簡單,在網絡上有很多動畫師會分享一些代碼,讓你去體驗研究。

    最后分享給你一些使用這些技巧的關鍵:它需要有它存在的意義。不要過于頻繁的使用這些效果,只在添加內容時使用懸停效果或者動畫;不要讓這些效果分散用戶本來應該執行的行為哦。

    文本來自采集文章 http://www.jreqjj.icu/25/383.html 如需轉載或刪除,請聯系管理員。

    1 2 3 4 5 6 7 8 9
    分享到:
龍崗網站建設
【龍崗本地網絡公司】——承諾3小時內上門服務!龍崗上門全國熱線:400-666-2014 粵ICP備12018349號 網站維護:深一深圳網站建設 【我要收藏此頁面】 網站地圖
全國龍崗注冊公司-服務網店
微信里卖什么最赚钱