Widgets

A widget is an extension that displays a small amount of timely, useful information or app-specific functionality. For example, the News widget shows top headlines. Calendar provides two widgets, one that shows today’s events and one that shows what’s up next. Notes lets you preview recent notes and quickly create new notes, reminders, photos, and drawings. Widgets are highly customizable and can contain buttons, text, layout customizations, images, and more.

위젯은 소량의 시기적절하고 유용한 정보 또는 앱 별 기능을 표시하는 확장 기능입니다. 예를 들어 뉴스 위젯은 주요 헤드라인을 표시합니다. 캘린더는 오늘의 이벤트를 보여 주는 위젯과 다음 작업을 보여주는 위젯 두 가지를 제공합니다. Notes를 사용하여 최근 노트를 미리 보고 새 노트, 미리 알림, 사진 및 그림을 빠르게 작성할 수 있습니다. 위젯은 사용자 지정이 용이하며 단추, 텍스트, 레이아웃 사용자 지정, 이미지 등을 포함할 수 있습니다.

Widgets appear above the quick action list when you apply pressure to an app icon on the Home screen using 3D Touch. People also add the widgets they care about to the Search screen, which is accessed by swiping to the right on the Home screen and the Lock screen. Your goal should be to design a widget that people want to add to the Search screen.

3D Touch를 사용하여 홈 스크린의 앱 아이콘에 압력을 가하는 경우 위젯이 빠른 작업 목록 위에 나타납니다. 또한 홈 스크린과 잠금 화면의 오른쪽으로 스윕하여 액세스하는 검색 화면에 위젯을 추가합니다. 검색 화면에 추가할 위젯을 설계하는 것이 목표여야 합니다.

Search screen widgets

Home screen quick action widget

Design a great glanceable experience. People use widgets to get brief updates and perform very simple tasks, so it’s essential to deliver the right amount of information and interactivity. Wherever possible, provide tasks that can be completed in a single tap. Panning and scrolling within widgets isn’t supported.

훌륭한 눈에 띄는 경험을 디자인 하십시오. 사람들은 위젯을 사용하여 간단한 업데이트를 받고 매우 간단한 작업을 수행하므로 적절한 양의 정보와 상호 작용을 제공하는 것이 필수적입니다. 가능하다면 한 번에 완료 할 수있는 작업을 제공하십시오. 위젯 내에서의 이동 및 스크롤은 지원되지 않습니다.

Show content quickly. People spend very little time looking at widgets and shouldn’t need to wait for content to load. Cache information locally so you can always show recent information while getting updates.

컨텐츠를 빠르게 보여주십시오. 사람들은 위젯을 보는 데 거의 시간을 소비하지 않으며 컨텐츠가 로드될 때까지 기다릴 필요가 없습니다. 업데이트를 가져오는 동안 항상 최신 정보를 표시할 수 있도록 정보를 로컬로 캐시합니다.

Provide ample margins and padding. Avoid extending content to the edges of a widget. In general, provide a margin of at least a few pixels between each edge and the content. Use the app icon at the top of your widget for alignment guidance. Content tends to work well when lined up with the center of this icon. If your app offers a grid-style layout, make sure you provide sufficient and equal padding between grid items. If possible, limit grids of icons and buttons to four per row.

확실한 여백과 패딩을 제공하십시오. 컨텐츠를 위젯 가장자리로 확장하지 마십시오. 일반적으로 각 가장자리와 컨텐츠 사이에 최소 몇 픽셀의 여백을 제공합니다. 정렬 안내는 위젯 상단에 있는 앱 아이콘을 사용하십시오. 컨텐츠는 이 아이콘의 가운데와 정렬할 때 잘 작동하는 경향이 있습니다. 앱에서 그리드 스타일 레이아웃을 제공하는 경우 그리드 항목 간에 충분한 패딩을 제공해야 합니다. 가능한 경우 아이콘 및 버튼 그리드를 행당 4개로 제한합니다.

Be adaptable. The width of a widget varies, depending on the device and orientation. The height and information displayed by a widget depends on whether it’s collapsed or expanded (not all widgets support expansion). A collapsed widget is the height of roughly two and a half table rows. An expanded widget is ideally no taller than the height of the screen. The quick action list only shows widgets in a collapsed state. When collapsed, a widget shows essential information that can stand alone. When expanded, a widget shows additional information that enhances the primary information. The Weather widget, for example, shows the current weather conditions when collapsed, but adds the hourly forecast when expanded.

