編輯導(dǎo)語：隨著海外業(yè)務(wù)的拓展，智能終端電視系統(tǒng)已經(jīng)不能滿足現(xiàn)有用戶，原有的交互及界面已無法滿足當(dāng)前的需求。面臨著用戶群體變窄的危機(jī)，應(yīng)當(dāng)如何改版？作者以派視智能電視為例，復(fù)盤了智能終端電視機(jī)系統(tǒng)的相關(guān)改版方法，一起來看下吧。

派視智能電視UI自2015年設(shè)計(jì)研發(fā)以來，隨著海外業(yè)務(wù)的拓展，支持節(jié)目由原來的100套增長(zhǎng)至500+，日活用戶突破百萬，原有的交互及界面已無法滿足當(dāng)前的需求。

隨時(shí)面臨著用戶群體收窄的危機(jī)。并且設(shè)計(jì)團(tuán)隊(duì)的多次轉(zhuǎn)變，也導(dǎo)致目前產(chǎn)品設(shè)計(jì)體驗(yàn)上不統(tǒng)一，對(duì)于目前現(xiàn)狀與難點(diǎn)，這也是我們這次改版的初衷（本次設(shè)置+付費(fèi)模塊不做更改）。

一、項(xiàng)目背景

派視智能電視是一個(gè)集IP直播、點(diǎn)播、應(yīng)用商城為一體的終端設(shè)備，在非洲數(shù)字智能電視領(lǐng)域?qū)儆谝恢Κ?dú)秀，用戶對(duì)于整體的流暢體驗(yàn)和內(nèi)容展示最為關(guān)心，關(guān)系著用戶的使用體驗(yàn)和觀看體驗(yàn)我們前期也對(duì)市面產(chǎn)品做了深度的調(diào)研。

希望通過對(duì)產(chǎn)品的一些調(diào)研數(shù)據(jù)，力求站在用戶痛點(diǎn)上進(jìn)行更多的思考與改進(jìn)。

二、從“產(chǎn)品目標(biāo)”中拓展設(shè)計(jì)思路

與產(chǎn)品團(tuán)隊(duì)、海外拓展團(tuán)隊(duì)、運(yùn)營(yíng)團(tuán)隊(duì)的多次溝通，產(chǎn)品的最終目標(biāo)無非是 “提高視頻包營(yíng)收”、“拉高用戶日活躍度”，設(shè)計(jì)團(tuán)隊(duì)根據(jù)產(chǎn)品目標(biāo)進(jìn)行推導(dǎo)，從而確立這次改版的設(shè)計(jì)目標(biāo)，并且在此基礎(chǔ)上不斷進(jìn)行方法論要點(diǎn)的細(xì)分，希望能根據(jù)產(chǎn)品目標(biāo)確立出明確的設(shè)計(jì)方向。

三、設(shè)計(jì)關(guān)鍵詞，決定著智能電視的改版方向

團(tuán)隊(duì)從設(shè)計(jì)目標(biāo)中進(jìn)行風(fēng)格探索，分別從“視覺、操作、內(nèi)容”三個(gè)緯度進(jìn)行展開，提取出我們這次設(shè)計(jì)改版的關(guān)鍵詞，以“簡(jiǎn)潔、易用、專注”為改版的核心，主要目的是讓用戶最便捷地找到最喜歡的內(nèi)容。

四、“輕質(zhì)化”設(shè)計(jì)，讓用戶產(chǎn)生嶄新的產(chǎn)品認(rèn)知

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

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

綜上所述，暗黑模式是兼并內(nèi)容高關(guān)注度和暗光線下視覺舒適度的整合，可以理解為是對(duì)淺色主題的一種場(chǎng)景化補(bǔ)充（具體顏色搭配見下方）。

2. 背景模糊

玻璃擬態(tài)的視覺風(fēng)格更加注重垂直空間 z 軸的使用。

注重空間感意味這種風(fēng)格有助于用戶建立界面的層次結(jié)構(gòu)和深度。用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像物理空間中真實(shí)的玻璃一樣。模糊半徑必須為 6~16 之間，具體個(gè)別效果由設(shè)計(jì)師把控。

