編輯導語：随着海外業務的拓展，智能終端電視系統已經不能滿足現有用戶，原有的交互及界面已無法滿足當前的需求。面臨着用戶群體變窄的危機，應當如何改版？作者以派視智能電視為例，複盤了智能終端電視機系統的相關改版方法，一起來看下吧。

派視智能電視UI自2015年設計研發以來，随着海外業務的拓展，支持節目由原來的100套增長至500 ，日活用戶突破百萬，原有的交互及界面已無法滿足當前的需求。

随時面臨着用戶群體收窄的危機。并且設計團隊的多次轉變，也導緻目前産品設計體驗上不統一，對于目前現狀與難點，這也是我們這次改版的初衷（本次設置 付費模塊不做更改）。

一、項目背景

派視智能電視是一個集IP直播、點播、應用商城為一體的終端設備，在非洲數字智能電視領域屬于一枝獨秀，用戶對于整體的流暢體驗和内容展示最為關心，關系着用戶的使用體驗和觀看體驗我們前期也對市面産品做了深度的調研。

希望通過對産品的一些調研數據，力求站在用戶痛點上進行更多的思考與改進。

二、從“産品目标”中拓展設計思路

與産品團隊、海外拓展團隊、運營團隊的多次溝通，産品的最終目标無非是 “提高視頻包營收”、“拉高用戶日活躍度”，設計團隊根據産品目标進行推導，從而确立這次改版的設計目标，并且在此基礎上不斷進行方法論要點的細分，希望能根據産品目标确立出明确的設計方向。

三、設計關鍵詞，決定着智能電視的改版方向

團隊從設計目标中進行風格探索，分别從“視覺、操作、内容”三個緯度進行展開，提取出我們這次設計改版的關鍵詞，以“簡潔、易用、專注”為改版的核心，主要目的是讓用戶最便捷地找到最喜歡的内容。

四、“輕質化”設計，讓用戶産生嶄新的産品認知

1. 模式切換：淺色模式與暗黑模式（暗黑模式不是夜間模式）

暗黑模式希望使用者更加專注自己的操作任務，對于信息内容的表達會更注重視覺性；可以更專注、更沉浸在當前的内容下。暗黑模式既可以在黑暗環境，也可以在亮光環境下使用，而且深色會在視覺感官上給人一種距離感、收縮感，淺色部分則會向前延展，這樣在對比強烈的層次關系中可以讓用戶更注重被凸顯出來的内容和交互操作。

綜上所述，暗黑模式是兼并内容高關注度和暗光線下視覺舒适度的整合，可以理解為是對淺色主題的一種場景化補充（具體顔色搭配見下方）。

2. 背景模糊

玻璃拟态的視覺風格更加注重垂直空間 z 軸的使用。

注重空間感意味這種風格有助于用戶建立界面的層次結構和深度。用戶可以看到物體間的層次關系，哪一層在哪一層之上，就像物理空間中真實的玻璃一樣。模糊半徑必須為 6~16 之間，具體個别效果由設計師把控。

該類樣式适用于父子級界面中。用戶的操作不會因為頁面跳轉而被被強行打斷，視覺斷層有明顯改善。

3. 投影

為了更好的營造層次感，我們在設計投影的時候，摒棄原有的投影設計方法（直接在元素上面添加），而是在現有的元素下面再添加等大的元素，将元素縮小至80%，底端對齊，然後向下豎移8個像素。

然後添加高斯模糊，具體數值根據效果，由設計師把控（模糊半徑控制在6~16之間）用以營造item懸停的效果。增強視覺感受、增加關注度。

該種投影适用于各類item。視覺上還能保持色調一緻的簡潔性。

4. 漸變

設計中都會在局部蒙版方案中加入漸變色；具體表現在圖象或者視頻上疊加文字和按鈕的情況，文字直接放在圖片上，當背景色和字色過于接近時，會影響文字的讀取閱讀。

為了解決這個問題，通常的解決辦法是在圖片和文字中間疊加一個中間層（蒙層），這樣一來，即便背景色和字色過于接近，由于中間層的存在，也不會影響文字閱讀。

中間層（即 常說的圖片蒙層）的形式大概可分為“全蒙層”和“局部蒙層”兩種：由于全覆蓋的蒙層對内容品質的影響很大，所以我們采用局部蒙層的設計方案。

為了讓漸變色平滑融入圖像，就需要改變漸變的曲率：把過渡的中間色，從50%位置移動到30%的位置（需要增加一個過渡節點，節點越多越好）。

5. 圓角

我們将界面中原有的方形item增加了圓角概念，讓人視覺感受上更加友好、親切。并且圓角具有更強的内指向性，可以更好地襯托出item内的裝扮内容；而且在圓角的襯托下，更加清楚分辨item的邊界，使裝扮的呈現更加清晰。

對于圓角的取值上也作了足夠的思考，item内需承載的其他内容信息衆多，圓角太大會影響邊角信息的呈現，所以我們在圓角選取上，采用《大屏互動GuideLine》設計規範中定義的8px的栅格系統，意思是“以8px為單位，來規範元素的尺寸與間距”。在極端情況下使用6px圓角。

并且我們把圓角的理念，延展到标簽的統一設計中，并且對于長短不一的item信息重新歸類，清晰分成4個尺寸樣式，把控視覺上的統一。

6. 色闆

在淺色界面中，我們通常用隻用一個白色背景結合分割線就可以搞定所有界面的闆塊層級，因為在淺色模式下有投影可以借助，然而暗黑模式中投影将不足以起到如此功效，我們需要通過顔色來區分層級關系，增加通用原則顔色部分：中性色顔色梯度。

五、優化交互設計，提高用戶操作效率和體驗

1. 導航

目前市面上最為常見的按照信息權重布局的導航可分為：橫向式、縱向式、縱橫式。由于這部分我們不展開說，所以直接在下圖圖整理了每種布局的特征、優劣勢和應用場景。

根據大量的案例分析和眼動測試，結合自身場景選擇便于日後的拓展的橫向導航，從穩定的方面來說，橫向導航的變化不會因為産品的變化而發生很大的變化。

這是站在一個外觀和交互共同的層面去看，導航的大小一定要足夠，而且其位置一定要是用戶認為足夠清晰的，确保在視覺反饋的的層面對于用戶來說是友好的。

其次就是所有的可交互區域需要有積極的響應，與内容區要有對比，可以将其稱為界面的熱情度，這也是一個優秀界面的自我修養。

關于導航排序法則很簡單：“高頻次高優展示，低頻次降低權重甚至隐藏”。

而關于使用頻次的高低甄别一般我們可以通過用戶調研和數據埋點的兩種常用方式來進行，這裡并不展開講。

2. 内容區

運營的内容也變得多了，原來的僅僅橫向界面展示無法承載當前的内容運營，經過多次的讨論和調研，最終是我們采用了十字交叉的設計。

内部根據不同的功能模塊我們定義了三種交互形式：拼貼式設計 書架式設計 列表式設計，減少花裡胡哨的控件使用，降低控件使用成本

3. 組件

保證平台一緻性： 加強産品與開發的溝通，解決多平台後期多而複雜頁面帶來的不一緻性。用戶用到一個新功能或者切換到另一個新平台，不需要再花額外的學習時間，所以保證一緻性可以讓用戶形成習慣性路經思考。

提升産品使用效率： 組件化設計是通過對頁面中元素的拆解、歸納和重組，并基于可被複用的目的，形成規範化的組件。再通過組合來構建整個設計方案，從而提升設計效能。所以組件化為産品帶來一緻的設計語言和工作效率上的提升，另一方面确保使用的客戶或用戶在很短的時間内使用平台。

4. 栅格系統

栅格系統可以在實現良好的布局結構、層次結構、位置關系和實現一緻性上面為我們提供幫助。在研發階段栅格系統也可以加速開發并保證視覺還原。

我們根據原型的設計，以及一次試錯，因為存在基數列最終确定12列栅格設計。進一步定義常用的3柱、4柱、6柱海報展現形式，并形成組件化。

六、強化視覺感受，給與用戶滿滿的驚喜感

1. 主頁

歸納概括核心功能：IP直播、點播、應用商店。根據權重放置于頂部。

這次改版的原因之一也是非洲互聯網的崛起，人們對新鮮事物的喜愛，我們在設計中也添加了國内的一些設計樣式，希望能讓用戶燃起對産品的新鮮感，并且對“舊版本”的複用上，不斷思考着用什麼展示形式能更吸引更多的用戶進行購買。

所以模塊的排布上，将精選頁面從上到下分成了3個區域，分别是“主要功能區”、“用戶中心區”、“個性化推薦區”。

