đề tài thiết kế giao diện website và mobile cửa hàng bán thức ăn bằng công cụ figma

+ Community UI Kits: Cộng đồng Figma cung cấp nhiều bộ dụng cụ khác nhauđược tạo ra bởi cộng đồng người dùng, chứa các yếu tố UI/UX phổ biến, biểu mẫu,biểu đồ và nhiều hơn nữa.+ Wirefram

GIỚI THIỆU

Phạm vi báo cáo

Phạm vi của báo cáo về Figma sẽ tập trung vào những điểm sau:

+ Giới thiệu Figma: Tóm tắt về công cụ, bao gồm tính năng chính và mục đích sử dụng.

+ Ưu điểm của Figma: Liệt kê các lợi ích và tiện ích của Figma trong quá trình thiết kế và phát triển sản phẩm số.

+ Ứng dụng thực tiễn: Mô tả cách Figma được sử dụng để thiết kế UI/UX, tạo mockup và prototype.

+ Hợp tác và linh hoạt: Đánh giá khả năng cộng tác và linh hoạt của Figma, bao gồm tính năng làm việc thời gian thực và truy cập từ xa.

+ Tương lai và xu hướng: Phân tích tương lai của Figma và cách nó có thể ứng phó với xu hướng mới trong thiết kế sản phẩm.

KHÁM PHÁ FIGMA

Giới thiệu về Figma

Figma là một công cụ thiết kế đồ họa và giao diện người dùng (UI) dựa trên web, được phát triển để hỗ trợ quy trình thiết kế và phát triển sản phẩm số Nó nổi tiếng với tính linh hoạt, khả năng cộng tác thời gian thực và truy cập từ xa.

Với Figma, người dùng có thể tạo ra các bản vẽ, mockup và prototype của sản phẩm một cách dễ dàng và linh hoạt Giao diện trực quan và tích hợp các tính năng mạnh mẽ như làm việc đồng thời, phản hồi thời gian thực và tính tương thích đa nền tảng đã giúp Figma trở thành lựa chọn phổ biến cho các nhóm thiết kế và phát triển trên toàn thế giới.

Với việc hoạt động trên nền tảng web, Figma cung cấp sự linh hoạt và tiện lợi cho các nhóm làm việc phân tán, cho phép họ truy cập và làm việc trên các thiết bị khác nhau từ bất kỳ đâu có kết nối internet Điều này giúp tăng cường sự hợp tác và trao đổi ý tưởng giữa các thành viên trong nhóm một cách hiệu quả.

Những tính năng nổi bật của phần mềm Figma

Là quá trình xuất bản một bản thử nghiệm hoặc một phiên bản tương tác của thiết kế (prototype) trong Figma để nhận phản hồi từ người dùng hoặc đồng nghiệp.

Khi đã hoàn thành việc tạo prototype trong Figma, ta có thể chia sẻ nó với những người khác bằng cách xuất bản và cung cấp một liên kết hoặc URL Những người khác có thể truy cập vào liên kết này và xem prototype, tương tác với nó và để lại nhận xét hoặc phản hồi trực tiếp trên các phần của prototype Điều này giúp thu thập ý kiến từ người dùng cuối và đồng nghiệp để cải thiện và hoàn thiện thiết kế.

Trong Figma, có nhiều bộ dụng cụ (toolkit) được cung cấp để hỗ trợ việc thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UX) Dưới đây là một số bộ dụng cụ UX phổ biến có thể sử dụng:

+ Figma's built-in UI Kits: Figma cung cấp một số UI Kits tích hợp sẵn, bao gồmMaterial Design, iOS, và các bộ UI kit khác, giúp bắt đầu nhanh chóng với các yếu tố thiết kế tiêu chuẩn của hệ điều hành hoặc nền tảng cụ thể.

+ Community UI Kits: Cộng đồng Figma cung cấp nhiều bộ dụng cụ khác nhau được tạo ra bởi cộng đồng người dùng, chứa các yếu tố UI/UX phổ biến, biểu mẫu, biểu đồ và nhiều hơn nữa.

+ Wireframe Kits: Có các bộ dụng cụ wireframe sẵn có trong Figma, giúp nhanh chóng bố cục và thiết kế các khung trang ban đầu của sản phẩm một cách dễ dàng và nhanh chóng.

+ Icon Sets: Figma cung cấp một loạt các bộ biểu tượng (icon sets) cho các dự án thiết kế, bao gồm cả các biểu tượng vector và biểu tượng raster, giúp tạo ra giao diện hấp dẫn và chuyên nghiệp.

+ Component Libraries: Có thể tạo và quản lý các thư viện thành phần trong Figma, cho phép tái sử dụng các thành phần giao diện và phát triển hệ thống thiết kế nhất quán.

+ Plug-ins: Ngoài các bộ dụng cụ tích hợp sẵn, có nhiều plug-in được phát triển bởi cộng đồng hoặc bên thứ ba trong Figma, cung cấp các tính năng mở rộng và các bộ dụng cụ bổ sung cho quy trình làm việc.

Các bộ dụng cụ này giúp tăng cường quy trình thiết kế trong Figma bằng cách cung cấp các yếu tố và công cụ phổ biến, giúp tiết kiệm thời gian và tối ưu hóa hiệu suất.

Là một tính năng cho phép dễ dàng tạo và điều chỉnh các lưới lặp lại (grid) của các yếu tố giao diện người dùng

Bằng cách sử dụng Repeat Grid, có thể tạo ra một chuỗi các yếu tố như các ô nhập liệu, nút, hoặc thậm chí cả các khối của bố cục, và sau đó tái tạo chúng một cách nhanh chóng và dễ dàng để tạo ra các biến thể khác nhau.

Tóm lại, Repeat Grid trong Figma là một tính năng mạnh mẽ giúp tăng cường hiệu suất và linh hoạt trong quá trình thiết kế giao diện người dùng bằng cách tự động tạo và điều chỉnh các lưới lặp lại của các yếu tố giao diện.

Trong Figma, có thể truy cập vào nhiều bộ biểu tượng (icon sets) khác nhau để sử dụng trong thiết kế Dưới đây là một số nguồn tài nguyên biểu tượng phổ biến mà có thể sử dụng:

+ Icon Sets tích hợp sẵn: Figma cung cấp một số bộ biểu tượng được tích hợp sẵn như Font Awesome, Material Design Icons, Feather Icons và nhiều hơn nữa Bạn có thể truy cập chúng bằng cách sử dụng công cụ "Insert" và tìm kiếm trong

+ Community Libraries: Cộng đồng Figma thường chia sẻ các bộ biểu tượng tự do mà có thể sử dụng Truy cập vào tab "Community" trong thư viện tài nguyên Figma để tìm kiếm và sử dụng các bộ biểu tượng được chia sẻ bởi người dùng khác.

Tìm hiểu về các khái niệm cơ bản trong figma

Một số khái niệm cơ bản trong Figma:

+ Frames (Khung): Frames là các vùng làm việc trong Figma, chứa các yếu tố thiết kế như hình ảnh, văn bản, biểu đồ và nhiều hơn nữa Mỗi Frame có thể đại diện cho một màn hình hoặc một phần của giao diện người dùng.

+ Layers (Lớp): Layers là các thành phần cơ bản của các yếu tố trong Figma, cho phép tổ chức và quản lý các yếu tố trên màn hình Các yếu tố được sắp xếp theo lớp trong cửa sổ Layer, giúp dễ dàng tìm và chỉnh sửa chúng.

+ Components (Thành phần): Components là các yếu tố được tái sử dụng trong Figma, giúp tạo ra các thiết kế nhất quán và dễ dàng cập nhật Khi tạo một Component và sử dụng nó trong các Frame khác, bất kỳ thay đổi nào thực hiện trên Component gốc cũng sẽ tự động áp dụng cho tất cả các thể hiện của Component đó.

+ Instances (Thể hiện): Instances là các phiên bản cụ thể của một Component Ta có thể tạo nhiều Instances từ một Component và tùy chỉnh chúng mà không ảnh hưởng đến Component gốc.

+ Styles (Kiểu dáng): Styles là các thuộc tính được áp dụng cho văn bản và hình ảnh trong Figma, bao gồm kiểu chữ, màu sắc, kích thước và nhiều hơn nữa Bằng cách sử dụng Styles, có thể duy trì nhất quán và dễ dàng thay đổi các yếu tố thiết kế trong toàn bộ dự án.

+ Prototyping (Tạo Prototype): Prototyping là quá trình tạo ra các liên kết tương tác giữa các màn hình và yếu tố trong Figma, cho phép thử nghiệm và hiển thị cách sản phẩm hoạt động.

CHUẨN BỊ VÀ PHÂN TÍCH YÊU CẦU

Xác định mục tiêu thiết kế

Giao diện bắt mắt là một giao diện mà thu hút và giữ chú ý của người dùng ngay từ cái nhìn đầu tiên Nó kết hợp sự sáng tạo trong việc sắp xếp, màu sắc, hình ảnh và các yếu tố thiết kế khác để tạo ra một trải nghiệm thú vị và hấp dẫn Giao diện bắt mắt thường có độ sáng, màu sắc phong phú và sử dụng các yếu tố thiết kế như hình ảnh chất lượng cao, phông chữ hấp dẫn và hiệu ứng đặc biệt để làm nổi bật nội dung và thu hút sự chú ý của người dùng

- Sử dụng bố cục hợp lý:

+ Bố cục là cách các yếu tố trên giao diện được sắp xếp.

+ Một bố cục hợp lý sẽ giúp người dùng dễ dàng tìm kiếm thông tin và thực hiện các hành động mong muốn.

+ Chúng ta nên sử dụng các nguyên tắc thiết kế như cân bằng, tỷ lệ và sự tương phản để tạo ra một bố cục hợp lý.

- Sử dụng màu sắc phù hợp:

+ Màu sắc có thể tác động đến cảm xúc và hành vi của người dùng.

+ Chúng ta nên chọn những màu sắc phù hợp với thương hiệu và đối tượng mục tiêu của chúng ta.

+ Chúng ta cũng nên sử dụng màu sắc một cách nhất quán để tạo ra giao diện hài hòa.

- Sử dụng hình ảnh và video chất lượng cao:

+ Hình ảnh và video có thể thu hút sự chú ý của người dùng và giúp truyền tải thông tin một cách hiệu quả.

+ Chúng ta nên sử dụng hình ảnh và video chất lượng cao, có liên quan đến nội dung của trang web hoặc ứng dụng.

- Sử dụng phông chữ dễ đọc:

+ Phông chữ là yếu tố quan trọng ảnh hưởng đến khả năng đọc của người dùng.

+ Chúng ta nên chọn phông chữ dễ đọc, có kích thước phù hợp và phù hợp với phong cách của giao diện.

- Sử dụng khoảng trắng một cách hiệu quả:

+ Khoảng trắng là khoảng trống giữa các yếu tố trên giao diện.

+ Việc sử dụng khoảng trắng một cách hiệu quả có thể giúp tạo ra giao diện thoáng mát và dễ nhìn.

- Sử dụng các hiệu ứng trực quan:

+ Các hiệu ứng trực quan như di chuột, nhấp chuột và chuyển trang có thể giúp tạo ra giao diện thú vị và hấp dẫn.

+ Tuy nhiên, Chúng ta nên sử dụng các hiệu ứng trực quan một cách tiết kiệm để tránh gây rối mắt cho người dùng.

- Đảm bảo giao diện thân thiện với thiết bị di động:

+ Ngày càng nhiều người sử dụng thiết bị di động để truy cập internet.

+ Do đó, chúng ta cần đảm bảo rằng giao diện của mình thân thiện với thiết bị di động và có thể hiển thị tốt trên các màn hình có kích thước khác nhau.

