The UI Overview: The UI is using in QNAP firmware 3.x version and it could be found in the most of QNAP NAS (Network Accessed Storage) products. What I was did is the frontend user interface design and some javascript coding.
Welcome Screen: By begin designing the UI works, I would like to present an Apple style feel - clean and easy to use. So I put the large sevice icons on the screen center. Users could easy to find the major services to login when they open the control panel.
Main UI Screen: This type of user interface is extremely easy to use, especially for a NAS beginner. All functions are listed on the left side menu tree. Click on any of them, the details will applied on the right side screen.
Popup Window: The style applied on some setting wizards. These wizards will guide user throughout the creation process and detail settings step by step.
Function Icons: All the functions displayed as large icons. Similar to the behavior of user operating system controls PC's tasks and manages system resources. The language indicator is positioned in the top right side. This enables the user to easily find the available languages.
Detail Settings: One of the settings page. The tabs shows the related options or preferences under the function. There are some other styles such radio button, selector and so on also listed on above screen.
Graphical Information Of System Statistics: The page shows various pieces of information about the CPU usage, disk usage and bandwidth transfer.
Detail Settings: One of the settings page.
All Functions Display: Click on Overview link on the left, you can find all available functions listed on one page with large icons.
Details Screen: One of the details informations screen that system logs displayed. You can also view the UI introduction on YouTube
The UI Overview
The overview of the UI and QNAP NAS
Welcome Screen
The welcome screen shows the services on the NAS. Click any of them to login and use/manage the service.
Main UI Screen
All functions listed on left, and some wizard links on the main screen window.
Popup Window
The style of popup windows. Using in wizard and some functions of settings.
Function Icon
The sub functions listed page. Click on the menu tree on the left side and display the sub functions on the right side screen.
Detail Settings
One detail settings screen.
Graphical UI
Graphical statistics interface, some system resources are displayed here.
Detail Settings
One detail settings screen.
All Functions
Click on Overview link on the left. You'll get all functions listed here, it helps to find the function you want quickly.
Details Screen
One of the details screen.
Please click on the thumbnails above to view the details.