SlideShare una empresa de Scribd logo
1 de 7
iOS Human Interface Guidelines
번역자 : 시스포유아이앤씨 마영희 주임
작성일 : 2013년 5월 09일
V. 사용자 경험 가이드라인
26. 필요한 경우, 라이선스 계약 또는 고지 사항을 표시
당신의 IOS 애플리케이션과 최종 사용자 사용권 계약 (또는 EULA)를 제공하는 경우, 앱 스토어
에서는 어플리케이션을 받기 전에 사람들이 그것을 읽을 수 있도록 표시해야 한다.
가능하면 사람들이 당신의 어플리케이션을 처음 시작할 때 당신의 EULA의 동의를 사용자에게
요구하는 것을 피하라. 동의하는 것을 표시하지 않으면 사용자들은 지연 없이 어플리케이션을 사
용할 수 있다. 그러나 이런 사용자 경험이 모든 상황에서 가능한 것은 아니다. 만약 당신이 사용
권 계약을 어플리케이션에 표시해야 한다면, 사용자 인터페이스와 사용자를 불편하게 하는 사항
을 조화시키는 방법을 실행해야 할 것이다.
가능하면 어플리케이션 설명이나 EULA를 거부할 권리를 제공해야 한다. 사용자는 App Store에서
거부권 내용을 볼 수 있고 사용자 환경의 요구 사항과 비즈니스 요구 사항의 균형을 잡는 수 있
다.
27. iPad용 : 상호대화 강화 (기능을 추가하지 마시오)
최고의 iPad 애플리케이션은 사람들에게 그들이 작업을 수행하는 동안 컨텐츠와 상호 작용하는
혁신적인 방법을 제공합니다.
주요작업과 무관한 기능을 추가하는 것은 피하는 것이 좋다. 대신에 사람들이 더 보고 더 많은
상호작용을 할 수 있는 방법을 모색해야 한다. 특히 당신의 iPhone의 어플리케이션의 모든 기능
을 iPad의 큰 화면에서 볼 수는 없다. 당신의 iPad 어플리케이션을 강조하기 위해 추가 기능의
손실 없이 사용자 경험을 극대화 시키는 것에 집중해야 한다. 예를 들면:
 사람들이 책을 읽을 수 있고 읽은 지점을 알려주는 독서 어플리케이션은 큰 화면에서 사
람들에게 즐거운 책 읽기 경험을 제공한다. 그들의 읽는 지점을 알려주기 위해 또 다른
화면으로 전환하는 대신에 팝 오버를 사용하고 사람들이 자신이 좋아하는 구문을 복사할
수 있게 하였다. 어플리케이션은 또한 북마크를 할 수 있고 텍스트에 주석을 달 수 있으
며 다른 사람과 목록을 교환 하거나 진행상황을 비교할 수 있다.
 전투기 조종게임에서 반투명의 헤드 업 화면을 메인 화면에 보여줄지도 모른다. 게임 이
용자들은 실제적인 컨트롤을 눌러서 적과 싸우거나 자신을 맵 상에 위치시킬 수 있다.
 축구 게임에서는 화면에 좀더 크고 현실적이 게임영역이 존재하고 캐릭터 묘사도 섬세하
