To make sure your artwork looks great on all devices you support, learn how the system displays content on the screen and how to deliver art at the appropriate scale factors.
Bạn đang xem: Solve 2x=3x
Scale factors
All platforms use a coordinates system based on measurements in points, which map to pixels in the display. A standard-resolution display has a 1:1 px density (also called
1x), where one px is equal to lớn one point. High-resolution displays have a higher px density, such as 2:1 or 3:1. A 2:1 density (called
3x) has a scale factor of 3. Because of higher pixel densities, high-resolution displays demand images with more pixels.
Formats
As you create different types of images, consider the following recommendations.
| Bitmap or raster work | De-interlaced PNG files |
| PNG graphics that don"t require full 24-bit color | An 8-bit color palette |
| Photos | JPEG files, optimized as necessary, or HEIC files |
| Flat icons, interface icons, and other flat artwork that requires high-resolution scaling | PDF or SVG files |
Best practices
Supply high-resolution images for all artwork in your app, for every device you support. You accomplish this by multiplying the number of pixels in each image by a specific scale factor. As you showroom each image to lớn your project’s asset catalog, identify its scale factor by appending “
1x,” “
2x,” or “
3x” to lớn its filename. Use the following values for guidance; for additional scale factors, see Layout.
| iOS | 2x và 3x |
| iPadOS | 2x |
| macOS, tvOS | 1x và 2x |
| watchOS | 2x |
In general, design images at the lowest resolution và scale them up to lớn create high-resolution assets. When you use resizable vectorized shapes, you might want lớn position control points at whole values so that they’re cleanly aligned at 1x. This positioning allows the points to remain cleanly aligned to the raster grid at higher resolutions, because 2x & 3x are multiples of 1x. In contrast, there are times when you don’t want lớn keep a shape perfectly aligned lớn the raster grid; for example, aligning a circle to lớn the grid can make it appear flattened at the top & bottom.
Include a màu sắc profile with each image. color profiles help ensure that your app’s colors appear as intended on different displays. For guidance, see màu sắc management.
Always demo images on a range of actual devices. An image that looks great at design time may appear pixelated, stretched, or compressed when viewed on various devices.
Platform considerations
No additional considerations for iOS, iPadOS, or macOS.
tvOS
Layered images are at the heart of the hãng nofxfans.com TV user experience. The system combines layered images, transparency, scaling, & motion to lớn produce a sense of realism and vigor that evokes a personal connection as people interact with onscreen content.
Parallax effectParallax is a subtle visual effect the system uses khổng lồ convey depth & dynamism when an element is in focus. As an element comes into focus, the system elevates it to the foreground, gently swaying it while applying illumination that makes the element"s surface appear to shine. After a period of inactivity, out-of-focus nội dung dims & the focused element expands.
Layered images are required to tư vấn the parallax effect.
Layered imagesA layered image consists of two lớn five distinct layers that come together to khung a single image. The separation between layers, along with use of transparency, creates a feeling of depth. As someone interacts with an image, layers closer khổng lồ the surface elevate và scale, overlapping lower layers farther back và producing a 3 chiều effect.
IMPORTANT Your tvOS tiện ích icon must use a layered image. For other focusable images in your app, including vị trí cao nhất Shelf images, layered images are strongly encouraged, but optional.
Use standard interface elements to lớn display layered images. If you use standard views và system-provided focus APIs — such as FocusState — layered images automatically get the parallax treatment when people bring them into focus.
Identify logical foreground, middle, và background elements. In foreground layers, display prominent elements lượt thích a character in a game, or text on an album cover or movie poster. Middle layers are perfect for secondary nội dung and effects like shadows. Background layers are opaque backdrops that showcase the foreground và middle layers without upstaging them.
Generally, keep text in the foreground. Unless you want lớn obscure text, bring it khổng lồ the foreground layer for clarity.
Keep the background layer opaque. Using varying levels of opacity khổng lồ let nội dung shine through higher layers is fine, but your background layer must be opaque — you’ll get an error if it’s not. An opaque background layer ensures your artwork looks great with parallax, drop shadows, and system backgrounds.
Keep layering simple and subtle. Parallax is designed to lớn be almost unnoticeable. Excessive 3d effects can appear unrealistic và jarring. Keep depth simple lớn bring your content to life and add delight.
Leave a safe zone around your content. During focus & parallax, content around the edges of some layers may be cropped or difficult khổng lồ see clearly as the image scales and moves. Lớn ensure that your primary content is always visible, don’t put it too close to the edges. Be aware that the safe zone can vary, depending on the image size, layer depth, và motion, and that foreground layers are cropped more than background layers.
Always preview layered images. khổng lồ ensure your layered images look great on táo bị cắn dở TV, preview them throughout your kiến thiết process using Xcode, the Parallax Previewer phầm mềm for macOS, or the Parallax Exporter plug-in for Adobe Photoshop. Pay special attention as scaling and clipping occur, and readjust your images as needed lớn keep important nội dung safe. After your layered images are final, preview them on an actual TV for the most accurate representation of what people will see. To download Parallax Previewer & Parallax Exporter, see Resources.
Use both the unfocused & focused states lớn determine the appropriate kích cỡ for a layered image. During the parallax effect, the system may crop background layers slightly, so keep essential content within a safe zone & include some additional space khổng lồ make sure your nội dung looks good.
The following formulas can help you calculate sizing for a layered image based on the kích cỡ of the image when it’s not in focus.
| Longest | Length of longest unfocused side + 70 pt | Length of longest focused side x 106% |
| Shortest | Proportional based on longest side | Proportional based on longest side |
You can embed layered images in your ứng dụng or retrieve them from a nội dung server at runtime. Khổng lồ create layered images for inclusion within your app, use one of the following tools:
Parallax Previewer app for macOS. Parallax Previewer can import PNG files khổng lồ serve as individual layers, layered images (.lsr) created with the Parallax Exporter plug-in, và layered Photoshop images (.psd). Parallax Previewer can export LSR files that you can import directly into an Xcode project.Parallax Exporter Adobe Photoshop plug-in. Use this plug-in to kiểm tra your layered images in Photoshop và export them as LSR files that you can import directly into an Xcode project.Xcode. Drag standard PNG files into your app’s asset catalog lớn serve as individual layers of an image stack in Xcode. Image stacks can be exported as LSR files. Xcode can also import LSR files.If your phầm mềm retrieves layered images from a content server at runtime, you must provide those images in runtime layered image (.lcr) format. You don’t create runtime layered images directly; you generate them from LSR files or Photoshop files using the layerutil command-line tool that Xcode provides. Runtime layered images are intended khổng lồ be downloaded — don’t embed them within your app.
watchOS
In general, avoid transparency khổng lồ keep image files small. If you always composite an image on the same solid background color, it’s more efficient lớn include the background in the image. However, transparency is necessary in complication images, thực đơn icons, & other interface icons that serve as template images, because the system uses it to lớn determine where to apply color.
Xem thêm: Cách Xác Định Sai Số Tuyệt Đối Của Dụng Cụ Đo Là, Công Thức Tính Sai Số: Lý Thuyết & Bài Tập
Use autoscaling PDFs khổng lồ let you provide a single asset for all screen sizes. design your image for the 40mm & 42mm screens at 2x. When you load the PDF, WatchKit automatically scales the image based on the device’s screen size, using the values shown below:
| 38mm | 90% |
| 40mm | 100% |
| 41mm | 106% |
| 42mm | 100% |
| 44mm | 110% |
| 45mm | 119% |