본문 바로가기

[UX] Mobile

[Tablet] iPad를 위한 디자인 가이드

728x90

출처: https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UEBestPractices/UEBestPractices.html#//apple_ref/doc/uid/TP40006556-CH20-SW4


아래는 발번역..


For iPad: 


1. Enhance Interactivity (Don't Just Add Features)

      인터랙티비티를 향상시켜라 (단순히 기능만 추가하지 말 것)


최고의 아이패드 앱은 사람들에게 컨텐츠와 교류할 수 있는 이상적인 방법을 제공한다. 그러면서 사용자들을 명확하게 한정된 태스크를 수행하게 된다.


기능을 추가하고픈 유혹에서 벗어나야 한다. 이는 주요 태스크와 직접적으로 관계가 없다.

대신에 사람들에게 보다 많은 것을 보고 보다 많은 것을 인터랙션할 수 있는 방법을 고민해야 한다.

당신은 당신이 아이폰앱에서 간결하게 만든 모든 기능들을 다시금 가져와서 아이패드의 큰 화면에서 보게끔 하면 절대 안된다.


당신의 아이패드앱이 눈에 띄게 만들기 위해 사용자경험을 키울 수 있는 방법에 집중해야 한다. 

1) 책 - 책을 읽고 책갈피를 제공해야하는 리더앱은 큰 화면에서 재미난 읽기 경험을 제공할 수 있어야 한다.

그들의 리딩 리스트를 관리하는 다른 스크린으로 보내는 것 보다 해당 앱은 팝오버안에서 리스트를 보여주고 그 안에 좋아하는 진행경과를 복사할 수 있어야 한다.

이 앱은 또한 사람들이 북마크를 할 수 있어야 하고 텍스트에 주석을 달 수 있어야 한다. 그리고 그들의 리스트를 다른이와 함께 교류할 수 있거나 주요 리스트에 대해 그들의 진행상황을 비교할 수 있어야 한다.

2) 파이터 파일럿 게임은 반투명한 헤드업디스플레이를 메인뷰 위에 노출해야 한다. 플레이어들은 적들을 사로잡기위해 리얼한 콕핏 콘트롤을 조작할 수 있거나 오버레이 형태로 지도위에서 그것들을 위치시킬 수 있어야 한다.

3) 축구 게임에서는 디스플레이는 커질 수 있고 보다 실제적인 필드, 그리고 보다 디테일한 캐릭터, 그리고 사람들이 팀을 관리할 수 있고 캐릭터들을 커스터마이즈 할 수 있다.

이는 사람들이 필드뷰를 떠나지 않고 캐릭터에 대해 정보를 볼 수 있게도 해야 한다.

마지막으로 멀티플레이어 모드를 가능하게 하고 여기서 2명의 사용자는 그들의 팀을 서로 경쟁할 수 있도록 해야 한다.

4) 스크린 라이팅 앱은 주요 컨텍스트를 떠나지 않고 플롯뷰와 캐릭터뷰 사이에서 변환할 수 있는 방법을 제공해야 한다.

작가는 그들이 주요 시각에서 글을 씀에 따라 디테일함을 체크하기 위해 그들의 시선들을 변환할 수 있어야 한다.


2. Reduce Full-Screen Transition

      전체화면 전환(Transition)을 줄여라


콘텐츠가 변화함에 따라 시각적인 전환은 밀접하게 이루어져야 한다.

몇몇 추가적인 정보가 변화할 때 전체 새로운 스크린에서 변화가 되는 것 대신에  이것이 필요한 UI의 영역만 업데이트 될 수 있도록 해야 한다. 일반적인 규칙에 따르면 개인적인 뷰와 오브젝트들이 전환되어야 한다. 스크린이 아니라..

대부분의 경우에 전체 스크린이 플리핑되는 것은 권장되어지지 않는다.


보다 적은 전체화면 전환을 사용할 때 당신의 아이패드 앱은 보다 나은 시각적 안정성을 가질 것이고 이는 사람들이 그들의 태스크에서 어디에 있는지 알 수 있게 해준다.

전체화면 전환을 위한 필요를 줄이기 위해 분할 뷰(Split View)와 팝오버(Pop-over)와 같은 UI요소들을 사용할 수 있다.


3. Restrain Your Information Hierarchy

      정보 계층구조를 제한해라


한 장소에 보다 많은 정보에 접근하도록 하기 위해 큰 아이패드 스크린과 아이패드 UI요소를 사용해라.

비록 당신이 한 스크린안에 너무 많은 정보를 넣기원하지 않든다고 할지라도 당신은 사람들이 그들이 원하는 것을 찾기위해 다른 많은 화면들을 방문해야 하는 것을 느끼길 원치는 않을 것이다.


일반적으로 우선순위가 있는 컨텐츠에 메인 스크린을 할애하게 된다.

그리고 나머지 스크린에 (팝오버와 같은) 도구 혹은 추가적인 정보를 제공한다.

이는 사람들에게 그들이 필요한 기능들에 접근하기 쉽게 해준다. 메인태스크의 상황을 떠날필요 없이 말이다.

Split View와 Pop-over와 같은 큰 아이패드 스크린, UI요소들로 당신은 많은 아이폰 앱들의 one-level-per -screen(화면에 하나의 계층)을 대체할 수 있다.

(Split View와 Pop over와 같은 요소들을 어떻게 사용하는지 구체적인 가이드라인을 확인해 보아라)


