SlideShare una empresa de Scribd logo
1 de 10
iOS Human Interface Guidelines

                                번역자 : 시스포유아이앤씨 마영희 주임

                                       번역일 : 2013년 4월 12일




2. iOS장치 간의 변화

사람들은 모든 어플리케이션이 자신의 iOS장치에서 실행되길 바란다. 각각의 어플리케이션 버전

이 장치들의 특징을 잘 활용하는지를 가능한 많이 확인 해야 한다.

1)iPhone에서 iPad로 메일 보내기

메일은 iPhone 최고의 내장 어플리케이션이다. 사람들은 많은 양의 정보를 사용하기 쉽게 화면에
정리한 것을 높이 평가한다.




iPad에서 메일은 같은 핵심기능을 제공한다. 사람들의 메시지 현실적인 터치 그리고 항상 사용 가
능한 강력한 정리 및 편집 도구 등을 동시에 화면에 제공한다. 단일 화면의 시각적 안정성은 최

소한의 변화로 사람들이 필요로 하는 공간 안에서 잘 정리하여 제공한다.
iPhone의 메일과 iPad의 메일의 다른 점은 각각의 장치마다 다른 사용자 경험을 반영한다는 점이

다.


        iPhone에서의 메일은 사람들이 줄 서있거나 회의를 할 때 사용하기 편하게 만들어졌다.

        iPad의 메일은, 사람들은 이동 중에 사용하기에 충분한 효율적이지만, 그 경험은 보다 세
         밀한 사용을 권장하고 있다.

비록 iPad 메일을 장치에 사용자 경험을 맞춘다고 하더라도, 사람들이 사용하는 핵심적인 기능을

바꾸거나, 무의미하게 위치를 바꾸거나 개인적인 기능을 넣거나 할 수 는 없다.

iPhone의 사용자들은 iPhone와 iPad의 도구모음 및 사서함 구조가 실질적으로는 같기 때문에 그
것들을 사용하는 방법을 빠르게 인지할 수 있다. 모바일 이메일 경험을 강화하기 위해서 iPad에서

메일은 iPhone의 메일 UI를 진화시키는 중요한 방법이 있다.

장치 방향의 확장지원. 사람들은 iPad에서 4가지 방향 어디로든 메일을 사용할 수 있다. 가로방향

레이아웃과 세로방향 레이아웃은 다소 다르지만 핵심은 사용자에게 도움을 줄 수 있는 컨텐츠와

기능이다.
메시지 내용 증가에 초점을 맞추고 있다. iPad의 메일은 모든 방향으로 현재 메시지를 위해 대부
분의 화면을 남겨 두고 있다. 메시지 내용에 사용할 수 있는 수직 공간을 늘리기 위해 메시지 뷰
상단에 도구 상자를 이동한다. 여분의 공간으로 인해 사람들은 적은 스크롤로 메시지 내용을 읽
을 수 있다. 그리고 사람들이 세로방향으로 메시지를 보려고 할 때 에도 여전히 메시지의 대부분

을 볼 수 있다.
계층의 평면화. 세분화된 UI요소가 메시지 상위 모든 계층을 제어 함으로써 iPad에서 메일계층이
효과적으로 평면화 된다. 가로화면에서는 이 분할 화면은 왼쪽 창에 영구적으로 나타나고 세로화

면에서는 화면 일부에 볼 수 있도록 했다.

전체 화면의 변화를 크게 줄였다. 계층의 대부분이 독립적인 화면 요소에서 사용할 수 있기 때문
에, 사람들은 단일화면으로 접속할 수 있다. 사람들이 계층을 통해 계정>사서함>메시지 목록 보

기의 하위 수준으로 이동할 때 전제화면 변화가 아닌 일부분만 변화 하게 했다.

현실적인 메시지. 사람들이 메시지의 오타를 삭제할 때 실제 종이와 같은 슬라이드 화면이 보여

진다. 추가적으로 삭제할 때 실제 종이가 쌓이는 모습을 볼 수 있다.




2)iPhone5의 실행

