By creating screenshots to display on your website or in emails, you can show customers the benefits of using Messages for Business to communicate with your company.
웹 사이트나 전자 메일에 표시할 스크린샷을 만들면 기업용 메시지를 사용하여 회사와 통신할 때의 이점을 고객에게 보여줄 수 있습니다.
Although you can create custom screenshots from scratch, the easiest method is to download the Messages for Business templates from Apple Design Resources and edit them as needed. These templates include components — such as a message list, conversation view, time picker, and list picker — and symbols. You can also download an iPhone 11 Pro device frame in which to display the screenshots.
처음부터 사용자 정의 스크린샷을 만들 수 있지만 가장 쉬운 방법은 Apple Design Resources에서 비즈니스용 메시지 템플릿을 다운로드하고 필요에 따라 편집하는 것입니다. 이러한 템플리트에는 메시지 목록, 대화 보기, 시간 선택기 및 목록 선택기와 같은 구성요소와 기호가 포함됩니다. 스크린샷을 표시할 iPhone 11 Pro 장치 프레임도 다운로드할 수 있습니다.
Regardless of how you choose to create your screenshots, ensure that they look good and depict conversations accurately. To help make screenshots look realistic, use SF Pro Regular for conversation text (you can download the San Francisco family of fonts here).
스크린샷을 만드는 방법에 상관없이 스크린샷이 잘 나타나는지 확인하고 대화를 정확하게 묘사하십시오. 스크린샷이 사실적으로 보이도록 하려면 대화 텍스트에 SF Pro Regular를 사용하십시오(San Francisco 글꼴 제품군을 다운로드할 수 있음).
The system-provided status bar appears at the top edge of the screen and displays information like current time, cellular carrier, network connection status, and battery level. The status bar’s background is transparent by default, and the information it displays can be light or dark, depending on the appearance of the content behind it. It’s important to include the status bar in the screenshots you create, because people expect to see it in a messaging experience.
시스템 제공 상태 표시줄은 화면 상단 가장자리에 나타나며 현재 시간, 셀룰러 캐리어, 네트워크 연결 상태 및 배터리 수준과 같은 정보를 표시합니다. 상태 표시줄의 배경은 기본적으로 투명하며, 배경에 있는 내용의 모양에 따라 표시되는 정보가 밝거나 어두울 수 있습니다. 사람들은 상태 표시줄을 메시징 환경에서 볼 것으로 예상하기 때문에 상태 표시줄을 생성하는 스크린샷에 포함하는 것이 중요합니다.
For consistency, use the following values in every status bar you create:
일관성을 유지하려면 생성하는 모든 상태 표시줄에서 다음 값을 사용하십시오:
-
Time is 9:41. Use SF Pro Regular and don’t add a.m. or p.m.
-
시간은 9시 41분이다. SF Pro Regular를 사용하고 오전이나 오후를 추가하지 마십시오.
-
Cellular and Wi-Fi icons show maximum connectivity.
-
셀룰러 및 Wi-Fi 아이콘은 최대 연결을 표시합니다.
-
Battery is full and doesn’t include the charging glyph.
-
배터리가 가득 찼고 충전 글리프가 포함되지 않았습니다.
탐색 모음 및 메시지 헤더
The navigation bar — which contains the Messages header — extends to the top of the screen. The system composites the status bar on top of the navigation bar, which lets the navigation bar’s background color show through. You can use the same custom colors for the navigation bar background and buttons as you use in the rest of your Messages for Business UI. For guidance, see Color.
메시지 헤더가 포함된 탐색 모음은 화면 상단까지 확장됩니다. 시스템은 탐색 모음 상단에 상태 표시줄을 합성하여 탐색 모음의 배경색을 표시합니다. 비즈니스용 메시지 UI의 나머지 부분에서 사용하는 것과 동일한 사용자 지정 색상을 탐색 모음 배경 및 단추에 사용할 수 있습니다. 자세한 내용은 색상을 참조하십시오.
To make your screenshots look realistic, include these items in your navigation bar and Messages header:
스크린샷을 사실적으로 보려면 탐색 모음과 메시지 헤더에 다음 항목을 포함하십시오:
-
A back button at the far left
-
맨 왼쪽에 있는 뒤로 버튼
-
An Info button at the far right
-
맨 오른쪽에 있는 정보 버튼
-
Your company logo centered between the back and Info buttons
-
뒤로 단추와 정보 단추 사이에 있는 회사 로고
-
Your company name, followed by a transparent checkmark inside a white or black circle, centered below the logo
-
로고 아래 가운데 흰색 또는 검은색 원 안에 투명한 체크 표시가 있는 회사 이름
Use a maximum height of 27 pixels for your logo and 14 pixels for your company name and checkmark. Your navigation bar and Messages header should look something like this:
로고에는 최대 27픽셀, 회사 이름 및 체크 표시에는 최대 14픽셀을 사용합니다. 탐색 모음과 메시지 헤더는 다음과 같이 표시되어야 합니다:
Message bubbles appear in the conversation area of the Messages app screen. All conversation content, including text, links, and images, must appear within message bubbles.
메시지 버블은 메시지 앱 화면의 대화 영역에 나타납니다. 텍스트, 링크 및 이미지를 포함한 모든 대화 내용은 메시지 버블 내에 표시되어야 합니다.
To help people understand the flow of the conversation in your screenshot, it’s important to be consistent about how you use message bubbles to represent the participants. Use the following values for the bubble background color, the direction of its tail, and the text color. Use SF Pro Regular for all text.
스크린샷의 대화 흐름을 사람들이 이해할 수 있도록 하려면 메시지 버블을 사용하여 참가자를 나타내는 방법에 대해 일관성을 유지하는 것이 중요합니다. 버블 배경색, 꼬리 방향 및 텍스트 색상에 다음 값을 사용합니다. 모든 텍스트에 SF Pro Regular를 사용합니다.
| Participant | Background color | Tail direction | Text color |
|---|---|---|---|
| Customer | #848E99 | Right | White |
| Agent | #E6E5EB | Left | Black |
If you show only two message bubbles, use 4 points of vertical space to separate them. If you need to show more message bubbles, or more than one Send action, use 1 pixel to separate bubbles.
두 개의 메시지 버블만 표시하는 경우, 세로 공간의 4개 점을 사용하여 버블을 구분합니다. 메시지 버블을 더 많이 표시하거나 둘 이상의 보내기 동작을 표시해야 하는 경우 1픽셀을 사용하여 버블을 구분합니다.
For a message bubble that contains only text, use the following values to determine its height.
텍스트만 포함하는 메시지 버블의 경우 다음 값을 사용하여 높이를 결정합니다.
| Rows of text | Message bubble height (pixels) |
|---|---|
| 1 | 36 |
| 2 | 57 |
| 3 | 76 |
| 4 | 96 |
| 5 | 118 |
For guidance on creating realistic conversations, see Automated messaging.
실제 대화 작성에 대한 지침은 자동 메시징을 참조하십시오.
You might also want your screenshot to show message bubbles that include icons or rich links that display images or videos. When a message bubble includes a rich link, the title and the website URL appear below the image or video. An icon appears by itself in a message bubble. If you want to include images or icons in your message bubbles, use the following values to determine the bubble’s size.
또한 스크린샷에 이미지 또는 비디오를 표시하는 아이콘 또는 리치 링크가 포함된 메시지 버블이 표시되도록 할 수도 있습니다. 메시지 버블에 리치 링크가 포함되어 있으면 제목과 웹 사이트 URL이 이미지 또는 비디오 아래에 나타납니다. 메시지 버블에 아이콘이 자동으로 나타납니다. 메시지 버블에 이미지 또는 아이콘을 포함하려면 다음 값을 사용하여 버블의 크기를 결정하십시오.
| Content | Maximum content size (pixels) | Message bubble size (pixels) |
|---|---|---|
| Image (with tail) | Large (265x160) | 270x210 |
| Image (without tail) | Large (265x160) | 265x210 |
| Image (with tail) | Extra large (276x160) | 280x210 |
| Icon | Medium (280x85) | 280x85 |
| Icon | Small (60x33) | 280x65 |
The compose area appears below the conversation area and above the keyboard, if one is present. From the left, the compose area includes a camera button and an apps button, followed by a text input field, which contains placeholder text and the microphone glyph. Use To: MyCompanyNamefor the placeholder text and use dark gray (#868E99) for the microphone glyph.
작성 영역은 대화 영역 아래와 키보드(있는 경우) 위에 나타납니다. 왼쪽부터 작성 영역에는 카메라 버튼과 앱 버튼, 자리 표시자 텍스트와 마이크 글리프가 포함된 텍스트 입력 필드가 있습니다. 자리 표시자 텍스트에는 수신인: 내 회사 이름을 사용하고 마이크 글리프에는 어두운 회색(868E99)을 사용합니다.
If you want to include the keyboard in your screenshot, add the blue typing indicator to the text input field, using #007AFF for the color. If you also want to show what the customer is typing, move the typing indicator to the right of the input text and replace the microphone glyph with the Send button.
스크린샷에 키보드를 포함하려면 007을 사용하여 텍스트 입력 필드에 파란색 입력 표시기를 추가합니다색상에 대한 AFF. 고객이 무엇을 입력하는지도 표시하려면 입력 텍스트의 오른쪽으로 입력 표시기를 이동하고 마이크 글리프를 보내기 단추로 바꿉니다.
