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.



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



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