UI設(shè)計(jì)師交互設(shè)計(jì)-注重產(chǎn)品細(xì)節(jié)的使用體驗(yàn)

2022-4-13    周周

前言


在使用產(chǎn)品的過(guò)程中,你是否看到了一些有趣的細(xì)節(jié),而這些細(xì)節(jié)提升了你的使用體驗(yàn)?這些產(chǎn)品細(xì)節(jié),便是產(chǎn)品設(shè)計(jì)師需要留意的,因?yàn)檫@些產(chǎn)品細(xì)節(jié)在某種程度上提升了用戶的留存與轉(zhuǎn)化。本文我就對(duì)一些產(chǎn)品細(xì)節(jié)進(jìn)行了拆解,一起來(lái)看一下。









一.【夸克瀏覽器】節(jié)日彩蛋-特定場(chǎng)景下輸入關(guān)鍵詞觸發(fā)彩蛋效果

二.【酷狗音樂(lè)】播放Tab-多交互操作,應(yīng)對(duì)多場(chǎng)景使用

三.【騰訊新聞】左滑熱點(diǎn)榜單-用戶關(guān)注的熱點(diǎn)放在路徑短的位置

四.【荔枝博客】品牌傳播-產(chǎn)品情感漏出,與用戶產(chǎn)生共鳴

五.【百度網(wǎng)盤】自定義倍數(shù)-給用戶更多可控操作,精細(xì)化觀影感受

六.【網(wǎng)易云音樂(lè)】情感彩蛋-給你夢(mèng)幻的魔法,帶你重拾記憶

七.【即刻】頭像彩蛋-趣味互動(dòng)回彈,把喜歡強(qiáng)烈表現(xiàn)出來(lái)

八.【荔枝】錄聲音-輕擬物動(dòng)態(tài)圖,使用中的及時(shí)反饋

九.【微博】點(diǎn)贊反饋-情緒最大化宣泄,盡情釋放情緒

十.【36氪】隱藏的浮窗-深挖用戶操作,快切與停頓的奧秘



一、【夸克瀏覽器】節(jié)日彩蛋-特定場(chǎng)景下輸入關(guān)鍵詞觸發(fā)彩蛋效果


1. 使用場(chǎng)景


在圣誕節(jié)日來(lái)臨之際,用戶使用搜索引擎輸入關(guān)鍵詞的頻率會(huì)增加,在此增加彩蛋給用戶營(yíng)造節(jié)日氛圍





2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):增加關(guān)鍵詞趣味彩蛋雨,提高產(chǎn)品趣味體驗(yàn),提高用戶搜索頻次。


設(shè)計(jì)方案:在節(jié)日來(lái)臨前,用戶通過(guò)搜索節(jié)日特定關(guān)鍵詞,會(huì)在搜索結(jié)果頁(yè)中以彩蛋雨的形式墜落下來(lái),圖案貼合節(jié)日物品,給用戶營(yíng)造出節(jié)日氛圍,給予用戶節(jié)日的浪漫。用戶在使用時(shí)并不是一個(gè)冰冷的產(chǎn)品,而是有情感共鳴有情緒的產(chǎn)品。




二、【酷狗音樂(lè)】播放Tab-多交互操作,應(yīng)對(duì)多場(chǎng)景使用


1. 使用場(chǎng)景


想要提高屏效,一屏顯示更多內(nèi)容。在瀏覽操作時(shí)會(huì)因?yàn)楣δ馨粹o外漏造成誤操作情況。





2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):提升屏幕顯示內(nèi)容面積,給予TAB播放更多交互形式,增加趣味性提升產(chǎn)品記憶點(diǎn)。


設(shè)計(jì)方案:在TAB播放中給予「長(zhǎng)按」「雙擊」兩種交互操作,長(zhǎng)按中包含雙擊的播放暫停,因?yàn)榇瞬僮?,使用率較高,提供多入口能有效提高易用性。長(zhǎng)按時(shí),激活更多常用功能,包含移動(dòng)進(jìn)度條、收藏、下一首等操作,配合特有的交互展示形式,給用戶形成產(chǎn)品記憶點(diǎn),同時(shí)在瀏覽不同頻道時(shí),功能的隱藏大大降低誤操作以及視覺(jué)干擾的情況。




三、【騰訊新聞】左滑熱點(diǎn)榜單-用戶關(guān)注的熱點(diǎn)放在路徑短的位置


1. 使用場(chǎng)景


如今的新聞產(chǎn)品都提供熱點(diǎn)時(shí)事新聞,給用戶提供更多豐富內(nèi)容聚集。





2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):提高用戶使用率,不影響主框架的情況下給用戶最短路徑查看熱點(diǎn)新聞的入口,提高用戶瀏覽時(shí)長(zhǎng)。


