[AHIG] iOS - Themes

 

이 글은 Apple Human Interface Guidelines를 참고하여 작성하였습니다.

작성자 : 안동현

 

iOS Design Themes

---

As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality.

앱 디자이너로서, 여러분은 앱스토어 차트에서 상위권에 오르는 특별한 제품 (애플 앱스토어 사이트에서도 제품으로 표시하더군요, 앱이라 생각하면 편할 듯 합니다)을 제공할 기회를 가지게 됩니다. 그러기 위해서는 품질과 기능에 대한 높은 기대를 만족시킬 수 있어야겠죠.

 

 

Three primary themes differentiate iOS from other platforms:

다음은 iOS를 다른 플랫폼과 차별화하는 세 가지 주된 테마에 대한 이야기입니다.

 

• Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.
• Deference. Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. Content typically fills the entire screen, while translucency and blurring often hint at more. Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.
• Depth. Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.

 

1. 명료함. 시스템 전체적으로 글씨는 각각의 모든 크기에서 읽을 수 있고, 아이콘은 정확하고 명료하면서, 장식은 섬세하고 적절하며, 기능에 명확히 집중했다는 사실은 디자인에 동기를 부여합니다. 네거티브 스페이스(미술에서 여백으로 이미지를 표현하는 기법), 색, 글꼴, 그래픽과 인터페이스 요소는 미묘하게 중요한 컨텐츠를 강조하고 상호 작용성을 전달합니다. 

 

- 네거티브 스페이스가 어떤 것을 의미하는지 궁금하게 만드네요. apple이 네거티브 스페이스로 표현한 UI가 어떤 것이 있을까요?

 

 

2. 존중. 흐르는 듯한 움직임과 바삭하고 아름다운 인터페이스는 사용자가 콘텐츠와 씨름하지 않으면서도 콘텐츠를 이해하고 상호작용할 수 있도록 도와줍니다. 콘텐츠는 일반적으로 화면 전체를 채우는 반면, 반투명하고 흐릿한 것은 종종 더 많은 것이 있음을 암시합니다. bezel과 gradient, drop shadow(그림자)의 사용을 최소화 함으로서 인터페이스를 가볍게 만들고, 콘텐츠를 다른 무엇보다도 중요하게 만듭니다.

 

- 2번째 항목은 존중입니다. 아마, 콘텐츠에 대한 존중의 일환으로, 콘텐츠에 더 집중할 수 있도록 iOS를 구성했다는 뜻인 것 같네요.

 

 

3. 깊이. 뚜렷하게 구분되는 시각 레이어와 사실적인 모션은 계층 구조를 전달하고, 활기를 주며, 이해를 돕습니다. 터치와 발견 가능성은 즐거움을 높이고, 맥락을 잃지 않으면서 기능과 추가 콘텐츠에 접근할 수 있게 합니다. Transition(전환)은 콘텐츠를 탐색할 때 깊이감을 제공합니다.

 

- 레이어와 전환에서 찾을 수 있는 깊이감에 대해 주로 얘기하는 것 같습니다. 발견 용이성이란 용어는 이 포스팅을 참고해보는 것도 좋을 듯 하네요.

 

 

Design Principles : 디자인 원칙

---

To maximize impact and reach, keep the following principles in mind as you imagine your app’s identity.

 

영향과 그 도달 범위를 극대화하기 위해, 앱의 정체성을 생각할 때, 아래의 원리들을 꼭 숙지하세요.

 

Aesthetic Integrity : 미적 온전함

Aesthetic integrity represents how well an app’s appearance and behavior integrate with its function. For example, an app that helps people perform a serious task can keep them focused by using subtle, unobtrusive graphics, standard controls, and predictable behaviors. On the other hand, an immersive app, such as a game, can deliver a captivating appearance that promises fun and excitement, while encouraging discovery.

 

 미적 온전함은 앱의 모습과 동작이 얼마나 그 앱의 기능과 잘 통합되는지를 보여줍니다. 예를 들어, 심각한 일을 수행하는데 활용되는 앱은 미묘하고 야단스럽지 않은 그래픽, 표준의 컨트롤과 예측 가능한 행동을 통해 사용자를 집중시킬 수 있을 것입니다. 반면에, 게임과 같은 몰입형 앱은 새로운 발견을 부추기면서, 재미와 흥분을 약속하는 매혹적인 모습을 전달할 수 있을 것입니다.

 

 

