New Visual Proportions for the iOS User Interface
1–10 of 48 posts
Re: New Visual Proportions for the iOS User Interface
#2detailed analysis
Re: New Visual Proportions for the iOS User Interface
#3"If you divide 480 by 44 you get a remainder of 20. Divide by 11 and you get a remainder of 9"
Isn't it 40 and 7 respectively?
edit: I think the author meant 460, which is 480px - 20px for the status bar
Re: New Visual Proportions for the iOS User Interface
#4I really like the detailed analysis of the existing interface proportions; the irregularity is definitely something people can feel but most won't be able to pin down.
There really isn't too much for me to argue with here, actually. My only concern is whether or not a 4px rhythm is, perhaps, too flexible. While I certainly haven't tested to the extent Aen has, I'm wondering if using 8px as a minimum for the rhythm would be better read by the eye as having some consistency, or if it would simply require too much change from the existing interface? (i.e., the status bar would need to go from 20 to 24px)
Re: New Visual Proportions for the iOS User Interface
#5Fascinating article for a non-designer like me. Things like visual rhythm and baseline grids hint that designing isn't just having the talent to know what looks good; there's also a whole science behind it.
Re: New Visual Proportions for the iOS User Interface
#6I hope they don't change the visual proportions.. I think I got 44 hard-coded in 100 different places in my apps, and this includes stuff like custom buttons and images.
Re: New Visual Proportions for the iOS User Interface
#7Yeah, despite the hype, Apple doesn't pay /that/ much attention to this stuff: they mostly succeed at these design issues because their direct competition is ludicrously incompetent at it ;P. (Seriously: Android needs to hire a UX designer, although I will say that 3.x is getting much better.)
If you want a really awesome example, here's one that I noticed when I was first developing Cydia a few years ago, and had to do a lot of "iPhone-native CSS" (I am one of these people who stares at and slaves over individual pixels in designs) that I believe "cannot be unseen":
So, as stated in this document, cells are 44px "tall". However, this description doesn't take into consideration the effects of the borders: only one of the two borders can count for the spacing, as there are N+1 of them in a group, not N*2.
In this case, the top border is included in the 44px "rythm", but in either case, that means that the open area inside the cell "between the borders" is actually 43px, an odd number. Of course, the fact that it is odd is unimportant: you just have to be consistent.
This is why the height of the switch in that example is actually 27px: that way it will feel balanced. Meanwhile, the height of the right chevron disclosures is likewise odd: 13px. The slider control is a 9px bar with a 23px handle. Even the little speaker is 5px at its narrowest, and 23px at its widest.
Great, right? Only... now that we've been staring at this for so long, you might notice that the text looks imbalanced, because the cap height of the font Apple uses is 12px. This is also why I say the top border is included: the text is a half pixel higher than really feels right.
Of course, this is a subtle issue, and I'm certain that a pixel here or there is the kind of thing a normal person doesn't notice, but it slowly drives people like me /nuts/ (which led to a bunch of little tweaks--even requiring custom chevrons--in the CSS I use for mobile websites).
Re: New Visual Proportions for the iOS User Interface
#8"If you divide 480 by 44 you get a remainder of 20. Divide by 11 and you get a remainder of 9. 460 cannot be divided into equal parts of 11 nor 44. The vertical rhythm is corrupt."
I would actually argue that the remainders are a good thing.
When viewing a list, they act as a nice visual indicator that there is more content below. If the last item directly lined up with the bottom of the screen, it would not be as easy to differentiate at a glance. By showing half the last item, it encourages the user to pan down to see the remaining content.
Certainly some would suggest I'm claiming "it's a feature, not a bug" and maybe that's true, maybe the remainder it is unintended, but I think it does make more sense to have the bottom element in a list half showing to alert the user that there is more content below.
Re: New Visual Proportions for the iOS User Interface
#9"If you divide 480 by 44 you get a remainder of 20. Divide by 11 and you get a remainder of 9" Isn't it 40 and 7 respectively? edit: I think the author meant 460, which is 480px - 20px for the status bar
It was a typo. Fixed.
Re: New Visual Proportions for the iOS User Interface
#10I really like the detailed analysis, but I'm not sure about the changes he proposes. For example, those 32 pixel toolbar buttons in his example look... off.