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
Nhóm 10 BÁO CÁO SẢN PHẨM Thành viên Thứ 3, 4/1/2022 • Xác định u cầu Quy trình thực sản phẩm Nội dung • Ý tưởng sản phẩm • Thiết kế wireframe • 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 - 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 Tiêu chí thiết kế giao diện Thiết kế wireframe Xác định thành phần trang Tiêu chí thiết kế giao diện Xây dựng điều hướng Điều hướng – phụ Menu điều hướng phụ trang web xuất trang chủ thường có mặt tồn trang thứ cấp website Điều hướng nội trang Các nút kêu gọi hành động trang thứ Các liên kết nội hai trang thứ cấp website Các liên kết Các liên kết mạng xã hội Điều hướng – phụ Horizontal navigation menu Horizontal – drop down Breadcrumbs bar v Điều hướng nội trang Các nút kêu gọi hành động trang thứ Các liên kết nội hai trang thứ cấp website v Điều hướng nội liên kết Các liên kết mạng xã hội 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 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 Trang đăng nhập - Điều hướng chính, phụ - Tên đăng nhập - Mật - Điều hướng nội 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 Trang thoát - Xác nhận đặt hàng thành công - Theo dõi đơn hàng - Tiếp tục mua hàng Thiết kế wireframe Xác định thành phần trang Tiêu chí thiết kế giao diện Tiêu chí thiết kế giao diện Khả sử dụng Thói quen người dùng Khả sử dụng II I Di chuyển 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 III Thị giác - - 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 - Trắng-đen kết hợp an toàn hiệu Sử dụng khoảng trắng tạo cảm giác thơng thống, giúp nội dung dễ đọc 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 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ý 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 Thói quen người dùng Đọc từ xuống từ trái qua phải - - 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 Khơng có thói quen sử dụng cuộn lần đầu truy cập 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ợ, Chú ý thơng tin dạng hình ảnh văn - Đặt phần banner lên đầu trang để tạo ý - Sử dụng icon quen thuộc với người dùng IV Xây dựng website Ngôn ngữ sử dụng: HTML/CSS, Javascript - - 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 THE END ... nội dung Trang (exit) Sử dụng ngơn ngữ lập trình HTML/CSS, Javascrip II Ý tưởng - 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... hướng – phụ Menu điều hướng phụ trang web xuất trang chủ thường có mặt tồn trang thứ cấp website Điều hướng nội trang Các nút kêu gọi hành động trang thứ Các liên kết nội hai trang thứ cấp website. .. hội Điều hướng – phụ Horizontal navigation menu Horizontal – drop down Breadcrumbs bar v Điều hướng nội trang Các nút kêu gọi hành động trang thứ Các liên kết nội hai trang thứ cấp website v Điều