다 그리고 팀을 운영할 수도 있고 캐릭터도 사용자에 맞게 변형할 수 있다. 또한 게임화
면을 나갈 필요 없이 캐릭터의 정보를 볼 수도 있다. 최종적으로는 두 사람이 서로의 팀
으로 멀티플레이를 모드를 이용할 수 있다.
28. iPad용 : 전체화면으로 전환하는 것을 줄여라.
컨텐츠와 연관되어 시각적 전환이 되어야 한다. 전체가 새로운 화면으로 변환되는 대신에 일
부 정보가 변경되면 그것을 필요로 하는 UI 영역 만 업데이트하면 된다. 일반적인 법칙으로
화면 전체가 아닌 개개의 화면이나 개체가 전환되어야 한다. 대부분의 경우 화면전체가 완전
히 변화하는 것을 추천하지는 않는다. 당신이 비교적 적은 전체화면을 전환할 때 iPad 어플
리케이션은 당신의 작업을 추적할 때 높은 시각적 안정성을 가진다. 당신은 전체화면으로 전
환하는 것을 줄이기 위해 분할 화면이나 팝 오버 등의 UI 요소들을 사용할 수 있다.
29. iPad용 : 당신의 정보를 계층화하는 것을 제한하라.
iPad의 큰 화면과 특정한 UI의 요소들은 사람들이 한 공간에서 보다 많은 정보에 접근 하게
한다. 비록 한 화면에서 너무 많은 정보를 보기를 원하지 않을 수 있지만 다른 한편으로는
원하는 정보를 찾기 위해 서로 다른 많은 화면을 보기를 원하지는 않는다.
일반적으로 메인 화면의 초기 컨텐츠에 집중이 된다. 그리고 추가 정보나 도구 등이 팝 오버
같은 부가적인 화면으로 제공된다. 이것은 주요 작업을 나갈 필요 없이 사람들에게 그들이
필요한 기능에 쉽게 접근할 수 있도록 도와준다.
사람들이 지속적으로 왼쪽 창에 표시되는 최상위 범주로 드릴 다운 할 수 있도록 분할 화면
의 오른쪽 창에 있는 탐색 모음을 사용한다. 두 가지 레벨이 항상 동시에 화면에 나타나기
때문에 분할 화면은 최소한 하나의 레벨에 따라 당신의 정보 계층을 평면화한다. 예를 들면,
설정 분할화면의 오른쪽 창에 있는 탐색 모음을 사용하여 장치와 어플리케이션 설정을 표시
한다.
사람들이 깊지 않은 계층을 드릴다운 할 수 있도록 왼쪽 분활 화면에 탐색 바를 사용한다.
그리고 나면 오른쪽 면에 대부분의 정보가 표시 된다. 이것은 두 가지 레벨을 완전히 평면화
하여 한 화면에 표시한다. 이 디자인은 가로방향으로 메일의 계정 사서함, 그리고 메시지 목
록은 왼편 개인적인 메시지는 오른쪽에 평면화 할 때 사용한다.
작업을 활성화하거나 화면 개체에 영향을 주는 도구를 제공하는 Popover를 사용한다.
Popover는 현재 화면에 동작이나 도구를 표시할 수 있고 사람들이 이것으로 인해 화면을 전
환할 필요는 없다. 예를 들면 알림은 사용자가 직접 만든 알림 항목에 상세항목을 추가하여
사용자에게 전달한다.
컨텐츠 또는 다른 정보 카테고리에 다른 관점을 표시하려면 도구 모음에서 분할 된 컨트롤을
사용한다. 이 방법으로 당신은 화면 상단 (또는 하단)에 단일 바에서 이러한 관점과 범주에
대한 액세스를 제공 할 수 있다. 예를 들어, iTunes는 카테고리의 컨텐츠에 다양한 관점을 제
공하기 위해 위쪽 가장자리에 도구 모음으로 분할 된 컨트롤을 사용한다.
다른 정보 범주 또는 덜 사용하는 다른 응용 프로그램 모드를 표시하는 탭 막대를 사용하라.
iPad 어플리케이션에서 탭 바는 모드 전환기 보다는 필터나 범주의 전환기로 사용될 가능성
이 높다.
iPad에서는 전체화면이 전환되는 것을 줄이는 것이 좋기 때문에 가능하면 탭 바가 완전히 전
환되는 것을 피하는 것이 좋다.
30. iPad용 : 일부 Modal 작업에서 Popover를 사용하는 것이 좋다.
사람들이 Popover와 Modal 화면을 열고 있는 동안 메인 화면과 상호작용을 못한다는 점에서
Popover과 Modal화면은 유사하다. 그러나 Modal 화면은 항상 형식이 있다 그에 반에서 Popover
는 다른 두 가지 방식을 사용할 수 있다.
 Popover가 스크린 주변을 어둡게 하는 경우에는 Modal을 쓴다. 이 동작은 Modal 화면
