01、廣告植入

關(guān)鍵詞

#運(yùn)營(yíng)  #廣告

產(chǎn)品體驗(yàn)

微信：刷朋友圈的時(shí)候，無(wú)形中就刷到了廣告，以朋友圈的圖文展示。也可以進(jìn)行點(diǎn)贊，留言互動(dòng)。

微博：在關(guān)注列表中也會(huì)有一些廣告推送。用戶可以自己關(guān)閉。

愛奇藝：打開視頻觀看前，會(huì)有一小段廣告時(shí)間播放，如果沒有購(gòu)買會(huì)員是需要強(qiáng)制觀看完廣告才能看視頻正片。

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

微信：隱形植入廣告，以“朋友”的身份跟你安利一個(gè)物品，角色扮演，用另外一種方式介紹產(chǎn)品。

微博：無(wú)形中插播一個(gè)廣告推文，廣告的標(biāo)簽跟關(guān)閉的按鈕做的小，不明顯，增減關(guān)閉難度。

愛奇藝：提供付費(fèi)權(quán)利，可關(guān)閉廣告。

02、短視頻互動(dòng)功能

關(guān)鍵詞

#交互  #點(diǎn)贊  #評(píng)論

產(chǎn)品體驗(yàn)

微博：全屏短視頻體驗(yàn)。關(guān)注，點(diǎn)贊等功能圖標(biāo)懸浮在右側(cè)，方便用戶點(diǎn)擊，交互都關(guān)聯(lián)性也強(qiáng)。

美圖：右側(cè)一排操作按鈕，分享按鈕卻在頭部，距離有點(diǎn)遠(yuǎn)，很難被注意到。圖標(biāo)采用半透明疊加更有設(shè)計(jì)感。跟美圖這個(gè)產(chǎn)品很契合。

QQ微視：上中下的布局，中間是視頻主區(qū)域。關(guān)注按鈕在頂部，評(píng)論交互都在底部，比較傳統(tǒng)的布局體驗(yàn)。

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

微博：視頻內(nèi)容全屏展示，沉浸式用戶觀看體驗(yàn)。把一些按鈕設(shè)計(jì)的離用戶可觸碰區(qū)域近一點(diǎn)，在用戶手指操作的熱點(diǎn)區(qū)域，加大他們的點(diǎn)擊欲望。

美圖：視頻內(nèi)容全屏展示，關(guān)注直接用文字加色塊高亮顯示，直接刺激用戶，引導(dǎo)他點(diǎn)擊。底部設(shè)置美化圖片產(chǎn)品本身設(shè)置了快捷入口。有點(diǎn)弱化分享操作。

QQ微視：視頻上方?jīng)]有其他干擾元素，采用比較中規(guī)中矩的布局。

03、關(guān)注用戶按鈕

關(guān)鍵詞

#加關(guān)注 #彈窗

產(chǎn)品體驗(yàn)

美圖：首頁(yè)的短視頻，點(diǎn)擊用戶進(jìn)去可以看到他的創(chuàng)作，當(dāng)頁(yè)面下拉的時(shí)候，關(guān)注按鈕會(huì)一直停留在頁(yè)面頂部，高亮顯示。

小紅書：點(diǎn)擊個(gè)人用戶進(jìn)去看筆記，下拉過(guò)程中“加關(guān)注”會(huì)一直在右上角顯示，繼續(xù)往下拉，底部會(huì)出現(xiàn)一個(gè)彈窗，提醒你可以關(guān)注一下，二次引導(dǎo)。

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

美圖：主要是一個(gè)提高修圖的工具，并提供給用戶去分享美圖的平臺(tái)，沒有做過(guò)多的引導(dǎo)用戶操作。

小紅書：主打個(gè)人社交平臺(tái)，流量，關(guān)注度是主要的數(shù)據(jù)。發(fā)作品的目的性較強(qiáng)，所以給用戶做了二次引導(dǎo)關(guān)注。幫助創(chuàng)作者博得更多的關(guān)注度。

04、視頻進(jìn)度條

關(guān)鍵詞

#進(jìn)度  #視頻  #品牌宣傳

產(chǎn)品體驗(yàn)

嗶哩嗶哩：進(jìn)度條直接了當(dāng)，當(dāng)前位置的標(biāo)記會(huì)結(jié)合視頻的宣傳屬性來(lái)用一些特殊圖標(biāo)來(lái)加深用戶觀感。

