How does scaled resolution work? Please help!

Only the display resolution is changed, nothing else. The UI's size is simply a function of the resolution's change. I think you misunderstand the concept of "scaled" in this sense. It does not allow you to change the size of the image without changing the resolution. Only the resolution is scaled to display in a monitor that has a different native resolution.

Scaled just let's you choose a lower resolution for the display. Everything displayed is lower resolution.

"Scaled" as I described it has been around in the OS well before 4K display support was offered. Based on the article you posted, if you have a 4K display, the UI and other objects have different resolutions.

I don't have a 4K display so I don't know how any of that was actually implemented.

On the retina macbook pro the UI is draw at 2x the "working resolution". Set to "native" on the 15" the UI, text, and images in some applications (safari and other web browsers, preview, etc...) are drawn at 2x. The same size as they would be on the non retina 1440x900 screen. Images in pro graphics applications (Adobe Photoshop, Lightroom, Premiere, PhaseOne Capture1, etc...) are drawn at the native resolution of 2880x1800. The application UI is drawn at 2x. Scaled resolutions are 1024 x 640, 1280 x 800, 1440 x 900, 1680 x 1050 and 1920 x 1200. The screen resolution is sampled to 2x these resolutions then scaled to the native resolution. UI elements are drawn as they would be at 1024 x 640, 1280 x 800, 1440 x 900, 1680 x 1050 and 1920 x 1200. Images in pro apps at 2x those resolutions. My last macbook pro had the "high res" 1680x1050 screen. I run my retina macbook pro at the same effective resolution with the plus one setting. It can be confusing that different applications display images at either 2x or "native" size. UI is always 2x. Photoshop displays images as if the screen is 3360x2100.

Hope this helps.