과 유사하지만 Popover가 나타나는 모습을 적게 볼 수 있다.
 Popover가 스크린 주변을 어둡게 하지 않고 사람들이 어디든지 누를 수 있는 경우에는
Modal을 쓰지 않는다. 이 동작으로 Modal을 쓰는 않는 popover는 또 다른 어플리케이션
을 볼 수 있다.
게다가 Popover는 항상 컨트롤이나 지역의 지점을 나타내고 있어서 사용자들은 그것을 누르면
된다. 이 시각적인 것은 사람들이 이전 내용을 기억할 수 있게 도와준다.
당신이 iPhone의 어플리케이션에서 독립적인 작업을 가능하게 Modal 화면을 사용한다면 Popover
를 대신 사용할 수도 있다.
적절한 당신의 결정을 돕기 위해 다음 질문을 고려하라.
 작업할 때 여러 가지 입력방식이 필요한가? 그렇다면 Popover을 사용하라.
비록 Modal화면이나 Popover둘다 키보드를 동반할지라도 picker나 옵션의 목록을 표시하기에
는 Popover이 더 좋다.
 작업할 때 사람들이 계층화면을 통해 드릴다운 하는가? 그렇다면 Popover를 사용하라.
사람들이 메인 화면과 뒤섞는 것을 방지해주기 때문에 Popover 구조가 다중페이지를 좀더
잘 구현 할 수 있다.
 작업을 완료하기 전에 사람들이 메인 화면에서 무언가를 하길 원합니까? 만약 그렇다면
당신은 nonmodal Popover을 사용하라.
사람들은 nonmodal Popover 주위에 메인 화면을 볼 수 있고 그들이 메인 화면을 눌러
그것을 거부 할 수 있기 때문에, 당신은 그들이 Popover 작업을 중단하고 즉시 돌아오게
해야 한다.
 작업이 상세하고 어플리케이션의 주요기능 중 하나를 보여주는가? 만약, 그렇다면 당신
은 modal 화면을 사용하길 원할 것이다.
Modal 화면의 내용 변환은 사람들이 작업이 끝날 때까지 집중할 수 있게 도와준다. 대부분
modal 화면의 큰 공간은 사람들이 많은 입력을 쉽게 할 수 있게 한다.
반면에 이 작업이 어플리케이션의 중요한 기능을 보여주지만 상세하지는 않다. Modal
Popover는 좀더 낳은 선택이 될 수 있다. 빈번하게 실행되는 작업을 좀더 시각적으로 가볍게
나타낼 수 있기 때문이다.
 작업은 설정 작업과 마찬가지로 한 번 또는 드물게 이루어지고 있는가? 만약 그렇다면
modal 화면 사용을 고려해 봐야 한다.
작업을 한번이나 드물게 사용할 때 사람들은 현재 내용에 머무는 것을 거의 생각하지 않
는다.
Popover를 위한 다른 많은 용도가 있다. 가령 보조 도구를 제공하는 것을 예로 들 수 있다.
당신이 modal 화면을 사용하기로 결정했다면, 사용할 수 있는 다양한 프레젠테이션 스타일에 대
해서 반드시 읽어보는 것이 좋다. iPad 어플리케이션에서 당신은 당신이 필요한 modal 작업에 알
맞은 프레젠테이션 스타일을 선택할 수 있다.
31. iPad용 : 상단으로 도구 모음을 이동하라.
iPhone 어플리케이션에 도구 모음이 있다면 그것을 화면 하단에 배치하는 대신에 상단으로 배치
하는 것을 고려해 보라. iPad 화면에서 폭이 추가로 늘어날 경우에 당신은 상단 도구모음에 모든
기능을 제공해야만 한다. 이것은 초점이 맞춰진 컨텐츠에 더 많은 수직 공간을 제공한다.
예를 들면, iPhone의 메일에서 사람들이 메시지를 보는 동안 새로 고침, 초기화, 삭제, 덧글 등을
사용하게 하기 위해서 도구 모음을 하단에 배치한다.
iPad 메일에서는 메시지 위에 있는 도구 모음에 다음 작업 중 하나를 제외하고 모두 이동한다 새
로 고침 컨트롤은 메일박스 하단에 남겨둔다.

