This is a view that allows the user to browse a list of nearby places by distance -- this was a concept that I wasn't totally sure was going to work at all until we got it on the phone and worked the math out. As the user scrolls the list up and a new place name moves into the selected cell, the corresponding backround image also scrolls upward such that they lock into place at the exact same time.
This UI is doing double duty as a list and a detail view, so in order to make visual sense of both states, we blurred and darkened the background image while the list was moving, to bring out the name labels, and conversely brought the opacity way down on the non-selected list items when the list is at rest, bringing out the background image corresponding to the selected place.
about 1 year ago
.......but......that sounds like...one of those 'effort' things.
I love this.
here's a video of it in a rather messy state -- this is without the blur (which makes a ~huge difference), and without the proper shadow treatment, and without the distance/bearing indicator. but it will allow you to get the gist of the interaction: http://f.cl.ly/items/3U2Y17060a2I44360636/nearby%20recording.mov
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.