티스토리 뷰
iPhone X는 과거 어느 때보 다 풍부하고 풍부한 컨텐츠를 제공하는 대형, 고해상도, 둥근 모서리의 슈퍼 레티 나 디스플레이를 포함합니다.
화면 크기
세로 방향에서 iPhone X의 디스플레이 너비는 iPhone 6, iPhone 7 및 iPhone 8의 4.7 인치 디스플레이의 너비와 일치합니다. 그러나 iPhone X의 디스플레이는 4.7 인치 디스플레이보다 145pt 더 크므로 콘텐츠를위한 약 20 %의 추가 수직 공간.
앱의 모든 아트웍에 고해상도 이미지를 제공하십시오. iPhone X는 배율이 3 배인 고해상도 수퍼 망막 디스플레이를 가지고 있습니다. 글리프 및 기타 평면 벡터 아트 워크의 경우 해상도 독립적 인 PDF를 제공하는 것이 가장 좋습니다. 래스터 화 된 아트웍의 경우 @ 3x 및 @ 2x 버전의 아트웍을 모두 제공하십시오. 이미지 크기 및 해상도 및 사용자 정의 아이콘을 참조하십시오 .
형세
iPhone X를 디자인 할 때 레이아웃이 화면을 채우고 장치의 둥근 모서리, 센서 하우징 또는 홈 화면에 액세스하기위한 표시기로 가려지지 않도록해야합니다.
탐색 막대, 표 및 모음과 같이 시스템에서 제공하는 표준 UI 요소를 사용하는 대부분의 응용 프로그램은 장치의 새로운 폼 팩터에 자동으로 적응합니다. 배경 자료는 디스플레이의 가장자리까지 확장되며 UI 요소는 적절하게 삽입되고 배치됩니다.
맞춤 레이아웃이있는 앱의 경우, 특히 앱이 자동 레이아웃을 사용하고 안전 영역 및 여백 레이아웃 가이드를 준수하는 경우 iPhone X를 지원하는 것이 상대적으로 쉽습니다.
iPhone X에서 앱 미리보기 Simulator (Xcode에 포함)를 사용하여 앱을 미리보고 클리핑 및 기타 레이아웃 문제를 확인할 수 있습니다. 앱이 가로 모드를 지원하는 경우 기기가 왼쪽 또는 오른쪽으로 회전했는지 여부에 관계없이 레이아웃이 좋아 보이는지 확인하세요. 거꾸로 세로 모드는 iPhone X에서 지원되지 않습니다. 와이드 컬러 이미지와 같은 일부 기능은 실제 장치에서 미리보기가 가장 좋습니다.
전체 화면 경험을 제공하십시오. 배경이 디스플레이의 가장자리까지 뻗어 있고 테이블 및 컬렉션과 같이 세로로 스크롤 가능한 레이아웃이 맨 아래까지 계속 이어져 있는지 확인하십시오.
클리핑 (clipping)을 방지하기 위해 필요한 내용을 삽입합니다. 일반적으로 콘텐츠는 중앙에 배치되고 대칭 적으로 삽입되어야 모든 방향에서 좋아 보이며 모서리 나 장치의 센서 하우징에서 잘리지 않거나 홈 화면에 액세스하기위한 표시기로 가려져 있지 않아야합니다. 최상의 결과를 얻으려면 표준의 시스템 제공 인터페이스 요소와 자동 레이아웃을 사용하여 인터페이스를 구성하십시오. 앱은 UIKit에 정의 된 안전 영역 및 레이아웃 여백을 준수해야 장치 및 컨텍스트를 기반으로 적절한 삽입을 보장합니다. 안전 영역은 내용이 상태 표시 줄, 탐색 모음, 도구 모음 및 탭 표시 줄에 밑줄을 긋지 못하게합니다.
장치가 가로 방향 인 경우 일부 게임 (예 : 게임)의 경우 화면 하단 (안전 영역 아래까지 확장 가능)에 내용을 저장할 수있는 적절한 컨트롤을 배치하는 것이 적절할 수 있습니다. 화면 상단과 하단에 컨트롤을 배치 할 때 일치하는 인셋을 사용하고 홈 표시기 주위에 충분한 공간을 남겨 두어 사람들이 실수로 컨트롤과 상호 작용하려고 시도하지 않도록합니다.
상태 표시 줄 높이에주의하십시오. 상태 표시 줄은 iPhone X에서 다른 iPhone보다 높습니다. 앱이 상태 표시 줄 아래에 콘텐츠 위치 지정을위한 고정 된 상태 표시 줄 높이를 가정하면 사용자의 기기를 기반으로 콘텐츠를 동적으로 배치하도록 앱을 업데이트해야합니다. 음성 녹음 및 위치 추적과 같은 백그라운드 작업이 활성화되어 있으면 iPhone X의 상태 표시 줄에서 높이가 변경되지 않습니다.
앱이 현재 상태 표시 줄을 숨기면 iPhone X에 대한 결정을 재고하십시오. iPhone에서 의 표시 높이는 4.7 "iPhone보다 더 많은 수직 공간을 제공하며 상태 막대는 앱에서 아마도 얻은 화면 영역을 차지합니다. 상태 표시 줄에는 사람들이 유용하다고 생각하는 정보도 표시되며 부가 가치에 대한 대가로만 숨겨져 있어야합니다.
기존 아트웍을 재사용 할 때 종횡비 차이에 유의하십시오. iPhone X는 4.7 "iPhone과는 다른 종횡비를 가지므로 아이폰 X에서 전체 화면으로 표시 될 때 전체 화면 4.7"iPhone 아트 워크가 잘 리거나 레터 박스로 나타납니다. 마찬가지로 전체 화면 iPhone X 아트웍은 표시 될 때 잘 리거나 표시됩니다 4.7 "iPhone에서 전체 화면으로 표시 중요한 디스플레이 내용이 두 디스플레이 크기에서 모두 보이는지 확인하십시오.
화면 맨 아래와 모퉁이에 대화 형 컨트롤을 명시 적으로 배치하지 마십시오. 사람들은 디스플레이의 하단 가장자리에서 스 와이프 제스처를 사용하여 홈 화면 및 앱 전환기에 액세스하며 이러한 동작은이 영역에서 구현 한 맞춤 제스처를 취소 할 수 있습니다. 화면의 구석이 사람들이 편안하게 접근하기 어려운 곳일 수 있습니다.
전체 길이 단추 삽입. 화면의 가장자리까지 확장 된 단추는 단추처럼 보이지 않을 수 있습니다. 전체 너비 버튼의 측면에서 표준 UIKit 여백을 고려하십시오. 화면 하단에 나타나는 전체 너비 버튼은 모서리가 둥글고 안전 영역의 하단에 맞춰 졌을 때 가장 잘 보이며 홈 표시기와 충돌하지 않도록합니다.
주요 디스플레이 기능에 가면이나 특별한주의를 기울이지 마십시오. 화면의 상단과 하단에 검정색 막대를 배치하여 홈 화면에 액세스하기 위해 장치의 둥근 모서리, 센서 하우징 또는 표시기를 숨기려고하지 마십시오. 괄호, 베젤, 모양 또는 지침 텍스트와 같은 시각적 장식을 사용하여이 영역에 특히주의를 환기시키지 마십시오.
홈 화면에 액세스 할 수 있도록 표시기를 자동 숨기기를 허용합니다. 자동 숨기기가 활성화되면 사용자가 몇 초 동안 화면을 터치하지 않으면 표시등이 점멸합니다. 사용자가 화면을 다시 터치하면 다시 나타납니다. 이 동작은 비디오 또는 사진 슬라이드 쇼를 재생하는 수동보기 환경에서만 활성화해야합니다.