愛奇藝：

1、視頻有標(biāo)記記憶點(diǎn)，幫助用戶快速定位到想要了解的內(nèi)容；

2、當(dāng)前位置采用該視頻品牌logo；

3、視頻上方有觀看熱度的面積圖，感覺有點(diǎn)被打擾，對(duì)用戶來(lái)說(shuō)重要性不是很高。

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

嗶哩嗶哩：

1、視頻進(jìn)度條顏色是品牌顏色；

2、當(dāng)前位置不再是單一的基本圖形，會(huì)用一些有趣的圖形替換，同時(shí)視頻屬性。

愛奇藝：

1、進(jìn)度條顏色不在是單一采用品牌色，可以個(gè)性化不同場(chǎng)景搭配使用；

2、當(dāng)前位置的狀態(tài)用視頻的品牌植入logo，起到二次宣傳的作用；

3、效果視頻記憶點(diǎn)，根據(jù)后臺(tái)剪輯標(biāo)記用戶可能感興趣，幫助用戶快速定位；

4、進(jìn)度條上方有觀看熱度的曲線。感覺這個(gè)設(shè)計(jì)有點(diǎn)多余，手機(jī)觀看盡量減少視覺干擾。

05、軌跡與預(yù)計(jì)到達(dá)時(shí)間結(jié)合

關(guān)鍵詞

#軌跡 #地圖 #預(yù)估時(shí)間 #定位 #場(chǎng)景

產(chǎn)品體驗(yàn)

杭州公交：等公交等時(shí)候，標(biāo)記你所在位置的站點(diǎn)，通過(guò)圖標(biāo)大小、顏色標(biāo)記其他公交車到站情況，很直觀?？梢越o自己等車時(shí)間做心里準(zhǔn)備。

淘寶：物流運(yùn)行軌跡在地圖上顯示，結(jié)合發(fā)出點(diǎn)到簽收地，預(yù)計(jì)的時(shí)間跟簽收狀態(tài)。

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

場(chǎng)景化思維設(shè)計(jì)，讓用戶身臨其境感受。

杭州公交：聚焦與單條公交線路線，去除復(fù)雜的地圖背景，直接用圖標(biāo)標(biāo)記與你所在站點(diǎn)的位置關(guān)系，同時(shí)上方卡片會(huì)顯示即將到找的三個(gè)公交車預(yù)計(jì)時(shí)間，給用戶準(zhǔn)備候車預(yù)留足夠的時(shí)間準(zhǔn)備。

淘寶：物流在全國(guó)范圍內(nèi)跑，使用軌跡結(jié)合地圖會(huì)更加直觀。能看到當(dāng)前所在的位置，預(yù)計(jì)還有多少時(shí)間送達(dá)等等信息用場(chǎng)景來(lái)表達(dá)。

06、圖像拍照識(shí)別

關(guān)鍵詞

#拍照，智能識(shí)別

產(chǎn)品體驗(yàn)

百度：拍照識(shí)別的時(shí)候，全屏且屏幕中會(huì)標(biāo)記小白點(diǎn)高光，一閃閃，bringbring 。

有道云：拍照上傳識(shí)別的時(shí)候，會(huì)出現(xiàn)錨點(diǎn)可以拖拽自己想選擇的圖片區(qū)域，直接裁剪。

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

百度：識(shí)別照片環(huán)境的時(shí)候，有小光斑互動(dòng)，帶有智能科技感，讓體驗(yàn)更加有趣。

有道云：拍照過(guò)程加入裁剪功能，對(duì)圖片預(yù)處理，提高筆記效率。

07、文檔信息編輯

關(guān)鍵詞

#編輯  #彈窗

產(chǎn)品體驗(yàn)

石墨：編輯本條筆記時(shí)，底部彈窗，一行顯示一個(gè)操作，“刪除”標(biāo)紅。

有道云筆記：有11個(gè)操作動(dòng)作，采用分類的方式布局，配合圖標(biāo)一目了然。

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

石墨：追求極簡(jiǎn)體驗(yàn)，沉浸式設(shè)計(jì)。

有道云筆記：功能較多，底部彈窗最好不要超過(guò)屏幕2/3，影響體驗(yàn)，結(jié)合圖標(biāo)更加直觀。

