SlideShare a Scribd company logo

iOS Human Interface Guidlines #3_SYS4U

sys4u
sys4u

iOS Human Interface Guidlines #3_SYS4U

1 of 11
iOS Human Interface Guidelines

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

                                         번역일 : 2013년 4월 5일




IV. 변화사례 연구
새로운 어플리케이션을 만들 때, 기존의 어플리케이션 또는 새로운 플랫폼 및 장치의 일부분을

가져오길 원할지도 모른다. 하지만 몇몇의 경우에는 어플리케이션이나 새로운 플랫폼 및 장치를
모두 삭제하고 시작하는 것보다 더 어려울 수 있다. 또 다른 경우에는 새로운 환경에서 몇 단계

를 거쳐 작업을 하는 것이 더 좋다. 당신의 프로젝트가 크건 작건, 프로젝트를 위한 좋은 방법은

같은 방식으로 만든 다른 제품의 사례를 연구하는 것이다.




1. 데크스탑과 iOS장치간의 변화




당신의 소프트웨어를 데스크탑에서 iOS플랫폼으로 가져올 때 사람들이 iOS 장치를 쓰는 방식을

잘 봐야 한다.


    사람들은 산만한 공간을 이동 중에 iOS장치를 많이 사용한다. 사람들을 끌어당기고, 빠르
     게 컨텐츠를 얻게 하고, 컨텐츠에 집중할 수 있도록 만드는 것이 당신의 일이다.

    잘 알려진 80~20 법칙을 따라야 한다. 80%정도의 사람들은 어플리케이션의 일부분의 기
     능만 사용하고 나머지 20%정도의 사람들만이 어플리케이션의 모든 기능을 사용한다. 대

     부분의 iOS어플리케이션의 모든 기능은 필요가 없다. 일부분의 사용자에게만 필요하다.
1) 데스크탑에서 iPhone로 메일 보내기

 메일은 OS X의 어플리케이션에서 가장 사용빈도가 높은 것 중에 하나이다. 또한 사용자에 의
 해 수신 우선 순위 및 스토어 메일, 작업 항목 및 이벤트를 추적하고 메모나 초대장을 만들
 수 있는 매우 강력한 프로그램이다. 두 개의 창 모드에서   강력한 기능을 제공한다.




iPhone에서 메일은 데스크탑 메일에서 핵심적인 기능인 받기, 쓰기, 보내기 그리고 메시지를 정리

하기 등을 중점적으로 제공하고 있다. iPhone에서 메일은 다음의 모바일 경험을 포함한 UI에 기

능을 압축하여 제공한다.


    합리적인 외관


    각각의 작업에 맞는 화면


    직관적인 정보구조

    강력한 편집 및 정리 도구

    커뮤니케이션과 피드백을 위한 풍부한 애니메이션
iPhone의 메일이 데스크탑의 메일보다 더 뛰어난 어플리케이션은 아니다. 그것은 단지 모바일
사용자들을 위해 재설계된 것일 뿐이다. 그들이 모바일을 통해 메일을 사용 할 때 iPhone의
메일은 데스크탑의 핵심적인 기능과 매력적인 UI에 그들이 집중하게 한다. 데스크탑에서 메일
을 사용하는 경험을 모바일에 적용하기 위해서는 iPhone의 메일은 다음의 몇 가지 UI를 사용

해야 한다.

고유하고 집중도 높은 화면. 각각의 화면에는 한가지 외관을 표시한다.

-계정 목록 사서함 목록, 메시지 목록, 메시지보기 및 컴포지션 화면




쉬운 검색. 화면당 한 개의 탭을 만든다. 각각의 화면에는 이전단계로 돌아 갈수 있는 돌아가

기 버튼이 있어야 한다.

간단하고, 누를 수 있는 컨트롤, 필요할 때 사용할 수 있는 것. 새로운 메일이 왔을 때 사람들
은 내용을 알 수 없기 때문에 iPhone의 메일은 다중화면의 제공하여 내용을 확인 가능하게 한
다. 사람들은 메시지에 따라 행동하기 때문에 가령 응답, 이동, 휴지통 등의 기능을 이용 가능

