ios human interface guidelines 정리 (1)

iOS Human Interface Guidelines

1

NHN NEXT 차용빈

UI�� 디자인의�� 기본

UI�� Design�� Basics

iOS를�� 위한�� 디자인

Designing�� for�� iOS

Deference

Clarity

Depth

UI - 사용자가 컨텐츠를 이해, 상호작용 도움 경쟁은 해선 안됨.

글자 - 모든 사이즈에서 가독성

아이콘 - 정확하고 명료

시각적 계층 및 사실적인 움직임

사용자의 즐거움, 이해도 증대

애플의�� 사례

새롭게�� 디자인�� or�� 재�� 디자인

UI를�� 벗겨내어�� 앱의�� 핵심�� 기능이�� 드러나도록�� 한다.��

각각의�� 적절함을�� 재�� 확인

iOS의�� 테마를�� 사용해�� UI�� /�� UX�� 를�� 제작

선례를�� 부정할�� 준비�� 가정에�� 대해�� 질문��

컨텐츠로의�� 포커스와�� 기능성

모든�� 디자인�� 결정에�� 대한�� 원동력

Defer�� to�� Content

간결하지만 아름다운 UI와 유동적인 움직임은 iOS 경험의 하이라이트

사용자의 컨텐츠가 그 중심


전체 스크린을 활용하라

인셋과 프레임의 사용을 다시 생각하자

컨텐츠가 화면의 모서리가 닿도록 늘이자

날씨 앱은 이러한 접근법을 보여줌

현재 날씨의 아름다운 묘사는 즉각적으로

가장 중요한 정보를 제공

시간별 데이터를 제공할 여유공간 제공


물리적, 사실적인 시각적 인디케이터를 다시 생각

베젤, 그라디언트, 그림자

컨텐츠를 압도하는 무거운 UI 요소

컨텐츠에 집중하고

UI는 서포트하는 역할


반투명한 UI 요소는 그 뒤의 컨텐츠에 힌트 제공

투명도는 상황을 제공함

추가적인 컨텐츠가 가능하다는 것을

사용자에게 알려준다.

Provide�� Clarity

App에서 컨텐츠가 최상위임을 확인하는 또 다른 방법

명쾌함을 제공하는 것


여백을 많이 사용하라

중요한 컨텐츠와 기능을 알아보기 쉽게함

차분하고 평안한 느낌을 전달

App이 보다 더 집중되고

효율적으로 보이게 함.


색상이 UI를 단순화하게 하라

iOS 기본 앱 중 ‘Notes’

Notes 에서의 노란색과 같이

키 컬러는 중요한 상태에 주목

인터렉티비티를 섬세하게 알림

App에 일관된 시각적인 테마를 제공


시스템 폰트를 이용해 가독성 확보

iOS 시스템 폰트는 자동적으로 자간, 행간 조정

사용자가 어떤 크기를 선택하든 읽기 쉽게 만듦

다이나믹 타입을 적용

사용자가 어떤 폰트를 사용하든

App이 사용자가 선택한 다른 사이즈의

텍스트에 대응할 수 있게 하자


경계선 없는 버튼을 받아들이자

베젤에 의존해서 인터렉티비티를 알리기

의미있는 버튼 제목을 만들고

키 컬로 또는 시스템 컬러를 이용해

사용자에게 해당 요소가 인터렉티브 함을 알림

‘연락처’는 시스템 블루 컬러를 이용함

스크린 위의 대부분이 인터렉션 반응함

Use�� Depth�� to�� Communicate

컨텐츠를 계층과 위치를 제공하는 구별된 레이어에 드러냄

오브젝트들 간의 관계를 이해


투명한 배경

홈 스크린 위에 떠있는 것 처럼 보이게 함

폴더는 폴너 내의 컨텐츠를 스크린과 분리


하나의 아이템을 가지고 작업하는 동안

추가적인 아이템을 아래의 레이어에 표시

모든 아이템을 보려면

레이어를 펼치는 형식


개선된 장면 전환

년, 월, 일 뷰를 이동할 때, 깊이를 느낄수 있음.

보는 것처럼 Year뷰를 스크롤 하면,

사용자는 즉각적으로 오늘 날짜를 볼 수 있음

또한 다른 캘린더 작업이 가능

iOS�� App�� 분석

iOS�� App�� Anatomy

대부분의 iOS의 App

UIKit Framework의 UI요소 사용

UI 요소의 이름과 역할, 기능을 하는 것

App의 UI 디자인시 세련된 결정에 도움

UIKit에 의해서 제공되는 UI요소

Bar Content Views

Controls Temporary Views

사용자에게 어디있는지 알려줌

네비게이션 역할

컨츠롤을 포함하는 문맥상의 정보를 가짐

App 특유의 컨텐츠를 담음

아이템들의 스크롤링, 삽입, 삭제, 재배열

액션을 실행하거나 정보를 표시

사용자에게 중요한 정보 제공을 위해

추가적인 선택과 기능 제공을 위해

일시적으로 보이는 것

이외 UIKit에 의해서 제공하는 것

제스처 인식기

드로잉

접근성

프린팅 지원

App에서 View의 집합이나 계층을 관리하기 위해

뷰 컨트롤러 (View Controller)

뷰들의 표시를 관리하여 사용자 인터렉션 뒤의 기능을 구현

한 화면에서 다른 화면으로 전환하는 것을 관리

개발자가 ‘뷰’나 ‘뷰 컨트롤러’와 같은 용어로 생각

사용자들은 iOS App을 스크린의 모음으로 경험하는 경향

Screen은 일반적으로 앱에서의 독특한 시각적 상태 또는 모드에 해당

iOS App은 윈도우를 가지고 있음

컴퓨터 앱의 윈도우와 다르게

iOS 윈도우는 시각적 파트를 가지고 있지 않음

디스플레이에서 다른 위치로 옮겨질 수가 없음

대부분의 iOS 앱들은 하나의 윈도우만 가진다.

(외부 디스플레이를 지원하는 앱은 하나 이상의 윈도우를 가짐)

적응성과�� 레이아웃

Adaptivity�� and�� Layout

Build�� In�� Adaptivity

기대를 충족 할 수 있도록 크기 종류 및 자동 레이아웃을 사용

디스플레이 환경의 변화에 적응하는 방법을 정의

iOS Size

Regular

Compact

“넓은 공간과 대응”

“제한된 공간과 대응”

아이패드의 디스플레이의 환경은 항상 일정한 수평과 수직

아이폰의 디스플레이 환경은 디바이스와 장치에 따라 달라질 수 있음.

iPhone 6 Plus

아이폰6 를 포함하여 다른 모든 아이폰 모델은 크기종류의 동일한 세트를 사용

iPhone 6

Provide�� a�� Great�� Experience�� in�� Each�� Environment

모든 장치와 방향에 큰 경험을 제공하기 위해 가이드 라인을 따라야 함

디스플레이 환경에 따라 적절하게 대응

모든 환경에서의 기본 컨텐츠에 초점을 유지한다.

레이아웃의 불필요하게 변경하지 않는다.

App 이 한 방향으로만 실행하면 간단하다.

장치 회전을 알려주는 UI요소를 표시하는 것을 피한다.

방향 둘 모두를 지원한다.

App 이 입력과 같은 장치 방향의 변화를 해석하면 App 의 고유 방식으로 회전 처리

Use�� Layout�� to�� Communicate

레이아웃을 이용하여,

사용자에게 어떤 것이 가장 중요한지,

그들이 무엇을 선택했는지,

그리고 컨텐츠와의 관계를 보여줄 수 있음.

앱이 동작하는 장치에 따라, 장치의 현재 방향에 따라

레이아웃은 변형될 것

중요한 컨텐츠나 기능을 위쪽으로 올려보냄으로서

중심이 되는 작업에 초점을 맞추기 쉽도록 하다.

사용자들에게 스크린 위의 요소들 간의

연관된 중요성을 보여주기 위해

시각적인 무게와 균형을 사용

큰 아이템 그리고 무거워 보이는 것들은

눈을 끌기에 작은 것들에 비해 중요함

충분한 여백을 제공함으로서 사용자들이

컨텐츠와 폰트들의 인터렉션을 쉽게 하게 함

탭을 해야하는 부분은 44 X 44 정도의

터치 크기를 가져야함.

일반적으로 UI 외형의 불일치를 피해야함.

사용자가 기본 사이즈에서 보이는 것이 주 컨텐츠라고 이해할 수 있게 함

가능한 유사함 기능을 가진 요소들은 유사하게 보여야함.