當(dāng)商業(yè)目標(biāo)和設(shè)計(jì)碰撞在一起之后，商業(yè)模式使設(shè)計(jì)的目標(biāo)更明確，而設(shè)計(jì)能為商業(yè)模式帶來(lái)更好的體驗(yàn)。

為什么說(shuō)現(xiàn)在是一個(gè)內(nèi)容為王的時(shí)代？豐富的內(nèi)容為App帶來(lái)了流量，優(yōu)秀的內(nèi)容為App建立起穩(wěn)定活躍的用戶群。當(dāng)建立起穩(wěn)定健康的用戶生態(tài)之后，大大加強(qiáng)了App的生存和變現(xiàn)的能力，追逐內(nèi)容就是一個(gè)純粹的商業(yè)行為。

當(dāng)內(nèi)容成為商業(yè)利益的驅(qū)動(dòng)時(shí)，視覺(jué)設(shè)計(jì)者就要考慮如何突出內(nèi)容的展示，以至于當(dāng)下主流的界面設(shè)計(jì)趨勢(shì)中，UI對(duì)視覺(jué)焦點(diǎn)的干擾越來(lái)越小，簡(jiǎn)約的后扁平化設(shè)計(jì)大行其道。而商業(yè)模式也通過(guò)用戶的使用反饋不斷進(jìn)化。

視頻內(nèi)容相較于圖片和文字對(duì)用戶吸引的優(yōu)勢(shì)更大，各類(lèi)App也增加了各自的視頻模塊，但這些視頻模塊的設(shè)計(jì)受到各自商業(yè)模式的影響呈現(xiàn)不同的設(shè)計(jì)內(nèi)容。

舉個(gè)例子：商業(yè)模式是如何影響設(shè)計(jì)的

以B站的視頻彈幕為例，B站的盈利模式主要依靠這幾個(gè)方面：視頻廣告、游戲運(yùn)營(yíng)、周邊、Live、會(huì)員充值，說(shuō)白了為了賺錢(qián)需要大量的流量在網(wǎng)站中流轉(zhuǎn)。而彈幕的存在讓B站在吸引流量的大戰(zhàn)中獨(dú)樹(shù)一幟。

普通的視頻產(chǎn)品希望用戶能完整且順利的觀看視頻，用戶如果需要傳播和交流視頻內(nèi)容需要到別的平臺(tái)。而在視頻中加入的彈幕使用戶產(chǎn)生能在視頻中進(jìn)行互動(dòng)的感覺(jué)。一部分用戶通過(guò)不斷的觀看視頻和彈幕內(nèi)容，產(chǎn)生了更多更好的彈幕信息，增加了視頻內(nèi)容的豐富度。有趣的彈幕提升了視頻的用戶回流率和黏度，帶來(lái)了幾倍于普通視屏的流量收益。并通過(guò)附加的會(huì)員權(quán)益和周邊功能，為平臺(tái)帶來(lái)實(shí)實(shí)在在的變現(xiàn)能力。

彈幕的商業(yè)模式影響了用戶的使用習(xí)慣，有趣的彈幕內(nèi)容增加了視頻內(nèi)容的豐富度，并使用戶在觀看視頻時(shí)能感覺(jué)到是和很多人一起在看，當(dāng)群體感增加時(shí)，帶來(lái)了互動(dòng)的樂(lè)趣。

如果只是站在視覺(jué)設(shè)計(jì)上進(jìn)行考慮，彈幕這樣的視覺(jué)元素簡(jiǎn)直是反人類(lèi)的產(chǎn)物。雜亂、無(wú)序，過(guò)分遮擋正常的視頻內(nèi)容，出現(xiàn)的方式極不統(tǒng)一，毫無(wú)美感可言。但是用戶的需求進(jìn)而影響了視覺(jué)設(shè)計(jì)的選擇：UI從圍繞視頻播放而設(shè)計(jì)，變成了圍繞彈幕流轉(zhuǎn)而設(shè)計(jì)。設(shè)計(jì)上反而增強(qiáng)了字幕的視覺(jué)強(qiáng)度，并用顏色和出現(xiàn)方式來(lái)幫助用戶個(gè)性化定制更有特色的內(nèi)容。功能上用戶也可以自行控制彈幕的數(shù)量和展現(xiàn)形式，為互動(dòng)和觀看做出平衡。

手機(jī)淘寶平臺(tái)上的視頻的特點(diǎn)

手淘平臺(tái)上的視頻產(chǎn)品的商業(yè)模式也有其特殊性。手淘中視頻主要目的是將平臺(tái)中的流量分發(fā)給商家，并且提高商家的流量轉(zhuǎn)化。就是讓用戶在手淘中看到商家發(fā)布的視頻之后能夠快速的進(jìn)入店鋪和寶貝，通過(guò)在店鋪和寶貝詳情中視頻的瀏覽幫助消費(fèi)者決策購(gòu)買(mǎi)。消費(fèi)者則希望通過(guò)真實(shí)貨品的視頻展示、使用教程，來(lái)了解當(dāng)前的商品，來(lái)辨別商品的優(yōu)劣。

為了平衡商家和消費(fèi)者這兩類(lèi)用戶對(duì)手淘視頻的需求，我們主要圍繞兩個(gè)方面的問(wèn)題來(lái)做設(shè)計(jì)：

視頻互動(dòng)組件的設(shè)計(jì)

我們發(fā)現(xiàn)當(dāng)商品詳情中帶有商家的介紹視頻時(shí)，成交率都有顯著的提升。而在詳情頁(yè)觀看視頻和完整觀看視頻的用戶分別超過(guò)半數(shù)和三成。我們要幫助商家提高視頻對(duì)這部分消費(fèi)者的影響，進(jìn)而提高轉(zhuǎn)化率。結(jié)合手機(jī)淘寶電商平臺(tái)的特點(diǎn)通過(guò)在視頻中透出商品介紹，發(fā)放紅包和店鋪優(yōu)惠券，這樣的新型的互動(dòng)組件來(lái)達(dá)到這一目的。在這個(gè)互動(dòng)產(chǎn)品中視覺(jué)設(shè)計(jì)是怎么思考的呢？

視覺(jué)層次

視頻控件需要控制視頻進(jìn)程，在功能層級(jí)中是最靠前的，而互動(dòng)組件在視覺(jué)層級(jí)中則是最突出的。紅包和優(yōu)惠券為了吸引消費(fèi)者去點(diǎn)擊領(lǐng)取，使用了純度和明度比較高的顏色，并且增加了微弱的投影效果，使這些元素能更加明顯并且在視覺(jué)層面上與視頻內(nèi)容層級(jí)分開(kāi)。

在店鋪、微淘等集合頁(yè)中，商家經(jīng)常使用包含多個(gè)商品信息的視頻。當(dāng)某個(gè)商品出現(xiàn)時(shí)，商家可以設(shè)置一個(gè)包含商品圖片，名稱(chēng)和價(jià)格的商品卡片告知消費(fèi)者。

商品小卡在設(shè)計(jì)時(shí)要考慮到這幾點(diǎn)：

• 將商品基礎(chǔ)信息和加購(gòu)功能呈現(xiàn)出來(lái)，并且不過(guò)多遮擋視頻的內(nèi)容。
• 以商品信息呈現(xiàn)為視覺(jué)目的，減少其他元素對(duì)信息的干擾。
• 動(dòng)畫(huà)形式出現(xiàn)，視覺(jué)感受較強(qiáng)。

在豎屏下設(shè)計(jì)成橫條卡片的樣式,出現(xiàn)時(shí)使用投影使下方信息層次分開(kāi)。在橫屏模式下，視屏內(nèi)容占滿整個(gè)手機(jī)屏幕，卡片在右側(cè)互動(dòng)區(qū)域出現(xiàn)，風(fēng)格延續(xù)豎屏的樣式。

視頻控件

視頻的控件也為內(nèi)容和互動(dòng)組件而再設(shè)計(jì)。原先視頻模塊的設(shè)計(jì)還是這個(gè)樣子：視頻控件和信息放置在視頻上下的黑色遮罩的容器中。這樣的設(shè)計(jì)源于PC時(shí)代，被移植到移動(dòng)端之后發(fā)現(xiàn)控件的設(shè)計(jì)干擾了視頻本身的內(nèi)容。原設(shè)計(jì)控件視覺(jué)上所占面積大，顏色搶眼，對(duì)視頻瀏覽的干擾很大，并且與互動(dòng)組件的組合效果不佳。與我們幫助視頻區(qū)域商業(yè)利益最大化的設(shè)計(jì)目的相悖。

