SlideShare una empresa de Scribd logo
1 de 16
Descargar para leer sin conexión
Human Interface Guidelines
번역자 : 시스포유아이앤씨 마영희 주임
작성일 : 2013 년 7 월 12 일
VIII.iOS UI요소 사용 가이드라인
POPOVER (아이패드 전용)
팝 오버는 사람들이 컨트롤이나 화면 영역을 누를 때 나타나는 일시적인 화면이다.
중요 : 팝 오버는 오직 아이패드 어플리케이션에서만 나타난다.
외관 과 동작
팝 오버는 컨텐츠 화면 위에 떠있는 독립적인 화면이다. 그것이 나타날 때 만다 항상 화살표가
표시된다. 팝 오버는 광 범위한 개체와 화면을 표시한다.
 표, 이미지,지도, 텍스트, 웹 또는 사용자 보기
 네비게이션 바, 툴바 또는 탭바
 컨트롤 또는 현재 애플리케이션 뷰 개체에 작용하는 개체
iPad 의 어플리케이션의 액션 시트는 항상 팝 오버 안쪽에 나타난다.
가이드 라인
당신은 다음과 같은 팝 오버를 사용할 수 있다.
추가 정보 및 초점 개체와 관련된 항목의 목록을 표시합니다.
화면과 밀접하게 관련이 있는 옵션에 대한 간단한 목록이 포함 된 액션 시트를 표시한다.
스플릿 뷰 기반 응용 프로그램이 수직으로 되어 있을 때 왼쪽 창에서 내용을 표시한다. 이렇게
하려면 다음 중 하나 팝 오버 또는 사람들이 그것을 숨기거나 나타내기 위해 제스처를 할 수
있는 적절한 제목 버튼을 제공한다.
“팝 오버를 차단” 하는 버튼을 제공하는 것을 피하라. 팝 오버는 그것이 더 이상 필요하지 않을
때 자동으로 닫히게 해야 한다. 팝 오버의 존재가 불필요하게 되었을 때 확인하려면 다음
시나리오를 생각해 보면 된다.
팝 오버가 오직 옵션 설정이나 메인 화면에 효과를 주는 아이템을 제공하기 위한 기능이라면,
사람들이 즉시 그것을 선택하게 만들어야 한다. 이 동작은 컴퓨터의 어플리케이션의 메뉴와 매우
유사하다. 이 동작은 또한 액션 시트가 포함 되어있는 팝 오버에 적용되는 점에 유의해야 한다.
사람들이 액션 시트의 버튼을 누르면 즉시, 팝 오버는 닫아야 한다.
경우에 따라서는 메인 화면에 영향을 주는 항목이 포함되어 팝 오버를 제공하기 위해 이해 될 수
있지만, 사람들이 선택을 할 때 닫히지 않는다. 당신은 팝 오버에 관리자를 구현할 때 사람들은
추가 선택을 하거나 현재의 선택 속성을 변경하는 경우가 있기 때문에 이 작업을 수행 할 수
있다.
메뉴 및 관리자 기능을 제공하는 팝 오버는 팝 오버를 제시하는 통제를 포함하여 그 경계 밖의
사람들은 어디서나 그것을 닫는다. 선택 메뉴는 제공한다. 팝 오버는 이 제스처를 사용자가
선택하지 않았다는 것을 결정했다는 것을 의미한다.
팝 오버 작업을 활성화하려면 완료 또는 취소 작업을 할 때, 팝 오버 거부 버튼을 표시하는 것이
적절하다. 일반적으로 사람들이 눌러서 밖으로 나올 때도 편집작업이 종료되지 않는 팝 오버는
종료 버튼과 취소 버튼을 표시해야 한다. 이 버튼들은 편집환경에 있고, 그들을 명시적으로
입력을 유지하거나 폐기 할 수 있는 것을 사람들에게 상기 시키는 것에 도움이 된다. 사람들이
하나의 버튼을 누르면 팝 오버는 닫아야 한다.
일반적으로 popover 의 경계선을 누를 때 사용자의 작업을 저장한다. 모든 popover 가 명백하게
제거 되지는 않기 때문에 사람들이 실수로 그것을 제거할 수 있다. 사람들이 취소 버튼을 눌렀을
때만 popover 을 제거할 수 있게 해야 한다.
popover 의 화살표가 최대한으로 요소를 분명하게 나타내고 있는지 확인 해야 한다. 이렇게 하면,
팝 오버가 어디에서 왔는지, 그것이 관련된, 작업 또는 개체들을 사람들이 기억하는데 도움이
된다.
사람들이 어플리케이션의 내용을 보지 않고 popover 를 사용할 수 있는지 확인해야 한다.
사람들은 popover 를 또 다른 위치로 드래그 할 수 없다.
유일한 popover 는 화면에 표시되어 있는지 확인 해야 한다. 동시에 하나 이상의 popover 를
표시 할 수 없다. 특히, 동시에 popover 의 계층 또는 캐스케이드를 표시하는 것을 피해야 한다.
popover 상단에 모달 뷰를 표시하지 않는다. 경고를 제외하고는 어떤 것도 popover 의 상단에
표시해서는 안 된다.
가능하다면, 사람들이 하나의 탭으로 하나의 popover 를 열고 닫을 수 있어야 한다. 이 동작은
사람들이 추가적으로 탭을 하는 것을 방지할 수 있기 때문에, 여러 개의 다른 바에 각각의
popover 를 여는 버튼이 있을 때 적합하다.
너무 큰 popover 를 만드는 것은 피하라. Popover 가 화면 전체를 덮어서는 안 된다. 대신에
내용을 충분하게 표시할 수 있어야 한다.
이상적인 popover 의 폭은 320 포인트 정도 이지만 600 포인트보다는 작아야 한다. Popover 의
높이가 제한이 없기 때문에 긴 항목의 목록을 표시하기 위해 그것을 사용할 수 있다.
일반적으로 활성화된 작업이나 액션 시트에 표현된 것들을 popover 에서 스크롤링 되는 것을
피해야 한다. 시스템은 그것이 화면에 잘 맞는 것을 확인하기 위해 popover 의 높이와 폭을
조정해야 할지도 모른다는 점을 유의해야 한다.
일반적으로 popover 에서 표준 UI 컨트롤 과 뷰를 사용할 수 있다. Popover 가 표준 컨트롤과
화면을 포함하고 있으면 보기에 좋고 사용자가 쉽게 이해할 수 있다.
Popover 를 사용자 정의 한다. 비록 UIPopoverBackgroundView APIs 사용으로 popover 의
비주얼적인 많은 측면이 쉽게 사용자 정의 되었을 지라도 사람들이 popover 를 인식하지 못하는
디자인으로 만드는 것을 피하는 것이 좋다. Popover 의 외관을 너무 많이 바꾸면 사람들이 당신의
어플리케이션을 이해하기 어려울 수 있다.
표준 컨트롤과 화면과 사용자 정의된 배경색과 질감을 조합했을 경우 주의해야 한다. 표준 UI
요소가 보기에 적합하고 사용자들이 쉽게 읽을 수 있는지 확인해야 한다.
보이는 부분이 남아 있을 때 popover 의 사이즈를 변경한다. 당신은 최소한의 화면과 정보와
동일한 부분을 모두 표시하기 위해 사용하는 경우 popover 의 크기를 변경할 수 있다. 만약
그것이 보여지는 동안 popover 의 사이즈를 조정하는 경우 애니메이션 효과를 선택할 수 있다.
새로운 popover 가 이전 것을 대체했다고 생각하는 것을 피할 수 있기 때문에 애니메이션을 통한
변화는 좋은 생각이다.
Scroll View
스크롤 뷰는 사람들이 스크롤 뷰의 경계보다 큰 콘텐츠를 볼 수 있게 한다.
외관 과 동작
스크롤 뷰가 처음 나타날 때 수직 또는 수평 스크롤 지표에 보여줄 수 있는 많은 콘텐츠가
있음을 사용자에게 보여주기 위해 잠시 깜박인다. 스크롤 뷰는 미지 정의된 모양을 가지고 있지
않다.
스크롤 뷰는 사람들에게 자연스러운 느낌의 방법으로 내용을 공개하는 제스처의 속도와 방향에
응답한다. 스크롤 뷰의 드래그 또는 쓸어 넘기기 동작은 콘텐츠에 하나의 어플리케이션으로
정의된 페이지를 나타내는 페이징 모드에서 작동할 수 있다.
가이드 라인
당신은 제한된 공간에서 큰 화면에 접속하기 위해 스크롤 뷰를 사용할 수 있다. 사람들이 iOS 의
전체 스크롤 뷰를 사용하는 것에 익숙해져 있기 때문에 사람들이 예상 한대로 어플리케이션의
스크롤이 동작하는지 확인해야 한다.
적절한 확대 동작을 지원한다. 확대가 가능할 때 사용자의 작업 내용이 알아볼 수 있을 정도의
크기로 최대 와 최소 값을 정해야 정해야 한다.
페이지 컨트롤과 함께 페이징 모드 스크롤 뷰를 사용하는 것을 고려해야 한다. 당신이
까다롭거나 큰 덩어리로 나눠진 페이지의 컨텐츠를 보여주길 원할 때 이용 가능한 덩어리만
말하거나 현재 화면에 보여지는 것 하나를 보여주는 방식이 좋다.
일반적으로 동시에 여러 스크롤 뷰를 표시한다. 사람들이 스크롤 할 때 종종 크게 Swipe
제스처를 취하기 때문에 같은 화면에서 이웃 스크롤 뷰와 상호 작용하지 않도록 하는 것이
어려울 수 있다. 당신이 한 화면에서 두 개의 스크롤 뷰를 넣기로 결정한 경우, 하나의 제스처가
두 뷰를 스크롤 할 가능성이 적다. 그래서 서로 다른 방향으로 스크롤 할 수 있도록 고려해야
한다.
예를 들어, 가로 스크롤 뷰의 회사 고유의 정보를 위의 수직 스크롤 뷰의 iPhone 디스플레이의
주가에 수직으로 제공한다.
Split View (iPad 전용)
분할 화면은 2 개의 사이드 창으로 구성된 전체화면이다.
분할 뷰에는 분할 뷰의 창 표시를 관리하는 분할 뷰 컨트롤러가 포함되어 있다.
중요: 분할 뷰는 iPad 어플리케이션에서 이용 가능하다.
외관과 동작
분할 뷰는 2 개의 창으로 구성되어 있다. 왼쪽 창 폭은 모든 방향에서 320 포인트로 고정되어
있다. 사용자는 분할 뷰중 하나의 창 크기를 변경할 수 없다.
노트: 왼쪽 창은 종종 마스터 창 이라고 하는 불리고 오른쪽 창은 세부 정보창 이라고 불리기도
하지만 이 관계는 코드에 적용되지 않는다.
두 창에는 개체와 화면 등의 다양한 것을 포함한다. 가령,
 테이블, 이미지, 맵, 텍스트,웹, 사용자 지정 화면
 네비게이션 바, 툴 바, 탭 바
