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

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

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

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

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

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

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

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

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

手機淘寶平臺上的視頻的特點

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

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

視頻互動組件的設(shè)計

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

視覺層次

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

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

商品小卡在設(shè)計時要考慮到這幾點：

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

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

視頻控件

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

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

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

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

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

互動玩法探索

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

集標(biāo)玩法

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

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

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

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

互動組件的設(shè)計細節(jié)

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

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

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

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

場景化的播放體驗，讓消費者邊看邊買

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

吸頂播放

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

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

小窗播放

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

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

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

原地自動播放?

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

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

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

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

詳情頭圖放播放

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

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

當(dāng)消費者點擊大圖進行播放時，我們也使用了原來浮層觀看大圖的體驗，在視頻區(qū)域滑動時，將切換到圖片，不再需要用戶來回切換視頻和圖片的模式。

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

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

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

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

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

來源：阿里巴巴UED

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