中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

【設(shè)計資訊】改善用戶體驗的方法

2022-06-27    分類: 用戶體驗

動效設(shè)計能夠給網(wǎng)站或個人作品增加亮點(diǎn),過多的動效也會給視覺造成一定負(fù)擔(dān)。設(shè)計資訊:改善用戶體驗的方法文提供了設(shè)計中動效使用中的簡單小方法,和創(chuàng)新互聯(lián)小編一起來學(xué)習(xí)吧~~應(yīng)用程序中的動效具有新的改良性的意義。跟過去的華麗、混亂的網(wǎng)站動畫不同,新的動畫干凈、流暢,并且易于導(dǎo)航。忘掉你所知的GIF、令人不愉快的廣告和Flash網(wǎng)站吧, 這些都是過去的事情了。當(dāng)你謹(jǐn)慎并且正確地使用動效時,它能極大地提高用戶體驗 improves user experience (UX)。動畫世界中出現(xiàn)了許多新趨勢。 HTML5和CSS3為網(wǎng)頁設(shè)計師提供了一種在網(wǎng)頁上融入動效的方法,而不會使它成為一種令人厭惡的東西。 為您的網(wǎng)站漸進(jìn)性地增加一點(diǎn)動效,以確保您不會超載頁面以及帶來雜亂的用戶體驗。 這里有幾種方法將動畫體現(xiàn)到您的網(wǎng)站上。

頁之間的動畫對頁面標(biāo)題和頁面加載進(jìn)行動畫,是一種對網(wǎng)站添加動效的有效而不會過火的方法。 當(dāng)訪問者訪問您的網(wǎng)站時,可以看到頁面之間的平滑過渡。它們通??焖偌虞d,并用一個流暢的動畫來彌補(bǔ)頁面之間的間隙。

例如,上述 Origami 動畫打開和關(guān)閉運(yùn)用了菱形過渡的頁面。它在一個微妙的尺度上增加了頁面之間的視覺趣味。還有幾種其他的過渡風(fēng)格也可供選擇,從隧道、圓圈到波浪。

伴隨動畫的無限滾動我們之前討論過無限滾動趨勢( infinite scroll trend)。許多網(wǎng)站都在使用無限滾動將所有信息保存在一個地方。 而不是通過一系列菜單和子菜單導(dǎo)航頁面,用戶只是繼續(xù)向下滾動直到他們找到他們正在尋找的東西。無限滾動是一種體現(xiàn)動效的好方式,只要頁面上的組件是干凈、有粘著力的。 太多的色塊或太多的動效會混淆訪客并帶來不可預(yù)測的負(fù)載??梢钥紤]使用大背景圖片或者是帶有令人愉快色調(diào)的網(wǎng)格來創(chuàng)建粘結(jié)性和簡潔性。

Wavo, 音樂/社交媒體網(wǎng)站,提供了一個極好的無限滾動的例子。該網(wǎng)站色調(diào)是黑白的,圖像是清爽、簡單的,它們很好地打破了負(fù)空間的每個部分。當(dāng)用戶向下滾動頁面時,他們可以很容易地專注于那里的信息,同時仍然沉浸在品牌的美感中。

使圖表&圖形變得生動動畫圖表易于結(jié)合,而且看起來有趣。它們給你的網(wǎng)站添加了一小部分的運(yùn)動來創(chuàng)建一個有趣的信息圖表。Custora.com, 是一個分析電子商務(wù)趨勢的網(wǎng)站,它通過一系列豐富的動畫圖表展示其數(shù)據(jù)。度量(例如移動訂單),在條形圖中生成,當(dāng)您向下滾動時,該條形圖將加載。 它帶來了一些興奮點(diǎn),否則將是一些沉悶的數(shù)據(jù)點(diǎn)。 游客自然地被吸引到觀看加載條,因為他們想看看它們的停留點(diǎn)。

在這個案例中,動畫被用來潛入訪客的心理。 此外,動畫又是愉悅眼睛的,因為頁面沒有過重的顏色和其他形式的動畫。 網(wǎng)站在一個清爽、白色背景上,運(yùn)用輕柔的色彩以及柔和明亮的字體, 這使頁面上的內(nèi)容有機(jī)會突顯,而不必與網(wǎng)站上的其他元素競爭。

慢動效的氛圍慢動作動畫是將運(yùn)動融入您的網(wǎng)頁設(shè)計的最優(yōu)雅的方式之一。 當(dāng)頁面元素在一段時間內(nèi)稍微移動時,它自動吸引訪問者的眼睛。 它類似于向人們耳語來讓他們傾聽。當(dāng)你耳語時,傾聽者的耳朵自然地微微翹起,聽者在潛意識中更多地關(guān)注于正在說的話,慢動作動畫同理。 因為運(yùn)動是如此微妙,以致訪客的眼睛想要查看對象,看它是否真的是移動。 這是一個很棒的方式,鼓勵你的訪客駐足去聞一聞(或看一看)玫瑰。無論您使用慢動作作為頁面上的背景圖片,還是轉(zhuǎn)換為更快節(jié)奏的動畫(稱為“緩動”),慢動作很自然地與人類大腦產(chǎn)生共鳴?,F(xiàn)實(shí)世界中的有機(jī)物往往以不同的速度移動,慢慢地開始,速度拾取,并在停止之前減速。因為心靈期望這種運(yùn)動,它潛意識地使用戶感覺更舒適地使用您的網(wǎng)站。

【設(shè)計資訊 】改善用戶體驗的方法

上圖顯示了大背景圖像中慢動畫的示例。 圖片中的元素緩慢移動,營造輕松的氛圍。 在一個動畫中,蒸汽慢慢地從一壺新鮮的茶中升起,你幾乎可以發(fā)誓你能聞到香氣并感覺蒸汽的溫暖。 它創(chuàng)造了一個美麗的背景并設(shè)定了網(wǎng)站的其余部分的心情基調(diào)。

受控模塊滾動模塊滾動可讓用戶控制您網(wǎng)站的動畫。模塊化滾動功能使用戶可以滾動瀏覽各個面板。 這種類型的動畫是很有效果的,因為它可以用于多個行業(yè)。例如,建筑公司可以允許用戶滾動一個面板的圖像作為工作組合,而另一個面板則具有單獨(dú)的菜單按鈕和公司信息。它允許你在公司的重要信息旁邊的頁面上展示你的品牌個性。 模塊化滾動以意識流方式傳遞信息和圖像。 我們的大腦在多個層面上工作,以不同的速度處理信息并與模塊化滾動相呼應(yīng)。

當(dāng)然,最有效的網(wǎng)站 keep other elements of design simple 允許所有的運(yùn)動。 然而,你還是會給用戶帶來感覺超載的風(fēng)險。網(wǎng)站 Hotel de Rome(上圖)是專業(yè)執(zhí)行滾動的好示例。 酒店信息包含在右側(cè)列中,其中包含其他可點(diǎn)擊元素,而左側(cè)滾動顯示富有光澤的照片。 用戶掌控著大局,兩側(cè)的頁面均可瀏覽。

動效設(shè)計使填寫表單變得有趣讓我們來面對一個事實(shí) —— 沒有人喜歡填寫表單。 它無聊且乏味,長長的表單令人惱火。 但是當(dāng)你對表單進(jìn)行動畫處理時會發(fā)生什么呢? 這使它更像一個隨意的對話, 使它變得有趣。 用戶會希望回答表單上的問題,因為他們看起來更像是來自朋友的問題,而不像機(jī)器人為了他們的信息不停地嘮叨。

[Image Source]使用自然語言是一種趨勢,它與動畫形式很好地融合。 它給整體表單增加了休閑的色調(diào),當(dāng)它配上動效時,使得填寫表單成為了一個愉快的體驗。【設(shè)計資訊 】改善用戶體驗的方法上述網(wǎng)站(The above example )表單中的動效設(shè)計示例使用了兩種動態(tài)使回答問題變得有趣。aesthetics of the form are minimal 中,每個動畫帶有一個問題,而休閑的語言使你想去回答。 這是任何商家想要使用的號召性用語(CTA)。

風(fēng)格化錨文本動畫懸停已經(jīng)存在了一段時間了,但是動效設(shè)計趨勢使得它很好看。當(dāng)你將鼠標(biāo)懸停在鏈接上時,它會像圣誕樹一樣點(diǎn)亮。但是,與其使用老式動畫來顯示一個單詞是可點(diǎn)擊的,為什么不做一些有趣的事?This website 顯示了一些如何讓懸停更具視覺刺激例子(下面)。它展示了如何使用彩色底片、褪色、輪廓和其他小細(xì)節(jié)突出顯示錨文本。它是一個非常小規(guī)模的動畫,但它仍然對用戶有影響。 如果您正在尋找一種微妙的方式來為網(wǎng)站添加一些視覺效果,那么更改懸停文字是一種很好的方式。

【設(shè)計資訊 】改善用戶體驗的方法

結(jié)論正如所有的網(wǎng)頁設(shè)計,平衡是至關(guān)重要的。如果你選擇了動效設(shè)計,在初步實(shí)施時就要更好地了解什么是足夠的,什么是太多。無論你選擇用小規(guī)模的動畫形式或錨文本,還是更大的東西如模塊化滾動,你的用戶將有一個更愉快的互動體驗——這總是對商業(yè)有好處的。

當(dāng)前題目:【設(shè)計資訊】改善用戶體驗的方法
網(wǎng)頁URL:http://m.rwnh.cn/news/172016.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有用戶體驗

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司
江城| 大田县| 若羌县| 昌邑市| 福州市| 平安县| 吴江市| 福贡县| 庆元县| 镇雄县| 胶南市| 盐津县| 冷水江市| 榆树市| 福州市| 县级市| 信丰县| 瑞金市| 大竹县| 江安县| 广宁县| 青浦区| 独山县| 青田县| 广河县| 昌乐县| 新津县| 青海省| 五大连池市| 河东区| 上蔡县| 凌海市| 盐城市| 德令哈市| 鹿泉市| 弋阳县| 石棉县| 麻城市| 普兰店市| 高尔夫| 满洲里市|