HCI Lab4：Jishi Building Guidance

Function Overview and Design Philosophy

Interface Design and Fluid Navigation Principle

1. Map Display Interface: This interface design considers the "coherence" and "clarity" principles of Fluid Navigation. A text input box is set under the menu bar of this interface, where users can text input or voice input the name, number, or other features of the room they need (such as Student Affairs Office, Ge Lei, etc.). This design enables users to quickly and directly find the information they need while maintaining the coherence of the interface.

2. Navigation Display Interface: This interface embodies the "flexibility" and "interactivity" of the Fluid Navigation principle. A selection bar is provided at the bottom of this interface, offering several function options such as "Show all rooms", "Navigate to specific rooms", "Mark a room", and "Room usage status". This allows users to use the application flexibly according to their needs, and the corresponding button will turn blue after clicking.
1. Show All Rooms All rooms will be marked at this time, and users can click the corresponding buttons as needed.
2. Navigate to Specific Rooms This interface embodies the "coherence" and "clarity" principles of Fluid Navigation. To prevent students from getting lost in the Ji Shi Building, a clear forward direction indication is provided in this interface, enabling users to easily find the direction they need to go, maintaining the coherence between the interface and user operation.
3. Mark a Room Users can find a room through search and mark it, and the marked room will be highlighted.
4. Room Usage Status At this time, an interactive table will be displayed. The light blue part marked with "1" on it indicates that the room is occupied, and "0" indicates that the room is free. Users can click the room number and then press the "Click to Book" button to book for self-study, meetings, etc.

3. View Room Information Interface: This interface embodies the "flexibility", "clarity", and "interactivity" principles of Fluid Navigation. Detailed and useful room information is provided in this interface, and a navigation bar is set up. Users can click to view the detailed information of the previous or next room, including the type, usage, occupants of the room (clicking the phone symbol next to it can dial and contact the corresponding teacher), and the status of the room. Users can switch rooms by using the previous/next room buttons, or they can switch room information cards by swiping left and right (the card will be dimmed when it is not switched to), enabling users to use the application flexibly while maintaining the clarity and interactivity of the interface.

Reference：