以優酷直播項目為例，談產品初期如何進行結構框架層設計

從美女遊戲主播到素人直播，再到大型的科技產品發布會，直播作為另一種視頻媒介和人的互動方式，掀起了新的浪潮。

傳統視頻媒體自然要趕上直播的大潮，有幸的是，在這次的優酷直播項目中，設計師從單純的執行設計，變成發起創意、製作demo、將產品設計思路提案管理層，並參與方案落地的全過程。

在這裡，我們將同大家分享iOS端的設計，分成兩個篇章，第一篇章先總結結構層、架構層的設計，第二篇章對直播必須的實時互動和直播獨有的現場感來展開分析。

公司內部的產品訴求（產品對於公司的商業價值）

了解公司內部對於產品的定位，是設計的開始：

• 內部產品定位 1：社會化媒體直播，區別於目前市面上秀場類、遊戲類直播，即非純粹的UGC行為，是更具有社會傳播和參與價值的PGC和大型的活動類直播。

• 內部產品定位 2：非垂直化細分領域，是一個平台化的產品。

公司外部的用戶訴求

《要素》作者加瑞特告訴我們「產品定位」屬於用戶體驗設計中的「戰略層」。產品承載著企業與用戶雙方的期望和目標，產品定位定的是企業和用戶想從產品處得到的東西。我們在考慮產品設計時，需要了解用戶訴求和產品目標兩個維度。

用戶和某場直播的接觸點如下圖，不同的場景有不同的用戶訴求和產品訴求。

設計難點

有了這些前提，產品設計就必須考慮：

• 更具有社會傳播和參與價值的PGC和大型的活動類直播，和市面上主播類型的直播是有區別的。

• 不同垂直類型的直播有不同的玩法和群體，屬於共同屬性的怎麼提取，架構上如何滿足內容的多樣性？

• 從零開始設計，現在想未來，架構上如何滿足後續的可拓展性？

接下來就讓我們一一解開這三個設計難點

1. 不同路徑，關鍵接觸點下的結構層

設計師將用戶訴求和產品訴求進行對比權衡，提煉出直播不同路徑頁面的設計策略，進而決定了頁面架構改如何設計。

設計方案誕生初期，遭到的質疑一：為什麼預約頁的架構要和直播其他態是不一樣的呢？

在直播中，通過左右滑動手勢操作讓用戶可以快速切換不同的互動場景參與其中，但是在預約頁，參與互動並不是重點，通過不同的媒介（備播視頻、簡介文字、圖片）讓用戶了解直播內容，吸引成為這場直播內容的興趣用戶，了解並傳播是預約頁的重點，因此我們把互動量低的預約評論放在頁面的底部。

設計方案誕生初期，遭到的質疑二：市面上的競品一般只有三個態，為什麼我們要多一個預熱頁？

大多數直播競品只有三個態，即直播前的預約，直播中和直播結束。在我們設計過程中聯想到陪伴我們幾十年的春晚，每年大年三十的時候，一家人都是提早打開電視機，坐在沙發上，期待著那一年一次的直播。演唱會現場的時候，期待愛豆出現的心情也是再激動不過了。再把這種需求移植到線上的場景中，發現當一場直播的社會影響力比較大的時候，用戶的期待高，提早參與到直播的內容進行討論的慾望也強烈，所以我們在直播開始前半小時的時候，頁面切換到有利於用戶主動參與到直播氣氛的Tab切換架構。當然這裡後續還會繼續跟蹤數據，看看我們的設計設想是否是正真的用戶需求。

從用戶的路徑接觸點來思考，不管是什麼類型的直播，只要它的定位是屬於我們上文提到的產品內部目標和外部的用戶訴求，現有的架構上都可以套用，這就解決了「不同垂直類型的直播有不同的玩法和群體，屬於共同屬性的怎麼提取，架構上如何滿足內容的多樣性？」

2. 架構層的可拓展性

在產品設計的第一階段，我們著重點之二是：架構的後續拓展性。

如何讓我們的架構更加有邏輯規則，成為標準化容器介面，這個成個設計師需要考慮的第一要務了。

下面從『正在直播-直播播放頁』的架構展開，通過卡片的設計和全屏架構來闡述。

2-1. 架構的可拓展性——卡片的設計

