Swifter {Swift Developer}

메뉴

Apple Watch Human Interface Guidelines 요점정리

개인적으로 정리한 내용입니다.

UI디자인 기초

설계

  • 가속도 센서와 심박수 센서등이 착용자의 일상적인 개인 데이터를 제공합니다. 다른 iOS기기와 다르게 항상 몸에 착용한다는 것을 인지하고 있어야 합니다.
  • 애플 왓치는 물리적 객체와 소프트웨어 간의 경계를 모호하도록 설계되어 있습니다. 이 경험에 기여할 수 있는 디자인을 해야 합니다.
  • 화면 크기와 손목 위치를 최대한 활용할 수 있도록 디자인되어야 합니다.
  • 시계 앱은 iOS앱을 보완하는 것이며, 그것을 대체하는 것은 아닙니다. 상호작용이 간결해야하며, 간단한 인터페이스가 요구됩니다.

인터페이스

  • 탐색기반 및 페이지 기반을 이용할 수 있습니다. 결합은 할 수 없습니다. 모달로 표시할수도 있습니다.

작업

  • 단일 탭
  • 스와이프 (수직, 수평, 왼쪽)
  • 포스 터치 (밀기)
  • 디지털 크라운
  • 제스처는 개발자가 추가할 수 없음
  • 핀치 등 멀티 터치 제스처를 지원하지 않음

Grances

  • 템플릿 기반
  • 스크롤 불가
  • 읽기 전용으로 조작할 수 없고 누르면 아이폰 앱이 열립니다.
  • 필수는 아니지만, 사용자가 Grances를 마킹하거나 선택할 수 있습니다.
  •  하단 부분은 페이지 표시점에 확보되어 있습니다.
  • 사용자의 현재 상태에 알맞은 정보를 표시하도록 시간과 장소정보를 사용합니다.
  • 유용한 정보를 표시할 필요가 있습니다. 그냥 앱을 시작하는데만 이용하지 마십시오.

알림

  • 짧은 룩과 긴 룩이 있습니다.
  • 로컬 또는 원격 통지를 사용자에게 제공하기 위한 짧은 룩이 있습니다.
  • 짧은 룩은 개인 정보가 적은 최소한의 정보를 표시합니다.
  • 사용자가 손목을 낮추면 짧은 룩은 사라집니다. 내리지 않고 누르면 더 상세 정보가 긴 룩이 표시됩니다.
  • 빈번한 통지는 사용자가 번거롭다고 느끼면 무시될 수 있어, 최소한으로 제공합니다.
  • 짧은 룩은 템플릿 기반 앱 이름, 앱 아이콘 및 동반 통지에서 제목 문자열을 포함하고 있습니다.
  • 짧은 룩의 제목은 짧고 간단합니다.
  • 긴 룩은 정해진 구조가 아닌 사용자 정의를 할 수 있습니다.
  • 긴 룩은 정적인 인터페이스를 제공해야 작업을 정의한 버튼을 4개까지 설치할 수 있습니다. 마지막으로 dismiss 버튼을 추가됩니다.
  • 필요에 따라 동적 인터페이스를 제공할 수 있습니다.

모달 시트

  • 모달 시트는 사용자 주의를 끌고 싶을 때나 작업 완료 또는 데이터 삭제를 명시적으로 확인할 때 사용되어야 합니다.
  • 모달 시트는 단일 화면 또는 페이지 기반 인터페이스에서 여러 화면을 준비할 수 있습니다.
  • 왼쪽 상단에 닫기 버튼이 준비되어 탭 또는 왼쪽 가장자리 스와이프를 하면 모달 시트를 닫을 수 있습니다.
  • 닫기 버튼을 필수이지만 텍스트를 변경할 수 있습니다.
  • 작업이 사용자 확인을 필요로 한다면, 모달 시트에 버튼을 표시할 수 있습니다. 버튼을 누르면 원하는 작업을 수행하며 모달 시트는 닫습니다.
  • 모달 시트에서 모달 시트를 부르는 것을 피해야 합니다.

레이아웃

  • 버튼은 2개까지 옆에 정렬하며 텍스트는 없고 아이콘을 사용합니다. 사용자 탭 대상을 확보하는 것입니다.
  • 애플 왓치 실제 베젤이 시각적 패딩을 제공하기 때문에, 개발시 시뮬레이터 화면 끝까지 공백을 이용하십시오.
  • 다양한 크기의 애플 왓치에서 동일한 인터페이스를 사용하는 앱은 상대적인 위치를 사용하여 필요한 요소를 확대합니다.
  • 각 요소는 “웨에서 아래”, “왼쪽에서 오른쪽”으로 배치됩니다.
  • 텍스트 버튼은 항상 전체가 표시되는 것을 보장하기 위해 모든 폭을 사용하십시오.
  • 보조 액션을 제시하는 컨텍스트 메뉴를 사용하십시오.
  • 필요에 따라 다른 화면크기에 대한 리소스를 준비하십시오.

색상

  • 배경색은 검정을 사용하십시오. 기기의 베젤과 완벽하게 혼합하여 화면의 가장자리가 펼쳐지는 착각을 얻을 수 때문입니다. 밝은 배경색은 피합니다.
  • 모든 앱은 키 컬러를 설정합니다. 상태 표시에 사용하는 것 외에 브랜딩의 일환으로 이용합니다.
  • 기독성을 높이기 위해 텍스트는 고대비 색상을 사용하십시오.
  • 버튼이나 컨트롤의 쌍방향성을 제공하기 위해서만 색상을 사용하지 마십시오.
  • 시각장애인은 많은 적색과 녹색을 구분하기 어렵습니다. 적색과 녹색만 사용하는 부분이 없는지 테스트합니다.
  • 색상의 의미는 문화에 따라 다양합니다. 가능한 당신의 의도하는 의미가 전해지는 색상이 있는지 확인하십시오.

타이포그래피

  • 기본 시스템 글꼴은 애플 왓치에서 읽기 쉽도록 특별히 설계된 동적 글꼴입니다.
  • 사용자 지정 글꼴을 사용할 수 있지만, 텍스트 크기 변경에 따라 동적으로 처리되도록 추가적인 작업이 필요합니다.
  • 가능한 시스템 글꼴을 사용합니다.
  • 앱 단독으로 하나의 글꼴을 사용하도록 합니다.
  • 수동으로 시스템 글꼴크기를 결정하려면, 19pt이하로 Sanfrancisco Text Font 20pt이상기면 Sanfrancisco display font가 선택됩니다.

애니메이션

  • 적절한 애니메이션은 “상태를 표현하고 피드백을 제공하는 액션 결과를 시각화”
  • 스틸 이미지 시퀀스 사전에 애니메이션을 만들고 Watch app bundle에서 이를 저장하는 것을 원활하게 사용자에게 제공할 수 있습니다. WatchKit extension동적으로 애니메이션을 만들고 애플 왓치로 전송하면 지연이 발생합니다.

브랜딩

성공하는 브랜드 앱의 브랜드를 높일뿐만 아니라, 사용자에게 편안하고 기억에 남는 경험을 제공합니다.

사용자는 목적을 이룰려고 하거나 즐기기 위해서 당신의 앱을 사용합니다. 광고를 보기 위해 시작하는 것이 아닙니다. 최고의 사용자 경험을 위한 디자인임을 잊지 마십시오.

애플 왓치 공간은 한정되어 있습니다. 로고를 표시하려는 유혹에 저항하십시오. 앱 로고를 표시할 웹에서 로고를 표시하는 것돠는 다릅니다. 사용자는 일반적으로 앱을 열기 전에 앱 아이콘을 볼 수 있습니다.

 

UI Elements

Labels

  • 정적인 텍스트 표시
  • 사용자 상호작용 할 수 없습니다.
  • 앱에서 업데이트할 수 있습니다.
  • 여러 줄을 볼 수 있습니다.
  • 글꼴은 내장 동적 시스템글꼴을 사용하는 것이 바람직합니다.
  • 사용자 지정 글꼴을 사용할 경우, 화려한 문자 색상을 사용하면 선명도를 희생하게 됩니다.

Images

  • 이미지 객체는 1개 이상의 이미지 애니메이션 시퀀스를 표시합니다.
  • 이미지 객체는 자신의 모습을 가지지 않습니다. 이미지를 표시할뿐입니다.
  • 사용자 상호작용을 할 수 없습니다.
  • 애니메이션을 시작하고 중지하기 위한 프로그램으로 컨트롤을 제공합니다.
  • @2x로 모든 리소스를 만듭니다. Retina용은 만들 필요가 없습니다.

Groups

  • 그릅은 당신의 인터페이스에서 컨텐츠를 배치히가 위한 중요한 도구입니다.
  • 그룹은 다른 개체의 컨테이너로서 기능을 합니다.
  • 그룹 자체의 외건을 가지지 않지만, 사용자 정의 배경색 또는 이미지로 구성할 수 있습니다.
  • 그룹은 위치, 크기, 여백, 그리고 다른 레이아웃 관련 속성을 지정하기 위한 속성을 가집니다.
  • 그룹 객체는 수평 또는 수직으로 아이템을 배치할수 있습니다.
  • 하나 이상의 다른 인터페이스 요소가 포함된 그룹 요소 중 여백과 간격을 지정하는 속성이 있습니다.
  • 배경으로 사진이나 단색을 표시할 수 있습니다.
  • 배경과 내용에 대해 corner radius를 설정할 수 있습니다.
  • 그룹은 주로 Xcode에서 디자인을 구현하기 위한 도구입니다.
  • 정교한 레이아웃을 생성하기 위해 그룹을 중첩할 수 있습니다.
  • 다양한 크기의 애플 왓치에 이미지 크기를 확대 압축하지 않습니다. 기본 기기의 정확한 픽셀크기로 준비합니다.

