9 ms·
Mobile UI Patterns
- jayfuerstenberg 15y agoGreat collection of screenshots! I got some inspiration from this.
- beerglass 15y agoAlso pttrns.com
- pazimzadeh 15y agoUse retina display sized screenshots.
- gbog 15y agoIs it me or the usage of "patterns" here is not very accurate. It could be called "mobile screens design". "Pattern" could be used for specific and abstract solutions to interaction problems. For instance, the Google map's corner in iOS, that you click to get settings, is a "UI pattern". Some such patterns can be abstracted from the OP, but what I see is a list of categorized screenshots.
- algorithms 15y agoI think it's a good approach to collect a few screenshots, order them into coherent groups and them try to abstract some "pattern". The screenshots themselves aren't really a pattern though... so I definitely agree with you :)
- andos 15y agoYeah... Besides, people will have a lot of trouble justifying stuff like "custom tab navigation" as a solution to an interaction problem beyond "it looks cool".
- shareme 15y agowithout the user end data of where the user spends the time andwhy that might be imortant makes this site somewhat worthless..
- algorithms 15y agoSeriously, please stop using such horizontal scrollable layouts. It's a pain to navigate
- skeletonjelly 15y agoAgreed. Hurt my head at first. Then I thought maybe the menu on the left was a javascript filter or scroll to but alas it wasn't.
- mgcross 15y agoChrome under Lion: swiping the trackpad in an attempt to scroll horizontally often results in navigating back/forward through pages.
- lukifer 15y agoChrome's implementation of this feature is absurdly broken. You can disable it by turning off two-finger page swipes in System Prefs -> Trackpad. Still looking for a way to disable it for Chrome specifically.
- ugh 15y agoNot on mobile devices :-) (That's no justification for using horizontal scrolling on a website that also targets the desktop, though.)
- gbelote 15y agoWord. For those with a mousewheel: on some browsers you can hold shift and roll up/down to scroll left/right.
- maushu 15y agoAnything similar for desktop? Or non-mobile web applications?
- skeletonjelly 15y agoDid anybody find any Android ones? I didn't see any in my casual perusal. Is this by design? Or is the site owner just an iPhone user?
- josteink 15y agoYeah. If anything it should be called "iOS patterns". There's very little here to extract as general mobile patterns, and lots of these "patterns" would collide massively with both Android and WP7 if employed in an app. The fact that this website doesn't even work well on a PC should really tell how iOS-centered it is. Some people may think users don't care, and that everyone loves the iWay, but I've seen complaints on Android market that "this is just a copy of the iPhone-app. We want an Android app". Why? Because the UI semantics are different enough, well beyond the point of noticeable.
- Raphael 15y agoIt works just fine on a PC. (Chrome here.)
- coob 15y agoThere is very little decent design on display on the Android Marketplace.
- vetinari 15y agoHere: http://www.androidpatterns.com/ http://www.androidpatterns.com/
- nicks22 15y agothis is a good resource for someone as oblivious as me!
- Kunlun 15y agoThanks a lot for the link, very interesting. Alright it is not "pattern" in a strict sense but it gives a good overview of the composition of some apps.
- jansen 15y agoI love the site, am visiting it for a couple months now to get inspired. Another great site is http://pttrns.com/ http://pttrns.com/
- miles_matthias 15y agoThat's a great site. I was going to say that I wish the OP had patterns for article text, and pattrns does, so thanks :)
- gautaml 15y agoSo is there anything out there showing Android patterns or better yet, non-iOS?
- k4st 15y agoHrmm.. looks like some free AT&T advertising.
- Nemisis7654 15y agoI don't like that this web site is called "Mobile UI Patterns." As others have pointed out, this is more specifically iOS design patterns. While some things can be similar, Android and iOS have different design patterns, and I think that should be respected when developing an application. Personally, I dislike when an Android app is made to look like an iOS app. For those, who want Android design patterns, there is this web site: http://www.androiduipatterns.com/ http://www.androiduipatterns.com/
- magicseth 15y agoIronicly, this site is unusable on a mobile device thanks to a "fixed" div too large for my screen.
- extramoose 15y agoGreat little composition & perfect experience to go with it. People here are bitching about the details - but the fact is that the design is simple enough to put focus solely on the mobile designs. If you're a designer and need a bit of categorized inspiration, this is perfect. Thanks for sharing.
- suyash 15y agoAwesome post, thanks for sharing. There are so many inspring patterns here that I can see myself learning from for my mobile web apps. Nicely categorized too. Feature Request/Suggestion: Let community take it on from here and submit designs/screen shots and vote each other.
- jmarinez 15y agoNice. Is there anything like this for tablets? iPad or Android would be helpful. Thanks
- traveldotto1 15y agoFunny to see how iPhone SDK has already forced on us how smart phone apps should look, just like what MS did to us with Visual Studio. I know the SDK developers want to make programming on their respective platform easier with these built in look and feel, but as a mobile developer, do I want my app just look like everyone else's?