당신은 iPhone에 맞춰서 당신의 어플리케이션을 재설계 할 필요는 없다. 많은 어플리케이션이 기
존의 UI를 사용해도 어울리게 보일 것이다. 허나 일부분은 컨텐츠나 배경을 늘려야 될 필요도 있
다. 가령 게임이나 개인적인 이미지 등의 어플리케이션은 추가적은 작업이 필요할지도 모른다.
Note : iPhone5에 실행하는 모든 어플리케이션은 정확한 크기의 초기화면을 포함 해야 한다. iOS
장치를 위한 초기화면 만들기는 “Launch Image”를 통해 배울 수 있다.




iPhone5 디스플레이는 다른 iPhone과 iPod touch 장치의 디스플레이에 비해 세로로 176 픽셀이

크다. 세로보기 화면에서 추가 높이는 표준 테이블보기에 2 개의 행을 추가한 높이와 거의 동일
하다. 예를 들어, iPhone5(오른쪽 아래 그림 참조)에서 실행되는 메시지화면은 iPhone4S에서 실행

되는 메시지화면 보다 긴 대화 영역이 표시된다. (왼쪽 아래 그림 참조).
물론 가로 방향 일 때는 추가적인 176픽셀이 양쪽 측면공간으로 이동하게 된다. 예를 들면

iPhone5에서 메시지를 보낼 때 UI가 늘어나면서 추가적인 가로 공간을 채운다.




위의 메시지 화면이 보여주는 중요한 점은 iPhone5에 적용되어 만들어진 작은 UI도 어떤 방법으

로든 기능을 변화시키면 안된 다는 것이다. 사용자경험의 일관성을 위해 iPhone5의 핵심 디자인

원칙을 따라야 한다. 큰 장치의 화면에서는 많은 컨텐츠를 볼 수 있다. 그러나 어플리케이션의 기
능을 더 들어가 있는 것은 아니다. 당신 어플리케이션의 기능을 변경하는 것은 아니기 때문에 일
반적으로 iPhone5에 알맞은 어플리케이션을 만드는 것은 드물다. 어플리케이션 UI를 설계하기 위
해 자동 레이아웃을 사용하는 경우에는 작업을 수월하게 할 수 있다. 다음 가이드 라인은 당신의

UI를 당신의 어플리케이션에 알맞게 변화 시키는 데 도움을 줄 것 이다.
Note : 당신의 어플리케이션을 어떤 변경도 하지 않는다면 그것은 iPhone5호환 모드로 실행될

것 이다. 어플리케이션이 호환모드에서 실행되면 iOS는 상하에 검은색 바를 생성하면서 자동으
로 어플리케이션 UI를 가운데 배치한다. 몇몇의 개발자들은 정확한 초기화면을 새로 만들거나

UI를 바꾸지 않고 iPhone5 화면의 가운데 배치 하는 것이 더 간단할 수 있다고 말했다.




자동적으로 많은 컨텐츠를 나타나게 했다. UI화면 일부가 화면의 하단에 숨겨져 있는 경우
iPhone5에서는 UI를 나타나게 하기 위해 화면높이를 변경할 필요가 없다. 설정화면을 예로 들어

보자. iPhone5에서는 4S보다 추가적으로 더 많은 테이블을 볼 수 있다.
컨텐츠 영역을 늘렸다. 당신이 컨텐츠의 화면을 볼 때 추가적으로 몇몇의 컨텐츠를 더 보기 위해
수직으로 화면확장을 생각할 것이다. 예를 들면 iPhone5에서 메일의 메시지 영역은 4S보다 더 크

다.




컨텐츠 영역 사이의 배경영역을 확장 하였다. 컨텐츠 화면 사이의 수직 공간을 확장 함으로써 당
신의 레이아웃은 좀더 편안하게 보이게 할 수 있다. 예를 들면 iPhone5의 게임센터 화면은 4S보

다 메인 컨텐츠 영역 사이의 배경을 좀더 많이 볼 수 있다.
recenter




필요하다면 최신의 시각적인 요소를 사용. 추가 공간에 맞추기 위해서 배경이나 화면을 조정한
후 당신의 UI요소가 알맞게 들어갔는지 확인하고 싶을 지도 모른다. 확인하는 한가지 방법은 화
면의 상단부분을 늘이고 나서 요소를 가운데로 조정하는 하는 것이다. 예를 들면 iPhone5에서 나

