在所有设备上布局，应遵循哪些步骤？

Question

I am facing an issue of how to proceed with my designer and then on my app ( iOS app using Size class ) to make the layout as required.

Here his how we proceed:

1 / The designer of my company is preparing the UX/UI on illustrator, he is preparing them on 320 × 568 ( is that the way ? )

2 / Export the images as .pdf File @1x based on his UX

3 / I am using Size Class @ storyboard

So :

(a) I have an image ( a circle ) which needs to be in the middle of the screen.

(b) The designer's UX ( based on iPhone 5 ) has an image 200*200px, I set the constraint : center horizontally & vertically. looks good for iPhone 5, 4s

(c) Then on the iPhone 6, 6Plus it looks too small in the middle of the screen, so I decide to set different constraint to have a ratio according to the Width, still correct ?

Here is what goes wrong :

(d) the based image @1x is 200*200px and with the ratio my UIImageView becomes ~260*260px and the image is not well rendered.

How to proceed ?

1 / Should my designer export me an image.pdf @1x for different sizes, 200px and 260px, and I'll change the image I am using in the code to fit different devices ?

2 / Should I keep one image for all size and play with only with the constraint ?

note : I usually use the Slicing when it is about shape that I can Slice.

Answer 1

Your designer should be designing your resolution for the maximum screen size and exporting graphics as PDF's. You should then be importing your graphics as PDF's.

1. In your image.assets folder drag and drop your .pdf graphic into the folder
2. Select the image you just added
3. In the attributes inspector on the right bar change scale factors to "Single Vector"