Week 2 – Lock Screen Challenge

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.

Ideation

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.

屏幕快照 2019-02-13 下午2.28.07
Users need to remember all cards and find the cards with same animals.

And the choice of designing pig avatars is based on the fact that 2019 is year of the pig.

Design Progress

  • 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

iPhone 6-7-8 – 1

modified

 

 

 

 

 

 

 

 

  • Then I started migrating the designs to Xcode and build my app.
  1. 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

enter page.2019-02-13 15_30_52

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.

User Win:

userwin

User Fail:

fail

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:

    屏幕快照 2019-02-13 下午3.37.58
    the while function is my research online the shuffle method was suggested by Nien
  • 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.
    屏幕快照 2019-02-13 下午3.42.09.png
  • 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.
    屏幕快照 2019-02-13 下午3.43.44
  • I also added launch page and logo for my app
  • I included a local font this time
    屏幕快照 2019-02-13 下午3.47.05.png

 

Thoughts

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?

Code

You can find my project code at here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s