적응형이 되십시오. 위젯의 폭은 디바이스 및 방향에 따라 달라집니다. 위젯이 표시하는 높이와 정보는 축소 또는 확장 여부에 따라 달라집니다(모든 위젯이 확장을 지원하는 것은 아님). 축소된 위젯은 약 2개 및 1/2개의 테이블 행의 높이입니다. 확장된 위젯은 이상적으로는 화면 높이보다 크지 않습니다. 빠른 액션 목록에는 축소 상태의 위젯만 표시됩니다. 축소된 경우 위젯은 단독으로 수행할 수 있는 필수 정보를 보여 줍니다. 확장하면 기본 정보를 향상시키는 추가 정보가 위젯에 표시됩니다. 예를 들어 날씨 위젯은 축소 시 현재 날씨 상태를 표시하지만 확장 시 시간당 예측값을 추가합니다.

Avoid customizing the background of a widget. The light, blurred widget background provided by the system is designed for consistency and legibility. Use it whenever possible. Never use a photo as a background, as it may clash with the Lock and Home screen wallpaper.

위젯의 배경을 사용자 정의하지 마십시오. 시스템이 제공하는 밝고 흐린 위젯 배경은 일관성과 읽기 쉽도록 설계되었습니다. 가능할 때마다 사용하십시오. 잠금 및 홈 화면 배경 화면과 충돌 할 수 있으므로 사진을 배경으로 사용하지 마십시오.

In general, use the system font in black or dark gray for text. The system font is designed for legibility, and dark colors work well with the standard widget background.

일반적으로 텍스트는 검은색 또는 회색의 시스템 폰트를 사용하십시오. 시스템 글꼴은 읽기 쉽도록 설계되었으며 어두운 색상은 표준 위젯 배경과 잘 작동합니다.

When appropriate, let people jump to your app to do more. Your widget should operate independently from your app. However, if people might occasionally need to do more than what your widget offers, make it easy to do so. Don’t include an “Open App” button that takes space away from your content. Instead, let people tap the content itself to see or edit it in your app. In the Calendar widget, for example, you can tap an event to open it in the Calendar app. Never use your widget to open other apps.

적절한 경우 사람들이 앱으로 가서 더 많은 일을 할 수있게 하십시오. 위젯은 앱과 독립적으로 작동해야합니다. 그러나 사람들이 종종 위젯이 제공하는 것 이상을 수행할 필요가 있는 경우 쉽게 그렇게 할 수 있습니다. 콘텐츠의 공간을 차지하는 "Open App" 버튼을 포함하지 마십시오. 대신 사용자가 앱에서 내용을 보거나 편집할 수 있습니다. 예를 들어 일정관리 위젯에서 이벤트를 눌러 일정관리 앱에서 열 수 있습니다. 위젯을 사용하여 다른 앱을 열지 마십시오.

Pick a good widget name. An app icon and a title appear above each widget’s content. In general, your widget’s name should match your app’s name. If your app offers multiple widgets, consider using your app name for the primary one and clear, concise names for the others. If you use custom titles, consider prefixing them with your app name. For example, the Maps widget for showing nearby locations is titled Maps Nearby. The inclusion of your app name instills confidence that the widget is in fact provided by your app.

좋은 위젯 이름을 고르십시오. 각 위젯의 컨텐츠 위에 앱 아이콘과 제목이 나타납니다. 일반적으로 위젯의 이름은 앱의 이름과 일치해야합니다. 앱에서 여러 위젯을 제공하는 경우 기본 위젯에 앱 이름을 사용하고 다른 위젯에 대해 명확하고 간결한 이름을 사용하는 것을 고려합니다. 사용자 지정 제목을 사용하는 경우, 해당 제목을 앱 이름으로 접두사를 지정하는 것이 좋습니다. 예를 들어, 근처의 위치를 표시하기 위한 맵 위젯의 제목은 Maps Nearby입니다. 앱 이름을 포함하면 위젯이 실제로 앱에서 제공된다는 확신을 갖게 됩니다.

Let people know when authentication adds value. If your widget provides additional functionality when someone is logged into your app, make sure people know about this. For example, an app that shows upcoming reservations might include a message that says “Sign into the app to view your reservations.” when people aren’t logged in.

인증이 가치를 더할 때 사람들에게 알리십시오. 누군가가 앱에 로그인했을 때 위젯이 추가 기능을 제공한다면, 사람들이 이 사실을 알도록하십시오. 예를 들어 예정된 예약을 표시하는 앱에는 사람들이 로그인하지 않은 경우 "앱에 로그인하여 예약보기"라는 메시지가 포함될 수 있습니다.

Choose a widget for the quick action list. If your app has multiple widgets, pick one to appear in the quick action menu that appears when someone applies pressure to your app icon on the Home screen using 3D Touch.

빠른 액션 목록을 위한 위젯을 선택하십시오. 앱에 여러 위젯이있는 경우 누군가가 3D Touch를 사용하여 홈 화면의 앱 아이콘에 압력을 가했을 때 표시되는 빠른 액션 메뉴에 하나를 선택하여 표시하십시오.

For developer guidance, see App Extension Programming Guide.

Widgets - Extensions - iOS - Human Interface Guidelines - Apple Developer