After about 4 weeks’ relevant learning, this week I moved on to the porting process, the first step is design MediaGrid interface for phone devices, for the screen size of computers and phones are quite different, so we need a new interface for phone devices.
I designed a very primary user interface for MediaGrid on Mobile devices. In this primary design, there’re totally 4 user interfaces for MediaGrid, namely logging in, chatting, member selection, and media sharing.
Fig 1 shows the Logging-in interface. When logging in, user can either pick a new user name in the input box, or choose an already-existed user name from the list of buttons. And user is able to configure a database server by clicking “configure” button.
After successfully logging in, here comes the main chat page as Fig 2. The top of it lies a tab to switch between chat and media. And there’s also a drop down menu at the right of them, which shows operations including “create/join a new room” and “log out”. In the center lies the chat contents, and each of the chatting item contains message, sender, receiver and time of the message. In the bottom lies message input controllers, including receiver, message input box, and send button.
When clicking on the receiver, a list of users is shown as Fig 3, in which user can decide the receiver of the message.
And when you switch the tab on the top to “media”, here comes the media sharing page. A list of files in current path is shown to the user, and each of the item contains information such as file name, size and uploaded time. The user is able to get into a folder or download a file by clicking the file item in the list. And at the bottom lies upload and make directory button. When user click upload button, a file choosing dialog will be shown. And when “Make Directory” is clicked, a dialog for directory name is shown.
peihanlee 