這些UI和UX趨勢(shì),在2019年最值得關(guān)注

2018-12-24    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


當(dāng)你的產(chǎn)品短時(shí)間內(nèi)無(wú)法使用時(shí),如斷網(wǎng)、跨平臺(tái)無(wú)法分享等等。用戶可能會(huì)因而產(chǎn)生挫敗感,產(chǎn)生焦慮不爽的負(fù)面情緒。如何安撫用戶情緒?如何拉近用戶和平臺(tái)的距離?如何改善或提高用戶體驗(yàn)?zāi)??本期案例,就分享一些有趣的小彩蛋、微交互,讓你靈感爆棚!

往期回顧:

  1. 每月更新!10個(gè)記憶深刻的產(chǎn)品設(shè)計(jì)神細(xì)節(jié)!(1)》
  2. 《每月更新!10個(gè)記憶深刻的產(chǎn)品設(shè)計(jì)神細(xì)節(jié)!(2)》

文章目錄

  1. 我見(jiàn)過(guò)最贊的招聘啟事,來(lái)自程序員的別樣浪漫
  2. 斷網(wǎng)環(huán)境下,Google瀏覽器頁(yè)面的小恐龍可以打游戲喲
  3. 「親戚計(jì)算器」?原來(lái)小米還有這么有趣的功能設(shè)計(jì)
  4. 揉成一團(tuán)的廢紙,會(huì)讓你聯(lián)想到「刪除」這個(gè)動(dòng)作么?
  5. 支付寶的小無(wú)奈
  6. 優(yōu)優(yōu)教程網(wǎng)首頁(yè)里藏著的可愛(ài)表情,你發(fā)現(xiàn)了幾個(gè)?
  7. 2233娘真是貼心的小姐姐(*?▽?*)
  8. 讓人意想不到的團(tuán)隊(duì)展示hover效果
  9. 時(shí)間走著滴答滴,iPhone的時(shí)鐘藏著自己的小秘密
  10. 有道詞典也賣萌,一句有溫度的文案會(huì)有怎樣的力量?

我見(jiàn)過(guò)最贊的招聘啟事,來(lái)自程序員的別樣浪漫

如果不是互聯(lián)網(wǎng)從業(yè)者,大概你永遠(yuǎn)都不會(huì)發(fā)現(xiàn)百度主頁(yè)的代碼控制臺(tái)(console)里藏著那條最浪漫的招聘啟事。因?yàn)橹挥袚碛虚_發(fā)網(wǎng)頁(yè)習(xí)慣的人,才會(huì)在瀏覽喜歡的網(wǎng)站時(shí)按下F12 調(diào)出網(wǎng)頁(yè)代碼查看。所以這條百度針對(duì)程序員的招聘被寫進(jìn)網(wǎng)站首頁(yè)代碼的console里,可謂是絕對(duì)精準(zhǔn)的招聘廣告投放了。

據(jù)說(shuō)這個(gè)彩蛋的設(shè)計(jì)并非百度的獨(dú)創(chuàng)而是 Google 先使用過(guò)的「小心機(jī)」,可是由于無(wú)從考證,所以小編并不能確定是哪家公司有才華的程序員小哥哥想出了這個(gè)妙計(jì)(知道的大神麻煩留言告知哦)。

但不得不承認(rèn)的是,很多時(shí)候我們都對(duì)程序員有太多刻板印象的誤解。那些看起來(lái)「木訥無(wú)趣」的程序員們認(rèn)真起來(lái),真的可能是最浪漫的人呢。

斷網(wǎng)環(huán)境下,Google瀏覽器頁(yè)面的小恐龍可以打游戲喲

Google Chrome 是一款由 Google開發(fā)的 Web瀏覽工具,大氣的界面設(shè)計(jì)、良好的使用體驗(yàn)以及強(qiáng)大的插件擴(kuò)展功能,使其受到大量用戶的喜愛(ài)。在完善產(chǎn)品功能的同時(shí),Google 的設(shè)計(jì)師們也不忘花費(fèi)一些「小心思」讓產(chǎn)品更加有趣味性:在瀏覽器出現(xiàn)錯(cuò)誤或無(wú)網(wǎng)的情況下(想試試么?斷開Wi-Fi或者拔下網(wǎng)線看看),我們會(huì)看到這只可愛(ài)的像素小恐龍。

