How do I improve the workflow so that the design supports multiple dimensions?

The latest Photoshop is the same as the Sketch output-cutting function (generator), with 2x PSD output 3x Chettu can also. and Photoshop with Slicy output cut diagram is much faster than Sketch 3.

Sketch is quite good, but at present (v3.1) still have a lot of small problem, add to Chinese support not good enough, in the interface design still can't replace Photoshop completely.

On the subject of the question, first of all, a design manuscript can not be applied to the IOS mobile phone screen size. The following is the Bjango to restore the current IOS mobile phone screen to 1x contrast, it can be seen in the design of the four kinds of screen size is different, not simply the iphone 5 interface zoom into the iphone 6 design.

How to support multiple dimension screens, this should be discussed in detail.

For the regular interface we can steal a lazy, only to do the IPhone 5 screen size design, please develop on the other screen adaptive, and finally check the effect of the real machine is OK.

Apple's online screen contrast page uses a regular interface:

For some custom interface we should adapt to different screens, such as the following is a simple profile page example, the automatic fit to the large screen is very bad.

At this point the designer should manually readjust the design for the large screen, as shown below.

In the image above, you can see that the iphone 6 Plus interface has a larger slice size than 3x, to separate the diagram, so it's not easy to simply give the iphone 6 Plus all the 3x charts are OK. At this time vector Chettu in the development of the advantage is very obvious, as long as the size of the large screen map to tell development can be, do not have to target non-3x elements of the extra output cut map.

* Cell phone screen is still a pixel bitmap, like a thin line icon even if the vector in the scaling may still appear blurred blur phenomenon (similar to the HTML icon font), in theory, not all the circumstances are suitable for vector-cut diagram. However, the iphone 6 Plus screen itself is downscale, causing the Chettu of the original pixel perfect to be scaled hollow, completely without pixel perfect, whether the iphone 6 Plus screen has been optimized to see the pixel , we have to wait to see the real machine to determine.

The Chettu aspect uses Sketch words may try the PDF vector Chettu as far as possible (but to confirm the effect on the real machine). Photoshop can only output bitmaps, the above mentioned in the custom interface of some of the cut map to separate output, other conventional 2x PSD output 1-3x Chettu can.

In addition, AI is not suitable for interface design. The courage to try Sketch is good, but if Sketch all kinds of problems can not endure the suggestion or use Photoshop better.

Also strongly recommend @akane_lee a good article on the iphone 6 and plus graphics advice!

@Akane_Lee: IPhone 6 and Plus a new machine, a group of people came to cry that the boss told him to prepare IPhone6 adaptation, but now what documents are not complete AH! In a lot of unclear details, I can only recommend this safest practice: do @1x, enlarge it to @2x and @3x used. The following scenario defaults to doing a set of mockup to cut out various sizes of the graph.

Make a small enlargement

Before doing @2x a lot of designers in dispute big shrink, or do small amplification problem. Originally in the case of @2x, as long as the value is to keep the number is even, but now @3x appear, to maintain all the values can be a multiple of 3 ... It's safe to do small amplification. Of course, it can be greatly reduced, but almost every component has 4 values: X, Y, Width, Height, and word level. To make sure these numbers are multiples of 3, I really think it's quicker to do @1x.

It's good to do small amplification!

Don't worry, the details of the small picture will be burnt out.

The figure file size is small, the efficiency eats little, the computer runs smoothly.

Marked size 1:1, convenient and quick.

No need to worry about math problems and how to do nothing wrong.

Reference data: IPhone 6 Screens demystified

See Micro Blog: http://weibo.com

Mark Size

Did you know that rd engraving interfaces are all @1x? Even if the designer gives a @2x size, rd must divide by 2 to start. Now there are @3x dimensions. Designer General math is not good, you make sure that you are big and narrow design all the Chettu and mark size can be divided by 3? In the event of a mistake being made back and forth by RD, who's going to swallow it?

Knowing that you are in danger of math, do not take your weaknesses it...

Add: Really, maths is not good do not... (Face mask)

Vector

The advantage of the vector is that no matter how to zoom in and out can keep the image sharp, really need pixel map also have intelligent object such functions, do small amplification absolutely can keep the page sharp. Unless you are not good enough to use the more tattered math to remedy, or do small amplification will encounter more accidents than the big and narrow.

First, to be able to do the right thing, and then consider creative beauty.

Just like writing a test paper, how beautiful the word is not 0 points? Team work is not to write a test paper, their own bag to play stupid even if the designer behind the RD to take over ah ...

The soldiers come to block

A: "At noon RD come over: What do you think of the IPhone 6 adaptation?"

Me: "No problem, we read the official HIG, and we'll talk about it." 」

(Turn off the website that has not yet released the full file, end this round.) )

"He just came back to me and said," Audit to be compatible with 6 dimensions. 」

Me: "Say that you are very unfamiliar with IOS 8, ask them to provide complete guideline to avoid being returned." And then you poke him every 4 hours. Is there a guideline? I'm waiting for the revision Yes!"

(The official document is still in updated:2014-09-08, the issue before the meeting.) )

A: "Planning and came to ask, naïve want to use pad size to compress direct use to mobile phone ..."

Me: "Say to him, if the specification can not do this, the time and the cost of human waste is your own to swallow oh ~~~"

A: "The boss said in the morning, 6 of the fitness to consider saying ..."

A: "Boss, when you give me the prototype when I get." 」

(Good job!)

The above is the group dialogue ... May the jobs soul bless all UI designers (and my math).

Photoshop supports the use of vectors (and should only use vector) elements to design the interface, but not the output of vector resources (can be scripted with AI output SVG, but relatively less convenient).

The IPhone 6 just out, there are wonderful good wen yo!