Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I've decided to add a Hamburger Menu on my new iOS iPhone Application. So in order to successfully implement that I need to prepare few images specially for the Hamburger button.
But I couldn't find specific sizes which are suitable for this. Can anybody guide me? Currently I have designed images in following sizes:
44px - @1x.png
44px - @2x.png
66px - @3x.png
The sizes for custom navigation bar icons are listed in the iOS Human Interface Guidelines here: iOS Human Interface Guidelines — Custom Icons
The sizes are listed as:
iPad Pro, iPad, iPad mini About 44px by 44px
iPhone 6s, iPhone 6, iPhone SE About 44px by 44px
iPhone 6s Plus, iPhone 6 Plus About 66px by 66px
The difference is because the iPhone 6[s] Plus uses the @3x resources while the others use the @2x images. So your @2x and @3x sizes are correct, your @1x image should however be half the size of your @2x image.
From iOS Human Interface Guidelines — Image Size and Resolution:
...
A standard resolution image has a scale factor of 1.0 and is referred to as an @1x image. High resolution images have a scale factor of 2.0 or 3.0 and are referred to as @2x and @3x images. Suppose you have a standard resolution @1x image that’s 100px by 100px, for example. The @2x version of this image would be 200px by 200px. The @3x version would be 300px by 300px.
Now, there aren't many iDevices left that use @1x images that you're likely to support so it may not practically be an issue, but it's something you should be aware of.
I encourage you to read the Apple's iOS Human Interface Guidelines. If this is too much I'd recommend to read at least these sections: Navigation, Navigation Bars and Tab Bars.
The reason why I refer to these documents is, that there is no Design Pattern like the Navigation Drawer and Hamburger Menu in the iOS UI ecosystem. I tend to recommend designers to stick to the UI design patterns the target Operating System provide. I think it's easier for the users to find their way through the app using known or OS specific patterns.
Apparently Apple don't provide measurements for UI elements (anymore?). But from Google Material design and elsewhere measurements for ideal button size can be obtained. From Material Design's Metrics & Keylines:
To ensure balanced information density and usability, touch targets should be at least 48 x 48 dp. In most cases, there should be 8dp or more space between them.
Size elements at least 48dp high and wide to ensure a physical size of about 9mm regardless of screen size. The recommended target size for touchscreen objects is 7-10mm.
Where dp is density independent pixel. How this translates to retina displays, I'm not sure. Is it 46 px on @1x, 92 px on @2x and 138 px on @3x?
