整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML5方興未艾，但也有不少遺憾。下面提了10點希望在HTML6中看到的特性，歡迎評論。
我們可能永遠(yuǎn)不會解決與壓縮編解碼器的爭斗，但我們可以與之配合。不同的壓縮算法可能需要更多的工作來實現(xiàn)，但是它們提供競爭。能對展現(xiàn)在頁面上的視頻幀提供更多控制的方式會是更好的方案。當(dāng)前的標(biāo)準(zhǔn)是使用視頻中的一系列幀填充一個矩形。然后提供了一個帶有注釋，字幕和其他內(nèi)容的文本軌道的控制。一些聰明的人已經(jīng)開始將注釋與其他DOM對象同步。但是如果有回調(diào)鉤子和同步機(jī)制是不是更好？例如，DOM與視頻混合的能力如何？
照片在屏幕上看起來要漂亮，需要多少像素？這個答案根據(jù)根據(jù)設(shè)備的不同而不同。即使窗口的大小也會改變最小分辨率。但HTML標(biāo)準(zhǔn)
<img>
標(biāo)簽只能獲得一個SRC，它指向一個可能有太多或太少像素的圖像文件。如果它太多，瀏覽器必須降級圖像才能顯示，這就浪費網(wǎng)絡(luò)帶寬和時間。如果像素太少，效果又太差。更好的HTML協(xié)議應(yīng)該為圖像提出所需的寬度或高度，以便服務(wù)器可以提供最佳分辨率。
標(biāo)準(zhǔn)的HTML瀏覽器使用且只是用JavaScript。但由于某些原因，我們需要用script標(biāo)簽的type屬性設(shè)定為text/javascript來指定語言類型。從html4開始，type一直就沒有默認(rèn)值。
HTML4的建議稿覺得有人可能會使用像text/tcl或text/vbscript這樣的類型，但是實際上有沒有人使用這些？微軟已經(jīng)棄用了IE11的text/vbscript，而且近年來Sun在使用tcl。
Google正在慢慢推Dart，但包括Dart的Chromium（Chrome的開發(fā)版）確有一個不祥的警告 ：“不要使用Dartium作為主瀏覽器，不要將Dartium分發(fā)給用戶！”說明Google對Dart也不是很有信心。
但在未來，我們可以擁有更強大的可插拔語言。它將為開發(fā)人員增加更多的靈活性和設(shè)計選擇。會不會把互聯(lián)網(wǎng)弄壞？如果有一個穩(wěn)固的開源實現(xiàn)，它就可以被所有瀏覽器采用。可能很難讓網(wǎng)站使用可插入語言來為廣泛的受眾提供內(nèi)容 - JavaScript會可以繼續(xù)擁有廣泛的網(wǎng)絡(luò)基礎(chǔ) - 但是對于使用專門語言的更專業(yè)的擴(kuò)展來說，這可能是一個很好的選擇。
想超越JavaScript的開發(fā)人員可以有另外一個解決方案，就是將其他語言轉(zhuǎn)換為JavaScript。許多開發(fā)人員已經(jīng)使用一些翻譯語言（如CoffeeScript）的預(yù)處理器。
杰里米·阿什肯納斯（Jeremy Ashkenas） 列出來了可以編譯成JavaScript的語言列表，范圍很廣。Lisp，Python，Ruby，Erlang，Scala - 列表還在繼續(xù)擴(kuò)大。
這樣的提案將會付出代價。當(dāng)一種語言被交叉編譯成JavaScript時，通常會在同一時間進(jìn)行細(xì)化，生成一個更小的更容易通過互聯(lián)網(wǎng)傳輸?shù)陌姹尽Ｔ诓渴疬^程中執(zhí)行此操作比在每個人的瀏覽器上執(zhí)行的效率要高得多。
但是，縮小的版本有其缺點。開放一直是網(wǎng)絡(luò)的巨大優(yōu)勢之一。我們能夠通過閱讀通常仍然以人類可讀的形式寫的JavaScript代碼來學(xué)習(xí)和調(diào)試。交叉編譯和縮小的代碼對于其他人是無價值的。它正在慢慢打破Web的開放性。
在瀏覽器中執(zhí)行此轉(zhuǎn)換還有其他優(yōu)點。每臺機(jī)器都有不同，轉(zhuǎn)換過程需要利用到RAM大小、視頻卡庫等知識。當(dāng)前版本的HTML假定采用JavaScript的一般版本，這使得為本地機(jī)器優(yōu)化代碼變得更難。
JavaScript編程的世界已經(jīng)被jQuery以及其他標(biāo)準(zhǔn)庫改造了。然而，幾乎每個網(wǎng)站仍然要加載自己加載某個版本的副本。在加載jQuery時浪費的能量可能足以照亮一個小國家，治愈癌癥或兩者兼而有之。
一些網(wǎng)站使用像Google或Yahoo這樣的公司托管的標(biāo)準(zhǔn)緩存版本，這樣可以節(jié)省帶寬，但下一個HTML標(biāo)準(zhǔn)應(yīng)該比這更好。如果大量設(shè)計人員同意，則可以使用瀏覽器進(jìn)行分發(fā)。這將節(jié)省更多時間再次刷新jQuery的緩存版本。
瀏覽器已經(jīng)可以共享位置信息。期待更多國家加入。人們通常希望在自己設(shè)備的聯(lián)系信息庫里面放入電子郵件地址或電話號碼。現(xiàn)在他們必須剪切和粘貼。為什么不讓JavaScript挖掘并保存所有的剪切和粘貼？這對移動設(shè)備來說是非常棒的。在交互上可以提供細(xì)粒度的控制，允許人們來自某些域的代碼可以自動訪問到聯(lián)系信息，而其他域不行。
在網(wǎng)絡(luò)攝像頭和手機(jī)的多攝像頭提供的設(shè)備基礎(chǔ)上，用戶與瀏覽器交互的場景少不了鏡頭和麥克風(fēng)。W3C已經(jīng)在探索一種向表單添加照片或視頻捕獲的方法 。一些瀏覽器已經(jīng)支持自己的版本，如
webkitGetUserMedia
。很容易想到更多。表單元素還可以訪問存儲在設(shè)備中的存儲空間，并且該設(shè)備可以更好地控制攝像機(jī)和捕獲速率。這將讓網(wǎng)站與專門的應(yīng)用程序競爭。
鑒于構(gòu)建可信硬件是多么困難的事情，因此我們可能會提供很多硬性和快速認(rèn)證的方式。而瀏覽器可以為此提供更多的功能。瀏覽器可以使用嵌入式Key進(jìn)行簽名，而不是Cookie。這些可以以硬化的芯片存儲在設(shè)備之外，以防止人們提取密鑰。向瀏覽器添加API將允許網(wǎng)站要求更好的數(shù)字簽名。如果把太多的信任放在其中，這可能是危險的，但這將是cookie和會話身份驗證的一個步驟。
文章底部的注釋部分只是我們?nèi)绾巫⑨屛恼碌拈_始，但是一個標(biāo)準(zhǔn)的結(jié)構(gòu)可以添加與段落、句子、甚至單詞相關(guān)的注釋。復(fù)雜的版本甚至可以允許對視頻內(nèi)的圖像或某個時間點進(jìn)行注釋。有些網(wǎng)站正在開始提供這些功能，但在標(biāo)準(zhǔn)化API方面會使所有網(wǎng)站和瀏覽器都以相同的方式處理基本注釋。W3C有一個研究該領(lǐng)域并提供基本標(biāo)準(zhǔn)的小組。
HTML標(biāo)簽區(qū)分標(biāo)題，段落和頁腳，但還不夠多。為什么不創(chuàng)建一個標(biāo)準(zhǔn)的方法來指定其他常見的細(xì)節(jié)，例如地址或電話號碼的部分？當(dāng)然，用于描繪電子郵件地址的標(biāo)準(zhǔn)標(biāo)簽可以使垃圾郵件發(fā)送者的生活變得更輕松，但標(biāo)準(zhǔn)的一組標(biāo)簽可以加速網(wǎng)頁抓取工具和搜索引擎，這將有利于我們所有人。W3C一直在探索微格式來標(biāo)記數(shù)據(jù)，并曾經(jīng)認(rèn)為它們是HTML5的一部分，盡管它們不是。我們可以為地點，時間，日期，出售物品，參考書目以及所有標(biāo)準(zhǔn)數(shù)據(jù)使用更全面的標(biāo)記。
迎來到我的專題文章《前端面試題》系列，更多精彩內(nèi)容持續(xù)更新中，歡迎關(guān)注！
正如標(biāo)題，很多面試官喜歡問這類的問題。它主要考查的是前端開發(fā)者對于瀏覽器的渲染原理的理解程度。那么目的是什么呢？請往下看。
面試的時候，我只是簡單的回答了一個請求處理響應(yīng)的模型，這很顯然不能讓面試官滿意，結(jié)果很明顯，面試失敗。后來回家后仔細(xì)研究一番，下面給出我個人的總結(jié)吧。
比如我們現(xiàn)在要訪問的是百度的首頁。
一、域名解析
當(dāng)用戶輸入一個網(wǎng)站敲了回車后，瀏覽器首先尋找你身邊最近的DNS服務(wù)器做域名解析，如果用戶不是第一次輸入這個網(wǎng)站，那么瀏覽器可能從緩存中去拿到之前解析過的IP。這個緩存可以有以下幾種情況
二、建立TCP鏈接
域名解析完成后，瀏覽器和服務(wù)器之間就要開始建立tcp鏈接，也就是我們常說的三次握手的操作。
這里需要注意的是，有可能第二次握手的時候，有可能是服務(wù)器很忙，正在處理其它的業(yè)務(wù)需求導(dǎo)致不能立馬響應(yīng)瀏覽器的請求，將會把瀏覽器的請求駁回。這時候，請求將中斷。
三、瀏覽器發(fā)送請求
瀏覽器將請求發(fā)送到服務(wù)器。然后接下來就是http協(xié)議的通信內(nèi)容。這一塊本身也比較復(fù)雜，這里不再展開了說。
四、接受響應(yīng)
服務(wù)器開始處理瀏覽器提交過來的請求報文。比如瀏覽器每次提交的時候會帶著cookie相關(guān)的信息。
五、服務(wù)器處理響應(yīng)
服務(wù)器接收到請求后，開始做出響應(yīng)。并返回結(jié)果。比如我們訪問的是百度的首頁，這時候百度的服務(wù)器會將百度首頁的html以字符串的形式發(fā)送給瀏覽器。
六、渲染頁面
瀏覽器接收到服務(wù)器返回的內(nèi)容后，開始解析響應(yīng)報文。
大概也就是這幾個步驟了吧。當(dāng)然，瀏覽器的渲染過程要比我列舉的要復(fù)雜的多。
值得注意的是：我們可能能將這些步驟完整的說出來，但是在面試的時候，不能只是說出來這些步驟，我們還要去擴(kuò)展我們自己的一些觀點。
不然面試官問這個瀏覽器的渲染原理有何意義呢？
前面的步驟中我有提到，當(dāng)瀏覽器開始生成布局計算每一個節(jié)點的幾何信息的時候，會比較消耗性能。
涉及到性能優(yōu)化的問題，緊接著我們可以帶出與瀏覽相關(guān)的dom優(yōu)化的觀點。比如，我們在做dom優(yōu)化的時候，盡可能的減少頁面的重排和重繪。
可以說，在前端開發(fā)過程中，頁面的重排和重繪，是絕對的性能殺手。尤其是重排。那么哪些情況會帶來頁面的重排和重繪呢？
到這里，從瀏覽器的渲染原理，到我們引出瀏覽器相關(guān)的dom優(yōu)化。這樣的回答應(yīng)該才是面試官想聽到的吧。
瀏覽器的沉浸原理在網(wǎng)上可以搜到很詳細(xì)的資料大家酌情選擇回答即可，但是也不能直接照搬，從瀏覽器的渲染原理一定要引出自己的一些觀點。
只是一味的按網(wǎng)上的回答，也并不一定能使面試官滿意。希望我的回答能夠幫助到正在和即將要找工作的你們、
這里是【暢哥聊技術(shù)】的《前端面試題》專題系列。更多內(nèi)容持續(xù)更新中。
下期我們接著聊，未完待續(xù)。。。
產(chǎn)決定消費，電視載體創(chuàng)新、互聯(lián)網(wǎng)視頻服務(wù)和技術(shù)之間的交替促進(jìn)，推動著大眾家庭影音體驗的升級。那么，如何設(shè)計電視大屏的家庭影音應(yīng)用呢？一起來看一下吧。
回顧以前，我們看電視只能看CCTV、江蘇衛(wèi)視、湖南衛(wèi)視這些直播內(nèi)容，可是我們不滿足于直播節(jié)目，想要去廣告想要看收費內(nèi)容想要回放看上課時播出的電視劇。讓我印象很深刻的是那種點播臺，要打電話用話費點播，來來回回就放的那幾個動畫。現(xiàn)在，我們可以在電視上語音搜索到熱門網(wǎng)絡(luò)劇，訂閱歐冠英超球賽直播、選擇各家綜藝影視等等。
生產(chǎn)決定了消費，正是電視載體創(chuàng)新、互聯(lián)網(wǎng)視頻服務(wù)和技術(shù)之間的交替促進(jìn)在推動著大眾家庭影音體驗的升級。如何設(shè)計電視大屏的家庭影音應(yīng)用，就是我接下來想要分享的內(nèi)容，我打算先從電視和手機(jī)的幾個不同講起。
用戶—上下文場景—行為—工具或媒介—目的。
不同的場景下人和物都有不盡相同的交互方式。
我們使用手機(jī)時的用戶使用場景可以是移動的，在地鐵上在衛(wèi)生間，利用碎片化時間，而電視通常都是被固定在客廳臥室這樣的居家場景中，使用時長是整段的，一般集中在晚上時段。
場景：在什么時間，什么地點，什么樣的環(huán)境，最后發(fā)生什么事情；
電影里場景的分類：內(nèi)景、外景、實體場景、虛擬場景。
在居家場景中，電視是全家的公共設(shè)備，覆蓋不同年齡段的人。尤其是老人和小孩，各年齡段使用時段也很不同。因此使用電視時，用戶學(xué)習(xí)成本要低，操作要求更簡單，還有不同模式切換。
而手機(jī)作為個人物品，更具隱私、個性化的特征。手機(jī)雖然各種交互感應(yīng)很靈敏，但是相對的，操作要求更精確，學(xué)習(xí)成本高。
與手機(jī)相比，電視不適合承擔(dān)功能型的操作任務(wù)，作為一個家庭休閑娛樂設(shè)備，使用場景和功能相對單一。休閑娛樂是電視的主要用途，還有學(xué)習(xí)、智能助手、家居控制、裝飾等。
與移動端不同，電視體驗發(fā)生在不同的空間中，并且需要在3米外清晰可見。在近場交互時實體與觸控是第一選擇，而當(dāng)中遠(yuǎn)場交互時語音成為輸入方式的第一選擇，遙控器這種遠(yuǎn)程遙控的實體輸入方式學(xué)習(xí)成本低而被保留至今。
人們經(jīng)常以輕松的心態(tài)使用電視，希望獲得一種觀看小屏無法獲得的身臨其境的娛樂體驗。電視相比于手機(jī)更注重沉浸式體驗，做到電影般的效果。
首先，在設(shè)計電視端時，我們可以參考安卓和蘋果的TV端設(shè)計原則來主導(dǎo)界面設(shè)計，其次我們依舊可以根據(jù)設(shè)計五要素去思考界面設(shè)計的方向。
1）配合場景的暗色模式
電視的使用場景：夜晚的客廳環(huán)境——具有弱光、安靜、舒適的特點，因此我們一般都采用暗色主題，讓背景色融入場景氛圍，以此突出內(nèi)容。內(nèi)容和背景的對比也不需要過于明顯，背景顏色的選擇不宜過黑而無法辨別出圖片的陰影。在主題高亮色上避免使用過于飽和以免產(chǎn)生刺眼的感覺。
2）海報內(nèi)容一目了然
一般電視里也分為應(yīng)用圖標(biāo)與內(nèi)容推薦，它們都需要在3米外就能被清楚地識別出來。每一個圖片的色調(diào)可以統(tǒng)一區(qū)別于背景。
圖片內(nèi)使用簡單的背景讓主體脫穎而出，并且不會壓倒附近的內(nèi)容。使用過多的漸變反而會減弱整體的對比，因此應(yīng)該減少圖片內(nèi)顏色的使用，讓主要內(nèi)容凸顯。
3）避免主題色刺眼和失真
純白色 (#FFFFFF) 在明亮的電視屏幕上可能會非常刺眼，建議將淺灰色 (#EEEEEE) 作為深色背景上的默認(rèn)文本顏色。同樣部分高亮主題色運用到電視界面設(shè)計時也需要注意，尤其是紅、黃、橙色系，這些顏色會特別嚴(yán)重地失真。
4）文字可識別
由于遠(yuǎn)距離閱讀大量文字會使眼睛疲勞，要認(rèn)真考慮文本顯示的字?jǐn)?shù)，能用圖像或者動畫交流就避免使用文字。確保各類字體在遠(yuǎn)處清晰可見，一般系統(tǒng)字體不要小于22px（12sp），也盡量精簡字體樣式并避免過細(xì)的字重。
1）常見電視尺寸
主流電視尺寸一般在43-85寸之間，常見的有43、50、55、60、65、75等，消費者根據(jù)觀看距離選擇適合的電視尺寸。電視屏幕的尺一般都遵循16:9的電視畫面寬高比。我們一般使用1920×1080為最小畫布，是當(dāng)下最常見的電視分辨率，所有圖片資源都是@1x 分辨率。隨著4K內(nèi)容的普及，也可以使用1920×1080，但是需要提供應(yīng)提供@2x圖的圖像。
提問：1920×1080的電視是幾K？1080P就是指1920×1080的分辨率大小嗎？
2）畫布尺寸與安全區(qū)設(shè)置
由于在舊電視上存在過度掃描，可能會發(fā)生意外裁剪，需要留出安全區(qū)，使主要內(nèi)容遠(yuǎn)離屏幕邊緣。一般上下左右留出畫布5%左右的距離。
3）顯色差異明顯需要測試
各家電視主打畫質(zhì)作為賣點，價格各有不同，各家的畫質(zhì)處理技術(shù)也不同，可見各家屏幕的畫質(zhì)一定有一些區(qū)別。區(qū)別主要在于顯色、色域、控光、畫質(zhì)等，總結(jié)就是顯色差異明顯，我們應(yīng)該在消費者主要使用的電視型號上進(jìn)行顯示測試。尤其是綠色、紅色、黃色等顏色容易明顯色差。
正是有了這樣一個外設(shè)輸入源，就需要考慮觸碰但未觸發(fā)的上焦?fàn)顟B(tài)（focused），正如當(dāng)有鍵盤就有輸入時，當(dāng)鼠標(biāo)懸浮時。TV焦點態(tài)的設(shè)計即遵循安卓一般設(shè)計原則，也有它的獨特性。
1）D-PAD十字交互與網(wǎng)格布局
我們可以把D-PAD和屏幕間的交互形式，稱為“十字線性交互”，也正是這種交互形式?jīng)Q定了輸出端的界面布局的基本形式。
在這個大屏里，我們的焦點只能按照D-PAD的指揮走水平或者垂直線，每一個位置的路徑只能走二維的“十”線，這樣可以更好引導(dǎo)用戶到達(dá)他想要的內(nèi)容。（這里運用了非常典型的親近性原則）
設(shè)計師和開發(fā)都熟悉用柵格的形式來布局橫版頁面，而電視上更常采用間距統(tǒng)一的網(wǎng)格形式來規(guī)范內(nèi)容集合，方便遠(yuǎn)程瀏覽，也可以方便遙控器快速導(dǎo)航。設(shè)計可以根據(jù)內(nèi)容自定列數(shù)，最多甚至可以達(dá)到9列。
2）焦點在空間中的層次
位置與方向感：在安卓設(shè)計語言中，我們可以通過不同控件在Z軸上不同的位置來劃分控件間的層次。通常是通過陰影的變化來表現(xiàn)。因此，我們?yōu)榱送怀鼋裹c所在的位置，焦點一般會有明顯的陰影。以外可能還會添加別的樣式來加強它。
同時，為了明確指向D-PAD所能到達(dá)的位置，我們在設(shè)計布局時，也需要避免控件間出現(xiàn)重疊。
即Z軸方向，只有一個焦點和普通兩種層級，且（可上焦的）普通層級相互不重疊。
1）家庭共享下的多模式
輸入源除了考慮輸入設(shè)備本身，還可以考慮多個來自多個人，可能是多人協(xié)作或者多人共用。在居家環(huán)境這個場景下，根據(jù)使用者的不同提供對應(yīng)賬號下的信息頁面，以及多人共同進(jìn)行電視操作。
2）年齡分段模式呈現(xiàn)不同內(nèi)容與UI
在多個用戶的模式下，就需要對不同用戶進(jìn)行分類，電視端常見的用戶模式有：兒童、普通、長輩三種模式。
三種模式下，視覺上色調(diào)、背景、間距、焦點態(tài)、字號、內(nèi)容海報都有相應(yīng)的調(diào)整。它意味著很多控件是需要做成自定義的。（運營也可以對其進(jìn)行配置的）
3）常駐的“新手”提示和引導(dǎo)
電視還是一種公共設(shè)備，不同時段有不同的人使用它。不同年齡層對智能電視的操作熟悉度也不同，我們在做有引導(dǎo)的頁面設(shè)計時，也會做成可重復(fù)提示的過程頁面，而非一次性引導(dǎo)。常見的如按鈕文案設(shè)計成操作描述的文案，以及焦點帶氣泡提示等。
在首頁用戶更多的是找尋感興趣的內(nèi)容，用戶選中一個內(nèi)容就可以立即看到視頻內(nèi)容。所以在這里推薦使用獲取焦點即執(zhí)行的方式，能夠節(jié)省找尋成本。用戶點擊確認(rèn)鍵即可進(jìn)入播放頁面。
一種是背景圖片跟隨焦點進(jìn)行切換并自動播放。
一種是焦點聚焦到內(nèi)容且未移動時，自動播放墊片內(nèi)容，無需進(jìn)入二級，所選即時播放。
電視應(yīng)用的層級少，結(jié)構(gòu)扁平，下面我將舉例如何思考一個大屏頁面的信息排布以及頁面焦點的一些設(shè)計重點。
安卓設(shè)計指南里列出了幾種常見的頁面結(jié)構(gòu)：瀏覽視圖、詳細(xì)視圖、消費視圖、搜索視圖。這幾類頁面結(jié)構(gòu)基本上就構(gòu)成了TV端瀏覽一個內(nèi)容的流程，從語音或推薦項目里選擇一個內(nèi)容，進(jìn)入詳情并開始觀看的一個主要流程。
在appleTV中對應(yīng)的頁面效果如下圖所示，都無一不體現(xiàn)大畫布背景+不拆分視圖帶來的沉浸感，并且沒有多余的狀態(tài)欄標(biāo)題欄。
一個常見的流程如下：我們在瀏覽視圖和詳細(xì)視圖里或者搜索視圖里選擇了觀看內(nèi)容后，進(jìn)入消費視圖（視頻播放頁），同時可能主動或被動選擇相關(guān)內(nèi)容，跳轉(zhuǎn)播放或畫中畫播放。
咪咕愛唱是一款主要通過會員付費為用戶提供音樂類版權(quán)內(nèi)容（包括音樂MV、K歌伴奏、演唱會）的產(chǎn)品。
當(dāng)我們從行為開始考慮，一個K歌的信息頁面有什么時，我們可以想到，家庭K歌行為下，對應(yīng)著多人控制、多年齡段使用，平鋪直敘的排版方式是最好，一眼進(jìn)來最好能看到即時的K歌伴奏MV，有可以讓多人同時操作點歌的二維碼，支持方便的語音搜索。
在確定的功能點模塊基礎(chǔ)上，根據(jù)沉浸式的目的和十字交互的規(guī)則，我重新規(guī)劃了一種以即時播放未主要中心的首頁布局，展示的內(nèi)容其實沒有變化，但是整個頁面不再是被劃分的卡片而是有主次的功能和信息的排布。
新規(guī)劃的沉浸式布局1
新規(guī)劃的沉浸式布局2
消費視圖里不僅承載了最重要的視聽內(nèi)容，還有一些個性化推薦的服務(wù)和功能，因此在設(shè)計時，需要提到頁面最前來考慮。
純歌詞內(nèi)容視圖，歌詞逐字上屏是K歌獨有一種展示形式，LRC歌詞本身有時間刻度，所以這里我將時間進(jìn)度條和歌詞關(guān)聯(lián)，用戶上下移動選擇單句歌詞更加直觀，而不是快進(jìn)或后退。
內(nèi)容推薦+歌詞展示內(nèi)容視圖，其實這個是上一個頁面選擇播放列表后的頁面效果，我傾向于給每個歌曲生成封面圖。（一般每個歌曲都會有圖片或者M(jìn)V）
視頻展示內(nèi)容視圖，在播放內(nèi)容時，盡可能減少選擇內(nèi)容對沉浸式觀影的體驗，當(dāng)然后期針對運營需求可以權(quán)衡。
常用的深色調(diào)配色當(dāng)然能更好突出，但是考慮與白天的氛圍匹配，淺色調(diào)也可以，淺色背景上的陰影更能明顯突出焦點層次，更重要的是，按鈕背景的顏色在不同素材上都能顯示出來。以及所有圖片整體的色調(diào)選擇。
暗黑帶透明度按鈕背景顏色在兩種背景上的表現(xiàn)
中度灰?guī)该鞫鹊陌粹o背景顏色
當(dāng)然每一個電視大屏的目標(biāo)用戶不盡相同，還是要根據(jù)主要人群來設(shè)計和規(guī)劃。因為K歌產(chǎn)品也是一款既有兒童又有老年人用戶的產(chǎn)品。因此針對不同用戶，頻道的風(fēng)格也有一些區(qū)別。
我們不管是從國外的應(yīng)用如網(wǎng)飛和亞馬遜也好，還是從國內(nèi)的幾家頭部視頻網(wǎng)站也好，我們可以發(fā)現(xiàn)影視作品的封面也呈現(xiàn)出以下我舉例的一些方向和風(fēng)格。我們在做電視端應(yīng)用的圖片展示時，更應(yīng)該遵循那種精簡、干凈、光效統(tǒng)一的風(fēng)格。
以前一些設(shè)計舉例
1）遙控器與焦點的狀態(tài)
控件狀態(tài)需要多少種只跟輸入源有關(guān)系。比如你輸入源是鼠標(biāo)+鍵盤，那么 focus (給鍵盤）、 hover （給鼠標(biāo)）、active （給鼠標(biāo)/鍵盤按下），然后細(xì)膩點你還會想要加入 disabled。正是由于遠(yuǎn)距離交互+按鍵的形式，電視端的焦點態(tài)的形式有很大的不同。
電視端焦點態(tài)存在的目的是，方便用戶時刻都清晰且明確地知道自己的光標(biāo)在哪里，可以移動到哪里。——通過焦點的統(tǒng)一性、即時性來進(jìn)一步明確地告訴電視這端的用戶停在了哪里，可以往哪里走。
蘋果TV統(tǒng)一的焦點態(tài)樣式
控件的狀態(tài)和輸入端的形式是強關(guān)聯(lián)的。輸入源是D-PAD，那么控件焦點態(tài)就是二維的，輸入源是觸控盤，那么控件焦點態(tài)就可以是三維動態(tài)的。
蘋果電視的焦點態(tài)動態(tài)圖
國內(nèi)由于強運營的需要，對于電視焦點態(tài)的設(shè)計五花八門，想盡了心思，層層疊加。
2）焦點動效與遙控方向
我們總覽兩大設(shè)計原則，都提到了電影體驗、沉浸式體驗，一些小屏幕的細(xì)微變化（比如spring）會被放大而顯得復(fù)雜過度，我們可以想象看電影時掉幀卡頓的糟糕體驗，電視端的動畫時為了在人和屏幕上的內(nèi)容之間創(chuàng)造一種視覺上的聯(lián)系。
和移動端一樣的也可以按照這樣的分類來考慮：啟動動畫、反饋動畫、轉(zhuǎn)場動畫。也可以按照交互動作來考慮，僅在響應(yīng)用戶操作時使用，比如在考慮入場和出場動畫時，出場動畫可以考慮統(tǒng)一——對應(yīng)遙控器上的返回鍵，而入場動畫則考慮兩個點：
因為電視端更多是一種圖片列表的展示形式，因此圖片列表的展示經(jīng)常以視差運動出現(xiàn)，表現(xiàn)一種大屏上縱向內(nèi)容源源不斷的出現(xiàn)的感覺。
3）沉浸式的焦點效果
目前在瀏覽器和電視端已經(jīng)可以看到這樣的效果——即當(dāng)你滾動瀏覽推薦行時，只要在圖像上停留超過一兩秒鐘，每個標(biāo)題的預(yù)覽視頻就會開始自動播放。這是在電視上一種非常直覺性的交互，就像很久以前我們打開電視就有生動的音畫一樣。
電視具有數(shù)十年的期望值，當(dāng)您打開電視時，可以播放視頻和音頻。因此，有一個沉默的經(jīng)歷實際上是很奇怪的。
如果還想深入優(yōu)化優(yōu)秀的大屏端動態(tài)效果可以去PS這類游戲主機(jī)系統(tǒng)里取取經(jīng)。對于大屏設(shè)計如何精進(jìn)，我認(rèn)為還是從主機(jī)端游戲界面設(shè)計可以瞥見一隅。未來大屏就是AR眼鏡，就是VR，電視的那套東西已經(jīng)被搬進(jìn)了小小主機(jī)和輕便的眼鏡里。
本文主要以交互設(shè)計的5個要素為框架，從電視與手機(jī)的不同著手分析電視的特有屬性，繼而引出界面設(shè)計一些特殊點，最后以一個電視端K歌APP設(shè)計舉例，從布局、配色、焦點態(tài)設(shè)計等幾個面展開詳細(xì)說明。
參考資料:
本文由 @皮質(zhì)大獎得主 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
