Why do shapes and spacing get distorted when scaled down in Illustrator?

Question

What I need:

I'm creating android app icon. So it's obviously pixel based and I want to pay attention to make it "pixel perfect" and then I need to export it in different dimensions (say 36x36, 64x64) by scaling it down accordingly, without losing proportions and crisp edges.

What I tried and observed:

(Using Illustrator 2015)

Thing I'm using to get pixel perfect shape is Align to pixel grid so that edges don't seem blurred. It works but spacing and width of shapes change!

(A) Align to pixel grid is unchecked from beginning

1. I created a shape (No strokes, only fills). Align to pixel grid is UNCHECKED
2. Scaled it down to size of an app
3. Checked Align to pixel grid and shape got distorted. One of the lines get thinner and spacing becomes uneven. It's not sure what will be distorted. It depends from dimensions to dimensions / shape to shape.

Observation: Widths and spacing are affected

(B) Align to pixel grid is checked before starting drawing shape

1. I created a shape (No strokes, only fills). Align to pixel grid is CHECKED
2. Scaled it down to size of an app
3. Shape got distorted. Result was similar to (A) - 3

Observation: Mainly spacing is affected. It's not proportional

(Please see rough illustrated image at the end (these are not real pixels. I just made grids to make it clear to you. Things are a little exaggerated):

How can I fix it (i.e., getting those 3 rectangles of equal width with equal spacing between them)?

PS:

1. I read answers on Adobe forums and here by Scott about similar questions. But I consider this a new question as others didn't explain how we can solve this problem of uneven spacing and widths if we want to scale it down and still get pixel perfect design.

2. Things distort more when there are rounded corners. Some corners get more radius, some less eventually, instead of being equal.

Answer 1

First I want to Ask if that lines are fill or stroke. And if you have checked the scale strokes & effects checkbox beside allign to pixel grid.

If it is still a stroke or not expanded then you must always check the scale strokes & effects checkbox. As shown some samples.

This is a sample of lines ond the first right side(stroke only) copied and scaled with scale strokes & effects checkbox shown on Transform window. As shown it's ratio is ok.

This is a sample of lines // far right (stroke only) copied and NOT scaled with scale strokes & effects checkbox. It's distorted or not proportional to the original

And if it outlined/Expanded use scale Tool as shown and check the scale strokes and effect also.

Answer 2

You do understand that its different if those lines are paths with stroke or squares with fill. If your have stroked lines than this is not likely going to work since the line can only snap to grid, however what you would need to do for this to work is snap to 1/2 grid. So expand the strokes before you do this.

Also you can not incrementally scale you need to scale right size in one go or not scale at all. So you can scale it down to 2/3's but 1/3 but nothing else will work.

Personally i never ever enable pixel snapping, since its very unproductive for most work*. Like in this case, its better to disable pixel snapping scale and then align points to closes half pixel.

* Its not like its broken or anything but the restriction it causes on your effects is just too great there is a limited number of options. Better tweak first then snap whatever you need.