- Kiểm tra giao diện trên nhiều trình duyệt và thiết bị:

+ Điều quan trọng là phải kiểm tra giao diện của mình trên nhiều trình duyệt và thiết bị khác nhau để đảm bảo rằng nó hiển thị chính xác.

+ Chúng ta có thể sử dụng các công cụ như BrowserStack và Responsinator để kiểm tra giao diện của mình.

- Thu thập phản hồi từ người dùng:

+ Cách tốt nhất để biết liệu giao diện của Chúng ta có bắt mắt hay không là thu thập phản hồi từ người dùng.

+ Chúng ta có thể thực hiện khảo sát, phỏng vấn hoặc thử nghiệm người dùng để thu thập phản hồi.

- Cập nhật giao diện thường xuyên:

+ Xu hướng thiết kế thay đổi theo thời gian.

+ Do đó, Chúng ta cần cập nhật giao diện của mình thường xuyên để đảm bảo rằng nó luôn bắt mắt và thu hút người dùng.

Bố cục khoa học trong thiết kế giao diện là việc sắp xếp các yếu tố trên giao diện một cách hợp lý, logic và khoa học để giúp người dùng dễ dàng tìm kiếm thông tin, thực hiện các hành động mong muốn và có trải nghiệm tốt nhất khi sử dụng.

Nguyên tắc cơ bản của bố cục khoa học:

- Sự cân bằng: Các yếu tố trên giao diện cần được sắp xếp một cách cân bằng để tạo ra cảm giác hài hòa và dễ chịu cho mắt.

- Tỷ lệ: Các yếu tố trên giao diện cần có tỷ lệ phù hợp với nhau và với tổng thể giao diện.

- Sự tương phản: Các yếu tố trên giao diện cần có sự tương phản đủ để tạo ra sự nổi bật và giúp người dùng dễ dàng phân biệt các yếu tố khác nhau.

- Sự lặp lại: Việc sử dụng các yếu tố lặp đi lặp lại có thể giúp tạo ra sự thống nhất và dễ nhận biết cho giao diện.

- Sự phân cấp: Các yếu tố trên giao diện cần được sắp xếp theo thứ tự tầm quan trọng để giúp người dùng dễ dàng tập trung vào những thông tin quan trọng nhất.

- Sự rõ ràng: Giao diện cần phải rõ ràng và dễ hiểu để người dùng có thể dễ dàng tìm kiếm thông tin và thực hiện các hành động mong muốn.

- Sự nhất quán: Giao diện cần phải nhất quán về phong cách, bố cục và cách sử dụng các yếu tố để tạo ra trải nghiệm người dùng tốt nhất. Áp dụng bố cục khoa học trong thiết kế giao diện:

- Sử dụng lưới bố cục: Lưới bố cục là một công cụ hữu ích giúp Chúng ta sắp xếp các yếu tố trên giao diện một cách khoa học và hợp lý.

- Sử dụng các nguyên tắc Gestalt: Các nguyên tắc Gestalt là một tập hợp các quy tắc tâm lý giúp Chúng ta sắp xếp các yếu tố trên giao diện để tạo ra sự nhận biết và hiểu biết tốt hơn cho người dùng.

- Sử dụng các yếu tố trực quan: Các yếu tố trực quan như đường nét, hình dạng và màu sắc có thể giúp Chúng ta hướng dẫn sự chú ý của người dùng đến những thông tin quan trọng.

- Sử dụng khoảng trắng: Khoảng trắng là khoảng trống giữa các yếu tố trên giao diện Việc sử dụng khoảng trắng một cách hiệu quả có thể giúp tạo ra giao diện thoáng mát và dễ nhìn.

- Kiểm tra giao diện trên nhiều thiết bị: Điều quan trọng là phải kiểm tra giao diện của Chúng ta trên nhiều thiết bị khác nhau để đảm bảo rằng nó hiển thị chính xác và khoa học trên mọi màn hình.

Lợi ích của việc sử dụng bố cục khoa học:

- Tăng khả năng sử dụng: Bố cục khoa học giúp người dùng dễ dàng tìm kiếm thông tin, thực hiện các hành động mong muốn và có trải nghiệm tốt nhất khi sử dụng.

- Tăng tỷ lệ chuyển đổi: Bố cục khoa học có thể giúp tăng tỷ lệ chuyển đổi bằng cách thu hút sự chú ý của người dùng đến những hành động quan trọng.

- Tăng sự hài lòng của khách hàng: Bố cục khoa học có thể giúp tăng sự hài lòng của khách hàng bằng cách mang lại trải nghiệm người dùng tốt hơn.

Nghiên cứu và phân tích đối tượng sử dụng

Nghiên cứu và phân tích đối tượng sử dụng theo độ tuổi là một bước quan trọng trong thiết kế giao diện giúp chúng ta hiểu rõ hơn về nhu cầu, sở thích và hành vi của người dùng ở các độ tuổi khác nhau Từ đó, chúng ta có thể thiết kế giao diện phù hợp, đáp ứng nhu cầu của từng nhóm đối tượng mục tiêu, tăng hiệu quả sử dụng và thu hút người dùng.

Lợi ích của việc nghiên cứu và phân tích đối tượng sử dụng theo độ tuổi:

- Hiểu rõ nhu cầu và sở thích của người dùng: Mỗi độ tuổi có những nhu cầu, sở thích và hành vi sử dụng khác nhau Việc nghiên cứu và phân tích sẽ giúp chúng ta hiểu rõ những điểm khác biệt này và thiết kế giao diện phù hợp với từng nhóm đối tượng mục tiêu.

- Tăng hiệu quả sử dụng: Giao diện được thiết kế phù hợp với nhu cầu và sở thích của người dùng sẽ giúp họ dễ dàng sử dụng, tìm kiếm thông tin và thực hiện các hành động mong muốn, từ đó tăng hiệu quả sử dụng.

- Thu hút người dùng: Giao diện hấp dẫn và đáp ứng nhu cầu của người dùng sẽ thu hút họ sử dụng website, ứng dụng hoặc dịch vụ của chúng ta nhiều hơn.

- Tăng tỷ lệ chuyển đổi: Giao diện dễ sử dụng và thu hút sẽ khuyến khích người dùng thực hiện các hành động mong muốn như mua hàng, đăng ký hoặc cung cấp thông tin cá nhân, từ đó tăng tỷ lệ chuyển đổi.

Phương pháp nghiên cứu và phân tích đối tượng sử dụng theo độ tuổi:

- Khảo sát: Khảo sát là phương pháp phổ biến nhất để thu thập dữ liệu về nhu cầu, sở thích và hành vi của người dùng Chúng ta có thể thực hiện khảo sát trực tuyến, qua email, qua điện thoại hoặc phỏng vấn trực tiếp.

- Phân tích dữ liệu: Phân tích dữ liệu sử dụng website, ứng dụng hoặc dịch vụ của chúng ta có thể cung cấp cho chúng ta thông tin chi tiết về hành vi của người dùng ở các độ tuổi khác nhau.

- Nhóm tập trung: Nhóm tập trung là một phương pháp hiệu quả để thu thập ý kiến và phản hồi của người dùng về giao diện của chúng ta.

- Nghiên cứu trực tuyến: Nghiên cứu trực tuyến có thể giúp chúng ta tìm hiểu về xu hướng sử dụng internet và hành vi của người dùng ở các độ tuổi khác nhau.

2.2 Phân loại theo sở thích thời trang:

Nghiên cứu và phân tích đối tượng sử dụng theo sở thích thời trang trong thiết kế giao diện là quá trình thu thập và phân tích thông tin về sở thích, xu hướng thời trang của người dùng để từ đó thiết kế giao diện phù hợp, thu hút và giữ chân người dùng Việc phân tích theo sở thích thời trang giúp chúng ta hiểu rõ hơn về phong cách, gu thẩm mỹ, thói quen mua sắm và hành vi sử dụng của các nhóm đối tượng mục tiêu khác nhau, từ đó đưa ra những quyết định sáng suốt trong thiết kế giao diện.

- Hiểu rõ nhu cầu và sở thích của người dùng: Mỗi nhóm đối tượng có sở thích thời trang khác nhau, từ đó có những nhu cầu và mong muốn riêng khi sử dụng website, ứng dụng hoặc dịch vụ liên quan đến thời trang Việc nghiên cứu và phân tích sẽ giúp chúng ta hiểu rõ những nhu cầu này và thiết kế giao diện phù hợp, đáp ứng mong muốn của từng nhóm đối tượng mục tiêu.

- Tăng hiệu quả sử dụng: Giao diện được thiết kế phù hợp với sở thích thời trang của người dùng sẽ giúp họ dễ dàng tìm kiếm thông tin, mua sắm sản phẩm và trải nghiệm dịch vụ một cách hiệu quả, từ đó tăng tỷ lệ chuyển đổi và thu hút khách hàng tiềm năng.

- Tăng khả năng nhận diện thương hiệu: Giao diện mang đậm phong cách thời trang phù hợp với đối tượng mục tiêu sẽ giúp tạo dựng hình ảnh thương hiệu độc đáo và ấn tượng, thu hút sự chú ý và ghi nhớ của người dùng.

- Tăng lợi thế cạnh tranh: Việc phân tích đối thủ cạnh tranh và xu hướng thị trường thời trang sẽ giúp chúng ta thiết kế giao diện vượt trội, tạo sự khác biệt và thu hút người dùng hiệu quả hơn.

- Ứng dụng mua sắm trực tuyến: Ứng dụng mua sắm trực tuyến cần nghiên cứu thói quen mua sắm và hành vi sử dụng của người dùng theo sở thích thời trang khác nhau để tối ưu hóa trải nghiệm mua sắm Ví dụ, ứng dụng mua sắm dành.

Thu thập yêu cầu từ khách hàng hoặc nhóm dự án

Thu thập yêu cầu là bước quan trọng đầu tiên trong quy trình thiết kế giao diện, giúp chúng ta xác định rõ mục tiêu, mong muốn và nhu cầu của khách hàng hoặc nhóm dự án đối với giao diện Từ đó, chúng ta có thể đưa ra phương án thiết kế phù hợp, đáp ứng đầy đủ yêu cầu và đảm bảo sự hài lòng của khách hàng.

Mục đích của việc thu thập yêu cầu:

- Hiểu rõ mục tiêu và mong muốn của khách hàng: Việc thu thập yêu cầu giúp chúng ta hiểu rõ mục tiêu mà khách hàng muốn đạt được với giao diện, từ đó đưa ra giải pháp thiết kế phù hợp.

- Xác định rõ nhu cầu của người dùng: Nhu cầu của người dùng là yếu tố then chốt ảnh hưởng đến thiết kế giao diện Việc thu thập yêu cầu giúp chúng ta xác định rõ nhu cầu của người dùng, từ đó thiết kế giao diện dễ sử dụng, đáp ứng nhu cầu của họ.

- Tránh những hiểu lầm và sai sót: Việc thu thập yêu cầu một cách cẩn thận và chi tiết sẽ giúp tránh những hiểu lầm và sai sót trong quá trình thiết kế, tiết kiệm thời gian và chi phí cho dự án.

- Tăng cường sự tham gia của khách hàng: Việc thu thập yêu cầu giúp khách hàng tham gia vào quá trình thiết kế ngay từ đầu, từ đó tăng cường sự tin tưởng và hài lòng của họ đối với sản phẩm cuối cùng.

Lập kế hoạch thiết kế giao diện

4.1 Xác định mục tiêu thiết kế:

Xác định mục tiêu thiết kế là bước quan trọng đầu tiên trong quy trình thiết kế giao diện, giúp chúng ta xác định rõ ràng những gì mình muốn đạt được với giao diện.