하다.
작업에 따라 피드백의 유형도 다르다. 사람들이 메시지를 삭제할 때 휴지통 아이콘을 사용한다.
사람들이 메시지를 보낼 때는 진행상황을 볼 수 있다. 메일 보내기가 완료될 때는 소리가 알려
준다. 메시지 목록 도구상자에 텍스트를 봄으로써 사람들은 메일의 최신 업데이트 상황을 볼 수

있다.

2)데스크탑의 Keynote에서 iPad의 Keynote로

데스크탑의 Keynote는 세계적인 수준의 슬라이드 프리젠테이션을 만들기 위한 강력하고 유연한
어플리케이션이다. 사람들은 정확한 내용, 세부적인 제어 및 사용자 편의성을 결합한 방식을 선호

한다. 가령, 애니메이션이나 텍스트 속성 같은 것들이 있다.




다음 사항을 통해 iPad에서의 Keynote는 데스크탑의 Keynote의 본질을 잘 파악하고 만들어야 한

다.

        사용자 컨텐츠에 집중하라.

        성능의 손실 없이 복잡함을 줄여라

        도움을 주는 단축키를 제공하라.
   데스크탑의 경험과 유사하게 만들어라

    설득력 있는 애니메이션을 통해 피드백을 제공하라




Keynote의 사용자들은 기존의 iPad 패러다임과 유사한 기능을 제공하기 때문에 어플리케이션을

빠르게 이해하고 사용한다. 신규 사용자들은 간단한 방법으로 컨텐츠를 다루기 때문에 iPad에서
Keynote사용을 쉽게 배울 수 있다. 데스크탑에서 iPad로의 Keynote 변환에는 많은 수정과 재설계

가 필요하다. 여기 몇 개의 확실한 적용법이 있다.

간소화된 도구상자. 도구상자에는 오직 7개의 항목만이 존재한지만, 그들은 사용자가 콘텐츠를 만

드는 데 필요한 모든 기능과 도구와 일관된 액세스를 제공한다.




사용자 초점에 응답하는 간단한 관리자. 관리자는 자동으로 사람들은 선택한 개체를 변경하는 데
필요한 도구와 속성이 포함되어 있다. 사용자들은 관리자 보기에서 필요한 모든 것을 변경 할 수

있다. 자주 변경되는 속성을 변경해야 할 경우, 또 다른 관리자 보기를 볼 수 있다.




많은 양의 사전 제작된 스타일 모음. 사람들은 사전 제작된 스타일 테이블을 통해 객체의 변화를
쉽게 보고 느낄 수 있다. 색상 이외에 각 컬렉션은 전체적인 테마에서 작동하도록 설계되어 같은

테이블의 제목이나 축 분할 부호 등 사전 제작 스타일 속성이 포함되어 있다.




컨테츠를 직접 조작할 때 의미 있는 충분한 애니메이션 동반. iPad의 Keynote에서 사용자들은 슬
라이드를 드래그 하여 새로운 위치에 놓거나 돌려서 회전하거나 두드려서 선택할 수 있다. 직접

조작 효과는 iPad의 Keynote 애니메이션 반응을 통해 강화되었다. 예를 들어, 사용자가 슬라이드

를 새로운 장소로 이동시킬 때 주변 슬라이드는 물결치며 만들어진 공간으로 이동한다.




3)데스크탑 브라우저에서 iOS의 Safari로

iOS의 Safari에서는 iOS장치의 탁월한 모바일 웹 시각경험을 제공한다. 사람들은 장치를 회전시키
거나 화면을 눌러서 볼 때 조정하는 기능과 명확한 글씨와 이미지 등에 만족하고 있다. 표준 기
반의 웹사이트는 iOS장치에서 잘 나타난다. 이와 다르게 plug-in을 사용하지 않은 웹사이트는

