PayTV-Guidelines-export-low-res

TV GUIDELINES Primary Secondary

COLOR MÀU SẮC Màu chủ đạo Màu phụ trợ

Màu hiển thị trên TV có thể trông khác biệt so với màu thể hiện Teal Light green
trên màn hình mày tính hoặc thiết bị di động và một số sự kết
hợp về màu sắc sẽ không hiệu quả. Cho nên, trên màn hình TV, #007DC0 #007DC0
màu sắc sử dụng sẽ tối hơn màu sắc trên giao diện máy tính
và di động từ 2 đến 3 cấp độ. Dark Blue Green
Trên bảng sắc độ màu, biên độ nên chọn là từ 700 đến 900.
#007DC0 #007DC0
Grayscale
Dark teal Dark green
Sắc độ trắng đến đen
#007DC0 #007DC0

Opacity

Màu trong suốt

Shadow

Màu đổ bóng

Shadow 1 Shadow 2 Shadow 3 Shadow 4 Shadow 5

Ai #00000 Ai #00000 Ai #00000 Ai #00000 Ai #00000

Mode Multiple Sample Mode Multiple Sample Mode Multiple Sample Mode Multiple Sample Mode Multiple Sample
Opacity 30% Opacity 40% Opacity 50% Opacity 65% Opacity 80%
X offset 0px X offset 0px X offset 0px X offset 0px X offset 0px
Y offset 0px Y offset 0px Y offset 0px Y offset 0px Y offset 0px
5px 8px 10px 20px 10px
Blur Blur Blur Blur Blur

TV GUIDELINES

FONTs TYPOGRAPHY SIZE RANGE ROBOTO

Màn hình TV nhìn chung có kích thước lớn hơn hẳn kích thước ĐỘ LỚN CHO PHÉP FONT STYLE
màn hình của máy tính và các thiết bị di động, nên khoảng các
tầm nhìn của người dùng cũng lớn hơn. 3 meters AaBbCc
Vì thế, kích thước chữ trong các nội dung/ tiêu đề cũng phải
được sắp đặt ở kích thước đủ lớn trong khoảng nhỏ nhất và lớn Non-essential contents (eyebrown) not smaller than 18px Roboto
nhát cho phép. Minimum size of text not smaller than 24px
Tùy vào độ tuổi mà khỏan cách khác nhau, chúng ta có kích Maximum size of text not over 94px ABCDEFGHIJKLMNOPQRSTUVWXYZ
thước chữ nhỏ nhất cho nội dung không quan trọng (không abcdefghijklmnopqrstuvwxyz
cần phải được chú ý quá nhiều). 0123456789
Các kích thước font chữ nhỏ nhất cho phép là 24px và lớn nhất ~%!@#$%^&*-_=+
cho phép là 94px [ ] { } ( ) | \ / < > ‘’”, . ; : ?

Grayscale 24px 32px 44px 62px User position FONT WEIGHT

Sắc độ trắng đến đen 94px KIỂU CHỮ
Max size
Readability requirement ExtraLight Medium
ExtraLight Italic Medium Italic
TV screen Min size Light Bold
Light Italic Bold Italic
Resource | https://www.toptal.com/designers/ui/tv-ui-design Regular Black
Regular Italic Black Italic

TEXT OPACITY

CHỮ TRONG SUỐT

MAX SIZE Roboto Regular 94 #fffffff 100% #0000000 100%
70% 70%
MID SIZE 1 Roboto Light 62 Primary 30% Primary 30%
MID SIZE 2 Secondary Secondary
MID SIZE 3 Roboto Regular 44 Disable / Hint Disable / Hint
MIN SIZE
Roboto Regular 32

Roboto Regular 24

NON-ESSENTIAL Roboto Regular 18

TV GUIDELINES

BACKGROUND MÀU NỀN

IMAGE BACKGROUND GRADIENT GRADIENT WITH IMAGE

HÌNH NỀN MÀU CHUYỂN SẮC MÀU CHUYỂN SẮC KẾT HỢP HÌNH NỀN

Front Back Front Mid
#0000000 #0000000
70% #0000000
70% 70%
Front
Back Back
70%

TV GUIDELINES Safe zone

COMPOSITION BỐ CỤC 90% diện tích của màn hình TV
IMAGE BACKGROUND

HÌNH NỀN

32px Roboto Regular 18pt

32px ROBOTO Regular 94px

Roboto Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
Regular has been the industry's standard dummy text ever since the 1500s, when an unknown
24px printer took a galley

50px 50px Icon title 50px 32px

A 30 32px 305px x 305px
A 20px
Corner
VA 2 32px 6px
20px
20px

305px x 305px 305px x 305px 305px x 305px 305px x 305px

Corner Corner Corner Corner
6px 6px 6px 6px

1920 x 1080

10px 10px 10px 10px

TV GUIDELINES INPUT FIELDs

ELEMENTs KHUNG NHẬP THÔNG TIN

Corner
6px

CÁC KÍCH THƯỚC & KHOẢNG CÁCH

KÍCH THƯỚC ICON 36px AVATAR 20px
50px
36px 36px Roboto Regular 24pt 86px Placeholder Roboto Regular 32 #ffffff 30%
50px 20px

24px 24px Stroke 3

700px Fill #00000

16px Fill opacity 50%

36px Roboto Regular 24pt

KÍCH THƯỚC ICON 50px Corner 20px
6px
86px Roboto Regular 32 #ffffff 100%
20px 20px Stroke 3

50px 50px Roboto Regular 24pt 700px Fill #00000

24px Fill opacity 50%

20px 20px 20px

