Sizing UI correct for mobile, and desktop computers

There are so many of these topics, and I’ve yet to get a clear understanding an answer. People keep suggesting scale but scale makes the UI to small for mobile users. Take Big Games’ games for a example, they’re able to size UI big enough for mobile users and properly size it for desktop users. Here are some solutions I’ve tried and their effects:

  • Scale works for desktop, but makes the UI to small for mobile users
  • Offset makes the UI to big for mobile users
  • UIAspectRatio does it’s job and keeps the UI proportionate but doesn’t scale it to user friendly sizes
  • Combining size and offset kind of works, but isn’t optimized for all devices

Example of desktop with scale:

Mobile with scale:
esffse

Does anybody have a clear answer on how I can make UI sizes friendly for all devices?

1 Like

The easy way: make two versions of your UI- use collectionservice or some other management system for your code, don’t hardcode each UI instance.

The hard way is that you can use UIScale, generic “one-size-fits-all” UI, and a whole lot of UI Constraints to make platform-friendly UI. The problem with this is it adds a huge amount of time to your design process and will never perfectly fit the needs as well as platform-specific UI will.

Here’s some WIP UI I made a while back.

4K Desktop

1080p Desktop

iPhone 4S

Notice how for the tiny iphone screen we have to sacrifice the ability to show the social tab by default.
In a perfect world, you use modular UI code and create different versions of your screen spaces for different size screens/platforms. Well planned UI usually takes less work to add onto, in my experience.

3 Likes