該類樣式適用于父子級(jí)界面中。用戶的操作不會(huì)因?yàn)轫?yè)面跳轉(zhuǎn)而被被強(qiáng)行打斷，視覺斷層有明顯改善。

3. 投影

為了更好的營(yíng)造層次感，我們?cè)谠O(shè)計(jì)投影的時(shí)候，摒棄原有的投影設(shè)計(jì)方法（直接在元素上面添加），而是在現(xiàn)有的元素下面再添加等大的元素，將元素縮小至80%，底端對(duì)齊，然后向下豎移8個(gè)像素。

然后添加高斯模糊，具體數(shù)值根據(jù)效果，由設(shè)計(jì)師把控（模糊半徑控制在6~16之間）用以營(yíng)造item懸停的效果。增強(qiáng)視覺感受、增加關(guān)注度。

該種投影適用于各類item。視覺上還能保持色調(diào)一致的簡(jiǎn)潔性。

4. 漸變

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

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

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

為了讓漸變色平滑融入圖像，就需要改變漸變的曲率：把過渡的中間色，從50%位置移動(dòng)到30%的位置（需要增加一個(gè)過渡節(jié)點(diǎn)，節(jié)點(diǎn)越多越好）。

5. 圓角

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

對(duì)于圓角的取值上也作了足夠的思考，item內(nèi)需承載的其他內(nèi)容信息眾多，圓角太大會(huì)影響邊角信息的呈現(xiàn)，所以我們?cè)趫A角選取上，采用《大屏互動(dòng)GuideLine》設(shè)計(jì)規(guī)范中定義的8px的柵格系統(tǒng)，意思是“以8px為單位，來規(guī)范元素的尺寸與間距”。在極端情況下使用6px圓角。

并且我們把圓角的理念，延展到標(biāo)簽的統(tǒng)一設(shè)計(jì)中，并且對(duì)于長(zhǎng)短不一的item信息重新歸類，清晰分成4個(gè)尺寸樣式，把控視覺上的統(tǒng)一。

6. 色板

在淺色界面中，我們通常用只用一個(gè)白色背景結(jié)合分割線就可以搞定所有界面的板塊層級(jí)，因?yàn)樵跍\色模式下有投影可以借助，然而暗黑模式中投影將不足以起到如此功效，我們需要通過顏色來區(qū)分層級(jí)關(guān)系，增加通用原則顏色部分：中性色顏色梯度。

五、優(yōu)化交互設(shè)計(jì)，提高用戶操作效率和體驗(yàn)

1. 導(dǎo)航

目前市面上最為常見的按照信息權(quán)重布局的導(dǎo)航可分為：橫向式、縱向式、縱橫式。由于這部分我們不展開說，所以直接在下圖圖整理了每種布局的特征、優(yōu)劣勢(shì)和應(yīng)用場(chǎng)景。

根據(jù)大量的案例分析和眼動(dòng)測(cè)試，結(jié)合自身場(chǎng)景選擇便于日后的拓展的橫向?qū)Ш?，從穩(wěn)定的方面來說，橫向?qū)Ш降淖兓粫?huì)因?yàn)楫a(chǎn)品的變化而發(fā)生很大的變化。

這是站在一個(gè)外觀和交互共同的層面去看，導(dǎo)航的大小一定要足夠，而且其位置一定要是用戶認(rèn)為足夠清晰的，確保在視覺反饋的的層面對(duì)于用戶來說是友好的。

其次就是所有的可交互區(qū)域需要有積極的響應(yīng)，與內(nèi)容區(qū)要有對(duì)比，可以將其稱為界面的熱情度，這也是一個(gè)優(yōu)秀界面的自我修養(yǎng)。

關(guān)于導(dǎo)航排序法則很簡(jiǎn)單：“高頻次高優(yōu)展示，低頻次降低權(quán)重甚至隱藏”。

而關(guān)于使用頻次的高低甄別一般我們可以通過用戶調(diào)研和數(shù)據(jù)埋點(diǎn)的兩種常用方式來進(jìn)行，這里并不展開講。

2. 內(nèi)容區(qū)