가이드 라인
당신은 왼쪽 창 및 관련 정보 또는 오른쪽 창 아래 정보 영구적인 정보를 표시하려면 분할 된
뷰를 사용할 수 있다. 이 디자인 패턴은 사람들이 왼쪽 창에서 항목을 선택하면 오른쪽 창에서
해당 항목과 관련된 정보를 표시해야 한다.
장치가 수직으로 회전할 때 어플리케이션의 가로방향 분할 뷰를 사용하는 경우, 팝 오버에서
왼쪽 창의 내용이 표시된다. 그러나 당신은 이 패턴을 따를 필요는 없다. 당신은 모든 방향에서
사이드 화면을 표시하도록 UI 를 디자인 할 수 있다.
왼쪽 창 보다 좁은 오른쪽 창을 만드는 것을 피하라. 오른쪽 창의 폭은 당신이 조정할 수 있지만
320 포인트 보다 작으면 적절하게 보이지 않는다.
동시에 두 창에 네비게이션 바를 표시하는 것을 피하라. 이렇게 하면 사용자가 두 개의 창사이의
관계를 파악하기 매우 어렵다.
일반적으로 영구적인 방법으로 왼쪽 창에서 현재 선택을 보여준다. 이 동작은 사람들이 왼쪽
창에서 항목을 오른쪽 창 내용 사이의 관계를 이해하는 데 도움이 된다. 오른쪽 창의 내용을
변경할 수 없기 때문에 이것은 중요하지만, 항상 왼쪽 창에서 선택한 항목에 관련된 것을
유지하도록 해야 한다.
사람들이 왼쪽 창에 접근 하기 위해 Swipe 제스처를 사용하도록 할 수 있게 해야 한다.
기본적으로 오른쪽 창은 세로 방향으로 표시되며 왼쪽 창을 나타내거나 숨기기 위한 버튼이
제공된다. iOS5.1 이상에서는 분할 뷰 컨트롤러도 나타내거나 숨기는 동작을 실행하는
Swipe 제스처를 지원한다.
만일 당신의 어플리케이션이 또 다른 기능을 사용하기 위해 Swipe 제스처를 사용한다면
사람들이 왼쪽 창에서 그것을 접근할 수 있도록 해야 한다.
Table View
테이블 뷰는 여러 행의 단일 열 목록에 데이터를 제공 한다.
외관 과 동작
테이블 뷰는 섹션으로 나누거나 그룹으로 나눌 수 있는 행을 표시한다. 사용자는 그것을
선택하고 추가 또는 삭제할 행을 여러 행을 선택하고 행 항목에 대한 자세한 내용을 참조하거나
다른 테이블 뷰를 나타내기 위해 테이블 뷰 컨트롤을 사용하여 테이블 행을 누른다. 사용자가
선택 가능한 항목을 누를 때 테이블의 행이 쉽게 강조표시 된다. 사용자가 선택 가능한 항목을
누를 때 테이블의 행이 쉽게 강조 표시된다.
새로운 화면에 탐색 줄 선택 결과 경우 선택된 행은 제자리에 새로운 화면 슬라이드로 짧게
강조하고 있다. 사용자가 다시 이전 화면으로 이동하면 처음 선택한 행이 다시 그들의 이전
선택을 사용자에게 상기시켜 일시적으로 강조하고 있다.
iOS 는 주로 외관으로 구별되는 테이블 뷰의 두 가지 스타일을 정의 한다. 일반 테이블은 화면의
폭을 확장하여 행을 표시한다. 행은 레이블이 붙은 섹션으로 나눌 수 있고 인덱스 뷰의 오른쪽
가장자리를 따라 세로로 나타날 수 있다.
그룹화 된 표는 측면 가장자리에 삽입된 행 그룹에 표시 된다. 그룹화 된 테이블 뷰는 항상
목록의 항목 중 적어도 하나의 그룹을 포함하고 각 그룹은 적어도 하나의 항목을 포함한다. 그룹
헤더에 의해 선행을 할 수 있고 footer 를 따른다. 기본적으로 그룹은 독특한 파랑 줄무늬 배경에
표시되고 그룹 내부에서는 행의 배경이 유백색이다. 그룹화 된 테이블 뷰는 인덱스를 포함하지
않는다.
별도로 명시하지 않는 한 이러한 요소는 테이블 뷰 에서 사용하기에 적합하다.
테이블 7-1 테이블 뷰 요소
표 7-1 에 나열되어있는 테이블 고유의 요소 이외에, iOS 가 사용자에게 테이블의 내용을
업데이트하는 기능을 제공한다. 이는 재생 제어를 의미한다.
iOS 는 평범하고 그룹화 된 두 테이블에 테이블 행에 대한 가장 일반적인 레이아웃을 구현하는
4 개의 테이블 셀 스타일을 정의 한다. 각 셀 스타일이 가장 다른 유형의 정보를 표시하는 데
적합하다.
노트 : 프로그램에서 이러한 스타일은 행을 그리는 방법을 표에 지시한 객체인 테이블 뷰 셀에
적용된다.
기본 셀 스타일은 검은색의 왼쪽 정렬을 따르고 행의 끝에 추가적인 이미지가 포함되어 있다.
기본 셀 스타일에서 텍스트 레이블의 모양은 항목 이름이나 제목을 나타내고 왼쪽 정렬은
사람들이 쉽게 볼 수 있게 만든다. 이 보충 정보로 차별화 할 필요가 없는 항목의 목록을
표시하기 위한 좋은 스타일을 만든다.
부제목 스타일은 행의 왼쪽에 추가적인 이미지를 포함하고 제목은 왼쪽정렬을 따른다. 제목은
검은색이고 부제목은 그 보다는 작으며 회색 폰트이다.
자막 셀 스타일은 텍스트 레이블의 멋진 외관 세부 텍스트 레이블의 세밀한 외관은 그것이 항목
관련 자회사의 정보가 포함되어 있다는 것을 의미하는 반면, 그것은 필드 이름 또는 제목을
나타내는 것을 의미한다.
값 1 스타일은 왼쪽정렬 되어있는 검은색의 제목과 같은 줄에 조금 작게 오른쪽 정렬되어
파란색폰트로 배치된다, 이미지는 이 스타일에 잘 맞지 않는다.
값 1 의 셀 스타일에서 텍스트 레이블은 항목의 이름 또는 제목을 나타내는 반면 상세 텍스트
레이블은 그 항목과 관련된 정보를 나타낸다.
왼쪽 정렬된 텍스트 레이블은 사람들이 원하는 항목을 찾는데 도움을 주고 오른쪽 정렬된 상세
텍스트 레이블은 그것과 관련된 정보를 아는데 도움을 준다. 이 테이블 셀의 스타일은 아마도
하위 목록에서 선택된 항목의 현재 값을 표시하기에 적합하다.
값 2 스타일은 오른쪽 정렬로 작게 파란색으로 표시되고 왼쪽 정렬된 부제목과 같은 열에
배치된다.
하지만 이미지에는 이 스타일이 적합하지 않다.
값 2 셀 스타일은 텍스트 레이블의 오른쪽 정렬, 제약 폭 글꼴이 암시 더 두드러진 왼쪽의 세부
텍스트 레이블의 중요한 정보는 제목이나 캡션 등이 가능하다.
이 레이아웃에서 레이블은 모든 행이 같은 위치에 서로를 향해 배열되어 있다. 텍스트 레이블과
상세 텍스트 레이블 목록 사이에 선명한 수직 여백을 만드는 것은 사용자가 첫 단어에
집중하는데 도움을 준다.
노트: 4 개의 표준 테이블 셀 스타일 또한 공개 지표로, 테이블 뷰 요소를 추가할 수 있다. 이러한
요소를 추가하면 제목과 부제목을 위해 사용 가능한 셀의 폭을 감소시킨다.
가이드 라인
당신은 정보의 양이 많거나 적거나 명확하고 효율적으로 테이블 뷰를 통해 보여줄 수 있다. 예를
들면 다음과 같은 테이블 뷰를 사용할 수 있다.
사용자가 선택할 수 있는 옵션의 목록을 제공한다. 당신은 목록에 있는 사용자에게 현재 선택한
옵션을 표시하는 체크마크를 사용할 수 있다.
그들이 테이블 행의 항목을 누를 때 선택된 항목을 표시하기 위해서 당신은 일반 또는 그룹
테이블 뷰를 사용할 수 있다. 테이블 행이 아닌 UI 요소나 버튼을 눌렀을 때 사용자에게 보여지는
항목을 표시하기 위해서 일반 스타일을 사용할 수 있다.
계층적으로 그룹화된 정보를 표시한다. 일반 테이블 스타일은 정보의 계층을 표시하기에
적합하다. 그룹화된 스타일의 둥근 코너는 정보를 쉽게 볼 수 있게 만든다. 심지어 사용자들이
스크롤링을 빠르게 할 때도 그렇다.
iOS 6.0 이상에서는 텍스트 또는 머리글 바닥 글 지정보기를 표시하려면 헤더 바닥 글보기를
사용할 수 있다.
검색을 용이하게 하기 위한 인덱스를 표시한다. 일반 스타일은 사용자가 신속하게 그들이 필요한
것을 찾는데 도움이 된다. 인덱스는 화면의 오른쪽에 가장자리에 떠있는 형태로 구성되어 있다.
인덱스가 포함 된 경우 이러한 요소는 인덱스와 충돌하기 때문에 테이블의 오른쪽에 표시되는
테이블 뷰 요소의 사용을 피한다.
사용자가 목록 항목을 선택했을 때 항상 피드백을 제공한다. 사용자 들은 그들이 선택할 수 있는
항목을 눌렀을 때 테이블의 행이 밝아지길 기대한다. 탭 한 후에 사용자가 표시되도록 새로운
화면 또는 항목을 선택하거나 활성화되어 있는지를 보여주기 위해 행에 체크마크가 표시되길
기대한다.
드문 경우에 행은 행 항목과 관련된 이차적인 정보 및 제어가 같은 화면에 표시 될 때 강조된 채
남아 있을 지도 모른다. 그것이 불편하고 혼잡한 레이아웃을 만들 필요 없이 동시에 선택하고,
선택된 항목 및 관련 정보 또는 컨트롤의 목록을 표시하는 것은 어렵기 때문에 권장되지 않는다.
당신이 테이블 보기를 사용하는 경우 다음 지침을 따르면 된다.
사용자가 피드백을 제공하고, 직접 조작 감각을 강화하기 위해 항목을 애니메이션 사용을
고려해봐야 한다. 설정을 예로 들면 사용자가 날짜와 시간을 자동으로 설정 해제하면 목록
그룹에는 2 개의 새로운 아이템 시간대로 설정되어있는 날짜와 시간을 표시하도록 원할 하게
확장 한다.
테이블의 내용은 광범위하거나 복잡한 경우 모든 데이터가 무언가를 표시하기 전에 사용할 수
있을 때까지 기다리게 해서는 안 된다. 어플리케이션이 멈춘 것이라고 생각할 수 있기 때문에 빈
행을 표시하지 않도록 하는 것이 중요하다. 대신 테이블 화면의 중앙에 “로드 중”등의 정보를
레이블과 함께 회전 활동 표시기를 표시해야 한다. 이렇게 하면 처리가 계속 되고 있음을
사용자에게 알려줄 수 있다.
일반 테이블 가변 행의 높이는 피하라. 가변 행 높이는 그룹화 된 테이블에서 허용되지만, 그들은
일반 테이블이 어수선하고 불균일 하게 보일 수 있다.
이미지의 투명한 영역을 만들기 위해 흰색을 사용하지 않는다. 테이블 행의 배경이 하얗지는
않지만 이미지에 매우 흰 부분은 흰색으로 표시되고 배경과 섞여서 투명하게 표시되지 않는다.
일부분만 투명하게 보이길 원한다면, 그것을 투명하게 처리하면 된다.
적절한 경우 삭제 버튼은 사용자 지정 제목을 사용한다. 만약 그것이 당신의 어플리케이션
작업을 쉽게 이해하도록 도와준다면, 당신은 시스템에서 제공된 삭제 버튼 제목으로 교체할 수
있다.
일반적으로 값 1, 값 2 셀 스타일을 위해 그룹화 된 테이블을 사용한다. 당신이 테이블의 모든
유형을 가진 셀 스타일을 사용할 수 있지만 값 1 과 값 2 셀 스타일은 그룹화 된 테이블에 가장
적합하다. 예를 들면 설정은 값 1 셀 스타일을 사용한다.
iPhone 에서 연락처는 값 2 셀 스타일을 사용하고 있다.
가능하면 잘림 방지하기 위해 간결한 텍스트 레이블을 사용한다. 사용자가 이해하기에 축약된
단어와 구문은 어려울 수 있다. 텍스트 축약은 모든 테이블 셀 스타일에서 자동으로 이루어진다.
하지만 당신이 사용하고 있는 셀 스타일과 축약이 발생한 위치에 따라 다소 문제가 발생할 수
있다.
 기본 셀 스타일은 짧은 텍스트 레이블이 가장 적합하다. 축약이 불가피한 경우 가장