iPhone과 iPad에서 변조되어 나타나게 된다.

Recommended

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 #5_SYS4U
iOS Human Interface Guidlines #5_SYS4UiOS Human Interface Guidlines #5_SYS4U
iOS Human Interface Guidlines #5_SYS4Usys4u
 
iOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4UiOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4Usys4u
 
iOS Human Interface Guidlines #7_SYS4U
iOS Human Interface Guidlines #7_SYS4UiOS Human Interface Guidlines #7_SYS4U
iOS Human Interface Guidlines #7_SYS4Usys4u
 
iOS Human Interface Guidlines #8_SYS4U
iOS Human Interface Guidlines #8_SYS4UiOS Human Interface Guidlines #8_SYS4U
iOS Human Interface Guidlines #8_SYS4Usys4u
 
iOS Human Interface Guidlines #12_SYS4U
iOS Human Interface Guidlines #12_SYS4UiOS Human Interface Guidlines #12_SYS4U
iOS Human Interface Guidlines #12_SYS4Usys4u
 
iOS Human Interface Guidlines #10_SYS4U
iOS Human Interface Guidlines #10_SYS4UiOS Human Interface Guidlines #10_SYS4U
iOS Human Interface Guidlines #10_SYS4Usys4u
 
iOS Human Interface Guidlines #15_SYS4U
iOS Human Interface Guidlines #15_SYS4UiOS Human Interface Guidlines #15_SYS4U
iOS Human Interface Guidlines #15_SYS4Usys4u
 

More Related Content

What's hot

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 Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4UiOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4Usys4u
 
iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)Theodore(Yongbin) Cha
 
Web Accessibility_SYS4U
Web Accessibility_SYS4UWeb Accessibility_SYS4U
Web Accessibility_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 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
 
UX Layout Design_SYS4U
UX Layout Design_SYS4UUX Layout Design_SYS4U
UX Layout Design_SYS4Usys4u
 
iOS Auto Layout
iOS Auto LayoutiOS Auto Layout
iOS Auto LayoutEunjoo Im
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)Booseol Shin
 
허니컴 태블릿 디자인
허니컴 태블릿 디자인허니컴 태블릿 디자인
허니컴 태블릿 디자인Sang-min Lee
 
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례
개발자와 디자이너 간 실제 커뮤니케이션(협업) 사례mosaicnet
 
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
 
앱 디자인 시작하기
앱 디자인 시작하기앱 디자인 시작하기
앱 디자인 시작하기Sangho Lee
 
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
 

What's hot (15)

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 Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4UiOS Human Interface Guidlines #14_SYS4U
iOS Human Interface Guidlines #14_SYS4U
 
iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)iOS Human Interface Guidelines 정리 (1)
iOS Human Interface Guidelines 정리 (1)
 
Web Accessibility_SYS4U
Web Accessibility_SYS4UWeb Accessibility_SYS4U
Web Accessibility_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 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 한글 정리 문서입니다.
 
UX Layout Design_SYS4U
UX Layout Design_SYS4UUX Layout Design_SYS4U
UX Layout Design_SYS4U
 
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
 
앱 디자인 시작하기
앱 디자인 시작하기앱 디자인 시작하기
앱 디자인 시작하기
 
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
 

Viewers also liked

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

Viewers also liked (12)

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
 
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
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_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_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
 
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
 
Observer Design Pattern in Java_SYS4U
Observer Design Pattern in Java_SYS4UObserver Design Pattern in Java_SYS4U
Observer Design Pattern in Java_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
 
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
 
iOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4UiOS Human Interface Guidlines #11_SYS4U
iOS Human Interface Guidlines #11_SYS4U
 

Similar to iOS Human Interface Guidlines #3_SYS4U

LingoStar iPhone App Design Workshop
LingoStar iPhone App Design WorkshopLingoStar iPhone App Design Workshop
LingoStar iPhone App Design Workshop성관 윤
 
Windows 10 in the classroom
Windows 10 in the classroomWindows 10 in the classroom
Windows 10 in the classroom기현 김
 
