top of page

Egg Timer

2020,Mobile Lab Class Project 

Inspiration

Assignment's requirement for this week:

  • Design and UI can NOT use any numbers or text

  • Review native iOS timer functionality

  • Must be able to set any interval up to 1 hour

  • Must have functionality for Start, Cancel and Pause

  • Design system must accurately communicate minutes and seconds

  • Must have visual and/or audio and/or haptic feedback when timer finishes

  • Consider Affordances, Signifiers, Mappings and Feedback in the app design

​After seeing the  requirements of the design timer, I analyzed the basic functions of the APP to set the countdown time and can be modified (up to one hour). There are countdown start and pause, and there is a flow of time. Visually, I think that time will leave colorful memories at the same time, so I choose the method of gradually reducing the area of ​​white bars and gradually increasing the pink bars. At the same time, considering that time is dynamic, so I let the white bars decrease with time and let them jump up and down randomly.

ml_Week 3: 內嵌
ml_Week 3: Work

​​process

Implement the main part:
1. Put the background image into the array, you can change the background every time you click restart
2. Write the structure of the bar chart, and write a function that maps its length and time
3. Implement the start, pause, and restart buttons

ml_Week 3: 內嵌
ml_Week 3: Video Player

​​process2

The second most important part is to change the set time from a number to a graphic. Dial default time is 30 seconds. The main idea is to design a minute dial and a stopwatch dial in increments of ten seconds. When the second dial is greater than 60 seconds, jump to Minutes, when the time is less than 0 and when the time exceeds one hour, the state is terminated.

m1_w3_2
ml_Week 3: Welcome

The Final Look

ml_week3_3
ml_Week 3: Welcome
ml_Week 3: 內嵌
ml_Week 3: Video Player
ml_Week 3: Welcome
ml_Week 3: Welcome
ml_Week 3: 內嵌
ml_Week 3: Video Player

©2020 by Siyuan Zan.

bottom of page