Script screenshot App Store và Google Play

Hướng dẫn cho designer. Phần hướng dẫn tiếng Việt; mọi chữ nằm trên ảnh (tagline, subline) giữ nguyên tiếng Anh.

Mở bộ sưu tập ảnh →

Mục tiêu

Người lướt App Store chỉ nhìn 3 ảnh đầu (hiện ngay trong kết quả tìm kiếm) trong khoảng 3 giây. Trong 3 giây đó họ phải hiểu: đây là SSH terminal thật, nó trông được cả fleet server, và nó nhảy từ cảnh báo vào shell chỉ bằng một chạm. 7 ảnh còn lại để người đã bấm vào listing tin rằng app này làm việc nghiêm túc.

Người xem

Sysadmin, DevOps, người chạy validator và VPS. Họ dị ứng quảng cáo sến, chỉ tin ảnh chụp app thật với dữ liệu trông như thật. Phần lớn đọc tiếng Anh.

Họ cần mang đi

"App này thay được việc mở laptop lúc 3 giờ sáng." Mọi khung phục vụ đúng một ý này, mỗi khung một chức năng, không nhồi.

Ảnh nguồn

Tất cả ảnh lấy từ bộ sưu tập (app thật, workspace demo "Acme Platform", 24 server). Bản iOS ở mục iOS, Android ở mục Android. Không vẽ lại UI, chỉ đặt vào khung, crop, zoom.

Nhấn mạnh vào gì

Ba trụ, theo đúng thứ tự người xem cần tin:

Khung 1 đến 3

Nó là thật

Terminal thật có màu, có thanh phím Esc, Tab, Ctrl. Cả fleet trong một màn. Cảnh báo mở shell một chạm.
Khung 4 đến 7

Nó làm việc được

tmux sống tiếp từ laptop, file qua SFTP có highlight code, snippet chạy trên nhiều host, duyệt quyền root cho team.
Khung 8 đến 10

Nó an toàn và là của mình

Cùng host với bản desktop, mã hoá bằng passphrase chỉ mình biết, thấy team đang ở box nào, theme theo ý.

Mỗi khung chỉ có một điểm sáng: một callout zoom vào đúng chi tiết đáng tiền (ghi trong từng khung bên dưới). Không mũi tên chỉ lung tung, không nhiều callout.

Tone và mood

Tone chữ

  • Điềm tĩnh, chính xác, hơi khô và có duyên; như một đồng nghiệp ops giỏi nói chuyện.
  • Tagline dưới 30 ký tự, động từ mạnh, không dấu chấm than, không "revolutionary", "ultimate".
  • Không em dash trong chữ trên ảnh. Dùng dấu chấm hoặc dấu phẩy.

Mood hình

  • Ca trực 3 giờ sáng nhưng mọi thứ trong tầm tay: nền tối, sạch, có chiều sâu nhẹ.
  • Ánh xanh emerald của brand làm điểm nhấn duy nhất; đỏ và vàng chỉ khi đó là cảnh báo thật trong app.
  • Không stock photo, không người thật, không bàn phím 3D.

Chữ

Tagline: Inter hoặc IBM Plex Sans, đậm 700 đến 750, 2 dòng tối đa. Chi tiết kỹ thuật (tên host, lệnh): IBM Plex Mono, đúng font app đang dùng.
Nền #0B0D10
Gradient nền #0F1A17
Emerald #34D399
Chữ #E7ECF1
Chữ phụ #8A96A3
Nền rái cá #F3EFE6

Bố cục một khung

  1. Tagline ở 1/6 trên cùng, canh trái, 2 dòng tối đa.
  2. Subline ngay dưới, nhỏ hơn, màu chữ phụ.
  3. Điện thoại chiếm khoảng 70% chiều cao, có thể tràn đáy cho cảm giác "đang cầm". Dùng ảnh gốc độ phân giải cao, không resample nhỏ rồi phóng lại.
  4. Callout (viền emerald) phóng to một chi tiết, đè lệch ra ngoài cạnh máy một chút.
  5. Rái cá (chỉ ở khung được ghi) nhỏ, góc dưới, không che UI.