중요한 정보는 처음 몇 단어에 포함되어 있는지 확인해 본다.
 자막 셀 스타일은 너무 짧은 텍스트 레이블에 가장 적합하다. 축약이 불가피한 경우
먼저 몇 가지 단어 중 가장 중요한 정보를 담는다.
 자세한 텍스트 레이블이 축약된 경우, 그들은 텍스트 레이블로 지정된 아이템을
강화하거나 추가 정보로 그것을 표시하기 위해 사용자가 신경을 쓰지 않아야 한다.
 값 1 셀 스타일은 텍스트 축약을 방지하는 것은 어렵지만, 할 만한 가치는 있다. 그렇지
않으면, 사용자는 두 정보 사이의 관계를 이해하는데 도움이 되는 레이블 인터 액티브
공간을 잃는다.
 값 2 셀 스타일에서 축약된 텍스트 레이블은 그들과 상세 텍스트 사이의 수직 공백의
예리함을 무디게 한다.
당신은 텍스트 배치에 대응하기 위해 테이블의 행 높이를 높게 하여 텍스트 잘림을 방지 할 수
있을지도 모르지만, 이것은 이러한 이유로 문제가 될 수 있다.
당신은 프로그램적으로 텍스트의 길이를 측정하고 wrapping 이 발생할 가능성이 있는지 판단해야
한다. 테이블의 폭은 텍스트 배치에 영향을 미치기 때문에 세로와 가로 방향 중에 결정을 해야
한다.
변수 행 높이에 부정적인 것에 관계없이 테이블 뷰 스타일, 귀하의 응용 프로그램에서 전체
테이블 뷰 성능에 영향을 미칠 수 있다.
당신은 비표준적인 방법으로 테이블 행을 배치하려면 상당히 표준을 변경하는 것보다 그것은
사용자 정의 테이블 셀 스타일을 만드는 것이 좋다.
대신 즉시 텍스트 데이터와 화면의 행을 기입하고 그들이 사용할 수 있게 되면 더 복잡한
데이터가 표시된다.