사람들이 좌측 Pane에서 보여지는 탑-레벨 카테고리에서 드릴다운 할 수 있도록 Split View의 우측 Pane에서 내비게이션 바를 사용하라. Split View는 최소 하나의 레벨에 의해 당신의 정보구조를 단순화할 수 있다. 왜냐하면 2개의 레벨은 한번에 하나의 스크린에 보여질 수 있기 때문이다.




Split View의 좌측 pane에는 내비게이션 바를 사용하라.

매우 얕은 구조를 가진 계층을 통해 사람들이 Drill Down할 수 있도록 하여라.

그러면 우측 pane에 구체적인 정보 대부분을 보여줄 수 있을 것이다.


스크린에 보여지는 오브젝트에 영향을 주는 도구를 제공하거나 액션을 활성화 할 때는 Pop over를 사용하여라

Popover는 현재 스크린의 첫화면에서 일시적으로 도구와 이러한 액션들을 보여줄 수 있다.




다른 정보 카테고리 혹은 콘텐츠에 다른 관점으로 보여주기 위해서는 분리된 컨트롤을 사용하여라

이러한 방법으로 당신은 스크린 상단 혹은 하단에 single bar영역으로 부터 이러한 관점들 혹은 카테고리들에 접근할 수 있도록 제공할 수 있다.


다른 정보 카테고리, 혹은 다른 앱 모드를 보여주려고 할 때 Tab Bar를 사용하라.

Tab Bar는 모드 스위쳐보다 카테고리 스위쳐 혹은 필터로써 더 잘 사용될 수 있다.


4. Consider Using Popovers for Some Modal Tasks

      몇가지 모달태스크를 위해서 팝오버 이용하는 것을 고려해라


팝오버 혹은 모달뷰가 열려있는 상태에서 메인뷰와 함께 인터랙션 할 수 없다는 점에서 팝오버와 모달 뷰는 비슷하다.

하지만 팝오버가 두가지 방법으로 사용될 수 있는 것에 반해 모달 뷰는 항상 모달이라 할 수 있다.


- 모달, 이 경우엔 팝오버는 스크린을 딤드시키고 명백한 모드해제를 필요로 한다. 이 행위는 모달 뷰의 그것과 매우 유사하지만 pop-over의 형태는 가벼운 무게를 경험할 수 있도록 하는 의도가 있다.


- Nonmodal, 이 경우에 pop-over는 그 주변의 스크린들을 딤드시키지 않는다. 그리고 사람들은 해제시키기 위해 그 주변 어디나 마음대로 탭할 수 있다. 이 행위는 nonmodal popover를 해당 앱의 다른 뷰처럼 보이게 한다.


게다가 popover는 항상 그것을 보이게 하기위해 사용자가 선택해야 하는 콘트롤 혹은 영역을 가르쳐야 하는 화살표를 가지고 있다. 이 visual tie-in은 이전의 컨텍스트를 기억할 수 있도록 도와준다. 이는 또한 modal popover가 보다 modal view보다 더 일시적인 상황인것 처럼 보이도록 한다.


만일 당신이 아이폰 앱에 self-contained를 가능하게 하는 모달뷰를 사용한다면 당신은 이 대신 popover를 사용해야 할 것이다.

언제 이것이 적절한지 결정하는데 도움이 되기위해 아래 질문들을 유념해보아라.


- 이 태스크는 입력 타입이 한가지 이상인가? (그렇다면 pop-over를 이용하여라)

- 이 태스크는 사용자들이 뷰의 계층구조를 통해 드릴다운하는 것이 필요한가? (그렇다면 pop-over를 이용하여라)

- 사람들은 그들이 태스크를 끝내기 전에 메인뷰안에서 무언가를 하기를 원하는가? (그렇다면 nonmodal popover를 이용하여라)

- 이 태스크는 in-depth인지, 그리고 해다아 앱의 메인 기능의 하나를 표현하고 있는가? (그렇다면 당신은 모달뷰를 사용하기 원할 것이다.)

- 이 태스크는 단지 한번만 수행되는지 혹은 빈번하지 않게 수행되는가? 마치 셋업 태스크 처럼. (그렇다면 modal view형태를 고려해보아라)


부가적인 도구를 제공하는 것 처럼 popover를 위한 다른 사례들은 많이 있다.

또한 아이패드 앱은 popover내에 액션시트를 보여주고 있다. 


만일 당신이 modal view를 이용하기로 결정했다면 당신이 사용하고 있는 다른 표현스타일에 대해 읽어보도록 하여라.

당신의 아이패드에서 당신은 당신이 필요한 모달 태스크에 적합한 표현 스타일을 선택할 수 있다.


모달뷰 설명은 아래.

https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-SW18


5. Migrate Toolbar Content to the Top

      탑에 툴바컨텐츠를 마이그레이션 해라


만일 아이폰앱이 툴바를 가지고 있다면, 이를 아래 그대로 남겨놓기 보다는 스크린 상단으로 옮기는 것을 고려해보도록 해라.

아이패드 스크린의 추가적인 width로 당신은 당신의 툴바의 기능 모두를 상단 한줄의 툴바영역에 모두 넣을 수 있을 것이다.

이는 당신의 집중된 컨텐츠를 위해 보다 수직의 공간을 확보해 줄 것이다.


예를 들어 아이폰에서 mail앱의 경우 아이패드에서는 상단 하나의 툴바에서 소화가 가능하다.

새로고침 컨트롤은 메일박스 리스트의 아래에 남아있다.