침반을 사용자 초점에 유지하고 확장된 배경가운데에 요소들 배치하는 것이다.

사용자 최적화 이미지는 확장해도 새로운 영역에 필수 적인 세부사항을 배치하지는 않는다. 만약

당신의 어플리케이션이 대부분 사용자 최적화 UI를 사용하는 경우(가령, 게임의 경우) 당신은 사
용자가 이미지를 원할 하게 볼 수 있도록 여분의 공간을 주어야 한다. 어플리케이션에서는 모든
사용자들이 추가영역에 배치된 주요기능이나 세부사항들을 볼 수 없을 수도 있기 때문에 선호하
지 않는다. 예를 들면, iPhone5의 음성메모는 4S에서 보다 더 더 많은 마이크 스탠드 이미지를 볼

수 있다.
일반적으로 컨트롤 사이즈를 늘리는 것을 피한다. 만약 당신의 어플리케이션에서 누를 수 있는

가장 작은 크기의 컨트롤을 사용할 때 그것이 44X44포인트 보다 작으면 안 된다. iPhone5에서는
그런 조정이 필요가 없다. 그렇지만 기존 컨트롤 사이에 공간을 추가하는 방법을 선택할 지도 모

른다.

추가적인 Bar나 Banner를 표시 하기 위해 추가 공간을 사용하면 안 된다. 사람들은 iPhone5에서
좀더 많은 컨텐츠를 볼 수 있기를 바란다. 사람들의 기대에 실망을 주지 않기 위해 추가 공간에

개인적인 버튼이나 배너를 넣는 일은 없어야 하겠다.

Más contenido relacionado

La actualidad más candente

iOS Human Interface Guidlines #15_SYS4U
iOS Human Interface Guidlines #15_SYS4UiOS Human Interface Guidlines #15_SYS4U
iOS Human Interface Guidlines #15_SYS4Usys4u
 
iOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4UiOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_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_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4Usys4u
 
UX Layout Design_SYS4U
UX Layout Design_SYS4UUX Layout Design_SYS4U
UX Layout Design_SYS4Usys4u
 
iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)Theodore(Yongbin) Cha
 
iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)Sun Jin Choi
 
iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.Dong Jin Lee
 
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 (9)

iOS Human Interface Guidlines #15_SYS4U
iOS Human Interface Guidlines #15_SYS4UiOS Human Interface Guidlines #15_SYS4U
iOS Human Interface Guidlines #15_SYS4U
 
iOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_SYS4UiOS Human Interface Guidlines #13_SYS4U
iOS Human Interface Guidlines #13_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_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4U
 
UX Layout Design_SYS4U
UX Layout Design_SYS4UUX Layout Design_SYS4U
UX Layout Design_SYS4U
 
iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)
 
iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)iOS human interface guidelines(HIG)
iOS human interface guidelines(HIG)
 
iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.iOS Human Interface Guidelines 한글 정리 문서입니다.
iOS Human Interface Guidelines 한글 정리 문서입니다.
 
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
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4Usys4u
 
웹어워드컨퍼런스강연자료 시스포유
웹어워드컨퍼런스강연자료 시스포유웹어워드컨퍼런스강연자료 시스포유
웹어워드컨퍼런스강연자료 시스포유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&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
 
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
 
JavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_sys4uJavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_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
 
Observer Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4UObserver Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4Usys4u
 
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
 
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4UMemory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4Usys4u
 
iOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4UiOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4Usys4u
 

Destacado (13)

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
 
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
 
JavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_sys4uJavaEE6 Tutorial - Java Message Service_sys4u
JavaEE6 Tutorial - Java Message Service_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
 
Observer Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4UObserver Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4U
 
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
 
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4UMemory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4U
 
iOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4UiOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4U
 

Similar a iOS_Human_Interface_Guidlines_#4_SYS4U

LingoStar iPhone App Design Workshop
LingoStar iPhone App Design WorkshopLingoStar iPhone App Design Workshop
LingoStar iPhone App Design Workshop성관 윤
 
