Figma cho phép bạn dễ dàng tạo các phiên bản giao diện phù hợp với từng loại màn hình, từ desktop đến smartphone.Cuối cùng, việc thiết kế website bán giày không chỉ đơn thuần là xây dựng
GIỚI THIỆU ĐỀ TÀI
Lý do chọn đề tài
Lựa chọn đề tài thiết kế Teamplace bán giày trên Figma là một quyết định hợp lý, mang lại nhiều lợi ích về thiết kế UX/UI và phản ánh nhu cầu thực tế của thị trường Thị trường thương mại điện tử đang phát triển mạnh mẽ, với bán giày online là một phân khúc có tiềm năng lớn nhờ sự gia tăng của các trang web mua sắm trực tuyến.
Xây dựng cửa hàng bán giày online trên các nền tảng như Shopee, Lazada và Tiki không chỉ giúp mở rộng thị trường mà còn giảm chi phí vận hành Trong bối cảnh dịch bệnh và thói quen mua sắm online ngày càng gia tăng, thiết kế web bán giày trở thành cơ hội vàng để đáp ứng nhu cầu của người tiêu dùng.
Người tiêu dùng hiện đại ngày càng chú trọng đến trải nghiệm người dùng (UX) và giao diện người dùng (UI), đặc biệt đối với các website bán giày Một giao diện hấp dẫn, dễ sử dụng và dễ dàng điều hướng là rất quan trọng, vì người dùng thường tìm kiếm sản phẩm theo nhiều tiêu chí như kiểu dáng, màu sắc, kích cỡ và mức giá Figma là công cụ lý tưởng cho việc thiết kế giao diện, cho phép tạo mockup, prototype và cải thiện UX/UI thông qua sự hợp tác nhóm Với Figma, bạn có thể dễ dàng tạo ra một giao diện đẹp, tối ưu hóa trải nghiệm mua sắm và thực hiện các chỉnh sửa khi cần thiết.
Các website bán giày cần tích hợp những tính năng cơ bản và nâng cao để nâng cao trải nghiệm khách hàng, bao gồm tìm kiếm sản phẩm, phân loại theo loại giày, kích cỡ và màu sắc, hiển thị chi tiết sản phẩm, cùng với giỏ hàng thanh toán Figma hỗ trợ thiết kế giao diện rõ ràng cho những phần này, giúp người dùng dễ dàng tìm kiếm và thực hiện giao dịch mua sắm Ngoài ra, việc triển khai các chương trình khuyến mãi và giảm giá sẽ thu hút khách hàng và tăng doanh thu cho cửa hàng.
Figma cho phép bạn tùy chỉnh và mở rộng website một cách dễ dàng trong tương lai, đồng thời hỗ trợ thử nghiệm giao diện người dùng và kiểm tra hành vi người dùng qua các prototypes Công cụ này giúp tối ưu hóa giao diện trước khi triển khai, tiết kiệm thời gian và chi phí bằng cách thiết kế và thử nghiệm mà không cần lập trình từ đầu Điều này mang lại lợi ích lớn cho các dự án nhỏ và vừa, giúp bạn tiết kiệm chi phí phát triển và linh hoạt thay đổi giao diện.
Figma hỗ trợ thiết kế responsive web, giúp website hiển thị tốt trên mọi thiết bị, đặc biệt là di động Với số lượng lớn khách hàng mua sắm giày qua điện thoại, thiết kế giao diện responsive không chỉ tối ưu hóa trải nghiệm người dùng mà còn mở rộng khả năng tiếp cận khách hàng Figma cho phép tạo các phiên bản giao diện phù hợp với từng loại màn hình, từ desktop đến smartphone.
Việc thiết kế website bán giày không chỉ là xây dựng công cụ giao dịch mà còn tạo ra trải nghiệm thương hiệu cho khách hàng Sử dụng Figma, bạn có thể phát triển nhận diện thương hiệu thông qua màu sắc, phong cách thiết kế và bố trí các phần tử như sản phẩm, giỏ hàng và thanh toán Điều này không chỉ giúp cửa hàng nổi bật mà còn giúp khách hàng dễ dàng nhận diện thương hiệu của bạn.
Mục tiêu đề tài
- Xây dựng giao diện người dùng (UI) dễ sử dụng và hấp dẫn
Mục tiêu của nghiên cứu này là thiết kế một giao diện web bán giày thân thiện với người dùng và có tính tương tác cao Sử dụng công cụ Figma, chúng tôi sẽ phát triển một giao diện dễ sử dụng cho người tiêu dùng, từ việc tìm kiếm sản phẩm, chọn giày cho đến quá trình thanh toán Giao diện này cần đảm bảo khả năng tiếp cận, dễ dàng điều hướng và mang lại trải nghiệm người dùng tuyệt vời.
- Tối ưu hóa trải nghiệm mua sắm trực tuyến
Mục tiêu chính là tối ưu hóa trải nghiệm người dùng (UX) trong quá trình mua sắm trên website bán giày Nghiên cứu sẽ tập trung vào việc cải thiện các chức năng như tìm kiếm, phân loại sản phẩm và quy trình thanh toán, nhằm giúp người dùng thực hiện giao dịch nhanh chóng và thuận tiện Đồng thời, nghiên cứu cũng sẽ khám phá các phương pháp giảm thiểu bước rườm rà, giúp người dùng dễ dàng hoàn tất việc mua sắm.
- Đảm bảo tính tương thích trên nhiều thiết bị (responsive design)
Với sự phát triển của thiết bị di động, nghiên cứu thiết kế web bán giày cần đảm bảo tương thích với tất cả các loại thiết bị, từ desktop đến smartphone Website phải có giao diện đẹp và dễ sử dụng trên mọi kích thước màn hình, nhằm tăng cường khả năng tiếp cận và tiện lợi cho người dùng.
- Tạo dựng thương hiệu cho cửa hàng giày online
Một mục tiêu quan trọng của nghiên cứu là xây dựng nhận diện thương hiệu rõ ràng cho cửa hàng giày online thông qua thiết kế giao diện Điều này bao gồm việc lựa chọn màu sắc, kiểu dáng, logo và các yếu tố hình ảnh nhằm truyền tải câu chuyện thương hiệu Đồng thời, những yếu tố này giúp người dùng dễ dàng nhận diện cửa hàng trong môi trường cạnh tranh khốc liệt của thị trường thương mại điện tử.
- Ứng dụng công cụ Figma để tăng hiệu quả thiết kế
Mục đích nghiên cứu là ứng dụng công cụ Figma trong thiết kế giao diện website bán giày, nhằm tăng cường khả năng hợp tác giữa các thành viên trong nhóm thiết kế Figma cho phép tạo ra prototypes để kiểm tra tính khả thi của thiết kế trước khi phát triển, giúp tiết kiệm thời gian và chi phí Ngoài ra, việc sử dụng Figma cũng dễ dàng cho việc chỉnh sửa và cập nhật giao diện khi có yêu cầu thay đổi.
- Khám phá các yếu tố ảnh hưởng đến quyết định mua hàng online
Nghiên cứu này sẽ phân tích các yếu tố thiết kế ảnh hưởng đến hành vi người tiêu dùng khi mua giày online, bao gồm hình ảnh sản phẩm, mô tả chi tiết, quy trình thanh toán dễ dàng và tính năng khuyến mãi Những yếu tố này sẽ giúp cửa hàng tối ưu hóa trang web nhằm tăng tỷ lệ chuyển đổi.
1.2.2 Đối tượng và phạm vi nghiên cứu
Teamplace là một nền tảng bán giày được thiết kế nhằm phục vụ nhu cầu thời trang của mọi người, với mục tiêu cung cấp đầy đủ sản phẩm và chức năng của một website thương mại điện tử Chúng tôi tập trung vào việc phát triển Teamplace để đáp ứng nhu cầu mua sắm trực tuyến của khách hàng.
Xây dựng các chức năng cho nhân viên quản trị.
Xây dựng các chức năng cho khách hàng.
Dựa trên các công cụ lập trình: Figma
Khảo sát một số Teamplace bán hàng trực tuyến
1.3.1 Khảo sát các trang Teamplace bán hàng và sự hỗ trợ khách hàng của chúng
Các trang Teamplace bán hàng trực tuyến đang trở nên phổ biến hơn bao giờ hết, mang lại nhiều tiện ích và cải thiện trải nghiệm mua sắm cho người dùng Một số tiêu chí quan trọng để khảo sát bao gồm:
Giao diện và trải nghiệm người dùng: Giao diện thân thiện, dễ sử dụng, tốc độ tải trang nhanh.
Danh mục sản phẩm: Phong phú, đa dạng, thông tin chi tiết, hình ảnh rõ ràng.
Chính sách bán hàng: Chính sách giá cả, khuyến mãi, giao hàng, đổi trả.
Hỗ trợ khách hàng: Tư vấn trực tuyến, hotline hỗ trợ, chính sách bảo hành.
Teamplace sử dụng Figma thiết kế giao diện website bán giày
Giới thiệu về Figma
Figma là một công cụ thiết kế giao diện người dùng (UI) và tạo prototype
(mẫu thử) trực tuyến mạnh mẽ, được sử dụng phổ biến trong lĩnh vực thiết kế
Figma, Inc phát triển Figma không chỉ là công cụ thiết kế đồ họa truyền thống mà còn hỗ trợ hợp tác trực tuyến giữa các nhà thiết kế, lập trình viên và các bên liên quan trong quá trình phát triển sản phẩm Figma mang lại sự linh hoạt, hiệu quả và dễ dàng trong thiết kế giao diện, đặc biệt trong môi trường làm việc nhóm.
Các tính năng nổi bật của Figma
Thiết kế giao diện UI/UX o Figma cung cấp các công cụ mạnh mẽ để tạo giao diện người dùng
Giao diện người dùng (UI) bao gồm các yếu tố cơ bản như biểu tượng, màu sắc, font chữ và hình ảnh, cùng với các yếu tố phức tạp hơn như layout, grid và kỹ thuật responsive design Công cụ thiết kế vector trong Figma cho phép tạo ra hình ảnh sắc nét, dễ dàng chỉnh sửa và tương thích với nhiều kích thước màn hình Figma cũng hỗ trợ components (thành phần tái sử dụng) và styles (kiểu dáng), giúp tiết kiệm thời gian và duy trì tính nhất quán trong thiết kế.
Figma được thiết kế để hỗ trợ hợp tác trực tuyến thời gian thực, cho phép nhiều người cùng làm việc trên một dự án mà không cần tải lên hay tải xuống tệp thiết kế Điều này không chỉ nâng cao hiệu quả công việc trong môi trường nhóm mà còn tiết kiệm thời gian Các nhà thiết kế, lập trình viên và khách hàng có thể bình luận trực tiếp trên thiết kế, trao đổi và đưa ra phản hồi ngay trên nền tảng Figma mà không cần sử dụng email hay phần mềm khác.
Figma cho phép tạo prototype trực tiếp từ thiết kế, giúp nhà thiết kế mô phỏng trải nghiệm người dùng mà không cần lập trình Với các tính năng tương tác như chuyển trang, hiệu ứng hover và chạm (click), người dùng có thể kiểm tra và trải nghiệm giao diện trước khi triển khai vào mã nguồn thực tế.
Hỗ trợ đa nền tảng o Figma là một công cụ dựa trên nền tảng web, có thể chạy trên cả
Figma cho phép người dùng truy cập và làm việc trên các nền tảng như Windows, macOS và Linux mà không cần cài đặt phần mềm, giúp linh hoạt trong công việc từ bất kỳ thiết bị nào có kết nối Internet Ngoài ra, ứng dụng di động của Figma cũng hỗ trợ người dùng xem và bình luận về các thiết kế ngay trên thiết bị di động của họ.
Figma cho phép chia sẻ thiết kế một cách dễ dàng thông qua đường link, giúp người nhận không cần cài đặt phần mềm mà chỉ cần sử dụng trình duyệt web để xem và thảo luận trực tiếp Ngoài ra, công cụ này hỗ trợ xuất bản thiết kế dưới nhiều định dạng khác nhau như SVG, PNG, JPG, và PDF, tạo điều kiện thuận lợi cho việc chia sẻ với các nhóm phát triển hoặc khách hàng.
Figma hỗ trợ tích hợp với nhiều công cụ phát triển và quản lý dự án như Slack, Jira, và Zeplin, giúp cải thiện khả năng phối hợp giữa các bộ phận trong quá trình phát triển sản phẩm.
1 Khả năng hợp tác và làm việc nhóm mạnh mẽ o Figma đặc biệt nổi bật với khả năng hợp tác thời gian thực, giúp các nhóm thiết kế và phát triển làm việc linh hoạt và hiệu quả hơn Các thay đổi được cập nhật ngay lập tức, cho phép tất cả thành viên trong nhóm đều nhìn thấy và làm việc trên một phiên bản thiết kế duy nhất.
2 Dễ sử dụng và học hỏi o Figma có giao diện trực quan và dễ sử dụng, ngay cả đối với người mới bắt đầu Các công cụ và tính năng trong Figma được bố trí hợp lý, giúp người dùng dễ dàng tạo ra thiết kế từ cơ bản đến phức tạp.
3 Không yêu cầu cài đặt phần mềm o Vì Figma là công cụ dựa trên trình duyệt web, người dùng không cần phải cài đặt phần mềm phức tạp hoặc lo lắng về việc phần mềm sẽ không tương thích với hệ điều hành Việc này giúp tiết kiệm tài nguyên và giảm thiểu vấn đề về yêu cầu phần cứng.
4 Phù hợp với mọi quy mô dự án o Figma có thể được sử dụng cho cả các dự án nhỏ (như thiết kế giao diện web cá nhân) đến các dự án lớn (như thiết kế hệ thống sản phẩm phức tạp cho doanh nghiệp) Figma hỗ trợ các công cụ Quản lý Tài nguyên và Styles giúp duy trì tính nhất quán trong thiết kế của các nhóm lớn.
5 Cộng đồng và tài nguyên phong phú o Figma có một cộng đồng thiết kế lớn, và người dùng có thể truy cập vào nhiều tài nguyên miễn phí như template, component, icon, và plugin để tăng tốc quá trình thiết kế Hơn nữa, cộng đồng Figma thường xuyên chia sẻ các mẹo, tài liệu hướng dẫn, và các bài học hữu ích. Ứng dụng của Figma trong thiết kế web bán giày
Figma là công cụ lý tưởng để thiết kế giao diện website bán giày vì những lý do sau:
Figma là công cụ thiết kế trực quan tuyệt vời, giúp bạn tạo ra giao diện hấp dẫn cho khách hàng mua giày online Từ việc hiển thị sản phẩm, bộ lọc tìm kiếm cho đến các trang chi tiết sản phẩm, Figma hỗ trợ tối ưu hóa trải nghiệm người dùng.
Tạo prototype và mô phỏng tương tác giúp bạn mô phỏng quy trình mua sắm, bao gồm việc chọn kích cỡ, màu sắc và thêm sản phẩm vào giỏ hàng Điều này cho phép bạn kiểm tra trải nghiệm người dùng trước khi triển khai thực tế.
Hợp tác hiệu quả giữa các thành viên trong nhóm thiết kế, phát triển và marketing cho phép họ làm việc đồng thời trên cùng một dự án mà không gặp khó khăn trong việc chia sẻ tệp hoặc phiên bản Điều này không chỉ tiết kiệm thời gian mà còn nâng cao hiệu quả làm việc nhóm.
Cách tải và sử dụng Figma
Các Bước Cài Đặt Figma
1 Truy cập trang web chính thức của Figma.
2 Nhấn vào nút Tải xuống để tải phiên bản phù hợp với hệ điều hành của bạn (Windows hoặc macOS).
3 Mở tệp cài đặt vừa tải xuống.
4 Thực hiện theo hướng dẫn trên màn hình để hoàn tất quá trình cài đặt.
5 Mở Figma và đăng nhập hoặc tạo tài khoản mới.
Hành Yêu Cầu Tối Thiểu
Windows Windows 10 trở lên macOS macOS 10.12 trở lên
Tính Năng Nổi Bật của Figma
Thiết kế giao diện người dùng dễ dàng và trực quan.
Hỗ trợ làm việc nhóm theo thời gian thực.
Các công cụ prototyping mạnh mẽ.
Thư viện mẫu phong phú và dễ dàng chia sẻ.
Figma không chỉ đơn thuần là một công cụ thiết kế, mà còn là nền tảng cộng tác tuyệt vời cho các nhóm làm việc Hãy trải nghiệm Figma ngay hôm nay để tối ưu hóa quy trình làm việc của bạn!
Figma là một công cụ thiết kế mạnh mẽ, dễ dàng cài đặt Dưới đây là hướng dẫn chi tiết cho các phương thức cài đặt Figma.
2.1 Cài đặt trên máy tính
Bạn có thể cài đặt Figma trên máy tính của mình bằng cách sử dụng ứng dụng desktop hoặc phiên bản web Dưới đây là hướng dẫn chi tiết để cài đặt ứng dụng desktop.
1 Truy cập trang web chính thức của Figma:
2 Nhấn vào nút Download để tải về ứng dụng Figma cho hệ điều hành của bạn (Windows hoặc macOS).
3 Mở tệp đã tải xuống và làm theo hướng dẫn để cài đặt.
4 Sau khi cài đặt hoàn tất, mở ứng dụng và đăng nhập hoặc tạo tài khoản mới.
2.2 Cài đặt trên trình duyệt
Figma có thể được sử dụng trực tiếp trên trình duyệt mà không cần cài đặt phần mềm bổ sung Để bắt đầu sử dụng Figma trên trình duyệt, bạn chỉ cần truy cập trang web của Figma và đăng nhập vào tài khoản của mình.
1 Mở trình duyệt web (Chrome, Firefox, Safari, v.v.).
3 Nhấn vào nút Get Started hoặc Sign Up để bắt đầu sử dụng.
2.3 Cài đặt trên thiết bị di động
Figma cũng hỗ trợ ứng dụng di động để bạn có thể thiết kế mọi lúc mọi nơi. Dưới đây là cách cài đặt:
1 Mở App Store trên thiết bị của bạn.
2 Tìm kiếm từ khóa Figma.
3 Nhấn Get để tải về và cài đặt ứng dụng.
1 Mở Google Play Store trên thiết bị của bạn.
2 Tìm kiếm từ khóa Figma.
3 Nhấn Install để tải về và cài đặt ứng dụng.
Sau khi cài đặt, bạn có thể mở ứng dụng và đăng nhập vào tài khoản Figma của mình.
3 Hướng dẫn sử dụng Figma
Figma là công cụ thiết kế trực tuyến mạnh mẽ, cho phép bạn tạo ra sản phẩm đồ họa chuyên nghiệp một cách dễ dàng Hãy cùng khám phá hướng dẫn chi tiết để sử dụng Figma một cách hiệu quả nhất.
Khi bạn mở Figma, giao diện sẽ bao gồm các thành phần chính như sau:
Thanh công cụ: Nằm ở phía trên cùng, nơi bạn có thể tìm thấy các công cụ thiết kế cơ bản.
Bảng điều khiển bên trái: Hiển thị các dự án, trang và các lớp thiết kế của bạn.
Khu vực làm việc: Nơi bạn sẽ thực hiện các thiết kế của mình.
Bảng điều khiển bên phải: Cung cấp các tùy chọn thiết lập cho các thuộc tính của đối tượng mà bạn đang chọn.
3.2 Các công cụ cơ bản
Figma cung cấp nhiều công cụ hữu ích cho việc thiết kế:
1 Công cụ hình chữ nhật: Dùng để tạo ra các hình chữ nhật, hình vuông.
2 Công cụ bút: Giúp bạn vẽ các hình dạng tự do.
3 Công cụ văn bản: Để thêm văn bản vào thiết kế của bạn.
4 Công cụ tạo hình ảnh: Cho phép bạn chèn hình ảnh từ máy tính hoặc
3.3 Mẹo sử dụng hiệu quả
Dưới đây là một số mẹo để bạn sử dụng Figma hiệu quả hơn:
Sử dụng phím tắt: Làm quen với các phím tắt để tăng tốc độ làm việc.
Tổ chức lớp: Sử dụng nhóm lớp và các trang để quản lý thiết kế của bạn tốt hơn.
Chia sẻ và cộng tác: Mời đồng nghiệp tham gia vào dự án để làm việc cùng nhau trong thời gian thực.
Lưu trữ phiên bản: Sử dụng tính năng lịch sử phiên bản để quay lại các thay đổi trước đó nếu cần.
Bằng cách nắm vững giao diện và các công cụ, bạn sẽ có thể tận dụng tối đaFigma cho các dự án thiết kế của mình.
4 Khắc phục sự cố trong quá trình cài đặt
Trong quá trình cài đặt Figma, bạn có thể gặp phải một số sự cố Dưới đây là hướng dẫn khắc phục cho các vấn đề phổ biến nhất.
4.1 Lỗi phổ biến và cách khắc phục
Không tải được ứng dụng:
1 Kiểm tra kết nối internet của bạn.
2 Thử tải lại trang và nhấn vào nút tải xuống một lần nữa.
3 Nếu vấn đề vẫn tiếp diễn, hãy thử sử dụng trình duyệt khác.
1 Đảm bảo rằng bạn đã cài đặt ứng dụng đúng cách.
2 Kiểm tra xem hệ điều hành của bạn có đáp ứng yêu cầu tối thiểu của Figma hay không.
3 Khởi động lại máy tính và thử mở lại ứng dụng.
1 Đảm bảo bạn nhập đúng email và mật khẩu.
2 Nếu bạn quên mật khẩu, hãy sử dụng chức năng "Quên mật khẩu" để đặt lại.
3 Kiểm tra xem có thông báo nào từ Figma không, có thể tài khoản của bạn đã bị khóa.
4.2 Hỗ trợ từ cộng đồng Figma
Nếu bạn gặp phải sự cố mà không thể tự khắc phục, đừng ngần ngại tìm kiếm sự giúp đỡ từ cộng đồng Figma:
Tham gia vào diễn đàn Figma để đặt câu hỏi và tìm kiếm giải pháp.
Tìm kiếm video hướng dẫn trên YouTube liên quan đến vấn đề bạn gặp phải.
Tham gia vào các nhóm trên mạng xã hội hoặc các nền tảng như Discord, Slack để trao đổi với những người dùng khác.
Bằng cách thực hiện các bước khắc phục và tìm kiếm sự hỗ trợ từ cộng đồng, bạn có thể nhanh chóng giải quyết các vấn đề gặp phải trong quá trình cài đặt Figma.
5 Tài nguyên bổ sung Để nâng cao kỹ năng thiết kế và sử dụng Figma, bạn có thể tham khảo các tài nguyên bổ sung dưới đây:
Có rất nhiều video hướng dẫn trên YouTube giúp bạn làm quen với Figma từ cơ bản đến nâng cao Một số kênh nổi bật bao gồm:
Kênh Figma Official: Cung cấp các hướng dẫn chi tiết và cập nhật về các tính năng mới.
Kênh Design Course: Hướng dẫn thiết kế giao diện và sử dụng Figma trong các dự án thực tế.
Kênh Sài Gòn Design: Đối với người dùng Việt, nơi chia sẻ các mẹo và thủ thuật sử dụng Figma.
5.2 Diễn đàn và nhóm hỗ trợ
Các diễn đàn và nhóm hỗ trợ là nơi tuyệt vời để bạn có thể học hỏi và trao đổi kinh nghiệm:
Diễn đàn Figma Community: Nơi người dùng Figma trao đổi ý tưởng, thảo luận về các vấn đề gặp phải.
Nhóm Facebook Figma Việt Nam: Cộng đồng nơi bạn có thể hỏi đáp và chia sẻ kiến thức với người dùng khác.
Discord Figma Users: Kênh chat trực tiếp cho những ai muốn giao lưu và học hỏi cùng nhau.
Bằng cách tận dụng những tài nguyên này, bạn sẽ có thêm nhiều kiến thức và kỹ năng để sử dụng Figma một cách hiệu quả hơn.
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Khảo sát hiện trạng hệ thống
Website bán giày là một mô hình kinh doanh linh hoạt, thường xuyên cập nhật sản phẩm để đáp ứng nhu cầu thị trường Sneaker Haven cung cấp một nền tảng trực tuyến tiện lợi, giúp người mua và người bán giày dễ dàng tương tác và giao dịch.
Việc đặt hàng và thanh toán online là cần thiết và thuận tiện, nâng cao trải nghiệm mua sắm cho khách hàng Hệ thống quản lý là yếu tố quan trọng cho website kinh doanh online, cho phép quản trị viên kiểm soát các chức năng như quản lý sản phẩm, hóa đơn, khách hàng, bài viết, đơn hàng và tài khoản người dùng Đặc biệt, với một website thời trang hướng tới giới trẻ, cần có thiết kế hấp dẫn và tính năng thân thiện để tạo sự thuận lợi trong mua bán.
Yêu cầu hệ thống
Đối với quản trị viên (Admin)
Khi bắt đầu khởi tạo phần mềm, hệ thống yêu cầu đăng nhập bằng một tài khoản admin.
Khi bạn đăng nhập thành công, màn hình chính của trang quản trị sẽ xuất hiện với các mục như: Thống kê, Quản lý khách hàng, Quản lý sản phẩm, Quản lý tin tức, Quản lý danh mục sản phẩm và Quản lý hóa đơn.
Tính năng thống kê giúp người quản trị theo dõi tổng số đơn hàng đã đặt, doanh thu hàng tháng và số lượng khách hàng giao dịch mỗi tháng.
Quản lý khách hàng: Tính năng này cho phép người quản trị xem và cập nhật thông tin khách hàng.
Quản lý danh mục sản phẩm: Xem và cập nhật các sản phẩm trong danh mục.
Quản lý sản phẩm: Xem và cập nhật loại sản phẩm.
Quản lý tin tức: Tạo mới tin tức, cập nhật tin tức
Quản lý tin liên hệ: Xem và liên hệ lại với khách hàng
Quản lý đơn hàng là tính năng cho phép người quản trị theo dõi tất cả các đơn hàng của khách hàng, bao gồm trạng thái từng đơn hàng, thông tin chi tiết về khách hàng và ngày tạo đơn.
Người quản lý có khả năng thống kê tổng số đơn hàng, thành viên, sản phẩm và đánh giá Họ cũng có thể theo dõi biểu đồ doanh thu hàng ngày trong tháng, danh sách đơn hàng mới, top sản phẩm bán chạy và top sản phẩm được xem nhiều.
Khách hàng có thể tìm kiếm hoặc click vào đường link của website. website sẽ hiển thị trang chủ và các phân trang liên quan.
Tại website khách hàng có thể:
Xem chi tiết sản phẩm như (Tên sản phẩm, hình ảnh, đơn giá, màu sắc, mô tả chi tiết ).
Tìm kiếm sản phẩm (theo tên sản phẩm).
Khi khách hàng muốn mua hàng khách hàng cần thêm các sản phẩm muốn mua vào giỏ hàng.
Khách hàng có thể xem danh sách các sản phẩm đã thêm vào giỏ hàng, xem chi tiết từng sản phẩm có trong giỏ hàng.
Thực hiện thêm/bớt số lượng sản phẩm, xóa sản phẩm khỏi giỏ hàng, thay đổi size, màu sắc của sản phẩm
Để thanh toán đơn hàng, khách hàng cần đăng ký tài khoản nếu là người mới Quá trình đăng ký yêu cầu điền các thông tin cơ bản như họ tên, tên đăng nhập, mật khẩu, số điện thoại và email.
Sau khi đã đăng ký thành công khách hàng cần đăng nhập đúng thông tin tài khoản đã đăng ký để thực hiện mua hàng
Sau khi nhấn nút mua hàng, hóa đơn của khách hàng sẽ hiển thị thông tin chi tiết bao gồm tên sản phẩm, đơn giá, số lượng, thành tiền và thuế.
Khi khách hàng thực hiện lần đầu mua sắm, việc điền thông tin nhận hàng là rất quan trọng Khách hàng cần cung cấp đầy đủ họ tên, số điện thoại, email, địa chỉ nhận hàng và ghi chú để đảm bảo quá trình giao hàng diễn ra thuận lợi.
Tại đây khách hàng cũng có thể thêm địa chỉ nhận hàng mới, sửa thông tin và xóa địa chỉ nhận hàng
Sau khi hoàn tất các yêu cầu cần thiết, khách hàng sẽ tiến hành bước tiếp theo là lựa chọn hình thức thanh toán Khách hàng có thể lựa chọn giữa thanh toán trực tiếp hoặc thanh toán trực tuyến.
Khi khách hàng muốn thanh toán bằng hình thức online khách hàng cần liên kết thẻ ngân hàng hoặc ví điện tử và thực hiện thanh toán.
Cuối cùng là xác nhận mua hàng và đặt hàng thành công.
Khách hàng có thể dễ dàng truy cập lịch sử mua hàng tại tài khoản cá nhân của mình, nơi hiển thị chi tiết hóa đơn bao gồm mã hóa đơn, tên sản phẩm, thành tiền, thời gian mua và thời gian nhận sản phẩm.
Các yêu cầu phi chức năng cho hệ thống bao gồm giao diện dễ sử dụng và thân thiện với người dùng, đảm bảo hiệu suất cao với tốc độ tải trang nhanh ngay cả khi có nhiều người truy cập Bảo mật dữ liệu khách hàng và thông tin thanh toán là ưu tiên hàng đầu, cần sử dụng SSL để mã hóa dữ liệu Hệ thống cũng cần có khả năng mở rộng để tích hợp các tính năng mới và xử lý lượng lớn người dùng, đồng thời dễ dàng bảo trì và cập nhật khi cần thiết.
Quyền hạn trong hệ thống được phân chia rõ ràng: Quản trị viên có toàn quyền quản lý mọi khía cạnh của hệ thống, bao gồm sản phẩm, đơn hàng, khách hàng và nội dung trang web Nhân viên có quyền hạn hạn chế hơn, chủ yếu tập trung vào việc quản lý đơn hàng và hỗ trợ khách hàng Trong khi đó, khách hàng chỉ có quyền truy cập và tương tác với các tính năng như tìm kiếm sản phẩm, đặt hàng và xem lịch sử mua hàng của mình.
Biểu đồ Use Case
Khái niệm Use Case (UC) được Jacobson giới thiệu vào năm 1994 trong thời gian làm việc tại Ericsson, nhằm mô tả cách người dùng tương tác với hệ thống phần mềm để thực hiện các nhiệm vụ cụ thể UC tập trung vào hành vi của người sử dụng mà không đề cập đến cách thức hoạt động bên trong của hệ thống Nó không phải là thiết kế hay kế hoạch cài đặt, mà là một phần quan trọng trong việc giải quyết vấn đề Tiến trình của hệ thống được phân chia thành các UC, giúp nhận diện rõ ràng từng phần và cho phép nhiều người cùng tham gia xử lý.
UC là nền tảng quan trọng trong phân tích hệ thống, giúp xác định đầy đủ các yêu cầu của người sử dụng Việc này đảm bảo rằng hệ thống được phát triển sẽ đáp ứng mọi nhu cầu và mong đợi của người dùng một cách hiệu quả.
UC là tập hợp các hành động, trong đó mỗi hành động đại diện cho những gì mà hệ thống thực hiện UC đóng vai trò là hạt nhân, thể hiện mức độ thực hiện toàn bộ hoặc một phần của hệ thống.
3.3.1 Xác định các tác nhân
- Xem thông tin sản phẩm
- Xem lịch sử mua hàng
3.3.2 Sơ đồ Use Case tổng quan
Hình 3 1 Sơ đồ Use Case tổng quan
3.3.3 Biểu đồ Use Case Đăng Ký
Hình 3 2 Sơ đồ Use Case đăng ký
Hình 3 3 Sơ đồ hoạt động chức năng đăng ký
Bảng 3 1 Đặc tả Use Case đăng ký
Mô tả Cho phép khách hàng đăng ký thành viên vào hệ thống Điều kiện tiên quyết
Website hiện chưa được đăng nhập
Kích hoạt Khách hàng chọn đăng ký ở giao diện trang chủ
Bảng 3 2 Dữ liệu đầu vào chức năng đăng ký
STT Trường dữ liệu Bắc buộc? Điều kiện hợp lệ Ví dụ
1 Tên đăng nhập Có Từ 6 đến 20 ký tự, chưa tồn tại trong hệ thống nva1320
2 Mật khẩu Có 8 ký tự trở lên nvanva100
Có Giống với mật khẩu nvanva100
4 Họ tên Có Tối đa 30 ký tự Nguyễn Văn A
5 Email Có Địa chỉ email hợp lệ nva100@gmail.com
6 Số điện thoại Có Từ 10 đến 12 số 0907892198
3.3.4 Đặc tả Use Case Đăng Nhập
Hình 3 4 Sơ đồ Use Case đăng nhập Bảng 3 3 Đặc tả Use Case đăng nhập
Khách hàng, quản trị viên
Mô tả Cho phép khách hàng, quản trị viên đăng nhập vào hệ thống Điều kiện tiên quyết Đã có tài khoản trong hệ thống
Kích hoạt Chọn đăng nhập tại trang chủ
Bảng 3 4 Dữ liệu đầu vào chức năng đăng nhập
STT Trường dữ liệu Bắc Điều kiện hợp lệ Ví dụ buộc?
1 Tên đăng nhập Có Ít nhất 6 ký tự và tối đa 20 ký tự nva1234
2 Mật khẩu Có Ít nhất 8 ký tự 12345678
3.3.5 Đặc tả Use Case Tìm Kiếm Sản Phẩm
Hình 3 4 Sơ đồ Use Case tìm kiếm sản phẩm
Bảng 3 3 Đặc tả Use Case tìm kiếm sản phẩm
Tên UC Tìm kiếm sản phẩm
Mô tả Cho phép khách hàng tìm kiếm sản phẩm trong hệ thống Điều kiện tiên quyết
Có sản phẩm trong hệ thống
Kích hoạt Chọn tại thanh menu
Bảng 3 4 Dữ liệu đầu vào chức năng tìm kiếm sản phẩm
STT Trường dữ liệu Bắc buộc? Điều kiện hợp lệ Ví dụ
1 Tên sản phẩm Có Chuỗi ký tự Giày
3.3.6 Đặc tả Use Case Quản Lý Hỏi Đáp
Hình 3 5 Sơ đồ Use Case quản lý hỏi đáp
Bảng 3 5 Đặc tả Use Case quản lý hỏi đáp
Tên UC Quản lý hỏi đáp
Tác nhân chính Khách hàng
Khách hàng có quyền xem, đăng và sửa câu hỏi khi chưa nhận được phản hồi từ quản trị viên hoặc nhân viên chăm sóc khách hàng Ngoài ra, họ cũng có khả năng xóa câu hỏi của mình nếu cần thiết.
Khách hàng đăng nhập thành công vào hệ thống khi thực hiện chức năng đăng, sửa (chỉ sửa được câu hỏi khi chưa được trả lời), xóa câu hỏi
Kích hoạt Chọn xem chi tiết sản phẩm của một sản phẩm bất kỳ
Bảng 3 6 Dữ liệu đầu vào chức năng đăng/sửa câu hỏi, thêm/sửa câu trả lời
STT Trường dữ liệu Bắc buộc? Điều kiện hợp lệ Ví dụ
1 Nội dung câu hỏi Có Tối đa 500 ký tự Sản phẩm này có bảo hành không shop?
3.3.7 Đặc tả Use Case Quản Lý Giỏ Hàng
Hình 3 6 Sơ đồ Use Case quản lý giỏ hàng Bảng 3 7 Đặc tả Use Case quản lý giỏ hàng
Tên UC Quản lý giỏ hàng
Tác nhân chính Khách hàng,
Khách hàng có thể dễ dàng quản lý giỏ hàng của mình bằng cách xem các sản phẩm đã chọn, thêm sản phẩm mới, cập nhật số lượng hoặc xóa sản phẩm không mong muốn Điều này giúp nâng cao trải nghiệm mua sắm trực tuyến và đảm bảo sự thuận tiện cho người dùng.
Khách hàng đăng nhập thành công vào hệ thống
Kích hoạt Xem giỏ hàng: chọn xem giỏ hàng thêm sản phẩm vào giỏ: chọn button “Thêm vào giỏ” tại danh sách sản phẩm hoặc chi tiết sản phẩm
Cập nhật số lượng sản phẩm trong giỏ: chọn button “ ” tại trang xem giỏ hàng
Xóa sản phẩm trong giỏ: chọn button “ ” tại trang xem giỏ hàng
Bảng 3 8 Dữ liệu đầu vào chức năng cập nhật sản phẩm trong giỏ hàng
STT Trường dữ liệu Bắc buộc? Điều kiện hợp lệ Ví dụ
1 Số lượng Có Số nguyên dương 10
3.3.8 Đặc tả Use Case Đặt Hàng
Hình 3 7 Sơ đồ Use Case đặt hàng Bảng 3 9 Đặc tả Use Case đặt hàng
Tác nhân chính Khách hàng
Mô tả Cho phép khách hàng tiến hành đặt hàng các sản phẩm trong giỏ hàng Điều kiện tiên quyết
Có sản phẩm trong giỏ hàng, khách hàng đăng nhập thành công vào hệ thống
Kích hoạt Chọn xem giỏ hàng
Bảng 3 10 Dữ liệu đầu vào chức năng đặt hàng
STT Trường dữ liệu Bắc buộc? Điều kiện hợp lệ Ví dụ
1 Họ tên Có Tối đa 30 ký tự Nguyễn Văn A
2 Số điện thoại Có Từ 10 đến 12 số 0907892198
3 Email Có Đúng định dạng nva123@gmail.com
4 Địa chỉ nhận hàng Có Tối đa 200 ký tự 200 Nguyễn Văn
Cừ, phường AnHòa, quận NinhKiều, TP.CT
5 Mã giảm giá Không 5 ký tự g87df
3.3.9 Đặc tả Use Case Quản Lý Tài Khoản
Hình 3 8 Sơ đồ Use Case quản lý tài khoản
Bảng 3 11 Đặc tả Use Case quản lý tài khoản
Tên UC Quản lý tài khoản
Khách hàng có thể dễ dàng xem thông tin tài khoản của mình và cập nhật các dữ liệu cá nhân như họ tên, địa chỉ Ngoài ra, họ cũng có quyền xóa tài khoản khỏi hệ thống nếu cần thiết.
Khách hàng thành viên đăng nhập thành công vào hệ thống
Kích hoạt Chọn tên khách hàng thành viên
Bảng 3 12 Dữ liệu đầu vào chức năng cập nhật thông tin cá nhân
Bắc buộc? Điều kiện hợp lệ
1 Họ tên Có Tối đa 30 ký tự Nguyễn Văn A
2 Địa chỉ Có Tối đa 200 ký tự 200, Nguyễn Văn Cừ, phường An Hóa, quận Ninh Kiều, TP.CT
3.3.10 Đặc tả Use Case Đăng Xuất
Hình 3 9 Sơ đồ Use Case đăng xuất Bảng 3 13 Đặc tả Use Case đăng xuất
Quản trị viên, nhân viên chăm sóc khách hàng, thủ kho, khách hàng thành viên
Mô tả Cho phép quản trị viên, nhân viên chăm sóc khách hàng, thủ kho, khách hàng thành viên đăng xuất khỏi hệ thống Điều kiện tiên quyết
Quản trị viên, nhân viên chăm sóc khách hàng, thủ kho, khách hàng thành viên đăng nhập thành công vào hệ thống
Kích hoạt Chọn đăng xuất
Biểu đồ hoạt động
3.4.1 Biểu đồ hoạt động khách hàng
Hình 3.11 Biểu đồ hoạt động chức năng đăng nhập
Hình 3.12 Biểu đồ hoạt động chức năng đăng ký
Hình 3.13 Biểu đồ hoạt động chức năng mua hàng
Hình 3.14 Biểu đồ hoạt động chức năng tìm kiếm
Hình 3.15 Biểu đồ hoạt động chức năng liên hệ
Sơ đồ lớp
Thiết kế cơ sở dữ liệu
Bảng 2: Danh sách các bảng
Nhom San Pham Lưu thông tin của nhóm sản phẩm
Danh Muc San Pham Lưu thông tin danh mục sản phẩm
Binh Luan San Pham Lưu thông tin các bình luận về sản phẩm
Giam Gia Lưu thông tin về các chương trình giảm giá Kho Hang Lưu thông tin về kho hàng
San Pham Lưu thông tin về sản phẩm
Phieu Nhap Lưu thông tin về phiếu nhập
Chi Tiet Phieu Nhap Lưu thông tin chi tiết phiếu nhập Đon Hang Lưu thông tin đơn hàng
Chi Tiet Don Hang Lưu thông tin chi tiết đơn hàng
Phieu Xuat Lưu thông tin về phiếu xuất
Chi Tiet Phieu Xuat Lưu thông tin chi tiết phiếu xuất
Khach Hang Lưu thông tin khách hàng
Hinh Thuc Thanh Toan Lưu thông tin hình thức thanh toán
Thanh Toan Lưu thông tin thanh toán đơn hàng
Image Lưu thông về hình ảnh của sản phẩm
Danh Muc Tin Lưu thông tin về danh mục tin
Nhom Tin Lưu thông tin về các nhóm tin
Nha Cung Cap Lưu thông tin về nhà cung cấp sản phẩm
Noi Dung Tin Lưu thông về nội dung tin tức
Binh Luan Tin Lưu thông tin về các bình luận của tin tức
Tai Khoan Lưu thông tin về tài khoản của nhân viên
Tu Van Tra Loi Lưu thông tin về các trả lời câu hỏi
Tu Van Hoi Lưu thông tin về các câu hỏi, thắc mắc
Tai Khoan Quyen Lưu thông tin về quyền của nhân viên
Phan Quyen Lưu thông tin các quyền trong hệ thống
Quang Cao Lưu các thông tin liên kết quảng cáo
Tên thuộc tính Kiểu Dữ
Mã nhóm sản phẩm sTennhomsanpham string public Tên nhóm sản phẩm
Bảng Danh Muc San Pham
Tên thuộc tính Kiểu Dữ
PK_sDanhmucsanphamID string public Khóa chính
Mã danh mục sản phẩm FK_sNhomsanphamID string public Khóa ngoại
Mã nhóm sản phẩm sTendanhmucsanpham string public Tên danh mục sản phẩm
Tên thuộc tính Kiểu Dữ
PK_iGiamgiaID Int public Khóa chính
Mã giảm giá sTengiamgia là một chuỗi công khai, cho phép người dùng nhận được ưu đãi Tên giảm giá sMota mô tả chi tiết về chương trình khuyến mãi Thời gian áp dụng được xác định bởi dNgaybatdaugiamgia (ngày bắt đầu) và dNgayketthucgiamgia (ngày kết thúc) Mức giảm giá được thể hiện qua fMucgiamgia, trong khi bHienthi xác định liệu ưu đãi có được hiển thị công khai hay không.
Tên thuộc tính Kiểu Dữ
PK_iSanphamID Int public Khóa chính
FK_sDanhmucsanphamID string public Khóa ngoại
Mã danh mục sản phẩm
FK_iGiamgiaID Int Khóa ngoại
FK_iKhohangID Int Khóa ngoại
The article outlines the structure of a product inventory system, detailing key attributes for each item It includes a product code, product name, description, origin, selling price, quantity in stock, representative image, and view count These elements are essential for managing and displaying product information effectively in an online marketplace.
Số lượt xem bConhang Boolean Publi c
Tình trạng còn hàng hay không bBanchay Boolean Publi c
Tình trạng bán chạy hay không bHienthi boolean public Hiển thị hay không hiển thị
Tên thuộc tính Kiểu Dữ
PK_iDonhangID Int public Khóa chính
FK_iKhachhangID Int public Khóa Mã khách hàng ngoại FK_iHinhthucthanhtoanI
The payment method code is associated with the order date and delivery date, which are both publicly accessible The delivery address is specified as a string, along with any additional notes related to the order The payment status is indicated as a boolean value, reflecting whether the payment has been completed, while the delivery status is also represented as a boolean, showing the current state of the delivery process.
Bảng Chi Tiet Don Hang
Tên thuộc tính Kiểu Dữ
Mã chi tiết đơn hàng
FK_iDonhangID Int public Khóa ngoại
FK_iSanPhamID Int public Khóa ngoại
Mã sản phẩm iSoluong Int public Số lương fGiaban Float public Giá bán fGiamgia float public Giảm giá
PK_iKhachhangID int public Khóa chính
Mã khách hàng là một chuỗi ký tự, trong khi tên đăng nhập và mật khẩu cũng được định nghĩa dưới dạng chuỗi Email và câu hỏi bí mật được lưu trữ dưới dạng chuỗi, cùng với câu trả lời bí mật Họ tên khách hàng được lưu trữ dưới dạng chuỗi, năm sinh là một số nguyên, và giới tính được biểu thị bằng kiểu boolean Địa chỉ và số điện thoại cũng được định nghĩa là chuỗi Ngày đăng ký là kiểu dữ liệu ngày tháng, và quyền đăng nhập được xác định bằng kiểu boolean.
Tên thuộc tính Kiểu Dữ
PK_iThanhtoanID int public Khóa chính
FK_iTaikhoanID Int public Khóa ngoại
FK_iDonhangID Int public Khóa ngoại
Mã đơn hàng tNgaythanhtoan Date public Ngày thanh toán fSotien Float public Số tiền bTrangthai boolean public Trạng thái
Chương 3 đã đưa ra những đặc tả yêu cầu chi tiết cho hệ thống, các yêu cầu phi chức năng, thiết kế hệ thống chi tiết các chức năng Từ đó, cùng với cơ sở lý thuyết em sẽ thiết kế giao diện Website và trình bày tại chương 4.