HotelFinder App 260008

Thiết kế giao diện và trải nghiệm người dùng (UI/UX) hiện đại, có độ chi tiết cao cho ứng dụng di động mang tên HotelFinder, với mục tiêu hỗ trợ người dùng tìm kiếm khách sạn phù hợp nhất dựa trên ngân sách, sở thích du lịch và vị trí của họ.

HotelFinder App 260008

Mobile Tablet Desktop

Nhu cầu: Tìm kiếm khách sạn phù hợp một cách nhanh chóng và tự tin.
Giải pháp: Tính năng tìm kiếm khách sạn thông minh, bao gồm bộ lọc theo ngân sách, so sánh giá cả và các gợi ý được cá nhân hóa.

Phong cách thiết kế

• Mang hơi hướng công nghệ du lịch hiện đại, tinh tế và cao cấp.
• Sử dụng khoảng trắng hợp lý cùng hệ thống phân cấp thị giác rõ ràng.
• Các thẻ (card) có góc bo tròn và hiệu ứng đổ bóng nhẹ.
• Hình ảnh khách sạn chất lượng cao.
• Thiết kế tối giản, tránh gây rối mắt.
• Phông chữ rõ ràng, dễ đọc.
• Đảm bảo sự đồng nhất về khoảng cách, biểu tượng, nút bấm và các trường nhập liệu.

Bảng màu

• Màu chủ đạo: Xanh navy đậm #163A5F.
• Màu phụ: Xanh mòng két (Teal) #18A999.
• Màu nền: Trắng nhạt #F8FAFC.
• Màu bề mặt: Trắng #FFFFFF.
• Văn bản chính: #172B4D.
• Văn bản phụ: #64748B.
• Điểm nhấn giá cả: #E67E22.
• Trạng thái thành công: #16A34A.
• Đường viền: #E2E8F0.

Kiểu chữ

• Sử dụng phông chữ Inter hoặc phông chữ không chân (sans-serif) hiện đại tương tự.
• Tiêu đề trang: Kích thước lớn, in đậm.
• Tiêu đề các phần: Độ dày trung bình.
• Văn bản nội dung: Dễ đọc.
• Làm nổi bật giá khách sạn, ưu đãi giảm giá, xếp hạng và các hành động quan trọng.

Các thành phần giao diện

• Thanh tìm kiếm bo góc.
• Thẻ hiển thị hình ảnh khách sạn.
• Thanh trượt chọn ngân sách.
• Các thẻ lọc (filter chips).
• Công cụ chọn ngày.
• Công cụ chọn số lượng khách.
• Nhãn hiển thị xếp hạng.
• Nhãn so sánh giá.
• Các nút bấm chính và phụ.
• Thanh điều hướng dưới cùng (bottom navigation) gồm bốn mục: Khám phá (Explore), Đã lưu (Saved), Đặt chỗ (Bookings), Hồ sơ (Profile).