Tables

  • 표에서는 단일 열의 데이터행을 표시합니다. 동적으로 변경할 수 있습니다.
  • 여러 행 유형을 지원합니다.
  • 스크롤이 가능합니다
  • 배경색 이미지를 가질 수 있습니다.
  • 콘텐츠 머리글, 바닥글에서 같은 행 형식을 사용합니다.
  • 콘텐츠에 복잡한 다른 행타입을 혼합합니다. 섹션을 구분하는 경우에만 다른 행형을 이용해도 좋습니다. 또는 행을 정리하십시오.
  • 한번에 표시할 내용은 20줄정도로 제한합니다. 그 이상일 경우 우선 바로 보여야할 일부만 표시하고 나머지를 표시하는 옵션을 사용자에게 제공합니다.
  • 그룹 내부에 표를 포함합니다. 표는 포함된 행수에 따라 크기를 동적으로 변경합니다.

 Buttons

  • 버튼은 앱 고유 작업을 실행해야 합니다.
  • 배경 사용자 정의
  • 둥근형태입니다.
  • Label 또는 그룹 개체를 포함할 수 있습니다.
  • 버튼 배경은 platter이고 사용자 정의 색상이나 이미지를 표시할 수 있습니다.
  • 버튼은 가로형태로 사용할 것을 적극권장합니다. 만약 옆에 여러 개의 버튼을 배치하려면 2개까지로 제한합니다.
  • 가능한 버튼 높이는 일치시킵니다.
  • 버튼은 다른 요소와 구별하기 위해 둥글게 되어 있어 표준 corner radius는 6pt입니다.

Switchs

  • 스위치는 두개의 상호 배타적인 선택 또는 상태를 제시합니다.
  • 반드시 레이블이 포함됩니다.

Sliders

  • 슬라이더 바 양쪽 이미지를 눌러 값을 변경합니다.
  • 수평선과 양쪽 이미지로 구성되어 있습니다.
  • 사용자 숫자는 표시하지 않습니다.
  • 사용자 정의 이미지를 사용하는 경우 슬라이더 용도에 맞게 합니다.

Maps

  • 지도는 정적인 스냅샷이며 사용자 상호작용은 없습니다.
  • 누르면 앱으로 이동합니다.
  • 콘텐츠에 사용 가능한 크기를 초과한 맵객체를 생성하지 않습니다.
  • 주석은 5개까지 표시 가능합니다.
  • 핀은 세가지 색, 녹색은 시작지점, 빨간색은 목표지점, 보라색은 관심지점으로 사용합니다.
  • 사용자 정의 이미지를 주석에 사용할 수 있습니다. (주석 아래 연관된 목표좌표에 위치하는 형태)

Date and Timers

  • 날짜와 타이머 객체는 애플 왓치의 시간관련 값을 표시하는 특수 레이블입니다.
  • 날짜 레이블은 날짜, 시간 또는 2개 보기입니다.
  • 형식, 일정 시간대의 다양한 방법을 사용하여 목적과 시간을 표시하도록 구성할 수 있습니다.
  • 타이머 레이블은 지정된 시간까지 카운트다운 또는 카운트 업할 수 있습니다.
  • 다양한 형식으로 그 카운트값을 표시할 수 있습니다.
  • WatchKit Extension측에서 업데이트하지 않아도 됩니다.

Menus

  • 디스플레이를 밀면 제스처 컨텍스트 메뉴가 표시됩니다.
  • 1-4개의 메뉴를 표시할 수 있습니다. 왼쪽에서 오른쪽, 위에서 아래로 배치됩니다.
  • 메뉴는 계층적이 아니며 스크롤하지 않습니다.
  • 메뉴 액션은 현재 화면에 적용되는지 확인합니다.
  • 각 동작은 이미지와 라벨 문자열을 가질 필요가 있습니다. 레이블 문자는 2행까지 제한됩니다.
  • 메뉴는 옵션입니다.

 

Icon and Image Design

아이콘 및 이미지 크기

  • 홈 화면의 아이콘은 iOS앱과 기능으로 유사한 경우, 아이콘은 같은 것을 사용하여 iOS앱을 보완 또는 제어하는 경우에 맞게 변화시킵니다.
  • 모든 이밎와 아이콘은 PNG형식을 권장합니다.
  • 아이콘에 텍스트를 붙이지 않습니다.
  • 유니버셜 이미지를 이용합니다.
  • 단순하게 만듭니다.
  • 다양한 크기의 아이콘 이미지를 만듭니다.

메뉴 이미지

  • 포스터치의 메뉴 아이콘의 색상 정보는 무시됩니다.
  • 그래프를 만든 경우 선이 4px이상을 사용합니다.
  • 메뉴 이미지는 PNG형식을 권장합니다.

 

참고 자료: Apple Watch Human Interface Guidelines

Facebook Comments

카테고리:   Swift

댓글

죄송하지만 댓글은 닫혀 있습니다.