2018-11-5 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
在 UI設(shè)計(jì)中,我們常常說(shuō)用戶體驗(yàn)至上,什么是用戶體驗(yàn)?我們的產(chǎn)品為什么能夠留住人?為什么那么多人愛(ài)用?這都是值得思考的問(wèn)題。前幾天我在體驗(yàn)一款產(chǎn)品注冊(cè)輸入驗(yàn)證碼的時(shí)候發(fā)現(xiàn),鍵盤能夠自動(dòng)獲取到手機(jī)的短信,這真的是解救我這種每次輸入驗(yàn)證碼要記兩遍的人。后來(lái)通過(guò)了解才知道是 iPhone手機(jī)更新 iOS12以后,系統(tǒng)鍵盤增加的提醒功能。
于是我又去研究了經(jīng)常使用的京東金融,首先我測(cè)試了忘記密碼頁(yè)面,輸入驗(yàn)證碼時(shí)他采用的系統(tǒng)鍵盤樣式,同樣系統(tǒng)鍵盤獲取到了短信驗(yàn)證碼,直接點(diǎn)擊驗(yàn)證碼即可輸入,簡(jiǎn)單快捷。
同時(shí)我又測(cè)試了支付界面的短信驗(yàn)證,京東金融為了安全考慮,并沒(méi)有采用系統(tǒng)鍵盤而是自己開(kāi)發(fā)的安全鍵盤,并沒(méi)有獲取短信驗(yàn)證碼信息,但是作為用戶的我并沒(méi)有感到不好用,畢竟以安全為主。
我想這個(gè)例子就可以回答我上面問(wèn)的幾個(gè)問(wèn)題。什么是用戶體驗(yàn)?對(duì)于一個(gè)成熟的產(chǎn)品來(lái)說(shuō),你的用戶愛(ài)用、經(jīng)常用就可以說(shuō)他用戶體驗(yàn)做得比較好。
如何才能讓用戶愛(ài)用呢?首先需要保證基本功能滿足;其次交互流程合理、最后在前兩個(gè)都做好的情況下,我們還可以從交互的小細(xì)節(jié)來(lái)提升產(chǎn)品體驗(yàn),從而讓用戶愛(ài)用。以下是我整理的8大交互小細(xì)節(jié):
反饋不單單是在大的功能頁(yè)面才用,小操作也需要提供及時(shí)反饋,讓用戶知道正在發(fā)生什么,從而有掌控感。這個(gè)反饋可以是聽(tīng)覺(jué)、觸覺(jué)、視覺(jué)。
以愛(ài)奇藝安卓版V9.9.5視頻詳情頁(yè)為例,它就是加入了觸感反饋,當(dāng)你點(diǎn)擊點(diǎn)贊或收藏時(shí),手機(jī)會(huì)進(jìn)行震動(dòng)(目前iPhone版還未更新),當(dāng)我發(fā)現(xiàn)這個(gè)小交互的時(shí)候就被吸引到了。當(dāng)你點(diǎn)贊的時(shí)候,就像你剛戀愛(ài)時(shí),你男朋友牽你手觸電的感覺(jué),加入觸感之后讓整個(gè)交互更加情感化了。同時(shí)當(dāng)你點(diǎn)贊或收藏成功之后,也會(huì)及時(shí)反饋當(dāng)前所處的狀態(tài),提示成功,從而增強(qiáng)用戶的把控感。
讓用戶操作更方便,這也是我們?cè)谧鼋换ゼ?xì)節(jié)時(shí)需要考慮的,這樣可以盡可能的縮短用戶操作時(shí)間,同時(shí)也可以減輕用戶的認(rèn)知負(fù)擔(dān),促進(jìn)用戶下單。
以天貓購(gòu)物車為例,購(gòu)物車單個(gè)列表可以左滑進(jìn)行發(fā)現(xiàn)、移入收藏夾、刪除等功能,而我們長(zhǎng)按列表,同樣可以展示這三個(gè)操作。
我們知道側(cè)滑操作是 iOS 才有的,而安卓版大多數(shù)編輯操作都是采用長(zhǎng)按,天貓 iPhone版2種方式都有加入,可以照顧到更多人的習(xí)慣。
產(chǎn)品不單單只是為了用戶體驗(yàn),其最終目的也是為了盈利,因此通過(guò)一些小交互也可強(qiáng)調(diào)產(chǎn)品希望用戶注意的地方。
左圖:以大眾點(diǎn)評(píng)為例,大眾點(diǎn)評(píng)詳情頁(yè)不斷上滑時(shí),頂部會(huì)將個(gè)人信息和關(guān)注按鈕進(jìn)行置頂操作,這樣就可方便用戶在瀏覽過(guò)程中隨時(shí)進(jìn)行關(guān)注操作。
右圖:以掌上生活為例,在精選欄目界面向下滑動(dòng)過(guò)程中,底部會(huì)出現(xiàn)一個(gè)產(chǎn)品的氣泡提示,點(diǎn)擊氣泡會(huì)下滑至相關(guān)位置的產(chǎn)品。
激勵(lì)用戶進(jìn)行下一步操作,在一定誘因趨勢(shì)下,讓用戶自愿做產(chǎn)品期望他們做的事情,從而激勵(lì)用戶進(jìn)行下一步操作。
以天貓雙11活動(dòng)為例,從天貓首頁(yè)界面加入搶666紅包為誘導(dǎo),作為用戶看到這樣的內(nèi)容還是很想點(diǎn)進(jìn)去看看的,當(dāng)然進(jìn)入之后也不負(fù)眾望確實(shí)讓我搶了紅包,領(lǐng)取到了80塊的福利,同時(shí)下方還有各種任務(wù)列表,一步步引導(dǎo)用戶去操作,從而達(dá)到產(chǎn)品想讓用戶操作的目的。
引導(dǎo)用戶關(guān)注,通過(guò)外力引導(dǎo)可以引導(dǎo)用戶做產(chǎn)品想讓他們做的事情,雖然我們說(shuō)好的產(chǎn)品會(huì)自己說(shuō)話,但是對(duì)于某些新操作,是有必要提醒用戶的。
以愛(ài)奇藝為例,在首頁(yè)你看到有一個(gè)長(zhǎng)按試試的手型引導(dǎo),這個(gè)是新加的操作,在初期長(zhǎng)按操作優(yōu)先在安卓版才有,但是很多人都不知道這個(gè)功能,我也是無(wú)意中發(fā)現(xiàn)的。在 iPhone版上線后,他們?cè)诘谝粡堃曨l圖上加入引導(dǎo),可以更明確的讓用戶知道有該功能,長(zhǎng)按封面后可對(duì)視頻進(jìn)行預(yù)覽、收藏、直接看正片等操作。
在產(chǎn)品中合理的加入品牌基因,可以讓用戶一眼看出這是你的產(chǎn)品,從而提升產(chǎn)品的識(shí)別度。下面我找了兩款交互小細(xì)節(jié)中運(yùn)用品牌基因的案例。如下圖:
以轉(zhuǎn)轉(zhuǎn)為例,它在底部標(biāo)簽欄舵峰發(fā)布按鈕處,剛進(jìn)頁(yè)面加載時(shí),會(huì)有一個(gè)裝有發(fā)條的小熊在那轉(zhuǎn)啊轉(zhuǎn),在如今趨同的產(chǎn)品中,很容易就能夠知道是轉(zhuǎn)轉(zhuǎn)的吉祥物。
以美團(tuán)外賣為例,下拉刷新時(shí),顯示一個(gè)袋鼠快遞員送餐的小動(dòng)畫(huà),看到它我們很容易就能夠知道是美團(tuán)外賣。
不經(jīng)意時(shí),在一些小細(xì)節(jié)處制造驚喜,從功能上來(lái)說(shuō)并沒(méi)有什么幫助,但是這個(gè)驚喜提供了超出了用戶預(yù)期的體驗(yàn),就會(huì)讓用戶對(duì)產(chǎn)品產(chǎn)生好感。
以騰訊視頻為例,在 doki明星詳情中,為明星打榜后可以繼續(xù)沖榜,點(diǎn)擊沖榜就有很多小愛(ài)心從天而降,為用戶營(yíng)造浪漫溫馨的氛圍,提高用戶的幸福感。
當(dāng)某個(gè)功能比較重要時(shí),可能會(huì)在多個(gè)地方出現(xiàn),這時(shí)候就需要做好狀態(tài)的數(shù)據(jù)跟隨了,如下圖:
以騰訊視頻為例,騰訊doki詳情頁(yè)面在文章底部有一個(gè)大的點(diǎn)贊按鈕,提示用戶看完內(nèi)容后進(jìn)行點(diǎn)贊操作,但是如果用戶并沒(méi)有滑動(dòng)到底部想點(diǎn)贊怎么辦,所以騰訊在詳情頁(yè)的底部固定有評(píng)論和點(diǎn)贊,在交互上就需要做到,點(diǎn)擊其中一個(gè),另外一個(gè)效果要進(jìn)行跟隨。
作為設(shè)計(jì)師,我們?cè)谠O(shè)計(jì)時(shí)除了考慮實(shí)現(xiàn)基本功能外,同時(shí)還可以考慮如何設(shè)計(jì)才能夠抓住用戶,讓用戶為你的產(chǎn)品買單。以上八個(gè)交互小細(xì)節(jié)其實(shí)仔細(xì)看,你會(huì)發(fā)現(xiàn)總結(jié)起來(lái)就是反饋、提醒、引導(dǎo)、激勵(lì)這些交互方式,在做交互設(shè)計(jì)時(shí)需要我們落實(shí)到細(xì)節(jié),加強(qiáng)產(chǎn)品與用戶之間的互動(dòng),從而提升產(chǎn)品體驗(yàn)的交互細(xì)節(jié)。
藍(lán)藍(lán)設(shè)計(jì)( www.jghy.net )是一家專注而深入的界面設(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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jghy.net