7個(gè)UI小例·用細(xì)節(jié)留住用戶

2017-1-6    資深UI設(shè)計(jì)者

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

APP已如此成熟的今天,視覺(jué)基本都做得不錯(cuò)了,說(shuō)實(shí)在也都大同小異,因?yàn)橐粋€(gè)好的APP,更多的是使用多年來(lái)培養(yǎng)出來(lái)的大眾習(xí)慣來(lái)指導(dǎo)設(shè)計(jì),而不是界面多么與眾不同,而是細(xì)節(jié)決定勝負(fù)。

 

以下7個(gè)APP是大家再熟悉不過(guò)的,使用過(guò)程有些功能細(xì)節(jié)自己感覺(jué)很好,印象深刻,今天特地截取下來(lái)分享。可能你天天使用并無(wú)感覺(jué),但正是這些不顯眼的細(xì)節(jié),慢慢培養(yǎng)出大批忠實(shí)用戶。

 

一、【騰訊視頻】

 

播放界面右側(cè)新增‘截屏’和‘錄制’功能。視頻截屏分享在當(dāng)今分享時(shí)代里是常用的功能,但以前需要讓視頻暫停,然后同時(shí)按下手機(jī)2健才能保存屏幕,還經(jīng)常不成功,現(xiàn)在有了這個(gè)新功能,截屏反應(yīng)非常快速準(zhǔn)確,截屏成功還有“立即點(diǎn)擊分享”功能,實(shí)屬貼心細(xì)節(jié)設(shè)計(jì)。同理3秒鐘錄制功能,符合當(dāng)下小視頻分享需求量的增加。


0b6a586dabdca8012060c8f6e860.jpg



二、【QQ&微信】

 

貼心預(yù)料用戶接下來(lái)的動(dòng)作,讓動(dòng)作一步完成,讓用戶操作變得如此簡(jiǎn)單并節(jié)省大量時(shí)間,對(duì)于運(yùn)營(yíng)商來(lái)說(shuō),也必將提高該功能的使用率。比如手機(jī)拍了一張照片,緊接著你打開(kāi)微信聊天界面,點(diǎn)擊添加附件按鈕,會(huì)彈出剛剛拍的照片,一點(diǎn)就立刻發(fā)送出去了,非常方便,足足減少了3個(gè)步驟。還有QQ的gif表情,不用把表情拉到輸入框點(diǎn)發(fā)送,鼠標(biāo)移到表情上會(huì)出現(xiàn)一個(gè)“+1”按鈕,一點(diǎn)就發(fā)送。這些都是預(yù)知用戶下一步動(dòng)作的細(xì)節(jié)功能優(yōu)化,用戶體驗(yàn)很好。


ea60586dabf5a8012060c8417e0d.jpg



三、【百度地圖】

 

百度地圖能在眾多地圖中得勝,在于它不斷地滿足用戶需求,甚至實(shí)現(xiàn)用戶沒(méi)有想到的功能。比如我最欣賞它的“路況”,整個(gè)城市的擁堵情況一目了然,對(duì)出行的指導(dǎo)能力很到位,而且還能智能地根據(jù)全程擁堵情況,準(zhǔn)確計(jì)算加上擁堵預(yù)計(jì)時(shí)間的全程車程時(shí)間,實(shí)時(shí)變更計(jì)算,相當(dāng)準(zhǔn)確。


4cc0586dac09a8012060c8d322cb.jpg



四、【UBER】

 

當(dāng)年UBER剛進(jìn)中國(guó),就被大家大贊其UI做得好,說(shuō)實(shí)話并沒(méi)有多好看,而是界面簡(jiǎn)單好用,重點(diǎn)突出,很干凈,完全沒(méi)多余的干擾功能。居中大大的“點(diǎn)擊用車”按鈕,很有點(diǎn)擊的沖動(dòng),引導(dǎo)性和指引性都很成功。另外,周邊普通轎車和高級(jí)轎車用不同顏色區(qū)分并實(shí)時(shí)在地圖上行駛,直觀而且為界面增加趣味。


cc21586dac19a8012060c8a611c6.jpg



五、【網(wǎng)易云音樂(lè)】

 

1、雖說(shuō)當(dāng)下是扁平化當(dāng)?shù)?,可某些特殊界面的某個(gè)元素使用擬物,卻可以提高用戶體驗(yàn)和加深用戶印象,或許就是這一突出的元素,讓你的APP變得與眾不同,提高識(shí)別性。網(wǎng)易云音樂(lè)的播放界面,無(wú)論P(yáng)C端和APP,主角都使用這個(gè)復(fù)古黑膠唱片播放機(jī)。想象一下在家或咖啡廳,把唱臂唱頭放置于唱片上,旋律起飛,躺在沙發(fā)上看書(shū),多么小資放松的時(shí)光,好的UI就是能夠讓你身臨其境到美好場(chǎng)景中。

 

為了讓界面更加豐富好看,播放界面整個(gè)背景都采用歌曲不同的封面,避免單調(diào),并運(yùn)用高度模糊,讓每首歌擁有不同的色調(diào),更符合每首歌不同的情感。


1b31586dac27a8012060c85da16a.jpg


c9b5586dac30a8012060c851f791.jpg


2、專門(mén)針對(duì)開(kāi)車者設(shè)計(jì)的一個(gè)行車播放界面,雖然打開(kāi)此模式的入口被隱藏得較深,可能也很少人知道,截屏出來(lái)只是因?yàn)榻缑婵雌饋?lái)很舒服,極簡(jiǎn)約干凈,防止動(dòng)態(tài)界面會(huì)打擾司機(jī)的視線,除去大量功能按鈕,只留下尺寸很大的最常用的控件,前一首/暫停開(kāi)始/下一首,最大限度方便操作,這是對(duì)用戶使用場(chǎng)景考慮細(xì)心周到的UI。


e600586dac45a801219c77a33cb2.jpg


3、直接拖放操作,這在PC端和手機(jī)系統(tǒng)中是很常見(jiàn)的交互,可在APP中還是比較少運(yùn)用的。


33fc586dac53a801219c778571e2.jpg



六、【百度翻譯】

 

“拍照涂抹翻譯”這個(gè)功能用了挺久的,雖然長(zhǎng)句并非很通順,不過(guò)對(duì)于大概了解句意已足夠了。翻譯的語(yǔ)言包括了英語(yǔ)/日語(yǔ)/韓語(yǔ)/法語(yǔ)/西班牙語(yǔ)/俄語(yǔ)/葡萄牙語(yǔ)/德語(yǔ)/意大利語(yǔ),隨時(shí)切換,非常方便。每一步界面底部都有貼心的小提示,讓操作更順暢。


8fea586dac65a8012060c8d154fd.jpg



七、【支付寶】

 

語(yǔ)音功能現(xiàn)在已經(jīng)非常成熟和普遍,可是我們或許只會(huì)去使用一些很基本的功能,還有更多功能我們并不知道可以用。主界面中提供這些語(yǔ)音例子,可以讓用戶煥然大悟,更加充分發(fā)揮語(yǔ)音功能。不過(guò)例子也不能太多,會(huì)影響用戶接收及反應(yīng),所以一般不要超過(guò)7個(gè),而支付寶和百度更少,只有5個(gè)例子。


1adb586dac78a801219c77acc946.jpg

以上這幾個(gè)簡(jiǎn)單案例,卻能啟發(fā)我們?cè)赨I設(shè)計(jì)中想得更多,2017,讓我們回歸細(xì)節(jié),用細(xì)節(jié)留住用戶。

藍(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è)人資料

存檔