[월간금융] 스마트워크 필수활용팁(1)
[월간금융] 스마트워크 필수활용팁(1)[월간금융] 스마트워크 필수활용팁(1)
[월간금융] 스마트워크 필수활용팁(1)규문 최
 
모바일 앱 발표
모바일 앱 발표모바일 앱 발표
모바일 앱 발표승현 황
 
델파이 @22
델파이 @22델파이 @22
델파이 @22Devgear
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다yamoo9
 
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)NAVER D2
 
경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제 경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제 Young Eun Park
 
6. nexcore alopex runtime
6. nexcore alopex runtime6. nexcore alopex runtime
6. nexcore alopex runtimeJinKyoungHeo
 
안드로이드와 아이오에스
안드로이드와 아이오에스안드로이드와 아이오에스
안드로이드와 아이오에스zoosagi12
 
Portfolio imyongtai 2015
Portfolio imyongtai 2015Portfolio imyongtai 2015
Portfolio imyongtai 2015Yongtai Im
 
오래가는 Ux 디자인 1414905 이서현
오래가는 Ux 디자인   1414905 이서현오래가는 Ux 디자인   1414905 이서현
오래가는 Ux 디자인 1414905 이서현서현 이
 
Android design guideline overview
Android design guideline overviewAndroid design guideline overview
Android design guideline overviewGeonu Choi
 
SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)Youngbin Han
 
OS vi : Smart Pad UI Design (2011 Graduation Project)
OS vi : Smart Pad UI Design (2011 Graduation Project)OS vi : Smart Pad UI Design (2011 Graduation Project)
OS vi : Smart Pad UI Design (2011 Graduation Project)Wooseok Jeon
 

Similar to iOS Human Interface Guidlines #3_SYS4U (20)

LingoStar iPhone App Design Workshop
LingoStar iPhone App Design WorkshopLingoStar iPhone App Design Workshop
LingoStar iPhone App Design Workshop
 
Architect
ArchitectArchitect
Architect
 
Windows 10 in the classroom
Windows 10 in the classroomWindows 10 in the classroom
Windows 10 in the classroom
 
Ewha ipad 2
Ewha ipad 2Ewha ipad 2
Ewha ipad 2
 
[월간금융] 스마트워크 필수활용팁(1)
[월간금융] 스마트워크 필수활용팁(1)[월간금융] 스마트워크 필수활용팁(1)
[월간금융] 스마트워크 필수활용팁(1)
 
Dubuplus guide
Dubuplus guideDubuplus guide
Dubuplus guide
 
Hellotutorial
HellotutorialHellotutorial
Hellotutorial
 
모바일 앱 발표
모바일 앱 발표모바일 앱 발표
모바일 앱 발표
 
델파이 @22
델파이 @22델파이 @22
델파이 @22
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
 
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
[141]지난 1년간의 웨일 브라우저와 그 미래 (부제: 제품 매니저가 들려주는 생생한 기술/제품 이야기)
 
경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제 경영과 정보기술 - 어플리케이션 디자인 과제
경영과 정보기술 - 어플리케이션 디자인 과제
 
6. nexcore alopex runtime
6. nexcore alopex runtime6. nexcore alopex runtime
6. nexcore alopex runtime
 
안드로이드와 아이오에스
안드로이드와 아이오에스안드로이드와 아이오에스
안드로이드와 아이오에스
 
Portfolio imyongtai 2015
Portfolio imyongtai 2015Portfolio imyongtai 2015
Portfolio imyongtai 2015
 
오래가는 Ux 디자인 1414905 이서현
오래가는 Ux 디자인   1414905 이서현오래가는 Ux 디자인   1414905 이서현
오래가는 Ux 디자인 1414905 이서현
 
Smart phone OS 비교
Smart phone OS 비교Smart phone OS 비교
Smart phone OS 비교
 
Android design guideline overview
Android design guideline overviewAndroid design guideline overview
Android design guideline overview
 
SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)SKHUFEEDS 소개 발표자료(노트 포함)
SKHUFEEDS 소개 발표자료(노트 포함)
 
OS vi : Smart Pad UI Design (2011 Graduation Project)
OS vi : Smart Pad UI Design (2011 Graduation Project)OS vi : Smart Pad UI Design (2011 Graduation Project)
OS vi : Smart Pad UI Design (2011 Graduation Project)
 

More from 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
 
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4UMemory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_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
 

More from sys4u (9)

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
 
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4UMemory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_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 #3_SYS4U

  • 1. iOS Human Interface Guidelines 번역자 : 시스포유아이앤씨 마영희 주임 번역일 : 2013년 4월 5일 IV. 변화사례 연구 새로운 어플리케이션을 만들 때, 기존의 어플리케이션 또는 새로운 플랫폼 및 장치의 일부분을 가져오길 원할지도 모른다. 하지만 몇몇의 경우에는 어플리케이션이나 새로운 플랫폼 및 장치를 모두 삭제하고 시작하는 것보다 더 어려울 수 있다. 또 다른 경우에는 새로운 환경에서 몇 단계 를 거쳐 작업을 하는 것이 더 좋다. 당신의 프로젝트가 크건 작건, 프로젝트를 위한 좋은 방법은 같은 방식으로 만든 다른 제품의 사례를 연구하는 것이다. 1. 데크스탑과 iOS장치간의 변화 당신의 소프트웨어를 데스크탑에서 iOS플랫폼으로 가져올 때 사람들이 iOS 장치를 쓰는 방식을 잘 봐야 한다.  사람들은 산만한 공간을 이동 중에 iOS장치를 많이 사용한다. 사람들을 끌어당기고, 빠르 게 컨텐츠를 얻게 하고, 컨텐츠에 집중할 수 있도록 만드는 것이 당신의 일이다.  잘 알려진 80~20 법칙을 따라야 한다. 80%정도의 사람들은 어플리케이션의 일부분의 기 능만 사용하고 나머지 20%정도의 사람들만이 어플리케이션의 모든 기능을 사용한다. 대 부분의 iOS어플리케이션의 모든 기능은 필요가 없다. 일부분의 사용자에게만 필요하다.
  • 2. 1) 데스크탑에서 iPhone로 메일 보내기 메일은 OS X의 어플리케이션에서 가장 사용빈도가 높은 것 중에 하나이다. 또한 사용자에 의 해 수신 우선 순위 및 스토어 메일, 작업 항목 및 이벤트를 추적하고 메모나 초대장을 만들 수 있는 매우 강력한 프로그램이다. 두 개의 창 모드에서 강력한 기능을 제공한다. iPhone에서 메일은 데스크탑 메일에서 핵심적인 기능인 받기, 쓰기, 보내기 그리고 메시지를 정리 하기 등을 중점적으로 제공하고 있다. iPhone에서 메일은 다음의 모바일 경험을 포함한 UI에 기 능을 압축하여 제공한다.  합리적인 외관  각각의 작업에 맞는 화면  직관적인 정보구조  강력한 편집 및 정리 도구  커뮤니케이션과 피드백을 위한 풍부한 애니메이션
  • 3. iPhone의 메일이 데스크탑의 메일보다 더 뛰어난 어플리케이션은 아니다. 그것은 단지 모바일 사용자들을 위해 재설계된 것일 뿐이다. 그들이 모바일을 통해 메일을 사용 할 때 iPhone의 메일은 데스크탑의 핵심적인 기능과 매력적인 UI에 그들이 집중하게 한다. 데스크탑에서 메일 을 사용하는 경험을 모바일에 적용하기 위해서는 iPhone의 메일은 다음의 몇 가지 UI를 사용 해야 한다. 고유하고 집중도 높은 화면. 각각의 화면에는 한가지 외관을 표시한다. -계정 목록 사서함 목록, 메시지 목록, 메시지보기 및 컴포지션 화면 쉬운 검색. 화면당 한 개의 탭을 만든다. 각각의 화면에는 이전단계로 돌아 갈수 있는 돌아가 기 버튼이 있어야 한다. 간단하고, 누를 수 있는 컨트롤, 필요할 때 사용할 수 있는 것. 새로운 메일이 왔을 때 사람들 은 내용을 알 수 없기 때문에 iPhone의 메일은 다중화면의 제공하여 내용을 확인 가능하게 한 다. 사람들은 메시지에 따라 행동하기 때문에 가령 응답, 이동, 휴지통 등의 기능을 이용 가능 하다.
  • 4. 작업에 따라 피드백의 유형도 다르다. 사람들이 메시지를 삭제할 때 휴지통 아이콘을 사용한다. 사람들이 메시지를 보낼 때는 진행상황을 볼 수 있다. 메일 보내기가 완료될 때는 소리가 알려 준다. 메시지 목록 도구상자에 텍스트를 봄으로써 사람들은 메일의 최신 업데이트 상황을 볼 수 있다. 2)데스크탑의 Keynote에서 iPad의 Keynote로 데스크탑의 Keynote는 세계적인 수준의 슬라이드 프리젠테이션을 만들기 위한 강력하고 유연한 어플리케이션이다. 사람들은 정확한 내용, 세부적인 제어 및 사용자 편의성을 결합한 방식을 선호 한다. 가령, 애니메이션이나 텍스트 속성 같은 것들이 있다. 다음 사항을 통해 iPad에서의 Keynote는 데스크탑의 Keynote의 본질을 잘 파악하고 만들어야 한 다.  사용자 컨텐츠에 집중하라.  성능의 손실 없이 복잡함을 줄여라  도움을 주는 단축키를 제공하라.
  • 5. 데스크탑의 경험과 유사하게 만들어라  설득력 있는 애니메이션을 통해 피드백을 제공하라 Keynote의 사용자들은 기존의 iPad 패러다임과 유사한 기능을 제공하기 때문에 어플리케이션을 빠르게 이해하고 사용한다. 신규 사용자들은 간단한 방법으로 컨텐츠를 다루기 때문에 iPad에서 Keynote사용을 쉽게 배울 수 있다. 데스크탑에서 iPad로의 Keynote 변환에는 많은 수정과 재설계 가 필요하다. 여기 몇 개의 확실한 적용법이 있다. 간소화된 도구상자. 도구상자에는 오직 7개의 항목만이 존재한지만, 그들은 사용자가 콘텐츠를 만 드는 데 필요한 모든 기능과 도구와 일관된 액세스를 제공한다. 사용자 초점에 응답하는 간단한 관리자. 관리자는 자동으로 사람들은 선택한 개체를 변경하는 데 필요한 도구와 속성이 포함되어 있다. 사용자들은 관리자 보기에서 필요한 모든 것을 변경 할 수 있다. 자주 변경되는 속성을 변경해야 할 경우, 또 다른 관리자 보기를 볼 수 있다. 많은 양의 사전 제작된 스타일 모음. 사람들은 사전 제작된 스타일 테이블을 통해 객체의 변화를
  • 6. 쉽게 보고 느낄 수 있다. 색상 이외에 각 컬렉션은 전체적인 테마에서 작동하도록 설계되어 같은 테이블의 제목이나 축 분할 부호 등 사전 제작 스타일 속성이 포함되어 있다. 컨테츠를 직접 조작할 때 의미 있는 충분한 애니메이션 동반. iPad의 Keynote에서 사용자들은 슬 라이드를 드래그 하여 새로운 위치에 놓거나 돌려서 회전하거나 두드려서 선택할 수 있다. 직접 조작 효과는 iPad의 Keynote 애니메이션 반응을 통해 강화되었다. 예를 들어, 사용자가 슬라이드 를 새로운 장소로 이동시킬 때 주변 슬라이드는 물결치며 만들어진 공간으로 이동한다. 3)데스크탑 브라우저에서 iOS의 Safari로 iOS의 Safari에서는 iOS장치의 탁월한 모바일 웹 시각경험을 제공한다. 사람들은 장치를 회전시키 거나 화면을 눌러서 볼 때 조정하는 기능과 명확한 글씨와 이미지 등에 만족하고 있다. 표준 기 반의 웹사이트는 iOS장치에서 잘 나타난다. 이와 다르게 plug-in을 사용하지 않은 웹사이트는 iPhone과 iPad에서 변조되어 나타나게 된다.
  • 7. 대부분의 성공적인 웹사이트는 다음과 같다.  페이지의 폭이 장치의 폭과 일치 해야 하는 경우에는 장치에 따라 적절하게 뷰 포트 를 설정한다.  CSS를 통한 고정위치는 피하고, 사용자가 확대할 때 화면 밖으로 이동하지 않게 한다.  포인터 기반이 아닌 터치기반의 UI을 활성화 한다. 때로는 또 다른 수정이 적합할 수 있다. 예를 들면, 웹 어플리케이션은 항상 올바르게 뷰포트의 폭을 설정하고 iOS의 Safari의 UI를 숨길 수 있다. 이러한 변경 방법에 대한 자세한 내용은 "뷰포 트의 설정"을 참조하면 된다. Safari 웹 컨텐츠 가이드의 "웹 어플리케이션 구성"을 참조 하면 된 다. 웹사이트는 다른 방법으로 iOS의 Safari에 데스크탑 웹 경험을 적용한다. 적절한 UI 제공을 위해 사용자지정 CSS를 사용한다. 각각의 환경에 맞는 적합한 UI요소를 사용 할 수 있다. Apple 웹사이트에 있는 사용자들이 볼 수 있는 트레일러 영상 페이지를 예로 들어보 겠다. 데스크탑의 Safari에서 사용자는 추가 트레일러를 보기 위해, 숫자 또는 이전 및 다음 컨트 롤을 클릭 할 수 있다. iPhone에서 다음, 이전, 그리고 숫자 컨트롤은 눈에 잘 띄고 사용하기 쉬운 버튼형식으로 교체되 었다. .
  • 8. iOS의 Safari의 키보드는 다루기가 쉽다. iPhone의 Safari에서 키보드와 양식도우미가 표시되는 경 우 URL영역 아래쪽에 표시된다. Note: 고해상도의 iPhone와 iPod touch의 경우 다음에서 보여지는 값의 두 배로 나타난다.
  • 9. 키보드와 양식 도우미가 표시되지 않을 경우, 추가적으로 사용할 수 있는 수직공간이 216픽셀이 있다. 가로형 화면에서는 키보드 높이가 162픽셀 양식도우미 높이가 32픽셀로 달라진다. iOS의 Safari에서는 팝업 메뉴 컨트롤이 적용된다. 데스크탑의 Safari에서 팝업메뉴는 수많은 OS X어플리케이션 아이템을 포함하고 있다. 즉, 메뉴는 필요에 따라 윈도우 경계를 넘어 확장하고 모 든 항목을 표시하기 위해 열린다. iOS의 Safari에서 팝업 메뉴는 더 나은 사용자 경험을 제공하는 기본 요소를 사용하여 표시된다 예를 들면 iPhone의 팝업메뉴는 아래그림에서 보는 것과 같이 목 록을 찍어서 고를 수 있게 나타나게 된다.
  • 10. iPad에서 팝업 메뉴는 아래그림과 같이 보여진다.
  • 11. iPhone의 웹 어플리케이션에서 데이터를 표시하기 위해 목록을 사용한다. iOS 사용자는 기존의 어플리케이션 목록에 익숙하기 때문에 그들이 웹 어플리케이션 목록을 볼 때, 웹 컨텐츠가 어플 리케이션이라고 생각 할 수도 있다. iPhone에서 목록은 각이 있거나 둥근 사각형으로 되어있다. 각각의 스타일은 명확한 측정기준이 있다.