<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          大廠案例|如何設(shè)計(jì)視頻產(chǎn)品,構(gòu)建一個(gè)優(yōu)質(zhì)的內(nèi)容體驗(yàn)平臺(tái)

          共 2797字,需瀏覽 6分鐘

           ·

          2021-10-29 02:33


          點(diǎn)擊"三分設(shè)"關(guān)注,回復(fù)"社群"加入我們

          歡迎來(lái)到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

          三分設(shè)|連接知識(shí),幫助全球 1 億設(shè)計(jì)師成長(zhǎng)

          轉(zhuǎn)自淘寶設(shè)計(jì)

          編輯:章欣怡

          共 2469 字 19 圖  預(yù)計(jì)閱讀 7 分鐘


          隨著短視頻的普及,越來(lái)越多的商家開(kāi)始嘗試通過(guò)短視頻來(lái)介紹自己的商品;商品內(nèi)容的主流表達(dá)模式也逐漸從圖片加文字向短視頻轉(zhuǎn)變。

          ▲ 主流的視頻應(yīng)用

          優(yōu)質(zhì)的導(dǎo)購(gòu)平臺(tái)也應(yīng)該是一個(gè)優(yōu)質(zhì)的內(nèi)容體驗(yàn)平臺(tái)。好的視頻產(chǎn)品應(yīng)該具備哪些特點(diǎn)?今天我們結(jié)合 8 款主流的視頻應(yīng)用,來(lái)看看視頻產(chǎn)品是如何設(shè)計(jì)的。


          01. 容器設(shè)計(jì):
          兼顧平臺(tái)特性與內(nèi)容

          不同的內(nèi)容平臺(tái)有不同的特性,有的注重分發(fā)效率,有的強(qiáng)調(diào)沉浸感的體驗(yàn)...好的視頻容器能夠在兼顧平臺(tái)特性的同時(shí),把視頻內(nèi)容更好展示出來(lái)。

          全屏視頻:一鍵滑動(dòng)完成切換
          類似抖音的體驗(yàn)?zāi)J饺缃褚呀?jīng)被廣泛接受。依靠產(chǎn)品背后海量的視頻內(nèi)容和個(gè)性化算法,沉浸式的視頻容器設(shè)計(jì)能夠 最大限度的展現(xiàn)內(nèi)容個(gè)性,并聚焦用戶當(dāng)前注意力;統(tǒng)一的切換手勢(shì)大大降低了用戶的操作成本,刷視頻根本停不下來(lái)~

          ▲ 上下(或左右)滑動(dòng)直接切換

          視頻流:基于位置錨點(diǎn)的自動(dòng)播放
          不同于全屏切換打造的沉浸感,視頻流更注重效率和兼容性。該容器樣式能夠 很好的兼容不同尺寸比例的視頻,同時(shí)評(píng)論、分享等相關(guān)內(nèi)容也不會(huì)對(duì)視頻產(chǎn)生遮擋;雖然同一屏有多視頻透出,但視頻只有滑到固定位置才會(huì)自動(dòng)播放。另外,以橫版視頻為主的今日頭條,還增加了點(diǎn)擊切換播放模式的功能。

          ▲ 視頻居中或置頂時(shí)自動(dòng)播放

          雙列視頻流:滑動(dòng)篩選+點(diǎn)擊播放
          雙列 FEEDS 流的容器設(shè)計(jì) 弱化了視頻的內(nèi)容個(gè)性,轉(zhuǎn)而更加注重發(fā)現(xiàn)效率。而內(nèi)容封面、透出順序和通欄等形式的設(shè)計(jì)很大程度影響了內(nèi)容的吸引度,讓用戶的視頻發(fā)現(xiàn)更有層次。

          ▲ 滑動(dòng)切換&點(diǎn)擊播放

          更多樣的設(shè)計(jì)樣式
          除了主流的三種樣式,視頻的容器設(shè)計(jì)也結(jié)合平臺(tái)的特性作出更多樣的變化。如 Snapchat 的 map 功能,將視頻的發(fā)現(xiàn)與全球地圖相結(jié)合,幫助用戶 基于地理位置發(fā)現(xiàn)全球有趣視頻;

          Instagram 的發(fā)現(xiàn)則是將有圖片和視頻進(jìn)行類似相冊(cè)式的混排,去除所有信息以展現(xiàn)內(nèi)容本身,為平衡平臺(tái)效率和沉浸感體驗(yàn)提供了新的解法。

          ▲ 基于地圖、相冊(cè)的視頻容器設(shè)計(jì)


          02. 工具設(shè)計(jì):
          關(guān)注功能的易用性

          視頻工具設(shè)計(jì)的核心就是幫助用戶輕松達(dá)成操作目標(biāo),同時(shí)也要關(guān)注工具組建是否會(huì)對(duì)瀏覽體驗(yàn)產(chǎn)生打擾,即 “易用性也許不可見(jiàn),但卻不可缺席”。

          聲音工具:輕量化的模式切換
          非全屏播放的狀態(tài)下,音量的調(diào)節(jié)不再必要,用戶更加關(guān)注的是音量的開(kāi)閉狀態(tài)。以 Instagram 為例,聲音組建在視頻區(qū)右下角,點(diǎn)擊視頻區(qū)可以便捷切換聲音的開(kāi)閉狀態(tài)。用戶在切換視頻或頁(yè)面后,新視頻仍會(huì)保持狀態(tài)記憶。

          ▲ Instagram的音量操作

          進(jìn)度條:讓必要元素凸顯
          進(jìn)度操作除底部的進(jìn)度欄外,最重要的便是 「時(shí)間刻度」 的展現(xiàn),以幫助用戶實(shí)現(xiàn)更加精確拖拽操作。

          為了將該元素表達(dá)得更加清晰,bilibili 的播放器采用了文字背景遮罩的方式來(lái)減緩背景變化的影響。

          ▲ 文字背景遮罩

          而今日頭條則選擇了全視頻遮罩的方式,讓變化更加緩和,同時(shí)也能實(shí)現(xiàn)時(shí)間刻度隨著拖拽方向輕微移動(dòng),給予用戶更好的反饋。

          ▲全視頻遮罩下,時(shí)間刻度會(huì)隨拖拽方向輕微移動(dòng)

          全屏狀態(tài)下的進(jìn)度條反饋則更加豐富。如今日頭條在全屏播放狀態(tài)下,除了時(shí)間刻度還增加了預(yù)覽功能,幫助用戶拖拽的同時(shí)預(yù)覽進(jìn)度畫(huà)面,以更直觀的確認(rèn)目標(biāo)位置。

          ▲ 隨進(jìn)度變化的預(yù)覽畫(huà)面

          而抖音的進(jìn)度反饋?zhàn)龅母蛹?xì)致,將時(shí)間刻度和預(yù)覽功能解耦后居中放置,避免了弱網(wǎng)環(huán)境下預(yù)覽圖加載不出的問(wèn)題,也 緩解了畫(huà)面移動(dòng)造成的視覺(jué)疲勞。

          ▲ 時(shí)間刻度出現(xiàn),隨后預(yù)覽畫(huà)面居中出現(xiàn)

          倍速播放:功能的降噪與提效
          在視頻窗的狀態(tài)下,有些功能非必要存在,但缺失以后又會(huì)有損體驗(yàn)。微信公眾號(hào)中的視頻預(yù)覽剔除了多倍速的點(diǎn)選操作,轉(zhuǎn)而通過(guò)長(zhǎng)按手勢(shì)來(lái)喚起統(tǒng)一的倍速功能,降低了打擾的同時(shí)又很好的提升了操作效率。

          ▲ 微信公眾號(hào)視頻-長(zhǎng)按喚起倍速


          03. 流轉(zhuǎn)設(shè)計(jì):
          保持體驗(yàn)的延續(xù)性

          用戶在瀏覽視頻時(shí)很討厭被動(dòng)打斷,但又希望在瀏覽視頻時(shí)能夠獲取更多信息,于是視頻產(chǎn)品中便產(chǎn)生了很多有意思的流轉(zhuǎn)設(shè)計(jì)。

          內(nèi)容流轉(zhuǎn):不打擾當(dāng)前體驗(yàn)
          相關(guān)內(nèi)容推薦需要保持主視頻的體驗(yàn)不被打擾,同時(shí)又能夠表達(dá)出新內(nèi)容的特點(diǎn)與吸引力。最典型的方式便是類似于 b 站的列表類型,主視頻播放的同時(shí) 用戶可以輕松瀏覽新內(nèi)容,并實(shí)時(shí)完成切換。

          ▲ b 站的列表內(nèi)容

          而對(duì)于豎版視頻,推薦區(qū)一般是被隱藏起來(lái)的,快手采用了視頻等比例伸縮的模式,方便用戶更加自由的定位播放區(qū)和推薦區(qū)的比例。

          ▲ 等比伸縮的視頻區(qū)

          除了簡(jiǎn)介、評(píng)論等內(nèi)容推薦,相關(guān)視頻推薦是延續(xù)用戶興趣的重要手段,通過(guò)滑動(dòng)手勢(shì)喚起視頻列表的方式則是相對(duì)巧妙的解決方案。

          ▲ 滑動(dòng)操作視頻列表

          懸浮播放:更自由的切換
          當(dāng)用戶需要進(jìn)行其他操作,但又希望保持視頻播放時(shí),懸浮播放便是一個(gè)很好用的工具。微信視頻號(hào)開(kāi)發(fā)了自己的懸浮樣式,將最小化的窗口貼邊處理以減少打擾,保留清晰的叉號(hào)為隨時(shí)關(guān)閉視頻提供了便利。

          ▲ 微信的懸浮播放組建

          仔細(xì)觀察我們會(huì)發(fā)現(xiàn),視頻產(chǎn)品對(duì)于用戶體驗(yàn)的打磨十分細(xì)致,追隨著用戶行為偏好,也用巧妙的設(shè)計(jì)和亮點(diǎn)的功能引領(lǐng)著用戶的習(xí)慣。小編也將繼續(xù)收集,帶大家發(fā)現(xiàn)更多的好設(shè)計(jì)。

          —  The end  —

          ?? 原創(chuàng)文章精選??
          告別加班!使用設(shè)計(jì)系統(tǒng)方法更快地構(gòu)建產(chǎn)品
          如何評(píng)估設(shè)計(jì)質(zhì)量,提升設(shè)計(jì)技能
          你常常忽略的 7 個(gè)具有破壞性的體驗(yàn)鴻溝
          一篇文章告訴你服務(wù)設(shè)計(jì)到底能做什么?
          看 Apple CarPlay 如何提升駕駛安全和駕駛體驗(yàn)
          游戲新手指導(dǎo)怎么做?一起看看《對(duì)馬島之魂》如何打造初次對(duì)抗體驗(yàn)
          制定 “小目標(biāo)”,了解產(chǎn)品管理中的結(jié)構(gòu)化思維
          35+ 的 Windows 系統(tǒng)到底有什么了不起?細(xì)數(shù)系統(tǒng)界面設(shè)計(jì)的演變
          導(dǎo)師與學(xué)員的高效交流 APP 設(shè)計(jì) —— Lightship

          ?? 我們一起聊設(shè)計(jì) ???♂?

          高質(zhì)量,學(xué)設(shè)計(jì)行交流微信群

          期待與更多優(yōu)秀用戶體驗(yàn)設(shè)計(jì)師一起成長(zhǎng)

          PS:歡迎大家關(guān)注三分設(shè),每天早上9點(diǎn),準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí),定期大咖老師直播分享,零距離連麥,答疑解惑。 添加小小蟲(chóng)微信號(hào)【 Lil_Bug 】,備注【 三分設(shè) 】加入!(只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲) 

          瀏覽 68
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  亚洲日韩第一页 | 2019天天干 | 国产欧美欧美金五星的户外操逼。 | 四虎无码人妻三区 | 国产高清porn |