主導(dǎo)意味著肩上的責(zé)任越大。設(shè)計(jì)師在項(xiàng)目中的主導(dǎo)性提升了，帶來(lái)的挑戰(zhàn)和質(zhì)疑聲也增多了。

從美女游戲主播到素人直播，再到大型的科技產(chǎn)品發(fā)布會(huì)，直播作為另一種視頻媒介和人的互動(dòng)方式，掀起了新的浪潮。

傳統(tǒng)視頻媒體自然要趕上直播的大潮，有幸的是，在這次的優(yōu)酷直播項(xiàng)目中，設(shè)計(jì)師從單純的執(zhí)行設(shè)計(jì)，變成發(fā)起創(chuàng)意、制作demo、將產(chǎn)品設(shè)計(jì)思路提案管理層，并參與方案落地的全過(guò)程。

在這里，我們將同大家分享iOS端的設(shè)計(jì)，分成兩個(gè)篇章，第一篇章先總結(jié)結(jié)構(gòu)層、架構(gòu)層的設(shè)計(jì)，第二篇章對(duì)直播必須的實(shí)時(shí)互動(dòng)和直播獨(dú)有的現(xiàn)場(chǎng)感來(lái)展開分析。

公司內(nèi)部的產(chǎn)品訴求（產(chǎn)品對(duì)于公司的商業(yè)價(jià)值）

了解公司內(nèi)部對(duì)于產(chǎn)品的定位，是設(shè)計(jì)的開始：

• 內(nèi)部產(chǎn)品定位 1：社會(huì)化媒體直播，區(qū)別于目前市面上秀場(chǎng)類、游戲類直播，即非純粹的UGC行為，是更具有社會(huì)傳播和參與價(jià)值的PGC和大型的活動(dòng)類直播。
• 內(nèi)部產(chǎn)品定位 2：非垂直化細(xì)分領(lǐng)域，是一個(gè)平臺(tái)化的產(chǎn)品。

公司外部的用戶訴求

《要素》作者加瑞特告訴我們“產(chǎn)品定位”屬于用戶體驗(yàn)設(shè)計(jì)中的“戰(zhàn)略層”。產(chǎn)品承載著企業(yè)與用戶雙方的期望和目標(biāo)，產(chǎn)品定位定的是企業(yè)和用戶想從產(chǎn)品處得到的東西。我們?cè)诳紤]產(chǎn)品設(shè)計(jì)時(shí)，需要了解用戶訴求和產(chǎn)品目標(biāo)兩個(gè)維度。

用戶和某場(chǎng)直播的接觸點(diǎn)如下圖，不同的場(chǎng)景有不同的用戶訴求和產(chǎn)品訴求。

設(shè)計(jì)難點(diǎn)

有了這些前提，產(chǎn)品設(shè)計(jì)就必須考慮：

• 更具有社會(huì)傳播和參與價(jià)值的PGC和大型的活動(dòng)類直播，和市面上主播類型的直播是有區(qū)別的。
• 不同垂直類型的直播有不同的玩法和群體，屬于共同屬性的怎么提取，架構(gòu)上如何滿足內(nèi)容的多樣性？
• 從零開始設(shè)計(jì)，現(xiàn)在想未來(lái)，架構(gòu)上如何滿足后續(xù)的可拓展性？

接下來(lái)就讓我們一一解開這三個(gè)設(shè)計(jì)難點(diǎn)

1. 不同路徑，關(guān)鍵接觸點(diǎn)下的結(jié)構(gòu)層

設(shè)計(jì)師將用戶訴求和產(chǎn)品訴求進(jìn)行對(duì)比權(quán)衡，提煉出直播不同路徑頁(yè)面的設(shè)計(jì)策略，進(jìn)而決定了頁(yè)面架構(gòu)改如何設(shè)計(jì)。

設(shè)計(jì)方案誕生初期，遭到的質(zhì)疑一：為什么預(yù)約頁(yè)的架構(gòu)要和直播其他態(tài)是不一樣的呢？

在直播中，通過(guò)左右滑動(dòng)手勢(shì)操作讓用戶可以快速切換不同的互動(dòng)場(chǎng)景參與其中，但是在預(yù)約頁(yè)，參與互動(dòng)并不是重點(diǎn)，通過(guò)不同的媒介（備播視頻、簡(jiǎn)介文字、圖片）讓用戶了解直播內(nèi)容，吸引成為這場(chǎng)直播內(nèi)容的興趣用戶，了解并傳播是預(yù)約頁(yè)的重點(diǎn)，因此我們把互動(dòng)量低的預(yù)約評(píng)論放在頁(yè)面的底部。

設(shè)計(jì)方案誕生初期，遭到的質(zhì)疑二：市面上的競(jìng)品一般只有三個(gè)態(tài)，為什么我們要多一個(gè)預(yù)熱頁(yè)？

