Apple human design это
Widgets use vivid colors, rich images, and clear, crisp text that’s easy to read at a glance. A unique, beautiful widget not only provides useful information, it can encourage people to feature it on their devices.
Help people recognize your widget by including design elements linked to your brand’s identity. Design elements like brand colors, typeface, and stylized glyphs can make a widget instantly recognizable. Take care to keep brand-related design elements from crowding out useful information or making your widget look out of place on the Home screen.
NOTE When a widget appears in Notification Center on iPhone and Mac or on the iPhone Home screen, the system displays the app name below it; in Notification Center or the Home screen on iPad, the app name doesn’t appear below a widget.
Consider carefully before displaying a logo, wordmark, or app icon in your widget. When you include brand-related design elements like colors and fonts, people seldom need your logo or app icon to help them recognize your widget. Also, the widget gallery displays your app name and icon when it lists the various types and sizes of widgets you offer. In some widgets — for example, those that display content from multiple sources — it may make sense to include a small logo in the top-right corner to subtly identify the app that provides the widget.
Aim for a comfortable density of information. When content appears sparse, the widget can seem unnecessary; when content is too dense, the widget isn’t glanceable. If you have lots of information to include, avoid letting your widget become a collage of items that are difficult to parse. Seek ways to curate the content so that people can grasp the essential parts instantly, and view relevant details at a longer look. You might also consider creating a larger widget and looking for places where you can replace text with graphics without losing clarity.
Use color judiciously. Beautiful colors draw the eye, but they should never prevent people from absorbing a widget’s information at a glance. Use color to enhance a widget’s appearance without competing with its content. In your asset catalog, you can also specify the colors you want the system to use as it generates your widget’s edit-mode UI.
Support Dark Mode. A widget should look great in both the light and dark appearances. In general, avoid displaying dark text on a light background for the dark appearance, or light text on a dark background for the light appearance. When you use the semantic system colors for text and backgrounds, the colors dynamically adapt to the current appearance. You can also support different appearances by putting color variants in your asset catalog. For guidance, see Dark Mode (iOS) and Dark Mode (macOS); for developer guidance, see About Asset Catalogs.
Consider using SF Pro. Using the system font helps your widget look at home on any platform, while making it easier for you to display great-looking text in a variety of weights, styles, and sizes. If you need to use a custom font, consider using it sparingly and be sure it’s easy for people to read at a glance. It often works well to use a custom font for the large text in a widget and use SF Pro for the smaller text. For guidance, see Typography (iOS) and Typography (macOS).
Avoid using very small font sizes. In general, display text using fonts at 11 points or larger; text in a font that’s smaller than 11 points can be too small for most people to read at a glance.
Always use text elements in a widget to ensure that your text scales well. In particular, don’t rasterize text — doing so prevents VoiceOver from speaking your content.
Consider using SF Symbols. SF Symbols helps you align and scale symbols with text that uses SF Pro. For guidance, see SF Symbols.
Design a realistic preview to display in the widget gallery. Highlighting your widget’s capabilities — and clearly representing the experiences each widget type or size can provide — helps people make an informed decision. You can display real data in your widget preview, but if the data takes too long to generate or load, display realistic simulated data instead.
Design placeholder content that helps people recognize your widget. An installed widget displays placeholder content while its data loads. You can create an effective placeholder appearance by combining static parts of the UI with semi-opaque shapes that stand in for actual content. For example, you can use rectangles of different widths to suggest lines of text, and circles or squares in place of glyphs and images.
Avoid mirroring your widget’s appearance within your app. If your app displays an element that looks like your widget but doesn’t behave like it, people can be confused when the element responds differently when they interact with it. Also, people may be less likely to try other ways to interact with such an element in your app, because they expect it to behave like a widget.
Write a succinct description of your widget. The widget gallery displays descriptions that help people understand what each widget does. It generally works well to begin a description with an action verb; for example, “See the current weather conditions and forecast for a location” or “Keep track of your upcoming events and meetings.” Avoid including unnecessary phrases that reference the widget itself, like “This widget shows. ” “Use this widget to. ” or “Add this widget.” Use approachable language and sentence-style capitalization.
Group your widget’s sizes together, and provide a single description. If your widget is available in multiple sizes, group the sizes together so people don’t think each size is a different widget. Provide a single description of your widget — regardless of how many sizes you offer — to avoid repetition and to help people understand how each size provides a slightly different perspective on the same content and functionality.
Consider coloring the Add button. After people choose your app in the widget gallery, an Add button appears below the group of widgets you offer. You can specify a color for this button to help remind people of your brand.
Adapting to Different Screen Sizes
Widgets scale to adapt to the screen sizes of different devices and onscreen areas. Ensure that your widget looks great on every device by supplying content at appropriate sizes.
Design content to look great on all devices and scale factors, letting the system resize or scale as necessary. On iPhone, the system ensures that your widget looks good on small devices by resizing the content you design for large devices. On iPad, the system renders your widget at a large size before scaling it down for display on the Home screen. As you create design comprehensives for various devices and scale factors, use the sizes listed below for guidance; for your production widget, use SwiftUI to ensure flexibility.
-
Screen size (portrait) Small widget Medium widget Large widget 428×926 pt 170×170 pt 364×170 pt 364×382 pt 414×896 pt 169×169 pt 360×169 pt 360×379 pt 414×736 pt 159×159 pt 348×157 pt 348×357 pt 390×844 pt 158×158 pt 338×158 pt 338×354 pt 375×812 pt 155×155 pt 329×155 pt 329×345 pt 375×667 pt 148×148 pt 321×148 pt 321×324 pt 360×780 pt 155×155 pt 329×155 pt 329×345 pt 320×568 pt 141×141 pt 292×141 pt 292×311 pt -
Screen size (portrait) Target Small Medium Large Extra large 768×1024 pt Design canvas 141×141 pt 305.5×141 pt 305.5×305.5 pt 634.5×305.5 pt Home screen 120×120 pt 260×120 pt 260×260 pt 540×260 pt 768×1024 pt Design canvas 141×141 pt 305.5×141 pt 305.5×305.5 pt 634.5×305.5 pt Home screen 120×120 pt 260×120 pt 260×260 pt 540×260 pt 810×1080 pt Design canvas 146×146 pt 320.5×146 pt 320.5×320.5 pt 669×320.5 pt Home screen 124×124 pt 272×124 pt 272×272 pt 568×272 pt 834×1112 pt Design canvas 150×150 pt 327.5×150 pt 327.5×327.5 pt 682×327.5 pt Home screen 132×132 pt 288×132 pt 288×28 pt 600×288 pt 820×1180 pt Design canvas 155×155 pt 342×155 pt 342×342 pt 715.5×342 pt Home screen 136×136 pt 300×136 pt 300×300 pt 628×300 pt 834×1194 pt Design canvas 155×155 pt 342×155 pt 342×342 pt 715.5×342 pt Home screen 136×136 pt 300×136 pt 300×300 pt 628×300 pt 1024×1366 pt Design canvas 170×170 pt 378.5×170 pt 378.5×378.5 pt 795×378.5 pt Home screen 160×160 pt 356×160 pt 356×356 pt 748×356 pt
Coordinate the corner radius of your content with the corner radius of the widget. To ensure that your content looks good within a widget’s rounded corners, use a SwiftUI container to apply the correct corner radius. For developer guidance, see ContainerRelativeShape.
Ensure text and glyphs adapt to size changes. Consider using SF Pro and SF Symbols to help your text and glyphs look great and remain aligned at every size.
NOTE In iOS, widgets support Dynamic Type sizes from Large to AX5 when you use Font to choose a system font or custom(_:size:) to choose a custom font.
In general, use standard margins to ensure your content is comfortably legible. The standard margin width is 16 points. If your widget displays content like text, glyphs, and graphs, use the standard margins to avoid crowding the edges and creating a cluttered appearance. For developer guidance, see padding(_:_:). If you use background shapes to create visual content groupings, or if you display button backgrounds, you might need to use tight margins. Tight margins — which measure 11 points in width — can also help make graphics that contain information easier for people to read.
Источник
Apple human design это
The launch experience has a significant impact on the way people feel about your app. Regardless of the device people are using or how long it’s been since they last opened your app, the launch experience should be fast and seamless.
The guidelines below can help you design a delightful launch experience. For developer guidance, see Responding to the Launch of Your App.
Provide a launch screen. The system displays your launch screen the moment your app starts and quickly replaces it with your app’s first screen. The function of a launch screen is to give people the impression that your app is fast and responsive, while allowing initial content to load. To ensure a seamless transition from your launch screen, design a plain screen that resembles your first app screen and doesn’t draw attention to itself. For guidance, see Launch Screen.
Launch in the appropriate orientation. If your app supports both portrait and landscape modes, it should launch using the device’s current orientation. If your app only runs in one orientation, it should always launch in that orientation and let people rotate the device if necessary. Unless there’s a compelling reason not to, an app in landscape mode should orient itself correctly, regardless of whether the device was rotated left or right. For guidance, see Adaptivity and Layout.
Avoid asking for setup information up front. People expect apps to just work. Design your app for the majority of users and let the few that want a different configuration adjust settings to meet their needs. As much as possible, get setup information from device settings and defaults, or through a synchronization service, such as iCloud. If you must ask for setup information, prompt people to supply it the first time they open the app, and let them modify it later in your app’s settings.
Avoid showing in-app licensing agreements and disclaimers. Let the App Store display agreements and disclaimers so people can read them before downloading your app. If you must include these items within the app, integrate them in a balanced way that doesn’t disrupt the user experience.
Restore the previous state when your app restarts. Don’t make people retrace steps to reach their previous location in your app. Preserve and restore your app’s state so they can continue where they left off.
Don’t encourage rebooting. Restarting takes time and makes your app seem unreliable and hard to use. If your app has memory or other issues that make it difficult to run unless the system has just booted, you need to address those issues.
Avoid asking people to rate your app too quickly or too often. Asking for a rating soon after first launch — or too frequently while people are using your app — is annoying and likely to decrease the amount of useful feedback you receive. To encourage well-considered feedback, give people time to form an opinion about your app before asking for a rating. Always provide a way to opt out of rating prompts and never force people to rate your app.
Источник