運(yùn)營(yíng)的內(nèi)容也變得多了，原來的僅僅橫向界面展示無法承載當(dāng)前的內(nèi)容運(yùn)營(yíng)，經(jīng)過多次的討論和調(diào)研，最終是我們采用了十字交叉的設(shè)計(jì)。內(nèi)部根據(jù)不同的功能模塊我們定義了三種交互形式：拼貼式設(shè)計(jì)+書架式設(shè)計(jì)+列表式設(shè)計(jì)，減少花里胡哨的控件使用，降低控件使用成本

3. 組件

保證平臺(tái)一致性： 加強(qiáng)產(chǎn)品與開發(fā)的溝通，解決多平臺(tái)后期多而復(fù)雜頁(yè)面帶來的不一致性。用戶用到一個(gè)新功能或者切換到另一個(gè)新平臺(tái)，不需要再花額外的學(xué)習(xí)時(shí)間，所以保證一致性可以讓用戶形成習(xí)慣性路經(jīng)思考。

提升產(chǎn)品使用效率： 組件化設(shè)計(jì)是通過對(duì)頁(yè)面中元素的拆解、歸納和重組，并基于可被復(fù)用的目的，形成規(guī)范化的組件。再通過組合來構(gòu)建整個(gè)設(shè)計(jì)方案，從而提升設(shè)計(jì)效能。所以組件化為產(chǎn)品帶來一致的設(shè)計(jì)語言和工作效率上的提升，另一方面確保使用的客戶或用戶在很短的時(shí)間內(nèi)使用平臺(tái)。

4. 柵格系統(tǒng)

柵格系統(tǒng)可以在實(shí)現(xiàn)良好的布局結(jié)構(gòu)、層次結(jié)構(gòu)、位置關(guān)系和實(shí)現(xiàn)一致性上面為我們提供幫助。在研發(fā)階段柵格系統(tǒng)也可以加速開發(fā)并保證視覺還原。我們根據(jù)原型的設(shè)計(jì)，以及一次試錯(cuò)，因?yàn)榇嬖诨鶖?shù)列最終確定12列柵格設(shè)計(jì)。進(jìn)一步定義常用的3柱、4柱、6柱海報(bào)展現(xiàn)形式，并形成組件化。

六、強(qiáng)化視覺感受，給與用戶滿滿的驚喜感

1. 主頁(yè)

歸納概括核心功能：IP直播、點(diǎn)播、應(yīng)用商店。根據(jù)權(quán)重放置于頂部。

這次改版的原因之一也是非洲互聯(lián)網(wǎng)的崛起，人們對(duì)新鮮事物的喜愛，我們?cè)谠O(shè)計(jì)中也添加了國(guó)內(nèi)的一些設(shè)計(jì)樣式，希望能讓用戶燃起對(duì)產(chǎn)品的新鮮感，并且對(duì)“舊版本”的復(fù)用上，不斷思考著用什么展示形式能更吸引更多的用戶進(jìn)行購(gòu)買。

所以模塊的排布上，將精選頁(yè)面從上到下分成了3個(gè)區(qū)域，分別是“主要功能區(qū)”、“用戶中心區(qū)”、“個(gè)性化推薦區(qū)”。

設(shè)計(jì)靈活的頁(yè)面排布：

• 當(dāng)有賽事轉(zhuǎn)播時(shí)
• 當(dāng)無賽事轉(zhuǎn)播時(shí)

2. 分類界面

根據(jù)現(xiàn)有分類不同的內(nèi)容展現(xiàn)形式，在現(xiàn)有的網(wǎng)格系統(tǒng)中，定義不同的柵格樣式。

3. 詳情界面

a. SVOD詳情界面在整個(gè)用戶點(diǎn)擊播放過程中占據(jù)重要位置。在詳情頁(yè)中加入適量的推薦內(nèi)容，可以讓增加用戶選擇權(quán)利，同時(shí)也能增加用戶的瀏覽量。

b. 應(yīng)用詳情界面，考慮應(yīng)用類的屬性，已視覺表現(xiàn)為核心。采用定義的“輕質(zhì)化”設(shè)計(jì)為視覺設(shè)計(jì)導(dǎo)向吸引用戶。