當(dāng)用戶需要控制視頻進(jìn)度時(shí)，自主點(diǎn)擊使控件出現(xiàn)時(shí)，其視覺(jué)焦點(diǎn)會(huì)將聚焦在當(dāng)前可操作的區(qū)域。若用戶不進(jìn)行操作，并關(guān)注視頻內(nèi)容時(shí)，控件需要快速的從視覺(jué)焦點(diǎn)中退出。依據(jù)這樣的視覺(jué)特性的優(yōu)化效果：

A、控件的容器放棄實(shí)心遮罩，改用漸變遮罩并減小20%的遮罩區(qū)域的高度，減弱遮罩的視覺(jué)沖擊力。當(dāng)控件的邊界減弱時(shí)，與互動(dòng)組件的組合在視覺(jué)上更和諧。

B、icon變的更纖細(xì)，icon的大小和與其他元素間的距離保持能保證讓用戶點(diǎn)擊比較舒服。原來(lái)icon的設(shè)計(jì)顯得過(guò)于尖銳缺少細(xì)節(jié)，于是增加了與手淘icon風(fēng)格一致的圓角。

C、時(shí)間顯示不是進(jìn)度條中的主要功能，適當(dāng)縮小時(shí)間信息的大小，增加可操作區(qū)域的范圍。

互動(dòng)玩法探索

之前我們一直強(qiáng)調(diào)手淘視頻模塊餓商業(yè)目標(biāo)是讓商家發(fā)布的視頻內(nèi)容能提高消費(fèi)者的轉(zhuǎn)化率，并通過(guò)一些商家發(fā)放的卡券，使消費(fèi)者能獲得一些折扣和獎(jiǎng)勵(lì)。我們也在視頻中為商家提供一些玩法來(lái)提升互動(dòng)的可玩性，鼓勵(lì)消費(fèi)者能夠完整的觀看視頻內(nèi)容。

集標(biāo)玩法

消費(fèi)者通過(guò)在觀看視頻時(shí)收集商家的標(biāo)識(shí)碎片，通過(guò)收集的結(jié)果來(lái)接受商家發(fā)放的卡券或抽獎(jiǎng)。

設(shè)計(jì)上我們要注重游戲的延續(xù)性體驗(yàn)，在一段視頻中只收集拼圖，很容易讓用戶疏漏，我們的想法是能讓用戶感知到視屏中碎片的數(shù)量和收集的狀態(tài)，在右側(cè)設(shè)計(jì)的拼圖收集狀態(tài)的小icon，在不影響用戶觀看體驗(yàn)的同時(shí)，一直在提示用戶視頻中集標(biāo)玩法的存在。

而這個(gè)游戲?qū)τ谏碳业睦嫱苿?dòng)在于通過(guò)游戲透出商家上傳的標(biāo)識(shí)，通過(guò)在微淘，活動(dòng)頁(yè)面的投放來(lái)增加商家品牌的曝光度。商家品牌logo的通過(guò)游戲中的碎片，卡券來(lái)透出。中因此如果消費(fèi)者遺漏了中間的拼圖時(shí)通過(guò)拉動(dòng)進(jìn)度條回退能回收遺漏的拼圖，使得游戲成功率、商家品牌的透出率大幅度的提高。

紅包、優(yōu)惠券的樣式配合拼圖拼合的動(dòng)畫(huà)，也在樣式上設(shè)計(jì)的比較明顯。在保證視頻播放的前提下，游戲中獎(jiǎng)結(jié)果被設(shè)計(jì)成直接透出不需要用戶再手動(dòng)去領(lǐng)取，降低用戶的互動(dòng)成本。

互動(dòng)組件的設(shè)計(jì)細(xì)節(jié)

A、視頻區(qū)域的可利用空間非常有限,在設(shè)計(jì)初期就考慮將信息分區(qū)。

B、手淘普通產(chǎn)品中發(fā)放優(yōu)惠券，紅包，商品加購(gòu)的操作一般都是會(huì)有比較明顯的提示，或轉(zhuǎn)跳到別的頁(yè)面。要避免打斷用戶觀看體驗(yàn)，就要將行動(dòng)點(diǎn)和結(jié)果直接在組件中顯示，并能使用戶認(rèn)知到。同時(shí)在產(chǎn)生結(jié)果后在視頻中弱提示用戶。

在用戶認(rèn)知上，優(yōu)惠券使用手淘中比較通用的樣式。而紅包因?yàn)橛胁恢歇?jiǎng)的情況產(chǎn)生，為了使用戶能對(duì)紅包抽獎(jiǎng)的結(jié)果更期待，單獨(dú)設(shè)計(jì)了帶有“拆”字的紅包封面，然后將結(jié)果顯示在另外一個(gè)比較具象的紅包背景上。