小恐龍出現(xiàn)時(shí)是靜止的,但只要你按下鍵盤的左右鍵,這只小恐龍就會(huì)跑起來(lái),而操控上下鍵它就能躲避路上的障礙物。當(dāng)出錯(cuò)頁(yè)面變成可愛(ài)的小游戲,原本焦慮不爽的負(fù)面情緒好像也就沒(méi)那么嚴(yán)重了。一旦網(wǎng)絡(luò)恢復(fù),瀏覽器會(huì)自動(dòng)刷新到你所要瀏覽的頁(yè)面。真的是超貼心的設(shè)計(jì)了。

「親戚計(jì)算器」?原來(lái)小米還有這么有趣的功能設(shè)計(jì)

小米計(jì)算器內(nèi)置「親戚計(jì)算器」的功能,各種復(fù)雜的親戚關(guān)系幫你一鍵解決。老婆弟弟的妻子應(yīng)該怎樣稱呼呢?相信很多人都有過(guò)類似的對(duì)親戚關(guān)系產(chǎn)生疑問(wèn)的困擾。

梳理親戚關(guān)系有時(shí)候真讓人頭大,小米手機(jī)就很貼心的在系統(tǒng)里自帶了「親戚計(jì)算器」。將日常的復(fù)雜關(guān)系都羅列了出來(lái),真是符合中國(guó)特色的計(jì)算器設(shè)計(jì)呢~

揉成一團(tuán)的廢紙,會(huì)讓你聯(lián)想到「刪除」這個(gè)動(dòng)作么?

「作文紙條」App對(duì)于每日信息與文章的推送有著自己獨(dú)特的設(shè)計(jì)邏輯,如果推送內(nèi)容用戶當(dāng)天未讀,系統(tǒng)會(huì)將推送內(nèi)容自動(dòng)移到「廢紙簍」里。為了讓用戶在瀏覽「廢紙簍」內(nèi)容時(shí),明確感知到被刪內(nèi)容與正常內(nèi)容的差別,躺在「廢紙簍」里的信息視覺(jué)上模擬了揉皺紙團(tuán)的形象。

如同我們?cè)诂F(xiàn)實(shí)生活里,會(huì)將寫作時(shí)不滿意的內(nèi)容從筆記本中撕掉,并揉成紙團(tuán)丟進(jìn)垃圾桶的行為一般。將用戶熟悉的真實(shí)生活里的行為狀態(tài),移植到虛擬的交互設(shè)計(jì)里,會(huì)使用戶與產(chǎn)品的交互過(guò)程更形象生動(dòng)。

支付寶的小無(wú)奈

偶然在支付寶的芝麻信用里發(fā)現(xiàn)滿700分,就可以免押金租用一些數(shù)碼產(chǎn)品了。覺(jué)得很不錯(cuò)想分享這個(gè)信息給朋友,就點(diǎn)了一下轉(zhuǎn)發(fā)微信好友,結(jié)果發(fā)現(xiàn)微信不讓分享支付寶的信息。

本來(lái)分享受限的挫敗感讓人心情很不好,但當(dāng)看到支付寶很無(wú)奈的提示文案「微信又不讓分享了,整個(gè)人都不好了」,不愉快的心情立馬被逗樂(lè)了。相較之前微信分享失敗的一串鏈接,這樣幽默的微文案提示真的可愛(ài)多了呢~

優(yōu)優(yōu)教程網(wǎng)首頁(yè)里藏著的可愛(ài)表情,你發(fā)現(xiàn)了幾個(gè)?