Mục tiêu thiết kế rõ ràng sẽ giúp chúng ta đưa ra những quyết định sáng suốt trong suốt quá trình thiết kế, từ đó tạo ra giao diện hiệu quả, đáp ứng nhu cầu của người dùng và đạt được mục tiêu kinh doanh.

Xác định mục tiêu thiết kế:

- Xác định mục tiêu kinh doanh: Xác định rõ ràng mục tiêu kinh doanh mà chúng ta muốn đạt được với website, ứng dụng hoặc dịch vụ của chúng ta.

- Nghiên cứu người dùng: Nghiên cứu nhu cầu, mong muốn và hành vi của người dùng mục tiêu của chúng ta.

- Phân tích đối thủ cạnh tranh: Phân tích giao diện và chiến lược marketing của các đối thủ cạnh tranh để tìm kiếm cơ hội và lợi thế cạnh tranh.

- Lập danh sách mục tiêu thiết kế: Lập danh sách các mục tiêu thiết kế cụ thể, đo lường được và phù hợp với mục tiêu kinh doanh, mục tiêu người dùng, mục tiêu thương hiệu và mục tiêu kỹ thuật.

- Ưu tiên mục tiêu thiết kế: Ưu tiên các mục tiêu thiết kế quan trọng nhất để đảm bảo chúng ta tập trung vào những yếu tố thiết yếu nhất.

Nghiên cứu thị trường trong thiết kế giao diện là quá trình thu thập và phân tích thông tin về thị trường, đối thủ cạnh tranh và người dùng mục tiêu để đưa ra những quyết định sáng suốt trong thiết kế Việc nghiên cứu thị trường giúp chúng ta hiểu rõ xu hướng thị trường, nhu cầu của người dùng và chiến lược của đối thủ cạnh tranh, từ đó thiết kế giao diện hiệu quả, đáp ứng nhu cầu thị trường và thu hút người dùng.

Phương pháp nghiên cứu thị trường trong thiết kế giao diện:

- Nghiên cứu định tính: Nghiên cứu định tính thu thập dữ liệu phi số lượng như ý kiến, cảm xúc và hành vi của người dùng Các phương pháp nghiên cứu định tính phổ biến bao gồm phỏng vấn, nhóm thảo luận, quan sát hành vi người dùng và thử nghiệm người dùng.

- Nghiên cứu định lượng: Nghiên cứu định lượng thu thập dữ liệu số lượng như số liệu thống kê, tỷ lệ và xu hướng thị trường Các phương pháp nghiên cứu định lượng phổ biến bao gồm khảo sát, phân tích dữ liệu web và phân tích xu hướng thị trường.

- Nghiên cứu sơ cấp: Nghiên cứu sơ cấp thu thập dữ liệu mới từ nguồn chính Các phương pháp nghiên cứu sơ cấp phổ biến bao gồm phỏng vấn, nhóm thảo luận, quan sát hành vi người dùng và thử nghiệm người dùng.

- Nghiên cứu thứ cấp: Nghiên cứu thứ cấp thu thập dữ liệu đã có sẵn từ các nguồn khác như báo cáo thị trường, bài viết nghiên cứu và dữ liệu thống kê chính phủ.

4.3 Lập sơ đồ trang web:

Lập sơ đồ trang web (hay còn gọi là Sitemap) là một công cụ quan trọng trong thiết kế giao diện, giúp chúng ta tổ chức và thể hiện cấu trúc của website một cách trực quan Sitemap giống như bản đồ thu nhỏ của website, liệt kê tất cả các trang và mối quan hệ giữa chúng.

Lợi ích của việc lập sơ đồ trang web:

- Hiểu rõ cấu trúc website: Sitemap giúp chúng ta hiểu rõ cấu trúc website, xác định các trang quan trọng và mối quan hệ giữa các trang.

- Tăng khả năng truy cập: Sitemap giúp các công cụ tìm kiếm như Google dễ dàng khám phá và lập chỉ mục tất cả các trang trên website của chúng ta, từ đó tăng khả năng truy cập website.

- Cải thiện trải nghiệm người dùng: Sitemap giúp người dùng dễ dàng điều hướng website và tìm kiếm thông tin họ cần.

- Xác định lỗi website: Sitemap có thể giúp chúng ta xác định các lỗi website như liên kết bị hỏng hoặc trang web bị thiếu.

- Giao tiếp hiệu quả: Sitemap là một công cụ giao tiếp hiệu quả giúp chúng ta chia sẻ cấu trúc website với các bên liên quan trong dự án.

Cách lập sơ đồ trang web:

- Xác định các trang trên website của chúng ta: Bắt đầu bằng cách xác định tất cả các trang trên website của chúng ta Bao gồm cả các trang chính, trang con, trang blog, trang sản phẩm,

- Sắp xếp các trang theo phân cấp: Sắp xếp các trang theo phân cấp, bắt đầu từ trang chủ và đi xuống các trang con.

- Xác định mối quan hệ giữa các trang: Xác định mối quan hệ giữa các trang, ví dụ như trang nào liên kết đến trang nào.

Công cụ trực tuyến: Có nhiều công cụ trực tuyến miễn phí và trả phí có thể giúp chúng ta tạo Sitemap XML và Sitemap HTML Một số công cụ phổ biến bao gồm Google Search Console, Screaming Frog SEO Spider và DYNO Sitemap Generator.

THIẾT KẾ GIAO DIỆN

Sơ đồ usecase tổng quát và đặc tả usecase cho từng màn hình phía người dùng (client)

Sơ đồ usecase tổng quát của khách hàng

1.2 Đặc tả từng màn hình 1.2.1 Đăng nhập

Name Đăng nhập Code Usecase01

Description Chức năng được dùng cho việc đăng nhập vào hệ thống để sử dụng các chức năng quản lý của người dùng.

Actor Khách hàng Trigger Người dùng đăng nhập khi chọn vào biểu tượng người dùng trên thanh header.

Pre-condition Người dùng chưa đăng nhập tài khoản vào hệ thống.

Post-condition -Nếu đăng nhập thành công: hệ thống sẽ chuyển sang trang trang chủ sau khi đăng nhập.

-Nếu đăng nhập thất bại sẽ thông báo “Tài khoản không tồn tại” và giữ nguyên trạng thái màn hình đăng nhập.

-Không kết nối được hệ thống -Mất kết nối internet

1 Hệ thống hiển thị giao diện đăng nhập.

2 Người dùng nhập vào tên tài khoản và mật khẩu.

3 Người dùng nhấn nút “Đăng nhập”.

4 Hệ thống kiểm tra tài khoản và mật khẩu đăng nhập và cho phép đăng nhập vào hệ thống.

-Tại bước 4 kiểm tra tài khoản không tồn tại trong hệ thống thì thông báo “Tài khoản không tồn tại”

Name Đăng xuất Code Usecase02

Description Chức năng được người dùng cho việc đăng xuất khỏi hệ thống khi người dùng không có nhu cầu sử dụng Actor Khách hàng Trigger Người dùng đăng xuất khi nhấn vào biểu tượng người dùng trên thanh header sau đó chọn đăng xuất.

Pre-condition Người dùng đã đăng nhập tài khoản vào hệ thống

Post-condition Đăng xuất thành công: hệ thống sẽ chuyển sang màn hình home trước khi đăng nhập.

1 Người dùng đang ở cửa sổ bất kỳ khi đang đăng nhập trong hệ thống và nhấn vào nút “Đăng xuất”

2 Hệ thống sẽ thoát ra màn hình trang chủ trước khi đăng nhập.

Name Đăng ký Code Usecase03

Description Chức năng được dùng cho việc đăng ký tài khoản để mua hàng Actor Khách hàng Trigger Người dùng chọn đăng ký trong phần “Đăng ký” trong trang Đăng Nhập

Pre-condition Người dùng chưa có tài khoản.

Post-condition Đăng ký thành công: hệ thống sẽ chuyển sang màn hình đăng nhập.

1 Hệ thống hiển thị giao diện đăng nhập 2 Người dùng chọn vào đăng ký

3 Hệ thống hiển thị giao diện đăng ký 4 Người dùng nhập đầy đủ thông tin và nhấn nút “Đăng ký”.

5 Hệ thống kiểm tra tài khoản và mật khẩu và thông báo đăng ký tài khoản thành công

-Tại bước 3 kiểm tra thông tin nếu tài khoản đã có trong cơ sở dữ liệu thì thông báo “Tài khoản đã tồn tại” và giữ nguyên màn hình đăng ký

Description Chức năng được dùng cho việc đổi lại mật khẩu khi người dùng không nhớ mật khẩu để đăng nhập vào hệ thống.

Actor Khách hàng Trigger Người dùng chọn quên mật khẩu trong phần “Quên mật khẩu” trong trang Đăng Nhập

Pre-condition Người dùng đã đăng ký tài khoản với hệ thống.

Post-condition Khôi phục mật khẩu thành công: hệ thống sẽ chuyển sang màn hình đăng nhập.

1 Hê thống hiển thị giao diện đăng nhập 2 Người dùng chọn vào quên mật khẩu 3 Hệ thống hiển thị giao diện quên mật khẩu 4 Người dùng nhập email (tài khoản) đã đăng ký tài khoản.

5 Người dùng chọn vào nút khôi phục 6 Hệ thống hiển thị giao diện khôi phục mật khẩu.

7 Người dùng nhập đầy đủ thông tin sau đó nhấn nút khôi phục

8 Hệ thống thông báo khôi phục mật khẩu thành công và chuyển sang màn hình đăng nhập.

-Tại bước 4 người dùng nhập sai thông tin email (tài khoản) đã đăng ký thì người dùng sẽ không nhận được mã OTP xác thực của hệ thống.

1.2.5 Xem thông tin cá nhân

Name Thông tin cá nhân

Description Chức năng được người dùng cho việc xem thông tin về tài khoản đã đăng ký với hệ thống.

Actor Khách hàng Trigger Người dùng chọn vào biểu tượng người dùng trên thanh header sau đó chọn “Thông Tin”

Pre-condition Người dùng đã đăng nhập tài khoản với hệ thống.

Post-condition Chọn thông tin : hệ thống sẽ chuyển sang màn hình xem thông tin tài khoản.

1 Hệ thống hiển thị thông tin tài khoản đang đăng nhập vào hệ thống

2 Người dùng xem hoặc thay đổi thông tin cá nhân 3 Nhập đầy đủ thông cần thay đổi

4 Nhấn váo nút Save 5 Hệ thống sẽ thông báo thay đổi thông tin thành công và giữ nguyên màn hình thông tin tài khoản.

1.2.6 Thêm sản phẩm vào giỏ hàng

Name Thêm sản phẩm vào giỏ hàng

Description Chức năng được người dùng cho việc mua hàng của người dùng.

Actor Khách hàng Trigger Người dùng chọn thêm sản phẩm vào giỏ hàng tại trang cửa hàng sau đó chọn mua sản phẩm sẽ hiện thông tin chi tiết của sản phẩm rồi nhấn vào nút thêm vào giỏ hàng

Pre-condition Người đã hoặc chưa đăng nhập tài khoản với hệ thống.

Post-condition Thêm sản phẩm vào giỏ hàng thành công : hệ thống sẽ chuyển sang màn hình giỏ hàng và sản phẩm vừa mới mua sẽ cập nhật trong giỏ hàng.

-Không kết nối được hệ thống.

1 Hệ thống hiển thị giao diện trang cửa hàng.

2 Chọn sản phẩm cần thêm và nhấn dấu + 3 Hệ thống sẽ hiển thị trang chi tiết sản phẩm sau đó chọn số lượng và nhấn nút thêm vào giỏ hàng.