ICT기획시리즈 어플리케이션마켓플레이스
ICT기획시리즈 어플리케이션마켓플레이스ICT기획시리즈 어플리케이션마켓플레이스
ICT기획시리즈 어플리케이션마켓플레이스Changwon National University
 
앱 디자인 시작하기
앱 디자인 시작하기앱 디자인 시작하기
앱 디자인 시작하기Sangho Lee
 
모바일 앱 발표
모바일 앱 발표모바일 앱 발표
모바일 앱 발표승현 황
 
안드로이드와 아이오에스
안드로이드와 아이오에스안드로이드와 아이오에스
안드로이드와 아이오에스zoosagi12
 
Windows 10 in the classroom
Windows 10 in the classroomWindows 10 in the classroom
Windows 10 in the classroom기현 김
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표Minho Lee
 

Similar a iOS_Human_Interface_Guidlines_#4_SYS4U (10)

LingoStar iPhone App Design Workshop
LingoStar iPhone App Design WorkshopLingoStar iPhone App Design Workshop
LingoStar iPhone App Design Workshop
 
ICT기획시리즈 어플리케이션마켓플레이스
ICT기획시리즈 어플리케이션마켓플레이스ICT기획시리즈 어플리케이션마켓플레이스
ICT기획시리즈 어플리케이션마켓플레이스
 
Dubuplus guide
Dubuplus guideDubuplus guide
Dubuplus guide
 
앱 디자인 시작하기
앱 디자인 시작하기앱 디자인 시작하기
앱 디자인 시작하기
 
Smart phone OS 비교
Smart phone OS 비교Smart phone OS 비교
Smart phone OS 비교
 
Ewha ipad 2
Ewha ipad 2Ewha ipad 2
Ewha ipad 2
 
모바일 앱 발표
모바일 앱 발표모바일 앱 발표
모바일 앱 발표
 
안드로이드와 아이오에스
안드로이드와 아이오에스안드로이드와 아이오에스
안드로이드와 아이오에스
 
Windows 10 in the classroom
Windows 10 in the classroomWindows 10 in the classroom
Windows 10 in the classroom
 
220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표220319 해외 아티클 스터디 5기 : 1주차 발표
220319 해외 아티클 스터디 5기 : 1주차 발표
 

