나만의 공부 노트
HIG - User Interaction 본문
3D Touch
지원하는 기기에 한해서, 누르는 압력을 다르게 함에 따라 다양한 기능을 수행하도록 할 수 있습니다.(= 3D Touch)
앱은 이에 대한 반응으로 context menu를 보여줄 수도 있습니다. iOS 13 이후로는 기기에 상관없이 context menu를 보여줄 수 있지만, 3D Touch를 지원하는 기기인 경우, 더욱 빨리 대응할 수도 있습니다.
Home Screen Interaction
iOS 13 이후로 앱을 길게 누르면, context menu를 보여줄 수 있습니다. context menu를 통해 특정 일을 빠르게 수행할 수 있는 기회를 제공합니다.
Live Photos
Live Photos를 이용하면 움직임과 사운드를 추가할 수 있습니다.
Apple Pencil and Scribble
애플 펜슬은 아이패드를 위한 도구로 픽셀 level의 정확도를 갖습니다. iPadOS 14 이후는, Scribble을 통해 텍스트 필드 안에 직접 필기하여 필기 인식이 텍스트로 전환해줍니다.
Support expected behaviors.
기대되는 동작을 수행할 수 있도록 지원합니다.
예를 들어 문서 구석에 필기를 할 수 있도록 말입니다.
Let people choose when to switch between Apple Pencil and finger input — don’t force them.
애플 펜슬로 쓸지, 손가락으로 입력할 지 강제하지 마세요.
애플 펜슬로 사용하고 있는지, 손가락으로 사용하는지 표시해주는 것이 혼동을 방지할 수 있습니다.
Let people make a mark the moment Apple Pencil touches the screen.
애플 펜슬이 화면을 터치하는 순간 사람들이 인지할 수 있도록 하세요.
Help people express themselves by responding to the way they use Apple Pencil.
Apple Pencil은 기울기(고도), 힘(압력) 및 방향(지무트)을 감지할 수 있습니다.
Use visual feedback to indicate a direct connection with content.
Apple Pencil을 화면에 터치하는 순간 콘텐츠를 즉시 조작하는 것처럼 보여야 합니다.
연결이 끊긴 것처럼 보이는 작업을 시작하거나 화면의 다른 부분에 있는 내용에 영향을 미치지 않아야 합니다.
Design a great left- and right-handed experience.
왼/오른 손잡이를 고려해서 컨텐츠 위치를 구성해주세요.
Whenever possible, respect the user’s settings for the double-tap gesture.
Apple Pencil 2는 직접(도구 변경) 또는 간접(색상 옵션 표시)으로 그리는 방식을 변경하여 더블 탭 제스처에 응답합니다. 두 번 탭하면 기본적으로 현재 도구와 지우개가 전환되지만, 사람들은 설정으로 이동하여 현재 도구와 이전 도구 간에 전환하거나, 색상 선택기를 표시하거나 숨기거나, 아무 작업도 하지 않도록 지정할 수 있습니다. 앱이 이러한 동작을 지원하는 경우 시스템 전체 설정을 두 번 탭하는 것을 존중하고 같은 동작에 대한 새로운 제스처를 배우지 않아도 됩니다.
Give people a way to enable custom double-tap behavior if necessary.
필요하다면 사용자가 사용자 지정 동작을 사용하도록 설정할 수 있는 컨트롤을 제공합니다.
Never use the double-tap gesture to perform an action that modifies content.
사용자가 더블 탭을 실수로 실행할 수도 있기 때문에, 컨텐츠 내용을 바꾸는 동작을 수행하지 않도록 합니다.
쉽게 되돌릴 수 있도록 만들어주는 것이 좋습니다.
Supporting Scribble
스크리블과 Apple Pencil을 사용하면 사용자는 앱에서 텍스트가 허용되는 모든 곳에 쉽게 쓸 수 있습니다. 먼저 모드를 누르거나 전환할 필요가 없습니다. 스크리블이 iPad에 완전히 통합되어 있기 때문입니다
Always make entering text feel fluid and effortless.
기본적으로 스크리블은 암호 필드를 제외한 모든 표준 텍스트 제어(예: 텍스트 필드, 텍스트 보기, 검색 필드 및 웹 콘텐츠의 편집 가능한 필드)에서 작동합니다. 앱에서 사용자 지정 텍스트 필드를 사용하는 경우, 다른 사용자가 쓰기 전에 해당 필드를 누르거나 선택하지 마십시오.
Make Scribble available everywhere people might want to enter text.
텍스트 입력이 자연스러운 곳에서 스크리블을 일관되게 사용할 수 있도록 함으로써 앱에서 이러한 인식을 강화할 수 있습니다.
Avoid distracting people while they write.
일부 텍스트 필드 동작은 Apple Pencil이 지원하는 자연스러운 쓰기 경험을 방해할 수 있습니다. 예를 들어, 자동 완성 텍스트를 텍스트 필드에 작성할 때 표시하지 않는 것이 가장 좋습니다. 또한 입력 내용이 겹치지 않도록 사용자가 쓰기를 시작하는 순간 필드의 placeholder 텍스트를 숨기는 것이 좋습니다.
While people are writing in a text field, make sure it remains stationary and its contents don’t scroll.
텍스트 필드를 쓰고 있을 때, 컨텐츠 내용을 스크롤하지 못하게 하는 것이 좋습니다. 그러나 몇몇 경우 텍스트 필드가 선택되면 텍스트 필드를 이동하는 것이 이치에 맞는 경우도 있습니다. 예를 들어, 결과를 표시할 공간을 늘리기 위해 검색 필드가 이동하는 경우입니다.
이런 움직임은 사람들이 키보드를 사용할 때는 괜찮지만, 쓸 때는 그들의 입력이 통제력을 잃은 것처럼 느끼게 할 수 있습니다.
텍스트 필드가 이동하는 것을 방지할 수 없는 경우, 사용자가 쓰기를 멈출 때까지 이동을 연기하는 것을 고려하십시오.
또한 사용자가 텍스트 필드에서 쓰고 편집하는 동안 자동 스크롤을 막는 것이 중요합니다. 기록된 텍스트에 자동 스크롤을 사용할 때, 사람들은 자동 스크롤 위에 쓰는 것을 피하려고 할 수 있습니다. 또한 Apple Pencil을 사용하여 텍스트를 선택하는 동안에 텍스트가 스크롤되면 원하는 텍스트 범위를 다르게 선택되는 문제가 발생합니다.
Give people enough space to write.
쓸 수 있는 충분한 공간을 주세요.
Providing a Custom Drawing Experience
PencilKit을 통해 메모, 그림 등을 제공합니다. 또한 앱에 사용자 지정 그리기 캔버스를 쉽게 만들 수 있으며 최첨단 도구 선택 도구 및 잉크 팔레트를 제공합니다.
Help people draw on top of existing content.
기본적으로, 펜슬킷 캔버스의 색상은 다크 모드로 동적으로 조정되므로, 두 모드 모두에서 콘텐츠를 만들 수 있습니다. 하지만 PDF나 사진과 같은 기존 콘텐츠 위에 그림을 그릴 때 색상의 동적 조정을 방지하는 것이 좋습니다.
Make sure the tool picker doesn’t obscure content when your app runs in a compact environment.
일반 환경에서는 도구 선택기가 내용 위로 이동하므로 사용자가 이동하지 않을 수 있지만, 압축 환경에서는 도구 선택기가 화면 아래쪽 가장자리에 고정된 상태로 유지됩니다. 사용자의 내용을 방해하지 않도록 하려면 컨텐츠 뷰의 프레임 또는 스크롤 뷰의 inset을 통해 도구 선택기의 높이를 고려하도록 조정할 수 있습니다.
Consider providing custom undo and redo buttons to display when your app runs in a compact environment.
regular 환경에서는 도구 선택기에 실행 취소 및 다시 실행 단추가 포함되지만, compact 환경에서는 그렇지 않습니다. compact 환경에서는 네비게이션 바에 사용자 지정 버튼을 표시할 수 있습니다. 또한 모든 환경에서 사용할 수 있도록 표준 3손가락 실행 취소/다시 실행 제스처를 지원하는 것도 고려할 수 있습니다.
Audio
아이폰과 아이패드는 내부 또는 외부 스피커, 헤드폰을 통해 오디오를 재생할 수 있고 블루투스 또는 에어플레이 지원 장치를 통해 무선으로 오디오를 재생할 수 있습니다. 사람들은 볼륨 버튼, 링/사일런트 스위치, 헤드폰 컨트롤, 컨트롤 센터 볼륨 슬라이더 및 타사 액세서리의 사운드 컨트롤을 포함하여 여러 종류의 컨트롤을 사용하여 장치의 소리를 조작합니다. 사운드가 앱 경험의 주요 부분이든 장식이든 간에, 여러분은 앱 사운드가 어떻게 행동해야 하는지에 대한 사람들의 기대를 충족시킬 필요가 있다.
Silence
사람들은 벨소리나 수신 메시지 톤과 같은 예상치 못한 소리에 방해받지 않으려면 단말기를 무음으로 전환한다. 이 시나리오에서는 키보드 클릭, 음향 효과, 게임 사운드 트랙 및 기타 청각 피드백과 같은 중요하지 않은 소리를 지우고자 한다. 장치가 자동 모드인 경우 미디어 재생, 경보 및 오디오/비디오 메시징과 같이 사용자가 명시적으로 시작한 오디오만 재생해야 합니다.
Volume
사람들은 방법에 관계없이 볼륨 설정이 음악 및 앱 내 사운드 효과를 포함하여 시스템의 모든 사운드에 영향을 미칠 것으로 예상합니다. 링거 볼륨은 예외로 설정 시 사용자가 별도로 조정할 수 있습니다.
Headphones
사람들은 헤드폰을 사용해서 listening을 오직 자신만이 들으려 합니다. 헤드폰을 연결할 때 사용자는 소리가 중단 없이 자동으로 리디렉션될 것으로 예상하며 헤드폰을 분리하면 재생이 즉시 일시 중지될 것으로 예상합니다.
Designing a Great Audio Experience
Adjust levels automatically when necessary — don’t adjust the overall volume.
볼륨을 조절할 수 있지만, 시스템 볼륨의 크기를 고려해야합니다.
Permit rerouting of audio when possible.
오디오를 리라우팅할 수 있도록 설정하십시오.
Use the system-provided volume view to let people make audio adjustments.
시스템이 제공하는 볼륨 뷰를 사용하여 사용자가 오디오를 조절할 수 있게 해주세요.
Use the system’s sound services to play short sounds and vibrations.
시스템 사운드와 진동을 사용하십시오.
Choose an audio category that fits the way your app uses sound.
선택한 오디오 카테고리에 따라 앱의 사운드가 다른 오디오와 혼합되거나, 앱이 백그라운드에 있는 동안 재생되거나, 사용자가 벨소리/음소거 스위치를 무음으로 설정할 때 중지될 수 있습니다. 가능한 한 앱이 사람들의 기대에 부응할 수 있도록 돕는 카테고리를 선택하십시오.
CategoryMeaningBehavior
Solo ambient | Sound isn’t essential, but it silences other audio. For example, a game with a soundtrack. | Responds to the silence switch. Doesn’t mix with other sounds. Doesn’t play in the background. |
Ambient | Sound isn’t essential, and it doesn’t silence other audio. For example, a game that lets people play music from another app during gameplay in place of the game’s soundtrack. | Responds to the silence switch. Mixes with other sounds. Doesn’t play in the background. |
Playback | Sound is essential and might mix with other audio. For example, an audiobook or educational app that teaches a foreign language, which people might want to listen to after leaving the app. | Doesn’t respond to the silence switch. May or may not mix with other sounds. Can play in the background. |
Record | Sound is recorded. For example, a note-taking app that offers an audio recording mode. An app of this nature might switch its category to playback if it lets people play the recorded notes. | Doesn’t respond to the silence switch. Doesn’t mix with other sounds. Can record in the background. |
Play and record | Sound is recorded and played, potentially simultaneously. For example, an audio messaging or video calling app. | Doesn’t respond to the silence switch. May or may not mix with other sounds. Can record and play in the background. |
When an interruption ends, determine whether to resume audio playback automatically.
때때로 다른 앱의 오디오가 사용자의 앱이 재생 중인 오디오를 방해할 수 있습니다. 수신 전화와 같이 중단이 다시 시작되거나 사용자가 새 음악 재생 목록을 시작할 때처럼 다시 시작할 수 없습니다. 중단 유형 및 앱 유형을 사용하여 자동으로 재생을 재개할지 여부를 결정합니다.
Ensure your VoIP app responds correctly to audio-session interruptions.
특히 내장 마이크를 사용하는 동안 iPad의 Smart Folio앱을 닫을 때 통화를 종료하는 것이 중요합니다. Smart Folio를 닫으면 iPad 마이크가 자동으로 음소거되고 기본적으로 연결된 오디오 세션이 중단됩니다. 사용자가 SmartFolio를 다시 열 때 오디오 세션을 다시 시작하면 사용자가 모르는 사이에 마이크를 다시 활성화하여 개인 정보를 침해할 위험이 있습니다. 오디오 세션 중단을 검사하여 올바른 응답 방법을 결정할 수 있습니다.
Let other apps know when your app finishes playing temporary audio.
앱이 다른 앱의 오디오를 일시적으로 중단시킬 수 있는 경우 다른 앱이 언제 다시 시작할 수 있는지 알 수 있도록 오디오 세션에 플래그를 표시하십시오.
Respond to audio controls only when it makes sense.
사용자는 앱이 화면 앞이나 배경에 상관없이 Control Center에서나 헤드폰에 있는 컨트롤과 같은 앱 인터페이스 외부에서 오디오 재생을 제어할 수 있습니다. 앱이 오디오와 관련된 명확한 컨텍스트에서 오디오를 재생하고 있거나 Bluetooth 또는 AirPlay 지원 장치에 연결되어 있는 경우 오디오 컨트롤에 응답하는 것이 좋습니다. 그렇지 않으면 사용자가 컨트롤을 활성화할 때 앱이 현재 재생 중인 다른 앱의 오디오를 중지하지 않아야 합니다.
Don’t repurpose audio controls.
사람들은 모든 앱에서 오디오 컨트롤이 일관성 있게 동작할 것으로 예상하므로 앱에서 오디오 컨트롤의 의미를 다시 정의해서는 안 됩니다. 앱이 특정 컨트롤을 지원하지 않으면 해당 컨트롤에 응답하지 마십시오.
Authentication
사용자에게 개인 설정, 기능 액세스, 콘텐츠 구입 또는 데이터 동기화와 같은 기능을 수행할 때만 인증하도록 요청합니다. 앱에 인증이 필요한 경우 Apple로 로그인을 사용하여 간편하고 안전하게 로그인할 수 있습니다. Apple로 로그인을 지원하면 신뢰할 수 있는 일관된 로그인 경험과 여러 계정 및 암호를 기억하지 않아도 되는 편리함을 얻을 수 있습니다.
Apple에서 로그인을 사용하지 않는 경우 암호 자동 채우기를 사용하십시오..
Delay sign-in as long as possible.
Explain the benefits of authentication and how to sign up for your service.
Minimize data entry by showing appropriate keyboards.
Never use the term passcode.
passcode = 4자리 비밀번호
패스코드는 생체 인증이 비활성화된 경우 사용자의 iOS 기기의 잠금을 해제하고 Apple Pay로 인증하는 데 사용됩니다.
Face ID and Touch ID
Whenever possible, support biometric authentication.
Present people with a single way to authenticate.
인증 방법을 선택할 필요가 없을 때 가장 직관적입니다.. 초기 방법이 실패할 경우에만 사용자 이름 및 암호 요청과 같은 대안을 제시합니다.
Initiate authentication only in response to user action.
단추를 누르는 것과 같은 명시적 수행을 통해 사용자가 인증할 수 있습니다. 얼굴 ID의 경우 사용자가 카메라를 마주 보고 있을 가능성도 증가합니다.
Always identify the authentication method.
A button for signing in to your app using Face ID, for example, should be titled "Sign In with Face ID" rather than "Sign In."
Reference authentication methods accurately.
Don't reference Touch ID on a device that supports Face ID. Conversely, don't reference Face ID on a device that supports Touch ID. Check the device's capabilities and use the appropriate terminology.
In general, avoid offering a setting for opting in to biometric authentication within your app.
일반적으로 앱 내부에서 생체 인증 사용 여부를 사용하지 마십시오. 시스템 셋팅에서 생체 인증을 활성화한 경우 그대로 시스템 값을 사용합니다. 그렇지 않는다면 시스템 값의 생체 인증은 불가능이지만, 앱이 생체 인증이 가능하다고 여기는 경우가 발생합니다.
Don't use icons to identify system authentication features.
인증 시 아이콘을 사용하지 마십시오. 인증이 필요하다고 사용자가 느끼거나, 혼동을 초래할 수 있습니다.
Data Entry
유용한 기능을 사용하기도 전에 너무 많은 입력을 요구하면 사용자가 쉽게 앱을 떠날 수 있습니다.
When possible, present choices.
응답을 입력하는 것보다 미리 정의된 옵션 목록에서 선택하는 것이 더 쉬우므로 텍스트 필드 대신 선택 도구나 테이블을 사용하는 것이 좋습니다.
Get information from the system whenever possible.
연락처 또는 일정관리 정보와 같은 정보를 제공하도록 강요하지 마십시오.
Provide reasonable default values.
가능한 범위까지 가능한 값이 가장 많은 필드를 사전에 채우십시오. 우수한 기본값을 제공하면 의사 결정을 최소화하고 프로세스 속도를 높일 수 있습니다.
Enable advancement only after collecting required values.
[다음] 또는 [계속] 단추를 활성화하기 전에 모든 필수 필드에 값이 있는지 확인합니다. 버튼의 활성화는 이제 진행해야 할 때라는 시각적 신호로 사용합니다.
Dynamically validate field values.
가능하면 입력 직후 필드 값을 확인하여 사용자가 바로 수정할 수 있도록 합니다.
Require field values only when necessary.
Use required fields only for information that is truly necessary to proceed.
Ease navigation through value lists.
Especially in tables and pickers, it should be easy to pick a value. Consider sorting value lists alphabetically or in another logical manner that facilitates speedy scanning and selection.
Show a hint in a text field to help communicate purpose.
A text field can contain placeholder text—such as "Email" or "Password"—when there’s no other text in the field. Don’t use a separate label to describe a text field when placeholder text is sufficient.
Drag and Drop
Touching and holding selected content makes it appear to rise and adhere to the user's finger. As the content is dragged, animations and visual cues identify possible destinations. The system also displays a badge that indicates when dropping isn’t possible, or will result in duplicating the content rather than moving it.
Sources and Destinations
Drag and drop involves moving selected content from a source location to a destination. These locations can be in the same container, like a text view, or in different containers, like text views on opposite sides of a split view. In Notes, for example, the user can drag selected text to a new location within the same note. In Reminders, the user can drag individual reminders out of one list and drop them into another.
On iPad, source and destination locations can also exist in different apps, enabling cross-app interactions like dragging a photo from a webpage in Safari to a new message in Mail. While dragging content, the user can access another app through multitasking, exiting to the Home screen, or swiping up from the bottom of the screen to reveal the Dock.
Supporting Drag and Drop
Drag and drop is an efficient, intuitive feature that users expect to be implemented pervasively throughout the system. If your app includes or produces text, photos, video, audio, or other content that people might want to move, copy, or insert, your app should support drag and drop.
Make drag and drop available for all selectable and editable content.
Allow content to be dropped on controls when applicable.
Use standard text views and text fields whenever possible.
For greater efficiency, consider supporting multi-item drag and drop.
In many apps, the user can drag a single item with one finger, and while dragging, select additional items by tapping them with another finger. The selected items move together and appear stacked beneath the finger that's dragging the original item. The user then drags the items as a group and drops them over the desired destination.
Determine whether dragging and dropping content within your app should result in a move or a copy.
Whenever possible, let people undo drag and drop.
Consider enabling spring loading.
With spring loading, users can activate certain controls, like buttons and segmented controls, by dragging selected content over them and pausing briefly without dropping the content. For example, in Mail, selected messages can be dragged onto the navigation bar’s Back button to reach other locations in the mailbox hierarchy. Never make spring loading the only way to activate a control. Use it as an embellishment that can be discovered. In most cases, a spring-loaded control should also respond to a tap gesture. For developer guidance, see UISpringLoadedInteraction.
Providing Dragged Content
Customize the drag item preview if necessary.
일반적으로 사용자의 손가락 아래에 표시되는 미리 보기는 끌어오는 내용을 반투명하게 표현해야 합니다. 이 모양은 컨텍스트를 제공하고, 드래그가 진행 중임을 나타내며, 사용자가 드래그한 콘텐츠 아래에 대상을 볼 수 있도록 합니다.
Whenever possible, offer multiple representations of dragged data, ordered from highest to lowest fidelity.
예를 들어, 라인 아트를 제공할 때 앱은 PDF 벡터 표현, 투명성을 가진 무손실 PNG 이미지, 투명성 없는 손실 JPEG 이미지를 순서대로 제공할 수 있습니다. 이렇게 하면 목적지가 가져올 수 있는 최고 품질의 표현을 선택할 수 있습니다.
When applicable, present native versions of custom objects as the richest form of data.
예를 들어, 차트를 끌 수 있는 앱은 먼저 기본 차트 개체를 제시해야 합니다. 그런 다음 차트 개체를 지원하지 않는 앱에 대해 차트의 이미지 버전과 같은 대안을 제공해야 합니다.
Implement a file provider extension when the transfer of your app’s content is time consuming or resource intensive.
FileProviderExtension은 전송 프로세스를 관리하고 앱이 더 이상 실행되지 않더라도 전송 프로세스를 완료하도록 보장합니다.
Supply progress information when your app’s content needs time to transfer.
Accepting Dropped Content
Use visual cues to identify potential destinations and preview the effect of dropping content.
강조 표시, 삽입 지점 표시기 및 애니메이션은 모두 가능한 목적지를 식별하는 좋은 방법입니다. 뷰 위로 콘텐츠를 끌어다 놓으면서 뷰가 은은하게 깜박이고 색상이 변경되거나 단락이 따로 이동하여 드래그한 이미지를 저장할 공간을 만들 수 있습니다. 화면에 둘 이상의 목적지가 있을 경우 한 번에 하나씩 식별합니다. 원본과 대상 컨테이너가 동일한 경우 내용을 소스 밖으로 완전히 끌어낸 다음 다시 입력하지 않는 한 강조 표시는 불필요할 수 있습니다. 콘텐츠가 삭제되거나 더 이상 대상 위에 배치되지 않을 때 강조 표시가 제거되었는지 확인합니다.
Automatically scroll the contents of a destination when appropriate.
콘텐츠를 대상 범위 밖으로 끌면 앱에서 대상 콘텐츠를 스크롤할지 아니면 사용자가 완전히 다른 대상으로 계속 끌 수 있도록 허용할지 결정해야 할 수 있습니다. 앱에서 사용자가 계속 끌 수 있는 경우, 드래그한 항목이 위에 위치할 때 자동 스크롤을 유발하는 영역을 정의하는 것을 고려하십시오. 예를 들어, 메일의 긴 초안 메시지는 내용을 본문 영역의 맨 위 또는 맨 아래로 끌 때 자동으로 스크롤됩니다. Standard text views and text fields는 자동으로 이 동작을 수행합니다.
Extract and display the richest possible representation of dropped content.
예를 들어, 앱에 차트가 여러 개 표시될 수 있습니다. 앱이 차트를 지원하는 경우 기본 차트 개체를 추출하여 표시할 수 있습니다. 앱이 차트를 지원하지 않는 경우 차트의 이미지 버전을 추출하여 표시할 수 있습니다.
When applicable, extract only the relevant portion of dropped content.
예를 들어, 사용자가 연락처에서 메일 메시지의 수신인 필드로 연락처를 끌어다 놓으면 연락처의 주소 정보가 아닌 이름과 전자 메일 주소만 사용됩니다.
Show placeholders in table views and collection views after content is dropped.
Placeholders temporarily indicate where the content will reside once it finishes transferring.
Show progress when dropped content needs time to transfer.
Provide feedback when dropped content initiates a process.
Inform the user when dropping fails.
Apply appropriate styling to dropped text.
When the source and destination support the same styled text attributes, dropped text should maintain its original font, typeface, size, and other attributes. Otherwise, dropped text should adopt the destination’s style.
Consider providing a subtle, intuitive way to opt out when the user can't immediately undo drag and drop.
A sharing app, for example, might present an intermediate share sheet before posting dropped content. This share sheet could offer a way to supply additional content like a status message, while also offering a cancellation button. Photos exhibits this behavior when a photo is dragged into a shared photo stream.
'iOS HIG' 카테고리의 다른 글
HIG - App Architecture (0) | 2021.03.18 |
---|---|
HIG - iOS (0) | 2021.03.18 |