Designing UI for Mobile in 2023

[BeardlyDan]

Hello Everyone,

Many existing tutorials, e-books, and forum discussions often recommend using a reference resolution of 1920x1080 for designing & implementing mobile games in Unity. However, given the advancement in smartphone technology, today’s devices boast higher resolutions and offer wider aspect ratios.

I’m curious - are you continuing to design your art and user interfaces based on the traditional 1920x1080 (16:9) resolution, or have you adapted to the changing landscape of mobile screen sizes and resolutions?

I appreciate your insights!

[karderos]

@BeardlyDan

Hello Everyone,

Many existing tutorials, e-books, and forum discussions often recommend using a reference resolution of 1920x1080 for designing & implementing mobile games in Unity. However, given the advancement in smartphone technology, today’s devices boast higher resolutions and offer wider aspect ratios.

I’m curious - are you continuing to design your art and user interfaces based on the traditional 1920x1080 (16:9) resolution, or have you adapted to the changing landscape of mobile screen sizes and resolutions?

I appreciate your insights!

should always assume that its gonna be wider than 16:9, but not by a lot

make it work dynamically so that it looks good even in odd aspects

[Kurt-Dekker]

I always engineer to the default CanvasScaler of 800 x 600, set to match height. See below.

This approach lets all my projects have compatible parts. Any other custom resolution approach is not helpful unless somehow you have hard-coded numbers, and nobody that I know designs UI that way. And even if they did, a little math and you can scale it to 800 x 600… so why not stick with that to start?

Here are some notes on UI Anchoring, Scaling, CanvasScaler, etc:

Inconsistent game object placement/size between two people

It can be very fiddly but it is super-powerful once you reach comfort with the UI. Building upon Praetor’s great post above, let me suggest this approach: make a quick first draft of your UI. in the Unity game window change the shape / dimensions of your Game window (you can even make your own resolutions) see what happens to your UI in this new shape window iterate and fix your anchors and scalings and whatnot Make sure you do not overlook the Canvas Scaler settings. Personally I (almost) …

SOLVED: Game UI Button Size problem

That seems excessive… What is the text of the actual complaint from them? Make something like this with a fixed aspect ratio (in this case 2:1, maybe you need 3:1 or whatever suits your buttons), and ALL your buttons anchored inside it to never move within that box: [7337383--891847--fixed_aspect_ratio_box.png] then anchor that fixed against the bottom center (red dot below). On the ipad it looks like: [7337383--891850--ipad.png] on the iPhone it looks like: [7337383--891853--iphonex.pn…

Usually you need to choose a suitable ScaleMode and MatchMode in the Canvas Scaler and stick with it 100%. Generally if you change those settings you will often need to redo your UI entirely.

I also use this CanvasScalerOrientationDriver utility to make sharing UI for Landscape / Portrait easier. Read what it does carefully.

https://gist.github.com/kurtdekker/8802b1b6c708637398f8c9167641efd3

[MelvMay]

The 2D team do not develop the UI systems in Unity so please ask about UI in one of the UI forums.

I’ll move your post to the UGUI forum but there’s also the UIToolkit forum.

Thanks