C、視覺(jué)元素視覺(jué)元素的柵格使用6px倍數(shù)的手淘統(tǒng)一標(biāo)準(zhǔn)。視覺(jué)上切圖元素間對(duì)齊時(shí)注意將陰影元素忽略，視覺(jué)上更規(guī)整。

場(chǎng)景化的播放體驗(yàn)，讓消費(fèi)者邊看邊買(mǎi)

消費(fèi)者在手淘選購(gòu)商品時(shí)，視頻是一個(gè)輔助他們下決定的功能，我們希望視頻模塊的設(shè)計(jì)能實(shí)實(shí)在在的影響用戶，但又不打擾用戶正常的瀏覽體驗(yàn)。在手淘不同的產(chǎn)品中，觀看視頻的體驗(yàn)是不一樣的。

吸頂播放

視頻在手淘店鋪中是作為一個(gè)商家的裝修模塊來(lái)展示，內(nèi)容也通常為店鋪新品，熱銷(xiāo)商品的介紹。消費(fèi)者如果只是聚焦在視頻上，對(duì)于視頻內(nèi)容的關(guān)注度和逛店鋪的熱情是隨著時(shí)間的推移而衰減的。我們希望把視頻模塊的體驗(yàn)設(shè)計(jì)成為：消費(fèi)者在觀看視頻的同時(shí)也能繼續(xù)瀏覽店鋪下面的信息。暫時(shí)來(lái)看視頻吸頂播放能滿足這樣的需求。

在視覺(jué)的設(shè)計(jì)細(xì)節(jié)上，在當(dāng)視頻吸頂之后，在視頻區(qū)域下方會(huì)有一些投影，來(lái)制造視覺(jué)上的層次感。

小窗播放

在商品詳情頁(yè)中商家為了更好的展示當(dāng)前的寶貝，會(huì)上傳一段單品的介紹或者使用測(cè)評(píng)。視頻與商品圖片和文字介紹的配合效果更好。但是商家在介紹商品時(shí)會(huì)使用大張圖片和非常詳細(xì)的文字，并且在詳情頁(yè)上方也有購(gòu)物車(chē)入口、產(chǎn)品參數(shù)、店鋪推薦等功能存在。這時(shí)使用吸頂播放或者浮層播放會(huì)遮擋很大一部分的面積，顯得不是很適合這樣的場(chǎng)景。

我們參考了facebook，Youtobe等App對(duì)于在信息流中視頻的處理，對(duì)在大段內(nèi)容下視頻區(qū)域滑出屏幕后以小窗的形式展示，很好的平衡了用戶一邊瀏覽寶貝信息一邊觀看視頻的需求。當(dāng)用戶對(duì)當(dāng)前視頻內(nèi)容重視時(shí)，點(diǎn)擊小窗后視頻能放大為全屏播放，當(dāng)用戶對(duì)小窗內(nèi)視頻不感興趣時(shí)，也可以自主關(guān)閉小窗。

在視覺(jué)設(shè)計(jì)上，要避免小窗可能在一些情況下會(huì)和商家的圖文信息黏在一起，在視頻區(qū)域之外增加了極細(xì)的描邊和投影，使小窗能在視覺(jué)層面與商品詳情信息拉開(kāi)差距。

原地自動(dòng)播放?

在手淘的信息流集合頁(yè)面中，例如微淘中商家都想要能夠產(chǎn)生更多的內(nèi)容來(lái)帶動(dòng)流量，我們要考慮為有條件上傳視頻的商家創(chuàng)造關(guān)注度。如果在微淘中只是展現(xiàn)一個(gè)視屏封面圖和一段文字描述這類(lèi)普通的樣式組合，不能達(dá)到視頻在信息流中的優(yōu)勢(shì)。視頻在Wi-Fi下能夠無(wú)須用戶點(diǎn)擊直接播放，能夠放大視頻在靜態(tài)頁(yè)面中的優(yōu)勢(shì)。

在信息流中自動(dòng)播放視頻，也需要拿捏一個(gè)度，視頻雖然在視覺(jué)層面比靜態(tài)圖片更能吸引眼球，但他也屬于信息流中的一部分，不能跳出這一層級(jí)。我們關(guān)閉了在自動(dòng)播放時(shí)視頻的聲音，不顯示控件和互動(dòng)組件，降低了視頻的感官信息量，在視頻右下邊緣設(shè)計(jì)一個(gè)音量的動(dòng)態(tài)圖片來(lái)提示用戶視頻的播放狀態(tài)。當(dāng)用戶點(diǎn)擊視頻區(qū)域，會(huì)進(jìn)入視頻的浮層播放，這些都由用戶自主控制。

