感謝大家對(duì)黑馬家族感官體驗(yàn)日記欄目的關(guān)注和支持,本欄目皆在為大家?guī)韮?yōu)秀的設(shè)計(jì)解決方案和不一樣的設(shè)計(jì)思維。希望每一期的分享都能開啟你對(duì)于設(shè)計(jì)的全新認(rèn)知,提高設(shè)計(jì)思維和變通能力。

下面就和黑馬哥一起來看看本期的感官體驗(yàn)總結(jié)吧!本期內(nèi)容涉及優(yōu)惠券設(shè)計(jì)、輪播圖設(shè)計(jì)、微動(dòng)效技巧、刷新的情感化設(shè)計(jì)、春節(jié)主題和冬奧主題等等。

不一樣的優(yōu)惠券疊加設(shè)計(jì)

優(yōu)惠券在電商購物場景中運(yùn)用普遍,如何提高優(yōu)惠券的關(guān)注度和使用率是至關(guān)重要的探索。特別是在多個(gè)優(yōu)惠券疊加的場景中,如何在交互層面和視覺引導(dǎo)層面進(jìn)行突破,作為設(shè)計(jì)師來說都在不斷嘗試新的解決方案。

最近發(fā)現(xiàn)得物(毒)將多個(gè)優(yōu)惠券設(shè)計(jì)成左右滑動(dòng)的動(dòng)效形式,方便用戶關(guān)注到更多不一樣的優(yōu)惠券。將有效期設(shè)計(jì)成失效的倒計(jì)時(shí),營造時(shí)間緊迫感,提高用戶的關(guān)注度和優(yōu)惠券的使用率。

10個(gè)產(chǎn)品細(xì)節(jié)剖析,讓你看看大廠是如何做設(shè)計(jì)的!

突出品牌感的輪播 Banner 設(shè)計(jì)

輪播圖在產(chǎn)品設(shè)計(jì)中較為普遍,以推廣營銷活動(dòng)為主。除了在 Banner 設(shè)計(jì)本身進(jìn)行創(chuàng)意發(fā)揮以外,在 UI 布局層面也是設(shè)計(jì)師探索的方向。

得物(毒)在最近的一次新年活動(dòng)中,利用品牌展示和輪播 Banner 相結(jié)合進(jìn)行布局呈現(xiàn),不僅突出活動(dòng)主題,也強(qiáng)化了活動(dòng)品牌的曝光度。除了自動(dòng)輪播之外,也可以點(diǎn)擊品牌卡片切換,操作也是非常便利。Banner 底部卡片的展示也能讓用戶在當(dāng)前視野中瀏覽到其他品牌,提高了更多品牌的曝光度。

10個(gè)產(chǎn)品細(xì)節(jié)剖析,讓你看看大廠是如何做設(shè)計(jì)的!

多種分類下的輪播設(shè)計(jì)

單輪播設(shè)計(jì)較為普遍,當(dāng)我們遇到按照不同類別輪播類別的內(nèi)容時(shí),如何處理好類別的樣式和輪播的呈現(xiàn)方式呢?相信這個(gè)設(shè)計(jì)解決方案是一個(gè)不錯(cuò)的思路。

網(wǎng)易云音樂 APP 播客欄目中,隨心聽 FM 除了卡片輪播以外,下方設(shè)計(jì)了音樂類別的選擇,模擬調(diào)頻場景設(shè)計(jì),操作不僅非常便利,感官體驗(yàn)也是非常不錯(cuò)的。背景顏色也會(huì)隨著類別切換進(jìn)行微變化,帶給用戶非常自然的視覺過渡。

10個(gè)產(chǎn)品細(xì)節(jié)剖析,讓你看看大廠是如何做設(shè)計(jì)的!

通過手勢拖拽隱藏紅點(diǎn)提示

紅點(diǎn)效應(yīng)從強(qiáng)迫癥已經(jīng)開始過渡到治愈期,不過針對(duì)信息列表較多的部分,紅點(diǎn)提示太多也是非常干擾用戶體驗(yàn)的。

在 MOMO 陌陌 APP 消息欄目中,如果你覺得紅點(diǎn)提示消息過多時(shí),可以通過拖拽紅點(diǎn)隱藏顯示,無需挨個(gè)刪除或者閱讀。配合微動(dòng)效的設(shè)計(jì)表現(xiàn),帶給用戶非常流暢自然的操作體驗(yàn),借助手勢交互的設(shè)計(jì)提升用戶體驗(yàn)。

10個(gè)產(chǎn)品細(xì)節(jié)剖析,讓你看看大廠是如何做設(shè)計(jì)的!

這個(gè)功能最早是手機(jī)QQ設(shè)計(jì)團(tuán)隊(duì)創(chuàng)造的,設(shè)計(jì)過程見:

右滑手勢探索新的世界

手勢交互設(shè)計(jì)在產(chǎn)品中逐漸得到應(yīng)用,可以在有限的空間里面探索更多的互動(dòng)體驗(yàn),帶給用戶更加便利的操作體驗(yàn)。