大多數(shù)直播競(jìng)品只有三個(gè)態(tài)，即直播前的預(yù)約，直播中和直播結(jié)束。在我們?cè)O(shè)計(jì)過(guò)程中聯(lián)想到陪伴我們幾十年的春晚，每年大年三十的時(shí)候，一家人都是提早打開電視機(jī)，坐在沙發(fā)上，期待著那一年一次的直播。演唱會(huì)現(xiàn)場(chǎng)的時(shí)候，期待愛豆出現(xiàn)的心情也是再激動(dòng)不過(guò)了。再把這種需求移植到線上的場(chǎng)景中，發(fā)現(xiàn)當(dāng)一場(chǎng)直播的社會(huì)影響力比較大的時(shí)候，用戶的期待高，提早參與到直播的內(nèi)容進(jìn)行討論的欲望也強(qiáng)烈，所以我們?cè)谥辈ラ_始前半小時(shí)的時(shí)候，頁(yè)面切換到有利于用戶主動(dòng)參與到直播氣氛的Tab切換架構(gòu)。當(dāng)然這里后續(xù)還會(huì)繼續(xù)跟蹤數(shù)據(jù)，看看我們的設(shè)計(jì)設(shè)想是否是正真的用戶需求。

從用戶的路徑接觸點(diǎn)來(lái)思考，不管是什么類型的直播，只要它的定位是屬于我們上文提到的產(chǎn)品內(nèi)部目標(biāo)和外部的用戶訴求，現(xiàn)有的架構(gòu)上都可以套用，這就解決了“不同垂直類型的直播有不同的玩法和群體，屬于共同屬性的怎么提取，架構(gòu)上如何滿足內(nèi)容的多樣性？”

2. 架構(gòu)層的可拓展性

在產(chǎn)品設(shè)計(jì)的第一階段，我們著重點(diǎn)之二是：架構(gòu)的后續(xù)拓展性。

如何讓我們的架構(gòu)更加有邏輯規(guī)則，成為標(biāo)準(zhǔn)化容器接口，這個(gè)成個(gè)設(shè)計(jì)師需要考慮的第一要?jiǎng)?wù)了。

下面從『正在直播-直播播放頁(yè)』的架構(gòu)展開，通過(guò)卡片的設(shè)計(jì)和全屏架構(gòu)來(lái)闡述。

2-1. 架構(gòu)的可拓展性——卡片的設(shè)計(jì)

在移動(dòng)端，我們采取卡片的形式來(lái)保證靈活性。不管是Tab、圓形控件還是入口按鈕，都是喚起卡片。豎屏半屏卡片順理成章，橫屏全屏的情況下，表現(xiàn)層變成了半透明的浮層。在設(shè)計(jì)思考的初期我們暫時(shí)拋開這些表現(xiàn)層的不同，統(tǒng)一成卡片化的思路進(jìn)行拆解和分析。

卡片的設(shè)計(jì)規(guī)則

① 元素的頁(yè)面位置設(shè)計(jì)

整體的頁(yè)面架構(gòu)，把頁(yè)面從橫向x軸、縱向y軸和深度x軸進(jìn)行延伸設(shè)計(jì)。

• 橫向：Tab的左右切換
• 縱向：上-重點(diǎn)入口，中-基礎(chǔ)元素，下-互動(dòng)元素
• 深度：重點(diǎn)入口-最高層，互動(dòng)元素-第二層、基礎(chǔ)元素-最底層

優(yōu)點(diǎn)：盡量避免單一橫向或者縱向架構(gòu)的局限，如左右切換的成本導(dǎo)致最后一個(gè)Tab的露出

② 同質(zhì)卡片歸類

這么多的卡片（如下圖），我們?cè)趺慈ザx操作級(jí)別呢？

靈活配置，小卡片組成大卡片。定義好規(guī)則，把同類型的卡片做整合，定義出現(xiàn)的機(jī)制。

結(jié)合上文分析的用戶訴求，我們把有助于幫助用戶快速了解直播內(nèi)容的卡片合在一個(gè)大卡片里面。（直播是實(shí)時(shí)的，沒有進(jìn)度條，對(duì)于直播已經(jīng)開始才進(jìn)入觀看的用戶來(lái)說(shuō)，通過(guò)這些元素可以快速看到內(nèi)容的精彩之處，幫助其觀看決策）
如直播的簡(jiǎn)介、播主的信息、主播的其它視頻、圖文直播，這些是一個(gè)大的卡片，定義為“主持人”Tab。

對(duì)于產(chǎn)品未來(lái)的功能做最大化的支持，卡片的想象空間大，延展性好。

在直播的未來(lái)，有越來(lái)越多的新玩法新功能，我們還是會(huì)根據(jù)新的功能是屬于哪個(gè)頁(yè)面層級(jí)，屬于哪類同質(zhì)規(guī)則的卡片，把它放在對(duì)應(yīng)的位置。

2-2. 架構(gòu)的可拓展性——全屏架構(gòu)

視頻播放場(chǎng)景下，全屏橫屏的架構(gòu)需要一起考慮。