ICON CANH GIỮA VỚI TEXT 20px
50px
86px Placeholder | Roboto Regular 32 #ffffff 30%
20px 20px

Roboto Regular 24pt

700px Stroke 0

Fill #fffffff

Fill opacity 50%

ICON VỚI TEXT

655px Corner
6px

122px Title thông báo Roboto Regular 30px 20px

A 20px 86px Disable | Roboto Regular 32 #ffffff 20%
A 20px

Title thông báo Roboto Regular 24px

50px Stroke 0

700px Fill #fffffff

32px Fill opacity 150%

*NOTE: Width có thể tùy biến theo từng giao diện, height không được thay đổi

TV GUIDELINES

ELEMENTs

BUTTONs

CÁC NÚT NHẤN

Corner Shadow 2
6px
Ai #00000

Mode Multiple
Opacity 40%
X offset 0px
Y offset 0px
8px
Blur

20px

86px ACTIVE - Roboto Regular 32 #ffffff 100%
20px

700px Stroke 0

Fill #007DC0

Fill opacity 1500%%

NORMAL- Roboto Regular 32 #ffffff 90%

DISABLED- Roboto Regular 32 #ffffff 50%

TV GUIDELINES

ELEMENTs BOXes
KHUNG NỘI DUNG / ỨNG DỤNG

138px

11px MỚI NHẤT NÊN XEM XEM NHIỀU LIÊN HOAN PHIM BOM TẤN HÀNH ĐỘNG PHIM NGẮN 50px

R=30px 244px 210px 210px 210px 210px 210px 210px Roboto
11px Regular
210px 32px
11px
400px A 34
306px A
306px
306px
306px
306px
306px
306px
306px
306px VA 0
306px
306px
306px
306px
306px

210px 210px 210px 210px 210px 210px 210px R=30px

Tiêu đề phim Tiêu đề phim Tiêu đề phim Tiêu đề phim Tiêu đề phim Tiêu đề phim Tiêu đề phim
Movie title Movie title Movie title Movie title Movie title Movie title Movie title

210px 210px 210px 210px 210px 210px 210px

306px
306px
306px
306px
306px
306px
306px
306px
306px
306px
306px
306px
306px
306px

210px 210px 210px 210px 210px 210px 210px

Tiêu đề phim Tiêu đề phim Tiêu đề phim Tiêu đề phim Tiêu đề phim Tiêu đề phim Tiêu đề phim
Movie title Movie title Movie title Movie title Movie title Movie title Movie title

TV GUIDELINES TRUYỀN HÌNH GIẢI TRÍ ZOOM OUT / ZOOM IN TĂNG ĐỘ SÁNG PHẦN MỀM IPV6 CÀI ĐẶT CHUNG KHÔNG CÓ KẾT NỐI LỖI KẾT NỐI
GIẢM ĐỘ SÁNG
ELEMENTs
ICON LIST V-1.0

DANH SÁCH ICONs

CHƯA YÊU THÍCH THÊM YÊU THÍCH BỎ YÊU THÍCH ĐÃ YÊU THÍCH TÌM KIẾM ZOOM IN ZOOM OUT GIẢM ÂM PLAY PAUSE TUA TỚI, LÙI XEM LẠI 24H

QUAY LẠI TĂNG ÂM XEM LẠI 48H ĐẶT LỊCH HỦY LỊCH CÀI ĐẶT NHIỀU HƠN NGANG NHIỀU HƠN DỌC MENU HÌNH ẢNH CAST THÔNG BÁO

CAST THÀNH CÔNG XÓA HỘP THƯ 1 TÀI KHOẢN CÁ NHÂN THÙNG RÁC TOÀN MÀN HÌNH ĐĂNG KÝ TÀI KHOẢN BÀN PHÍM BÀN PHÍM ẨN GIÁM SÁT TRẺ EM THỂ THAO

HỘP THƯ ĐẾN

INPUT GAMES OUTPUT KẾT NỐI CẬP NHẬT ỨNG DỤNG LOADING ÂM THANH TẮT ÂM THANH HỢP ĐỒNG PHIM TRUYỆN THIẾU NHI TRUYỀN HÌNH

SỰ KIỆN THÔNG TIN MỞ KÉT USB QUAY LẠI DANH SÁCH YÊU THÍCH ĐỔI TÀI KHOẢN THUYẾT MINH MỞ TIẾNG KARATIVI NGẮT TIẾNG KARATIVI EPG TRUYỀN HÌNH XEM LẠI

MOSAIC TẮT THÔNG BÁO THÔNG BÁO LỖI POWER HOME MENU CHUYỂN CHẾ ĐỘ XEM PHỤ ĐỀ BACK NEXT UP DOWN
TỪ TIVI QUA ĐIÊN THOẠI

TV GUIDELINES

ELEMENTs BÀN PHÍM / KEYBOARD
KHUNG NHẬP THÔNG TIN

80px

M80px M 80px 80p

NORMAL ACTIVE 530p

Roboto Medium 62pt 86px 20px

Roboto Regular 22pt 32px Placeholder Roboto Regular 32 #ffffff 30%
20px
32px 16px
32px 32px Stroke 3
Roboto Regular 24pt
700px Fill #00000

180px 16px Fill opacity 50%

16px 16px 16px

36px Roboto Regular 24pt Roboto Regular 24pt Roboto Regular 24pt Roboto Regular 24pt

123456789 0

400px Q WE R T Y U I Y P @

131px TRỢ GIÚP AADF GHJ KL - & TIẾP THEO 131px

Z X C V B N M, . _ ? 186px

186px

=/# abc <>