Más contenido relacionado

La actualidad más candente

Web Accessibility_SYS4U
Web Accessibility_SYS4UWeb Accessibility_SYS4U
Web Accessibility_SYS4Usys4u
 
iOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4UiOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4Usys4u
 
iOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4UiOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4Usys4u
 
UX Layout Design_SYS4U
UX Layout Design_SYS4UUX Layout Design_SYS4U
UX Layout Design_SYS4Usys4u
 
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4Usys4u
 
iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)Sun Jin Choi
 
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
 
iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)Theodore(Yongbin) Cha
 
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례mosaicnet
 
iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.Dong Jin Lee
 
iOS Auto Layout
iOS Auto LayoutiOS Auto Layout
iOS Auto LayoutEunjoo Im
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)Booseol Shin
 
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
 

La actualidad más candente (13)

Web Accessibility_SYS4U
Web Accessibility_SYS4UWeb Accessibility_SYS4U
Web Accessibility_SYS4U
 
iOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4UiOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4U
 
iOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4UiOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4U
 
UX Layout Design_SYS4U
UX Layout Design_SYS4UUX Layout Design_SYS4U
UX Layout Design_SYS4U
 
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4U
 
iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)
 
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
 
iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)
 
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
 
iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.
 
iOS Auto Layout
iOS Auto LayoutiOS Auto Layout
iOS Auto Layout
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
 
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
 

Destacado

About Color_SYS4U
About Color_SYS4UAbout Color_SYS4U
About Color_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
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4Usys4u
 
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
 
웹어워드컨퍼런스강연자료 시스포유
웹어워드컨퍼런스강연자료 시스포유웹어워드컨퍼런스강연자료 시스포유
웹어워드컨퍼런스강연자료 시스포유sys4u
 
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
 
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
 
iOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4UiOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4Usys4u
 
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨sys4u
 
Observer Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4UObserver Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4Usys4u
 
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
 
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4UMemory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4Usys4u
 
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
 

Destacado (13)

About Color_SYS4U
About Color_SYS4UAbout Color_SYS4U
About Color_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
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4U
 
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
 
웹어워드컨퍼런스강연자료 시스포유
웹어워드컨퍼런스강연자료 시스포유웹어워드컨퍼런스강연자료 시스포유
웹어워드컨퍼런스강연자료 시스포유
 
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
 
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
 
iOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4UiOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4U
 
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
 
Observer Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4UObserver Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4U
 
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
 
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4UMemory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4U
 
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
 

Similar a iOS Human Interface Guidlines #7_SYS4U

220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표Minho Lee
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표Minho Lee
 
Ux 한글번역 멘플
Ux 한글번역 멘플Ux 한글번역 멘플
Ux 한글번역 멘플이창훈
 
허니컴 태블릿 디자인
허니컴 태블릿 디자인허니컴 태블릿 디자인
허니컴 태블릿 디자인Sang-min Lee
 
08 fragment 태블릿 대응
08 fragment   태블릿 대응08 fragment   태블릿 대응
08 fragment 태블릿 대응운용 최
 
MWC 윈도우폰7 시리즈 기자간담회
MWC 윈도우폰7 시리즈 기자간담회MWC 윈도우폰7 시리즈 기자간담회
MWC 윈도우폰7 시리즈 기자간담회Seo Jinho
 
LingoStar iPhone App Design Workshop
LingoStar iPhone App Design WorkshopLingoStar iPhone App Design Workshop
LingoStar iPhone App Design Workshop성관 윤
 
1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdf1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdfssuser4ea7d7
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Bansook Nam
 
UX원칙 (C.14~C.17)
UX원칙 (C.14~C.17)UX원칙 (C.14~C.17)
UX원칙 (C.14~C.17)ssuser4316c4
 
