2018-11-5 濤濤
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
在 UI設(shè)計(jì)中，我們常常說用戶體驗(yàn)至上，什么是用戶體驗(yàn)？我們的產(chǎn)品為什么能夠留住人？為什么那么多人愛用？這都是值得思考的問題。前幾天我在體驗(yàn)一款產(chǎn)品注冊(cè)輸入驗(yàn)證碼的時(shí)候發(fā)現(xiàn)，鍵盤能夠自動(dòng)獲取到手機(jī)的短信，這真的是解救我這種每次輸入驗(yàn)證碼要記兩遍的人。后來通過了解才知道是 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)證，京東金融為了安全考慮，并沒有采用系統(tǒng)鍵盤而是自己開發(fā)的安全鍵盤，并沒有獲取短信驗(yàn)證碼信息，但是作為用戶的我并沒有感到不好用，畢竟以安全為主。
我想這個(gè)例子就可以回答我上面問的幾個(gè)問題。什么是用戶體驗(yàn)？對(duì)于一個(gè)成熟的產(chǎn)品來說，你的用戶愛用、經(jīng)常用就可以說他用戶體驗(yàn)做得比較好。
如何才能讓用戶愛用呢？首先需要保證基本功能滿足；其次交互流程合理、最后在前兩個(gè)都做好的情況下，我們還可以從交互的小細(xì)節(jié)來提升產(chǎn)品體驗(yàn)，從而讓用戶愛用。以下是我整理的8大交互小細(xì)節(jié)：
反饋不單單是在大的功能頁(yè)面才用，小操作也需要提供及時(shí)反饋，讓用戶知道正在發(fā)生什么，從而有掌控感。這個(gè)反饋可以是聽覺、觸覺、視覺。
以愛奇藝安卓版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í)候，就像你剛戀愛時(shí)，你男朋友牽你手觸電的感覺，加入觸感之后讓整個(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)，其最終目的也是為了盈利，因此通過一些小交互也可強(qiáng)調(diào)產(chǎn)品希望用戶注意的地方。
左圖：以大眾點(diǎn)評(píng)為例，大眾點(diǎn)評(píng)詳情頁(yè)不斷上滑時(shí)，頂部會(huì)將個(gè)人信息和關(guān)注按鈕進(jìn)行置頂操作，這樣就可方便用戶在瀏覽過程中隨時(shí)進(jìn)行關(guān)注操作。
右圖：以掌上生活為例，在精選欄目界面向下滑動(dòng)過程中，底部會(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)注，通過外力引導(dǎo)可以引導(dǎo)用戶做產(chǎn)品想讓他們做的事情，雖然我們說好的產(chǎn)品會(huì)自己說話，但是對(duì)于某些新操作，是有必要提醒用戶的。
以愛奇藝為例，在首頁(yè)你看到有一個(gè)長(zhǎng)按試試的手型引導(dǎo)，這個(gè)是新加的操作，在初期長(zhǎng)按操作優(yōu)先在安卓版才有，但是很多人都不知道這個(gè)功能，我也是無意中發(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)畫，看到它我們很容易就能夠知道是美團(tuán)外賣。
不經(jīng)意時(shí)，在一些小細(xì)節(jié)處制造驚喜，從功能上來說并沒有什么幫助，但是這個(gè)驚喜提供了超出了用戶預(yù)期的體驗(yàn)，就會(huì)讓用戶對(duì)產(chǎn)品產(chǎn)生好感。
以騰訊視頻為例，在 doki明星詳情中，為明星打榜后可以繼續(xù)沖榜，點(diǎn)擊沖榜就有很多小愛心從天而降，為用戶營(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)贊操作，但是如果用戶并沒有滑動(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é)起來就是反饋、提醒、引導(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.alimai.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.alimai.net