What I Made
For this week’s assignment, we need to create a lock screen. I designed an app in which the user will have to find two piggies that are different out of nine in order to unlock the screen.
Each time the user enters the application, two random piggies out of nine will be assigned to become the “apple piggies”(the rest seven ones are the same normal pigs), the user will have roughly around one and a half seconds to remember the locations before all pigs turn to their backs. The user will need to find the two special pigs to get the phone unlocked.
When I think about lock screens, I think about passwords and tasks that one needs to fulfill. I took the inspiration of those memory card games I used to play when I was younger when creating this app.
And the choice of designing pig avatars is based on the fact that 2019 is year of the pig.
- I first sketched out the interfaces using Adobe XD.
- I did some user testing and asked about people’s experience seeing the lock screen.
I got feed backs saying that the caption “Find the different” on the top area is quite confusing, and should be modified to something much clearer. So I changed the caption from “Find the different” to “Find Two Apple Piggies” for better clarification.
for old version to new version
- Then I started migrating the designs to Xcode and build my app.
- in Main.storyboard, I layout all the components in my app. I used auto-layout and constrains to lock my elements in place.
2. Then I sketched out the logic behind the app.
User enter the app: show the front sides and positions of all pigs (1.5s) and then show the back sides of the pigs. –>to allow users to remember the two apple pigs they need to find
User Interaction: users can click on the images of the pig backs, they can only choose twice. If both clicks find the apple pigs, the user unlock the screen; else they fail and need to try again.
3. Writing swift and building the app
There are a few challenges / new things I learned
- To pick up two random locations each time and assign the apple pigs, I need to figure out how I can generate two new random integers. I first define two global variables a, b and:
- To make my images clickable, I tried to assign clicking functions to my UIImageView but did not succeed, so I ended up layering transparent buttons on top of each image and add the action functions
- To decide whether the user has chosen the right pigs, I assign each button an index number, and compare that number with my random number a or b, if they are the same, the right pig is chosen.
- I also set touchTimes and PigNums to limit the clicks to twice and if the PigNum = 2, the user will unlock the screen.
- I also learned to do fade in fade out effects.
- I also added launch page and logo for my app
- I included a local font this time
There are many pictures and buttons this time in my exercise, I want to know if there are better ways to organize them (collections? arrays and more?)
How can I make my images clickable?
You can find my project code at here.