4 Hệ thống sẽ hiển thị trang giỏ hàng và cập nhật sản phẩm trong giỏ hàng.

Name Tìm kiếm sản phẩm

Description Chức năng được người dùng cho việc tìm kiếm sản phẩm cần mua của người dùng.

Actor Khách hàng Trigger Người dùng nhập tên của sản phẩm mình muốn mua sau đó nhấn vào biểu tượng tìm kiếm trên thanh header

Post-condition - Tìm kiếm sản phẩm thành công : nếu tìm kiếm sản phẩm thành công thì hệ thống sẽ chuyển sang giao diện sản phẩm tìm được hiển thị màn hình ứng với kết quả tìm kiếm.

- Tìm kiếm sản phẩm thất bại : nếu tìm kiếm sản phẩm không có kết quả thì hệ thống sẽ hiển thị “Không có kết quả nào”.

2 Người dùng nhập sản phẩm cần tìm sau đó nhấn nút tìm kiếm

3 Hệ thống hiển thị các sản phẩm theo thông tin đã nhập.

Description Chức năng được người dùng cho việc lọc sản phẩm cần mua của người dùng.

Actor Khách hàng Trigger Người dùng tích chọn vào các mục cần tìm trên thanh sidebar trên trang cửa hàng

Post-condition - Lọc sản phẩm thành công: hệ thống sẽ hiển thị các các sản phẩm mà người dùng đã tích chọn.

2 Người dùng tích chọn sản phẩm cần mua.

4 Hệ thống hiển thị các sản phẩm mà người dùng đã tích chọn.

1.2.9 Xem chi tiết sản phẩm

Name Xem chi tiết sản phẩm

Description Chức năng được người dùng cho việc xem chi tiết sản phẩm có trong cửa hàng.

Actor Khách hàng Trigger Người dùng chọn thêm sản phẩm vào giỏ hàng tại trang cửa hàng sau đó chọn mua sản phẩm sẽ hiện thông tin chi tiết của sản phẩm Pre-condition Người đã hoặc chưa đăng nhập tài khoản với hệ thống.

Post-condition - Xem chi tiết sản phẩm: hệ thống sẽ hiển thị chi tiết sản phẩm có trong cửa hàng.

2 Chọn sản phẩm cần xem chi tiết và nhấn dấu + 3 Hệ thống sẽ hiển thị trang chi tiết sản phẩm đó.

Description Chức năng được người dùng cho việc xem các sản phẩm đã thêm vào giỏ hàng.

Actor Khách hàng Trigger Người dùng nhấn vào biểu tượng giỏ hàng trên thanh header Pre-condition Người đã hoặc chưa đăng nhập tài khoản với hệ thống.

Post-condition - Thành Công: hệ thống chuyển sang màn hình giỏ hàng và hiển thị các mặt hàng đã có trong giỏ.

1.Người dùng chọn vào biểu tượng giỏ hàng 2.Hệ thống chuyển sang màn hình giỏ hàng và hiển thị thông tin sản phẩm đã có trong giỏ hàng.

Luồng con A1: “Người dùng xóa sản phẩm trong giỏ hàng”

1.Người dùng nhấn nút x vào sản phẩm muốn xóa trong giỏ hàng.

2.Hệ thống thông báo bạn có chắc chắn muốn xóa sản phẩm.

4.Hệ thống sẽ xóa sản phẩm ra khỏi giỏ hàng.

Luồng con A2: “Người dùng thay đổi số lượng sản phẩm đã có trong giỏ hàng”

1.Người dùng chọn vào nút tăng giảm số lượng để thay đổi số lượng sản phẩm trong giỏ hàng.

2.Hệ thống cập nhập số tiền tổng của sản phẩm

Luồng con A3: “Người dùng chọn chức năng thanh toán”

1.Người dùng chọn nút thanh toán trong màn hình giỏ hàng.

2.Hệ thống chuyển sang màn hình chi tiết thanh toán.

3.Người dùng nhập thông tin thanh toán và thanh toán tiền bằng mã QR.

4.Hệ thống hiển thị thông báo thanh toán thành công.

Description Chức năng được người dùng xem các đơn hàng đã đặt.

Actor Khách hàng Trigger Người dùng chọn vào biểu tượng người dùng sau đó chọn vào đơn hàng đã mua để xem những đơn hàng đã đặt

Pre-condition Người đã đăng nhập tài khoản với hệ thống.

Post-condition - Thành Công: hệ thống chuyển sang màn hình đơn hàng đã mua và hiển thị các đơn hàng đã mua.

1 Người dùng chọn vào biểu tượng người dùng trên thanh header và sau đó chọn vào đơn hàng đã mua.

2 Hê thống hiển thị trang đơn hàng đã mua và hiển thị các thông tin của đơn hàng đó.

Luồng con A1: “Người dùng chọn xem chi tiết đơn hàng”

1.Người dùng chọn nút xem chi tiết tại đơn hàng muốn xem chi tiết.

2.Hệ thống hiển thị thông tin chi tiết đơn hàng gồm những sản phẩm đã đặt trong đơn hàng đó.

Luồng con A2: “Người dùng chọn hủy đơn hàng”

1.Người dùng chọn nút hủy đơn hàng tại đơn hàng muốn hủy.

2.Hệ thống thông báo bạn có chắc chắn muốn hủy đơn hàng.

4 Hệ thống sẽ hủy đơn hàng và lưu thông tin đơn hàng đã hủy vào cơ sở dữ liệu.

Tại bước 3: Người dùng chọn Không, hệ thống sẽ quay về màn hình đơn hàng đã mua.

Code Usecase12Description Chức năng được người dùng xem thông các thông tin về cửa hàng.

Actor Khách hàng Trigger Người dùng chọn vào Về chúng tôi trên thanh header để xem thông tin về cửa hàng.

Post-condition - Thành Công: hệ thống chuyển màn hình về chúng tôi và hiển thị các thông tin về cửa hàng.

1 Hệ thống hiển thị giao diện trang chủ 2 Người dùng chọn vào Về chúng tôi 3 Hệ thống hiển thị giao diện về chúng tôi và hiển thị các các thông tin về cửa hàng.

Name Liên Hệ Code Usecase13

Description Chức năng được người dùng để gửi lời nhắn hoặc ý kiến đến cửa hàng.

Actor Khách hàng Trigger Người dùng chọn vào Liên Hệ trên thanh header để gửi tin nhắn hoặc ý kiến cho cửa hàng.

Post-condition - Thành Công: hệ thống sẽ thông báo gửi thông tin liên lạc thành công.

1 Người dùng chọn vào mục liên lạc2 Hệ thống hiển thị màn hình liên lạc3 Người dùng nhập thông tin liên lạc và nhấn nút Gửi hiển thị lại giao diện liên lạc Alternative flow/process

Mô tả thành phần và trình bày bản thiết kế hoàn chỉnh cho từng trang (client)

2.1.1 Danh sách các frame, component, group, state, prototype trong thanh header:

Phần header sử dụng frame có tên là header.

Tìm kiếm - Danh sách các Prototype:

Khi bấm “Trang chủ” sẽ chuyển sang màn trang chủ.

Khi bấm “ Về chúng tôi” sẽ chuyển sang màn hình về chúng tôi.

Khi bấm “cửa hàng” sẽ chuyển sang màn hinh cửa hàng.

Khi bấm “Liên hệ” sẽ chuyển sang màn liên hệ.

Khi bấm giỏ hàng sẽ chuyển sang màn hình giỏ hàng.

2.1.2 Màn hình thiết kế hoàn chỉnh Header trước khi đăng nhập:

Header sau khi đăng nhập:

2.1.3 Các bước tạo giao diện Bước 1 tạo rectangle có kích thước toàn foodter.

Bước 2 Tạo Text: thêm văn bản vào hình chữ nhật bằng công cụ Text Tạo Component: Chọn cả hình chữ nhật và văn bản Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component Đặt tên cho component.

Thêm Property và Variant: Chọn component, mở bảng Properties Nhấp vào nút + và chọn Create Property Chọn kiểu dữ liệu là Variant

Bước 3: thêm hình ảnh vào avata và giỏ hàng.

2.2.1 Danh sách các frame, component, group, state, prototype trong Footer:

Phần footer sử dụng frame có tên là footer.

Gồm có 3 Component để hiện thị 3 cột thông tin là địa chỉ, thông tin liên hệ, các phương thức liên hệ.

2.2.2 Màn hình thiết kế hoàn chỉnh

2.2.3 Các bước tạo giao diện Bước 1 tạo rectangle có kích thước toàn foodter.

Bước 3: thêm hình ảnh vào.

2.3.1 Danh sách các frame, component, group, state, prototype trong Footer:

Phần sản phẩm sử dụng frame có tên là sản phẩm.

Khi bấm hình sản phẩm sẽ chuyển sang màn hình chi tiết sản phẩm.

Khi bấm “+” sẽ chuyển sang màn hình giỏ hàng2.3.2 Màn hình thiết kế hoàn chỉnh

2.3.3 Các bước tạo giao diện

Bước 1 tạo rectangle có kích thước toàn sản phẩm.

Bước 3: thêm hình ảnh vào.

Bước 4: Tạo button “+”.Sử dụng công cụ Text để thêm text "+" vào button Tạo component cho button: Chọn button (bao gồm hình chữ nhật và text) Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component cho button

2.4 Màn hình trang đăng nhập

2.4.1 Danh sách các frame, component, group, state, prototype trong màn hình

Phần đăng nhập sử dụng 2 frame có tên là giao diện đăng nhập, giao diện đăng nhập thành công

Status-bar dùng để hiển thị các thông tin giờ, pin, sóng của điện thoại Username dùng để hiển thị phần nhập thông tin email

Text input password dùng để hiển thị phần nhập thông tin mật khẩu Đăng nhập dùng để hiển thị nút đăng nhập

Khi bấm “đăng nhập” sẽ chuyển sang màn hình đăng nhập thành công Khi bấm “đăng kí” sẽ chuyển sang màn hình giao diện đăng kí

Khi bấm “quên mật khẩu” sẽ chuyển sang màn hình giao diện quên mật khẩu

- Màn hình thông báo đăng nhập thành công

Bước 1 tạo rectangle có kích thước toàn màn hình và tạo rectangle đăng nhập để làm khung đăng nhập.

Bước 2 Tạo chữ “Nhập email”, “Nhập mật khẩu” bằng công cụ text, tạo thẻ input để nhập dữ liệu Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text Tạo Component: Chọn cả hình chữ nhật và văn bản Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component Đặt tên cho component Thêm Property và Variant: Chọn component, mở bảng Properties Nhấp vào nút + và chọn Create Property Chọn kiểu dữ liệu là Variant

Bước 3 gom các thẻ input nhập mail, nhập mật khẩu vừa tạo thành 1 group

Bước 4 Tạo button đăng nhập Sử dụng công cụ Rectangle để vẽ một hình chữ nhật cho button đăng nhập Sử dụng công cụ Text để thêm text "Đăng nhập" vào button Tạo component cho button: Chọn button (bao gồm hình chữ nhật và text) Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn CreateComponent) để tạo component cho button.

Bước 5 Sử dụng công cụ Text để thêm text “Bạn chưa có tài khoản ” "Đăng ký" Chọn prototype -> interractions -> chọn trang home để chuyển đến.

2.5 Màn hình trang đăng ký

2.5.1 Danh sách các frame, component, group, state, prototype trong màn hình - Danh sách các frame:

Phần đăng ký sử dụng frame có tên là giao diện đăng ký để hiện thị toàn giao diện