08、搜索框內(nèi)提示文案

關(guān)鍵詞

#搜索提示語(yǔ)

產(chǎn)品體驗(yàn)

微博：不知道看什么時(shí)，會(huì)提示你看別人都在搜什么內(nèi)容，引起你的興趣。搜索下方也有熱門搜索，也是可以買的“熱搜”廣告位，增加曝光率。

淘寶：根據(jù)你之前搜過(guò)的產(chǎn)品，程序自動(dòng)給你推送一些對(duì)應(yīng)產(chǎn)品的關(guān)鍵詞搜索。

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

微博：熱搜的一些運(yùn)營(yíng)，業(yè)務(wù)層面考慮。

淘寶：電商類，記錄你的搜索喜好，給你推送符合你的產(chǎn)品，千人千面。

09、金剛區(qū)下面的公告欄板塊

關(guān)鍵詞

#公告  #內(nèi)容信息

產(chǎn)品體驗(yàn)

喜馬拉雅：電臺(tái)模塊，可以私人定制自己感興趣的電臺(tái)。

支付寶：一些公告，消費(fèi)通知，結(jié)合IP形象，觸角還會(huì)動(dòng)兩下，感覺是在跟你互動(dòng)對(duì)話。

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

喜馬拉雅：本身是個(gè)聲音類產(chǎn)品，用電臺(tái)的形式訂閱自己喜歡的內(nèi)容推送。

支付寶：用支付寶自己的螞蟻iP形象，加深品牌影響，同時(shí)也起到提示作用。

10、下拉加載

關(guān)鍵詞

#緩沖  #加載

產(chǎn)品體驗(yàn)

美團(tuán)外賣：下拉加載時(shí)，用美團(tuán)袋鼠IP在跑的小動(dòng)效來(lái)緩解用戶焦慮。

安居客：頁(yè)面拖動(dòng)下拉的時(shí)候，在頭部有個(gè)樓盤建筑2.5d插畫，感覺有另一個(gè)空間的感覺。

淘寶：淘寶詳情下拉對(duì)時(shí)候，有一個(gè)歷史足跡，再你逛了很多商品之后，反復(fù)對(duì)比，想回去之前的店再逛逛，同時(shí)也減少了用戶頁(yè)面跳出率。

微信讀書：頁(yè)面下拉的時(shí)候，可以添加書簽，對(duì)當(dāng)前頁(yè)做記錄，下次可以快速找到改頁(yè)面內(nèi)容。

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

美團(tuán)外賣：植入IP形象做動(dòng)效，加深品牌印象。

安居客：創(chuàng)造二次空間感，讓加載的過(guò)程中，沒那么焦慮，反而讓用戶覺得驚喜。

淘寶：模擬用戶使用場(chǎng)景，在購(gòu)買商品過(guò)程中會(huì)對(duì)產(chǎn)品反復(fù)對(duì)比，加入一個(gè)歷史足跡，同時(shí)提高頁(yè)面轉(zhuǎn)化率。

微信讀書：下拉的過(guò)程中給用戶制造驚喜。

11、配圖多張排版

關(guān)鍵詞

#配圖多張排版  #圖片

產(chǎn)品體驗(yàn)

淘寶：有視頻，又有多張圖片的情況下，視頻權(quán)重比圖片大，左一右二展示，其余收起來(lái)，點(diǎn)擊查看全部。

拼多多：圖片跟視頻同時(shí)存在，平鋪展示，視頻默認(rèn)放第一個(gè)位置，一行三個(gè)，大小統(tǒng)一。

今日頭條：頭條文章內(nèi)有多張圖，列表流只取三張顯示。

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

淘寶：商品評(píng)論較多，控制每個(gè)評(píng)論列表高度統(tǒng)一性，一屏用戶可見更多買家秀，同時(shí)刺激點(diǎn)開視頻的行為。

拼多多：弱化視頻跟照片的比重。

今日頭條：圖片更直觀表達(dá)，也是用戶第一時(shí)間注意的信息。首頁(yè)列表需要能貼合文章內(nèi)容，刺激用戶點(diǎn)擊，可后臺(tái)手動(dòng)配置列表展示配圖。

12、優(yōu)酷視頻青少年權(quán)限

關(guān)鍵詞

#用戶權(quán)限

