/ 前期思考 /

項目背景

智能電視是每個家庭中最常見的設(shè)備，在我們的印象中，電視已經(jīng)被互聯(lián)網(wǎng)所取代，但在《2018年中國智能電視行業(yè)發(fā)展現(xiàn)狀及行業(yè)發(fā)展趨勢分析》一文中可以看到，中國居民人均收視時長仍顯著超過上網(wǎng)時長，53%的智能電視用戶有消費意愿或已消費過。不可否認(rèn)的是，智能電視仍然占據(jù)了一定的流量，同時可以成為一個很好的流量入口。

產(chǎn)品的目標(biāo)便是通過和 TV OS 合作，以答題游戲的方式引導(dǎo)用戶關(guān)注微信公眾號，為用戶推送優(yōu)質(zhì)的學(xué)習(xí)內(nèi)容。

關(guān)于用戶

我們的用戶是誰？他們在什么場景下打開這個應(yīng)用？在這種場景下他們的意圖和偏好是什么？

我們將目標(biāo)用戶定位在二、三線城市的k12及學(xué)前的孩子和他們的家長。他們在一天的工作和學(xué)習(xí)后，回到家打開電視的唯一目的就是休養(yǎng)生息，觀看一些輕松趣味的節(jié)目和內(nèi)容，洗去一身的疲憊。在這種情況下，他們希望電視里的內(nèi)容可以更輕量，沒有太多負(fù)擔(dān)。因此我們的產(chǎn)品應(yīng)該是富有趣味性的，通過趣味性的設(shè)計來吸引家長點擊。

設(shè)計注意點

電視特殊的尺寸、使用場景和交互方式?jīng)Q定了它和移動應(yīng)用、web應(yīng)用在設(shè)計上存在一定的區(qū)別。在為電視這樣的新交互模式設(shè)計界面時，移動端的設(shè)計準(zhǔn)則無法完全適用于電視端，二者的注意點也有所不同。我們需要更多地考慮，如何在大屏和遙控的操作方式下，為用戶提供更好的操作體驗和視聽效果。

在設(shè)計時我們需要提前了解到以下三點給設(shè)計帶來的影響：

·尺寸和距離：

雖然電視屏幕比電腦和手機(jī)要大得多，但是它的信息承載量是比后二者要小的。我們不能期望用戶在電視上去費力尋找某個操作按鈕或文字，所有的一切都要非常清晰地展現(xiàn)在他們面前，讓他們輕松地獲取到相應(yīng)地信息。因此，所有被強(qiáng)調(diào)的信息都應(yīng)該具有很強(qiáng)的可見性。

·交互方式：

智能電視和手機(jī)、電腦極為不同的一點是，它既無法通過觸控進(jìn)行交互，也無法使用鼠標(biāo)進(jìn)行點擊，它只能使用遙控器遠(yuǎn)程操控。在這種情況下，所有的操作都要盡量通過????或者????搭配ok鍵完成，所有的指令需要在屏幕上有清晰的反饋。

·顏色：

由于電視的屏幕飽和度較高，因此在設(shè)計時需要注意不使用飽和度太高的亮色，以免引起視覺疲勞。還需要在測試時注意顏色使用是否有偏差，以便及早調(diào)整。

基于以上幾點考慮，此次應(yīng)用將依照趣味性、TV設(shè)計準(zhǔn)則、可見性作為設(shè)計原則指導(dǎo)設(shè)計。

/ 趣味性 /

結(jié)合產(chǎn)品的設(shè)計目標(biāo)和用戶的使用場景、應(yīng)用名稱「開心答人秀」、答題、夜間等方向進(jìn)行發(fā)散思考，得到了以下的設(shè)計關(guān)鍵詞，根據(jù)設(shè)計關(guān)鍵詞進(jìn)一步確定設(shè)計意向圖（情緒版）。最終結(jié)合趣味性以及知識探索的氛圍，將應(yīng)用設(shè)定為“星空”主題，確定了基礎(chǔ)的設(shè)計風(fēng)格。

/ TV設(shè)計準(zhǔn)則 /

第一次做TV設(shè)計的時候最迷茫的不過，我應(yīng)該使用多大的畫板？多大的字號？頁面元素的大小多少是比較合適的？就像是拿到了一張白紙，無從下手。

著手設(shè)計之前，我翻看了 Apple TV 和 Android TV 的設(shè)計指南，整理出其中對這次設(shè)計有用的點：設(shè)計尺寸、安全邊距以及字號建議。

設(shè)計尺寸

由于我們的tv os是基于android系統(tǒng)的，因此我們選用了1920*1080作為基準(zhǔn)進(jìn)行設(shè)計，同時向下適配720*1080的屏幕。

安全邊距

apple設(shè)計指南建議在屏幕邊緣預(yù)留一定的安全邊距，因此所有的設(shè)計內(nèi)容都應(yīng)該在安全區(qū)域以內(nèi)進(jìn)行設(shè)計。

字號

我在設(shè)計中參考了 Android TV 提供的字號，并且建立了自己的字號使用規(guī)范。

/ 易讀性 /

在設(shè)計實施過程中，需要注意在各個方面滿足易讀性這一要求。可見性具體體現(xiàn)在哪些方面？

減少信息密度

