1 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.”
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
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.”
2
Contents Windows Phone Apps ................................................................................................................................................................................. 3
GPS with Friends ..................................................................................................................................................................................... 3
Eight Glasses of Water ............................................................................................................................................................................ 3
Windows 8 / 10 Apps .................................................................................................................................................................................. 6
Picture This ............................................................................................................................................................................................ 16
Drawings on My Phone ............................................................................................................................................................................. 20
3
Windows Phone Apps GPS with Friends
Eight Glasses of Water
GPS WITH FRIENDS
4
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.
EIGHT GLASSES OF WATER
5
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 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.
The tile of the app also changes as the user drinks a glass of
water.
6
Windows 8 / 10 Apps Binary Clock
Dinner Decision
CNBlog
Nine-Block Diary
BINARY CLOCK
7
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.
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
BINARY CLOCK
8
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: 青葱
玉 葱
绿
葱
青
青
葱
翡
翠
碧 石
青
艾
绿
水
绿
朱
红
炎 丹 酡
颜
檀 缳 水
红
鱼
肚
白
绿 沈
石榴
BINARY CLOCK
9
A group of Traditional Chinses colors’ transition pattern: Green to Yellow:
青葱 青
碧
葱
绿
柳
绿
豆
绿
嫩
绿
柳
黄
鹅
黄
A group of Traditional Japanese colors in Buddhism theme:
梅
皮
色
栗
梅
雀
茶
宗
传
唐
茶
水
が
き
绯 甚
三
红
鸢色
松 柏
豆
黄
樱
花
鼠
DINNER DECISION
10
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.
DINNER DECISION
11
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.
CNBLOG
12
CNBLOG is the client of CNBlog, the biggest Chinese
IT blog community. I developed the app in Microsoft
for the promotion of Universal App.
CNBLOG
13
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.
CNBLOG
14
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.
CNBLOG
15
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.
16
Classic Desktop Software Wave Generator
Binaural Beats
Picture This
Wave Generator
17
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.
BINAURAL BEATS
18
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.
PICTURE THIS
19
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.
20
Drawings on My Phone I like to draw on my phone. Sometimes I played with