在設(shè)計(jì)細(xì)節(jié)上，我們?nèi)サ袅艘曨l的下陰影，不再特意拉高視頻播放的層次感，使視頻稱(chēng)為信息流的一部分。

原視頻模塊在信息流中的尺寸80%以上為固定的16:9和1:1的尺寸，如果遇到豎屏尺寸的視頻時(shí)會(huì)粗暴的將其放在一個(gè)黑色的容器中，黑色在信息流中中視覺(jué)上太過(guò)強(qiáng)烈，干擾用戶的視覺(jué)焦點(diǎn)。在信息流中除了視頻以外的信息如文字，賬號(hào)關(guān)注等也是需要用戶去注意的，視覺(jué)上考慮需要去除和弱化手淘本身黑色邊框給用戶帶來(lái)的視覺(jué)影響。在信息流中，將視頻的尺寸規(guī)范為16:9和1:1兩種，豎形的視頻會(huì)按照一定的位置比例放置在方形的容器中?？紤]到人像的臉部偏上，我們計(jì)算了一個(gè)比較合理的裁切區(qū)域以滿足大部分的需求。

詳情頭圖放播放

越來(lái)越多的商家開(kāi)始使用視頻模塊來(lái)介紹商品詳情頁(yè)頭圖視頻共用了商品大圖的區(qū)域，這里視頻的體驗(yàn)不應(yīng)該打破原有的體驗(yàn)，我們選擇在浮層中播放視頻，另外考慮到詳情頁(yè)下方會(huì)有很多的重要商品信息，小窗模式在這里也不適合出現(xiàn)。

我們首先要盡量保證瀏覽的一致性，大多數(shù)消費(fèi)者使通過(guò)搜索來(lái)進(jìn)入詳情的頁(yè)面，我們希望在消費(fèi)者在搜索頁(yè)面看到什么圖片，在詳情頁(yè)中也能看到。并且我們希望減輕商家上傳和編輯視頻的難度。因此我們?cè)O(shè)計(jì)了視頻封面共用了首張大圖。

當(dāng)消費(fèi)者點(diǎn)擊大圖進(jìn)行播放時(shí)，我們也使用了原來(lái)浮層觀看大圖的體驗(yàn)，在視頻區(qū)域滑動(dòng)時(shí)，將切換到圖片，不再需要用戶來(lái)回切換視頻和圖片的模式。

無(wú)論視頻模塊背后的功能邏輯有多復(fù)雜，視覺(jué)設(shè)計(jì)的主旨就是化繁為簡(jiǎn)，通過(guò)簡(jiǎn)單的設(shè)計(jì)和統(tǒng)一的設(shè)計(jì)在視覺(jué)層面幫助用戶達(dá)到其商業(yè)目的和了解商品信息。

在設(shè)計(jì)時(shí)我們始終遵守以下的規(guī)則：

A、注重通用性：作為手淘平臺(tái)橫向使用的模塊，在設(shè)計(jì)上，保持中立態(tài)度，不對(duì)產(chǎn)品有過(guò)多的個(gè)性化和品牌化的設(shè)計(jì)確保通用性。盡可能能被各業(yè)務(wù)方使用。

B、確保內(nèi)容優(yōu)先 ：視覺(jué)設(shè)計(jì)中我們整體考慮互動(dòng)模塊與控件間的關(guān)系，控件區(qū)域的弱化處理，去除控件區(qū)域的邊界，減弱塊狀元素對(duì)視覺(jué)的影響，都是為了在設(shè)計(jì)上突顯出商家需要傳遞的內(nèi)容。

C、商業(yè)開(kāi)放性：互動(dòng)組件為商家與用戶提供了在視屏中的互動(dòng)平臺(tái)。商家和平臺(tái)運(yùn)營(yíng)希望增加互動(dòng)組件在視覺(jué)上的多樣性，未來(lái)的設(shè)計(jì)方向上。在確定位置，大小內(nèi)容等基本信息和展示規(guī)范之后，我們希望能夠開(kāi)放更多的設(shè)計(jì)自由給商家和運(yùn)營(yíng)。

來(lái)源：阿里巴巴UED

原文地址：http://www.zcool.com.cn/article/ZNDQzNjgw.html