Tùy chỉnh giao diện và thiết kế
Tìm hiểu cách tùy chỉnh màu sắc, phông chữ và bố cục thiệp mời theo phong cách cá nhân.
Tùy chỉnh giao diện và thiết kế
Biến thiệp mời thành của riêng bạn! Tùy chỉnh màu sắc, phông chữ và bố cục theo phong cách của bạn.
Tìm cài đặt giao diện
Tùy chỉnh ở đâu?
Vị trí:
- Khu vực chỉnh sửa bên trái
- Nhấp tab "Cài đặt giao diện" ở trên
- Hiển thị nhiều tùy chọn tùy chỉnh
Cài đặt chính:
- Màu chính
- Phông chữ (Typography)
- Bố cục
- Hiệu ứng
Giao diện trước hay nội dung trước?
Thứ tự khuyến nghị:
- Trước tiên, nhập tất cả nội dung
- Sau đó điều chỉnh cài đặt giao diện
- Tinh chỉnh khi xem tổng thể hài hòa
Tại sao? Bạn cần nội dung để xem màu sắc và phông chữ có phù hợp không!
Thay đổi màu chính
Thay đổi bảng màu chính của toàn bộ thiệp mời.
Chọn màu chính
Vùng bị ảnh hưởng:
- Màu tiêu đề và phụ đề
- Màu nút
- Màu điểm nhấn
- Màu biểu tượng
Cách chọn màu:
Cách 1: Màu có sẵn
Hồng lãng mạn Xanh dương cổ điển Vàng ấm áp Xanh lá tự nhiên Đen hiện đại Trắng thuần khiết
- Nhấp phần "Màu chính"
- Chọn từ màu có sẵn
- Áp dụng ngay khi nhấp!
Cách 2: Màu tùy chỉnh
- Nhấp "Màu tùy chỉnh"
- Bảng chọn màu xuất hiện
- Nhấp vào màu mong muốn
- Hoặc nhập mã HEX (ví dụ: #FFB6C1)
- Nhấp nút "Áp dụng"
Chọn màu phụ
Phối hợp hài hòa với màu chính!
Vùng bị ảnh hưởng:
- Nền các phần
- Đường phân cách
- Màu chữ nhỏ
Mẹo chọn:
- Tông nhạt hơn màu chính
- Hoặc màu khác cùng họ
- Không quá tương phản
Hướng dẫn phối màu
Lãng mạn:
- Chính: Hồng (#FFB6C1)
- Phụ: Hồng nhạt (#FFE4E8)
- Chữ: Xám (#555555)
Hiện đại:
- Chính: Đen (#000000)
- Phụ: Vàng (#FFD700)
- Chữ: Trắng (#FFFFFF)
Tự nhiên:
- Chính: Xanh lá (#8FBC8F)
- Phụ: Be (#F5F5DC)
- Chữ: Nâu (#8B4513)
Xem trước màu
Luôn kiểm tra sau khi đổi màu!
Kiểm tra:
- Văn bản có đọc rõ không?
- Có phối hợp tốt với ảnh không?
- Có quá chói mắt không?
- Tổng thể có hài hòa không?
Cách thử:
- Cuộn qua bản xem trước bên phải
- Kiểm tra tất cả các phần
- Xác nhận trên di động nữa
Thay đổi phông chữ (Typography)
Thay đổi đáng kể cảm giác thiệp mời!
Phông chữ có sẵn
1. Noto Sans
Cảm giác sạch sẽ và hiện đại Dễ đọc tuyệt vời Hiển thị tốt trên mọi thiết bị
- Phong cách: Sans-serif
- Khuyến nghị: Thiệp mời hiện đại, thiết kế đơn giản
2. Lora
Cảm giác sang trọng và truyền thống Trông trang trọng Hoàn hảo cho đám cưới
- Phong cách: Phông chữ có chân (Serif)
- Khuyến nghị: Thiệp mời cổ điển, cảm giác thanh lịch
3. Playfair Display
Thanh lịch và tinh tế Chi tiết serif đẹp Hoàn hảo cho sự kiện trang trọng
- Phong cách: Serif trang trí
- Khuyến nghị: Đám cưới sang trọng, phong cách thanh lịch
4. Montserrat
Hiện đại và sạch sẽ Hình dạng hình học Vẻ ngoài chuyên nghiệp
- Phong cách: Sans-serif, hình học
- Khuyến nghị: Thiết kế đương đại, thẩm mỹ tối giản
5. Dancing Script
Phong cách thư pháp viết tay Lãng mạn và cá nhân Nét nghệ thuật
- Phong cách: Script, chữ viết tay
- Khuyến nghị: Thiệp mời lãng mạn, thiết kế nghệ thuật
Điều chỉnh cỡ chữ
Yếu tố có thể điều chỉnh:
- Cỡ tiêu đề: 24-48px
- Cỡ văn bản: 14-18px
- Chữ nhỏ: 12-14px
Cách:
- Sử dụng thanh trượt "Cỡ chữ"
- Kéo trái hoặc phải
- Xem trước thời gian thực
Cỡ khuyến nghị:
- Cỡ thân thiện di động: 16px
- Quá nhỏ khó đọc
- Quá lớn trông rối
Lưu ý phối phông chữ
- Tối đa 1-2 phông chữ
- Quá nhiều phông trông lộn xộn
- Nhất quán là chìa khóa
- Dễ đọc là trên hết!
Kiểu bố cục
Chọn kiểu sắp xếp tổng thể thiệp mời.
Kiểu 1: Căn giữa
Đặc điểm:
- Tất cả yếu tố căn giữa
- Cân đối và ổn định
- Truyền thống và linh hoạt
Khuyến nghị:
- Đám cưới cổ điển
- Cảm giác truyền thống
- Lựa chọn an toàn!
Kiểu 2: Căn trái
Đặc điểm:
- Tất cả yếu tố căn trái
- Hiện đại và tinh tế
- Cảm giác tạp chí
Khuyến nghị:
- Thiết kế đương đại
- Thiệp mời đơn giản
- Thẩm mỹ tối giản
Kiểu 3: Dạng thẻ
Đặc điểm:
- Mỗi phần trong dạng thẻ
- Phân tách rõ ràng
- Phân biệt rõ
Khuyến nghị:
- Nhiều thông tin
- Nhấn mạnh dễ đọc
- Thiết kế hiện đại
Điều chỉnh khoảng cách và lề
Cho thiết kế không gian thở!
Khoảng cách phần
Tùy chọn:
- Hẹp: 10-20px - Cảm giác gọn gàng
- Bình thường: 30-40px (mặc định, khuyến nghị) - Khoảng cách vừa đủ
- Rộng: 50-80px - Rộng rãi và sang trọng
Lề bên
Tùy chọn:
- Hẹp: Lấp đầy toàn màn hình
- Bình thường: Lề vừa phải
- Rộng: Tập trung ở giữa
Mẹo bố cục
- Nhiều khoảng trắng trông sang trọng hơn
- Khoảng cách hẹp cho nhiều thông tin
- Lề rộng cho nhiều ảnh
- Giữ nhất quán!
Kiểu nền
Màu nền
Tùy chọn:
- Trắng: Sạch sẽ và sáng
- Ngà: Ấm áp và mềm mại
- Be: Tự nhiên và thoải mái
- Xám nhạt: Hiện đại và tinh tế
Hoa văn nền
Có sẵn:
- Không (màu đơn sắc)
- Kết cấu nhẹ
- Mẫu sóng
- Mẫu hoa (nhẹ nhàng)
Cách áp dụng:
- Vào phần "Nền"
- Chọn hoa văn
- Điều chỉnh độ trong suốt (10-30% khuyến nghị)
- Quá đậm làm chữ khó đọc!
Kiểu nút
Hình dạng nút
Kiểu:
- Góc bo tròn: Cảm giác mềm mại
- Góc sắc: Cảm giác hiện đại
- Bo tròn hoàn toàn: Dễ thương và thoải mái
- Chỉ gạch chân: Tối giản
Màu nút
Tùy chọn:
- Dùng màu chính (tự động)
- Chỉ định màu tùy chỉnh
- Hiệu ứng gradient
Hiệu ứng hoạt ảnh
Thêm chuyển động cho thiệp mời!
Hiệu ứng chuyển trang
Tùy chọn:
- Fade in: Xuất hiện dần
- Slide up: Trượt lên từ dưới
- Không: Hiển thị ngay
Khuyến nghị:
- Fade in linh hoạt nhất
- Tránh hiệu ứng quá lòe loẹt
Hiệu ứng hover
Khi di chuột qua các yếu tố!
Nút:
- Đổi màu
- Phóng to nhẹ
- Xuất hiện bóng
Ảnh:
- Phóng to
- Sáng hơn
- Đổi bộ lọc
Di động không có Hover
Hiệu ứng hover không hoạt động trên thiết bị di động! (Không có chuột trên màn hình cảm ứng) Đừng đặt thông tin quan trọng trong hiệu ứng hover.
Giao diện có sẵn
Áp dụng giao diện làm sẵn cùng lúc!
Giao diện 1: Hồng lãng mạn
Cài đặt:
- Màu chính: Hồng (#FFB6C1)
- Phông chữ: Noto Sans
- Bố cục: Căn giữa
- Nền: Ngà
- Hiệu ứng: Cánh hoa rơi
Cảm giác: Dễ thương và lãng mạn
Giao diện 2: Đen hiện đại
Cài đặt:
- Màu chính: Đen
- Phụ: Vàng
- Phông chữ: Lora
- Bố cục: Căn trái
- Nền: Trắng thuần
- Hiệu ứng: Không
Cảm giác: Tinh tế và sang trọng
Giao diện 3: Xanh lá tự nhiên
Cài đặt:
- Màu chính: Xanh lá
- Phông chữ: Montserrat
- Bố cục: Căn giữa
- Nền: Be
- Hiệu ứng: Hoạt ảnh nhẹ
Cảm giác: Tự nhiên và thoải mái
Giao diện 4: Xanh dương cổ điển
Cài đặt:
- Màu chính: Navy
- Phông chữ: Lora
- Bố cục: Căn giữa
- Nền: Trắng
- Hiệu ứng: Không
Cảm giác: Truyền thống và đáng tin cậy
Thiết kế đáp ứng
Hoạt động trên mọi kích thước màn hình!
Tự động điều chỉnh
Được điều chỉnh tự động:
- Cỡ phông chữ
- Kích thước hình ảnh
- Khoảng cách và lề
- Kích thước nút
Mẹo tối ưu di động
Danh sách kiểm tra:
- Cỡ chữ đủ lớn? (tối thiểu 14px)
- Nút dễ nhấn? (tối thiểu 44x44px)
- Ảnh tải nhanh?
- Không cuộn ngang?
Danh sách kiểm tra hoàn thành
Cài đặt giao diện hoàn tất!
- Màu chính đã chọn
- Phông chữ đã chọn (chỉ 1-2)
- Kiểu bố cục đã chọn
- Khoảng cách và lề đã điều chỉnh
- Kiểu nền đã thiết lập
- Đã kiểm tra trên máy tính
- Đã kiểm tra trên di động
- Đã nhận phản hồi từ người khác
- Đã lưu!
Tạo giao diện hoàn hảo
- Thử nhiều phối hợp khác nhau
- Chụp màn hình để so sánh
- Nhìn lại sau một ngày
- Ấn tượng đầu tiên rất quan trọng!
Bước tiếp theo
Khi giao diện hoàn thành!
Quay lại kiểm tra:
- Phần Hero - Có phù hợp với màu sắc không?
- Thư viện ảnh - Kiểm tra tổng thể hài hòa
Hoàn thiện cuối: