Yingnan Ju Portfolio for HCI Application 2010 – 2015
“I certify that the work included in this portfolio is my own original work. Work included which was conducted as a part of a team or other group is indicated and attributed as such- the other team members are named and a true description of my role in the project is included.”
1
Contents Windows Phone Apps ................................................................................................................................................................................. 3 GPS with Friends ..................................................................................................................................................................................... 3 Eight Glasses of Water ............................................................................................................................................................................ 3 Windows 8 / 10 Apps .................................................................................................................................................................................. 6 Binary Clock ............................................................................................................................................................................................. 6 Dinner Decision ....................................................................................................................................................................................... 6 CNBlog ..................................................................................................................................................................................................... 6 Nine-Block Diary ...................................................................................................................................................................................... 6 Classic Desktop Software .......................................................................................................................................................................... 16 Wave Generator .................................................................................................................................................................................... 16 Binaural Beats........................................................................................................................................................................................ 16 Picture This ............................................................................................................................................................................................ 16 Drawings on My Phone ............................................................................................................................................................................. 20
2
Windows Phone Apps GPS with Friends Eight Glasses of Water
3
GPS WITH FRIENDS
GPS with Friends is the App I designed and implemented as the final project of a course cooperated by Microsoft China and Peking University. I was inspired by the logo of MSN Messenger and designed the logo with a letter G for GPS.
Friends can see each other’s location and message. I was playing Final Fantasy XII at that time and I used large number to display distances between friends and the user as a tribute to Final Fantasy, which displays characters’ level with extra-large digits. 4
EIGHT GLASSES OF WATER
The user taps a glass of water and the count will decrease till 0. I set an offset of the number at the screen edge to get rid of the rigidity.
Eight Glasses of Water is an app designed to remind the user to drink enough water every day. The font in the logo was originally used on posters and blackboards. This app was downloaded for more than 27,000 times in the Microsoft marketplace and the engineers in Microsoft also liked this app when I showed it to them in the interview.
The tile of the app also changes as the user drinks a glass of water. 5
Windows 8 / 10 Apps Binary Clock Dinner Decision CNBlog Nine-Block Diary
6
BINARY CLOCK
This app is for geeks who wish to have a unique clock on the screen that is not easy for other people to understand. The format is:
HOUR: MINUTE SECOND DAY/MONTH/YEAR
The tile also displays the real time, so the user does not need to open the full app. How much time does a real geek need to know the time with a glance of the app? Only the geek knows. 7
BINARY CLOCK It is not difficult to finish this app but the most interesting thing is the color of the background. The original design was to set the value of hour, minute and second to RGB value directly and the color would change as the clock goes. Then I also found that the color could change in other different patterns by changing the increment of RGB value with a few lines of codes.
A group of Traditional Chinses colors’ transition pattern: Green to Red: 青葱
绿玉 葱 葱 青 翡 碧 石 艾 水 绿 青 葱 翠 青 绿 绿 沈
石朱 炎 丹 酡 檀 缳 水 鱼 榴红 颜 红 肚 白
8
BINARY CLOCK
A group of Traditional Chinses colors’ transition pattern: Green to Yellow: 青葱
松 青 葱 柳 豆 嫩 柳 鹅 豆 柏 碧 绿 绿 绿 绿 黄 黄 黄
A group of Traditional Japanese colors in Buddhism theme:
樱
鸢 梅 栗 雀 宗 水 绯 甚 花 色 皮 梅 茶 传 が 三 鼠 色 唐 き 红 茶
9
DINNER DECISION
Some people have difficulties to make a decision among many good choices, just like I always do not know what to have for dinner. This app is just for us and it will make a random choice among available choices. The choices are displayed in random order, size and location on the screen, just like the mental activity of people when they are trying to make the best choice.
10
DINNER DECISION
I also developed the Windows Phone version of Dinner Decision. Almost all cellphones have GPS so a list of restaurants can be fetched from the web using the GPS location and the user can have a choice of dinner with only one click.
11
CNBLOG
CNBLOG is the client of CNBlog, the biggest Chinese IT blog community. I developed the app in Microsoft for the promotion of Universal App.
12
CNBLOG
I made a lot of efforts to make the app adapt properly on different devices with different screen sizes and resolutions. The size of each block of blog can be changed by simply pinching.
The context menu is also rearranged to adapt different widths of screen.
13
CNBLOG
I also designed a rebound effect when the abstract tab of a blog moves from the right side to the left side. I calculated several key points with the following equation to make the effect look natural: � = �0 � +
1 2
đ?‘Žđ?‘Ą 2
The opacity of the covered part is also in bind with the position of the moving part, to make a fading effect.
14
CNBLOG
There was a new type of diary call nine-block dairy originated from Japan in 2010. It is a simple type of diary, for users only need to answer the given questions, e.g. news today or the happiest thing, like filling the blanks.
This was my first Windows 8 App and the background was the mix of two photos I took before.
15
Classic Desktop Software Wave Generator Binaural Beats Picture This
16
Wave Generator I bought a pair of new earphone in 2011 and I wrote the Wave Generator for them. It generates four types of sound wave in the range of frequency that human ears can hear, from 20 to 20,000 Hz. Another purpose of this software is to generate long-lasting sound that helps my earphone to run in. I set the background of the software with the Aero glass effect of Windows 7.
Later I continued to develop the Wave Generator. I added a feature called sweep frequency mode. But in Windows 8 and 10, the Aero glass effect does not work so the software looks quite different from what it looked like in Windows 7.
17
BINAURAL BEATS
I developed Binaural Beats right after Wave Generator. I did not start developing mobile apps but I started to try the style of mobile apps on classic Windows desktop software. Binaural Beats means that the brain produces a phenomenon resulting in low-frequency pulsations in the amplitude and sound localization of a perceived sound two tones at slightly different frequencies are presented separately, one to each of a subject's ears, using stereo headphones.
18
PICTURE THIS
This is a screenshot tool. I developed the software before Windows 7 built-in snipping tool was released. It is easy to use while has a low memory use. The different between Picture This and other similar software is that my tool has a dynamic screen to capture while other software have only a static full screen captured.
19
Drawings on My Phone I like to draw on my phone. Sometimes I played with my friends with Art with Friends (original Draw Something 2). Here are some of my freehand drawings.
20
DRAWINGS ON THE PHONE
21
DRAWINGS ON THE PHONE
22
VISION
I took the photo in this summer as I was deeply moved by their happiness. I wish I could be as happy as them, doing research in the field of HCI in the future.
23