Rái cá tiết chế: tối đa 3 trên 10 khung

Mascot của OpsCenter là con rái cá (otter). Nó làm listing dễ thương và dễ nhớ, nhưng sản phẩm phải là nhân vật chính. Quy tắc: tối đa 3 khung có rái cá, rái cá không quá 15% diện tích khung, không bao giờ che UI, và không có ở khung 1 (khung 1 dành trọn cho terminal). File gốc trong repo: design/iconic/.

10 khung iPhone thứ tự là thứ tự trên store

Chữ trên ảnh: copy nguyên tagline và subline (nút Copy). Ảnh gợi ý: bấm vào để mở đúng ảnh gốc trong bộ sưu tập, tải PNG từ đó. Ảnh iOS là ảnh chính; ảnh Android để tham khảo hoặc dùng cho Google Play.

Google Play 8 khung + feature graphic

8 khung

Dùng khung 1 đến 8 ở trên, cùng thứ tự, ảnh từ mục Android. Hai chỗ đổi riêng cho Android:
  • Khung 3: tagline "Alerts that reach your phone", vì Android có push.
  • Khung 8: dùng khung thay thế "Your fleet on your home screen" (widget) thay danh sách vault.

Feature graphic 1024 x 500

Rái cá ôm laptop (iconic4) bên trái, tagline "Your servers, in your pocket" bên phải, nền gradient tối, một lát cắt terminal mờ phía sau. Đây là chỗ rái cá được to nhất.

Không được show App Store review sẽ soi

Giá và gói

Không bán gì trên iOS

App iOS là companion miễn phí (guideline 3.1.3(f)). Crop bỏ chip "TEAM PLAN", "Manage billing", số seat, nhãn Pro, nút upgrade.
Hứa quá

Chỉ show cái iPhone làm được

iPhone chưa có push: dùng chữ "alert", không "push". Không nhắc Mosh, jump host, ssh-agent, lưu file tải về.
Dữ liệu thật

Chỉ dữ liệu demo

Host Acme trên 10.42.x.x và 6 người của Acme. Không tên host, IP, email hay key thật nào khác.
Hệ thống

Thanh trạng thái sạch

Giữ nguyên status bar trong ảnh (9:41, sóng và pin đầy). Không icon thông báo, không màn khoá.

Video preview tuỳ chọn, 25 giây, phát không tiếng

Một câu chuyện liền mạch "3:07 AM" trên điện thoại. Chỉ được quay chính app (không màn khoá, không giao diện hệ thống). Chữ trên video là caption tiếng Anh.

Thời gianTrên màn hìnhCaption (EN)
0 đến 3 sHộp cảnh báo trong app, legacy-erp disk 92% ở trên cùng3:07 AM. Disk at 92%.
3 đến 7 sChạm cảnh báo, chi tiết trượt lên, chạm Open shellOne tap to a shell
7 đến 13 sTerminal: tìm thư mục nặng nhất, snippet xoay log chạyFind it, fix it
13 đến 17 sTab Fleet: legacy-erp từ đỏ về xanhBack to green
17 đến 22 sTab Team: một yêu cầu quyền root hiện ra, ApproveYour team signs off from anywhere
22 đến 25 sDanh sách host, rồi logo rái cá và chữ OpsCenterYour servers, in your pocket

Kích thước và bàn giao

StoreSố ảnhKích thước export
App Store, iPhone106.9 inch, 1320 x 2868 dọc (bắt buộc)
App Store, iPadtối đa 1013 inch, 2064 x 2752 (app có chạy trên iPad)
Google Play, điện thoại81080 x 1920 trở lên, 9:16
Google Play, feature graphic11024 x 500

Số liệu kích thước nên kiểm lại trong App Store Connect và Play Console trước khi export. Ảnh iOS hiện chụp trên iPhone 17 Pro (1206 x 2622); cần bản 6.9 inch thì báo, mình chụp lại trên iPhone 17 Pro Max.