Más contenido relacionado

La actualidad más candente

iOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4UiOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4Usys4u
 
Web Accessibility_SYS4U
Web Accessibility_SYS4UWeb Accessibility_SYS4U
Web Accessibility_SYS4Usys4u
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4Usys4u
 
iOS_Human_Interface_Guidlines_#4_SYS4U
iOS_Human_Interface_Guidlines_#4_SYS4UiOS_Human_Interface_Guidlines_#4_SYS4U
iOS_Human_Interface_Guidlines_#4_SYS4Usys4u
 
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4Usys4u
 
2013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_201310282013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_20131028Yun Jin Kim
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)Booseol Shin
 
HIG for iOS: UI Element (Bars, Views, Controls)
HIG for iOS: UI Element (Bars, Views, Controls)HIG for iOS: UI Element (Bars, Views, Controls)
HIG for iOS: UI Element (Bars, Views, Controls)Seungmin Shim
 

La actualidad más candente (8)

iOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4UiOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4U
 
Web Accessibility_SYS4U
Web Accessibility_SYS4UWeb Accessibility_SYS4U
Web Accessibility_SYS4U
 
iOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4UiOS Human Interface Guidlines #3_SYS4U
iOS Human Interface Guidlines #3_SYS4U
 
iOS_Human_Interface_Guidlines_#4_SYS4U
iOS_Human_Interface_Guidlines_#4_SYS4UiOS_Human_Interface_Guidlines_#4_SYS4U
iOS_Human_Interface_Guidlines_#4_SYS4U
 
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4U
 
2013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_201310282013 10 guide_to_mobile_appui_20131028
2013 10 guide_to_mobile_appui_20131028
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
 
HIG for iOS: UI Element (Bars, Views, Controls)
HIG for iOS: UI Element (Bars, Views, Controls)HIG for iOS: UI Element (Bars, Views, Controls)
HIG for iOS: UI Element (Bars, Views, Controls)
 

Destacado

웹어워드컨퍼런스강연자료 시스포유
웹어워드컨퍼런스강연자료 시스포유웹어워드컨퍼런스강연자료 시스포유
웹어워드컨퍼런스강연자료 시스포유sys4u
 
About Color_SYS4U
About Color_SYS4UAbout Color_SYS4U
About Color_SYS4Usys4u
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4Usys4u
 
2012 UX Design Trend Report Part 2_SYS4U I&C
2012 UX Design Trend Report Part 2_SYS4U I&C2012 UX Design Trend Report Part 2_SYS4U I&C
2012 UX Design Trend Report Part 2_SYS4U I&Csys4u
 
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&CUIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&Csys4u
 
UX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&CUX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&Csys4u
 
Advanced SWOT Analysis of e-commerce_SYS4U
Advanced SWOT Analysis of e-commerce_SYS4UAdvanced SWOT Analysis of e-commerce_SYS4U
Advanced SWOT Analysis of e-commerce_SYS4Usys4u
 
2012 UX Design Trend Report Part 1_SYS4U I&C
2012 UX Design Trend Report Part 1_SYS4U I&C2012 UX Design Trend Report Part 1_SYS4U I&C
2012 UX Design Trend Report Part 1_SYS4U I&Csys4u
 
JavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_sys4uJavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_sys4usys4u
 
Java_Concurrency_Programming_SYS4U
Java_Concurrency_Programming_SYS4UJava_Concurrency_Programming_SYS4U
Java_Concurrency_Programming_SYS4Usys4u
 
NAT and Hole Punching_SYS4U I&C
NAT and Hole Punching_SYS4U I&CNAT and Hole Punching_SYS4U I&C
NAT and Hole Punching_SYS4U I&Csys4u
 
Aspect Oriented Programming_SYS4U I&C
Aspect Oriented Programming_SYS4U I&CAspect Oriented Programming_SYS4U I&C
Aspect Oriented Programming_SYS4U I&Csys4u
 
2013 UX Design Trend Report Part 3_SYS4U I&C
2013 UX Design Trend Report Part 3_SYS4U I&C2013 UX Design Trend Report Part 3_SYS4U I&C
2013 UX Design Trend Report Part 3_SYS4U I&Csys4u
 
Java reflection & introspection_SYS4U I&C
Java reflection & introspection_SYS4U I&CJava reflection & introspection_SYS4U I&C
Java reflection & introspection_SYS4U I&Csys4u
 
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4UMemory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4Usys4u
 

Destacado (15)

웹어워드컨퍼런스강연자료 시스포유
웹어워드컨퍼런스강연자료 시스포유웹어워드컨퍼런스강연자료 시스포유
웹어워드컨퍼런스강연자료 시스포유
 
About Color_SYS4U
About Color_SYS4UAbout Color_SYS4U
About Color_SYS4U
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4U
 
2012 UX Design Trend Report Part 2_SYS4U I&C
2012 UX Design Trend Report Part 2_SYS4U I&C2012 UX Design Trend Report Part 2_SYS4U I&C
2012 UX Design Trend Report Part 2_SYS4U I&C
 
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&CUIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
UIX UNIT_Several UI Teminologies Easy To Miss_SYS4U I&C
 
UX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&CUX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&C
 
Advanced SWOT Analysis of e-commerce_SYS4U
Advanced SWOT Analysis of e-commerce_SYS4UAdvanced SWOT Analysis of e-commerce_SYS4U
Advanced SWOT Analysis of e-commerce_SYS4U
 
2012 UX Design Trend Report Part 1_SYS4U I&C
2012 UX Design Trend Report Part 1_SYS4U I&C2012 UX Design Trend Report Part 1_SYS4U I&C
2012 UX Design Trend Report Part 1_SYS4U I&C
 
JavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_sys4uJavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_sys4u
 
Java_Concurrency_Programming_SYS4U
Java_Concurrency_Programming_SYS4UJava_Concurrency_Programming_SYS4U
Java_Concurrency_Programming_SYS4U
 
NAT and Hole Punching_SYS4U I&C
NAT and Hole Punching_SYS4U I&CNAT and Hole Punching_SYS4U I&C
NAT and Hole Punching_SYS4U I&C
 
Aspect Oriented Programming_SYS4U I&C
Aspect Oriented Programming_SYS4U I&CAspect Oriented Programming_SYS4U I&C
Aspect Oriented Programming_SYS4U I&C
 
2013 UX Design Trend Report Part 3_SYS4U I&C
2013 UX Design Trend Report Part 3_SYS4U I&C2013 UX Design Trend Report Part 3_SYS4U I&C
2013 UX Design Trend Report Part 3_SYS4U I&C
 
Java reflection & introspection_SYS4U I&C
Java reflection & introspection_SYS4U I&CJava reflection & introspection_SYS4U I&C
Java reflection & introspection_SYS4U I&C
 
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4UMemory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4U
 

Similar a iOS Human Interface Guidlines #15_SYS4U

Chartschool1 0 manual
Chartschool1 0 manualChartschool1 0 manual
Chartschool1 0 manualyoungdae ha
 
Guide To Mobile App UI
Guide To Mobile App UI Guide To Mobile App UI
Guide To Mobile App UI Yun Jin Kim
 
자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃
자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃
자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃Dongsik Yang
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표Minho Lee
 
안드로이드 리스트뷰 속도향상
안드로이드 리스트뷰 속도향상안드로이드 리스트뷰 속도향상
안드로이드 리스트뷰 속도향상운용 최
 
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표Minho Lee
 

Similar a iOS Human Interface Guidlines #15_SYS4U (6)

Chartschool1 0 manual
Chartschool1 0 manualChartschool1 0 manual
Chartschool1 0 manual
 
Guide To Mobile App UI
Guide To Mobile App UI Guide To Mobile App UI
Guide To Mobile App UI
 
자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃
자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃
자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표
 
안드로이드 리스트뷰 속도향상
안드로이드 리스트뷰 속도향상안드로이드 리스트뷰 속도향상
안드로이드 리스트뷰 속도향상
 
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
 

Más de sys4u

iOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4UiOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4Usys4u
 
Observer Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4UObserver Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4Usys4u
 
30_eCommerce_sites_using_html5_SYS4U
30_eCommerce_sites_using_html5_SYS4U30_eCommerce_sites_using_html5_SYS4U
30_eCommerce_sites_using_html5_SYS4Usys4u
 
Proxy_design_pattern_in_Java_SYS4U
Proxy_design_pattern_in_Java_SYS4UProxy_design_pattern_in_Java_SYS4U
Proxy_design_pattern_in_Java_SYS4Usys4u
 
Implementing_AOP_in_Spring_SYS4U
Implementing_AOP_in_Spring_SYS4UImplementing_AOP_in_Spring_SYS4U
Implementing_AOP_in_Spring_SYS4Usys4u
 
Promotions_2nd_SYS4U I&C
Promotions_2nd_SYS4U I&CPromotions_2nd_SYS4U I&C
Promotions_2nd_SYS4U I&Csys4u
 
JavaScript Profiling With The Chrome Developer Tools_SYS4U I&C
JavaScript Profiling With The Chrome Developer Tools_SYS4U I&CJavaScript Profiling With The Chrome Developer Tools_SYS4U I&C
JavaScript Profiling With The Chrome Developer Tools_SYS4U I&Csys4u
 
From Java code to Java heap_SYS4U I&C
From Java code to Java heap_SYS4U I&CFrom Java code to Java heap_SYS4U I&C
From Java code to Java heap_SYS4U I&Csys4u
 
Introduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&CIntroduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&Csys4u
 

Más de sys4u (9)

iOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4UiOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4U
 
Observer Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4UObserver Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4U
 
30_eCommerce_sites_using_html5_SYS4U
30_eCommerce_sites_using_html5_SYS4U30_eCommerce_sites_using_html5_SYS4U
30_eCommerce_sites_using_html5_SYS4U
 
Proxy_design_pattern_in_Java_SYS4U
Proxy_design_pattern_in_Java_SYS4UProxy_design_pattern_in_Java_SYS4U
Proxy_design_pattern_in_Java_SYS4U
 
Implementing_AOP_in_Spring_SYS4U
Implementing_AOP_in_Spring_SYS4UImplementing_AOP_in_Spring_SYS4U
Implementing_AOP_in_Spring_SYS4U
 
Promotions_2nd_SYS4U I&C
Promotions_2nd_SYS4U I&CPromotions_2nd_SYS4U I&C
Promotions_2nd_SYS4U I&C
 
JavaScript Profiling With The Chrome Developer Tools_SYS4U I&C
JavaScript Profiling With The Chrome Developer Tools_SYS4U I&CJavaScript Profiling With The Chrome Developer Tools_SYS4U I&C
JavaScript Profiling With The Chrome Developer Tools_SYS4U I&C
 
From Java code to Java heap_SYS4U I&C
From Java code to Java heap_SYS4U I&CFrom Java code to Java heap_SYS4U I&C
From Java code to Java heap_SYS4U I&C
 
Introduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&CIntroduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&C
 

