ELEC S411F Electronic and Computer Engineering
Electronic and Computer Engineering
Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: THEend8_
ELEC S411F
Electronic and Computer Engineering Project
Proposal
A local/overseas watersport pair up mobile application
Project code: F05
1. INTRODUCTION
This project is to make an APP about diving. It is very troublesome to find
diving sites, sea areas and coaches in Hong Kong. At present, most diving
instructors only need to gather a team of more than 20 people to set out for the
trip. If the number is not enough, the trip may be cancelled. Therefore, this
diving APP is to provide more choices for people. A few people can match with
a diving instructor and choose the diving activities they want to go to. The APP
provides the detailed information of the instructor, the items to visit and the
time for tourists to refer to.
Through this APP, tourists can choose the travel time they want and complete
their travel plan with their friends at a reasonable price. The APP gives a lot of
space and puts the right of choice in the hands of tourists.
APP has two systems: Android and IOS. So I chose way of PWA to
implementation website , So all users can have an APP on their phone and be
able to use it.
The whole APP includes the introduction of the UI design, main page,
registration function, login function, booking and payment function, sharing
function, background manager function and switching between Chinese and
English functions.
In this outline and plan, some background information and project details will
also be included in the following sections. Additionally, there are several
specific lists of objectives in the project detail section and a time plan.
1.1 PROJECT OBJECTIVES
UI design: For an APP that is a play project, the UI design of its main page
needs to be very attractive in order to attract the attention of tourists, increase
the user's stickiness and increase the browsing time of the APP.
The registration function is divided into tourist registration and coach
registration. Tourists only need to fill in the phone number and register an
account, but coaches need to upload their real business license and personal
coach certificates for registration.
Login function: tourists can log in to browse, coaches can log in to view their
orders.
Reservation and payment functions:Visitors are required to pay a deposit to
book their own tour, as well as to secure the instructor's rights.
Background manager function: This function is provided to APP managers, who
can change the design of some pages by viewing user data in the Application
background.
Payment function: for tourists to pay their own travel costs.
Sharing function: Tourists can share their good coaches or projects with their
friends, which can expand the application scope of their APP.
Chinese and English switching function.
Rating and evaluation functions: After experiencing the project, tourists can
score their coaches and make their own evaluations in the APP to improve
customers' experience and choices.
The goal of this project is to help people who want easy access to the beach for
diving. Instead of wasting time waiting, people can directly pick the right date
and coach through the app.
The rest of the functions are designed to achieve the goal of visitor convenience.
1.2 ORGANIZATION OF THE REPORT
The main difficulty of UI design is to attract the attention of tourists and
increase the time for users to browse the APP, so as to explore the functions of
the APP itself.
The difficulty of registration function lies in how to identify the validity of
business license and coach certificate uploaded by coach.
As for the payment function, I have never learned this function in my previous
study. It may need the third-party payment channel SDK to complete this
payment module.
2. LITERATURE REVIEW
This APP will use PWA to output android and IOS programs, and the whole
APP will be designed into the UI design.
And using the SSM framework and PhoneGap framework.
2.1 UI DESIGN
Page design needs to make the user easy to operate, free, and can reflect the
personality and positioning of the software.
The visual aspect also needs the card and flat design style to obtain the simple
visual effect.
Figure.1
The UI design in Figure 1 favours bright colors and uses vivid graphics such as
a plane ( ) and a house ( ) to illustrate this function. This is happy for
some people who love to travel.
Figure.2
Figure 2 shows the specific payment page. The upper part of the page is also
equipped with realistic pictures to illustrate the authenticity, while the lower
part is to illustrate some local supporting facilities. In addition, the payment
figure is placed in the lower left corner to weaken the psychological pressure
brought by payment and improve the purpose of playing.
Figure.3
The UI design in Figure 3 shows bright colors, but these colors don't clash in
their use, instead creating a sense of gradient. It enlarges the font of the
destination to highlight the destination, and the number of likes in the upper left
corner is a description of how many people have liked it and also provides a
choice for people about to travel.
Click the specific destination, and at the bottom are some comments and travel
experiences, so that people can share their happiness and show the authenticity
of travel. At the bottom are the popular places of the destination, so as to
promote and guide tourists, and also indicate the address, which is easy to find.
Figure.4
The UI design in Figure 4 is to reduce some unnecessary information, highlight
the scenery of the destination, deepen the impression of tourists, and put some
other items at the bottom, such as the main page. Book, search.
Such a UI design emphasizes the attraction of the scenery to the tourists and
weakens other elements.
CURRENT UI DESIGN TRENDS
1. Mainstream systems or apps mostly advocate dark mode or custom theme
mode, such as YouTube and QQ Music.
2. For young people, fresh and colorful colors will be adopted and a variety of
colors will be matched. Gradient color is used to enrich the design texture; Or
use contrast color or adjacent color, let tonal generation administrative levels
sense, more fit the trend of younger.
3. Some controls or buttons of UI design, different buttons use different colors
to improve the visual impact, but not too bright, grasp the balance.
4. The new pseudo-object style, mainly through the change of light and shadow
to highlight the content of the area or module design, the overall feeling will be
more atmospheric and visual impact compared with the flat design.
Figure.5(The text is fictional and can be ignored) Figure.6(The text is fictional and can be ignored)
Figure.7(The text is fictional and can be ignored)
Summarizing the UI design of the previous three versions, I want to highlight
the goal of this APP ---- diving.
Therefore, IN Figure 5, I put the title at the beginning of the main page. Below
the main page, some articles with words can be placed. Managers can publish
some places that attract tourists, and tourists can also publish by themselves to
share their stories and satisfaction.
In Figure 7, I include time, price and other functions that can be used for search.
Figure 6, facilitation-accessible coaches or locations, when visitors click into
them, there are detailed explanations and supporting facilities.
Of course, this is the original version, not the final version.
Finally, I choose Sketch and Wix to design the UI.
2.2 DESIGN OF INTERACTIVE FUNCTIONS
Enhance the guidance of the page, the use of soft switching mode, not stiff,
improve the continuity between the interface and the jump interface.
Explain the changes of interactive actions, effectively give users feedback
through dynamic effects, and add some small status hints, such as a small
progress bar in the style of a cruise ship, to remind the normal operation of the
APP.