Giao diện, trải nghiệm

Một phần của tài liệu MÔN học kỹ THUẬT PHÂN TÍCH và TỔNG hợp mã môn học DOM203 báo cáo dự án môn học chuyên đề PHÂN TÍCH và cải THIỆN WEBSITE CÔNG TY YODY (Trang 28 - 32)

 Bố cục:

o Website Yody.vn được chia làm 3 phần, Trên cùng là phần Header chứa Logo, menu, thanh tìm kiếm, các nút giỏ hàng, user, sản phẩm yêu thích. Ngoài ra còn để thông tin số điện thoại và Email giúp người dùng dễ dàng liên lạc.

o Phần thân chứa nội dung quan trọng nhất bao gồm slide, hình ảnh, danh mục sản phẩm, các bài viết,… có khả năng responsive phù hợp với độ rộng của hầu hết các thiết bị. Phần footer chứa danh các thông tin liên hệ và các trang giới thiệu về doanh nghiệp.

 Màu sắc: Website sử dụng nền trắng kết hợp với các điểm nhấn màu sắc thương hiệu tạo nên phong cách gần gũi và thân thiện với người dùng

 Văn bản: Sử dụng bộ font sans-srif thông dụng đối với thiết kế website. Font chữ mảnh, không gạch chân tạo nên sự sang trọng và dễ đọc

 Cỡ chữ: 14px và màu chữ đen nổi bật trên nền trắng giúp người dùng dễ đọc.  Resposive: Trong thời đại con người đang hướng tới IOT ngày nay, người dùng sử dụng rất nhiều loại thiết bị để truy cập internet nói chung và trình duyệt web nói riêng. Vậy nên website cần phải được thiết kế để tối ưu trên nhiều công cụ truy cập khách nhau nhằm tiếp cận được tối đa lượng người truy cập. Trong các loại công cụ truy cập hiện nay thì phổ biến nhất 3 loại đó là desktop/laptop, smartphone và tablet.

 Phần Menu và các chức năng cơ bản được thiết kế trên 1 hàng ngang, sử dụng tính năng fixed, có nghĩa là nếu người dùng lăn chuột xuống phần dưới thì phần menu vẫn hiện ở phía trên cùng. Điều này tạo sự thuận tiện và giúp người đung dễ dàng điều hướng, tìm kiếm bất cứ lúc nào mà không phải kéo về đầu trang.

 Phần danh mục bài viết chua làm 4 cột  Đối với giao diện tablet

 Phần Menu chính bị ẩn đi, thay vào đó là nút lệnh để mở menu. Bên dưới cùng sẽ được thiết kế thêm 1 thanh menu phụ có chưa các tính năng cơ bản.

 Danh mục sản phẩm được chia làm 4 cột

 Danh mục bài viết chia làm 3 cột

Đối với giao diện smartphone (tỉ lệ màn hình phổ biến 18:9)

 Phần menu được thiết kế tương tự như trên giao diện tablet nhưng độ rộng nhỏ hơn.

 Danh mục sản phẩm chia làm 2 cột và danh mục bài viết được chia làm 1 cột.

Một phần của tài liệu MÔN học kỹ THUẬT PHÂN TÍCH và TỔNG hợp mã môn học DOM203 báo cáo dự án môn học chuyên đề PHÂN TÍCH và cải THIỆN WEBSITE CÔNG TY YODY (Trang 28 - 32)