提升用戶體驗(yàn)的7大微交互

10 評(píng)論 15252 瀏覽 86 收藏 8 分鐘

動(dòng)畫的使用在交互設(shè)計(jì)中發(fā)揮著越來越重要的作用,尤其是在移動(dòng)應(yīng)用中,本文詳細(xì)分析了動(dòng)畫在微交互中發(fā)揮的各種作用

眾所周知,我們總是依據(jù)封面來判斷書的好壞,聰明的設(shè)計(jì)師會(huì)創(chuàng)造實(shí)用有吸引力的界面。潛在用戶可能會(huì)被吸引,但如何一直黏住他們呢?

要試著回答這個(gè)問題,所有一切都指向人本設(shè)計(jì),其中用戶是最主要的考量。以人為本:你的應(yīng)用應(yīng)該使用日常用語(yǔ),包括情緒、口語(yǔ),外觀還要有一絲“誘惑力”。界面應(yīng)當(dāng)成為你的好朋友,時(shí)刻準(zhǔn)備給出建議提升你的體驗(yàn),讓你會(huì)心一笑。

現(xiàn)在揭幕:是微交互在起作用。精確的說,這主要是界面附帶的交互動(dòng)畫,使它更具表現(xiàn)力。優(yōu)秀的動(dòng)畫能夠:

  • 表達(dá)狀態(tài)并提供反饋
  • 提升直接的操縱感
  • 將操作結(jié)果可視化

在用戶體驗(yàn)中,關(guān)鍵是你如何對(duì)待用戶,還有他們使用產(chǎn)品時(shí)的感受。極小的細(xì)節(jié)都值得加倍留心。微交互提供了用戶所需的反饋,表達(dá)了當(dāng)前運(yùn)行狀況。無論背后邏輯有多么復(fù)雜,都能使界面更親切。

1. 顯示系統(tǒng)狀態(tài)

Jakob Nielsen在可用性原則啟示第一條中描述:讓用戶始終知曉當(dāng)前在發(fā)生什么。用戶希望立馬得到回應(yīng),但總有些情況下,網(wǎng)站需要一點(diǎn)時(shí)間等待操作完成。

那么,界面就應(yīng)當(dāng)在背景處顯示圖形,反映完成百分比。或是播放聲音,讓用戶了解當(dāng)前發(fā)生的事情。這個(gè)原則也關(guān)系到文件傳輸:不要讓用戶覺得無聊,給他們看進(jìn)度條。即使是不太令人愉快的通知,比如傳輸失敗,也應(yīng)該以令人喜愛的方式展現(xiàn)。讓你的用戶微笑!

001c

2. 突出顯示變化

通常為了節(jié)省空間,應(yīng)用會(huì)在需要時(shí)把某個(gè)按鈕替換掉。有時(shí)我們需要展現(xiàn)通知,確保用戶注意到了。動(dòng)畫可以吸引他們注意,不至于忽略你認(rèn)為重要的信息。

002b

002c

3. 保持前后關(guān)聯(lián)

在這個(gè)智能手機(jī)和小屏幕智能手表的時(shí)代,難以在屏幕上展現(xiàn)大量信息。有一種處理方式,是在不同頁(yè)面之間保持清晰的導(dǎo)航。讓用戶理解什么東西來自何處,便能輕易回溯。有多種方式可以實(shí)現(xiàn):

003a

003b

4. 非標(biāo)準(zhǔn)布局

繼續(xù)之前的例子,微交互應(yīng)當(dāng)幫助用戶理解如何操作非標(biāo)準(zhǔn)的布局,去除不必要的疑惑。照片前后滑動(dòng)、滾動(dòng)式圖表和旋轉(zhuǎn)角色都是很棒的選擇:

004b

5. 行動(dòng)號(hào)召

除了幫助用戶有效地操作應(yīng)用,微交互也有鼓勵(lì)用戶操作的能力:持續(xù)瀏覽、點(diǎn)贊或分享內(nèi)容,只因?yàn)檫@很有吸引力,用戶不舍離去:

005b

005c

6. 輸入的視覺化

所有應(yīng)用中,數(shù)據(jù)錄入都是最重要的元素之一。數(shù)據(jù)錄入決定了用戶所得結(jié)果的質(zhì)量。通常,這部分很無趣,但微交互可以使它與眾不同:

006b

006c

7. 使教程生動(dòng)形象

當(dāng)然,在應(yīng)用發(fā)布后,動(dòng)畫可以教育用戶。它突出一些基本功能和控件,排除用戶在未來的使用中的障礙。

結(jié)論

所以,如果你重視用戶體驗(yàn),就應(yīng)該從頭到尾精細(xì)打磨界面,通過微交互與動(dòng)畫為它增色添彩。它會(huì)為你的項(xiàng)目賦予生命。

注意每個(gè)細(xì)節(jié),是使人機(jī)交互易用的成功要訣。

原文鏈接

作者信息:

DMYTRO SVARYTSEVYCH

Dmytro Svarytsevych is a Design Office Director at SoftServe, and a regular contributor to the SoftServe United blog. Dmytro has been in the industry for more than 13 years, specializing in User Interface design, Interaction design, Mobile design, Information Architecture and User Experience. At SoftServe, he is responsible for all User Experience touch points, defining and integrating a company-wide User Experience Strategy to facilitate consistent and flexible expertise growth, as well as applying UX best practices and methodologies to various SoftServe projects. More articles by Dmytro Svarytsevych

#專欄作家#

可樂橙,微信公眾號(hào):可樂橙(colachangreen)。人人都是產(chǎn)品經(jīng)理專欄作家,UI/UX設(shè)計(jì)師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技?,F(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中?;蛟S不是一名優(yōu)秀的設(shè)計(jì)師,至少是個(gè)快樂的設(shè)計(jì)師。

本文系作者授權(quán)發(fā)布,未經(jīng)許可,不得轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 用Axure應(yīng)該能達(dá)到這樣的效果,只是比較麻煩。

    來自北京 回復(fù)
  2. 額,大家都不知道這是AE做的嗎?

    來自浙江 回復(fù)
  3. 請(qǐng)問用什么樣的工具可以做出這樣的效果圖?并且技術(shù)人員可以做出這樣的效果圖嗎?

    來自北京 回復(fù)
  4. ?? 驚人

    來自北京 回復(fù)
  5. 請(qǐng)問用什么工具能做出這些效果圖啊、好屌的樣子

    來自云南 回復(fù)
  6. 我這里缺交互設(shè)計(jì)的leader 有興趣的朋友 QQ 468185618

    來自廣東 回復(fù)
  7. 好帥!

    來自北京 回復(fù)
  8. 請(qǐng)問用什么工具能做出這些效果圖啊。

    來自北京 回復(fù)
  9. ??

    來自廣東 回復(fù)
    1. ??

      來自廣東 回復(fù)