[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)
[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)
[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)YoungSu Son
 
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android AnimationNAVER D2
 
Android design guideline overview
Android design guideline overviewAndroid design guideline overview
Android design guideline overviewGeonu Choi
 
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
 
[월간금융] 스마트워크 필수활용팁(1)
[월간금융] 스마트워크 필수활용팁(1)[월간금융] 스마트워크 필수활용팁(1)
[월간금융] 스마트워크 필수활용팁(1)규문 최
 
사용자 스토리 기반의 스크럼
사용자 스토리 기반의 스크럼사용자 스토리 기반의 스크럼
사용자 스토리 기반의 스크럼Junyi Song
 

Similar a iOS Human Interface Guidlines #7_SYS4U (20)

220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
220806 UX/UI 해외 인기 아티클 6기 : 3주차 발표
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표
 
Ux 한글번역 멘플
Ux 한글번역 멘플Ux 한글번역 멘플
Ux 한글번역 멘플
 
허니컴 태블릿 디자인
허니컴 태블릿 디자인허니컴 태블릿 디자인
허니컴 태블릿 디자인
 
08 fragment 태블릿 대응
08 fragment   태블릿 대응08 fragment   태블릿 대응
08 fragment 태블릿 대응
 
MWC 윈도우폰7 시리즈 기자간담회
MWC 윈도우폰7 시리즈 기자간담회MWC 윈도우폰7 시리즈 기자간담회
MWC 윈도우폰7 시리즈 기자간담회
 
LingoStar iPhone App Design Workshop
LingoStar iPhone App Design WorkshopLingoStar iPhone App Design Workshop
LingoStar iPhone App Design Workshop
 
1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdf1811755_신혜경_교재발표.pdf
1811755_신혜경_교재발표.pdf
 
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020
 
Hellotutorial
HellotutorialHellotutorial
Hellotutorial
 
UX원칙 (C.14~C.17)
UX원칙 (C.14~C.17)UX원칙 (C.14~C.17)
UX원칙 (C.14~C.17)
 
Dubuplus guide
Dubuplus guideDubuplus guide
Dubuplus guide
 
[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)
[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)
[NEXT] Android 개발 경험 프로젝트 5일차 (Actionbar, SideNavigation)
 
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - HTML, Android Animation
 
Android design guideline overview
Android design guideline overviewAndroid design guideline overview
Android design guideline overview
 
Yeonseo idea
Yeonseo ideaYeonseo idea
Yeonseo idea
 
UX trend report 2014 lite version (by UX1)
UX trend report 2014 lite version (by UX1)UX trend report 2014 lite version (by UX1)
UX trend report 2014 lite version (by UX1)
 
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)
 
[월간금융] 스마트워크 필수활용팁(1)
[월간금융] 스마트워크 필수활용팁(1)[월간금융] 스마트워크 필수활용팁(1)
[월간금융] 스마트워크 필수활용팁(1)
 
사용자 스토리 기반의 스크럼
사용자 스토리 기반의 스크럼사용자 스토리 기반의 스크럼
사용자 스토리 기반의 스크럼
 

Más de sys4u

JavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_sys4uJavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_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
 
Java_Concurrency_Programming_SYS4U
Java_Concurrency_Programming_SYS4UJava_Concurrency_Programming_SYS4U
Java_Concurrency_Programming_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
 
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
 
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
 

Más de sys4u (8)

JavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_sys4uJavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_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
 
Java_Concurrency_Programming_SYS4U
Java_Concurrency_Programming_SYS4UJava_Concurrency_Programming_SYS4U
Java_Concurrency_Programming_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
 
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
 
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
 

