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

HỌ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 MỤC LỤC I Xác định yêu cầu II Ý tưởng sản phẩm III Thiết kế wireframe Xác định thành phần trang 1.1 Xây dựng điều hướng 1.2 Trang chủ 1.3 Trang đăng ký 1.4 Trang đăng nhập 1.5 Trang nội dung Tiêu chí thiết kế giao diện 2.1 Khả sử dụng 2.2 Thói quen người dùng IV Xây dựng website I Xác định yêu cầu Xây dựng phần website bao gồm: Trang chủ Trang đăng ký Trang đăng nhập 01 trang nội dung Trang (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 Xác định thành phần trang 1.1 Xây dựng điều hướng Điều hướng phần quan trọng thiếu trang web Việc điều hướng thành cơng giúp người dùng nhanh chóng đến nơi muốn tới trang web Menu điều hướng dẫn đến trang Menu điều hướng phụ trang web ln xuất trang chủ thường có mặt toàn trang thứ cấp website Menu tích hợp phần Header Footer trang web Hai vị trí cố định tồn trang website có đóng góp quan trọng việc điều hướng website nhiều yếu tố khác Ngồi menu cịn có nút CTA “ Đăng ký”, “Đăng nhập”, “Liên kết’…Cùng với số liên kết quan trọng phương tiện truyền thơng, … Điều hướng chính: horizontal navigation menu - hình thức mang tính cổ điển rõ rệt đồng thời cho thấy độ tin cậy cấu trúc liên kết nội thiết lập menu Cũng việc triển khai thành phần menu thành ngang theo chiều từ trái sang phải Đây tương ứng với chuyển động mắt thường thấy người nói chung Và người dùng cảm thấy quen thuộc dễ dàng nắm bắt, thao tác Điều hướng vị trí: horizontal – drop down dạng ngang bên điều hướng Điều hướng vị trí: Breadcrumbs bar giúp người dùng nhận định xác vị trí trang thứ cấp mà họ Trong phần Header, menu điều hướng xây dựng dạng đa cấp Các điều hướng nội trang Là điều hướng đơn với liên kết nội xuất trang thứ cấp website Đây yếu tố riêng trang nên điều hướng xuất khơng có trùng lặp trang Bao gồm: Các nút kêu gọi hành động trang thứ cấp (Các nút có thiết kế bật để người dễ nhận biết thao tác nhanh nhất) Các liên kết nội hai trang thứ cấp website Các liên kết 1.2 Trang chủ Điều hướng chính, phụ Các thương hiệu giày có cửa hàng List sản phẩm (đi kèm với lọc) Giới thiệu viết liên quan 1.3 Trang đăng ký Điều hướng chính, phụ Thơng tin nhân (tên, sđt, email) Địa Mật Điều hướng nội 1.4 Trang đăng nhập Điều hướng chính, phụ Tên đăng nhập Mật Điều hướng nội 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 Xác nhận đặt hàng thành công Theo dõi đơn hàng Tiếp tục mua hàng Tiêu chí thiết kế giao diện 2.1 Khả sử dụng Người sử dụng tối đa hóa lợi ích giảm thao tác thực Theo nguyên tắc 7(+/-)2: - Số lượng sản phẩm hàng tối đa - Các nội dung phân thành mục, mục có nội dung - Phần đăng kí có nội dung dài chia thành mục tối đa lần thao tác Thời gian đáp ứng cho cảm nhận tốt 0,1s, sau 8-10s người dùng phân tán tập trung Để đảm bảo quy tắc 8s, kích thước trang không nên vượt 56kb Khả 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 xếp nội dung tương tự cạnh Sử dụng khoảng trắng để tạo danh giới cho mục tránh việc người dùng ấn nhầm Thị giác - Trắng-đen kết hợp an toàn hiệu Website bán hàng giống không gian trưng bày sản phẩm, sử dụng khoảng trắng tạo cảm giác thơng thống, giúp nội dung dễ đọc - Khoảng trắng sử dụng để phân cấp nội dung trang web - Sản phẩm bán có màu sắc đa dạng, cần tối giản phông - Sử dụng font chữ quán, độ đa dạng dựa định dạng font cỡ chữ - Sử dụng font không chân để giảm cảm giác mỏi mắt đọc - Kích thước font dãn dòng hợp lý - Căn lề văn khiến văn xếp gọn gàng - Kích thước tìm kiếm rộng giúp người dùng dễ dàng xem lại xác minh nội dung tìm kiếm 2.2 Thói quen người dùng Thói quen đọc người dùng từ xuống: - Phần thông tin đăng kí, đăng nhập có label phía bên - Nội dung sản phẩm xếp theo thứ tự từ xuống: hình ảnh - thơng tin chi tiết Hầu hết người dùng không sử dụng cuộn lần truy cập đầu tiên, cần ưu tiên xếp nội dung quan trọng bật lên đầu: thương hiệu, nhãn hàng, hình ảnh để thu hút ý, xu hướng, hỗ trợ, Sử dụng màu xanh cho liên kết Người dùng có xu hướng ý thơng tin dạng hình ảnh vă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 thư viện cần dùng Thu thập tài nguyên: hình ảnh, font, icon,… Code: tạo folder file html, css, image, font để dễ quản lý Kiểm tra sửa lỗi (nếu có) Tối ưu Header: Điều hướng Footer: Thông tin Đăng nhập: Đăng ký Trang chủ Trang nội dung sản phẩm Trang thoát