Consistency : 일관성

A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect.

 

 일관적인 앱은 시스템에서 제공하는 인터페이스 요소와 잘 알려진 아이콘, 표준의 문자 스타일, 균일한 용어를 사용하며 전형적인 모범이 됩니다. 이 앱은 사용자들이 기대하는 방식의 기능 및 동작을 포함합니다.

 

 

Direct Manipulation : 직접적인 조작

The direct manipulation of onscreen content engages people and facilitates understanding. Users experience direct manipulation when they rotate the device or use gestures to affect onscreen content. Through direct manipulation, they can see the immediate, visible results of their actions.

 

 스크린 위의 콘텐츠를 직접적으로 조작하는 것은 사용자의 관심을 끌고, 이해를 가능케 합니다. 사용자들은 기기를 돌리거나, 콘텐츠에 영향을 끼치는 제스처를 사용할 때 직접적 조작을 경험합니다. 직접적 조작을 통해, 그들의 행동의 결과를 즉각적이고 시각적으로 볼 수 있습니다.

 

 

Feedback : 피드백

Feedback acknowledges actions and shows results to keep people informed. The built-in iOS apps provide perceptible feedback in response to every user action. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions.

 

피드백은 동작을 인지하고 그 결과를 보여줌으로써 사용자에게 계속해서 정보를 제공합니다. iOS의 기본 앱들은 사용자의 모든 동작에 답하여 인지가능한 피드백을 제공합니다. 상호작용하는 요소들은 탭 되었을 때 짧게 강조되고, progress indicator들은 길게 지속되는 동작의 상태를 보여주며, 애니메이션과 소리는 동작의 결과를 명확히 하는데 도움을 줍니다.

 

 

Metaphors : 비유

People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences—whether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines.

 

사용자들은 앱 안의 가상의 오브젝트와 동작이 기존의 익숙한 경험을 비유하는 것일 때 (그 기원이 실제든 디지털 세상이든) 더 빨리 배울 수 있습니다. 사용자는 신체적으로 스크린과 상호작용하기 때문에, 비유는 iOS에서 효과가 좋습니다. 그들은 아래의 내용을 보기 위해 뷰(컴포넌트)를 치워냅니다. 내용을 드래그하고 스와이프합니다. 스위치의 토글을 껐다 켜고, 슬라이더를 움직이며, 피커 리스트의 값을 스크롤합니다. 심지어 책과 잡지의 페이지를 휙 넘겨가며 보기도 합니다.

 

 

User Control : 사용자의 통제

Throughout iOS, people—not apps—are in control. An app can suggest a course of action or warn about dangerous consequences, but it’s usually a mistake for the app to take over the decision-making. The best apps find the correct balance between enabling users and avoiding unwanted outcomes. An app can make people feel like they’re in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when they’re already underway.

 

사용자는 iOS 전체(앱이 아니라)를 통제합니다. 앱은 몇 동작을 제안하거나, 위험한 결과를 미리 경고할 수는 있으나, 이는 대게 의사결정을 앱에게 떠넘기는 실수입니다. 최고의 앱은 사용자가 마음껏 할 수 있게 하는 것과 원치않는 결과가 나오지 않도록 막는 것 사이에서 적정한 균형을 찾습니다. 앱은 상호작용의 요소를 친숙하고 예측 가능하도록 유지하고, 파괴적 행동 (삭제 등)을 확인시키며, 심지어 사용자가 이미 진행 중에 있다 하더라도 기능을 중단시키는데 쉽게 만드는 것을 통해 사용자가 스스로 통제권을 쥐고 있다고 느끼게 할 수 있습니다.