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