Design - KaidiLyu/InfiniteLoopers GitHub Wiki
-Home page
Homepage Link：https://github.com/SCCapstone/InfiniteLoopers/blob/main/AI-Nutritional-Search/assets/picture/homepage.png
Interface Description:
- Overall Layout: The upper half of the screen uses an olive green background, while the bottom section is white. The interface is simple and clean, focusing on showcasing the core functionality.
- Title: In the center of the screen, the text "SMART SEARCH" and "HEALTHY LIFE" are displayed, indicating that the app's main goal is to provide intelligent health searches.
- Button: Near the bottom center, there is a black "START" button, which initiates the app's core functionality.
- Settings Icon: In the top left corner is a gear-shaped settings icon that users can tap to access the settings page.
Functional description:
- Homepage function: The homepage is the first screen after the user enters the application. It is mainly used to show the application's core functional positioning to the user and guide them to the next interface through simple user operations.
- Start search function: After the user clicks the "START" button, the application will enter the Dashboard page, including inputting Search, favorite, menu, setting, etc.
- Setting function: Click the setting icon in the upper left corner, and the user can access the application's setting options, modify personal information, adjust notification preferences, etc.
- Login/Signup Page
Login/sign up Link:https://github.com/SCCapstone/InfiniteLoopers/blob/main/AI-Nutritional-Search/assets/picture/LoginSignUp.png
Login/Sign up page design and functionality
- Login page:
- Page layout: There are two tabs at the top, "Login" and "Sign up". Users can switch between different pages by clicking.
- Email and Password input boxes: Users can enter their email and password here.
- Sign In button: After clicking this button, the system will verify the user's identity information. If the verification is successful, the user will be redirected to the main interface.
- Forgot password? link: If the user has forgotten their password, click this link to enter the password recovery process.
- Button: The "Back" button at the bottom of the page allows users to return to the previous interface.
- Sign up page:
- Page layout: Same top tab structure, users can switch between "Login" and "Sign up".
- Email and Password input boxes: Users need to fill in their email and password here to create a new account. Register button: Click this button, the user will complete the registration process and create a new account.
- Back button: Similar to the login page, this button is used to return to the previous interface.
- Functional description:
- User navigation: There are two tabs at the top of the page, and users can easily switch between "Login" and "Register". The design of the entire page is simple and clear, and users can quickly understand how to operate.
- Login and registration process: The core functions of the two pages are logging in to an existing account and creating a new account. The login page verifies the user's identity through email and password, while the registration page allows new users to enter basic information and register an account.
- Return function: Each page provides a "Return" button to ensure that users can easily return to the previous interface.
- Main Page
Main Page Link: https://github.com/SCCapstone/InfiniteLoopers/blob/main/AI-Nutritional-Search/assets/picture/Dashboard.png
- Page layout:
- Search bar: Users can enter keywords here to find the nutritional data they want.
- There is a navigation bar with four icons at the bottom of the page, corresponding to the following functions:
Search: Search for nutritional data.
Favorite: View user favorites.
Menu: Access the main menu.
Setting: Manage the app's settings and user preferences.
-
Function description: The design of the homepage ensures that users can easily switch between different parts of the app through the top and bottom navigation bars.
-
Search
Search Link: https://github.com/SCCapstone/InfiniteLoopers/blob/main/AI-Nutritional-Search/assets/picture/Search.png
Description: This is a search page where users can search for the food they want to know about. Click on the corresponding picture and the Nutrition Results for that food will appear. If the user is interested in the item, click on the heart on the right side of the picture to save it. The saved food will appear in the favorites
- Favorite
Description: This is the favorite page, where all the food that the user is interested in and saved is concentrated, so that the user can view it at any time. And it can be deleted at any time.
- settings
- Settings page and its function description
- Settings page:
Personal information display: There is a user avatar and account name at the top of the page. Users can enter the personal information management page by clicking on the avatar or account name.
Function list: Below the avatar are multiple setting items. Users can enter the corresponding function page by clicking on each item. These options include:
Personal Information: Manage the user's name, email, password, and date of birth.
Notifications: Allow users to enable or disable app notifications.
Privacy Policy: View the app's privacy policy.
App Theme: Switch the display mode of the app (such as light mode or dark mode).
FAQ: View FAQs.
Delete Account: Users can choose to permanently delete their account.
Log Out: Log out of the current account and return to the login interface.
- Personal Information page: Page layout: Users can update their personal information on this page, including: First Name Last Name Email Address Password: There is a "Show Password" button that allows users to view the entered password. Date of Birth Each information input box is pre-filled with the user's current information, and the user can edit it by clicking on the corresponding box.
- Notifications page: Page layout: Users can enable or disable the notification function of the app on this page. There is a switch button on the right side of the page labeled "Allow Notifications". Users can choose whether to receive notifications by toggling the switch.
- Privacy Policy page: Page layout: Displays the privacy policy of the app and marks the last update time of the policy (such as: September 28, 2024). The page is mainly static text, showing users information about data privacy.
- App Theme page: Page layout: This page provides a switch that allows users to switch the theme mode of the app. The switch label says "Light Mode", and users can use this option to switch between light mode and dark mode.
- FAQ page
Page layout: This page provides users with answers to frequently asked questions related to the app. The page is currently blank and may be filled with relevant questions and answers in the final version. 7. Delete Account page: Page layout: Shows basic information of the current account and reminds the user of the consequences of deleting the account ("Deleting an account will lose all data associated with this account"). There is a "Delete Account" button at the bottom of the page. When users click this button, their account will be permanently deleted and cannot be restored.
- Page design points:
- User experience: The design of the settings page is simple and intuitive. Users can quickly find and modify personal information, notification settings, privacy policy and other functions through clear navigation.
- Privacy and security: Privacy policy and account deletion functions are specially designed to ensure the transparency and controllability of user data.
- Personalization: Provide theme switching and personal information editing functions to ensure that the application can be personalized according to user needs.
- Color scheme: The colors we use are white, black, green, and yellow. Most of them are light colors (and shades of the colors), which can provide a good visual effect and make the page look neater.