iOS Human Interface Guidlines #15_SYS4U

  • 1. Human Interface Guidelines 번역자 : 시스포유아이앤씨 마영희 주임 작성일 : 2013 년 7 월 12 일 VIII.iOS UI요소 사용 가이드라인 POPOVER (아이패드 전용) 팝 오버는 사람들이 컨트롤이나 화면 영역을 누를 때 나타나는 일시적인 화면이다. 중요 : 팝 오버는 오직 아이패드 어플리케이션에서만 나타난다.
  • 2. 외관 과 동작 팝 오버는 컨텐츠 화면 위에 떠있는 독립적인 화면이다. 그것이 나타날 때 만다 항상 화살표가 표시된다. 팝 오버는 광 범위한 개체와 화면을 표시한다.  표, 이미지,지도, 텍스트, 웹 또는 사용자 보기  네비게이션 바, 툴바 또는 탭바  컨트롤 또는 현재 애플리케이션 뷰 개체에 작용하는 개체 iPad 의 어플리케이션의 액션 시트는 항상 팝 오버 안쪽에 나타난다. 가이드 라인 당신은 다음과 같은 팝 오버를 사용할 수 있다. 추가 정보 및 초점 개체와 관련된 항목의 목록을 표시합니다. 화면과 밀접하게 관련이 있는 옵션에 대한 간단한 목록이 포함 된 액션 시트를 표시한다. 스플릿 뷰 기반 응용 프로그램이 수직으로 되어 있을 때 왼쪽 창에서 내용을 표시한다. 이렇게 하려면 다음 중 하나 팝 오버 또는 사람들이 그것을 숨기거나 나타내기 위해 제스처를 할 수 있는 적절한 제목 버튼을 제공한다. “팝 오버를 차단” 하는 버튼을 제공하는 것을 피하라. 팝 오버는 그것이 더 이상 필요하지 않을 때 자동으로 닫히게 해야 한다. 팝 오버의 존재가 불필요하게 되었을 때 확인하려면 다음 시나리오를 생각해 보면 된다. 팝 오버가 오직 옵션 설정이나 메인 화면에 효과를 주는 아이템을 제공하기 위한 기능이라면, 사람들이 즉시 그것을 선택하게 만들어야 한다. 이 동작은 컴퓨터의 어플리케이션의 메뉴와 매우 유사하다. 이 동작은 또한 액션 시트가 포함 되어있는 팝 오버에 적용되는 점에 유의해야 한다. 사람들이 액션 시트의 버튼을 누르면 즉시, 팝 오버는 닫아야 한다. 경우에 따라서는 메인 화면에 영향을 주는 항목이 포함되어 팝 오버를 제공하기 위해 이해 될 수 있지만, 사람들이 선택을 할 때 닫히지 않는다. 당신은 팝 오버에 관리자를 구현할 때 사람들은
  • 3. 추가 선택을 하거나 현재의 선택 속성을 변경하는 경우가 있기 때문에 이 작업을 수행 할 수 있다. 메뉴 및 관리자 기능을 제공하는 팝 오버는 팝 오버를 제시하는 통제를 포함하여 그 경계 밖의 사람들은 어디서나 그것을 닫는다. 선택 메뉴는 제공한다. 팝 오버는 이 제스처를 사용자가 선택하지 않았다는 것을 결정했다는 것을 의미한다. 팝 오버 작업을 활성화하려면 완료 또는 취소 작업을 할 때, 팝 오버 거부 버튼을 표시하는 것이 적절하다. 일반적으로 사람들이 눌러서 밖으로 나올 때도 편집작업이 종료되지 않는 팝 오버는 종료 버튼과 취소 버튼을 표시해야 한다. 이 버튼들은 편집환경에 있고, 그들을 명시적으로 입력을 유지하거나 폐기 할 수 있는 것을 사람들에게 상기 시키는 것에 도움이 된다. 사람들이 하나의 버튼을 누르면 팝 오버는 닫아야 한다. 일반적으로 popover 의 경계선을 누를 때 사용자의 작업을 저장한다. 모든 popover 가 명백하게 제거 되지는 않기 때문에 사람들이 실수로 그것을 제거할 수 있다. 사람들이 취소 버튼을 눌렀을 때만 popover 을 제거할 수 있게 해야 한다. popover 의 화살표가 최대한으로 요소를 분명하게 나타내고 있는지 확인 해야 한다. 이렇게 하면, 팝 오버가 어디에서 왔는지, 그것이 관련된, 작업 또는 개체들을 사람들이 기억하는데 도움이 된다. 사람들이 어플리케이션의 내용을 보지 않고 popover 를 사용할 수 있는지 확인해야 한다. 사람들은 popover 를 또 다른 위치로 드래그 할 수 없다. 유일한 popover 는 화면에 표시되어 있는지 확인 해야 한다. 동시에 하나 이상의 popover 를 표시 할 수 없다. 특히, 동시에 popover 의 계층 또는 캐스케이드를 표시하는 것을 피해야 한다. popover 상단에 모달 뷰를 표시하지 않는다. 경고를 제외하고는 어떤 것도 popover 의 상단에 표시해서는 안 된다. 가능하다면, 사람들이 하나의 탭으로 하나의 popover 를 열고 닫을 수 있어야 한다. 이 동작은 사람들이 추가적으로 탭을 하는 것을 방지할 수 있기 때문에, 여러 개의 다른 바에 각각의 popover 를 여는 버튼이 있을 때 적합하다. 너무 큰 popover 를 만드는 것은 피하라. Popover 가 화면 전체를 덮어서는 안 된다. 대신에 내용을 충분하게 표시할 수 있어야 한다. 이상적인 popover 의 폭은 320 포인트 정도 이지만 600 포인트보다는 작아야 한다. Popover 의 높이가 제한이 없기 때문에 긴 항목의 목록을 표시하기 위해 그것을 사용할 수 있다.
  • 4. 일반적으로 활성화된 작업이나 액션 시트에 표현된 것들을 popover 에서 스크롤링 되는 것을 피해야 한다. 시스템은 그것이 화면에 잘 맞는 것을 확인하기 위해 popover 의 높이와 폭을 조정해야 할지도 모른다는 점을 유의해야 한다. 일반적으로 popover 에서 표준 UI 컨트롤 과 뷰를 사용할 수 있다. Popover 가 표준 컨트롤과 화면을 포함하고 있으면 보기에 좋고 사용자가 쉽게 이해할 수 있다. Popover 를 사용자 정의 한다. 비록 UIPopoverBackgroundView APIs 사용으로 popover 의 비주얼적인 많은 측면이 쉽게 사용자 정의 되었을 지라도 사람들이 popover 를 인식하지 못하는 디자인으로 만드는 것을 피하는 것이 좋다. Popover 의 외관을 너무 많이 바꾸면 사람들이 당신의 어플리케이션을 이해하기 어려울 수 있다. 표준 컨트롤과 화면과 사용자 정의된 배경색과 질감을 조합했을 경우 주의해야 한다. 표준 UI 요소가 보기에 적합하고 사용자들이 쉽게 읽을 수 있는지 확인해야 한다. 보이는 부분이 남아 있을 때 popover 의 사이즈를 변경한다. 당신은 최소한의 화면과 정보와 동일한 부분을 모두 표시하기 위해 사용하는 경우 popover 의 크기를 변경할 수 있다. 만약 그것이 보여지는 동안 popover 의 사이즈를 조정하는 경우 애니메이션 효과를 선택할 수 있다. 새로운 popover 가 이전 것을 대체했다고 생각하는 것을 피할 수 있기 때문에 애니메이션을 통한 변화는 좋은 생각이다.
  • 5. Scroll View 스크롤 뷰는 사람들이 스크롤 뷰의 경계보다 큰 콘텐츠를 볼 수 있게 한다. 외관 과 동작 스크롤 뷰가 처음 나타날 때 수직 또는 수평 스크롤 지표에 보여줄 수 있는 많은 콘텐츠가 있음을 사용자에게 보여주기 위해 잠시 깜박인다. 스크롤 뷰는 미지 정의된 모양을 가지고 있지 않다. 스크롤 뷰는 사람들에게 자연스러운 느낌의 방법으로 내용을 공개하는 제스처의 속도와 방향에 응답한다. 스크롤 뷰의 드래그 또는 쓸어 넘기기 동작은 콘텐츠에 하나의 어플리케이션으로 정의된 페이지를 나타내는 페이징 모드에서 작동할 수 있다. 가이드 라인 당신은 제한된 공간에서 큰 화면에 접속하기 위해 스크롤 뷰를 사용할 수 있다. 사람들이 iOS 의 전체 스크롤 뷰를 사용하는 것에 익숙해져 있기 때문에 사람들이 예상 한대로 어플리케이션의 스크롤이 동작하는지 확인해야 한다. 적절한 확대 동작을 지원한다. 확대가 가능할 때 사용자의 작업 내용이 알아볼 수 있을 정도의 크기로 최대 와 최소 값을 정해야 정해야 한다.
  • 6. 페이지 컨트롤과 함께 페이징 모드 스크롤 뷰를 사용하는 것을 고려해야 한다. 당신이 까다롭거나 큰 덩어리로 나눠진 페이지의 컨텐츠를 보여주길 원할 때 이용 가능한 덩어리만 말하거나 현재 화면에 보여지는 것 하나를 보여주는 방식이 좋다. 일반적으로 동시에 여러 스크롤 뷰를 표시한다. 사람들이 스크롤 할 때 종종 크게 Swipe 제스처를 취하기 때문에 같은 화면에서 이웃 스크롤 뷰와 상호 작용하지 않도록 하는 것이 어려울 수 있다. 당신이 한 화면에서 두 개의 스크롤 뷰를 넣기로 결정한 경우, 하나의 제스처가 두 뷰를 스크롤 할 가능성이 적다. 그래서 서로 다른 방향으로 스크롤 할 수 있도록 고려해야 한다. 예를 들어, 가로 스크롤 뷰의 회사 고유의 정보를 위의 수직 스크롤 뷰의 iPhone 디스플레이의 주가에 수직으로 제공한다. Split View (iPad 전용) 분할 화면은 2 개의 사이드 창으로 구성된 전체화면이다. 분할 뷰에는 분할 뷰의 창 표시를 관리하는 분할 뷰 컨트롤러가 포함되어 있다. 중요: 분할 뷰는 iPad 어플리케이션에서 이용 가능하다.
  • 7. 외관과 동작 분할 뷰는 2 개의 창으로 구성되어 있다. 왼쪽 창 폭은 모든 방향에서 320 포인트로 고정되어 있다. 사용자는 분할 뷰중 하나의 창 크기를 변경할 수 없다. 노트: 왼쪽 창은 종종 마스터 창 이라고 하는 불리고 오른쪽 창은 세부 정보창 이라고 불리기도 하지만 이 관계는 코드에 적용되지 않는다. 두 창에는 개체와 화면 등의 다양한 것을 포함한다. 가령,  테이블, 이미지, 맵, 텍스트,웹, 사용자 지정 화면  네비게이션 바, 툴 바, 탭 바 가이드 라인 당신은 왼쪽 창 및 관련 정보 또는 오른쪽 창 아래 정보 영구적인 정보를 표시하려면 분할 된 뷰를 사용할 수 있다. 이 디자인 패턴은 사람들이 왼쪽 창에서 항목을 선택하면 오른쪽 창에서 해당 항목과 관련된 정보를 표시해야 한다. 장치가 수직으로 회전할 때 어플리케이션의 가로방향 분할 뷰를 사용하는 경우, 팝 오버에서 왼쪽 창의 내용이 표시된다. 그러나 당신은 이 패턴을 따를 필요는 없다. 당신은 모든 방향에서 사이드 화면을 표시하도록 UI 를 디자인 할 수 있다. 왼쪽 창 보다 좁은 오른쪽 창을 만드는 것을 피하라. 오른쪽 창의 폭은 당신이 조정할 수 있지만 320 포인트 보다 작으면 적절하게 보이지 않는다. 동시에 두 창에 네비게이션 바를 표시하는 것을 피하라. 이렇게 하면 사용자가 두 개의 창사이의 관계를 파악하기 매우 어렵다. 일반적으로 영구적인 방법으로 왼쪽 창에서 현재 선택을 보여준다. 이 동작은 사람들이 왼쪽 창에서 항목을 오른쪽 창 내용 사이의 관계를 이해하는 데 도움이 된다. 오른쪽 창의 내용을 변경할 수 없기 때문에 이것은 중요하지만, 항상 왼쪽 창에서 선택한 항목에 관련된 것을 유지하도록 해야 한다. 사람들이 왼쪽 창에 접근 하기 위해 Swipe 제스처를 사용하도록 할 수 있게 해야 한다. 기본적으로 오른쪽 창은 세로 방향으로 표시되며 왼쪽 창을 나타내거나 숨기기 위한 버튼이 제공된다. iOS5.1 이상에서는 분할 뷰 컨트롤러도 나타내거나 숨기는 동작을 실행하는 Swipe 제스처를 지원한다.
  • 8. 만일 당신의 어플리케이션이 또 다른 기능을 사용하기 위해 Swipe 제스처를 사용한다면 사람들이 왼쪽 창에서 그것을 접근할 수 있도록 해야 한다. Table View 테이블 뷰는 여러 행의 단일 열 목록에 데이터를 제공 한다. 외관 과 동작 테이블 뷰는 섹션으로 나누거나 그룹으로 나눌 수 있는 행을 표시한다. 사용자는 그것을 선택하고 추가 또는 삭제할 행을 여러 행을 선택하고 행 항목에 대한 자세한 내용을 참조하거나 다른 테이블 뷰를 나타내기 위해 테이블 뷰 컨트롤을 사용하여 테이블 행을 누른다. 사용자가 선택 가능한 항목을 누를 때 테이블의 행이 쉽게 강조표시 된다. 사용자가 선택 가능한 항목을 누를 때 테이블의 행이 쉽게 강조 표시된다. 새로운 화면에 탐색 줄 선택 결과 경우 선택된 행은 제자리에 새로운 화면 슬라이드로 짧게 강조하고 있다. 사용자가 다시 이전 화면으로 이동하면 처음 선택한 행이 다시 그들의 이전 선택을 사용자에게 상기시켜 일시적으로 강조하고 있다.
  • 9. iOS 는 주로 외관으로 구별되는 테이블 뷰의 두 가지 스타일을 정의 한다. 일반 테이블은 화면의 폭을 확장하여 행을 표시한다. 행은 레이블이 붙은 섹션으로 나눌 수 있고 인덱스 뷰의 오른쪽 가장자리를 따라 세로로 나타날 수 있다. 그룹화 된 표는 측면 가장자리에 삽입된 행 그룹에 표시 된다. 그룹화 된 테이블 뷰는 항상 목록의 항목 중 적어도 하나의 그룹을 포함하고 각 그룹은 적어도 하나의 항목을 포함한다. 그룹 헤더에 의해 선행을 할 수 있고 footer 를 따른다. 기본적으로 그룹은 독특한 파랑 줄무늬 배경에 표시되고 그룹 내부에서는 행의 배경이 유백색이다. 그룹화 된 테이블 뷰는 인덱스를 포함하지 않는다.
  • 10. 별도로 명시하지 않는 한 이러한 요소는 테이블 뷰 에서 사용하기에 적합하다. 테이블 7-1 테이블 뷰 요소 표 7-1 에 나열되어있는 테이블 고유의 요소 이외에, iOS 가 사용자에게 테이블의 내용을 업데이트하는 기능을 제공한다. 이는 재생 제어를 의미한다. iOS 는 평범하고 그룹화 된 두 테이블에 테이블 행에 대한 가장 일반적인 레이아웃을 구현하는 4 개의 테이블 셀 스타일을 정의 한다. 각 셀 스타일이 가장 다른 유형의 정보를 표시하는 데 적합하다. 노트 : 프로그램에서 이러한 스타일은 행을 그리는 방법을 표에 지시한 객체인 테이블 뷰 셀에 적용된다. 기본 셀 스타일은 검은색의 왼쪽 정렬을 따르고 행의 끝에 추가적인 이미지가 포함되어 있다.
  • 11. 기본 셀 스타일에서 텍스트 레이블의 모양은 항목 이름이나 제목을 나타내고 왼쪽 정렬은 사람들이 쉽게 볼 수 있게 만든다. 이 보충 정보로 차별화 할 필요가 없는 항목의 목록을 표시하기 위한 좋은 스타일을 만든다. 부제목 스타일은 행의 왼쪽에 추가적인 이미지를 포함하고 제목은 왼쪽정렬을 따른다. 제목은 검은색이고 부제목은 그 보다는 작으며 회색 폰트이다. 자막 셀 스타일은 텍스트 레이블의 멋진 외관 세부 텍스트 레이블의 세밀한 외관은 그것이 항목 관련 자회사의 정보가 포함되어 있다는 것을 의미하는 반면, 그것은 필드 이름 또는 제목을 나타내는 것을 의미한다. 값 1 스타일은 왼쪽정렬 되어있는 검은색의 제목과 같은 줄에 조금 작게 오른쪽 정렬되어 파란색폰트로 배치된다, 이미지는 이 스타일에 잘 맞지 않는다. 값 1 의 셀 스타일에서 텍스트 레이블은 항목의 이름 또는 제목을 나타내는 반면 상세 텍스트 레이블은 그 항목과 관련된 정보를 나타낸다. 왼쪽 정렬된 텍스트 레이블은 사람들이 원하는 항목을 찾는데 도움을 주고 오른쪽 정렬된 상세 텍스트 레이블은 그것과 관련된 정보를 아는데 도움을 준다. 이 테이블 셀의 스타일은 아마도 하위 목록에서 선택된 항목의 현재 값을 표시하기에 적합하다.
  • 12. 값 2 스타일은 오른쪽 정렬로 작게 파란색으로 표시되고 왼쪽 정렬된 부제목과 같은 열에 배치된다. 하지만 이미지에는 이 스타일이 적합하지 않다. 값 2 셀 스타일은 텍스트 레이블의 오른쪽 정렬, 제약 폭 글꼴이 암시 더 두드러진 왼쪽의 세부 텍스트 레이블의 중요한 정보는 제목이나 캡션 등이 가능하다. 이 레이아웃에서 레이블은 모든 행이 같은 위치에 서로를 향해 배열되어 있다. 텍스트 레이블과 상세 텍스트 레이블 목록 사이에 선명한 수직 여백을 만드는 것은 사용자가 첫 단어에 집중하는데 도움을 준다. 노트: 4 개의 표준 테이블 셀 스타일 또한 공개 지표로, 테이블 뷰 요소를 추가할 수 있다. 이러한 요소를 추가하면 제목과 부제목을 위해 사용 가능한 셀의 폭을 감소시킨다. 가이드 라인 당신은 정보의 양이 많거나 적거나 명확하고 효율적으로 테이블 뷰를 통해 보여줄 수 있다. 예를 들면 다음과 같은 테이블 뷰를 사용할 수 있다. 사용자가 선택할 수 있는 옵션의 목록을 제공한다. 당신은 목록에 있는 사용자에게 현재 선택한 옵션을 표시하는 체크마크를 사용할 수 있다. 그들이 테이블 행의 항목을 누를 때 선택된 항목을 표시하기 위해서 당신은 일반 또는 그룹 테이블 뷰를 사용할 수 있다. 테이블 행이 아닌 UI 요소나 버튼을 눌렀을 때 사용자에게 보여지는 항목을 표시하기 위해서 일반 스타일을 사용할 수 있다. 계층적으로 그룹화된 정보를 표시한다. 일반 테이블 스타일은 정보의 계층을 표시하기에 적합하다. 그룹화된 스타일의 둥근 코너는 정보를 쉽게 볼 수 있게 만든다. 심지어 사용자들이 스크롤링을 빠르게 할 때도 그렇다.
  • 13. iOS 6.0 이상에서는 텍스트 또는 머리글 바닥 글 지정보기를 표시하려면 헤더 바닥 글보기를 사용할 수 있다. 검색을 용이하게 하기 위한 인덱스를 표시한다. 일반 스타일은 사용자가 신속하게 그들이 필요한 것을 찾는데 도움이 된다. 인덱스는 화면의 오른쪽에 가장자리에 떠있는 형태로 구성되어 있다. 인덱스가 포함 된 경우 이러한 요소는 인덱스와 충돌하기 때문에 테이블의 오른쪽에 표시되는 테이블 뷰 요소의 사용을 피한다. 사용자가 목록 항목을 선택했을 때 항상 피드백을 제공한다. 사용자 들은 그들이 선택할 수 있는 항목을 눌렀을 때 테이블의 행이 밝아지길 기대한다. 탭 한 후에 사용자가 표시되도록 새로운 화면 또는 항목을 선택하거나 활성화되어 있는지를 보여주기 위해 행에 체크마크가 표시되길 기대한다. 드문 경우에 행은 행 항목과 관련된 이차적인 정보 및 제어가 같은 화면에 표시 될 때 강조된 채 남아 있을 지도 모른다. 그것이 불편하고 혼잡한 레이아웃을 만들 필요 없이 동시에 선택하고, 선택된 항목 및 관련 정보 또는 컨트롤의 목록을 표시하는 것은 어렵기 때문에 권장되지 않는다. 당신이 테이블 보기를 사용하는 경우 다음 지침을 따르면 된다. 사용자가 피드백을 제공하고, 직접 조작 감각을 강화하기 위해 항목을 애니메이션 사용을 고려해봐야 한다. 설정을 예로 들면 사용자가 날짜와 시간을 자동으로 설정 해제하면 목록 그룹에는 2 개의 새로운 아이템 시간대로 설정되어있는 날짜와 시간을 표시하도록 원할 하게 확장 한다. 테이블의 내용은 광범위하거나 복잡한 경우 모든 데이터가 무언가를 표시하기 전에 사용할 수 있을 때까지 기다리게 해서는 안 된다. 어플리케이션이 멈춘 것이라고 생각할 수 있기 때문에 빈 행을 표시하지 않도록 하는 것이 중요하다. 대신 테이블 화면의 중앙에 “로드 중”등의 정보를 레이블과 함께 회전 활동 표시기를 표시해야 한다. 이렇게 하면 처리가 계속 되고 있음을 사용자에게 알려줄 수 있다. 일반 테이블 가변 행의 높이는 피하라. 가변 행 높이는 그룹화 된 테이블에서 허용되지만, 그들은 일반 테이블이 어수선하고 불균일 하게 보일 수 있다. 이미지의 투명한 영역을 만들기 위해 흰색을 사용하지 않는다. 테이블 행의 배경이 하얗지는 않지만 이미지에 매우 흰 부분은 흰색으로 표시되고 배경과 섞여서 투명하게 표시되지 않는다. 일부분만 투명하게 보이길 원한다면, 그것을 투명하게 처리하면 된다.
  • 14. 적절한 경우 삭제 버튼은 사용자 지정 제목을 사용한다. 만약 그것이 당신의 어플리케이션 작업을 쉽게 이해하도록 도와준다면, 당신은 시스템에서 제공된 삭제 버튼 제목으로 교체할 수 있다. 일반적으로 값 1, 값 2 셀 스타일을 위해 그룹화 된 테이블을 사용한다. 당신이 테이블의 모든 유형을 가진 셀 스타일을 사용할 수 있지만 값 1 과 값 2 셀 스타일은 그룹화 된 테이블에 가장 적합하다. 예를 들면 설정은 값 1 셀 스타일을 사용한다. iPhone 에서 연락처는 값 2 셀 스타일을 사용하고 있다.
  • 15. 가능하면 잘림 방지하기 위해 간결한 텍스트 레이블을 사용한다. 사용자가 이해하기에 축약된 단어와 구문은 어려울 수 있다. 텍스트 축약은 모든 테이블 셀 스타일에서 자동으로 이루어진다. 하지만 당신이 사용하고 있는 셀 스타일과 축약이 발생한 위치에 따라 다소 문제가 발생할 수 있다.  기본 셀 스타일은 짧은 텍스트 레이블이 가장 적합하다. 축약이 불가피한 경우 가장 중요한 정보는 처음 몇 단어에 포함되어 있는지 확인해 본다.  자막 셀 스타일은 너무 짧은 텍스트 레이블에 가장 적합하다. 축약이 불가피한 경우 먼저 몇 가지 단어 중 가장 중요한 정보를 담는다.  자세한 텍스트 레이블이 축약된 경우, 그들은 텍스트 레이블로 지정된 아이템을 강화하거나 추가 정보로 그것을 표시하기 위해 사용자가 신경을 쓰지 않아야 한다.  값 1 셀 스타일은 텍스트 축약을 방지하는 것은 어렵지만, 할 만한 가치는 있다. 그렇지 않으면, 사용자는 두 정보 사이의 관계를 이해하는데 도움이 되는 레이블 인터 액티브 공간을 잃는다.  값 2 셀 스타일에서 축약된 텍스트 레이블은 그들과 상세 텍스트 사이의 수직 공백의 예리함을 무디게 한다. 당신은 텍스트 배치에 대응하기 위해 테이블의 행 높이를 높게 하여 텍스트 잘림을 방지 할 수 있을지도 모르지만, 이것은 이러한 이유로 문제가 될 수 있다.
  • 16. 당신은 프로그램적으로 텍스트의 길이를 측정하고 wrapping 이 발생할 가능성이 있는지 판단해야 한다. 테이블의 폭은 텍스트 배치에 영향을 미치기 때문에 세로와 가로 방향 중에 결정을 해야 한다. 변수 행 높이에 부정적인 것에 관계없이 테이블 뷰 스타일, 귀하의 응용 프로그램에서 전체 테이블 뷰 성능에 영향을 미칠 수 있다. 당신은 비표준적인 방법으로 테이블 행을 배치하려면 상당히 표준을 변경하는 것보다 그것은 사용자 정의 테이블 셀 스타일을 만드는 것이 좋다. 대신 즉시 텍스트 데이터와 화면의 행을 기입하고 그들이 사용할 수 있게 되면 더 복잡한 데이터가 표시된다.