- Danh sách các Component: Đăng ký dùng để thực hiện đăng ký tài khoản mới và chuyển hướng đến trang đăng nhập

Các thẻ input dùng để hiển thị phần nhập thông tin email, số điện thoại, mật khẩu , xác nhận mật khẩu

Khi bấm “đăng ký” sẽ chuyển sang màn hình đăng nhập.

- Màn hình thông báo ký thành công

Bước 1:Tạo 1 hình làm backgrouh, làm mờ hình đó và tạo frame chứa giao diện đăng ký

Bước 2: tạo chữ “Đăng ký bằng” bằng công cụ text, tạo thẻ input để nhập dữ liệu.

Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text Tạo Component: Chọn cả hình chữ nhật và văn bản Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component Đặt tên cho component Thêm Property và Variant: Chọn component, mở bảng Properties Nhấp vào nút + và chọn Create Property Chọn kiểu dữ liệu là Variant

Bước 3 gom các thẻ input nhập mail, nhập số điện thoại, nhập mật khẩu, xác nhận mật khẩu vừa tạo thành 1 group

Bước 4 Tạo button đăng ký Sử dụng công cụ Rectangle để vẽ một hình chữ nhật cho button đăng nhập Sử dụng công cụ Text để thêm text "Đăng ký" vào button.

Tạo component cho button: Chọn button (bao gồm hình chữ nhật và text) Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component cho button

Bước 5 Sử dụng công cụ Text để thêm text “Bạn chưa có tài khoản ” "Đăng nhập"

Chọn prototype -> interractions -> chọn trang đăng nhập để chuyển đến

2.6 Màn hình trang quên mật khẩu

Phần quên mật khẩu sử dụng frame có tên là giao diện quên mật khẩu để hiện thị toàn giao diện

Các thẻ input dùng để hiển thị phần nhập thông tin email

Khi bấm “Tiếp tục” sẽ chuyển sang màn hình khôi phục mật khẩu

Khi bấm “Quay lại” sẽ chuyển sang màn hình đăng nhập.

Bước 1: Tạo 1 hình làm backgrouh, làm mờ hình đó và tạo frame chứa giao diện quên mật khẩu

Bước 2: tạo chữ “Khôi phục mật khẩu” bằng công cụ text, tạo thẻ input để nhập dữ liệu Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text Tạo Component: Chọn cả hình chữ nhật và văn bản Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component Đặt tên cho component Thêm Property và Variant:

Chọn component, mở bảng Properties Nhấp vào nút + và chọn Create Property.

Chọn kiểu dữ liệu là Variant

Bước 3 Tạo button “quay lại” và “tiếp tục” Sử dụng công cụ Rectangle để vẽ một hình chữ nhật cho mỗi button Sử dụng công cụ Text để thêm text “quay lại” và

“tiếp tục” vào mỗi button Tạo component cho button: Chọn button (bao gồm hình chữ nhật và text) Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component cho button

2.7 Màn hình trang thiết lập lại mật khẩu

Khôi phục mật khẩu sử dụng frame có tên là giao diện khôi phục mật khẩu để hiện thị toàn giao diện

Các thẻ input dùng để hiển thị phần nhập thông tin nhập OTP, nhập mật khẩu mới, xác nhận mật khẩu

Khi bấm “Khôi phục” sẽ chuyển sang màn hình khôi phục mật khẩu thành công.

- Màn hình thông báo khôi phục mật khẩu thành công

2.7.3 Các bước tạo giao diện - Màn hình khôi phục mật khẩu Bước 1: Tạo frame chứa giao diện khôi phục mật khẩu

Bước 2: Tạo các chữ “Nhập OTP”, “Nhập mật khẩu mới”, “Xác nhận mật khẩu” bằng công cụ text, tạo thẻ input để nhập dữ liệu Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text Tạo Component: Chọn cả hình chữ nhật và văn bản Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component Đặt tên cho component Thêm Property và Variant: Chọn component, mở bảng Properties.

Nhấp vào nút + và chọn Create Property Chọn kiểu dữ liệu là Variant

Bước 3 Gom các thẻ input nhập OTP, nhập mật khẩu mới, xác nhận mật khẩu vừa tạo thành 1 group

Bước 4 Tạo button “Khôi phục” Sử dụng công cụ Rectangle để vẽ một hình chữ nhật cho button Sử dụng công cụ Text để thêm text “Khôi phục” vào trong button.

Tạo component cho button: Chọn button (bao gồm hình chữ nhật và text) Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create

- Màn hình khôi phục mật khẩu thành công:

Bước 1: Tạo frame chứa giao diện khôi phục mật khẩu thành công nằm trên frame khôi phục mật khẩu

Bước 2: Tạo các chữ “Khôi phục mật khẩu thành công”, “Mật khẩu của bạn đã được khôi phục thành công” bằng công cụ text Thêm icon tích xanh để bên trái

“Khôi phục mật khẩu thành công”

Bước 3 Tạo button “Đăng nhập” Sử dụng công cụ Rectangle để vẽ một hình chữ nhật cho button Sử dụng công cụ Text để thêm text “Đăng nhập” vào trong button.

Tạo component cho button: Chọn button (bao gồm hình chữ nhật và text) Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create).

2.8 Màn hình trang trang chủ

2.8.1 Danh sách các frame, component, group, state, prototype trong màn hình - Danh sách các Prototype:

Khi bấm “Mua ngay” sẽ chuyển sang màn hình trang của hàng.

2.8.2 Màn hình thiết kế hoàn chỉnh -Màn hình trang chủ trước khi đăng nhập

-Màn hình trang chủ sau khi đăng nhập

2.9 Màn hình trang cửa hàng

2.9.1 Danh sách các frame, component, group, state, prototype trong màn hì - Danh sách các frame:

Sản phầm sử dụng frame có tên là sản phầm để hiện thị toàn giao diện

Các thẻ input dùng để hiển thị phân loại sản phẩm.

Khi bấm “+” sẽ chuyển sang màn hình thêm sản phẩm vào giỏ hang.

Khi bấm “Sản phẩm” sẽ chuyển sang màn hình chi tiết sản phẩm

-Màn hình trang cửa hàng 1

-Màn hình trang cửa hàng 2

2.9.3 Các bước tạo giao diện B1 tạo rectangle header

Sơ đồ usecase tổng quát và đặc tả usecase cho từng màn hình phía người quản trị (admin)

Sơ đồ usecase tổng quát của admin

3.2 Đặc tả usecase admin 3.2.1 Thống kê

Name Thống Kê Code Usecase1

Description Người dùng để thống kê.

Actor Nhân Viên hoặc Admin

Trigger Người dùng nhấn vào chức năng thống kê.

Post-condition - Thành Công: hệ thống hiển thị thống kê của các sản phẩm tồn tại ở những trạng thái khác nhau (Ví dụ : tồn kho, hết hạn, hoặc đã bán được)

1 Người dùng nhấn vào thống kê 2 Hệ thống sẽ hiển thị giao diện thống kê 3 Chọn các mục hoặc các sản phẩm cần thống kê 4 Hệ thống sẽ thống kê được các sản phẩm mà người dùng đã chọn Alternative flow/process

Name Quản lý tài khoản

Description Chức năng được người dùng cho việc quản lý tài khoản.

Actor Nhân viên hoặc Admin

Trigger Người dùng nhấn vào chức năng quản lý tài khoản.

+Nếu thêm, sửa, xóa, tìm kiếm thành công hệ thống sẽ thực hiện và chuyển màn hình quản lý tài khoản.

+Nếu thêm, sửa, xóa, tìm kiếm thất bại thì hệ thống sẽ báo lỗi và giữ nguyên trạng thái màn hình.

-Chức năng được bắt đầu khi người dùng chọn chức năng quản lý tài khoản người dùng Hệ thống sẽ hiện màn hình quản lý tài khoản và hiển thị ra danh sách các thông tin của người dùng.

-Người dùng nhấn vào nút:

+”Tìm kiếm nâng cao” thì sẽ chuyển sang luồng A1+”Thêm người dùng” thì sẽ chuyển sang luồng A2

+”Sửa” thì sẽ chuyển sang luồng A3 +”Xóa” thì sẽ chuyển sang luồng A4

Luồng con A1: Người dùng nhấn vào nút “Tìm kiếm nâng cao”

1 Người dùng nhập thông tin cần tìm và nhấn “ Tìm kiếm nâng cao” trên màn hình quản lý tài khoản

2 Nếu tìm thấy, hệ thống sẽ hiển thị danh sách người dùng đã tìm thấy ở màn hình thông tin.

Luồng con A2: Người dùng nhấn vào nút ”Thêm người dùng”

1 Người dùng nhấn vào nút “Thêm người dùng” trên màn hình quản lý tài khoản.

2 Hệ thống sẽ hiển thị màn hình thêm và hiển thị ra các thông tin cần nhập để thêm tài khoản

3 Nhân viên hoặc admin nhập đầy đủ thông tin cần thiết và nhấn nút “Thêm người dùng”

4 Nếu thành công, hệ thống sẽ thêm và quay về màn hình quản lý tài khoản

Luồng con A3: Người dùng nhấn vào nút “Sửa”

1 Người dùng chọn thông tin muốn thay đổi ( sửa ) và nhấn nút “Sửa” trên màn hình quản lý tài khoản

2 Hệ thống sẽ hiển thị màn hình thay đổi thông tin người dùng và hiển thị ra các thông tin cần nhập để cập nhập ( sửa)

3 Người dùng nhập đầy đủ thông tin cần thiết và nhấn

4 Nếu thanh công, hệ thống sẽ cập nhật thôn tin mới và quay về màn hình quản lý tài khoản.

Luồng con A4: Người dùng nhấn vào nút “Xóa”

1 Người dùng chọn danh sách muốn xóa và nhấn vào nút

2 Hệ thống sẽ hiển thị thông báo “Bạn có muốn xóa không”

4 Nếu xóa danh sách thành công, hệ thống sẽ xóa và cập nhật lại thông tin trên giao diện quản lý tài khoản.

Alternative Luồng A1: flow/process -Tại bước 2, nếu thông tin tìm kiếm không có thì màn hình sẽ hiển thị danh sách rỗng.

-Tại bước 2, nếu người dùng chọn nút “X” trên góc bên trên phải thì sẽ trở lại màn hình quản lý.

-Tại bước 3, nếu nhập thông tin không hợp lệ thì hệ thống sẽ báo lỗi và yêu cầu nhập lại.

-Tại bước 3, người dùng chọn “Hủy” thì chức năng xóa sẽ kết thúc.

Name Quản lý vai trò

Description Chức năng được người dùng cho việc quản lý vai trò.

Trigger Người dùng nhấn vào chức năng quản lý vai trò.

+Nếu thêm, sửa, xóa, tìm kiếm thành công hệ thống sẽ thực hiện và chuyển màn hình quản lý vai trò.

-Chức năng được bắt đầu khi người dùng chọn chức năng quản lý vai trò Hệ thống sẽ hiện màn hình quản lý vai trò và hiển thị ra danh sách các thông tin của người dùng.

+”Tìm kiếm nâng cao” thì sẽ chuyển sang luồng A1 +”Thêm người dùng” thì sẽ chuyển sang luồng A2 +”Sửa” thì sẽ chuyển sang luồng A3

+”Xóa” thì sẽ chuyển sang luồng A4

1 Người dùng nhập thông tin cần tìm và nhấn “ Tìm kiếm nâng cao” trên màn hình quản lý vai trò.

Luồng con A2: Người dùng nhấn vào nút ”Thêm vai trò”

1 Người dùng nhấn vào nút “Thêm vai trò” trên màn hình quản lý vai trò.

2 Hệ thống sẽ hiển thị màn hình thêm và hiển thị ra các thông tin cần nhập để thêm vai trò