產(chǎn)品體驗(yàn)

個(gè)人中心頭像上方有個(gè)“成長(zhǎng)守護(hù)：可以設(shè)置青少年模式，主要是為家長(zhǎng)用戶對(duì)小孩上網(wǎng)觀看視頻的一個(gè)管理。

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

概念包裝：現(xiàn)在網(wǎng)絡(luò)視頻內(nèi)容層次不齊，不同年齡層都能接觸各類信息，鑒于對(duì)青少年的保護(hù)，對(duì)視頻推送權(quán)限設(shè)置，用“成長(zhǎng)守護(hù)”包裝權(quán)限設(shè)置，讓產(chǎn)品更有溫度。

13、評(píng)論頁(yè)留言列表

關(guān)鍵詞

#評(píng)論列表

產(chǎn)品體驗(yàn)

知乎：評(píng)論列表整屏彈窗，用戶回復(fù)用戶，名稱之間用一個(gè)小箭頭指向，很有特點(diǎn)。作者身份跟在用戶昵稱后面。

愛奇藝：留言回復(fù)沒有展示用戶頭像，只有昵稱。對(duì)同一留言回復(fù)用色塊區(qū)分。

小紅書：評(píng)論列表2/3彈窗，同一留言內(nèi)容最多顯示一條，多余的折疊。

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

知乎：用戶名稱比內(nèi)容層級(jí)較高，并結(jié)合頭像使用，用小尖頭圖標(biāo)直觀表達(dá)回復(fù)對(duì)象的動(dòng)作。

愛奇藝：視頻為主，評(píng)論為輔；對(duì)同一留言評(píng)論用灰色底，使用親密性原則，對(duì)其他評(píng)論人的頭像隱藏，注重評(píng)論內(nèi)容。

小紅書：從下網(wǎng)上的彈窗形式，一屏展示內(nèi)容區(qū)域較少，同一留言多條評(píng)論就收起展示。

14、視頻類個(gè)人中心頁(yè)面

關(guān)鍵詞

#我的個(gè)人中心

 

產(chǎn)品體驗(yàn)

愛奇藝：開通會(huì)員提醒醒目，右滑展示不同類別的會(huì)員。

騰訊：開通會(huì)員提醒明顯，下面是觀看歷史，常用功能分類。

優(yōu)酷：頂部有關(guān)注、粉絲、作品等數(shù)字信息展示，其次是開通會(huì)員提醒。

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

愛奇藝：視頻平臺(tái)合作，會(huì)員權(quán)限開通付費(fèi)為主要業(yè)務(wù)。

騰訊：以平臺(tái)為主，個(gè)人創(chuàng)作視頻轉(zhuǎn)型中。常用功能歸類，節(jié)省首屏利用率。

優(yōu)酷：注重社交屬性，鼓勵(lì)個(gè)人創(chuàng)作視頻上傳。

15、視頻類引導(dǎo)開通會(huì)員

關(guān)鍵詞

#會(huì)員服務(wù)，運(yùn)營(yíng)

產(chǎn)品體驗(yàn)

視頻頁(yè)面都設(shè)置了兩個(gè)開通會(huì)員入口

1、打開視頻默認(rèn)播放廣告，視頻右上角開通會(huì)員可關(guān)閉廣告；

2、視頻正下方有個(gè)大的提示開通會(huì)員入口

愛奇藝：結(jié)合用戶心理，用文字優(yōu)惠刺激用戶開通。

騰訊：會(huì)根據(jù)活動(dòng)給予免費(fèi)體驗(yàn)會(huì)員的服務(wù)。

優(yōu)酷：直接把會(huì)員所享受的服務(wù)內(nèi)容展示出來(lái)。

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

愛奇藝：沒有多余的描述，直接提示新客優(yōu)惠。

騰訊：正下方的開通會(huì)員文案會(huì)根據(jù)不同的視頻運(yùn)營(yíng)有不用的文案，比如超前點(diǎn)播，活動(dòng)免費(fèi)領(lǐng)取等等。

優(yōu)酷：首屏占的比重大，無(wú)論視頻上方關(guān)閉廣告 還是正下方，按鈕都設(shè)計(jì)的很大。

轉(zhuǎn)自：站酷

作者：  大峰_Design 

藍(lán)藍(lán)設(shè)計(jì)( www.sdgs6788.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ù)