samedi 18 juin 2016

iOS: Buttons sizes relative or absolute?

i wonder what is the best practice for ui design for iOS regarding ui element sizing, especially buttons. In my example all buttons are based on images, no text.

I see two approaches

Absolute Sizes

PRO:

  • image based buttons do not need rescaling, avoids blurriness
  • simple setup in interface designer

CON:

  • buttons look smaller on bigger displays (ipad2 vs. iphone 4) relative to other ui elements

Relative Sizes

PRO:

  • buttons look better in whole ui appearance across all display resolutions and densities

CON:

  • buttons may look blurry
  • interface builder constraints will get a bit more complex

Did i forgot something? Or did i get it wrong?

For now i was designing the ui completely relative to the screen. So lets say a button had the width of 10% of the screen width and an aspect ratio of 1:1. When the ui was completely relative, everything seemed consistent across all devices. But my questions started in the scenario of @2x density buttons. The iphone 4 has a width (portrait mode) of 640 while the ipad2 has an width of 768. Should i create my @2x, 10% button image with a width of 77px or 68px? I would say 77 because downscaling is better than upscaling.

Well, this leads me to my question:

What is the best practice to design the UI? How should we handle the image design for buttons?

Aucun commentaire:

Enregistrer un commentaire