設(shè)計(jì)方案:首屏以及導(dǎo)航模塊更多還是以新聞資訊等內(nèi)容為主,關(guān)注熱點(diǎn)更多是娛樂(lè)熱門等內(nèi)容,瀏覽率都高的情況下,把熱點(diǎn)模塊放到左滑頁(yè)面中,在不影響首頁(yè)框架情況下,增加新的板塊,給用戶更多瀏覽選擇,豐富產(chǎn)品多元化內(nèi)容。



四、【荔枝博客】品牌傳播-產(chǎn)品情感漏出,與用戶產(chǎn)生共鳴


1. 使用場(chǎng)景


如今的產(chǎn)品趨于同質(zhì)化,由原來(lái)只注重功能轉(zhuǎn)變?yōu)楫a(chǎn)品情感表達(dá),給用戶產(chǎn)生情感互動(dòng),從功能付費(fèi)變?yōu)榍楦袃r(jià)值觀付費(fèi)。



2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):傳播產(chǎn)品價(jià)值觀,給予用戶引導(dǎo),產(chǎn)生產(chǎn)品正向記憶,從而提高粘性。


設(shè)計(jì)方案:上幾期產(chǎn)品分析中有說(shuō)到頂部logo外漏的設(shè)計(jì)描述,有的植入隱藏功能,有的表示刷新功能等,歸根結(jié)底都是給予靜態(tài)標(biāo)志功能屬性,提高屏幕利用率同時(shí)提升用戶探索欲望。


荔枝博客本身產(chǎn)品內(nèi)容相對(duì)聚焦,想要做出差異化就要往品牌情感入手,當(dāng)用戶點(diǎn)擊左上角「荔枝博客」標(biāo)志時(shí),會(huì)彈出產(chǎn)品的由來(lái)以及做博客的初衷,讓用戶思考產(chǎn)品深層意思時(shí)無(wú)形中把產(chǎn)品植入到用戶記憶中,給用戶情感綁定,提升用戶使用粘性。




五、【百度網(wǎng)盤】自定義倍數(shù)-給用戶更多可控操作,精細(xì)化觀影感受


1. 使用場(chǎng)景


市場(chǎng)上的視頻倍速參差不齊,0.25、0.5、1倍三種遞增邏輯,用戶在觀影時(shí)會(huì)存在沒(méi)有想要選擇著倍速,只能使用平臺(tái)提供的選擇使用,操作受限制。





2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):解決倍速不是用戶想要的,提供自定義倍速,給用戶更多可操作性,提升觀影感受。


設(shè)計(jì)方案:在百度網(wǎng)盤中觀看視頻時(shí),點(diǎn)擊調(diào)節(jié)倍速在提供默認(rèn)常規(guī)5種倍速下提供自定義倍速,以0.1的速度逐漸遞增,用戶可以在0.5-3倍之間任意選擇,根據(jù)視頻類型、觀影習(xí)慣選擇合適的速度,同時(shí)把市面上不同倍速問(wèn)題給用戶造成的觀影困擾也同步解決,提高視頻觀影體驗(yàn)。




六、【網(wǎng)易云音樂(lè)】情感彩蛋-給你夢(mèng)幻的魔法,帶你重拾記憶


1. 使用場(chǎng)景


音樂(lè)無(wú)國(guó)界,每首音樂(lè)背后都有一段很長(zhǎng)的故事,在我聽(tīng)哈利波特主題曲時(shí),瀏覽評(píng)論發(fā)現(xiàn)特定特定位置點(diǎn)擊會(huì)有彩蛋,嘗試了一下果然如此。網(wǎng)易云音樂(lè)評(píng)論區(qū)的強(qiáng)大之處展示之一。獨(dú)有的彩蛋。





2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):提升評(píng)論活躍度,強(qiáng)化廣告的表現(xiàn)形式,增加用戶對(duì)產(chǎn)品的探索欲望提高使用粘性。


設(shè)計(jì)方案:哈利波特音樂(lè)中,在評(píng)論區(qū)第九和第十條中間分割線處,點(diǎn)擊兩下!觸發(fā)魔法視頻,把用戶帶入情境之中,勾起滿滿的回憶,配合音樂(lè)聲音,真可謂視覺(jué)聽(tīng)覺(jué)雙重享受。


對(duì)于開(kāi)發(fā)來(lái)說(shuō),只需要在特定歌曲評(píng)論中寫一個(gè)位置判定以及觸發(fā)條件,當(dāng)用戶觸發(fā)條件后,播放特定視頻,觸發(fā) 用戶情感共識(shí),提升使用粘性。同時(shí)如果做為廣告植入也是比較好的呈現(xiàn)方式,但要注意視頻質(zhì)量,盡量弱化廣告中的產(chǎn)品,可以把品牌情感揉入視頻中與用戶產(chǎn)生情感關(guān)聯(lián)。




七、【即刻】頭像彩蛋-趣味互動(dòng)回彈,把喜歡強(qiáng)烈表現(xiàn)出來(lái)


1. 使用場(chǎng)景


在看關(guān)注人主頁(yè)時(shí),想要強(qiáng)烈的表達(dá)出情感給予對(duì)方,釋放自己心中的喜歡時(shí)如何表現(xiàn)出來(lái)。





2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):提升趣味玩法,增強(qiáng)用戶操作感受,豐富產(chǎn)品玩法體驗(yàn),提升使用粘性。


設(shè)計(jì)方案:在個(gè)人主頁(yè),通過(guò)拖拽用戶頭像放手回彈,頭像以拉距來(lái)彈射回原有位置并且迸發(fā)出愛(ài)心動(dòng)畫(huà),讓用戶產(chǎn)生更貼近的情感傳達(dá),反復(fù)操作達(dá)到一定數(shù)量會(huì)有文字提醒,文案的趣味描述也讓彩帶功能增加了一份趣味。




八、【荔枝】錄聲音-輕擬物動(dòng)態(tài)圖,使用中的及時(shí)反饋


1. 使用場(chǎng)景


在使用錄音功能時(shí),單純靠進(jìn)度條記憶靜態(tài)按鈕顯示很難產(chǎn)生強(qiáng)提醒,除非做大做突出,荔枝在錄音中是如何表現(xiàn)的。



2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):解決錄音功能頁(yè)面元素單一用戶進(jìn)行中與暫停感知淺的問(wèn)題,結(jié)合動(dòng)態(tài)插圖給用戶及時(shí)反饋,同時(shí)貼合線下使用場(chǎng)景,給用戶注入產(chǎn)品記憶點(diǎn)。


設(shè)計(jì)方案:在我的-進(jìn)入錄聲音模塊中,頭圖展示一個(gè)錄音磁帶機(jī),當(dāng)開(kāi)啟錄音功能時(shí),磁帶機(jī)會(huì)進(jìn)行旋轉(zhuǎn)播放,左慢右快的展示形式符合真實(shí)機(jī)器的運(yùn)動(dòng)規(guī)律,給用戶強(qiáng)提醒告知用戶此時(shí)正在錄音中,當(dāng)暫停時(shí),磁帶機(jī)及時(shí)停止,和按鈕形成觸發(fā)綁定,提高產(chǎn)品使用體驗(yàn)。




九、【微博】點(diǎn)贊反饋-情緒最大化宣泄,盡情釋放情緒


1. 使用場(chǎng)景


單一的贊有時(shí)無(wú)法滿足用戶的愛(ài)意,用戶希望更強(qiáng)烈的表達(dá)情感,來(lái)滿足自己反饋欲。





2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):提升贊的強(qiáng)烈感知,釋放用戶內(nèi)在情緒,提高產(chǎn)品趣味體驗(yàn),從而增加使用粘性。


設(shè)計(jì)方案:在微博單條動(dòng)態(tài)頁(yè)面中,對(duì)“贊”進(jìn)行點(diǎn)擊一次操作是普通點(diǎn)贊反饋;長(zhǎng)按觸發(fā)連贊?rùn)C(jī)制,會(huì)帶來(lái)多彩多圖標(biāo)的更強(qiáng)的視覺(jué)感受,帶來(lái)強(qiáng)烈的情感反饋,讓用戶盡情的釋放情緒,得到內(nèi)在解壓。




十、【36氪】隱藏的浮窗-深挖用戶操作,快切與停頓的奧秘


1. 使用場(chǎng)景


新聞資訊產(chǎn)品,文章之間來(lái)回切換閱讀,時(shí)有發(fā)生,或者手頭有事忙完再回過(guò)頭看。





2. 設(shè)計(jì)思考


設(shè)計(jì)目標(biāo):解決閱讀中斷導(dǎo)致回看路徑長(zhǎng),影響閱讀效率的問(wèn)題。


設(shè)計(jì)方案:瀏覽文章時(shí),屏幕側(cè)邊從左向右劃動(dòng)是返回上一級(jí)的交互手勢(shì),當(dāng)用戶在滑動(dòng)中停留一下就會(huì)激活浮窗功能,隨著手勢(shì)操作移動(dòng)到黑圈內(nèi)顏色會(huì)顯示藍(lán)色,表示移入成功,這時(shí)放手返回首頁(yè),右下角會(huì)顯示一個(gè)圓形浮窗,可快速查看浮窗內(nèi)的文章。


值得學(xué)習(xí)的是,左滑浮窗圖形隨著手勢(shì)上下位置進(jìn)行移動(dòng),路徑更短更快的進(jìn)行操作,提高用戶使用體驗(yàn)。因?yàn)殡[藏式的交互有一定學(xué)習(xí)成本,產(chǎn)品充分考慮到這點(diǎn),在文章右上角更多按鈕中放置加入浮窗功能,兩個(gè)激活入口,兼容新老用戶使用,提高產(chǎn)品易用性。









十一、結(jié)語(yǔ)


設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺(jué),還有好的體驗(yàn)流程。不要讓用戶思考,這是每個(gè)設(shè)計(jì)師所追求的。認(rèn)真記錄產(chǎn)品細(xì)節(jié),了解背后的思考,也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。


文章來(lái)源:站酷 作者:碳水sir

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.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è)人資料

存檔