UI設(shè)計(jì)培訓(xùn)怎樣才能根據(jù)用戶(hù)場(chǎng)景做設(shè)計(jì)?
來(lái)源:
奇酷教育 發(fā)表於:
UI設(shè)計(jì)培訓(xùn)怎樣才能根據(jù)用戶(hù)場(chǎng)景做設(shè)計(jì)?不知道大家在做設(shè)計(jì)的時(shí)候是否有考慮過(guò)用戶(hù)場(chǎng)景,用戶(hù)場(chǎng)景的構(gòu )建能夠讓我們的產(chǎn)品更好的為用戶(hù)
UI設(shè)計(jì)培訓(xùn)怎樣才能根據(jù)用戶(hù)場(chǎng)景做設(shè)計(jì)?不知道大家在做設(shè)計(jì)的時(shí)候是否有考慮過(guò)用戶(hù)場(chǎng)景,用戶(hù)場(chǎng)景的構(gòu )建能夠讓我們的產(chǎn)品更好的為用戶(hù)服務(wù)。大家有沒有想過(guò)為什麼有時(shí)候需求會(huì)經(jīng)常的修改,設(shè)計(jì)方案也會(huì)不停的變化,很大一部分原因就是因為在方案的設(shè)計(jì)過(guò)程中缺失了一部分用戶(hù)場(chǎng)景。
下面為了能讓大家明白
UI培訓(xùn)老師給大家舉幾個(gè)小例子,來(lái)幫助大家消化。
1、淘寶
大家是否思考過(guò)淘寶一個(gè)詳情頁(yè)這麼多複雜的功能是怎麼來(lái)的,為什麼產(chǎn)品經(jīng)理會(huì)有這麼多點(diǎn)子開(kāi)發(fā)出這麼多用戶(hù)想要的,並且又能幫助業(yè)務(wù)轉(zhuǎn)化的功能。其原因就在於用戶(hù)場(chǎng)景的構(gòu )建,那麼我們來(lái)簡(jiǎn)單的舉幾個(gè)在商詳這個(gè)場(chǎng)景的例子:
1.小李想要買(mǎi)個(gè)手辦送人,但是他不熟悉這個(gè)商品的價(jià)值,所以他進(jìn)入商詳之後主要去看了寶貝的評(píng)價(jià)和商品詳情。
2.因為該商品是預定款,所以他在商詳中使用了諮詢客服的功能,問(wèn)一問(wèn)這個(gè)商品的出貨價(jià)格以及出貨時(shí)間。
3.小李覺得這家店東西很符合他的胃口,於是他想看一看這家店中是否有其他更物美價(jià)廉的商品,於是他點(diǎn)進(jìn)了店鋪進(jìn)一步瀏覽。
4.小李想送別人這個(gè)商品,但是不知道別人是否喜歡,所以他想要把這個(gè)商品連結(jié)分享給另一個(gè)朋友讓他幫忙參考一下。
5.小李覺得這個(gè)商品目前還是太貴,打算加入購(gòu)物車(chē)或者收藏先觀(guān)望一段時(shí)間,等打折了再買(mǎi)
當(dāng)我們描述完一些場(chǎng)景的時(shí)候,大家是否明白了,場(chǎng)景決定了功能,為了吸引用戶(hù)下單,淘寶在商詳給予了b端商家更多的功能服務(wù),所以這裡的場(chǎng)景不僅僅是c端用戶(hù)需要的,也是b端商家需要的,為了讓商品能夠更好的銷(xiāo)售,滿(mǎn)足b端商家的銷(xiāo)售場(chǎng)景,淘寶通過(guò)後臺(tái)商家端做了更多的營(yíng)銷(xiāo)工具以滿(mǎn)足其營(yíng)銷(xiāo)手段的場(chǎng)景。
當(dāng)然這裡不能簡(jiǎn)單的理解為用戶(hù)想要的就是我們要做的功能,如果用戶(hù)想要折扣我們當(dāng)然不能直接給折扣,一定要挖掘用戶(hù)潛在的訴求,其實(shí)在商詳這塊我們不僅要考慮用戶(hù)在決策下單時(shí)候的場(chǎng)景,也要考慮業(yè)務(wù)價(jià)值的提升,比如提高客單價(jià)等。
接下來(lái)我們繼續(xù)舉例子,這個(gè)例子想要講的是,設(shè)計(jì)形式同樣是基於用戶(hù)場(chǎng)景,也就是說(shuō)一個(gè)設(shè)計(jì)架構(gòu )、流程、布局都取決於用戶(hù)是如何使用我們的產(chǎn)品的。
2.Keep
相信用過(guò)keep的同學(xué)對(duì)這款應(yīng)用的印象應(yīng)該比較深刻,顏值高,並且交互也很不錯,所以這裡就用它裡面的一個(gè)功能來(lái)進(jìn)行分析。
下面大家看到的是一個(gè)為自己添加健身訓(xùn)練的功能,從圖片中可以看到,當(dāng)我們沒有添加任何健身訓(xùn)練時(shí),該板塊以一個(gè)大bt的形式告訴用戶(hù)這裡可以添加,一旦添加完之後,添加按鈕縮小至該板塊右上角,而健身訓(xùn)練一旦添加超過(guò)兩(liǎng)個(gè)則會(huì)收起。
然後我們接著來(lái)看第二個(gè)樣式,這個(gè)方案是我根據(jù)第一個(gè)方案變化來(lái)的,
我們看到這個(gè)方案在首頁(yè)時(shí)樣式有了變化,並且健身訓(xùn)練的列表也進(jìn)入了二級(jí),有同學(xué)會(huì)說(shuō)了,你這樣做豈不是把添加課程的路徑變長(zhǎng)了嘛。
沒錯,所以1,2兩(liǎng)個(gè)方案在不同的用戶(hù)場(chǎng)景下的優(yōu)勢(shì)也是不同的。所以我們可以通過(guò)用戶(hù)研究的一些手段來(lái)對(duì)用戶(hù)進(jìn)行訪(fǎng)談和測(cè)試,看看用戶(hù)究竟是如何使用或者希望這個(gè)功能是怎樣的,這裡就不多贅述了。
所以1,2方案的主要區(qū)別就是用戶(hù)究竟是怎樣添加課程訓(xùn)練的,當(dāng)然在調(diào)研的過(guò)程中我們也需要找不同級(jí)別的用戶(hù)來(lái)使用這個(gè)功能,在這裡我可以想像到的是,新手用戶(hù)在使用這個(gè)功能很可能是只添加1-3個(gè)健身訓(xùn)練項(xiàng)目,原因就不多說(shuō)了。如果是資深用戶(hù),他們或許會(huì)添加更多的項(xiàng)目。1,2兩(liǎng)個(gè)方案區(qū)別就在於1方案更適用於添加少量健身項(xiàng)目的人。2方案則更偏向於添加大量不同健身項(xiàng)目的人。
而且,健身過(guò)的同學(xué)應(yīng)該知道,健身它並不是一個(gè)胡亂吸收胡亂練的過(guò)程,一塊肌肉,一個(gè)動(dòng)作做標(biāo)準(zhǔn)了才會(huì)有效,而且每個(gè)人的情況都不一樣,所以如果是稍微懂點(diǎn)健身的同學(xué)他或許並不會(huì)一次性添加很多的訓(xùn)練科目,而是一個(gè)科目練精。
所以,在keep的方案選擇時(shí),1或許更適合這個(gè)專(zhuān)業(yè)健身指導(dǎo )的平臺(tái),但是他為了滿(mǎn)足另一部分用戶(hù)的需求,他將列表在首頁(yè)都呈現(xiàn)出來(lái),優(yōu)點(diǎn)就是方便直觀(guān),缺點(diǎn)也很明顯就是刪除比較麻煩,左滑刪除也和頂部的tab有所衝突就沒有做,並且展開(kāi)後無(wú)法收回,影響底下內(nèi)容的顯示。
為了讓用戶(hù)更加仔細(xì)地選擇並且不那麼容易放棄(猜測(cè))所以需要一個(gè)更加詳細(xì)的頁(yè)面來(lái)指導(dǎo )告訴用戶(hù)一個(gè)健身課程的規(guī)範性,所以也將退出訓(xùn)練做的較隱蔽。
3.抖音
用過(guò)抖音的同學(xué)應(yīng)該都知道,以下簡(jiǎn)稱(chēng)dy。dy的用戶(hù)核心場(chǎng)景分為兩(liǎng)種,第一種是發(fā)視頻,另一個(gè)看視頻,那麼我們就來(lái)聊聊發(fā)視頻和看視頻下兩(liǎng)種用戶(hù)場(chǎng)景中的設(shè)計(jì)細(xì)節(jié)。
發(fā)視頻
發(fā)視頻也會(huì)繼續(xù)分兩(liǎng)個(gè)不同的場(chǎng)景,也就是拍和傳。所以針對(duì)兩(liǎng)種不同的場(chǎng)景,抖音的音樂上傳也是有兩(liǎng)條不同的路徑。如果你是拍,並且需要有背景音樂的節(jié)奏的話(huà),你在拍之前就需要選擇好音樂,比如拍的首頁(yè)這樣
另外,如果你是拍好了再匹配音樂也可以點(diǎn)擊右上角編輯配合你節(jié)奏的音樂。但不管你是拍還是傳,最後還是會(huì)回到以下這個(gè)頁(yè)面中,用來(lái)幫助用戶(hù)最後發(fā)布編輯。但是你會(huì)發(fā)現(xiàn)為什麼在最後編輯的時(shí)候還會(huì)出現(xiàn)選擇音樂的功能呢呢?
有兩(liǎng)個(gè)原因,第一個(gè)是用戶(hù)想臨時(shí)更換(huàn)音樂了,如果返回再去編輯就比較繁瑣了。
第二個(gè)原因是思考一下用戶(hù)在什麼時(shí)候需要添加音樂,一個(gè)是當(dāng)我在看的時(shí)候或者想到某一個(gè)音樂的時(shí)候來(lái)了靈感,所以會(huì)先選擇音樂再拍,另一個(gè)是我只是想拍一段視頻,在編輯的時(shí)候我再配上合適的音樂。
所以不管是哪一個(gè)場(chǎng)景,在最後的編輯時(shí)都要給用戶(hù)選擇音樂的功能。
看視頻
在看視頻的場(chǎng)景中也會(huì)有不同的用戶(hù)場(chǎng)景,比如看作者,看音樂,看更多視頻。不知道大家在玩抖音的過(guò)程中有沒有碰到一個(gè)問(wèn)題,就是有些作者會(huì)發(fā)一些電影相關(guān)的小視頻,也會(huì)分為好幾段來(lái)發(fā),當(dāng)你看到其中一段的時(shí)候想繼續(xù)到主頁(yè)看其他的連貫視頻發(fā)現(xiàn)找起來(lái)很困難。
這個(gè)用戶(hù)場(chǎng)景真實(shí)存在也是用戶(hù)一直苦惱的地方,但是為什麼抖音始終沒有做視頻定位這樣的一個(gè)功能呢?以下是我個(gè)人的猜測(cè):
第一,視頻定位可能只是很小一部分用戶(hù)的需求,即便不做對(duì)於用戶(hù)也並影響。
第二,對(duì)於業(yè)務(wù)來(lái)說(shuō)可能並沒有什麼價(jià)值,反而有可能會(huì)降低用戶(hù)的使用時(shí)間。其實(shí)這個(gè)跟電商的客單價(jià)是異曲同工的地方,你可以試想一下,在沒做定位前用戶(hù)如果想看上下文的話(huà),他到作者主頁(yè)就會(huì)呈現(xiàn)一個(gè)尋找、瀏覽、逛的場(chǎng)景,並且可能會(huì)繼續(xù)沉浸在其主頁(yè)中,而一旦做了定位,那很有可能當(dāng)用戶(hù)看完當(dāng)前的幾個(gè)故事之後就繼續(xù)返回看其他的視頻了。這樣就導(dǎo )致了用戶(hù)之間的關(guān)係減弱,目的性太強(qiáng)。
第三,其實(shí)抖音的閉環(huán)沉浸場(chǎng)景是非常強(qiáng)的,你會(huì)發(fā)現(xiàn)他主要由3個(gè)場(chǎng)景組成第一個(gè)是首頁(yè)的feed視頻流,第二個(gè)是個(gè)人主頁(yè)視頻流,第三個(gè)是同音樂下的視頻流,主頁(yè)和音樂這兩(liǎng)個(gè)場(chǎng)景也會(huì)更緊密,所以當(dāng)用戶(hù)在瀏覽的過(guò)程中,打標(biāo)籤可能一開(kāi)始有用,一旦用戶(hù)探索的過(guò)於深入和龐大之後這個(gè)標(biāo)籤或許也已經(jīng)被用戶(hù)所遺忘了。
4.蝦米音樂/網(wǎng)易雲音樂
這次就選擇者兩(liǎng)個(gè)產(chǎn)品來(lái)分析一下在單曲詳情這個(gè)頁(yè)面中的場(chǎng)景分析,可惜的是剛在碼字的時(shí)候把蝦米給更新了,導(dǎo )致有一個(gè)之前版本想吐槽的頁(yè)面不見(jiàn)了,大致就是在老版本中,單曲詳情底部是用戶(hù)的評(píng)論,然後頁(yè)面上滑之後歌曲會(huì)縮成一個(gè)便捷操作欄,可以提供播放,切換(huàn),循環(huán)等功能,然後置頂以便用戶(hù)繼續(xù)查看評(píng)論。。
蝦米音樂大家也可以去體驗(yàn)一下新版,手勢(shì)的運(yùn)用很多:右滑:歌曲信息;左滑:評(píng)論;下滑:退出到首頁(yè);上滑:查看歌單列表。
然後再來(lái)對(duì)比一下網(wǎng)易雲音樂,雲音樂的左右滑動(dòng)是切換(huàn)歌曲,其實(shí)它倆都有避免功能鍵鈕的設(shè)計(jì),但是為了培養(yǎng)用戶(hù)習(xí)慣和差異化,就有了不同的交互方式和功能結(jié)構(gòu )。所以設(shè)計(jì)師們,在做改版或者競(jìng)品分析的時(shí)候,一定要給自己的產(chǎn)品有一點(diǎn)個(gè)性化哦!
這樣對(duì)比下來(lái),雲音樂的手勢(shì)交互會(huì)更加符合用戶(hù)的預期和心智模型,畢竟左右切換(huàn)我們用的很多了,但是左右滑動(dòng)頁(yè)面進(jìn)行隱藏頁(yè)面的跳轉(zhuǎn)就不是那麼能夠預期到了,只有多用用戶(hù)才會(huì)有較強(qiáng)的記憶。
然後玩著玩著又發(fā)現(xiàn)一些比較有意思的地方,我們先看下圖,有沒有發(fā)現(xiàn)在網(wǎng)易雲音樂的評(píng)論頁(yè)面會(huì)出現(xiàn)兩(liǎng)個(gè)能夠進(jìn)入播放頁(yè)面的入口,右上角跳動(dòng)的圖標(biāo)以及歌曲的方形圖片模塊。這是為什麼呢?
其實(shí)是因為當(dāng)用戶(hù)可能看完評(píng)論的時(shí)候已經(jīng)自然播放了許多歌曲,那麼如果用戶(hù)還想繼續(xù)聽這首歌怎麼辦呢,如果點(diǎn)擊右上角的圖標(biāo)只會(huì)顯示當(dāng)前正在播放的歌曲,只有點(diǎn)擊該歌曲的方形圖片時(shí),底部才會(huì)彈出播放該歌曲的功能。
以上就是
UI設(shè)計(jì)培訓(xùn)老師結(jié)合當(dāng)下
UI設(shè)計(jì)流行趨勢(shì)給大家總結(jié)的“怎樣才能根據(jù)用戶(hù)場(chǎng)景做設(shè)計(jì)?”更多的UI知識請關(guān)注我們或在線(xiàn )諮詢。我們都將一一解答。