Más de sys4u

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
 
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
 
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 (7)

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
 
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
 
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_#4_SYS4U

  • 1. iOS Human Interface Guidelines 번역자 : 시스포유아이앤씨 마영희 주임 번역일 : 2013년 4월 12일 2. iOS장치 간의 변화 사람들은 모든 어플리케이션이 자신의 iOS장치에서 실행되길 바란다. 각각의 어플리케이션 버전 이 장치들의 특징을 잘 활용하는지를 가능한 많이 확인 해야 한다. 1)iPhone에서 iPad로 메일 보내기 메일은 iPhone 최고의 내장 어플리케이션이다. 사람들은 많은 양의 정보를 사용하기 쉽게 화면에 정리한 것을 높이 평가한다. iPad에서 메일은 같은 핵심기능을 제공한다. 사람들의 메시지 현실적인 터치 그리고 항상 사용 가 능한 강력한 정리 및 편집 도구 등을 동시에 화면에 제공한다. 단일 화면의 시각적 안정성은 최 소한의 변화로 사람들이 필요로 하는 공간 안에서 잘 정리하여 제공한다.
  • 2. iPhone의 메일과 iPad의 메일의 다른 점은 각각의 장치마다 다른 사용자 경험을 반영한다는 점이 다.  iPhone에서의 메일은 사람들이 줄 서있거나 회의를 할 때 사용하기 편하게 만들어졌다.  iPad의 메일은, 사람들은 이동 중에 사용하기에 충분한 효율적이지만, 그 경험은 보다 세 밀한 사용을 권장하고 있다. 비록 iPad 메일을 장치에 사용자 경험을 맞춘다고 하더라도, 사람들이 사용하는 핵심적인 기능을 바꾸거나, 무의미하게 위치를 바꾸거나 개인적인 기능을 넣거나 할 수 는 없다. iPhone의 사용자들은 iPhone와 iPad의 도구모음 및 사서함 구조가 실질적으로는 같기 때문에 그 것들을 사용하는 방법을 빠르게 인지할 수 있다. 모바일 이메일 경험을 강화하기 위해서 iPad에서 메일은 iPhone의 메일 UI를 진화시키는 중요한 방법이 있다. 장치 방향의 확장지원. 사람들은 iPad에서 4가지 방향 어디로든 메일을 사용할 수 있다. 가로방향 레이아웃과 세로방향 레이아웃은 다소 다르지만 핵심은 사용자에게 도움을 줄 수 있는 컨텐츠와 기능이다.
  • 3. 메시지 내용 증가에 초점을 맞추고 있다. iPad의 메일은 모든 방향으로 현재 메시지를 위해 대부 분의 화면을 남겨 두고 있다. 메시지 내용에 사용할 수 있는 수직 공간을 늘리기 위해 메시지 뷰 상단에 도구 상자를 이동한다. 여분의 공간으로 인해 사람들은 적은 스크롤로 메시지 내용을 읽 을 수 있다. 그리고 사람들이 세로방향으로 메시지를 보려고 할 때 에도 여전히 메시지의 대부분 을 볼 수 있다.
  • 4. 계층의 평면화. 세분화된 UI요소가 메시지 상위 모든 계층을 제어 함으로써 iPad에서 메일계층이 효과적으로 평면화 된다. 가로화면에서는 이 분할 화면은 왼쪽 창에 영구적으로 나타나고 세로화 면에서는 화면 일부에 볼 수 있도록 했다. 전체 화면의 변화를 크게 줄였다. 계층의 대부분이 독립적인 화면 요소에서 사용할 수 있기 때문 에, 사람들은 단일화면으로 접속할 수 있다. 사람들이 계층을 통해 계정>사서함>메시지 목록 보 기의 하위 수준으로 이동할 때 전제화면 변화가 아닌 일부분만 변화 하게 했다. 현실적인 메시지. 사람들이 메시지의 오타를 삭제할 때 실제 종이와 같은 슬라이드 화면이 보여 진다. 추가적으로 삭제할 때 실제 종이가 쌓이는 모습을 볼 수 있다. 2)iPhone5의 실행 당신은 iPhone에 맞춰서 당신의 어플리케이션을 재설계 할 필요는 없다. 많은 어플리케이션이 기 존의 UI를 사용해도 어울리게 보일 것이다. 허나 일부분은 컨텐츠나 배경을 늘려야 될 필요도 있 다. 가령 게임이나 개인적인 이미지 등의 어플리케이션은 추가적은 작업이 필요할지도 모른다.
  • 5. Note : iPhone5에 실행하는 모든 어플리케이션은 정확한 크기의 초기화면을 포함 해야 한다. iOS 장치를 위한 초기화면 만들기는 “Launch Image”를 통해 배울 수 있다. iPhone5 디스플레이는 다른 iPhone과 iPod touch 장치의 디스플레이에 비해 세로로 176 픽셀이 크다. 세로보기 화면에서 추가 높이는 표준 테이블보기에 2 개의 행을 추가한 높이와 거의 동일 하다. 예를 들어, iPhone5(오른쪽 아래 그림 참조)에서 실행되는 메시지화면은 iPhone4S에서 실행 되는 메시지화면 보다 긴 대화 영역이 표시된다. (왼쪽 아래 그림 참조).
  • 6. 물론 가로 방향 일 때는 추가적인 176픽셀이 양쪽 측면공간으로 이동하게 된다. 예를 들면 iPhone5에서 메시지를 보낼 때 UI가 늘어나면서 추가적인 가로 공간을 채운다. 위의 메시지 화면이 보여주는 중요한 점은 iPhone5에 적용되어 만들어진 작은 UI도 어떤 방법으 로든 기능을 변화시키면 안된 다는 것이다. 사용자경험의 일관성을 위해 iPhone5의 핵심 디자인 원칙을 따라야 한다. 큰 장치의 화면에서는 많은 컨텐츠를 볼 수 있다. 그러나 어플리케이션의 기 능을 더 들어가 있는 것은 아니다. 당신 어플리케이션의 기능을 변경하는 것은 아니기 때문에 일 반적으로 iPhone5에 알맞은 어플리케이션을 만드는 것은 드물다. 어플리케이션 UI를 설계하기 위 해 자동 레이아웃을 사용하는 경우에는 작업을 수월하게 할 수 있다. 다음 가이드 라인은 당신의 UI를 당신의 어플리케이션에 알맞게 변화 시키는 데 도움을 줄 것 이다.
  • 7. Note : 당신의 어플리케이션을 어떤 변경도 하지 않는다면 그것은 iPhone5호환 모드로 실행될 것 이다. 어플리케이션이 호환모드에서 실행되면 iOS는 상하에 검은색 바를 생성하면서 자동으 로 어플리케이션 UI를 가운데 배치한다. 몇몇의 개발자들은 정확한 초기화면을 새로 만들거나 UI를 바꾸지 않고 iPhone5 화면의 가운데 배치 하는 것이 더 간단할 수 있다고 말했다. 자동적으로 많은 컨텐츠를 나타나게 했다. UI화면 일부가 화면의 하단에 숨겨져 있는 경우 iPhone5에서는 UI를 나타나게 하기 위해 화면높이를 변경할 필요가 없다. 설정화면을 예로 들어 보자. iPhone5에서는 4S보다 추가적으로 더 많은 테이블을 볼 수 있다.
  • 8. 컨텐츠 영역을 늘렸다. 당신이 컨텐츠의 화면을 볼 때 추가적으로 몇몇의 컨텐츠를 더 보기 위해 수직으로 화면확장을 생각할 것이다. 예를 들면 iPhone5에서 메일의 메시지 영역은 4S보다 더 크 다. 컨텐츠 영역 사이의 배경영역을 확장 하였다. 컨텐츠 화면 사이의 수직 공간을 확장 함으로써 당 신의 레이아웃은 좀더 편안하게 보이게 할 수 있다. 예를 들면 iPhone5의 게임센터 화면은 4S보 다 메인 컨텐츠 영역 사이의 배경을 좀더 많이 볼 수 있다.
  • 9. recenter 필요하다면 최신의 시각적인 요소를 사용. 추가 공간에 맞추기 위해서 배경이나 화면을 조정한 후 당신의 UI요소가 알맞게 들어갔는지 확인하고 싶을 지도 모른다. 확인하는 한가지 방법은 화 면의 상단부분을 늘이고 나서 요소를 가운데로 조정하는 하는 것이다. 예를 들면 iPhone5에서 나 침반을 사용자 초점에 유지하고 확장된 배경가운데에 요소들 배치하는 것이다. 사용자 최적화 이미지는 확장해도 새로운 영역에 필수 적인 세부사항을 배치하지는 않는다. 만약 당신의 어플리케이션이 대부분 사용자 최적화 UI를 사용하는 경우(가령, 게임의 경우) 당신은 사 용자가 이미지를 원할 하게 볼 수 있도록 여분의 공간을 주어야 한다. 어플리케이션에서는 모든 사용자들이 추가영역에 배치된 주요기능이나 세부사항들을 볼 수 없을 수도 있기 때문에 선호하 지 않는다. 예를 들면, iPhone5의 음성메모는 4S에서 보다 더 더 많은 마이크 스탠드 이미지를 볼 수 있다.
  • 10. 일반적으로 컨트롤 사이즈를 늘리는 것을 피한다. 만약 당신의 어플리케이션에서 누를 수 있는 가장 작은 크기의 컨트롤을 사용할 때 그것이 44X44포인트 보다 작으면 안 된다. iPhone5에서는 그런 조정이 필요가 없다. 그렇지만 기존 컨트롤 사이에 공간을 추가하는 방법을 선택할 지도 모 른다. 추가적인 Bar나 Banner를 표시 하기 위해 추가 공간을 사용하면 안 된다. 사람들은 iPhone5에서 좀더 많은 컨텐츠를 볼 수 있기를 바란다. 사람들의 기대에 실망을 주지 않기 위해 추가 공간에 개인적인 버튼이나 배너를 넣는 일은 없어야 하겠다.