EGG TIMER

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.

 
 

​​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

 
 

map time to rectangles' length

 

check the status for restart button

 

​​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.

 
 

Dial design

 

Function of response time change

 
 
 

©2020 by Siyuan Zan. Proudly created with Wix.com