iOS Human Interface Guidlines #7_SYS4U

  • 1. iOS Human Interface Guidelines 번역자 : 시스포유아이앤씨 마영희 주임 작성일 : 2013년 5월 09일 V. 사용자 경험 가이드라인 26. 필요한 경우, 라이선스 계약 또는 고지 사항을 표시 당신의 IOS 애플리케이션과 최종 사용자 사용권 계약 (또는 EULA)를 제공하는 경우, 앱 스토어 에서는 어플리케이션을 받기 전에 사람들이 그것을 읽을 수 있도록 표시해야 한다. 가능하면 사람들이 당신의 어플리케이션을 처음 시작할 때 당신의 EULA의 동의를 사용자에게 요구하는 것을 피하라. 동의하는 것을 표시하지 않으면 사용자들은 지연 없이 어플리케이션을 사 용할 수 있다. 그러나 이런 사용자 경험이 모든 상황에서 가능한 것은 아니다. 만약 당신이 사용 권 계약을 어플리케이션에 표시해야 한다면, 사용자 인터페이스와 사용자를 불편하게 하는 사항 을 조화시키는 방법을 실행해야 할 것이다. 가능하면 어플리케이션 설명이나 EULA를 거부할 권리를 제공해야 한다. 사용자는 App Store에서 거부권 내용을 볼 수 있고 사용자 환경의 요구 사항과 비즈니스 요구 사항의 균형을 잡는 수 있 다. 27. iPad용 : 상호대화 강화 (기능을 추가하지 마시오) 최고의 iPad 애플리케이션은 사람들에게 그들이 작업을 수행하는 동안 컨텐츠와 상호 작용하는 혁신적인 방법을 제공합니다. 주요작업과 무관한 기능을 추가하는 것은 피하는 것이 좋다. 대신에 사람들이 더 보고 더 많은 상호작용을 할 수 있는 방법을 모색해야 한다. 특히 당신의 iPhone의 어플리케이션의 모든 기능
  • 2. 을 iPad의 큰 화면에서 볼 수는 없다. 당신의 iPad 어플리케이션을 강조하기 위해 추가 기능의 손실 없이 사용자 경험을 극대화 시키는 것에 집중해야 한다. 예를 들면:  사람들이 책을 읽을 수 있고 읽은 지점을 알려주는 독서 어플리케이션은 큰 화면에서 사 람들에게 즐거운 책 읽기 경험을 제공한다. 그들의 읽는 지점을 알려주기 위해 또 다른 화면으로 전환하는 대신에 팝 오버를 사용하고 사람들이 자신이 좋아하는 구문을 복사할 수 있게 하였다. 어플리케이션은 또한 북마크를 할 수 있고 텍스트에 주석을 달 수 있으 며 다른 사람과 목록을 교환 하거나 진행상황을 비교할 수 있다.  전투기 조종게임에서 반투명의 헤드 업 화면을 메인 화면에 보여줄지도 모른다. 게임 이 용자들은 실제적인 컨트롤을 눌러서 적과 싸우거나 자신을 맵 상에 위치시킬 수 있다.  축구 게임에서는 화면에 좀더 크고 현실적이 게임영역이 존재하고 캐릭터 묘사도 섬세하 다 그리고 팀을 운영할 수도 있고 캐릭터도 사용자에 맞게 변형할 수 있다. 또한 게임화 면을 나갈 필요 없이 캐릭터의 정보를 볼 수도 있다. 최종적으로는 두 사람이 서로의 팀 으로 멀티플레이를 모드를 이용할 수 있다. 28. iPad용 : 전체화면으로 전환하는 것을 줄여라. 컨텐츠와 연관되어 시각적 전환이 되어야 한다. 전체가 새로운 화면으로 변환되는 대신에 일 부 정보가 변경되면 그것을 필요로 하는 UI 영역 만 업데이트하면 된다. 일반적인 법칙으로 화면 전체가 아닌 개개의 화면이나 개체가 전환되어야 한다. 대부분의 경우 화면전체가 완전 히 변화하는 것을 추천하지는 않는다. 당신이 비교적 적은 전체화면을 전환할 때 iPad 어플 리케이션은 당신의 작업을 추적할 때 높은 시각적 안정성을 가진다. 당신은 전체화면으로 전 환하는 것을 줄이기 위해 분할 화면이나 팝 오버 등의 UI 요소들을 사용할 수 있다. 29. iPad용 : 당신의 정보를 계층화하는 것을 제한하라. iPad의 큰 화면과 특정한 UI의 요소들은 사람들이 한 공간에서 보다 많은 정보에 접근 하게 한다. 비록 한 화면에서 너무 많은 정보를 보기를 원하지 않을 수 있지만 다른 한편으로는 원하는 정보를 찾기 위해 서로 다른 많은 화면을 보기를 원하지는 않는다. 일반적으로 메인 화면의 초기 컨텐츠에 집중이 된다. 그리고 추가 정보나 도구 등이 팝 오버 같은 부가적인 화면으로 제공된다. 이것은 주요 작업을 나갈 필요 없이 사람들에게 그들이 필요한 기능에 쉽게 접근할 수 있도록 도와준다.
  • 3. 사람들이 지속적으로 왼쪽 창에 표시되는 최상위 범주로 드릴 다운 할 수 있도록 분할 화면 의 오른쪽 창에 있는 탐색 모음을 사용한다. 두 가지 레벨이 항상 동시에 화면에 나타나기 때문에 분할 화면은 최소한 하나의 레벨에 따라 당신의 정보 계층을 평면화한다. 예를 들면, 설정 분할화면의 오른쪽 창에 있는 탐색 모음을 사용하여 장치와 어플리케이션 설정을 표시 한다. 사람들이 깊지 않은 계층을 드릴다운 할 수 있도록 왼쪽 분활 화면에 탐색 바를 사용한다. 그리고 나면 오른쪽 면에 대부분의 정보가 표시 된다. 이것은 두 가지 레벨을 완전히 평면화 하여 한 화면에 표시한다. 이 디자인은 가로방향으로 메일의 계정 사서함, 그리고 메시지 목 록은 왼편 개인적인 메시지는 오른쪽에 평면화 할 때 사용한다. 작업을 활성화하거나 화면 개체에 영향을 주는 도구를 제공하는 Popover를 사용한다. Popover는 현재 화면에 동작이나 도구를 표시할 수 있고 사람들이 이것으로 인해 화면을 전 환할 필요는 없다. 예를 들면 알림은 사용자가 직접 만든 알림 항목에 상세항목을 추가하여 사용자에게 전달한다.
  • 4. 컨텐츠 또는 다른 정보 카테고리에 다른 관점을 표시하려면 도구 모음에서 분할 된 컨트롤을 사용한다. 이 방법으로 당신은 화면 상단 (또는 하단)에 단일 바에서 이러한 관점과 범주에 대한 액세스를 제공 할 수 있다. 예를 들어, iTunes는 카테고리의 컨텐츠에 다양한 관점을 제 공하기 위해 위쪽 가장자리에 도구 모음으로 분할 된 컨트롤을 사용한다. 다른 정보 범주 또는 덜 사용하는 다른 응용 프로그램 모드를 표시하는 탭 막대를 사용하라. iPad 어플리케이션에서 탭 바는 모드 전환기 보다는 필터나 범주의 전환기로 사용될 가능성 이 높다. iPad에서는 전체화면이 전환되는 것을 줄이는 것이 좋기 때문에 가능하면 탭 바가 완전히 전 환되는 것을 피하는 것이 좋다.
  • 5. 30. iPad용 : 일부 Modal 작업에서 Popover를 사용하는 것이 좋다. 사람들이 Popover와 Modal 화면을 열고 있는 동안 메인 화면과 상호작용을 못한다는 점에서 Popover과 Modal화면은 유사하다. 그러나 Modal 화면은 항상 형식이 있다 그에 반에서 Popover 는 다른 두 가지 방식을 사용할 수 있다.  Popover가 스크린 주변을 어둡게 하는 경우에는 Modal을 쓴다. 이 동작은 Modal 화면 과 유사하지만 Popover가 나타나는 모습을 적게 볼 수 있다.  Popover가 스크린 주변을 어둡게 하지 않고 사람들이 어디든지 누를 수 있는 경우에는 Modal을 쓰지 않는다. 이 동작으로 Modal을 쓰는 않는 popover는 또 다른 어플리케이션 을 볼 수 있다. 게다가 Popover는 항상 컨트롤이나 지역의 지점을 나타내고 있어서 사용자들은 그것을 누르면 된다. 이 시각적인 것은 사람들이 이전 내용을 기억할 수 있게 도와준다. 당신이 iPhone의 어플리케이션에서 독립적인 작업을 가능하게 Modal 화면을 사용한다면 Popover 를 대신 사용할 수도 있다. 적절한 당신의 결정을 돕기 위해 다음 질문을 고려하라.  작업할 때 여러 가지 입력방식이 필요한가? 그렇다면 Popover을 사용하라. 비록 Modal화면이나 Popover둘다 키보드를 동반할지라도 picker나 옵션의 목록을 표시하기에 는 Popover이 더 좋다.  작업할 때 사람들이 계층화면을 통해 드릴다운 하는가? 그렇다면 Popover를 사용하라. 사람들이 메인 화면과 뒤섞는 것을 방지해주기 때문에 Popover 구조가 다중페이지를 좀더 잘 구현 할 수 있다.  작업을 완료하기 전에 사람들이 메인 화면에서 무언가를 하길 원합니까? 만약 그렇다면 당신은 nonmodal Popover을 사용하라. 사람들은 nonmodal Popover 주위에 메인 화면을 볼 수 있고 그들이 메인 화면을 눌러 그것을 거부 할 수 있기 때문에, 당신은 그들이 Popover 작업을 중단하고 즉시 돌아오게 해야 한다.  작업이 상세하고 어플리케이션의 주요기능 중 하나를 보여주는가? 만약, 그렇다면 당신 은 modal 화면을 사용하길 원할 것이다.
  • 6. Modal 화면의 내용 변환은 사람들이 작업이 끝날 때까지 집중할 수 있게 도와준다. 대부분 modal 화면의 큰 공간은 사람들이 많은 입력을 쉽게 할 수 있게 한다. 반면에 이 작업이 어플리케이션의 중요한 기능을 보여주지만 상세하지는 않다. Modal Popover는 좀더 낳은 선택이 될 수 있다. 빈번하게 실행되는 작업을 좀더 시각적으로 가볍게 나타낼 수 있기 때문이다.  작업은 설정 작업과 마찬가지로 한 번 또는 드물게 이루어지고 있는가? 만약 그렇다면 modal 화면 사용을 고려해 봐야 한다. 작업을 한번이나 드물게 사용할 때 사람들은 현재 내용에 머무는 것을 거의 생각하지 않 는다. Popover를 위한 다른 많은 용도가 있다. 가령 보조 도구를 제공하는 것을 예로 들 수 있다. 당신이 modal 화면을 사용하기로 결정했다면, 사용할 수 있는 다양한 프레젠테이션 스타일에 대 해서 반드시 읽어보는 것이 좋다. iPad 어플리케이션에서 당신은 당신이 필요한 modal 작업에 알 맞은 프레젠테이션 스타일을 선택할 수 있다. 31. iPad용 : 상단으로 도구 모음을 이동하라. iPhone 어플리케이션에 도구 모음이 있다면 그것을 화면 하단에 배치하는 대신에 상단으로 배치 하는 것을 고려해 보라. iPad 화면에서 폭이 추가로 늘어날 경우에 당신은 상단 도구모음에 모든 기능을 제공해야만 한다. 이것은 초점이 맞춰진 컨텐츠에 더 많은 수직 공간을 제공한다. 예를 들면, iPhone의 메일에서 사람들이 메시지를 보는 동안 새로 고침, 초기화, 삭제, 덧글 등을 사용하게 하기 위해서 도구 모음을 하단에 배치한다.
  • 7. iPad 메일에서는 메시지 위에 있는 도구 모음에 다음 작업 중 하나를 제외하고 모두 이동한다 새 로 고침 컨트롤은 메일박스 하단에 남겨둔다.