用戶從默認(rèn)的豎屏半屏，主動(dòng)切換到橫屏全屏，為的是更好的觀看體驗(yàn)。常規(guī)的點(diǎn)播播放器的操作是在觀看默認(rèn)5秒之后，視頻上的操作元素都主動(dòng)消失；而直播的實(shí)時(shí)互動(dòng)又要求元素的直接露出，方便觀眾快速參與到實(shí)時(shí)互動(dòng)里。

這樣，擺在設(shè)計(jì)師面前的矛盾就是：

操作元素露出，影響觀看；但是不露出，需要實(shí)時(shí)互動(dòng)的時(shí)候，又不方便用戶快速的參與互動(dòng)。

例如天貓雙十一晚會(huì)的“跨屏搶星衣”- 志玲姐姐把show服一丟，觀看者通過(guò)屏幕外的互動(dòng)操作進(jìn)行搶取。如果互動(dòng)按鈕在沉浸式觀看的時(shí)候隱藏掉了，那么當(dāng)主持人口播的那一瞬間，用戶需要：1.點(diǎn)擊屏幕，喚起按鈕；2.找到互動(dòng)按鈕；3.參與到實(shí)時(shí)互動(dòng)中。這樣過(guò)于隱藏的交互顯然是不合適的，等到用戶參與其中，可能志玲姐姐的衣服已經(jīng)掉到別人的口袋里面了。

所以，當(dāng)互動(dòng)元素碰撞上傳統(tǒng)的視頻操作按鈕，設(shè)計(jì)師要如何協(xié)調(diào)呢？

思考橫屏架構(gòu)的時(shí)候，設(shè)計(jì)師先保障常態(tài)下的體驗(yàn)，再反推用戶進(jìn)入的默認(rèn)頁(yè)，從逆向的思維去做了設(shè)計(jì)嘗試。

大的思路確定后，把設(shè)計(jì)方案在設(shè)計(jì)團(tuán)隊(duì)內(nèi)部一起再讓小伙伴提意見。

大家提出更高的要求：能否對(duì)視頻觀看區(qū)的遮擋再降低一點(diǎn)？

如下圖，就是在得到設(shè)計(jì)團(tuán)隊(duì)小伙伴建議之后的最終方案。

既決了之前的問(wèn)題，空間的節(jié)省做到了，然后功能不消失的情況下，遮擋的感覺也比較少了。

那全屏是不是需要把半屏的所有要素都搬過(guò)來(lái)呢？

對(duì)于功能在不同屏幕狀態(tài)的取舍，從一開始通過(guò)屏幕大小來(lái)確定功能元素，到從“橫豎屏的用戶/產(chǎn)品目的”，來(lái)決定功能元素，打破多屏分割的設(shè)計(jì)思路，讓設(shè)計(jì)方案更加有理有據(jù)。

豎屏，互動(dòng)不遮擋播放器。可以多一些熱度信息來(lái)增加直播的氣氛和現(xiàn)場(chǎng)感；

橫屏，互動(dòng)元素遮擋播放器。需要實(shí)時(shí)互動(dòng)的元素保留，其他操作性元素消失；減少對(duì)觀看造成干擾的元素（和豎屏相比，適當(dāng)?shù)臏p少氛圍類元素）；并且增加清屏功能，為希望沉浸式觀看的用戶提供選擇。

卡片的靈活性和卡片運(yùn)用的規(guī)則設(shè)定，橫豎屏頁(yè)面的不同側(cè)重決定了頁(yè)面的元素布局，這就解決了“從零開始設(shè)計(jì)，現(xiàn)在想未來(lái)，架構(gòu)上如何滿足后續(xù)的可拓展性？”

以上，是設(shè)計(jì)師在產(chǎn)品的初期，對(duì)結(jié)構(gòu)架構(gòu)的思考總結(jié)。

這些，還在堅(jiān)持和驗(yàn)證

在產(chǎn)品初期的路徑架構(gòu)設(shè)計(jì)階段，我們堅(jiān)持自己的設(shè)計(jì)原則，同時(shí)也在時(shí)時(shí)刻刻的和大家討論用戶的操作習(xí)慣，界面元素的識(shí)別性和易用性，在思考不同的端的設(shè)計(jì)側(cè)重又是什么，也在嘗試通過(guò)數(shù)據(jù)和用研維度來(lái)不斷的給設(shè)計(jì)做驗(yàn)證，同時(shí)也意識(shí)到我們還有很多事情來(lái)不及做。

主導(dǎo)意味著肩上的責(zé)任越大。設(shè)計(jì)師在項(xiàng)目中的主導(dǎo)性提升了，帶來(lái)的挑戰(zhàn)和質(zhì)疑聲也增多了。

作者：大郁郁

來(lái)源：?公眾號(hào)：優(yōu)酷土豆用戶體驗(yàn)設(shè)計(jì)中心

版權(quán)：人人都是產(chǎn)品經(jīng)理遵循行業(yè)規(guī)范，任何轉(zhuǎn)載的稿件都會(huì)明確標(biāo)注作者和來(lái)源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645