01、廣告植入

關(guān)鍵詞

#運(yùn)營  #廣告

產(chǎn)品體驗

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

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

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

設(shè)計思考

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

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

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

02、短視頻互動功能

關(guān)鍵詞

#交互  #點贊  #評論

產(chǎn)品體驗

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

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

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

設(shè)計思考

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

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

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

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

關(guān)鍵詞

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

產(chǎn)品體驗

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

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

設(shè)計思考

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

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

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

關(guān)鍵詞

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

產(chǎn)品體驗

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

愛奇藝：

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

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

3、視頻上方有觀看熱度的面積圖，感覺有點被打擾，對用戶來說重要性不是很高。

設(shè)計思考

嗶哩嗶哩：

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

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

愛奇藝：

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

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

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

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

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

關(guān)鍵詞

#軌跡 #地圖 #預(yù)估時間 #定位 #場景

產(chǎn)品體驗

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

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

設(shè)計思考

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

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

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

06、圖像拍照識別

關(guān)鍵詞

#拍照，智能識別

產(chǎn)品體驗

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

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

設(shè)計思考

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

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

07、文檔信息編輯

關(guān)鍵詞

#編輯  #彈窗

產(chǎn)品體驗

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

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

設(shè)計思考

石墨：追求極簡體驗，沉浸式設(shè)計。

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

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

關(guān)鍵詞

#搜索提示語

產(chǎn)品體驗

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

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

設(shè)計思考

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

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

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

關(guān)鍵詞

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

產(chǎn)品體驗

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

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

設(shè)計思考

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

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

10、下拉加載

關(guān)鍵詞

#緩沖  #加載

產(chǎn)品體驗

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

安居客：頁面拖動下拉的時候，在頭部有個樓盤建筑2.5d插畫，感覺有另一個空間的感覺。

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

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

設(shè)計思考

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

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

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

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

11、配圖多張排版

關(guān)鍵詞

#配圖多張排版  #圖片

產(chǎn)品體驗

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

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

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

設(shè)計思考  

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

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

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

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

關(guān)鍵詞

#用戶權(quán)限

產(chǎn)品體驗

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

設(shè)計思考

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

13、評論頁留言列表

關(guān)鍵詞

#評論列表

產(chǎn)品體驗

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

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

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

設(shè)計思考

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

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

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

14、視頻類個人中心頁面

關(guān)鍵詞

#我的個人中心

 

產(chǎn)品體驗

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

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

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

設(shè)計思考

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

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

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

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

關(guān)鍵詞

#會員服務(wù)，運(yùn)營

產(chǎn)品體驗

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

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

2、視頻正下方有個大的提示開通會員入口

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

騰訊：會根據(jù)活動給予免費(fèi)體驗會員的服務(wù)。

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

設(shè)計思考

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

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

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

轉(zhuǎn)自：站酷

作者：  大峰_Design 

藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)