4. 播放界面

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

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

利用按鍵解決：為保證相對(duì)操作的統(tǒng)一性，與點(diǎn)播采用一致性操作邏輯，減少用戶的學(xué)習(xí)成本，將切換頻道與查看頻道信息分為兩個(gè)（ChanneBar and OKBar）這與點(diǎn)播界面的查看當(dāng)前視頻和呼出推薦操作一致。

5. 搜索界面

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

1. 使用前-找到搜索框入口；
2. 使用中-點(diǎn)擊輸入內(nèi)容；
3. 后-展示搜索結(jié)果。

a. 使用前: 大屏界面不同于手機(jī)的操作方式，導(dǎo)航分類數(shù)量較多，選用直接輸入會(huì)導(dǎo)致界面負(fù)擔(dān)太重，所以在頁(yè)面導(dǎo)航列上只提供一個(gè)放大鏡圖標(biāo)，需要用戶點(diǎn)擊圖標(biāo)后才能跳轉(zhuǎn)到搜索頁(yè)面，位置放置于首位（導(dǎo)航默認(rèn)焦點(diǎn)位于精選上），遙控器左鍵一次可切換至搜索按鈕上。進(jìn)入搜索界面，焦點(diǎn)位于搜索框上。

搜索頁(yè)的內(nèi)容包括歷史搜索、搜索發(fā)現(xiàn)、熱門推薦等版塊，記錄用戶的搜索行為，推薦近期推薦、上新節(jié)目，誘導(dǎo)用戶點(diǎn)擊，提高轉(zhuǎn)化率。

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

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

優(yōu)點(diǎn)：

• 刪除無用的按鍵，減小操作面積；
• 信息量的減少有利于用戶的快速輸入；
• 側(cè)面告知用戶搜索規(guī)則（首字母）；
• 避免調(diào)用全鍵盤對(duì)頁(yè)面進(jìn)行的遮擋。

在用戶輸入內(nèi)容時(shí)，產(chǎn)品會(huì)根據(jù)用戶輸入的內(nèi)容提供相對(duì)應(yīng)的搜索推薦，這是搜索框的必備的交互反饋。

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

字?jǐn)?shù)限制：目前大多數(shù) App 在搜索時(shí)都沒有字?jǐn)?shù)限制問題。

在搜索使用場(chǎng)景中發(fā)現(xiàn)用戶在搜索框內(nèi)輸入任何內(nèi)容都是有可能的，盡量不要約束用戶的輸入內(nèi)容。無論用戶輸入多少內(nèi)容，點(diǎn)擊都可以完成基本的搜索操作，這樣整個(gè)流程才完整。

六、加入視覺運(yùn)營(yíng)，讓用戶對(duì)系統(tǒng)保持“新鮮感”

在該套系統(tǒng)的基礎(chǔ)架構(gòu)上，根據(jù)不同的節(jié)日以及活動(dòng)添加了運(yùn)營(yíng)類專區(qū)模塊，根據(jù)運(yùn)營(yíng)方向以及內(nèi)容重點(diǎn)進(jìn)行視覺強(qiáng)化，從而達(dá)到區(qū)分其他模塊的效果，比如世界杯或歐洲杯期間，增加專屬模塊，背景、item等增加相關(guān)的視覺元素。使用戶在瀏覽界面時(shí)的視覺表現(xiàn)上保持新鮮感。

七、自我反思

全新的電視系統(tǒng)3.0已經(jīng)逐漸展現(xiàn)在大家的面前，無論在用戶交互體驗(yàn)還是視覺體驗(yàn)上都有了很大的提升。設(shè)計(jì)團(tuán)隊(duì)也在上線后會(huì)不斷關(guān)注用戶反饋與數(shù)據(jù)間的變化，用戶的反饋是我們能夠不斷進(jìn)行探索的燈塔。我們不會(huì)停下探索好看、好用的腳步。

本次的改版也并非一帆風(fēng)順，包括與各個(gè)角色的溝通，也走過不少?gòu)澛?，希望隨著自身能力的不斷提升，下一次改版時(shí)能夠提供給我們的用戶更好的體驗(yàn)。

本文由肥貓豆豆 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議