3 Nhân viên hoặc admin nhập đầy đủ thông tin cần thiết và nhấn nút “Thêm vai trò”

4 Nếu thành công, hệ thống sẽ thêm và quay về màn hình quản lý vai trò.

1 Người dùng chọn thông tin muốn thay đổi ( sửa ) và nhấn nút “Sửa” trên màn hình quản lý tài khoản

4 Nếu thanh công, hệ thống sẽ cập nhật thôn tin mới và quay về màn hình quản lý vai trò.

4 Nếu xóa danh sách thành công, hệ thống sẽ xóa và cập nhật lại thông tin trên giao diện quản lý vai trò.

-Tại bước 2, nếu thông tin tìm kiếm không có thì màn hình sẽ hiển thị danh sách rỗng.

3.2.4 Quản lý nhà cung cấp

Name Quản lý nhà cung cấp

Description Chức năng được người dùng cho việc quản lý nhà cung cấp.

Trigger Người dùng nhấn vào chức năng quản lý nhà cung cấp.

+Nếu thêm, sửa, xóa, tìm kiếm thành công hệ thống sẽ thực hiện và chuyển màn hình quản lý nhà cung cấp.

Error -Không kết nối được hệ thống. situations -Mất kết nối internet.

-Chức năng được bắt đầu khi người dùng chọn chức năng quản lý nhà cung cấp Hệ thống sẽ hiện màn hình quản lý nhà cung cấp và hiển thị ra danh sách các thông tin của người dùng.

1 Người dùng nhập thông tin cần tìm và nhấn “ Tìm kiếm nâng cao” trên màn hình quản lý nhà cung cấp.

Luồng con A2: Người dùng nhấn vào nút ”Thêm nhà cung cấp”

1 Người dùng nhấn vào nút “Thêm nhà cung cấp” trên màn hình quản lý nhà cung cấp.

2 Hệ thống sẽ hiển thị màn hình thêm và hiển thị ra các thông tin cần nhập để thêm nhà cung cấp

3 Nhân viên hoặc admin nhập đầy đủ thông tin cần thiết và nhấn nút “Thêm nhà cung cấp”

4 Nếu thành công, hệ thống sẽ thêm và quay về màn hình quản lý nhà cung cấp.

1 Người dùng chọn thông tin muốn thay đổi ( sửa ) và nhấn nút “Sửa” trên màn hình quản lý nhà cung cấp

4 Nếu thanh công, hệ thống sẽ cập nhật thôn tin mới và quay về màn hình quản lý nhà cung cấp.

4 Nếu xóa danh sách thành công, hệ thống sẽ xóa và cập nhật lại thông tin trên giao diện quản lý nhà cung cấp.

Description Chức năng được người dùng cho việc quản lý topping.

Trigger Người dùng nhấn vào chức năng quản lý topping.

+Nếu thêm, sửa, xóa, tìm kiếm thành công hệ thống sẽ thực hiện và chuyển màn hình quản lý topping.

-Chức năng được bắt đầu khi người dùng chọn chức năng quản lý topping Hệ thống sẽ hiện màn hình quản lý topping và hiển thị ra danh sách các thông tin của người dùng.

1 Người dùng nhập thông tin cần tìm và nhấn “ Tìm kiếm nâng cao” trên màn hình quản lý topping.

Luồng con A2: Người dùng nhấn vào nút ”Thêm Topping”

1 Người dùng nhấn vào nút “Thêm topping” trên màn hình quản lý topping.

2 Hệ thống sẽ hiển thị màn hình thêm và hiển thị ra các thông tin cần nhập để thêm topping.

3 Nhân viên hoặc admin nhập đầy đủ thông tin cần thiết và nhấn nút “Thêm topping”

4 Nếu thành công, hệ thống sẽ thêm và quay về màn hình quản lý topping.

1 Người dùng chọn thông tin muốn thay đổi ( sửa ) và nhấn nút “Sửa” trên màn hình quản lý topping.

4 Nếu thành công, hệ thống sẽ cập nhật thôn tin mới và quay về màn hình quản lý topping.

4 Nếu xóa danh sách thành công, hệ thống sẽ xóa và cập nhật lại thông tin trên giao diện quản lý topping.

3.2.6 Quản lý loại sản phẩm

Name Quản lý loại sản phẩm

Code Usecas6Description Chức năng được người dùng cho việc quản lý loại sản phẩm.

Trigger Người dùng nhấn vào chức năng quản lý loại sản phẩm.

+Nếu thêm, sửa, xóa, tìm kiếm thành công hệ thống sẽ thực hiện và chuyển màn hình quản lý loại sản phẩm.

-Chức năng được bắt đầu khi người dùng chọn chức năng quản lý loại sản phẩm Hệ thống sẽ hiện màn hình quản lý loại sản phẩm và hiển thị ra danh sách các thông tin của người dùng.

1 Người dùng nhập thông tin cần tìm và nhấn “ Tìm kiếm nâng cao” trên màn hình quản lý loại sản phẩm.

Luồng con A2: Người dùng nhấn vào nút ”Thêm Loại sản phẩm”

1 Người dùng nhấn vào nút “Thêm loại sản phẩm” trên màn hình quản lý loại sản phẩm.

2 Hệ thống sẽ hiển thị màn hình thêm và hiển thị ra các thông tin cần nhập để thêm loại sản phẩm.

3 Nhân viên hoặc admin nhập đầy đủ thông tin cần thiết và nhấn nút “Thêm loại sản phẩm”

4 Nếu thành công, hệ thống sẽ thêm và quay về màn hình quản lý loại sản phẩm

1 Người dùng chọn thông tin muốn thay đổi ( sửa ) và nhấn nút “Sửa” trên màn hình quản lý loại sản phẩm.

4 Nếu thành công, hệ thống sẽ cập nhật thông tin mới và quay về màn hình quản lý loại sản phẩm.

4 Nếu xóa danh sách thành công, hệ thống sẽ xóa và cập nhật lại thông tin trên giao diện quản lý loại sản phẩm. Alternative flow/process

Name Quản lý sản phẩm

Description Chức năng được người dùng cho việc quản lý sản phẩm.

Trigger Người dùng nhấn vào chức năng quản lý sản phẩm.

+Nếu thêm, sửa, xóa, tìm kiếm thành công hệ thống sẽ thực hiện và chuyển màn hình quản lý sản phẩm.

-Chức năng được bắt đầu khi người dùng chọn chức năng quản lý sản phẩm Hệ thống sẽ hiện màn hình quản lý sản phẩm và hiển thị ra danh sách các thông tin của người dùng.

1 Người dùng nhập thông tin cần tìm và nhấn “ Tìm kiếm nâng cao” trên màn hình quản lý sản phẩm.

Luồng con A2: Người dùng nhấn vào nút ”Thêm Sản phẩm”

1 Người dùng nhấn vào nút “Thêm loại sản phẩm” trên màn hình quản lý sản phẩm.

2 Hệ thống sẽ hiển thị màn hình thêm và hiển thị ra các thông tin cần nhập để thêm sản phẩm. 3 Nhân viên hoặc admin nhập đầy đủ thông tin cần thiết và nhấn nút “Thêm sản phẩm” 4 Nếu thành công, hệ thống sẽ thêm và quay về màn hình quản lý sản phẩm

1 Người dùng chọn thông tin muốn thay đổi ( sửa ) và nhấn nút “Sửa” trên màn hình quản lý sản phẩm.

4 Nếu thành công, hệ thống sẽ cập nhật thông tin mới và quay về màn hình quản lý sản phẩm.

4 Nếu xóa danh sách thành công, hệ thống sẽ xóa và cập nhật lại thông tin trên giao diện quản lý sản phẩm.

Name Quản lý đơn hàng

Description Chức năng được người dùng cho việc quản lý đơn hàng.

Trigger Người dùng nhấn vào chức năng quản lý đơn hàng.

+Nếu thêm, sửa, xóa, tìm kiếm thành công hệ thống sẽ thực hiện và chuyển màn hình quản lý đơn hàng.

-Chức năng được bắt đầu khi người dùng chọn chức năng quản lý đơn hàng Hệ thống sẽ hiện màn hình quản lý đơn hàng và hiển thị ra danh sách các thông tin của người dùng.

1 Người dùng nhập thông tin cần tìm và nhấn “ Tìm kiếm nâng cao” trên màn hình quản lý đơn hàng.

1 Người dùng nhấn vào nút “Thêm đơn hàng” trên màn hình quản lý s đơn hàng.

2 Hệ thống sẽ hiển thị màn hình thêm và hiển thị ra các thông tin cần nhập để thêm đơn hàng.

3 Nhân viên hoặc admin nhập đầy đủ thông tin cần thiết và nhấn nút “Thêm đơn hàng”

4 Nếu thành công, hệ thống sẽ thêm và quay về màn hình quản lý đơn hàng

1 Người dùng chọn thông tin muốn thay đổi ( sửa ) và nhấn nút “Sửa” trên màn hình quản lý đơn hàng.

4 Nếu thành công, hệ thống sẽ cập nhật thông tin mới và quay về màn hình quản lý đơn hàng.

4 Nếu xóa danh sách thành công, hệ thống sẽ xóa và cập nhật lại thông tin trên giao diện quản lý đơn hàng.

Mô tả thành phần và trình bày bản thiết kế hoàn chỉnh cho từng trang (admin)

4.1 Màn hình trang tổng quan

Tổng quan bao gồm 1 frame tên giao diện quản lý người dùng -Danh sách các Prototype:

Bấm icon sóng sẽ qua trang “tổng quan”

Bấm icon 2 con người sẽ qua trang “quản lý tài khoản”

Bấm icon ô vuông màu trắng ở dưới icon 2 người sẽ qua trang quản lý vai trò

Bấm icon hình ngôi nhà sẽ qua trang “quản lý nhà cung cấp”

Bấm icon hình màu vẽ sẽ qua trang “quản lý topping”

Bấm icon vuông tròn tam giác sẽ qua trang “quản lý loại sản phẩm”

Bấm icon hình đồ ăn với li nước sẽ qua trang “quản lý sản phẩm”

Bấm icon hình hộp hàng sẽ qua trang “quản lý đơn hàng”

Bấm icon hình kính lúp thì sẽ qua trang “thống kê”

Bấm icon “>>” để hiện ra danh sách tên của các lựa chọn trên menu, bấm lần nữa sẽ ẩn tên

B1 tạo rectangle bên cạnh trái để làm thanh menu, tạo 9 text cho các mục “tổng quan”, “ quản lý vai trò”, “quản lý nhà cung cấp”, “quản lý topping”, “quản lý loại sản phẩm”, “quản lý sản phẩm”, “quản lý đơn hàng”, “báo cáo thống kê”, sau đó chèn thêm các icon phù hợp ở trước các text

B2 tạo rectangle trên cùng trùng với chiều dài của frame , thêm text để làm tên của shop

B3 tạo image lớn giữa trang làm logo của shop

4.2 Màn hình quản lý vai trò

4.2.1 Danh sách các frame, component, group, state, prototype trong màn hình-Danh sách các frame:

Quản lý vai trò bao gồm 1 frame tên giao diện quản lý vai trò -Danh sách các Component:

Thanh menu để hiển thị danh sách các lựa chọn Quản lý vai trò để thêm mới quyền truy cập cho tài khoản Vai trò để hiển thị danh sách thông tin đã được tạo

-Màn hình thêm mới vai trò

4.2.3 Các bước tạo giao diện -Màn thiết kế hoàn chỉnh

B3 tạo rectangle mới để chứa và hiển thị các trường dành cho việc nhập thông tin, gồm 6 text “mã vai trò”, “tên vai trò”, “ngày tạo từ ngày”, “ngày tạo đến ngày”,