最近研究手勢交互的時(shí)候,發(fā)現(xiàn) MOMO 陌陌 APP 首頁右滑即可開啟新功能,探索新的世界,吸引用戶前往這個(gè)小宇宙去探索。

10個(gè)產(chǎn)品細(xì)節(jié)剖析,讓你看看大廠是如何做設(shè)計(jì)的!

刷新設(shè)計(jì)的情感化表達(dá)

把簡單的功能做到極致,把重復(fù)的動(dòng)作做到更有情感化。想要抓住用戶的情感共鳴,就要在細(xì)微之處帶給用戶更有情感化的體驗(yàn)。

喜馬拉雅 APP 在下拉刷新時(shí),不是固定的文案提示,針對(duì)這個(gè)動(dòng)作設(shè)置了不一樣的文案提示。每一次刷新都會(huì)展示不一樣的文案,讓用戶感受到這是一個(gè)有溫度的產(chǎn)品,情感化設(shè)計(jì)的表達(dá)提高了用戶的情感共鳴。

10個(gè)產(chǎn)品細(xì)節(jié)剖析,讓你看看大廠是如何做設(shè)計(jì)的!

融入春節(jié)元素的金剛區(qū)設(shè)計(jì)

春節(jié)元素融入到 UI 設(shè)計(jì)中近期出現(xiàn)了很多案例,在金剛區(qū)圖標(biāo)設(shè)計(jì)中的表現(xiàn)尤為突出,帶給用戶情感化的場景代入感。

自如 APP 就將春節(jié)中的元素融入到金剛區(qū)的圖標(biāo)設(shè)計(jì)中,帶來的感官體驗(yàn)也是非常不錯(cuò)的。運(yùn)用到的元素涉及鞭炮、福字、元寶、紅包、糖葫蘆等等,結(jié)合中國紅營造出濃厚的春節(jié)氛圍。

10個(gè)產(chǎn)品細(xì)節(jié)剖析,讓你看看大廠是如何做設(shè)計(jì)的!

醒目的引導(dǎo)提示設(shè)計(jì)

針對(duì)新業(yè)務(wù)或者新功能的新手引導(dǎo)設(shè)計(jì),有助于提高用戶對(duì)于內(nèi)容的熟悉度,也能降低摸索學(xué)習(xí)的成本。

記賬城市 APP 在打開應(yīng)用時(shí),會(huì)在底部彈出新增的一些功能或者交互玩法。通過俏皮可愛的卡通形象以對(duì)話式的形式傳遞內(nèi)容,降低了用戶的學(xué)習(xí)成本,一目了然且不會(huì)形成對(duì)主功能區(qū)域的干擾。

10個(gè)產(chǎn)品細(xì)節(jié)剖析,讓你看看大廠是如何做設(shè)計(jì)的!

用設(shè)計(jì)為北京冬奧會(huì)加油

最近比較熱門的話題就是北京冬奧會(huì)了,各大品牌都在不同的渠道通過各種形式進(jìn)行曝光,借助營銷策劃或者單純的加油祝賀,為北京冬奧會(huì)的舉辦增添色彩。

高德地圖 APP 在地圖主頁添加火炬元素突出冬奧主題,點(diǎn)擊會(huì)展開“點(diǎn)燃昂揚(yáng)斗志,中國隊(duì)加油”。保持當(dāng)前結(jié)構(gòu)的基礎(chǔ)上,通過元素的添加達(dá)到主題的突出,既不干擾用戶操作,也能通過情感化的設(shè)計(jì)與用戶產(chǎn)生共鳴。

10個(gè)產(chǎn)品細(xì)節(jié)剖析,讓你看看大廠是如何做設(shè)計(jì)的!

游戲化的簽到積分設(shè)計(jì)

簽到掙積分獲取相應(yīng)的獎(jiǎng)勵(lì),在產(chǎn)品中較為常見,特別是電商類產(chǎn)品。隨著這種形式的普及,起初的新鮮感逐漸減少,有差異和創(chuàng)意的表達(dá)方式才能吸引用戶的關(guān)注度。

得物(毒)結(jié)合游戲化的形式表達(dá)簽到和領(lǐng)取積分的設(shè)計(jì),通過積分換取優(yōu)惠券和禮品等。積分采用極光的形式表達(dá),不足的情況下可以通過“找極光”獲取,激發(fā)用戶的參與度。

10個(gè)產(chǎn)品細(xì)節(jié)剖析,讓你看看大廠是如何做設(shè)計(jì)的!

小結(jié)

從感官體驗(yàn)的角度體驗(yàn)產(chǎn)品,總結(jié)了在 UI 設(shè)計(jì)視覺層面的解決方案,有助于提高 UI 設(shè)計(jì)師的視覺表現(xiàn)能力。對(duì)比相同功能的不同視覺表達(dá),總結(jié)優(yōu)秀的設(shè)計(jì)呈現(xiàn)方案,希望這個(gè)欄目可以帶給你更多幫助!

歡迎關(guān)注作者的微信公眾號(hào):「黑馬家族」

10個(gè)產(chǎn)品細(xì)節(jié)剖析,讓你看看大廠是如何做設(shè)計(jì)的!

收藏 91
點(diǎn)贊 37

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。