前面提到過，雖然電視屏幕很大，但是用戶可以從中接收的信息是有限的，因此需要盡量減少屏幕上的信息量，呈現(xiàn)出來的內(nèi)容必須是具有易讀性，保證重點突出。在這一點上，交互設(shè)計師給我提供的交互稿已經(jīng)完成得很好了，每個頁面的信息內(nèi)容非常少，我只需要在此基礎(chǔ)上進(jìn)行優(yōu)化即可。

色彩搭配

TV的屏幕飽和度較高，因此在選用顏色時避免使用一些飽和度太高的色彩作為主色。為了減少視覺疲勞，選擇深色作為主色，搭配以相對較為明亮的橙黃色作為強(qiáng)調(diào)色，讓整體畫面舒適卻不失趣味性。同時因為純白色在深色底上會影響閱讀，因此選用了兩個和主色搭配的淺色作為文字色。

露出屏外內(nèi)容

當(dāng)我們的內(nèi)容無法在一個屏幕內(nèi)完全展示，我們需要顯示屏外內(nèi)容的10%-20%，讓用戶明白還有更多的內(nèi)容可供瀏覽。因此在進(jìn)行選擇題目的頁面設(shè)計時，我特意對題目列表的位置進(jìn)行了調(diào)整，確保在完整展示三個題目的前提下，露出第四個題目的一半，讓用戶明白屏幕外還有內(nèi)容。并在此基礎(chǔ)上進(jìn)行循環(huán)展示。

讓焦點更突出

在TV端，突出焦點是非常重要的。由于TV端交互的特殊性，屏幕上始終有一個元素處于聚焦?fàn)顟B(tài)，必須要通過強(qiáng)烈的對比讓用戶知道他正處于什么狀態(tài)，接下來的點擊會觸發(fā)怎么樣的結(jié)果。

對不同的頁面元素的焦點，我采用了不同的設(shè)計方式。對于按鈕及選項的正常狀態(tài)及聚焦?fàn)顟B(tài)，我用了不同的顏色來進(jìn)行對比，同時，聚焦?fàn)顟B(tài)將比正常狀態(tài)的按鈕尺寸大。這一點在移動端或許是沒有必要的，但是在TV端卻是至關(guān)重要的。

而在題目選擇列表處，除了顏色和尺寸的不同外，還有一個小飛碟在右上角，目的也是突出選項，同時契合主題、增加趣味性。

讓動效更生動

在移動端，動效大多時候只能起到錦上添花的作用，但對于TV應(yīng)用的設(shè)計來說，動效也是一種增強(qiáng)可見性的方式。在諾大的屏幕中，動效可以很好地響應(yīng)用戶進(jìn)行的操作，讓用戶注意到他操作的結(jié)果。

因此，我將動效運用在了選擇題目后的倒計時、每道題結(jié)束時、時間到、以及最終結(jié)果展示。對于其中每一個步驟來說，動效都是必不可少的。

制作動效的過程也耗費了大量的時間，需要進(jìn)行不斷的調(diào)試。其中遇到的一個問題是，TV端的動效最佳時長、速度等和移動端都是不同的。

（Material Design建議，在手機(jī)這樣的移動設(shè)備上，動效時長應(yīng)該控制在200～300ms，平板電腦上，這個時長在400～450ms。因為屏幕尺寸越大，元素在發(fā)生位移的時候距離越長，速度一定的情況下，時長自然越長。）

按照這個指導(dǎo)建議，TV的動效時長在2～3s之間。同時，動效時長并不只是跟屏幕大小有關(guān)系，還和需要移動的物體的尺寸有關(guān)系。多次嘗試后，我將不同頁面的動效時長定為了1s和2s。

說到動效就不得不提音效。音效的加入可以讓整個應(yīng)用“活”起來，就像是一個真實的小伙伴在你耳旁反饋。附上最終的成品：

/ 設(shè)計評審 /

最后，如何展示自己的設(shè)計，讓需求方了解到產(chǎn)品背后的思考和設(shè)計理念，最終達(dá)成一致目標(biāo)？在這個項目的logo設(shè)計評審中，我嘗試用一種比較正式的方式將設(shè)計方案進(jìn)行闡述。

除了闡述logo設(shè)計從發(fā)散關(guān)鍵詞到最終完成三個方案的設(shè)計過程，我還將做這個logo的不同考量點一一陳列了出來。在這個項目中，logo應(yīng)該符合「契合度」、「美觀度」、「趣味度」、「識別度」這四個點，同時兼顧背后的「風(fēng)險性」。綜合這些維度客觀地對三個設(shè)計方案進(jìn)行打分，闡述三個方案在不同維度的優(yōu)劣表現(xiàn)，最終得出結(jié)論。通過這種方式，可以將不同方案的優(yōu)劣可視化呈現(xiàn)，讓相關(guān)方在評審中考慮得更全面，同時也更容易理解設(shè)計師選擇這個方案的理由，從而達(dá)成一致意見。

/ 總結(jié) /

這次的TV項目是最近做得最為完整的一個項目，涉及到整體設(shè)計風(fēng)格的把控、界面設(shè)計、動效制作以及最后的應(yīng)用圖標(biāo)。雖然只是一個很小的應(yīng)用，但是我完整演繹了一個應(yīng)用從0到1的設(shè)計過程，從中沉淀了TV應(yīng)用的設(shè)計方法和設(shè)計準(zhǔn)則，還有不同評審方式的嘗試。這種機(jī)會不多得，因此用一篇文章記錄下此次項目的設(shè)計過程作為沉淀。