“ngày chỉnh sửa từ ngày”, “ngày chỉnh sửa đến ngày”, và 6 rectangle tương ứng để làm trường nhập thông tin, sau đó thêm 1 rectangle nhỏ với 1 text “thêm vai trò” để làm button thêm vai trò

B4 tạo thêm 3 rectangle nhỏ ngay dưới phần trên với thêm 3 text để làm button tìm kiếm nâng cao , đặt lại, tìm kiếm

B5 tạo rectangle mới để làm danh sách hiển thị các tài khoản đã được tạo thành công, gồm 6 cột lần lượt là “số thứ tự”, “mã vai trò”, “tên vai trò”, “ngày tạo”,

“ngày chỉnh sửa”, “thao tác”, trên cột “thao tác” thêm vào icon bánh răng để làm mục cài đặt các thao tác với tài khoản đã tạo

B6 ở cuối rectangle B5 thêm text “đi đến trang”, rectangle nhỏ để hiển thị số trang muốn đến với 1 icon enter để bấm chọn; thêm text “hiển thị”, rectangle nhỏ để hiển thị số tài khoản muốn hiện đồng thời trên màn hình (ví dụ hiện 5 tài khoản 1 lần hoặc 10 tài khoản 1 lần hiện); thêm text “tổng số”, rectangle nhỏ để hiẻn thị tổng số

- Màn hình thêm mới vai trò B1 tạo rectangle trên cùng màn hình để làm tiêu đề “thêm mới vai trò”

B2 tạo 2 rectangle với 2 text để làm trường nhập “mã vai trò”, “tên vai trò”

B3 tạo rectangle để chứa và hiển thị danh sách các vai trò , gồm 5 cột “số thứ tự”,

“chức năng”, “thêm”, “chỉnh sửa”, “xoá”, “tìm kiếm” , thêm 5 icon ô vuông để đánh dấu tích cho thêm, sửa, xoá, tìm kiếm

B4 tạo 1 rectangle nhỏ với 1 text để làm button thêm mới

4.3 Màn hình quản lý người dùng

4.3.1 Danh sách các frame, component, group, state, prototype trong màn hình -Danh sách các frame:

Quản lý người dùng bao gồm 1 frame tên giao diện quản lý người dùng -Danh sách các Component:

Thanh menu để hiển thị danh sách các lựa chọn Quản lý người dùng để thêm mới tài khoản Người dùng để hiển thị danh sách thông tin đã được tạo -Danh sách các Prototype:

-Màn hình thêm mới người dùng

4.3.3 Các bước tạo giao diện- Màn thiết kế hoàn chỉnh

B3 tạo rectangle mới để chứa và hiển thị các trường dành cho việc nhập thông tin, gồm 8 text “tài khoản”, “họ tên”, “ngày tạo từ ngày”, “ngày tạo đến ngày”, “ngày chỉnh sửa từ ngày”, “ngày chỉnh sửa đến ngày”,”email”, “vai trò” và 8 rectangle tương ứng để làm trường nhập thông tin, sau đó thêm 1 rectangle nhỏ với 1 text

“thêm người dùng” để làm button thêm người dùng

B5 tạo rectangle mới để làm danh sách hiển thị các tài khoản đã được tạo thành công, gồm 8 cột lần lượt là “số thứ tự”,”họ tên”, “tên tài khoản”, “email”, ”vai trò”,

“ngày tạo”, “ngày chỉnh sửa”, “thao tác”, trên cột “thao tác” thêm vào icon bánh răng để làm mục cài đặt các thao tác với tài khoản đã tạo

B6 ở cuối rectangle B5 thêm text “đi đến trang”, rectangle nhỏ để hiển thị số trang muốn đến với 1 icon enter để bấm chọn; thêm text “hiển thị”, rectangle nhỏ để hiển thị số tài khoản muốn hiện đồng thời trên màn hình (ví dụ hiện 5 tài khoản 1 lần hoặc 10 tài khoản 1 lần hiện); thêm text “tổng số”, rectangle nhỏ để hiẻn thị tổng số

- Màn hình thêm mới người dùng B1 tạo rectangle trên cùng màn hình để làm tiêu đề “thêm mới người dùng”

B2 tạo rectangle lớn để chứa và hiẻn thị các mục nhập họ tên, email, vai trò, tên đăng nhập, mật khẩu và xác nhận lại mật khẩu

B3 tạo 1 rectangle nhỏ với 1 text để làm button thêm mới

4.4 Màn hình quản lý nhà cung cấp

Quản lý nhà cung cấp bao gồm 1 frame tên giao diện quản lý nhà cung cấp

Thanh menu để hiển thị danh sách các lựa chọn Quản lý nhà cung cấp dùng để thêm thông tin các nhà cung cấp

Nhà cũng cấp để hiển thị thông tin danh sách các nhà cung cấp đã được thêm thành công

-Màn hình thêm mới nhà cung cấp

4.4.3 Các bước tạo giao diện - Màn thiết kế hoàn chỉnh

B3 tạo rectangle mới để chứa và hiển thị các trường dành cho việc nhập thông tin, gồm 6 text “mã nhà cung cấp”, “tên nhà cung cấp”, “ngày tạo từ ngày”, “ngày tạo đến ngày”,”số điện thoại”, “địa chỉ” và 6 rectangle tương ứng để làm trường nhập thông tin, sau đó thêm 1 rectangle nhỏ với 1 text “thêm nhà cũng cấp” để làm button thêm nhà cung cấp

B5 tạo rectangle mới để làm danh sách hiển thị các tài khoản đã được tạo thành công, gồm 7 cột lần lượt là “số thứ tự”, “mã nhà cung cấp”, “tên nhà cung cấp”, “ địa chỉ”, ”só điện thoại”, “ngày tạo”, “thao tác”, trên cột “thao tác” thêm vào icon bánh răng để làm mục cài đặt các thao tác với tài khoản đã tạo

Mô tả thành phần và trình bày bản thiết kế hoàn chỉnh cho từng trang (phía mobile)

5.1 Màn hình trang đăng nhập 5.1.1 Danh sách các frame, component, group, state, prototype

Phần đăng nhập sử dụng 2 frame có tên là giao diện đăng nhập, giao diện đăng nhập thành công

Status-bar dùng để hiển thị các thông tin giờ, pin, sóng của điện thoại

Username dùng để hiển thị phần nhập thông tin email Text input password dùng để hiển thị phần nhập thông tin mật khẩu Đăng nhập dùng để hiển thị nút đăng nhập

Khi bấm “đăng nhập” sẽ chuyển sang màn hình đăng nhập thành công Khi bấm “đăng kí” sẽ chuyển sang màn hình giao diện đăng kí

Khi bấm “quên mật khẩu” sẽ chuyển sang màn hình giao diện quên mật khẩu

5.1.3 Các bước tạo giao diện B1 tạo rectangle có kích thước (430x43.49px)

B2 trong rectangle trên tạo 4 text để hiển thị giờ, sóng, wifi, pin của điện thoại

B3 tạo text đăng nhập có kích (343x61px)B4 tạo 2 component có kích thước (300x50px) để chứa và hiển thị text “Nhập mail”, “Nhập mật khẩu” trên màn hình

B5 tạo component có kích thước (150x50px) để chứa và hiển nút “Đăng nhập” trên màn hình

B5 tạo 4 text có kích thước lần lượt (108x19px), (195x36px), (140x36px), (127x36px), để chứa và hiển thị “Nhớ mật khẩu”, “Bạn không có tài khoản”,

“Đăng kí ngay”, “Quên mật khẩu” trên màn hình

5.2 Màn hình trang đăng ký

5.2.1 Danh sách các frame, component, group, state, prototype

Phần đăng ký sử dụng frame có tên là giao diện đăng ký để hiện thị toàn giao diện.

- Danh sách các Component: Đăng ký dùng để thực hiện đăng ký tài khoản mới và chuyển hướng đến trang đăng nhập.

Các thẻ input dùng để hiển thị phần nhập thông tin email, số điện thoại, mật khẩu , xác nhận mật khẩu.

Khi bấm “đăng ký” sẽ chuyển sang màn hình đăng nhập.

5.2.3 Các bước tạo giao diện Bước 1: Tạo frame chứa giao diện đăng ký.

Bước 2: tạo chữ “Đăng ký bằng” bằng công cụ text, tạo thẻ input để nhập dữ liệu.

Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text Tạo Component: Chọn cả hình chữ nhật và văn bản Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component Đặt tên cho component Thêm Property và Variant: Chọn component, mở bảng Properties Nhấp vào nút + và chọn Create Property Chọn kiểu dữ liệu là Variant.

Bước 3 gom các thẻ input nhập mail, nhập số điện thoại, nhập mật khẩu, xác nhận mật khẩu vừa tạo thành 1 group.

Bước 4 Tạo button đăng ký Sử dụng công cụ Rectangle để vẽ một hình chữ nhật cho button đăng nhập Sử dụng công cụ Text để thêm text "Đăng ký" vào button.

Tạo component cho button: Chọn button (bao gồm hình chữ nhật và text) Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component cho button

Bước 5 Sử dụng công cụ Text để thêm text “Bạn chưa có tài khoản ” "Đăng nhập"

Chọn prototype -> interractions -> chọn trang đăng nhập để chuyển đến.

5.3 Màn hình trang quên mật khẩu

Phần quên mật khẩu sử dụng frame có tên là giao diện quên mật khẩu để hiện thị toàn giao diện.

Các thẻ input dùng để hiển thị phần nhập thông tin email.

Khi bấm “Tiếp tục” sẽ chuyển sang màn hình khôi phục mật khẩu.

Khi bấm “Quay lại” sẽ chuyển sang màn hình đăng nhập.

5.3.3 Các bước tạo giao diện Bước 1: Tạo frame chứa giao diện quên mật khẩu

Bước 2: tạo chữ “Khôi phục mật khẩu” bằng công cụ text, tạo thẻ input để nhập dữ liệu Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text Tạo Component: Chọn cả hình chữ nhật và văn bản Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component Đặt tên cho component Thêm Property và Variant:

Chọn kiểu dữ liệu là Variant.

Bước 3 Tạo button “quay lại” và “tiếp tục” Sử dụng công cụ Rectangle để vẽ một hình chữ nhật cho mỗi button Sử dụng công cụ Text để thêm text “quay lại” và

“tiếp tục” vào mỗi button Tạo component cho button: Chọn button (bao gồm hình chữ nhật và text) Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component cho button

5.3 Màn hình trang khôi phục lại mật khẩu

Khôi phục mật khẩu sử dụng frame có tên là giao diện khôi phục mật khẩu để hiện thị toàn giao diện.

Các thẻ input dùng để hiển thị phần nhập thông tin nhập OTP, nhập mật khẩu mới, xác nhận mật khẩu.

Khi bấm “Khôi phục” sẽ chuyển sang màn hình khôi phục mật khẩu thành công.

5.3.3 Các bước tạo giao diện - Màn hình khôi phục mật khẩu

Bước 1: Tạo frame chứa giao diện khôi phục mật khẩu

Bước 2: Tạo các chữ “Nhập OTP”, “Nhập mật khẩu mới”, “Xác nhận mật khẩu” bằng công cụ text, tạo thẻ input để nhập dữ liệu Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụText Tạo Component: Chọn cả hình chữ nhật và văn bản Nhấn Ctrl + Alt + K(hoặc nhấp chuột phải và chọn Create Component) để tạo component Đặt tên cho component Thêm Property và Variant: Chọn component, mở bảng Properties.

Nhấp vào nút + và chọn Create Property Chọn kiểu dữ liệu là Variant.