設計靈活的頁面排布：

2. 分類界面

根據現有分類不同的内容展現形式，在現有的網格系統中，定義不同的栅格樣式。

3. 詳情界面

a. SVOD詳情界面在整個用戶點擊播放過程中占據重要位置。在詳情頁中加入适量的推薦内容，可以讓增加用戶選擇權利，同時也能增加用戶的浏覽量。

b. 應用詳情界面，考慮應用類的屬性，已視覺表現為核心。采用定義的“輕質化”設計為視覺設計導向吸引用戶。

4. 播放界面

a. 點播界面：以視頻播放為主，用戶體驗至上，非必要情況（試看結束、開通VIP提示等）不能遮擋用戶的觀看體驗，即不能有遮擋視頻的組件出現，如果需要，則應通過降低控件透明度等手段保證視頻的清晰。

b. IP直播直播界面要點：無法快進退、快速切換頻道、ZAPList、查看7天EPG、查看當前頻道當天Event。相對IP點播需要的功能較多，且界面中還存在跳轉，合理有效的布局界面較為關鍵。

利用按鍵解決：為保證相對操作的統一性，與點播采用一緻性操作邏輯，減少用戶的學習成本，将切換頻道與查看頻道信息分為兩個（ChanneBar and OKBar）這與點播界面的查看當前視頻和呼出推薦操作一緻。

5. 搜索界面

從體驗層面上看，一個良好的用戶體驗需要具備完整的流程。搜索框的使用流程可以簡單劃分為：

1. 使用前-找到搜索框入口；
2. 使用中-點擊輸入内容；
3. 後-展示搜索結果。

a. 使用前: 大屏界面不同于手機的操作方式，導航分類數量較多，選用直接輸入會導緻界面負擔太重，所以在頁面導航列上隻提供一個放大鏡圖标，需要用戶點擊圖标後才能跳轉到搜索頁面，位置放置于首位（導航默認焦點位于精選上），遙控器左鍵一次可切換至搜索按鈕上。進入搜索界面，焦點位于搜索框上。

搜索頁的内容包括曆史搜索、搜索發現、熱門推薦等版塊，記錄用戶的搜索行為，推薦近期推薦、上新節目，誘導用戶點擊，提高轉化率。

b. 使用中：點擊【搜索輸入框】進入搜索界面，存在四種狀态，采用易用、易理解方式展現。并在空白狀态下給出簡單直接的解決方案，避免用戶迷失在改不操作中。

考慮搜索界面的特殊性，以及操作方式，提供純字母數字鍵盤。

優點：

• 删除無用的按鍵，減小操作面積；
• 信息量的減少有利于用戶的快速輸入；
• 側面告知用戶搜索規則（首字母）；
• 避免調用全鍵盤對頁面進行的遮擋。

在用戶輸入内容時，産品會根據用戶輸入的内容提供相對應的搜索推薦，這是搜索框的必備的交互反饋。

通過合理的詞條推薦能極大降低用戶的思考時間，提高搜索效率，同時省去再次點擊搜索按鈕的流程，降低用戶的操作步驟。

字數限制：目前大多數 App 在搜索時都沒有字數限制問題。

在搜索使用場景中發現用戶在搜索框内輸入任何内容都是有可能的，盡量不要約束用戶的輸入内容。無論用戶輸入多少内容，點擊都可以完成基本的搜索操作，這樣整個流程才完整。

六、加入視覺運營，讓用戶對系統保持“新鮮感”

在該套系統的基礎架構上，根據不同的節日以及活動添加了運營類專區模塊，根據運營方向以及内容重點進行視覺強化，從而達到區分其他模塊的效果，比如世界杯或歐洲杯期間，增加專屬模塊，背景、item等增加相關的視覺元素。使用戶在浏覽界面時的視覺表現上保持新鮮感。

七、自我反思

全新的電視系統3.0已經逐漸展現在大家的面前，無論在用戶交互體驗還是視覺體驗上都有了很大的提升。設計團隊也在上線後會不斷關注用戶反饋與數據間的變化，用戶的反饋是我們能夠不斷進行探索的燈塔。我們不會停下探索好看、好用的腳步。

本次的改版也并非一帆風順，包括與各個角色的溝通，也走過不少彎路，希望随着自身能力的不斷提升，下一次改版時能夠提供給我們的用戶更好的體驗。

本文由肥貓豆豆 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部