Xác định yêu cầu Xây dựng các phần của một website bao gồm: Trang chủ Trang đăng ký Trang đăng nhập 01 trang nội dung Trang thoát exit Sử dụng ngôn ngữ lập trình HTML/CSS, Javascrip II..
Trang 1HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
KHOA ĐA PHƯƠNG TIỆN
BÁO CÁO SẢN PHẨM HỌC PHẦN: THIẾT KẾ WEB CƠ BẢN
ĐỀ TÀI: WEBSITE BÁN GIÀY – WIS SNEAKER
Nhóm 10: Trần Trung Hiếu-B19DCPT087
Lê Anh Huy-B19DCPT101 Nguyễn Thị Lý-B19DCPT153 Nguyễn Công Quyền-B19DCPT187
An Nguyễn Nam Sơn-B19DCPT191 Bùi Tuấn Thanh-B19DCPT222
Giảng viên hướng dẫn:
Nguyễn Thị Tuyết Mai
Nguyễn Thị Thanh Tâm
Hà Nội – 2021
Trang 2MỤC LỤC
I Xác định yêu cầu 3
II Ý tưởng sản phẩm 3
III Thiết kế wireframe 3
1 Xác định thành phần trang 3
1.1 Xây dựng các điều hướng 3
1.2 Trang chủ 5
1.3 Trang đăng ký 5
1.4 Trang đăng nhập 6
1.5 Trang nội dung 6
2 Tiêu chí về thiết kế giao diện 6
2.1 Khả năng sử dụng 6
2.2 Thói quen người dùng 7
IV Xây dựng website 7
Trang 3I Xác định yêu cầu
Xây dựng các phần của một website bao gồm:
Trang chủ
Trang đăng ký
Trang đăng nhập
01 trang nội dung
Trang thoát (exit)
Sử dụng ngôn ngữ lập trình HTML/CSS, Javascrip
II Ý tưởng sản phẩm
Xây dựng website bán giày
Nguồn tham khảo: https://drake.vn/
III Thiết kế wireframe
1 Xác định thành phần trang
1.1 Xây dựng các điều hướng
Điều hướng là một phần quan trọng không thể thiếu đối với mỗi trang web Việc điều hướng thành công sẽ giúp người dùng nhanh chóng đến nơi muốn tới trong trang web Menu điều hướng dẫn đến trang con
Menu điều hướng chính và phụ của trang web luôn xuất hiện ở trang chủ và thường có mặt ở toàn bộ trang thứ cấp của website Menu này được tích hợp trong phần Header và Footer của trang web Hai vị trí cố định này ở toàn bộ các trang trong một website có đóng góp quan trọng trong việc điều hướng website bằng nhiều yếu tố khác nhau Ngoài menu chính ra còn có các nút CTA như “ Đăng ký”, “Đăng nhập”, “Liên kết’…Cùng với một số liên kết ngoài quan trọng như các phương tiện truyền thông, …
Điều hướng chính: horizontal navigation menu - hình thức này mang tính cổ điển rõ rệt nhưng đồng thời cho thấy độ tin cậy của cấu trúc các liên kết nội bộ được thiết lập trong menu Cũng như việc triển khai các thành phần trong menu thành một thanh ngang theo chiều từ trái sang phải Đây là tương ứng với chuyển động mắt thường thấy của con người nói chung Và người dùng cũng cảm thấy quen thuộc và dễ dàng nắm bắt, thao tác nhất
Điều hướng vị trí: horizontal – drop down dạng thanh ngang bên dưới điều hướng chính
Trang 4Điều hướng vị trí: Breadcrumbs bar giúp người dùng nhận định được chính xác vị trí của trang thứ cấp mà họ đang ở
Trong phần Header, menu điều hướng được xây dựng ở dạng đa cấp
Các điều hướng nội bộ của trang con
Là các điều hướng đơn với từng liên kết nội bộ xuất hiện ở từng trang thứ cấp của website Đây là yếu tố riêng của mỗi trang con nên các điều hướng này có thể xuất hiện hoặc không hoặc có sự trùng lặp giữa các trang Bao gồm:
Các nút kêu gọi hành động trong mỗi trang thứ cấp (Các nút này có thiết kế nổi bật để người dễ nhận biết và thao tác nhanh nhất)
Trang 5Các liên kết nội bộ giữa hai trang thứ cấp trong cùng một website
Các liên kết ngoài
1.2 Trang chủ
Điều hướng chính, phụ
Các thương hiệu giày có tại cửa hàng
List sản phẩm (đi kèm với bộ lọc)
Giới thiệu các bài viết liên quan
1.3 Trang đăng ký
Điều hướng chính, phụ
Trang 6Thông tin các nhân (tên, sđt, email)
Địa chỉ
Mật khẩu
Điều hướng nội bộ
1.4 Trang đăng nhập
Điều hướng chính, phụ
Tên đăng nhập
Mật khẩu
Điều hướng nội bộ
1.5 Trang nội dung
Điều hướng chính, phụ
Thông tin sản phẩm
Tùy chọn (màu sắc, size, số lượng)
Sản phẩm tương tự
Điều hướng nội bộ
Xác nhận đặt hàng thành công
Theo dõi đơn hàng
Tiếp tục mua hàng
2 Tiêu chí về thiết kế giao diện
2.1 Khả năng sử dụng
Người sử dụng luôn tối đa hóa lợi ích và giảm thao tác thực hiện
Theo nguyên tắc 7(+/-)2:
- Số lượng sản phẩm trên 1 hàng tối đa là 5
- Các nội dung được phân thành các mục, trong mỗi mục có nội dung con
- Phần đăng kí có nội dung dài được chia thành các mục và tối đa trong 3 lần thao tác Thời gian đáp ứng cho cảm nhận tốt nhất là 0,1s, sau 8-10s người dùng sẽ phân tán sự tập trung Để đảm bảo quy tắc 8s, kích thước 1 trang không nên vượt quá 56kb
Khả năng di chuyển:
- Tăng kích thước nút bấm để người sử dụng dễ dàng thao tác
- Nhóm và sắp xếp các nội dung tương tự ở cạnh nhau Sử dụng khoảng trắng để tạo danh giới cho các mục tránh việc người dùng ấn nhầm
Thị giác
Trang 7- Trắng-đen là sự kết hợp an toàn và hiệu quả Website bán hàng giống như một không
gian trưng bày các sản phẩm, vì vậy sử dụng khoảng trắng sẽ tạo cảm giác thông thoáng,
giúp nội dung dễ đọc hơn
- Khoảng trắng còn được sử dụng để phân cấp nội dung trong trang web
- Sản phẩm được bán có màu sắc đa dạng, vì vậy cần tối giản phông nền
- Sử dụng font chữ nhất quán, độ đa dạng dựa trên định dạng của font đó và cỡ chữ
- Sử dụng font không chân để giảm cảm giác mỏi mắt khi đọc
- Kích thước font và dãn dòng hợp lý
- Căn lề văn bản sẽ khiến văn bản được sắp xếp gọn gàng
- Kích thước thanh tìm kiếm rộng giúp người dùng dễ dàng xem lại và xác minh nội
dung tìm kiếm
2.2 Thói quen người dùng
Thói quen đọc của người dùng là từ trên xuống:
- Phần thông tin đăng kí, đăng nhập sẽ có label phía bên trên
- Nội dung sản phẩm được sắp xếp theo thứ tự từ trên xuống: hình ảnh - thông tin chi
tiết
Hầu hết người dùng không sử dụng thanh cuộn trong lần truy cập đầu tiên, vì vậy cần
ưu tiên sắp xếp những nội dung quan trọng và nổi bật lên đầu: thương hiệu, các nhãn
hàng, hình ảnh để thu hút sự chú ý, xu hướng, hỗ trợ,
Sử dụng màu xanh cho các liên kết
Người dùng có xu hướng chú ý thông tin dạng hình ảnh hơn là văn bản
Sử dụng icon phù hợp
IV Xây dựng website
- Phân tích giao diện để xác định bố cục và các thư viện cần dùng
- Thu thập tài nguyên: hình ảnh, font, icon,…
- Code: tạo các folder của các file html, css, image, font để dễ quản lý
- Kiểm tra và sửa lỗi (nếu có)
- Tối ưu
1 Header: Điều hướng
2 Footer: Thông tin
Trang 83 Đăng nhập:
4 Đăng ký
Trang 95 Trang chủ
6 Trang nội dung sản phẩm
Trang 107 Trang thoát