Bước 3 Gom các thẻ input nhập OTP, nhập mật khẩu mới, xác nhận mật khẩu vừa tạo thành 1 group.

Bước 4 Tạo button “Khôi phục” Sử dụng công cụ Rectangle để vẽ một hình chữ nhật cho button Sử dụng công cụ Text để thêm text “Khôi phục” vào trong button.

Tạo component cho button: Chọn button (bao gồm hình chữ nhật và text) Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create.

- Màn hình khôi phục mật khẩu thành công:

Bước 1: Tạo frame chứa giao diện khôi phục mật khẩu thành công nằm trên frame khôi phục mật khẩu

Bước 2: Tạo các chữ “Khôi phục mật khẩu thành công”, “Mật khẩu của bạn đã được khôi phục thành công” bằng công cụ text Thêm icon tích xanh để bên trái

“Khôi phục mật khẩu thành công”.

Bước 3 Tạo button “Đăng nhập” Sử dụng công cụ Rectangle để vẽ một hình chữ nhật cho button Sử dụng công cụ Text để thêm text “Đăng nhập” vào trong button.

Tạo component cho button: Chọn button (bao gồm hình chữ nhật và text) Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create).

5.4 Màn hình trang liên hệ

Liên hệ sử dụng frame có tên là giao diện liên hệ để hiện thị toàn giao diện.

Sử dụng frame có tên là body để hiện thị nội dung của giao diện.

Các thẻ input dùng để hiển thị phần nhập thông tin tên, email, số điện thoại.

Khi bấm “Gửi” sẽ chuyển sang màn hình trang chủ.

Bước 1: Tạo frame chứa giao diện khôi phục mật khẩu và frame body ở dưới chữ liên hệ.

Bước 2: Sử dụng công cụ Rectangle để vẽ một hình chữ nhật Sử dụng công cụ Text để thêm text “Liên hệ” vào trong button.

Bước 3 Tạo các chữ “Vui lòng nhập tên”, “Vui lòng nhận email”, “Vui lòng nhập số điện thoại”, “Xin gửi ý kiến tại đây” bằng công cụ text, tạo thẻ input để nhập dữ liệu Tạo Rectangle và Text: Vẽ hình chữ nhật bằng công cụ Rectangle, thêm văn bản vào hình chữ nhật bằng công cụ Text Tạo Component: Chọn cả hình chữ nhật và văn bản Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component Đặt tên cho component Thêm Property và Variant:

Chọn kiểu dữ liệu là Variant.

Bước 4 Gom các thẻ input “Vui lòng nhập tên”, “Vui lòng nhận email”, “Vui lòng nhập số điện thoại”, “Xin gửi ý kiến tại đây” vừa tạo thành 1 group.

Bước 5 Tạo button “Gửi” Sử dụng công cụ Rectangle để vẽ một hình chữ nhật cho button Sử dụng công cụ Text để thêm text “Gửi” vào trong button Tạo component cho button: Chọn button (bao gồm hình chữ nhật và text) Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create).

Bước 6 Tạo 1 Component chọn các phần vừa tạo ở bước 4, bước 5.

Bước 7 Tạo các chữ “Thông tin liên hệ”, “Foodnetwork Việt Nam”, “1900-1900”,

“273 An Dương Vương, Phường 3 , Quận 5, Thành Phố Hồ Chí Minh, Việt Nam” bằng công cụ text, thêm các hình ảnh bên trái text.

Home sử dụng frame có tên là giao diện trang chủ để hiện thị toàn giao diện.

Sử dụng frame có tên là intro để hiện thị hình ảnh 3 sản phẩm nổi bật.

Khi bấm “Sản phẩm” sẽ chuyển sang màn hình danh sách sản phẩm.

Khi bấm “Liên hệ” sẽ chuyển sang màn hình liên hệ.

Khi bấm “Đồ ăn” sẽ chuyển sang màn hình danh sách đồ ăn.

Khi bấm “Đồ uống” sẽ chuyển sang màn hình đồ uống.

Bước 2: Tạo các chữ “Sản phẩm”, “Liên hệ”, “Đồ ăn”, “Đồ uống” bằng công cụ text Tạo Rectangle Vẽ hình chữ nhật bằng công cụ Rectangle, thêm hình ảnh vào hình chữ nhật Tạo Component: Chọn cả hình chữ nhật và hình ảnh Nhấn Ctrl + Alt + K (hoặc nhấp chuột phải và chọn Create Component) để tạo component Đặt tên cho component

Bước 3 Tạo 3 hình ảnh sắp xế theo hàng ngang

Bước 4 Gom các thẻ hình vừa tạo thành 1 frame Sau đó chọn prototype chọn overflow chọn horizontal để các hình ảnh có thể di chuyển qua lại được

5.6 Màn hình trang về chúng tôi

Trang về chúng tôi sử dụng frame tên về chúng tôi để hiển thị các thông tin thêm công ty

Status-bar dùng để hiển thị các thông tin giờ, pin, sóng của điện thoại

Mục thông tin ở cuối trang dùng để hiển thị các thông tin giới thiệu về công ty , địa chỉ , số điện thoại , các trang mạng xã hội

Bấm vào hình logo màu đỏ để quay về trang chủ

B1 tạo rectangle có kích thước 430x87px và tạo thêm text “về chúng tôi” với

B2 tạo 2 text cho phần tên công ty và phần thông tin mô tả về công tyB3 tạo image logo công ty, và thêm 2 image khác cho phần giới thiệu về chất lượng dịch vụ của công ty

B4 tạo thêm 3 text cho câu slogan của công ty và 2 mô tả về hình ảnh chất lượng dịch vụ ở trên

B5 tạo rectangle có kích thước 430x202px

B6 trong rectangle trên tạo 6 text cho tên công ty, địa chỉ, số điện thoại, mã thuế, ngày cấp, hộp thư góp ý của công ty

B7 trong rectangle trên tạo 2 rectangle nhỏ hơn có kích thước lần lượt 246x99px và 246x105px

B8 trong rectangle nhỏ tạo 1 text hotline đặt hàng, 1 icon điện thoại , 1 text “ giao hàng tận nơi”

B9 trong rectangle còn lại tạo icon facebook , email Danh sách các frame, component, group, state, prototype Danh sách các frame:

Trang thanh toán gồm 1 frame thanh toán để hiển thị mục điền thông tin mua hàng Danh sách các Component:

Thông tin dùng để hiển thị các trường dành cho khách hàng nhập thông tin mua hàng Đơn hàng dùng để hiển thị thông tin về giá theo số lượng món, các chương trình giảm giá, tổng đơn hàng sau khi đã thêm mã giảm giá, hình ảnh món ăn

Phương thức thanh toán để hiển thị các hình thức thanh toán mà cửa hàng có hỗ trợ Danh sách các Prototype:

KIỂM TRA VÀ ĐÁNH GIÁ

1 Kiểm tra tính khả thi của giao diện Tính khả thi của truy cập và tìm kiếm:

- Đảm bảo rằng giao diện được thiết kế sao cho người dùng có thể dễ dàng truy cập vào các trang web chính của cửa hàng.

- Kiểm tra tính khả thi của chức năng tìm kiếm, đảm bảo người dùng có thể tìm kiếm sản phẩm một cách nhanh chóng và hiệu quả. Độ chính xác của thông tin:

- Đảm bảo rằng thông tin về sản phẩm, giá cả và các chương trình khuyến mãi được cập nhật đúng và chính xác.

- Cung cấp các cơ chế kiểm tra và cập nhật thông tin định kỳ để đảm bảo tính chính xác.

Tính khả thi của thao tác:

- Kiểm tra tính khả thi của các thao tác như xem chi tiết sản phẩm, thêm sản phẩm vào giỏ hàng, xem giỏ hàng và thanh toán.

- Đảm bảo rằng các nút hoặc chức năng liên quan được đặt một cách logic và dễ tìm kiếm để người dùng có thể thực hiện các thao tác một cách dễ dàng.

Tính khả thi của liên hệ và chúng tôi:

- Đảm bảo rằng người dùng có thể dễ dàng liên hệ với cửa hàng thông qua giao diện, ví dụ như một mẫu liên hệ hoặc thông tin liên lạc được hiển thị rõ ràng và dễ tìm kiếm.

- Cung cấp thông tin chi tiết về cửa hàng và chính sách về việc liên hệ để tạo sự tin cậy cho người dùng.

Tính đa dạng và linh hoạt của phản hồi:

- Ngoài việc thu thập phản hồi thông qua câu hỏi khảo sát, xem xét việc mở rộng phạm vi thu thập phản hồi thông qua các phương tiện khác như hộp thư góp ý, trò chuyện trực tuyến hoặc cuộc gọi điện thoại.

- Đảm bảo rằng phản hồi được xử lý và phản ứng một cách nhanh chóng và có hiệu quả để cải thiện giao diện dựa trên ý kiến của người dùng.

2 Thu thập phản hồi từ người dùng

Mở rộng phạm vi phản hồi:

- Ngoài việc tạo các câu hỏi khảo sát ngắn, bạn có thể bổ sung thêm các phương tiện như hộp thư góp ý trực tuyến, hỏi ý kiến qua email, hoặc tạo một khu vực trò chuyện trực tuyến để người dùng có thể gửi phản hồi dễ dàng hơn.

Xây dựng một hệ thống phản hồi liên tục:

- Đảm bảo rằng bạn không chỉ thu thập phản hồi một lần mà còn tiếp tục thu thập và xử lý phản hồi liên tục Điều này giúp bạn hiểu rõ hơn về các vấn đề người dùng gặp phải và có thể phản ứng kịp thời.

- Thay vì chỉ thu thập phản hồi qua các phương tiện không tương tác như câu hỏi khảo sát, cân nhắc sử dụng các phương tiện tương tác như cuộc trò chuyện trực tiếp hoặc cuộc gọi điện thoại để tạo cảm giác người dùng được lắng nghe và động viên hơn.

Phân tích phản hồi một cách chi tiết:

- Đừng chỉ dừng lại ở việc thu thập phản hồi, mà hãy đầu tư thời gian và nguồn lực vào việc phân tích phản hồi một cách chi tiết để hiểu rõ hơn về những vấn đề cụ thể và có kế hoạch cải thiện cụ thể.

Cung cấp phản hồi cho người dùng:

- Sau khi thu thập và phân tích phản hồi, đảm bảo rằng bạn cung cấp phản hồi hoặc phản ứng đối với người dùng Điều này giúp họ cảm thấy được quan tâm và thấy rằng phản hồi của họ đang được xem xét và đánh giá

VII KẾT LUẬN VÀ TỔNG KẾT

- Học được những kiến thức về tạo những trang website, mobile, admin Tìm hiểu được các cấu trúc của một giao diện, các thành phần tương tác với các giao diện như prototype chuyển trang, tạo component, hover các nút và sản phẩm, hiển thị đầy đủ thông tin của sản phẩm, thiết kế trang giao diện có màu sắc đẹp, hài hòa, có độ tiếp cận với khách hàng cao, khách hàng sử dụng một cách dễ dàng.

Tiêu đề	Thiết Kế Giao Diện Website Và Mobile Cửa Hàng Bán Thức Ăn Bằng Công Cụ Figma
Tác giả	Nguyễn Zi Đan, Lê Duy Khôi, Đào Phúc Nguyên, Nguyễn Huỳnh Bảo Khang
Người hướng dẫn	Thầy Phạm Thi Vương
Trường học	Trường Đại Học Sài Gòn
Thể loại	đề tài
Năm xuất bản	2024
Thành phố	Hồ Chí Minh

Định dạng
Số trang	145
Dung lượng	19,32 MB