Mỗi mẫu là một hệ thiết kế đầy đủ gồm CẢ bố cục lẫn màu/chữ/bo góc — chuyển theme trong Cài đặt là đổi cả hai. Cả 10 mẫu render cùng một bộ phim và cùng các màn (trang chủ, lưới, chi tiết, tìm kiếm, trình phát, cài đặt, hộp thoát) để anh so công bằng. Các mẫu lấy mẫu hình đã chứng minh từ Apple TV app, Netflix, Plex, Infuse, Jellyfin, Stremio, Disney+/Max/Prime — học cách làm, không chép thương hiệu — và đều bị bó theo dữ liệu thật của nguồn (tên phim tới 71 ký tự, poster 2:3, nhãn FHD/số tập).
Cách xem: bấm tên màn dưới mỗi mẫu để mở render 1920×1080 — trên điện thoại anh phóng to hoặc xoay ngang để nhìn kỹ. Trang chủ/grid là bề mặt cuộn dọc nên render cắt ở 1080px theo chiều cao; trong app thật thì cuộn tiếp.
1 Xanh Đá Banh — đúng hướng anh đã lệnh, rủi ro thấp nhất, đặc tả đã xong. 2 Điện Ảnh — nâng cấp cảm giác mạnh nhất cho app phim mà vẫn ở trong họ tối đã chứng minh. 7 Rõ Nét — bảo hiểm cho đúng lời chê cốt lõi của anh: không gì chìm được, và là mẫu nhẹ máy nhất. Á quân: mẫu 10 (nếu anh thích hero bằng poster hơn hero ảnh nền thì đổi 10 lấy 2).
Đây chỉ là đề xuất — anh xem cả 7 mẫu còn lại ở dưới và toàn quyền thay đổi.
Hệ thiết kế xanh của Đá Banh TV, áp nguyên vẹn cho Joe TV.
Lấy cảm hứng từ: Đá Banh TV (đã chạy tốt trên máy của anh) + sự tiết chế của Apple TV app.
Khác app hiện tại ở bố cục: Giữ nguyên hình học/bản đồ màn hình hiện tại — chỉ thay cách dựng: chữ nằm gọn trong mặt thẻ, một khuôn bo 22 cho cả hai trạng thái, ô nhập sáng theo thiết kế, thêm hộp thoại thoát.
Điểm hay:
Điểm yếu nói thẳng: Ít mới lạ nhất trong 10 mẫu — nếu anh muốn lần redesign này phải thấy khác hẳn, đây là lựa chọn an toàn chứ không phải lựa chọn gây ấn tượng. Chung họ màu với Đá Banh, sự phân biệt nằm ở bố cục và thương hiệu Joe TV.
Cổng kỹ thuật (Team UI-3): ĐẠT — không ghi chú.
Xem render: Trang chủ · Lưới phim · Chi tiết · Tìm kiếm · Trình phát · Cài đặt · Hộp thoát
Trang chủ điện ảnh: ảnh nền lớn của phim nổi bật phủ màn hình, các dãy phim lặng ở dưới.
Lấy cảm hứng từ: Màn hình chính kiểu billboard của Netflix + trang chi tiết của Max.
Khác app hiện tại ở bố cục: Trang chủ có thêm HERO ảnh nền cao 640px (dùng ảnh ngang 780×438 mà mọi nguồn đều có sẵn) với các nút nổi trên ảnh; trang chi tiết cũng dẫn bằng ảnh nền, poster đè lên.
Điểm hay:
Điểm yếu nói thẳng: Hero chiếm chỗ của một dãy phim trên màn hình đầu; chất lượng ảnh nền bị giới hạn ở ảnh ngang 780×438 (lên TV 4K sẽ hơi mềm); đỏ crimson là gu mạnh, xem lâu có thể ngán.
Cổng kỹ thuật (Team UI-3): ĐẠT kèm điều kiện khi xây: render để dải mờ dưới chữ tan hẳn vào ảnh — khi xây phải thêm một lớp nền tối tối thiểu dưới toàn bộ vùng chữ (trên ảnh nền sáng, đuôi dòng chữ có thể chìm); ô hero cần ảnh ngang nên nguồn chỉ có poster đứng (Torrent) không cấp được ô này.
Xem render: Trang chủ · Lưới phim · Chi tiết · Tìm kiếm · Trình phát · Cài đặt · Hộp thoát
Dễ đọc là thiết kế: vàng trên đen, mọi thứ to hơn, không một lớp trong suốt nào.
Lấy cảm hứng từ: Các mẫu TV ưu tiên khả năng đọc của nền tảng — focus phải unmistakable ở khoảng cách 3 m.
Khác app hiện tại ở bố cục: Thẻ to hơn (ảnh 264, 5 thẻ/hàng), chữ +2 cỡ ở thẻ/dãy/cài đặt, mọi bề mặt đặc 100% (không gradient, không alpha), huy hiệu thành khối vàng/đen đặc, hàng cài đặt cao hơn.
Điểm hay:
Điểm yếu nói thẳng: Trông ít 'cao cấp' nhất — cố ý thực dụng; vàng rất nổi, xem lâu có thể gắt; ít thẻ mỗi hàng hơn nên cuộn nhiều hơn.
Cổng kỹ thuật (Team UI-3): ĐẠT — không ghi chú. (Vòng focus 6pt, vàng trên đen 14.9:1 — cao nhất cả bộ.)
Xem render: Trang chủ · Lưới phim · Chi tiết · Tìm kiếm · Trình phát · Cài đặt · Hộp thoát
Kệ thư viện sáng: nền ngà ấm, ngăn nắp, dễ nhìn ban ngày.
Lấy cảm hứng từ: Thanh điều hướng bên trái của Plex/Jellyfin + bề mặt sáng của Apple.
Khác app hiện tại ở bố cục: Thanh BÊN TRÁI 320px thay cho hàng nút trên đầu (logo + các mục đứng, có cả Tìm phim); nội dung dịch sang phải; lưới phim thành bề mặt duyệt chính (5 thẻ/hàng trong cột hẹp hơn).
Điểm hay:
Điểm yếu nói thẳng: UI sáng trong phòng khách tối có thể chói vào buổi tối — đúng bối cảnh xem chính của anh; màu poster kém nổi trên nền trắng; thanh bên ăn 320px chiều ngang của các dãy phim.
Cổng kỹ thuật (Team UI-3): ĐẠT — không ghi chú.
Xem render: Trang chủ · Lưới phim · Chi tiết · Tìm kiếm · Trình phát · Cài đặt · Hộp thoát
Gần như không còn khung: chỉ còn poster và chữ, một điểm nhấn chanh điện duy nhất.
Lấy cảm hứng từ: Chủ nghĩa tối giản của Infuse.
Khác app hiện tại ở bố cục: Hàng nút thu thành TAB CHỮ (mục đang chọn = gạch chân màu nhấn); không hero; các dãy thoáng hơn (khoảng cách 34) và mặt thẻ lặng hơn; tab tìm kiếm nhập vào hàng tab.
Điểm hay:
Điểm yếu nói thẳng: Trạng thái 'đang chọn' ở tab chỉ là gạch chân — yếu hơn nút đặc khi nhìn từ 3 m; màu chanh kén gu; tối giản nghĩa là bất kỳ màn hình cẩu thả nào về sau sẽ lộ ngay.
Cổng kỹ thuật (Team UI-3): ĐẠT kèm ghi chú: riêng tab điều hướng, focus chỉ đổi màu + đậm chữ, không có vòng — nhưng chanh trên đen là 13.9:1 (cao thứ nhì cả bộ) nên không lẫn được; thẻ và nút vẫn có vòng chuẩn. Nếu anh chọn mẫu này, thêm vòng cho tab là một quyết định một dòng khi xây, không phải thiết kế lại.
Xem render: Trang chủ · Lưới phim · Chi tiết · Tìm kiếm · Trình phát · Cài đặt · Hộp thoát
Kính băng cao cấp: ảnh phim nổi bật phủ mờ toàn màn hình, các panel kính nổi trên.
Lấy cảm hứng từ: Ngôn ngữ vật liệu mới của tvOS — nhưng 'đóng băng' sẵn thành hình tĩnh, KHÔNG dùng hiệu ứng mờ trực tiếp (luật hiệu năng của nhà cấm).
Khác app hiện tại ở bố cục: Trang chủ: ảnh nền phủ toàn màn hình qua lớp phủ ~72%, khối giới thiệu nổi trên, dãy phim ở dưới; các nút thành capsule kính; trang chi tiết cũng dẫn bằng ảnh nền nhưng bo mềm hơn (26).
Điểm hay:
Điểm yếu nói thẳng: Tương phản chữ phụ thuộc ảnh nền phía sau (đã có lớp phủ 72% + dải mờ đỡ, nhưng vẫn là mẫu khó đoán nhất về độ rõ); nếu cổng kỹ thuật thấy kính đóng băng khó tái hiện đúng bằng giá trị SwiftUI, đây là mẫu dễ lệch khỏi render nhất.
Cổng kỹ thuật (Team UI-3): ĐẠT kèm điều kiện khi xây (ghi chú cứng nhất bộ): không hề dùng mờ trực tiếp và không cần dùng; nhưng mọi chữ nằm trên ảnh nền chỉ qua lớp phủ 72% — gặp ảnh nền sáng nhất, chữ trắng chỉ còn ≈3.2:1. Khi xây bắt buộc nâng lớp phủ sau các vùng chữ lên mức bảo đảm (≥85%) hoặc lót đặc sau khối chữ — bản thật sẽ 'kém thoáng' hơn render một chút. Cộng thêm lưu ý cần ảnh ngang như mẫu 2.
Xem render: Trang chủ · Lưới phim · Chi tiết · Tìm kiếm · Trình phát · Cài đặt · Hộp thoát
Tờ áp phích arthouse: chữ serif, đồng thau, các dãy được đánh số.
Lấy cảm hứng từ: Thiết kế biên tập kiểu Criterion + bảng màu rạp ấm.
Khác app hiện tại ở bố cục: Tiêu đề dãy đánh số ('01 — Mới cập nhật'); trang chi tiết CĂN GIỮA toàn bộ (poster, tên, tóm tắt, nút đều giữa) — mẫu duy nhất căn giữa; hàng chọn nguồn/tập quay về trái ở dưới.
Điểm hay:
Điểm yếu nói thẳng: Serif ở cỡ chữ phụ nhỏ thì yếu hơn (chữ phụ vẫn để sans — đã ghi trong render); đồng thau trên nền tối ≈7:1 — tốt nhưng dưới mẫu 1 và 7; chi tiết căn giữa là phần xây thêm lớn hơn mẫu chi tiết chia đôi dùng chung.
Cổng kỹ thuật (Team UI-3): ĐẠT — không ghi chú.
Xem render: Trang chủ · Lưới phim · Chi tiết · Tìm kiếm · Trình phát · Cài đặt · Hộp thoát
Duyệt bằng panel xem trước: panel thông tin sống cạnh các dãy phim, nền xanh đêm sâu.
Lấy cảm hứng từ: Hành vi xem trước của Apple TV app + nền xanh của Max.
Khác app hiện tại ở bố cục: Trang chủ chia đôi: panel TRÁI 560px (luôn hiện) chiếu đầy đủ thông tin + tóm tắt + nút xem của phim đang focus; cột PHẢI hai dãy × 4 thẻ; focus ở trong dãy, panel đi theo (chỉ thay nội dung, cấu trúc cố định).
Điểm hay:
Điểm yếu nói thẳng: Dãy hẹp còn 4 thẻ/hàng (cuộn ngang nhiều hơn); panel là trang chủ phức tạp nhất để xây và kiểm; nền xanh dương chính là thứ từng bị khuếch đại trên màn của anh ở v1.8 — ở đây xanh là chủ đích và đồng nhất, nhưng em ghi rõ để anh tự phán xét.
Cổng kỹ thuật (Team UI-3): ĐẠT kèm điều kiện khi xây: panel chưa có giới hạn dòng — render vừa với tóm tắt mẫu ~400 chữ, nhưng tóm tắt thật ~700 chữ (và tên phim 71 ký tự) có thể đẩy panel tràn màn hình. Khi xây phải khóa panel (tên ≤2 dòng, tóm tắt ≤8 dòng + dấu …) — không đổi bản chất bố cục.
Xem render: Trang chủ · Lưới phim · Chi tiết · Tìm kiếm · Trình phát · Cài đặt · Hộp thoát
Trang phim của một tờ báo: masthead, đường kẻ mảnh, serif, một điểm nhấn đỏ son.
Lấy cảm hứng từ: Thiết kế in biên tập dịch sang TV.
Khác app hiện tại ở bố cục: Trang chủ có MASTHEAD (logo căn giữa + đường kẻ đề ngày tháng phía trên hàng nút); tiêu đề dãy bằng serif, màu nhấn chỉ xuất hiện ở tên phim đang focus (vòng focus là trắng giấy); bo góc hạ xuống 4 (gần như vuông in ấn) ở mọi nơi.
Điểm hay:
Điểm yếu nói thẳng: Ngôn ngữ in ấn có thể trông 'khô' cạnh các app streaming; serif + đề ngày là một canh bạc gu; vòng focus trắng trên chữ trắng giấy tương phản sắc độ vẫn cao nhưng kém tách màu hơn mẫu 1/7.
Cổng kỹ thuật (Team UI-3): ĐẠT — không ghi chú.
Xem render: Trang chủ · Lưới phim · Chi tiết · Tìm kiếm · Trình phát · Cài đặt · Hộp thoát
Trình duyệt cơ bắp: bề mặt graphite cục, cam tín hiệu, hero dẫn bằng poster.
Lấy cảm hứng từ: Trang chủ của Plex + mật độ của Android TV.
Khác app hiện tại ở bố cục: Hero trang chủ là POSTER CHIA ĐÔI (poster 2:3 khổ 264×396 trong thẻ + thông tin đầy đủ bên phải) thay vì hero ảnh nền — dồn màn hình cho loại ảnh vốn có độ phân giải cao thật; thẻ to lên 256, khoảng cách 32.
Điểm hay:
Điểm yếu nói thẳng: Hero poster kém 'điện ảnh' hơn hero ảnh nền; cam + huy hiệu FHD + thanh tiến độ đỏ là ba điểm nhấn ấm phải giữ kỷ luật (thanh tiến độ giữ đỏ theo ngữ nghĩa); thẻ 256 thì một hàng hiện 5 thẻ + một thẻ ló.
Cổng kỹ thuật (Team UI-3): ĐẠT — không ghi chú.
Xem render: Trang chủ · Lưới phim · Chi tiết · Tìm kiếm · Trình phát · Cài đặt · Hộp thoát
| # | Mẫu | Nền | Nhấn / Focus | Điều hướng | Hero | Ảnh thẻ | Bo | Hợp nhất cho | Giá phải trả chính |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Xanh Đá Banh | đen tuyền | xanh #0D5C4D / vòng cyan | nút viên | không | 240 | 22 | hướng anh đã lệnh, rủi ro thấp nhất | ít mới lạ nhất |
| 2 | Điện Ảnh | #0A0A0A | đỏ crimson / vòng trắng | nút viên | ảnh nền 640 | 240 | 10 | cảm giác rạp phim | hero ăn một dãy; ảnh nền bị cap 780×438 |
| 3 | Kệ Sáng | ngà sáng | xanh dương / vòng xanh | thanh bên | không | 232 | 16 | đọc ban ngày | chói buổi tối; dãy hẹp |
| 4 | Tối Giản | đen | chanh / vòng chanh | tab chữ | không | 240 | 12 | yên, không khung | trạng thái chọn yếu hơn |
| 5 | Kính Băng | gần đen teal | băng / vòng cyan nhạt | nút viên | ảnh nền toàn màn | 240 | 26 | cảm giác flagship | tương phản theo ảnh nền |
| 6 | Rạp Ấm | than ấm | đồng thau / vòng hổ phách | nút viên | không | 240 | 14 | cá tính, hợp phim cổ trang | chi tiết căn giữa = xây thêm |
| 7 | Rõ Nét | đen đặc | vàng / vòng vàng 6pt | nút viên | không | 264 | 18 | không gì chìm được | trông thực dụng; 5 thẻ/hàng |
| 8 | Nửa Đêm | xanh đêm sâu | xanh trời / vòng trời | nút viên | panel xem trước | 232 | 20 | chọn phim nhanh nhất | trang chủ phức tạp; 4 thẻ/hàng |
| 9 | Giấy & Mực | #111110 | đỏ son / vòng trắng giấy | masthead + nút | không | 240 | 4 | như tạp chí phim | canh bạc gu; hơi khô |
| 10 | Graphite | graphite | cam / vòng cam | nút viên | poster chia đôi | 256 | 16 | hero dùng ảnh nét nhất | kém điện ảnh; giữ kỷ luật màu ấm |
Nhắn lại cho em 3 con số anh chọn — giữ nguyên đề xuất 1·2·7 hay thay bất kỳ mẫu nào trong 7 mẫu còn lại đều được. Chốt xong team mới bắt đầu code; chưa chốt thì chưa code dòng nào.