Tuỳ chỉnh thiết kế kiểu Canva — đơn giản & nâng cao
Hai chế độ khách dùng để sửa mẫu: Tuỳ chỉnh nhanh (ngay trên trang sản phẩm) và Tuỳ chỉnh nâng cao (trình chỉnh sửa /editor). Mục tiêu: khách biết ngay ô nào là chữ nào, luôn nhìn thấy thiết kế khi sửa, và trình chỉnh sửa cùng một giao diện với trang chủ (Teal + Liquid Glass).
1. Hiện trạng (chụp trên web thật)
Tuỳ chỉnh nhanh — máy tính
- Rối 32 ô xếp một cột dài, nhãn tự sinh trùng nhau: "Tên thương hiệu" ×10, "Tiêu đề phụ" ×10 → khách không biết ô nào ứng với chữ nào trên thiệp.
- Ô 1 ký tự ("A", "G") cũng rộng bằng ô câu dài; không chia theo mặt trước / mặt trong.
- Không có liên kết ô ↔ vị trí trên ảnh xem trước.
Tuỳ chỉnh nâng cao — máy tính
- Lệch giao diện Header teal đậm, nền xám, panel phẳng, dải cảnh báo vàng — khác hẳn trang chủ sáng, kính nổi.
- Khách mở từ mẫu nhưng panel mặc định là "Văn bản" với các mẫu chữ quảng cáo ("GIẢM 50%") thay vì nội dung của chính họ.
- Không có bước xem lại trước khi thêm vào giỏ (chữ tràn khung, gần mép cắt…).
Điện thoại — tuỳ chỉnh nhanh
Khi gõ ô, ảnh xem trước đã trôi khỏi màn hình → sửa mù, phải cuộn lên xem rồi cuộn xuống sửa tiếp.
Điện thoại — nâng cao
Thiết kế chỉ chiếm 1/3 màn hình (zoom 20%), thanh dưới 4 mục chung chung, nút giỏ hàng chỉ là icon.2. Học từ Canva, Zazzle và các web đặt in
Canva
Thanh công cụ theo ngữ cảnh
Chọn đối tượng → thanh công cụ nhỏ hiện ngay trên đối tượng (chữ: font, cỡ, màu; ảnh: cắt, lọc). Nút "»" mở panel sửa đầy đủ. Panel bên trái ~350px, trên điện thoại thành ngăn kéo toàn chiều rộng.Zazzle
Hai đường: nhanh & đầy đủ
Nút "Cá nhân hoá" mở ngăn kéo chỉ chứa chữ/ảnh của mẫu; muốn hơn thì "Sửa bằng công cụ thiết kế". Công cụ có 3 bước Thiết kế → Tuỳ chọn → Xem lại; bước Xem lại liệt kê lỗi (ảnh mẫu chưa thay…) và bấm vào lỗi thì nhảy tới chỗ sửa.DesignNBuy
7 lỗi làm mất đơn
Sửa chữ trong popup · panel che thiết kế · xem trước trong popup · điện thoại làm sau · ẩn thao tác hay dùng · canvas chậm (>3s) · không có đường "Thêm vào giỏ" rõ ràng. Thước đo: mấy lần bấm để đổi một chữ?Nguồn: Canva — editor mới · Canva Apps — bố cục panel · Zazzle Design Tool 101 · Zazzle — cá nhân hoá trên trang sản phẩm · DesignNBuy — 7 lỗi UX web-to-print · Printbox — UX bán sản phẩm cá nhân hoá
3. Mockup — Tuỳ chỉnh nhanh (trang sản phẩm)
Bấm vào chữ trên thiệp hoặc vào ô bên phải — hai bên sáng cùng nhau. Ô đánh số khớp số trên thiệp, chia theo mặt, ô ngắn xếp 2 cột.
1Minh Khang
2Thu Hà
3TRÂN TRỌNG KÍNH MỜI QUÝ KHÁCH
417 GIỜ 00 · THỨ BA · 05/11/2025
5KHÁCH SẠN HOA SEN
6Số 12 Đường Mẫu, Quận Mẫu, TP. Mẫu
7M
8H
9WEDDING
Bấm chữ trên thiệp để sửa
Tuỳ chỉnh nhanh
💍 Mặt trước 9 ô
1
2
3
4
5
6
7
8
9
📜 Mặt trong 23 ô
Nhãn ("Tên chú rể", "Thời gian"…) do designer đặt; mẫu cũ chưa đặt thì hiện nội dung gốc làm nhãn, không còn "Tên thương hiệu" ×10.
Trên điện thoại
Minh Khang
Thu Hà
KHÁCH SẠN HOA SEN
M
H
Mặt trước · 2/9⤢ Phóng to
1
2
3
750.000 đ
100 thiệp
100 thiệp
Điểm chính trên điện thoại
- Khi bấm vào một ô, thiệp thu nhỏ dính trên đầu màn hình, chữ đang sửa sáng đỏ → luôn thấy kết quả.
- Bàn phím bật lên vẫn còn thấy thiệp (form chiếm nửa dưới).
- Chạm "Phóng to" để xem thiệp lớn; chạm chữ trên thiệp để nhảy tới ô.
- Thanh giá + "Đặt in" giữ ở đáy như hiện nay.
4. Mockup — Tuỳ chỉnh nâng cao (editor)
Cùng ngôn ngữ với trang chủ: header kính nổi bo tròn, nền sáng có ánh teal, thanh công cụ trái và panel là thẻ kính nổi, thanh dưới dạng viên thuốc. Bố cục giữ nguyên cấu trúc hiện có (đã giống Canva) — chủ yếu thay vỏ và mặc định cho khách.
SMV
Tệp · Thiết kế · Trợ giúp
① Thiết kế›② Tuỳ chọn in›③ Xem lại
✓ Đã lưu trên máy
↶ ↷
✎Nội dung
TChữ
▣Ảnh
✦Đồ hoạ
⇪Tải lên
◫Mẫu
☰Lớp
Nội dung của bạn
Các chữ được phép sửa trong mẫu
1
2
5
4
Cần xem lại (1)
Ô 6 "Địa chỉ" dài hơn khung → chữ có thể bị tràn. Sửa ngay
Ô 6 "Địa chỉ" dài hơn khung → chữ có thể bị tràn. Sửa ngay
Minh Khang
Thu Hà
TRÂN TRỌNG KÍNH MỜI QUÝ KHÁCH
17 GIỜ 00 · THỨ BA · 05/11/2025
Playfair ▾23BI≡●Hiệu ứng»
KHÁCH SẠN HOA SENSố 12 Đường Mẫu, Quận Mẫu, TP. Mẫu
M
H
WEDDING
Nền|Lưới · Bắt dính
− 54% +⤢
Trên điện thoại
SMV↶ ↷
Minh Khang
Thu Hà
KHÁCH SẠN HOA SEN
M
H
Mặt trước · 1/2 · vừa khung (không còn 20%)
5
✎Nội dung
TChữ
▣Ảnh
＋Thêm
❐Trang
Điểm chính editor
- Vỏ dùng chung bộ thành phần trang chủ (
kinh, nút teal, ô bo tròn) — bỏ header teal đậm, nền xám, dải vàng. - Khách mở từ mẫu → mặc định tab Nội dung (danh sách ô giống Tuỳ chỉnh nhanh, dùng chung code).
- Chọn chữ → thanh công cụ nhỏ hiện ngay trên chữ; "»" mở đủ tuỳ chọn (như Canva).
- 3 bước Thiết kế → Tuỳ chọn in → Xem lại; Xem lại cảnh báo chữ tràn / sát mép cắt / ảnh mẫu chưa thay, bấm cảnh báo nhảy tới chỗ sửa.
- Nút "Thêm vào giỏ" có giá, luôn hiện; trên điện thoại có chữ, không chỉ icon.
- Điện thoại: thiết kế vừa chiều ngang, công cụ trong ngăn kéo nửa màn hình, 5 tab rõ nghĩa.
5. Kế hoạch
| Giai đoạn | Việc | Ước tính |
|---|---|---|
| A · Tuỳ chỉnh nhanh chỉ frontend |
A1 Chia ô theo mặt/trang + sắp theo vị trí trên thiệp (trên→dưới, trái→phải) A2 Số thứ tự ô hiện trên ảnh xem trước; ô ngắn xếp 2 cột, ô dài dùng ô nhiều dòng; ô tìm kiếm khi >12 ô; nút Đặt lại A3 Liên kết 2 chiều: bấm ô → chữ sáng trên thiệp (tự lật sang đúng mặt); bấm chữ trên thiệp → nhảy tới ô A4 Điện thoại: thiệp thu nhỏ dính trên đầu khi đang sửa A5 Nhãn: dùng nhãn designer đặt; nhãn tự sinh trùng (vd "Tên thương hiệu" ×10) → hiện nội dung gốc làm nhãn | ~1,5 ngày |
| B · Editor đồng bộ trang chủ |
B1 Vỏ mới: header kính nổi, nền sáng ánh teal, rail + panel thẻ kính, thanh dưới viên thuốc; bỏ dải vàng → chip "Đã lưu" B2 Thay màu cứng bằng token chung ( --primary, kinh, Button/Input của UI kit)B3 Khách mở từ mẫu → mặc định tab "Nội dung" (dùng lại danh sách ô của A) B4 Thanh công cụ nổi theo ngữ cảnh kiểu viên thuốc + nút "»" B5 3 bước + màn Xem lại (chữ tràn, sát mép cắt, ảnh mẫu chưa thay) + nút giỏ có giá luôn hiện B6 Điện thoại: canvas vừa khung, ngăn kéo nửa màn hình, 5 tab | ~2,5 ngày |
| C · (tuỳ chọn) Cho designer đặt nhãn/nhóm ô | Thêm ô "Tên hiển thị" + "Nhóm" trong panel đánh dấu trường của admin (lưu trong JSON sẵn có — không đổi schema); gợi ý nhãn từ nội dung mặc định | ~0,5 ngày |
Không đổi: cách vẽ Konva, lưu thiết kế, giá, đặt hàng, API. Không thêm thư viện. Mỗi giai đoạn deploy riêng, chụp trước/sau và đo lại tốc độ (không làm chậm trang sản phẩm).
6. Cần bạn chốt
Q1 · ATuỳ chỉnh nhanh nằm ở cột phải (như mockup mục 3) — khuyên dùng
Ít thay đổi bố cục trang, khách quen sẵn. Thiệp bên trái luôn dính khi cuộn.
Ít thay đổi bố cục trang, khách quen sẵn. Thiệp bên trái luôn dính khi cuộn.
Q1 · BNút "Cá nhân hoá" mở màn sửa nhanh toàn màn hình (kiểu Zazzle)
Thiệp to hơn, tập trung hơn; nhưng thêm một bước bấm và trang sản phẩm mất phần form.
Thiệp to hơn, tập trung hơn; nhưng thêm một bước bấm và trang sản phẩm mất phần form.
Q2 · AXem lại chỉ cảnh báo, không chặn — khuyên dùng
Khách vẫn thêm giỏ được; tránh mất đơn vì cảnh báo nhầm.
Khách vẫn thêm giỏ được; tránh mất đơn vì cảnh báo nhầm.
Q2 · BChặn thêm giỏ khi còn lỗi nặng (chữ tràn ra ngoài vùng in)
Ít đơn lỗi in hơn, nhưng có thể làm khách bỏ ngang.
Ít đơn lỗi in hơn, nhưng có thể làm khách bỏ ngang.
Q3 · ALàm luôn giai đoạn C (designer đặt nhãn ô)
Nhãn chuẩn "Tên chú rể", "Giờ đón khách"… nhưng designer phải đặt lại cho mẫu cũ.
Nhãn chuẩn "Tên chú rể", "Giờ đón khách"… nhưng designer phải đặt lại cho mẫu cũ.
Q3 · BĐể sau — khuyên dùng
Dùng nội dung gốc làm nhãn trước (A5), xem phản hồi rồi mới bắt designer làm thêm.
Dùng nội dung gốc làm nhãn trước (A5), xem phản hồi rồi mới bắt designer làm thêm.