當(dāng)初在制作優(yōu)優(yōu)網(wǎng)首頁(yè)的時(shí)候,為了不讓 hover狀態(tài)(鼠標(biāo)懸?。┻^(guò)于無(wú)趣,分別在「靈感頻道」「教程排行榜 」「軟件排行榜」的 hover狀態(tài)里設(shè)計(jì)了不同的3個(gè)小表情,而且設(shè)計(jì)者大有來(lái)頭,正是人見(jiàn)人愛(ài)、花見(jiàn)花開的美丫姐。

她機(jī)靈的調(diào)整了圖標(biāo)狀態(tài)后,從后臺(tái)數(shù)據(jù)來(lái)看,這里的點(diǎn)擊確實(shí)停駐時(shí)間長(zhǎng)了一些,相信讓用戶會(huì)心一笑的同時(shí),也拉近了用戶和平臺(tái)的距離感。不妨在你的下一個(gè)案例里也試試喲~

2233娘真是貼心的小姐姐(*?▽?*)

登錄網(wǎng)站或應(yīng)用在輸入密碼時(shí),無(wú)論周圍環(huán)境如何,我們總會(huì)潛意識(shí)里產(chǎn)生一絲不安全感。B站對(duì)于這個(gè)問(wèn)題的處理方式顯得十分可愛(ài),在用戶登錄賬號(hào)輸入密碼時(shí)背景里的2233娘會(huì)出現(xiàn)雙手捂眼的小動(dòng)畫。整個(gè)輸入密碼的操作其實(shí)與其他應(yīng)用可能并無(wú)差別,但因?yàn)橛辛诉@個(gè)蒙眼動(dòng)作的心理暗示作用,用戶會(huì)感到自己的隱私受到保護(hù)與尊重從而產(chǎn)生安全感。

讓人意想不到的團(tuán)隊(duì)展示hover效果

drygital設(shè)計(jì)工作室的網(wǎng)站有著個(gè)性又炫酷的視覺(jué)與交互效果。團(tuán)隊(duì)展示界面的 hover效果,就讓人意想不到眼前一亮:當(dāng)鼠標(biāo)的光標(biāo)移到單個(gè)成員的半身像時(shí),原本正襟危坐的照片會(huì)變成另一張,展示該成員個(gè)性或喜好的搞怪照片。

原照片展示了團(tuán)隊(duì)成員在工作中嚴(yán)謹(jǐn)專業(yè)的一面,而 hover效果呈現(xiàn)的圖片則展示了成員們私下生活里幽默有趣、個(gè)性鮮明的另一面。這樣的設(shè)計(jì)不僅突出了團(tuán)隊(duì)成員的個(gè)人特色展示,利于團(tuán)隊(duì)的歸屬感與凝聚力提升,也展現(xiàn)了團(tuán)隊(duì)的開放包容與活力創(chuàng)新。

時(shí)間走著滴答滴,iPhone的時(shí)鐘藏著自己的小秘密

大家都知道 iOS系統(tǒng)的時(shí)鐘桌面圖標(biāo)會(huì)始終顯示當(dāng)前時(shí)間,但很少有人關(guān)注過(guò)時(shí)鐘圖標(biāo)里秒針的走動(dòng)方式。在常規(guī)狀態(tài)下,時(shí)鐘圖標(biāo)的秒針會(huì)呈現(xiàn)掃秒式地轉(zhuǎn)動(dòng);但當(dāng)桌面圖標(biāo)處于長(zhǎng)按狀態(tài)的晃動(dòng)效果時(shí),小時(shí)鐘的秒針會(huì)立馬變?yōu)樘胧降未鸬未鸬刈邉?dòng)起來(lái)。

據(jù)說(shuō)這個(gè)隱蔽的小細(xì)節(jié)設(shè)計(jì)是想表達(dá)向傳統(tǒng)時(shí)鐘的運(yùn)行模式致敬的意思。機(jī)械鐘秒變石英鐘,你 get到了 iPhone時(shí)鐘的小秘密了么?

有道詞典也賣萌,一句有溫度的文案會(huì)有怎樣的力量?

似信息崩潰,或加載緩慢的問(wèn)題,在產(chǎn)品實(shí)際使用中實(shí)在在所難免,一旦出現(xiàn),用戶的好情緒一定會(huì)受到影響。在這種時(shí)刻,一句生動(dòng)而有溫度的文案就是可以安撫用戶情緒、改善使用體驗(yàn)的利器法寶。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。

 

日歷

鏈接

個(gè)人資料

存檔