Mobile app version of vmapp.org
Login or Join
Sent7350415

: IOS iPhone App Hamburger Menu Button Size 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

@Sent7350415

Posted in: #InterfaceDesign #Ios

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

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Sent7350415

2 Comments

Sorted by latest first Latest Oldest Best

 

@Nimeshi706

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.

10% popularity Vote Up Vote Down


 

@Megan533

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme