아이패드(iPad) UI Element Guidelines

아이패드의 UI를 설계할 때 각 요소들의 기능 및 성격, 어떨 때 사용하고 사용하지 말아야 하는지 구체적으로 파악하고 해야 할 것 같다.

다른 어플을 보고 대략 추측하는 것 보다는 가이드라인을 파악하여 각 컨트롤들의 용도와 정의를 잘 알고 사용해야 할 듯.

 

원문 : iPad UI Element Guidelines

 

 

 

 

 

iPad UI Element Guidelines.

 

 

 

 

 

Bars.                                                               

Status bar, navigation bar, tab bar, toolbar는 각각 정해진 형태와 기능이 있다. 아이폰의 것들과 거의 비슷하지만 아이패드에서 다른 점들을 확인해 봐야 한다.

 

 

 

 

 

The Status Bar

 

Status bar는 스크린의 상단에 작게 나타난다. 네트웍 연결, 시각, 베터리 등의 정보를 보여준다.

 

게임과 같는 풀스크린으로 보여줘야 하는 어플리케이션이 아니면 Status Bar는 가능하면 숨기지 말라.

대부분의 아이패드 어플리케이션에서는 공간 확보를 위해 Status bar를 숨길 필요는 없다. Status bar가 어플리케이션의 화면과 부딪히거나 사용자의 주의를 끌지는 않는다. Figuire 4-1처럼, 작은 사이즈의 Status bar는 디바이스의 배경처럼 보이기 위해 가장자리가 약간 라운드 처리 되어 있는 것을 볼 수 있다.

 

Figure 4-1  Status bar는 아이패드에서 배경과 잘 뭍혀 보인다.

 

 

 

 

 

사용자가 풀스크린화면을 보는 동안 status bar를 숨기는 것(다른 모든 어플리케이션 UI 포함)을 고려하라.

Status bar를 숨긴다면, 한 번의 탭으로 다시 Status bar(다른 필요한 UI도)가 나올 수 있게 하라.

게임 어플리케이션에서 계속 status bar를 숨긴다면, 그 영향을 잘 고려해 봐야 한다. Status bar를 계속 숨긴다는 것은, 예를 들면 사용자가 디바이스를 충전해야 할 것 같을 때 status bar를 보기 위해 어플리케이션을 종료해야 한다는 것을 의미한다.

 

 

 

 

 

 

 

 

Navigation bar

 

Navigtion bar는 스크린의 상단에 나타난다. 보통 현재 화면의 제목을 보여주고, 컨텐츠를 컨트롤 할 수 있는 버튼과, 필요하면 네비게이션 할 수 있는 컨트롤을 보여준다.

 

Figure 4-2 Navigation bar에는 navigation 버튼과 기타 컨트롤 버튼이 있다.

 

 

 

 

Note : navigation bar는 아이패드 어플리케이션에서 사용되지만, 아이폰 어플리케이션처럼 흔히 사용되지 않는다. navigation bar를 사용하기 전에 "Flatten Your Information Hierarchy"를 확인해 보아라. (iPad에서는 정보구조를 여러 단계로 진입하게 하지 않고 한 화면에 펼쳐서 보여주기 때문에 navigation bar의 사용을 추천하지는 않는 것 같다.)

 

 

아이패드 어플리케이션에서 navigation bar를 사용할 수 있는 곳:

 

분할된 화면의 각각의 영역

· Popover

· Modal view

· 전체화면 view (아이패드 어플리케이션에서 자주 사용하지는 않는다.)

 

 

 

사용자가 정보구조를 깊숙히 들어가도록 할 때 navigation bar를 사용하라. 어플리케이션 전체나 tab, 분할된 화면, popover와 같은 별도의 view의 최상단에서 사용할 수 있다.

 

· Settings에서는 navigation bar를 분할된 화면의 오른쪽에서 사용한다. 사용자는 왼쪽 화면에서 선택한 어플리케이션이나 기능의 하부 설정으로 이동할 수 있다.

· Calendar에서는 일정 추가 popover에서 naigation bar를 사용함으로써 popover안에서 상세 화면을 이동할 수 있게 한다. 어떤 값을 입력하기 위해, 사용자는 새 popover화면으로 이동하지만(navigation bar를 이용해서), 그대로 popover안에 머무를 수 있는 것이다.

· iTunes는 navigation bar를 탭 안의 컨텐츠 속으로 여러 단계를 들어갈 수 있게 하기 위해 navigation bar를 사용한다.

 

 

현재 화면의 title을 navigation bar의 title로 사용하라. 사용자가 새로운 화면으로 네비게이션 할 때, 아래 두가지 사항을 지켜야 한다.

· bar의 title을 새 화면의 title로 바꾼다.

· Back 버튼을 title의 왼쪽에 보여준다. Back 버튼의 이름은 이전 화면의 title이 되어야 한다.

 

Navigation bar 대신에 toolbar를 사용하라. 많은 수의 컨트롤 버튼을 제공해야 한다면, navigation bar를 사용할 필요는 없다.

 

어플리케이션의 가장 상위 단계에서 segmented control을 사용하는 것을 고려하라. 정보구조를 깊게 하지 않는데 유용하며, 사용자가 찾고자 하는 정보를 쉽게 찾을 수 있도록 도와준다. navigation bar에서 segmented control을 사용한다면, 이전 화면으로 이동할 수 있는 back 버튼의 제목을 정확하게 사용하라. (사용 가이드에 대해서는 "Segmented Control" 확인)

 

※ 분류 컨트롤(Segmented control)

 

 

 

 

 

 

공간이 충분할지라도, navigation bar에 너무 많은 컨트롤 버튼을 적용하지 말라. 현재 화면의 title 외에, navigation bar는 back 버튼과 현재 화면의 컨텐츠를 컨트롤하는 한개의 버튼만 적용해야 한다. 만약 navigation bar에서 segmented control을 사용한다면, title을 표시하지 않고, 다른 컨트롤들도 포함하지 말아야 한다.

 

navigation bar에는 테두리가 있는 형태의 컨트롤만 사용하라. 만약 navgation bar에 테두리가 없는 컨트롤 버튼을 적용하려 한다면, 자동으로 테두리가 있는 스타일이 입혀질 것이다.

 

시스템에서 제공되는 버튼을 명시된 의미에 맞게 사용하라. “Standard Buttons for Use in Toolbars and Navigation Bars” 를 확인하라.

navigation bar 버튼을 직접 제작하려면 어떻게 디자인해야 하는지에 대해 “Icons for Navigation Bars, Toolbars, and Tab Bars”를 확인하라.

 

navigation bar는 화면방향에 따라 높이나 투명도가 바뀌지 않는다. 아이폰 어플리케이션과는 다른 점이다.

 

필요하면 navigation bar에 투명도나 컬러를 지정하라. navigation bar가 어플리케이션의 전체 스타일과 어울리도록 만들고 싶으면, 컬러를 지정할 수 있다. 사용자가 컨텐츠에 더욱 집중할 수 있도록 하기 위해 navigation bar에 투명도도 지정할 수 있다. navigatoin bar를 이러한 방법으로 커스터마이징 하려면, 어플리케이션의 전체 모습과 일관적으로 보이도록 하라.

 

 

 

 

 

 

Tab bar

 

화면의 하단에 위치하며 다른 하위 테스크, 뷰, 모드로 바꿀 수 있도록 해준다.

 

Figure 4-3 Tab bar에서는 하위 테스크, 뷰, 모드를 바꾼다.

 

 

 

 

일반적으로, Tab bar는 현재 단계에서 정보를 정리하는데 이용된다. Tab bar는 어플리케이션의 메인 뷰에서 사용하기에 좋다. 왜냐하면 Tab bar를 이용하면 정보 구조를 깊지 않게 하면서 다른 카테고리나 모드로 한 번에 접근할 수 있기 때문이다.

 

제한된 환경에서는, Tab bar를 분할된 뷰나 팝오버 안에서 화면을 바꾸거나 컨텐츠를 필터링 하는 용도로 사용하는 것도 좋다. 그러나, 팝오버나 분할된 뷰에서는 Tab bar 보다는 Segmented control을 사용하는 것이 좋다. 왜냐하면 팝오버나 분할된 뷰에서는 segmented control이 외관상 더 잘 어울리기 때문이다.(segmented control에 관한 정보는 "Segmented Control"을 참고하라.) 

 

Tab bar에 너무 많은 버튼을 적용하지 말라. Tab bar에 버튼을 너무 많이 적용하면 사용자는 원하는 기능을 선택하기 어렵게 된다. 또한 버튼을 더 추가 할수록, 어플리케이션도 더욱 복잡해 진다. 일반적으로, 메인 뷰나 분할된 뷰의 오른쪽의 Tab bar에서 버튼 수는 7개 정도까지로 제한한다. 팝오버나 분할된 뷰의 왼쪽 화면에서는, 5개 정도의 버튼이 적합하다.

 

More 버튼은 만들지 말라. Tab bar에서 more 버튼(버튼 더보기) 을 제공한다는 것은 아이패드 스크린 공간을 활용을 잘 못한다는 것이

다.

 

각 뱡향에서 같은  버튼들을 보여주라. 세로 모드에서는, 7개의 버튼이 화면의 폭에 잘 맞는다. 가로 모드에서는, 같은 버튼들을 스크린의 중앙에 배열해야 한다. 이 방식은 분할된 뷰나 팝오버에서도 마찬가지이다. 예를 들면 세로모드에서 팝오버에 tab bar를 사용한다면, 가로 모드에서 왼쪽 화면에 같은 tab bar를 배치하면 잘 맞을것이다.

 

Figure 4-4 가로모드에서도 세로모드에서와 같은 수의 버튼을 보여준다.

 

 

 

 

 

시스템에서 제공하는 버튼 아이콘을 명시된 기능에 따라 사용하라. "Standard Icons for Use in Tab Bars"를 확인해 보라. 별도의 아이콘을 제작하려면, “Icons for Navigation Bars, Toolbars, and Tab Bars”에서 어떻게 디자인해야 하는지 확인하라.

 

 

Tab bar는 가로, 세로 방향에 따라 컬러, 투명도, 높이를 변경하지 않고 유지한다. iPhone과 같은 방식이다.

 

 

 

 

 

 

출처 : http://monodream77.blog.me/130090397497