在移動端，我們採取卡片的形式來保證靈活性。不管是Tab、圓形控制項還是入口按鈕，都是喚起卡片。豎屏半屏卡片順理成章，橫屏全屏的情況下，表現層變成了半透明的浮層。在設計思考的初期我們暫時拋開這些表現層的不同，統一成卡片化的思路進行拆解和分析。

卡片的設計規則

① 元素的頁面位置設計

整體的頁面架構，把頁面從橫向x軸、縱向y軸和深度x軸進行延伸設計。

• 橫向：Tab的左右切換

• 縱向：上-重點入口，中-基礎元素，下-互動元素

• 深度：重點入口-最高層，互動元素-第二層、基礎元素-最底層

優點：盡量避免單一橫向或者縱向架構的局限，如左右切換的成本導致最後一個Tab的露出

② 同質卡片歸類

這麼多的卡片（如下圖），我們怎麼去定義操作級別呢？

靈活配置，小卡片組成大卡片。定義好規則，把同類型的卡片做整合，定義出現的機制。

結合上文分析的用戶訴求，我們把有助於幫助用戶快速了解直播內容的卡片合在一個大卡片裡面。（直播是實時的，沒有進度條，對於直播已經開始才進入觀看的用戶來說，通過這些元素可以快速看到內容的精彩之處，幫助其觀看決策）

如直播的簡介、播主的信息、主播的其它視頻、圖文直播，這些是一個大的卡片，定義為「主持人」Tab。

對於產品未來的功能做最大化的支持，卡片的想像空間大，延展性好。

在直播的未來，有越來越多的新玩法新功能，我們還是會根據新的功能是屬於哪個頁面層級，屬於哪類同質規則的卡片，把它放在對應的位置。

2-2. 架構的可拓展性——全屏架構

視頻播放場景下，全屏橫屏的架構需要一起考慮。

用戶從默認的豎屏半屏，主動切換到橫屏全屏，為的是更好的觀看體驗。常規的點播播放器的操作是在觀看默認5秒之後，視頻上的操作元素都主動消失；而直播的實時互動又要求元素的直接露出，方便觀眾快速參與到實時互動里。

這樣，擺在設計師面前的矛盾就是：

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

例如天貓雙十一晚會的「跨屏搶星衣」- 志玲姐姐把show服一丟，觀看者通過屏幕外的互動操作進行搶取。如果互動按鈕在沉浸式觀看的時候隱藏掉了，那麼當主持人口播的那一瞬間，用戶需要：1.點擊屏幕，喚起按鈕；2.找到互動按鈕；3.參與到實時互動中。這樣過於隱藏的交互顯然是不合適的，等到用戶參與其中，可能志玲姐姐的衣服已經掉到別人的口袋裡面了。

所以，當互動元素碰撞上傳統的視頻操作按鈕，設計師要如何協調呢？

思考橫屏架構的時候，設計師先保障常態下的體驗，再反推用戶進入的默認頁，從逆向的思維去做了設計嘗試。

大的思路確定後，把設計方案在設計團隊內部一起再讓小夥伴提意見。

大家提出更高的要求：能否對視頻觀看區的遮擋再降低一點？

如下圖，就是在得到設計團隊小夥伴建議之後的最終方案。

既決了之前的問題，空間的節省做到了，然後功能不消失的情況下，遮擋的感覺也比較少了。

那全屏是不是需要把半屏的所有要素都搬過來呢？

對於功能在不同屏幕狀態的取捨，從一開始通過屏幕大小來確定功能元素，到從「橫豎屏的用戶/產品目的」，來決定功能元素，打破多屏分割的設計思路，讓設計方案更加有理有據。

豎屏，互動不遮擋播放器。可以多一些熱度信息來增加直播的氣氛和現場感；

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

卡片的靈活性和卡片運用的規則設定，橫豎屏頁面的不同側重決定了頁面的元素布局，這就解決了「從零開始設計，現在想未來，架構上如何滿足後續的可拓展性？」

以上，是設計師在產品的初期，對結構架構的思考總結。

這些，還在堅持和驗證

在產品初期的路徑架構設計階段，我們堅持自己的設計原則，同時也在時時刻刻的和大家討論用戶的操作習慣，界面元素的識別性和易用性，在思考不同的端的設計側重又是什麼，也在嘗試通過數據和用研維度來不斷的給設計做驗證，同時也意識到我們還有很多事情來不及做。

主導意味著肩上的責任越大。設計師在項目中的主導性提升了，帶來的挑戰和質疑聲也增多了。