應用UE/UI設計指南
version1.0 in 2012.8.1 By huan UED

通過簡約的介面設計，清除人與機器的隔閡，將輕鬆帶入生活。一個符合使用者的互動介面在更好的展現產品同時，亦能為使用者帶來不一樣的華麗體驗。 通過統一的標準詮釋，降低使用者對於介面設計元素的理解難度，提高可用性。

UI部分

一．    整體佈局

TV裝置的解析度為720P，16:9的顯示比例，即1280px*720px，在設計中，主體內容與螢幕邊緣需要保留至少30-50px的空餘，不宜太滿。如圖：
基於電視端的簡潔性原則，在產品的設計上通常不會考慮三欄或者三欄以上的佈局方式。多以兩欄佈局為主，上下或者左右可以自由設計；通欄的佈局通常以網站主導航為主要元素，清晰展現產品內容形式，點選進入後層層展開
簡潔的結構讓使用者能夠更快速的找到自己想要的內容與服務。在不失簡潔的情況下，內容的佈置上靈活多變。

二．    字型及字號

內容性文字在裝置端預設顯示為黑體。 字號方面，通常的內容名稱字號不小於24px。欄目標題不小於32px。提示性文字可控制在18-20px為宜。
三．    顏色
1，焦點，選中狀態下的顏色：

2，背景： 深色為主，要求可以清晰辨認產品內容，方便使用者的操作。不會因為大面積的高亮度色彩給使用者造成視覺疲勞。

四．    焦點原則及樣式
突出的焦點樣式可以更好的聚焦當前的操作狀態。起到很好的指示作用，是影響使用者使用產品時是否流暢的一個重要因素。
在焦點的處理上需要注意以下幾點： 1，  色彩上與背景和其它元素有明顯的差異； 2，  圓角表現 文字的各種狀態呈現：
按鈕的各種狀態呈現：
圖片的焦點狀態呈現：
五．    圖示

以簡潔的圖示方式並配以簡短文字展現欄目特性
此處強調的是不同應用環境下的易用性、可識別性。

六．    彈出框樣式及位置

提示框在整個介面中上下居中。文字為24px。 針對不同的提示狀況，需選擇不同的圖示以精準表達提示意圖。 無需確認的提示框出現3秒後，自動消失 需要使用者確認的提示框，焦點需預設在選擇按鈕上。 所有提示框需要有較強的識別性，文字精簡。在視覺上需要與整體介面有明顯的區分。

七．    APP ICON

128px*128px

UE部分
規範常用的UE規範，使得電視端的體驗統一，不斷完善和改進的使用者體驗，為使用者提供更好、更方便的體驗服務

一．    遙控器按鍵功能

1，確認鍵 主要作用為選取確認，啟用選取框。 2，方向鍵 主要作用為移動焦點，選擇目標等 在TV端，焦點的移動原則為就近原則 3，返回鍵 主要作用為返回上一級頁面，如果當前頁為首頁，則返回鍵將撥出退出確認框 4，選單鍵 主要作用為撥出系統選單，不建議在產品設計中使用 5，子選單鍵 主要作用為撥出產品的選單欄，用於輔助產品的功能性擴充套件選擇 6，飛梭 主要作用為電視端的音量調整，不建議在產品設計中使用

二．    預設焦點位置

焦點的位置能清除表明產品的業務從哪裡開始的。 系統預設的焦點位置是螢幕中最上面最左邊的連結。產品設計中可以自由定義。

三．    導航

導航設計對提供豐富友好的使用者體驗有至關重要的地位，簡單直觀的導航不僅能提高產品的易用性，更能精準表達產品資訊。 業務邏輯層級通常不超過三層。導航需要清晰明瞭。 需要突出導航區域，則應該與其他的內容在視覺上有所區別。 如果因為內容過多需要子導航時，要讓使用者容易地分辨出哪個是主導航條，哪個是某主題的子導航條

四．    翻頁方式

每一個內容頁面必須提供明確的翻頁指示。如圖：
或者將未顯示全的圖片展示出來，明確告訴使用者還有內容：
通常不建議使用上一頁下一頁的翻頁方式，而造成使用者在操作上的負擔。 當頁面內容為整屏翻頁時，必須明確顯示當前頁所處的位置，頁碼多時，不要一次把所有頁碼都顯示出來。如圖