KR20120135232A - 유연한 평행 움직임을 가진 멀티-레이어 사용자 인터페이스 - Google Patents

유연한 평행 움직임을 가진 멀티-레이어 사용자 인터페이스 Download PDF

Info

Publication number
KR20120135232A
KR20120135232A KR1020127021119A KR20127021119A KR20120135232A KR 20120135232 A KR20120135232 A KR 20120135232A KR 1020127021119 A KR1020127021119 A KR 1020127021119A KR 20127021119 A KR20127021119 A KR 20127021119A KR 20120135232 A KR20120135232 A KR 20120135232A
Authority
KR
South Korea
Prior art keywords
layer
movement
content
display area
speed
Prior art date
Application number
KR1020127021119A
Other languages
English (en)
Inventor
제프리 쳉-야오 퐁
에릭 제이 훌
세르게이 처브
Original Assignee
마이크로소프트 코포레이션
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 마이크로소프트 코포레이션 filed Critical 마이크로소프트 코포레이션
Publication of KR20120135232A publication Critical patent/KR20120135232A/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/03—Arrangements for converting the position or the displacement of a member into a coded form
    • G06F3/041—Digitisers, e.g. for touch screens or touch pads, characterised by the transducing means
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04803—Split screen, i.e. subdividing the display area or the window area into separate subareas

Abstract

사용자 인터페이스(UI) 시스템은 멀티-레이어 그래픽 사용자 인터페이스에서의 움직임을 계산한다. UI 시스템은 터치스크린 상의 제스처에 대응하는 사용자 입력을 수신한다. UI 시스템은 제1 이동 속도로 제 1 방향(예컨대, 수평 방향)을 향하는 제 1 레이어의 움직임을 계산한다. 예를 들어, 제 1 이동 속도는 터치스크린 상에서 사용자의 손가락이나 다른 사물에 의해 취해지는 제스처의 이동 속도와 실질적으로 동일할 수 있다. UI 시스템은 제 1 이동 속도와 다른 이동 속도의, 제 1 레이어의 움직임에 실질적으로 평행한 다른 레이어들의 움직임을 계산한다.

Description

유연한 평행 움직임을 가진 멀티-레이어 사용자 인터페이스{MULTI-LAYER USER INTERFACE WITH FLEXIBLE PARALLEL MOVEMENT}
효과적인 사용자 인터페이스의 설계에는 많은 난제들이 있다. 디스플레이의 공간 제약과 특정 사용자의 요구가 있는 경우, 사용자에게 최적량의 시각 정보 또는 기능을 어떻게 제공할 것인지가 한 가지 난제이다. 이런 난제는 스마트폰 또는 기타 이동 컴퓨팅 장치와 같이 소형 디스플레이가 있는 장치에서 특히 심각해질 수 있다. 이는 특정 행동을 실행하는(예컨대, 파일 라이브러리에서 오디오 또는 비디오 파일 검색하기) 사용자가 보통 이용할 수 있는 정보가 디스플레이 안에 들어가는 것보다 더 많기 때문이다. 사용자는 그 양이 한정된 이용가능한 디스플레이 공간 상에서 정보가 어떻게 프리젠테이션되는지에 대해 세심한 주의를 기울이지 않으면 쉽게 헤매게 될 수 있다.
이전 기법의 이점이 무엇이든 간에, 이하에서 제공되는 기법 및 수단의 효과를 가지지는 못한다.
본원에 기술된 기법 및 수단은 컴퓨터 디스플레이 상에서 사용자에게 시각 정보를 프리젠테이션하는 것에 관한 것이며, 특히 스마트폰 및 기타 이동 컴퓨팅 장치 상에서 발견되는 것과 같은 소형 디스플레이 상에서 시각 정보를 프리젠테이션하는 것에 관한 것이다. 특히, 서로 관련된 시각 정보 레이어들이 다른 속도로 움직이는 사용자 인터페이스의 다른 양태들에 관한 기법 및 수단이 기술된다. 일 구현예에서, 사용자 입력에 대해, 레이어의 길이(예를 들어, 레이어가 수평인 경우, 레이어의 폭이라고도 할 수 있음)의 함수인 속도로 동일 방향으로 레이어들이 움직인다. 예를 들어, 그래픽 사용자 인터페이스(GUI)는 배경 레이어, 제목 레이어 및 컨텐츠 레이어를 포함한다. 사용자가 컨텐츠 레이어를 특정 방향으로(예컨대, 수평 차원에서 왼쪽에서 오른쪽으로) 탐색함으로써 하나 이상의 배경 레이어 및 제목 레이어에서도 동일한 방향의 움직임을 일으키게 된다. 레이어에서의 움직임 양과 종류(nature)는 레이어에서의 데이터, 레이어에서의 대응 락 포인트들(lock points) 간의 상대 거리 등의 하나 이상의 요인에 의해 좌우된다. 예를 들어, 컨텐츠 레이어가 배경 레이어보다 긴 경우, 컨텐츠 레이어는 배경 레이어보다 더 빨리 움직인다. 컨텐츠 레이어의 이동 속도(movement rate)가 터치스크린 상의 제스처의 이동 속도와 일치하여, 사용자에게 터치스크린 상의 컨텐츠를 직접적으로 조작하는 느낌을 줄 수 있다.
일 양태로, UI 시스템은 적어도 제 1 및 제 2 레이어를 포함하는 GUI를 디스플레이한다. 제 1 레이어에서 시각 정보의 제 1 부분이 터치스크린의 디스플레이 영역 안에 있고, 레이어들은 서로 실질적으로 평행하다. UI 시스템은 터치스크린 상의 제스처에 대응하는 사용자 입력을 수신한다. UI 시스템은 사용자 입력에 적어도 부분적으로 기반하여 제 1 움직임을 계산한다. 제 1 움직임은, 제 1 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 밖에 있는 초기 제 1 레이어 위치로부터 제 1 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 안에 있는 현재 제 1 레이어 위치로의 제 1 레이어의 움직임을 포함한다. 제 1 움직임은 제 1 이동 속도로 제 1 방향을 향한다. UI 시스템은 사용자 입력에 적어도 부분적으로 기반하여 제 2 움직임을 계산한다. 제 2 움직임은 제 2 레이어에서 초기 제 1 레이어 위치로부터 현재 제 2 레이어 위치로의 시각 정보의 움직임을 포함한다. 제 2 움직임은 제 2 이동 속도로 제 1 방향을 향한다. 제 2 이동 속도는 제 1 이동 속도와 다르다. 예를 들어, 제 1 레이어는 컨텐츠 레이어이고, 제 2 레이어(에컨대, 섹션 헤더 레이어 또는 제목 레이어)는 디스플레이 영역에서 컨텐츠 레이어 위에 있는 레이어이다.
다른 양태로, 컴퓨팅 장치의 터치스크린 상에 디스플레이되는 GUI는 적어도 제 1 레이어(예컨대, 컨텐츠 레이어) 및 제 2 레이어(예컨대, 컨텐츠 레이어 위에 있는 섹션 헤더 레이어)를 포함한다. 제 2 레이어는 제 1 부분(예컨대, 제 1 섹션 헤더) 및 제 2 부분(제 2 섹션 헤더)을 포함한다. 컴퓨팅 장치는 터치스크린을 통해 제 1 레이어에서의 움직임을 나타내는 사용자 입력을 수신한다. 컴퓨팅 장치는 사용자 입력에 적어도 부분적으로 기반하여 제 1 움직임을 계산한다. 제 1 움직임은 제 1 이동 속도(예컨대, 터치스크린 상의 사용자의 손가락이나 다른 사물에 의해 취해지는 제스처의 이동 속도와 실질적으로 동일한 이동 속도)의 제 1 레이어의 움직임을 포함한다. 컴퓨팅 장치는 제 1 움직임에 적어도 부분적으로 기반하여 제 2 움직임을 계산한다. 제 2 움직임은 제 2 레이어의 제 1 부분의 움직임을 포함한다. 제 2 움직임은 제 1 움직임에 실질적으로 평행하며, 제 2 움직임은 제 2 이동 속도를 갖고 있다. 컴퓨팅 장치는 사용자 입력에 적어도 부분적으로 기반하여 제 3 움직임을 계산한다. 제 3 움직임은 제 3 이동 속도의 제 1 레이어의 움직임을 포함한다. 컴퓨팅 장치는 제 3 움직임에 적어도 부분적으로 기반하여 제 4 움직임을 계산한다. 제 4 움직임은 제 2 레이어의 제 2 부분의 움직임을 포함한다. 제 4 움직임은 제 3 움직임에 실질적으로 평행하며, 제 4 움직임은 제 4 이동 속도를 갖고 있다. 제 2 이동 속도는 제 4 이동 속도 및 제 1 이동 속도와는 다르다. 예를 들어, 제 1 섹션 헤더는 컨텐츠 레이어에서 하나 이상의 컨텐츠 창의 제 1 집합에 연관되어 있고, 제 2 섹션 헤더는 컨텐츠 레이어에서 하나 이상의 컨텐츠 창의 제 2 집합과 연관되어 있다. 섹션 헤더에서의 이동 속도는 다를 수 있다. 예를 들어, 이동 속도는 섹션 헤더의 폭, 연관된 컨텐츠 창 및/또는 디스플레이 영역의 폭에 기반할 수 있다.
또 다른 양태로, UI 시스템은 제스처를 통해 사용자 입력을 수신하도록 동작하는 터치스크린 상에 GUI를 디스플레이 한다. GUI는 컨텐츠 레이어, 섹션 헤더 레이어, 제목 레이어 및 배경 레이어를 포함한다. 각 레이어는 각각의 레이어에 시각 정보의 적어도 제 1 및 제 2 부분을 포함한다. 각각의 레이어에서 시각 정보의 제 1 부분은 터치스크린의 디스플레이 영역 안에 있고, 각각의 레이어에서 시각 정보의 제 2 부분은 디스플레이 영역 밖에 있다. UI 시스템은 터치스크린 상의 제스처에 대응하는 사용자 입력을 수신한다. UI 시스템은 사용자 입력에 적어도 부분적으로 기반하여 컨텐츠-레이어 움직임을 계산한다. 컨텐츠-레이어 움직임은 (a) 컨텐츠 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 밖에 있는 초기 컨텐츠-레이어 위치로부터 (b) 컨텐츠 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 안에 있는 현재 컨텐츠-레이어 위치로의 컨텐츠 레이어의 움직임을 포함한다. UI 시스템은 (a)로부터 (b)로의 움직임을 애니메이션화한다. 컨텐츠-레이어 움직임은 컨텐츠-레이어 이동 속도로 제 1 방향을 향한다. UI 시스템은 사용자 입력에 적어도 부분적으로 기반하여 섹션-헤더-레이어 움직임을 계산한다. 섹션-헤더-레이어 움직임은 (c) 섹션 헤더 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 밖에 있는 초기 섹션-헤더-레이어 위치로부터 (d) 섹션 헤더 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 안에 있는 현재 섹션-헤더-레이어 위치로의 섹션 헤더 레이어의 움직임을 포함한다. UI 시스템은 (c)로부터 (d)로의 움직임을 애니메이션화한다. 섹션-헤더-레이어 움직임은 섹션-헤더-레이어 이동 속도로 제 1 방향을 향한다. UI 시스템은 사용자 입력에 적어도 부분적으로 기반하여 제목-레이어 움직임을 계산한다. 제목-레이어 움직임은 (e) 제목 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 밖에 있는 초기 제목-레이어 위치로부터 (f) 제목 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 안에 있는 현재 제목-레이어 위치로의 제목 레이어의 움직임을 포함한다. UI 시스템은 (e)로부터 (f)로의 움직임을 애니메이션화한다. 제목-레이어 움직임은 제목-레이어 이동 속도로 제 1 방향을 향한다. UI 시스템은 사용자 입력에 적어도 부분적으로 기반하여 배경 레이어 움직임을 계산한다. 배경-레이어 움직임은 (g) 배경 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 밖에 있는 초기 배경-레이어 위치로부터 (h) 배경 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 안에 있는 현재 배경-레이어 위치로의 배경 레이어의 움직임을 포함한다. UI 시스템은 (g)로부터 (h)로의 움직임을 애니메이션화한다. 배경-레이어 움직임은 배경-레이어 이동 속도로 제 1 방향을 향한다. 컨텐츠-레이어 이동 속도는 섹션-헤더-레이어 이동 속도와 동일하고, 제목-레이어 이동 속도는 컨텐츠-레이어 이동 속도 및 섹션-헤더-레이어 이동 속도와는 다르다. 컨텐츠 레이어, 섹션 헤더 레이어 및 제목 레이어는 서로 실질적으로 평행하며 서로 오버랩되지 않는다. 컨텐츠 레이어, 섹션 헤더 레이어 및 제목 레이어 각각은 배경 레이어와 오버랩된다.
레이어는 락 포인트를 포함할 수 있다. 예를 들어, 컨텐츠 창을 포함하는 컨텐츠 레이어는 컨텐츠 창의 개수 및/또는 위치에 기반하여 (예컨대, 자동적으로) 결정되는 락 포인트를 가질 수 있다. 락 포인트는 여러 다른 방식으로 설정될 수 있다. 예를 들어, 락 포인트는 제 1 레이어의 사용자 인터페이스 구성요소의 출구 위치와 같이, 레이어의 이전 상태의 몇몇 양태에 기반할 수 있다. 제 2 레이어(예컨대, 배경 레이어, 제목 레이어 또는 섹션 헤더 레이어)의 락 포인트는 제 1 레이어 락 포인트에 대응하는 제 2 레이어 락 포인트를 가질 수 있다. 이동 속도는 락 포인트들 간의 거리에 기반할 수 있다. 예를 들어, 이동 속도는 제 2 레이어 락 포인트들 간의 거리 및 그 제 2 락 포인트들에 대응하는 제 1 레이어 락 포인트들(예컨대, 컨텐츠 레이어 락 포인트들) 간의 거리의 차이 값(difference)에 비례할 수 있다.
락 애니메이션(locking animations)이 실행될 수 있다. 예를 들어, 락 애니메이션은 레이어에서 사용자 인터페이스 구성요소의 임계 화소 개수가 디스플레이 영역 안에 있는지를 판단하고, 이 판단에 기반하여, 사용자 인터페이스 구성요소가 디스플레이 영역에 보이도록 레이어에서 현재 위치로부터 차후-락-애니메이션(post-locking-animation) 위치로의 전환(transition)을 애니메이션화하는 것을 포함한다. 다른 예로, 락 애니메이션은 락 포인트를 선택하고, 레이어에서 현재 위치로부터, 선택된 락 포인트가 디스플레이 영역의 일부와 정렬하는 차후-락-애니메이션 위치로의 전환을 애니메이션화하는 것을 포함한다. 제 2 레이어에서 현재 제 2 레이어 위치로부터 제 1 레이어 차후-락-애니메이션 위치에 대응하는 제 2 레이어 차후-락-애니메이션 위치(예컨대, 제 2 레이어 락 포인트와 선택된 제 1 레이어 락 포인트가 정렬하는 제 2 레이어 위치)로의 전환과 같은 다른 전환들도 애니메이션화될 수 있다. 다른 예를 들면, 락 애니메이션은 제 1 레이어(예컨대, 컨텐츠 레이어)에서 사용자 인터페이스 구성요소(예컨대, 컨텐츠 창(content pane))과 연관된 제 1 레이어 락 포인트를 선택하고, 사용자 인터페이스 구성요소가 디스플레이 영역에 보이도록 제 1 레이어에서 현재 제 1 레이어 위치로부터, 선택된 제 1 레이어 락 포인트가 디스플레이 영역의 일부와 정렬하는 제 1 레이어 차후-락-애니메이션 위치로의 전환을 애니메이션화하는 것을 포함한다. 락 애니메이션은 사용자 제스처에 기반하여 실행될 수 있다. 예를 들어, 락 포인트는 플릭 제스처(flick gesture)의 속도 또는 탭 제스처(tap gesture)의 위치에 기반하여 선택될 수 있다.
래핑 애니메이션(wrapping animations)이 실행될 수 있다. 예를 들어, 두 개의 레이어가 각각 시작 부분과 끝부분을 포함하고, 레이어들의 끝부분이 현재 위치에서 디스플레이되는 경우, 래핑 애니메이션의 실행은 제 1 레이어에서 현재 제 1 레이어 위치로부터 제 1 레이어의 시작 부분이 디스플레이되는 차후-래핑-애니메이션 제 1 레이어 위치로의 전환을 애니메이션하는 것과, 제 2 레이어에서 현재 제 2 레이어 위치로부터 제 2 레이어의 시작 부분이 디스플레이되는 차후-래핑-애니메이션 제 2 레이어 위치로의 전환을 애니메이션하는 것을 포함한다. 전환의 애니메이션은 다른 이동 속도와는 다른 래핑 이동 속도로 시각 정보를 움직이는 것을 포함할 수 있다.
레이어에서의 움직임(예컨대, 이동 속도, 방향 및 현재 위치)은 사용자 입력에 기반하여 계산될 수 있다. 예를 들어, 현재 위치는 초기 위치 및 제스처의 방향과 속도에 기반할 수 있다. 레이어에서의 움직임은 또한 다른 레이어의 위치에 기반하여 계산될 수도 있다. 예를 들어, 제 1 레이어 락 포인트에 대응하는 제 2 레이어 락 포인트의 위치에 기반하여 현재 제 2 레이어 위치를 계산하는 것과 같이, 계산된 현재 제 1 레이어 위치에 기반하여 현재 제 2 레이어 위치가 계산될 수 있다.
제스처는 예컨대, 팬(pan), 드래그(drag), 플릭 및 탭 인터랙션을 포함할 수 있다. 플릭은 제스처 이동 속도의 임계치 초과 여부를 판단함으로써 탐지될 수 있다. 방향을 나타내는 제스처는 그 나타낸 방향으로의 또는 다른 방향으로의 움직임을 일어나게 할 수 있다. 예를 들어, 수평 방향의 제스처는 수직 또는 수평 방향의 움직임을 일어나게 할 수 있다.
이동 속도는 여러 다른 방식으로 결정될 수 있다. 예를 들어, 레이어에 대한 이동 속도는 레이어에 대한 모션 비율에 기반하여 계산될 수 있고, 모션 비율(motion ratio)이란 다른 레이어의 최대 폭(maximum width)으로 나눈 레이어의 폭이다. 다른 예를 들면, 이동 속도는 제 1 레이어의 길이와 제 2 레이어의 길이의 차이 값에 기반할 수 있다.
추가 레이어들이 더해질 수 있다. 예를 들어, 그래픽 사용자 인터페이스는 제 1 및 제 2 레이어와 실질적으로 평행한 제 3 레이어(또는 더 많은 레이어들)를 포함할 수 있다. 레이어의 이동 속도는 각각의 레이어의 길이 간의 차이 값에 비례할 수 있다. 일 구현예에서, 섹션 헤더 레이어는 디스플레이 영역에서 컨텐츠 레이어 위에 있고, 제목 레이어는 디스플레이 영역에서 섹션 헤더 레이어 위에 있으며, 컨텐츠 레이어, 섹션 헤더 레이어 및 제목 레이어는 배경 레이어에 오버랩되어 있다.
본 발명의 상기 및 그 밖의 목적, 특징, 및 효과는 첨부 도면을 참조하여 전개되는 다음의 상세한 설명에서 보다 명백해질 것이다.
도 1은 기술된 하나 이상의 실시예에 따라, 락 포인트가 있는 배경 레이어 및 컨텐츠 레이어를 도시하는 도면이다.
도 2는 기술된 하나 이상의 실시예에 따라, 다른 속도로 움직이는 다수의 레이어들을 사용자 인터페이스에 제공하는 예시적인 기법을 도시하는 순서도이다.
도 3a-3c는 기술된 하나 이상의 실시예에 따라, 멀티-레이어 UI 시스템에 의해 프리젠테이션되는 그래픽 사용자 인터페이스에서 다수의 레이어들을 도시하는 도면들이다.
도 3d는 기술된 하나 이상의 실시예에 따라, 도 3a-3c의 다수의 레이어를 도시하는 도면이며, 디스플레이 영역은 풍경 모드(landscape fashion)로 맞춰진다.
도 4는 기술된 하나 이상의 실시예에 따라, UI 시스템이 멀티-레이어 GUI에서의 제 1 방향의 움직임을 계산하는 예시적인 기법을 도시하는 순서도이다.
도 5a-5d는 기술된 하나 이상의 실시예에 따라, 다른 속도로 움직일 수 있는 각기 다른 부분을 갖는 레이어가 있는 다수의 UI 레이어들을 도시하는 도면들이다.
도 6a-6d는 기술된 하나 이상의 실시예에 따라, 두 레이어가 나란히(in tandem) 움직이는 다수의 UI 레이어들을 도시하는 도면이다.
도 6e는 기술된 하나 이상의 실시예에 따라, 컨텐츠 레이어에서 목록에 대해 표시된 가능한 상하 모션이 있는 도 6a-6d의 다수의 레이어를 도시하는 도면이다.
도 7은 기술된 하나 이상의 실시예에 따라, UI 시스템이 제 1 방향에 직각인 제 2 방향으로 움직이도록 동작하는 UI 구성요소가 있는 적어도 하나의 레이어를 갖고 있는 멀티-레이어 GUI에서의 제 1 방향의 움직임을 계산하는 예시적인 기법을 도시하는 순서도이다.
도 8a-8c는 기술된 하나 이상의 실시예에 따라, 배경 레이어를 포함하는 다수의 UI 레이어를 도시하는 도면들이다.
도 9는 기술된 실시예를 구현할 수 있는 멀티-레이어 UI 시스템을 도시하는 시스템도이다.
도 10은 기술된 몇몇의 실시예를 구현할 수 있는 적절한 컴퓨팅 환경의 일반적인 예시를 도시한다.
도 11은 기술된 하나 이상의 실시예를 구현할 수 있는 적절한 컴퓨팅 환경의 일반적인 예시를 도시한다.
도 12는 설명된 하나 이상의 실시예를 구현할 수 있는 이동 컴퓨팅 장치의 일반적인 예시를 도시한다.
서로 관련 있는 가상 정보 레이어들이 다른 속도로 움직이는 사용자 인터페이스의 다른 양태들에 관한 기법 및 수단이 기술된다. 일 구현예에서, 레이어들은 사용자 입력에 따라, 레이어 길이의 함수인 속도로 동일한 방향으로 움직인다. 예를 들어, 그래픽 사용자 인터페이스(GUI)는 배경 레이어, 제목 레이어 및 컨텐츠 레이어를 포함한다. 사용자가 컨텐츠 레이어를 특정 방향으로(예컨대, 수평 차원에서 왼쪽에서 오른쪽으로) 탐색함으로써 배경 레이어 및/또는 제목 레이어에서도 동일한 방향의 움직임을 일으키게 된다. 움직임 양과 종류는 레이어들의 상대 길이 또는 대응 락 포인트들 간의 상대 거리 등의 하나 이상의 요인에 의해 좌우된다. 예를 들어, 컨텐츠 레이어가 (화소 면에서) 배경 레이어보다 긴 경우, 컨텐츠 레이어는 (화소로 보면) 배경 레이어보다 더 빨리 움직인다.
본원에 기술된 구현예에 대해 다양한 대안들이 가능하다. 예를 들어, 순서도와 관련하여 설명되는 기법들은 순서도에 도시된 단계의 순서를 바꾸거나, 특정 단계를 반복하거나 생략함으로써 변경될 수 있다. 다른 예를 들면, 시스템도와 관련하여 설명되는 시스템은 도면에 도시된 처리 단계의 순서를 바꾸거나, 특정 단계를 반복하거나 생략함으로써 변경될 수 있다. 또 다른 예를 들면, 도면과 관련하여 설명되는 사용자 인터페이스는 그 도면에 도시되는 사용자 인터페이스 특징들의 컨텐츠나 배치를 바꾸거나, 특정 특징을 생략함으로써 변경될 수 있다. 다른 예를 들면, 몇몇 구현예가 특정 장치 및 사용자 입력 메커니즘(예컨대, 터치스크린 인터페이스가 있는 이동 장치)와 관련하여 설명되었지만, 기술된 기법 및 수단은 다른 장치 및/또는 사용자 입력 메커니즘과 함께 사용될 수도 있다.
다양한 기법 및 수단들이 함께 사용되거나 또는 따로따로 사용될 수 있다. 설명된 하나 이상의 기법 및 수단은 상이한 실시예들에서 구현된다.
I. 레이어화된 그래픽 사용자 인터페이스 기법 및 수단
효과적인 사용자 인터페이스의 설계에는 많은 난제가 있다. 디스플레이의 공간 제약이 있고 특정 사용자의 요구가 있는 경우, 사용자에게 최적량의 시각 정보 또는 기능을 제공하는 방법이 한 가지 난제이다. 이런 난제는 스마트폰 또는 기타 이동 컴퓨팅 장치와 같이 소형 디스플레이가 있는 장치에서 특히 심각해질 수 있다. 이는 흔히 디스플레이 안에 들어갈 수 있는 것보다 더 많은 정보나 기능이 이용될 수 있기 때문이다.
데이터 레이어들을 층층히 쌓아 이 레이어들이 다른 방식으로 움직이게 함으로써, 디스플레이 상에는 보이지 않는 사용자의 현재 행위에 관련된 정보가 더 있다 하더라도, 그래픽 사용자 인터페이스는 사용자가 보고 있는 정보에 대한 컨텍스트를 제공할 수 있다. 예를 들어, 컨텐츠 레이어는 적어도 어느 정도는 독립적으로 움직일 수 있어, 사용자가 컨텐츠 레이어의 다른 부분들을 보이게 하거나 보이지 않게 이동시킬 수 있는 한편, 다른 레이어가 컨텐츠 레이어보다는 적게 움직이더라도, 컨텐츠 레이어에 연관된 그 다른 레이어의 일부분은 계속 보이게 된다.
기술된 기법 및 수단은 그래픽 사용자 인터페이스(GUI)와 같은 사용자 인터페이스(UI)에서 정보(예컨대, 시각 정보, 기능 정보 및 메타데이터)를 레이어들(예컨대, 평행 레이어들 또는 적어도 실질적으로 평행인 레이어들)로 구분하고, 이런 레이어들을 다른 방식(예컨대, 다른 속도)으로 움직이게 하는 것에 관한 것이다. 예를 들어, 기술된 실시예는 서로 다른 속도로 움직이는 UI 레이어들을 프리젠테이션하는 멀티-레이어 UI 시스템을 포함한다. 각각의 레이어의 이동 속도는 레이어에서 시각적으로 프리젠테이션될 데이터(예컨대, 문자 또는 그래픽)의 양이나 대응 락 포인트들 간의 상대 거리를 포함하는 몇 가지 요인에 달려 있으며, 이는 아래에서 보다 상세하게 설명된다. 레이어에서 시각적으로 프리젠테이션될 데이터 양은 예컨대, 디스플레이 상에 렌더링되거나 또는 디스플레이 상의 렌더링을 위해 레이아웃되는 데이터의 수평 방향으로 측정되는 길이를 결정함으로써 측정될 수 있다. 길이는 화소로 측정되거나 또는, 기타 적절한 단위(예컨대, 문자열의 글자 수)로 측정될 수 있다. 많은 양의 데이터가 있고 빠른 속도로 움직이는 레이어는 낮은 속도로 움직이며 적은 양의 데이터가 있는 레이어보다 더 많은 수의 화소만큼 전진할 수 있다. 레이어 이동 속도는 여러 다른 방식으로 결정될 수 있다. 예를 들어, 느린 레이어의 이동 속도가 빠른 레이어의 이동 속도로부터 얻어질 수 있고, 그 반대도 가능하다. 또는, 레이어 이동 속도는 따로따로 결정될 수도 있다.
통상적으로 UI의 여러 레이어들의 움직임은 어느 정도는 사용자 인터랙션에 달려 있다. 예를 들어, 레이어의 한 부분에서 다른 부분으로 탐색하기 원하는 사용자는 사용자 입력을 제공하여 원하는 움직임 방향을 표시한다. 사용자 입력은 디스플레이 상에서 하나 이상의 레이어에서의 움직임을 가능하게 할 수 있다. 몇몇 실시예에서, 사용자는 터치스크린과 인터랙션함으로써 장치의 디스플레이 영역에 레이어의 움직임을 보이게 한다. 인터랙션으로는 예를 들어, 손끝, 스타일러스(stylus) 또는 기타 사물로 터치스크린 접촉하기, 및 터치스크린의 표면에서 (예컨대, 플릭 또는 스윕 모션(flicking or sweeping motion)으로) 그것들을 움직여 레이어가 원하는 방향으로 움직이게 하는 것을 들 수 있다. 또는, 사용자는 키패드나 키보드의 버튼(예컨대, 방향 버튼) 누르기, 트랙볼 움직이기, 마우스로 포인팅 및 클릭하기, 음성 명령 하기 등과 같은 몇몇 다른 방식으로 레이어와 인터랙션할 수도 있다.
사용자 인터랙션으로 인해 레이어에서 움직임이 일어날 때, 레이어 움직임은 통상적으로 레이어의 길이 및 그 크기, 이동 속도 및 사용자에 의한 모션 방향의 함수이다. 예를 들어, 터치스크린에서 왼쪽으로 넘기는(flicking) 모션은 디스플레이 영역에 대한 레이어의 왼쪽 움직임을 일으킨다. 또한, 레이어들은 서로 관련되어 배치되어, 사용자에게 시각 컨텍스트(visual context)를 제공하면서도 그 레이어들은 다른 속도로 움직일 수 있다. 예를 들어, 섹션 헤더(예컨대, “History”과 같은 문자열)는 컨텐츠 레이어와는 다른 속도로 움직이지만 그 컨텐츠에 대한 컨텍스트를 제공하는, 컨텐츠 레이어의 눈에 보이는 컨텐츠와 오프-스크린 컨텐츠(예컨대, 현재-재생되는 미디어 파일 및 최근에-재생된 미디어 목록을 보여주는 이미지)에 걸쳐 있을 수 있다.
구현 및/또는 사용자 선호도에 따라, 사용자 입력은 레이어에서 다른 종류의 움직임을 일으키는 여러 다른 방식으로 해석될 수 있다. 예를 들어, 멀티-레이어 UI 시스템은 왼쪽 또는 오른쪽으로의 임의의 움직임, 또는 수평면 훨씬 위아래로 연장되는 대각선 움직임까지도 레이어의 유효한 왼쪽 또는 오른쪽 모션으로 해석할 수 있고, 시스템은 보다 정확한 움직임을 필요로 할 수 있다. 다른 예를 들면, 멀티-레이어 UI 시스템은 사용자가, 레이어를 움직이기 전에 그 레이어가 차지하고 있는 디스플레이 영역에 대응하는 터치스크린 부분과 인터랙션하는 것을 필요로 할 수 있고, 시스템은 터치스크린의 다른 부분과의 인터랙션으로 레이어의 움직임을 일으키게 할 수 있다. 다른 예를 들면, 사용자는 상하 모션을 통해 구성요소 목록과 같이 디스플레이 상에 한꺼번에 보이지 않는 컨텐츠 레이어의 일부에서 스크롤 업/다운할 수 있고, 이런 상/하 모션은 대각선 움직임 효과를 위한 좌/우 모션과 결합될 수도 있다.
레이어에서 특정 움직임을 만들어내기 위해 필요한 사용자 모션의 실제 양과 방향은 구현이나 사용자 선호도에 따라 달라질 수 있다. 예를 들어, 멀티-레이어 UI 시스템은 사용자 움직임의 크기나 이동 속도(또는 속도)의 함수로써 레이어에서의 모션 양을 (예컨대, 화소로) 계산하는 데 사용되는 기본 설정을 포함할 수 있다. 다른 예로, 사용자는 터치스크린 감도 제어기를 조정하여, 제어기의 설정에 따라, 터치스크린 상에 손끝이나 스타일러스의 동일한 모션으로 레이어의 크고 작은 움직임을 만들어 낼 수 있다.
몇몇 실시예에서, 레이어는 락 포인트를 포함한다. 레이어의 락 포인트는 장치의 디스플레이 영역과 정렬될 대응 위치를 나타낸다. 예를 들어, 사용자가 디스플레이 영역의 왼쪽 가장자리가 왼쪽-가장자리 락 포인트 “A”에 있도록 컨텐츠 레이어 상에서 위치를 탐색할 때, 디스플레이 영역의 왼쪽 가장자리는 각기 다른 레이어들의 대응 왼쪽-가장자리 락 포인트 “A”와도 정렬될 것이다. 락 포인트는 디스플레이 영역의 오른쪽 가장자리(오른쪽-가장자리 락 포인트)의 정렬이나, 또는 다른 유형의 정렬(예컨대, 중앙 락 포인트)을 나타낼 수도 있다. 통상적으로, 각 레이어의 대응 락 포인트는 레이어들이 다른 속도로 움직일 것이라는 사실을 고려하도록 위치한다. 예를 들어, 컨텐츠 레이어에서 제 1 락 포인트와 제 2 락 포인트 사이의 거리가 배경 레이어에서 대응 제 1 락 포인트와 제 2 락 포인트 사이의 거리의 두 배인 경우, 두 락 포인트들 사이에서 전환될 때, 배경 레이어는 컨텐츠 레이어의 절반의 속도로 움직인다.
도 1에 도시된 예시에서, 배경 레이어(110) 및 컨텐츠 레이어(112)는 대응 왼쪽-가장자리 락 포인트 “A”, “C”, “E, 및 “G”와 대응 오른쪽-가장자리 락 포인트 “B”, “D”, “F” 및 “H”를 가지고 있다. 왼쪽-가장자리 락 포인트들은 디스플레이 영역(도시되지 않음)의 왼쪽 가장자리와 정렬되고, 오른쪽-가장자리 락 포인트들은 디스플레이 영역의 오른쪽 가장자리와 정렬된다. 락 포인트들에 대응하는 왼쪽-가장자리 또는 오른쪽-가장자리 정렬은 락 포인트와 디스플레이 영역의 가장자리의 정확한 정렬을 포함하며, 또는 락 포인트와 디스플레이 영역의 가장자리 사이에 어느 정도의 패딩(padding)을 포함할 수 있다. 컨텐츠 레이어(112)에서, 왼쪽-가장자리 락 포인트는 컨텐츠 창(예컨대, 각각의 컨텐츠 창(120, 122, 124 및 126))의 왼쪽 가장자리와 정렬되며, 오른쪽-가장자리 락 포인트는 컨텐츠 창의 오른쪽 가장자리와 정렬된다. 두 레이어(110, 112)의 락 포인트들 간의 매핑은 두 레이어 사이의 화살표와 배경 창(102)의 점선으로 표시된다.
도 1에 도시된 락 포인트들이 일반적으로 완전한 락 포인트들의 집합을 대표하는 것은 아니다. 대안으로, 락 포인트들은 다른 종류의 정렬을 나타낼 수 있다. 예를 들어, 중앙 락 포인트는 디스플레이 영역의 중앙과의 정렬을 나타낼 수 있다. 다른 대안으로는, 더 적은 수의 락 포인트를 사용할 수 있거나, 또는 디스플레이 가능한 영역들 간의 오버랩을 제공하기 위해 더 많은 수의 락 포인트를 사용할 수도 있다. 예를 들어, 락포인트를 왼쪽-가장자리 또는 오른쪽-가장자리 락 포인트로 제한하거나, 또는 락 포인트를 특정 레이어의 일부에서 사용하지만 다른 부분에서는 사용하지 않을 수도 있다. 다른 대안으로, 락 포인트를 생략할 수도 있다.
레이어의 대응 위치를 표시하는 것뿐만 아니라, 락 포인트는 다른 동작을 나타낼 수 있다. 예를 들어, 락 포인트에 대응하는 레이어의 부분이 디스플레이에서 보이게 될 때, 락 포인트는 컨텐츠 레이어에서 레이어가 움직일 위치를 나타낼 수 있다. 이는, 예를 들어, 이미지, 목록 또는 기타 컨텐츠 구성요소가 디스플레이 영역의 왼쪽이나 오른쪽 가장자리 근처에서 부분적으로 보일 때 유용할 수 있고, 여기서 컨텐츠 레이어는 디스플레이 영역의 가장자리가 적절한 락 포인트와 정렬되도록 레이어를 움직임으로써 자동으로 컨텐츠 구성요소를 완전하게 보이게 할 수 있다. 플릭 또는 팬 제스처와 같은 탐색 이벤트가 끝날 무렵에 락 애니메이션이 실행되어 레이어들을 특정 락 포인트와 정렬시킬 수 있다. 탐색 이벤트가 락 포인트와 정확하게 정렬되지 않는 사용자-생성 움직임을 생성하는 경우에, 레이어들을 정렬하기 위해 락 애니메이션이 사용될 수 있다. 예를 들어, 두 개의 컨텐츠 창 사이의 위치(예컨대, 두 개의 컨텐츠 창의 일부가 디스플레이 영역에 보임)로 컨텐츠 레이어를 움직이게 하는 락 애니메이션이 탐색 이벤트가 끝날 무렵에 실행될 수 있다. 멀티-레이어 UI 시스템은 어느 컨텐츠 창이 디스플레이 영역에서 더 많은 공간을 차지하고 있는지를 확인하고, 락 애니메이션을 사용하여 그 창으로 전환할 수 있다. 이는 레이어의 전반적인 모습을 개선할 수 있고, 정보 또는 기능(예컨대, 기능 UI 구성요소)을 디스플레이 영역에 보이게 하는 데 효과적일 수 있다.
또한, 락 포인트는 탐색 중에 락 “노치(notch)” 또는 “범프(bump)” 효과를 제공하기에 유용하다. 예를 들어, 사용자가 컨텐츠 레이어의 길이를 따라 탐색할 때, 사용자에 의한 각각의 탐색 움직임(예컨대, 터치스크린에서 플릭 또는 팬 모션) 이후에 레이어는 (예컨대, 일정한 간격으로 있거나, 컨텐츠 구성요소들 사이에 있는 등의) 락 포인트에서 멈출 수 있다.
컨텍스트에 따라 각종 레이어의 움직임이 달라질 수 있다. 예를 들어, 사용자는 컨텐츠 레이어의 시작 부분의 왼쪽으로 탐색하여 컨텐츠 레이어의 끝부분에 도달할 수 있고, 컨텐츠 레이어의 끝부분의 오른쪽으로 탐색하여 컨텐츠 레이어의 시작 부분에 도달할 수 있다. 이렇게 래핑 특징(wrapping feature)은 컨텐츠 레이어를 탐색할 때 더 좋은 유연성을 제공하게 된다. 래핑은 멀티-레이어 UI 시스템에 의해 여러 다른 방식으로 처리될 수 있다. 예를 들어, 래핑은, 제목 레이어나 배경 레이어와 같은 레이어의 끝부분에서 다시 이런 레이어의 시작 부분으로의 재빠른 전환을 보여주는 애니메이션을 제작함으로써 처리될 수 있고, 그 반대도 가능하다. 이런 애니메이션은 컨텐츠 레이어의 통상의 팬 움직임과 결합되거나, 또는 락 애니메이션과 같은 컨텐츠 레이어의 다른 애니메이션과 결합될 수 있다. 그러나, 래핑 기능이 요구되는 것은 아니다.
예시 1 - 다수의 UI 레이어
도 2는 다른 속도로 움직이는 다수의 레이어들을 사용자 인터페이스에 제공하는 예시적인 기법(200)을 도시하는 순서도이다. 210에서, 멀티-레이어 UI 시스템은 (예컨대, 컴퓨팅 장치의 디스플레이 영역에) 동시에 디스플레이되는 평행 레이어들을 포함하는 사용자 인터페이스를 제공한다. 통상적으로, 적어도 하나의 레이어의 적어도 일부는 디스플레이 영역에서 보이지 않는다. 220에서, 시스템은 레이어에서 일어날 움직임을 나타내는 사용자 입력을 수신한다. 예를 들어, 컨텐츠 레이어가 디스플레이 영역의 오른쪽 가장자리 너머까지 확장된 경우, 사용자는 컨텐츠 레이어의 다른 부분을 보기 위해, 터치스크린과 인터랙션하여 컨텐츠 레이어의 팬 모션을 야기할 수 있다. 230에서, 시스템은 적어도 부분적으로는 사용자 입력에 따라, 다른 이동 속도로 평행 레이어들을 움직이게 한다. 예를 들어, 시스템은 터치스크린 상의 팬 제스처의 속도와 동일한 속도로 컨텐츠 레이어를 움직이게 하고, 제목 레이어와 배경 레이어는 더 느린 속도로 움직이게 할 수 있다.
도 3a-3c는 디스플레이 영역(300)이 있는 디스플레이를 갖고 있는 장치를 위해 멀티-레이어 UI 시스템에 의해 프리젠테이션되는 GUI에서 다수의 레이어들(310, 312, 314)을 도시하는 도면들이다. 디스플레이 영역(300)은 스마트폰이나 유사한 이동 컴퓨팅 장치에서의 디스플레이의 대표적인 크기를 갖는다. 도 3a-3c에 도시된 예시에 따르면, (손 아이콘으로 표현되는) 사용자(302)는 디스플레이 영역(300)을 갖고 있는 터치 스크린과 인터랙션함으로써 컨텐츠 레이어(314)와 인터랙션한다. 이런 인터랙션은 예를 들어, 손끝, 스타일러스 또는 기타 사물로 터치스크린과 접촉하여 터치스크린의 표면에서 (예컨대, 플릭 또는 스윕 모션으로) 그것들을 움직이는 것을 포함할 수 있다.
컨텐츠 레이어(314)는 컨텐츠 구성요소(예컨대, 컨텐츠 이미지(330A-H))를 포함한다. 레이어들(310, 312)은 문자 정보(각각, “Category” 및 “Selected Subcategory”)를 포함한다. 컨텐츠 레이어(314)의 길이는 레이어(312)의 길이의 대략 두 배로 표시되고, 다시 레이어(312)의 길이는 레이어(310)의 길이의 대략 두 배로 표시된다.
도 3a-3c에서, 사용자(302)에 의해 일어날 수 있는 레이어 모션의 방향은 왼쪽-포인팅 화살표 및 오른쪽-포인팅 화살표에 의해 표시된다. 이들 화살표는 사용자 입력에 대한 레이어들(310, 312, 314)의 가능한 움직임(예컨대, 왼쪽 또는 오른쪽 수평 움직임)을 나타낸다.
도 3a-3c에 도시된 예시에서, 시스템은 왼쪽 또는 오른쪽으로의 사용자 움직임을, 혹은 수평면 위아래로 연장되는 대각선 움직임까지도, 레이어의 유효한 왼쪽 또는 오른쪽으로의 모션을 나타내는 입력으로서 해석한다. 도 3a-3c에 도시된 예시에서는 사용자(302)가 컨텐츠 레이어(314)에 대응하는 디스플레이 영역(300)의 부분과 인터랙션하는 것을 도시하였지만, 시스템은 사용자가 컨텐츠 레이어(314)가 차지하는 디스플레이 영역에 대응하는 터치스크린의 부분과 인터랙션할 것을 요구하지는 않는다. 그 대신에, 시스템은 터치스크린의 다른 부분(예컨대, 다른 레이어가 차지하는 디스플레이 영역(300)의 일부에 대응하는 부분)과의 인터랙션을 통해 레이어(310, 312, 314)에서의 움직임을 일으키게 할 수도 있다.
사용자 입력이 오른쪽 또는 왼쪽으로의 모션을 나타낼 때, 시스템은 디스플레이 영역(300)에 대한 레이어들(310, 312, 314)의 오른쪽 또는 왼쪽으로의 움직임을 만든다. 레이어들(310, 312, 314)의 움직임 양은 레이어에서의 데이터 및 사용자에 의한 모션의 크기 또는 이동 속도(또는 속도)의 함수이다.
도 3a-3c에 도시된 예시에서, 레이어들(310, 312, 314)은 래핑 애니메이션 중인 경우를 제외하고, 다음의 규칙에 따라 움직인다.
1. 컨텐츠 레이어(314)는 레이어(314)의 대략 절반의 길이인 레이어(312)의 대략 두 배의 속도로 움직일 것이다.
2. 레이어(312)는 레이어(312)의 대략 절반의 길이인 레이어(310)의 대략 두 배의 속도로 움직일 것이다.
3. 컨텐츠 레이어(314)는 레이어(314)의 대략 1/4의 길이인 레이어(310)의 대략 네 배의 속도로 움직일 것이다.
경우에 따라서, 레이어들(310, 312, 314)의 움직임은 전술한 규칙과 다를 수 있다. 도 3a-3c에 도시된 예시에서는, 래핑이 허용된다. 화살표는, 사용자가 컨텐츠 레이어(314)의 시작 부분(도 3a에 도시된 위치)에서 왼쪽으로 탐색할 수 있고, 컨텐츠 레이어(314)의 끝부분(도 3c에 도시된 위치)에서 오른쪽으로 탐색할 수 있음을 나타낸다. 몇몇 레이어는 래핑 애니메이션 도중에, 다른 종류의 움직임 도중보다 더 빨리 또는 더 느리게 움직일 수 있다. 도 3a-3c에 도시된 예시에서, 레이어들(310 및 312)의 문자는 컨텐츠 레이어의 시작 부분으로 래핑될 때 더 빨리 움직인다. 도 3c에서, 디스플레이 영역(300)은 레이어(310 및 312)의 각각의 문자열의 끝부분에서 각각 한 글자 및 두 글자의 일부를 보여준다. 도 3a에 도시된 상태로 되돌아가기 위한 래핑 애니메이션은 레이어들(310, 312)의 문자를 오른쪽에서 보이게 하는 것을 포함할 수 있고, 이는 도 3a에 도시된 상태에서 도 3b에 도시된 상태로 전환되는 등의 다른 컨텍스트에서보다 더 빠른 움직임을 보인다.
도 3a-3c에서, 각각의 레이어에 대한 예시적인 왼쪽-가장자리 “락 포인트들” “A”, “B” 및 “C”가 표시된다. 왼쪽-가장자리 락 포인트는 각각의 레이어에서 디스플레이 영역(300)의 왼쪽 가장자리의 대응 위치를 나타낸다. 예를 들어, 사용자가 디스플레이 영역(300)의 왼쪽 가장자리가 락 포인트 “A”에 오도록 컨텐츠 레이어(314) 상의 위치를 탐색할 때, 도 3a에 도시된 바와 같이, 디스플레이 영역의 왼쪽 가장자리는 또한 다른 레이어들(310, 312)의 락 포인트 “A”에서 정렬될 것이다. 도 3b에서, 디스플레이 영역(300)의 왼쪽 가장자리는 각각의 레이어(310, 312, 314)의 락 포인트 “B”에 있다. 도 3c에서, 디스플레이 영역(300)의 왼쪽 가장자리는 각각의 레이어의 락 포인트 “C”에 있다.
도 3a-3c에 도시된 락 포인트들이 일반적으로 완전한 락 포인트들의 집합을 대표하는 것은 아니며, 단지 간결하게 하기 위해 락 포인트 “A”, “B” 및 “C”에 한정된다. 예를 들어, 각각의 컨텐츠 이미지(330A-330H)에 대해 왼쪽-가장자리 락 포인트가 설정될 수 있다. 또는, 더 적은 수의 락 포인트가 사용되거나 또는, 락 포인트가 생략될 수도 있다. 다른 대안으로, 락 포인트가 다른 종류의 정렬을 나타낼 수도 있다. 예를 들어, 오른쪽-가장자리 락 포인트가 디스플레이 영역(300)의 오른쪽 가장자리와의 정렬을 나타내거나, 또는 중앙 락 포인트가 디스플레이 영역(300)의 중앙과의 정렬을 나타낼 수 있다.
예시 2 - 디스플레이 오리엔테이션의 변화
기술된 기법 및 수단은 풍경 모드 오리엔테이션(landscape orientation)과 같이 여러 다른 오리엔테이션을 갖는 디스플레이 스크린에서 사용될 수 있다. 예를 들어, UI가 (예컨대, 사용자 선호도에 의해) 풍경 모드에 맞도록 구성된 경우나 또는 사용자가 장치를 물리적으로 회전시킨 경우에, 디스플레이 오리엔테이션에 변화가 생길 수 있다. 장치의 하나 이상의 센서(예컨대, 가속도계(accelerometer))를 사용하여 장치가 언제 회전되었는지를 탐지하고, 그에 따라 디스플레이 오리엔테이션을 조정할 수 있다. 도 3d에 도시된 예시에서, 디스플레이 영역은 풍경 모드에 맞춰져 있고, 레이어들(312 및 314)만이 보인다. 한편, 컨텐츠 레이어가 조금 더 많이 보이면, 사용자는 한 번에 컨텐츠 레이어에서 더 많은 컨텐츠(예컨대, 컨텐츠 이미지(330A-330D))를 볼 수 있게 된다. 또는, 적절하게 레이어의 높이를 낮추고 폰트와 이미지 크기를 줄임으로써, 모든 레이어가 보이게 조정할 수도 있다. 예를 들어, 문자의 폰트 크기의 축소에 맞춰 레이어들(310 및 312)의 높이를 낮춤으로써, 컨텐츠 레이어(314)를 탐색하기 편하도록 동일한 크기로 유지하면서도, 여전히 레이어들(310 및 312)을 볼 수 있게 된다.
도 3a-3c에서, 사용자(302)는 (풍경 모드에서) 왼쪽 또는 오른쪽 모션을 취함으로써 컨텐츠 레이어(314)를 따라 탐색할 수 있다. 각 레이어에서 락 포인트 “A”, “B” 및 “C”의 위치 및 레이어들의 상대 길이는 컨텐츠 레이어(314)가 그 위에 있는 레이어(312)의 대략 두 배의 속도로 이동할 것임을 보여준다. 또는, 락 포인트의 위치 및 락 포인트들 간의 거리는 오리엔테이션 전환(reorientation)(예컨대, 디스플레이 영역의 새로운 유효 폭)의 영향을 고려하여 동적으로 조정될 수도 있다. 그러나, 이런 조정이 요구되는 것은 아니다. 예를 들어, 디스플레이 영역의 높이와 폭이 동일하면, 디스플레이 영역의 풍경 모드로의 오리엔테이션 전환으로 디스플레이 영역의 유효 폭이 바뀌지 않을 것이다.
예시 3 - 다수의 UI 레이어에서의 움직임 계산
도 4는 UI 시스템이 멀티-레이어 GUI(예컨대, 도 3a-3c에 도시된 GUI)에서 제 1 방향의 움직임(예컨대, 수평 방향)을 계산하는 예시적인 기법(400)을 도시하는 순서도이다.
410에서, UI 시스템은 복수의 레이어를 포함하는 그래픽 사용자 인터페이스를 디스플레이한다. 제 1 레이어(예컨대, 컨텐츠 레이어(314))에서 시각 정보의 제 1 부분(예컨대, 도 3a에 도시된 컨텐츠 이미지(330))이 터치스크린의 디스플레이 영역(예컨대, 디스플레이 영역(300)) 안에 있다. 420에서, UI 시스템은 터치스크린 상의 제스처에 대응하는 사용자 입력을 수신한다. 430에서, UI 시스템은 적어도 부분적으로는 사용자 입력에 기반하여 제 1 움직임을 계산한다. 제 1 움직임은, 제 1 레이어에서 시각 정보의 제 2 부분(예컨대, 컨텐츠 이미지(330C))이 디스플레이 영역 밖에 있는 초기 제1 레이어 위치(예컨대, 도 3a에 도시된 위치)로부터 제 1 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 내에 있는 현재 제 1 레이어 위치(예컨대, 도 3b에 도시된 위치)로의 제 1 레이어의 움직임이다. 제 1 움직임은 제 1 이동 속도로 제 1 방향(예컨대, 오른쪽, 수평 방향)을 향한다. 제 1 이동 속도는 제스처의 이동 속도에 기반한다. 예를 들어, 터치스크린 상에서 직접적으로 컨텐츠를 조작하는 느낌을 사용자에게 주기 위해서, 제 1 이동 속도가 제스처 이동 속도(예컨대, 터치스크린 상의 사용자 손가락이나 다른 사물의 이동 속도)와 실질적으로 동일할 수 있다. 440에서, UI 시스템은 적어도 부분적으로는 사용자 입력에 기반하여 제 1 움직임과 실질적으로 평행한 제 2 움직임을 계산한다. 제 2 움직임은 제 2 레이어(예컨대, 레이어(312))에서 시각 정보의 초기 제 2 레이어 위치(예컨대, 도 3a에 도시된 위치)로부터 현재 제 2 레이어 위치(예컨대, 도3b에 도시된 위치)로의 움직임이다. 제 2 움직임은 제 1 이동 속도와는 다른 제 2 이동 속도로 제 1 방향(예컨대, 오른쪽, 수평 방향)을 향한다.
디스플레이(예컨대, 이동 전화 또는 기타 컴퓨팅 장치의 터치스크린 상의 디스플레이)를 위해 움직임이 애니메이션화되고 및/또는 렌더링될 수 있다.
예시 4 - 여러 속도로 움직이는 개별 레이어들
도 5a-5d는 세 개의 레이어(510, 512, 514)가 있는, 멀티-레이어 UI 시스템에 의해 프리젠테이션되는 GUI를 도시하는 도면들이며, 섹션 헤더 레이어(512)의 다른 부분들은 컨텐츠 레이어(514)의 다른 부분들과 연관된다. 도 5a-5d에 도시된 예시에 따르면, 사용자(도시되지 않음)는 컨텐츠 레이어(514)와 인터랙션한다. 예를 들어, 사용자는 탐색 버튼(도시되지 않음)을 눌러 컨텐츠 레이어의 다른 섹션들(예컨대, 섹션(1a, 1b, 1c, 1d, 2a, 2b, 2c 또는 2d)을 하이라이트함으로써 컨텐츠 레이어(514)를 탐색한다. 또는, 사용자는 디스플레이 영역(300)을 갖고 있는 터치스크린과 인터랙션함으로써 컨텐츠 레이어(514)와 인터랙션한다. 인터랙션은 예를 들어, 손끝, 스타일러스 또는 기타 사물로 터치스크린과 접촉하여 터치스크린의 표면에서 (예컨대, 플릭 또는 스윕 모션으로) 그것들을 움직이는 것을 포함할 수 있다.
컨텐츠 레이어(514)는 이미지, 아이콘, 문자열 또는 링크 목록, 또는 기타 컨텐츠일 수 있는 섹션(1a, 1b, 1c, 1d, 2a, 2b, 2c 및 2d)을 포함한다. 섹션 헤더 레이어(512)는 두 개의 문자열(“Feature 1” 및 “Feature 2”)을 포함한다. “Feature 1”은 섹션(1a, 1b, 1c 및 1d)과 관련된다. “Feature 2”는 섹션(2a, 2b, 2c 및 2d)과 관련된다. 레이어(510)는 하나의 문자열(“Application”)을 포함한다. 컨텐츠 레이어(514)의 길이는 섹션 헤더 레이어(512)의 전체 길이(예컨대, 두 개의 문자열의 결합 길이)보다 길고 또한, 레이어(510)의 길이보다도 긴 것으로 보인다.
도 5a-5d에서, 사용자가 표현할 수 있는 모션의 방향은 디스플레이 영역(300) 위의 왼쪽 및 오른쪽-포인팅 화살표로 표시된다. 이들 화살표는 사용자 입력에 대한 레이어들(510, 512, 514)의 가능한 움직임(왼쪽 또는 오른쪽 수평 움직임)을 나타낸다.
도 5a-5d에 도시된 예시에서, 사용자는 컨텐츠 레이어(514)에서 왼쪽이나 오른쪽으로 탐색할 때, 컨텐츠 레이어(514)의 다른 섹션들(예컨대, 도 5a에서 섹션(1a), 도 5b에서 섹션(1d), 도 5c에서 섹션(2a), 및 도 5d에서 섹션(2d))을 하이라이트한다. 사용자 입력이 오른쪽 또는 왼쪽으로의 모션을 나타낼 때, 시스템은 디스플레이 영역(300)에 대한 레이어들(510, 512, 514)의 오른쪽 또는 왼쪽 움직임을 생성한다. 레이어들(510, 512, 514)의 움직임 양은 레이어에서의 데이터 및 사용자에 의한 모션의 크기 또는 이동 속도(또는 속도)의 함수이다.
도 5a-5d에서, 각 레이어(510, 512, 514)에서 예시적인 오른쪽-가장자리 락 포인트 “A”, “B”, “C” 및 “D”가 표시되어 있다. 각 레이어에 대한 오른쪽-가장자리 락 포인트는 각 레이어 상에서 디스플레이 영역(300)의 오른쪽 가장자리의 대응 위치를 나타낸다. 예를 들어, 도 5a에 도시된 바와 같이, 사용자가 컨텐츠 레이어(514) 상의 섹션(1a)를 탐색할 때, 디스플레이 영역(300)의 오른쪽 가장자리는 락 포인트 “A”에 있고, 디스플레이 영역(300)의 오른쪽 가장자리는 또한 다른 레이어들(510, 512)의 락 포인트 “A”와 정렬될 것이다. 도 5b에서, 디스플레이 영역(300)의 오른쪽 가장자리는 각각의 레이어(510, 512, 514)의 락 포인트 “B”에 있다. 도 5c에서, 디스플레이 영역(300)의 오른쪽 가장자리는 각각의 레이어(510, 512, 514)의 락 포인트 “C”에 있다. 도 5d에서, 디스플레이 영역(300)의 오른쪽 가장자리는 각각의 레이어(510, 512, 514)의 락 포인트 “D”에 있다.
도 5a-5d에 도시된 락 포인트들은 일반적으로 완전한 락 포인트들의 집합을 대표하는 것은 아니며, 단지 간결하게 하기 위해 락 포인트 “A”, “B”, “C” 및 “D”에 한정된다. 예를 들어, 컨텐츠 레이어(514)의 하나 이상의 섹션에 대해 왼쪽-가장자리 락 포인트가 설정될 수 있다. 또는, 추가 오른쪽-가장자리 락 포인트가 사용될 수 있고, 더 적은 수의 락 포인트가 사용되거나, 또는 락 포인트가 생략될 수도 있다. 다른 대안으로, 락 포인트가 다른 종류의 정렬을 나타낼 수도 있다. 예를 들어, 중앙 락 포인트를 사용하여 디스플레이 영역(300)의 중앙과 정렬되게 할 수 있다
도 5a-5d에 도시된 예시에서, 레이어들(510, 512, 514)은 래핑 애니메이션 중인 경우를 제외하고, 다음의 규칙에 따라 이동한다.
1. 섹션 헤더 레이어(512)의 “Feature 1” 문자열에 관련된 컨텐츠 레이어(514)의 부분(섹션(1a, 1b, 1c 및 1d))은 대략 “Feature 1” 문자열의 대략 네 배의 속도로 움직일 것이다. “Feature 1” 문자열이 “Feature 1” 문자열에 관련된 컨텐츠 레이어(514)의 부분(섹션(1a, 1b, 1c 및 1d))의 길이의 대략 절반이지만, 컨텐츠 레이어(514)에서 오른쪽-가장자리 락 포인트 “A”에서 오른쪽-가장자리 락 포인트 “B”까지 움직이게 될 거리는 섹션 헤더 레이어(512)에서 대응 락 포인트들 간 거리의 대략 네 배이다. 마찬가지로, 섹션 헤더 레이어(512)의 “Feature 2” 문자열에 관련된 컨텐츠 레이어(514)의 부분(섹션(2a, 2b, 2c 및 2d))은 대략 “Feature 2” 문자열의 대략 네 배의 속도로 움직일 것이다.
2. 섹션 헤더 레이어(512)의 “Feature 1” 문자열에 관련된 컨텐츠 레이어(514)의 부분(섹션(1a, 1b, 1c 및 1d))을 탐색할 때, “Feature 1” 문자열은 레이어(510)의 대략 두 배의 속도로 움직일 것이다. “Feature 1” 문자열이 레이어(510)의 “Application” 문자열의 길이와 거의 같더라도, 레이어(510)에서 오른쪽-가장자리 락 포인트 “A”에서 오른쪽-가장자리 락 포인트 “B”까지 움직이게 될 거리는 섹션 헤더 레이어(512)에서 대응 락 포인트들 간 거리의 대략 절반이다. 마찬가지로, 섹션 헤더 레이어(512)의 “Feature 2” 문자열에 관련된 컨텐츠 레이어(514)의 부분(섹션(2a, 2b, 2c 및 2d))을 탐색할 때, “Feature 2” 문자열은 레이어(510)의 대략 두 배의 속도로 움직일 것이다.
3. 섹션 헤더 레이어(512)의 “Feature 1” 문자열에 관련된 컨텐츠 레이어(514)의 부분으로부터 섹션 헤더 레이어(512)의 “Feature 2” 문자열에 관련된 컨텐츠 레이어(514)의 부분으로(즉, 도 5b에 도시된 섹션(1d)로부터 도 5c에 도시된 섹션(2a)로) 탐색할 때, 도 5c의 오른쪽-가장자리 락 포인트 “B”와 오른쪽-가장자리 락 포인트 “C” 사이의 거리에 의해 나타나듯이, 섹션 헤더 레이어(512)가 더 빨리 이동한다.
4. 컨텐츠 레이어(514)는 레이어(510)의 대략 여덟 배의 속도로 움직일 것이다. 컨텐츠 레이어(514)에서 이웃하는 오른쪽-가장자리 락 포인트들 사이에서(예컨대, “A”에서 “B”로) 이동하게 될 거리는 레이어(510)에서 대응 오른쪽-가장자리 락 포인트들 간의 거리보다 대략 여덟 배가 길다.
경우에 따라서, 레이어들(510, 512, 514)의 움직임은 전술한 규칙과 다를 수 있다. 도 5a-5d에 도시된 예시에서는, 래핑이 허용된다. 디스플레이 영역(300) 위에 있는 화살표는, 사용자가 컨텐츠 레이어(514)의 시작 부분(도 5a에 도시된 위치)에서 왼쪽으로 탐색할 수 있고, 컨텐츠 레이어(514)의 끝부분(도 5d에 도시된 위치)에서 오른쪽으로 탐색할 수 있음을 나타낸다. 몇몇 레이어는 래핑 애니메이션 도중에, 다른 종류의 움직임 도중보다 더 빨리 또는 더 느리게 움직일 수 있다. 예를 들어, 도 5a에 도시된 상태로 되돌아가기 위한 래핑 애니메이션은 레이어들(510, 512)의 문자를 오른쪽에서 보이게 하는 것을 포함할 수 있고, 이는 도 5a에 도시된 상태에서 도 5b에 도시된 상태로 전환되는 등의 다른 컨텍스트에서보다 더 빠른 움직임을 보인다.
예시 5 - 나란히 움직이는 레이어들
도 6a-6d는 컨텐츠 레이어(614) 위에 있는 레이어(612)와 나란히(즉, 같은 방향 및 같은 속도로) 움직이는 컨텐츠 레이어(614)를 포함하는, 멀티-레이어 UI 시스템에 의해 프리젠테이션되는 GUI를 도시하는 도면이다. 본 예시에서, (손 아이콘으로 표현되는) 사용자(302)는 디스플레이 영역(300)을 갖고 있는 터치 스크린과 인터랙션함으로써 컨텐츠 레이어(614)와 인터랙션한다. 이런 인터랙션은 예를 들어, 손끝, 스타일러스 또는 기타 사물로 터치스크린과 접촉하여 터치스크린의 표면에서 (예컨대, 플릭 또는 스윕 모션으로) 그것들을 움직이는 것을 포함할 수 있다.
컨텐츠 레이어(614)는 게임 이미지(640, 642, 644), 목록(650, 652, 654) 및 아바타(630)를 포함한다(이는 아래에서 보다 상세하게 설명됨). 다른 레이어들(610, 612)는 문자 정보(레이어(610)의 “Games”, 레이어(612)의 “Spotlight”, “Xbox Live”, “Requests” 및 “Collection”)를 포함한다. 도 6a-6d에서, 레이어(610, 612)에 대해 예시적인 락 포인트 “A”, “B”, “C” 및 “D”가 표시된다. 수평 모션에 있어서, 컨텐츠 레이어(614)는 레이어(612)에 락되어 있고, 레이어(612)에 대한 락 포인트들이 레이어(614)에도 적용된다.
각 레이어에 대한 락 포인트는 각 레이어 상에서 디스플레이 영역(300)의 왼쪽 가장자리의 대응 위치를 나타낸다. 예를 들어, 사용자가 디스플레이 영역(300)의 왼쪽 가장자리가 락 포인트 “A”에 오도록 컨텐츠 레이어(614) 상의 위치를 탐색할 때, 도 6a에 도시된 바와 같이, 디스플레이 영역(300)의 왼쪽 가장자리는 또한 다른 레이어들(610, 612)의 락 포인트 “A”에서 정렬될 것이다. 도 6b에서, 디스플레이 영역(300)의 왼쪽 가장자리는 각각의 레이어(610, 612, 614)의 락 포인트 “B”에 있다. 도 6c에서, 디스플레이 영역(300)의 왼쪽 가장자리는 각각의 레이어(610, 612, 614)의 락 포인트 “C”에 있다. 도 6d에서, 디스플레이 영역(300)의 왼쪽 가장자리는 각각의 레이어(610, 612, 614)의 락 포인트 “D”에 있다.
도 6a-6d에 도시된 락 포인트들은 일반적으로 완전한 락 포인트들의 집합을 대표하는 것은 아니며, 단지 간결하게 하기 위해 락 포인트 “A”, “B”, “C” 및 “D”에 한정된다. 예를 들어, 디스플레이 영역(300)의 오른쪽 가장자리와 정렬되기 위해 오른쪽-가장자리 락 포인트가 추가되거나, 디스플레이 영역(300)의 중앙과 정렬되기 위해 중앙 락 포인트가 추가될 수 있다. 또는, 더 적은 수의 락 포인트가 사용되거나, 더 많은 수의 락 포인트가 사용되거나, 또는 락 포인트가 생략될 수도 있다.
도 6a-6d에서, 사용자에 의해 레이어(610, 612, 614)에 일어날 수 있는 모션의 방향은 왼쪽-포인팅 화살표 및 오른쪽-포인팅 화살표로 표시된다. 오른쪽-포인팅 화살표 및 왼쪽-포인팅 화살표는 사용자 입력에 대한 레이어들(610, 612, 614)의 가능한 움직임(왼쪽 또는 오른쪽 수평 움직임)을 나타낸다. 시스템은 왼쪽 또는 오른쪽으로의 사용자 움직임을, 혹은 수평면 위아래로 연장되는 대각선 움직임까지도, 레이어의 유효한 왼쪽 또는 오른쪽으로의 모션으로 해석한다. 도 6a-6e에 도시된 예시에서는 사용자(302)가 컨텐츠 레이어(614)에 해당하는 디스플레이 영역(300)의 부분과 인터랙션하는 것을 도시하였지만, 시스템은 사용자가 컨텐츠 레이어(614)가 차지하는 디스플레이 영역에 대응하는 터치스크린의 부분과 인터랙션할 것을 요구하지는 않는다. 그 대신에, 시스템은 터치스크린의 다른 부분(예컨대, 다른 레이어가 차지하는 디스플레이 영역 대응하는 부분)과의 인터랙션을 통해 레이어(610, 612, 614)에서의 움직임을 일으키게 할 수 있다.
사용자 입력이 오른쪽 또는 왼쪽으로의 모션을 나타낼 때, 시스템은 디스플레이 영역(300)에 대한 레이어들(610, 612, 614)의 오른쪽 또는 왼쪽으로의 움직임을 만든다. 본 예시에서, 레이어들(610, 612, 614)의 수평 움직임 양은 레이어에서의 데이터 및 사용자에 의한 모션의 크기 또는 속도의 함수이다. 레이어들(610, 612, 614)은 래핑 애니메이션 중인 경우를 제외하고, 다음의 규칙에 따라 수평으로 움직인다.
1. 컨텐츠 레이어(614)의 수평 움직임은 레이어(612)에 락되어 있다.
2. 레이어(612 및 614)는 각각 레이어(612 및 614)의 대략 1/3 길이인 레이어(610)의 대략 세 배의 속도로 수평으로 움직일 것이다.
경우에 따라서, 레이어들(610, 612, 614)의 움직임은 전술한 규칙과 다를 수 있다. 도 6a-6e에 도시된 예시에서는, 래핑이 허용된다. 화살표는, 사용자가 컨텐츠 레이어(614)의 시작 부분(도 6a 및 6e에 도시된 위치)에서 왼쪽으로 탐색할 수 있고, 컨텐츠 레이어(614)의 끝부분(도 6d에 도시된 위치)에서 오른쪽으로 탐색할 수 있음을 나타낸다. 몇몇 레이어는 래핑 애니메이션 도중에, 다른 종류의 움직임 도중보다 더 빨리 또는 더 느리게 움직일 수 있다. 도 6a 및 6d에 도시된 예시에서, 레이어(610)의 문자는 컨텐츠 레이어(614)의 시작 부분으로 다시 래핑할 때 더 빨리 움직인다. 도 6d에서, 디스플레이 영역(300)은 레이어(610)에서 “Games” 문자열의 끝부분의 두 글자의 일부를 보여준다. 도 6a에 도시된 상태로 되돌아가기 위한 래핑 애니메이션은 레이어(610)의 문자를 포함하는 레이어들(610, 612, 614)의 데이터를 오른쪽에서 보이게 하는 것을 포함할 수 있고, 이는 도 6a에 도시된 상태에서 도 6b에 도시된 상태로 전환되는 등의 다른 컨텍스트에서보다 더 빠른 움직임을 보인다.
예시 6 - 레이어 구성요소의 움직임
사용자는 전체 레이어들의 움직임뿐만 아니라, 레이어의 데이터 및 레이어가 배치된 방식에 따라 레이어들의 구성요소나 부분을 움직이게 할 수도 있다. 예를 들어, 사용자는 레이어의 전체로서 일어날 수 있는 움직임(예컨대, 수평 움직임)에 대해 직각이거나 실질적으로 직각인 레이어 구성요소(예컨대, 목록)의 움직임(예컨대, 수직 움직임)을 일으킬 수 있다. 수평으로 움직이는 레이어에서 레이어 구성요소들의 직각 움직임은, 예컨대, 목록이 디스플레이 영역에 디스플레이 가능한 것보다 더 많은 정보를 포함하고 있을 때, 컨텐츠 레이어에 내장된 목록을 수직으로 스크롤하는 것을 포함할 수 있다. 또는, 수직으로 움직이는 레이어를 프리젠테이션하는 시스템은 레이어 구성요소의 수평 움직임을 허용할 수 있다.
도 6a 및 6e에서, 컨텐츠 레이어(614)의 목록(650)은 디스플레이 영역(300)에 보일 수 있는 것보다 더 많은 정보를 포함하고 있다. 시스템은 수직면의 왼쪽 또는 오른쪽으로 연장하는 대각선 움직임을 포함하는 사용자(302)에 의한 상하 움직임을 목록(650)의 유효한 상하 모션으로 해석할 수 있다. 목록(650)의 움직임 양은 사용자(302)에 의한 모션의 크기나 속도 및 목록(650)의 데이터의 함수일 수 있다. 따라서, 목록(650)은 아이템 단위로, 아이템의 페이지 단위로, 또는 모션의 크기나 속도에 따라 그 중간의 단위로 스크롤될 수 있다. 본 예시에서, 목록(650)은 도 6a의 디스플레이 영역(300)에는 보이지 않는 하나의 목록 아이템만을 포함하여, 작거나 큰 범위의 아래쪽 움직임으로 충분히 목록(650)의 끝까지 스크롤할 수 있다. 도 6a 및 6e에 도시된 바와 같이, 레이어들의 다른 시각 정보(예컨대, 목록(650)의 밖에 있는 컨텐츠 레이어(614)의 시각 정보 또는 다른 레이어의 시각 정보)의 수직 위치는 상하 움직임에 의해 영향을 받지 않는다. 본 예시에서, (레이어들에 전체적으로 영향을 미치는 래핑 애니메이션 및 락 애니메이션을 포함하는) 전체로서의 레이어의 움직임은 수평 모션(모션의 주축(primary axis))에 제한된다. 목록(650)은 전체로서의 레이어의 모션에 직각인 2차 축(secondary axis)에 따른 모션(예컨대, 수직 모션)을 허용하는 레이어 안의 사용자 인터페이스 구성요소의 일례이다.
도 6a 및 6e는 사용자(302)가 컨텐츠 레이어(614)의 목록(650)에 대응하는 디스플레이 영역(300)의 부분과 인터랙션하는 것을 도시한다. 또는, 시스템은 터치스크린의 다른 부분(예컨대, 다른 레이어가 차지하는 디스플레이 영역(300)의 부분에 대응하는 부분)과의 인터랙션을 통해 목록(650)의 상하 움직임을 일으키게 할 수도 있다.
사용자에 의해 일어날 수 있는 모션의 방향은, 도 6a의 추가 아래쪽-포인팅 화살표와 도 6e의 추가 위쪽-포인팅 화살표와 함께 도 6a 및 6e의 왼쪽-포인팅 화살표 및 오른쪽-포인팅 화살표로 표시된다. 오른쪽-포인팅 화살표 및 왼쪽-포인팅 화살표는 사용자 움직임에 대한 레이어들(610, 612, 614)의 가능한 움직임(왼쪽 또는 오른쪽 수평 움직임)을 나타낸다. 아래쪽-포인팅 화살표 및 위쪽-포인팅 화살표는 사용자 움직임에 대한 목록(650)의 가능한 움직임(위아래 수직 움직임)을 나타낸다. 사용자(302)는 목록(650)에서 위아래 움직임을 만든 다음에 컨텐츠 레이어(614)에서 왼쪽이나 오른쪽으로 움직이게 할 수 있다. 목록(650)의 현재 위치(예컨대, 도 6e에 보이는 하부 목록 위치)가 저장될 수 있고, 또는 시스템은 컨텐츠 레이어(614)에서 목록(650)의 왼쪽 또는 오른쪽으로 탐색할 때, 기본 위치(예컨대, 도 6a에 표시된 상부 목록 위치)로 되돌아갈 수 있다. 가능한 움직임을 나타내는 도 6a-6e(및 다른 도면)의 화살표가 설명의 목적으로 도시되었지만, 디스플레이 영역(300) 자체가 레이어 및/또는 목록에 대해 가능한 움직임의 (화살표 또는 쉐브론 무늬(chevrons)와 같은) 그래픽 표식을 디스플레이할 수도 있다.
예시 7 - 직각 움직임이 가능한 구성요소가 있는 레이어의 움직임
도 7은 UI 시스템이 제 1 방향에 대해 직각인(또는 실질적으로 직각인) 제 2 방향으로 움직이도록 동작하는 UI 구성요소가 있는 적어도 하나의 레이어를 갖고 있는 멀티-레이어 GUI(예컨대, 도 6a-6e에 도시된 GUI)에서 제 1 방향(예컨대, 수평 방향)의 움직임을 계산하는 예시적인 기법(700)을 도시하는 순서도이다.
710에서, UI 시스템은 복수의 레이어를 포함하는 그래픽 사용자 인터페이스를 디스플레이한다. 제 1 레이어(예컨대, 컨텐츠 레이어(614))는 제 1 방향(예컨대, 수평 방향)에 대해 실질적으로 수직인 제 2 방향(예컨대, 수평 방향)으로 움직이도록 동작하는 사용자 인터페이스 구성요소(예컨대, 목록(650))를 포함한다. 제 1 레이어에서 시각 정보의 제 1 부분(예컨대, 도 6b에 도시된 바와 같은 목록(652))은 터치스크린의 디스플레이 영역(예컨대, 디스플레이 영역(300)) 안에 있다.
720에서, UI 시스템은 터치스크린 상의 제 1 제스처에 대응하는 제 1 사용자 입력을 수신한다. 730에서, UI 시스템은 적어도 부분적으로는 제 1 사용자 입력에 기반하여 제 1 움직임을 계산한다. 제 1 움직임은, 제 1 레이어에서 시각 정보의 제 2 부분(예컨대, 목록(650))이 디스플레이 영역 밖에 있는 초기 제1 레이어 위치(예컨대, 도 6b에 도시된 위치)로부터 제 1 레이어에서 시각 정보의 제 2 부분이 디스플레이 영역 내에 있는 현재 제 1 레이어 위치(예컨대, 도 6a에 도시된 위치)로의 제 1 레이어의 움직임이다. 제 1 움직임은 제 1 이동 속도로 제 1 방향(예컨대, 왼쪽, 수평 방향)을 향한다. 740에서, UI 시스템은 적어도 부분적으로는 제 1 사용자 입력에 기반하여 제 1 움직임과 실질적으로 평행한 제 2 움직임을 계산한다. 제 2 움직임은 제 2 레이어에서 시각 정보의 초기 제 2 레이어 위치(예컨대, 도 6b에 도시된 위치)로부터 현재 제 2 레이어 위치(예컨대, 도6a에 도시된 위치)로의 움직임이다. 제 2 움직임은 제 1 이동 속도와는 다른 제 2 이동 속도로 제 1 방향(예컨대, 왼쪽, 수평 방향)을 향한다.
750에서, UI 시스템은 터치스크린 상의 제 2 제스처에 대응하는 제 2 사용자 입력을 수신한다. 760에서, 적어도 부분적으로는 제 2 사용자 입력에 기반하여 실질적인 직각 움직임(예컨대, 수직 움직임)을 계산한다. 실질적인 직각 움직임은 제 1 레이어의 사용자 인터페이스 구성요소에서의 시각 정보의 초기 구성요소 위치로부터 현재 구성요소 위치로의 움직임이다.
실질적인 직각 움직임은 수직으로 스크롤가능한 구성요소(예컨대, 목록(650))의 시각 정보의 초기 수직 위치(예컨대, 도 6a에 도시된 목록(650)의 위치)로부터 현재 수직 위치(예컨대, 도 6e에 도시된 목록(650)의 위치)로의 움직임일 수 있다. 현재 수직 위치는 예컨대, 초기 수직 위치 및 제 2 제스처의 속도에 기반하여 계산될 수 있다. 수직으로 스크롤가능한 구성요소의 시각 정보 부분은, 수직으로 스크롤가능한 구성요소가 초기 수직 위치(예컨대, 도 6a에 도시된 목록(650)의 위치)에 있을 때, 디스플레이 영역 밖에 있고, 수직으로 스크롤가능한 구성요소가 현재 수직 위치(예컨대, 도 6e에 도시된 목록(650)의 위치)에 있을 때, 디스플레이 영역 안에 있을 수 있다.
디스플레이(예컨대, 이동 전화 또는 기타 컴퓨팅 장치의 터치스크린 상의 디스플레이)를 위해 움직임이 애니메이션화되고 및/또는 렌더링될 수 있다.
예시 8 - 아바타
레이어는 레이어의 다른 구성요소나 레이어의 섹션과 같은 다른 구성요소들 사이의 관계를 나타내는 구성요소를 포함한다. 다른 구성요소들 간의 관계를 나타내는 구성요소는 서로 다른 레이어에 포함되거나, 또는 각각의 다른 구성요소로서 동일한 레이어에 포함될 수 있다. 예를 들어, 아바타 레이어는 사용자와 관련된 다른 레이어의 두 개의 관련 섹션에 걸쳐 있은 모션의 범위를 갖는 시각 구성요소(아바타)를 포함할 수 있다. 구성요소들 간의 관계를 나타내기 위해 다른 구성요소들이 사용될 수도 있다. 예를 들어, 음악가의 앨범 목록과 음악가의 순회 연주 날짜 목록 사이의 관계를 나타내기 위해 음악가의 이미지가 사용될 수 있다.
도 6a-6e에서, 아바타(630)는 컨텐츠 레이어에서 목록(652, 654) 및 이들 목록(652, 654) 위에 있는 레이어(612)의 제목(각각, “Xbox Live” 및 “Requests”)과 연관된다. 아바타(630)는 시각 큐(visual cue)를 제공하여, 컨텐츠 레이어의 부분들(예컨대, 목록(652, 654))의 관계를 나타내거나 또는 그 부분들에 대한 관심을 끌게 할 수 있다. 도 6b에서, 아바타(630)는 목록(652)과 목록(654) 사이에 있다. 도 6c에서, 아바타(630)는 목록(654) 뒤에 떠 있지만, 완전히 디스플레이 영역(300) 안에 남아 있다. 도 6d에서, 아바타(630)는 디스플레이 영역(300) 안에 부분적으로만 있고, 디스플레이 영역(300) 안에 있는 부분은 게임 아이콘(640, 642, 644) 뒤에 떠 있다. 디스플레이 영역(300)의 왼쪽 가장자리에서의 아바타의 위치(630)는 사용자(302)가 아바타(630)의 방향으로 탐색하면, 아바타(630)에 관련된 정보(예컨대, 목록(652, 654))를 이용가능하다는 점을 사용자(302)에게 알려줄 수 있다. 아바타(630)는 다양한 속도로 움직일 수 있다. 예를 들어, 아바타(630)는 도 6c 및 도 6d 사이의 전환에서보다 도 6b 및 도 6c 사이의 전환에서 더 빨리 움직인다.
또는, 아바타(630)는 다른 방식으로 움직이거나, 또는 다른 기능을 보여줄 수 있다. 예를 들어, 아바타(630)는 컨텐츠 레이어(614)나 다른 레이어의 특정 위치(예컨대, 락 포인트)에 락될 수 있고, 따라서 아바타(630)는 자신이 락된 레이어와 동일한 수평 속도로 움직이게 된다. 다른 대안으로, 아바타(630)는 목록(650)과 같이 상하 스크롤이 가능한 목록과 연관될 수 있고, 연관된 목록이 상하로 스크롤될 때 위아래로 움직이게 할 수 있다.
예시 9 - 배경 레이어
도 8a-8c는 세 개의 레이어(310, 312, 314) 및 배경 레이어(850)가 있는, 멀티-레이어 UI 시스템에 의해 프리젠테이션되는 GUI를 도시하는 도면이다. 본 예시에서, (손 아이콘으로 표현되는) 사용자(302)는 디스플레이 영역(300)을 갖고 있는 터치 스크린과 인터랙션함으로써 컨텐츠 레이어(314)와 인터랙션한다.
배경 레이어(850)는 다른 레이어들 뒤에 떠 있다. 배경 레이어(805)에서 시각적으로 프리젠테이션될 데이터는 예컨대, 디스플레이 영역(300)의 경계 너머로 확장된 이미지를 포함할 수 있다. 컨텐츠 레이어(314)는 컨텐츠 구성요소(예컨대, 컨텐츠 이미지(330A-H))를 포함한다. 레이어들(310, 312)은 문자 정보(각각, “Category” 및 “Selected Subcategory”)를 포함한다. 컨텐츠 레이어(314)의 길이는 레이어(312)의 길이의 대략 두 배로 표시되고, 다시 레이어(312)의 길이는 레이어(310)의 길이의 대략 두 배로 표시된다. 배경 레이어(850)의 길이는 레이어(312)의 길이보다 조금 더 짧게 표시된다.
도 8a-8c에서, 사용자(302)에 의해 일어날 수 있는 레이어(310, 312, 314, 850)의 모션 방향은 왼쪽-포인팅 화살표 및 오른쪽-포인팅 화살표에 의해 표시된다. 이들 화살표는 사용자 움직임에 대한 레이어들(310, 312, 314, 850)의 가능한 움직임(왼쪽 또는 오른쪽 수평 움직임)을 나타낸다. 본 예시에서, 시스템은 왼쪽 또는 오른쪽으로의 사용자 움직임을, 혹은 수평면 위아래로 연장되는 대각선 움직임까지도, 레이어의 유효한 왼쪽 또는 오른쪽으로의 모션으로 해석한다. 도 8a-8c는 사용자(302)가 컨텐츠 레이어(314)에 대응하는 디스플레이 영역(300)의 부분과 인터랙션하는 것을 도시하였지만, 시스템은 터치스크린의 다른 부분(예컨대, 다른 레이어가 차지하는 디스플레이 영역(300)의 일부에 대응하는 부분)과의 인터랙션을 통해 레이어(310, 312, 314, 850)에서의 움직임을 일으키게 할 수도 있다.
사용자 입력이 오른쪽 또는 왼쪽으로의 모션을 나타낼 때, 시스템은 디스플레이 영역(300)에 대한 레이어들(310, 312, 314, 850)의 오른쪽 또는 왼쪽으로의 움직임을 만든다. 레이어들(310, 312, 314, 850)의 움직임 양은 레이어에서의 데이터 및 사용자에 의한 모션의 크기 또는 이동 속도(또는 속도)의 함수이다.
도 8a-8c에서, 레이어(310, 312, 314, 850)에 대한 예시적인 왼쪽-가장자리 락 포인트 “A”, “B” 및 “C”가 표시된다. 왼쪽-가장자리 락 포인트는 각각의 레이어에서 디스플레이 영역(300)의 왼쪽 가장자리의 대응 위치를 나타낸다. 예를 들어, 사용자가 디스플레이 영역(300)의 왼쪽 가장자리가 락 포인트 “A”에 오도록 컨텐츠 레이어(314) 상의 위치를 탐색할 때, 도 8a에 도시된 바와 같이, 디스플레이 영역의 왼쪽 가장자리는 또한 다른 레이어들(310, 312, 850)의 락 포인트 “A”에서 정렬될 것이다. 도 8b에서, 디스플레이 영역(300)의 왼쪽 가장자리는 각각의 레이어(310, 312, 314, 850)의 락 포인트 “B”에 있다. 도 8c에서, 디스플레이 영역(300)의 왼쪽 가장자리는 각각의 레이어(310, 312, 314, 850)의 락 포인트 “C”에 있다.
도 8a-8c에 도시된 락 포인트들이 일반적으로 완전한 락 포인트들의 집합을 대표하는 것은 아니며, 단지 간결하게 하기 위해 락 포인트 “A”, “B” 및 “C”에 한정된다. 예를 들어, 각각의 컨텐츠 이미지(330A-330H)에 대해 왼쪽-가장자리 락 포인트가 설정될 수 있다. 또는, 더 적은 수의 락 포인트가 사용되거나 또는, 락 포인트가 생략될 수 있다. 다른 대안으로, 락 포인트가 다른 종류의 정렬을 나타낼 수도 있다. 예를 들어, 오른쪽-가장자리 락 포인트가 디스플레이 영역(300)의 오른쪽 가장자리와의 정렬을 나타내거나, 또는 중앙 락 포인트가 디스플레이 영역(300)의 중앙과의 정렬을 나타낼 수 있다.
본 예시에서, 레이어들(310, 312, 314, 850)은 래핑 애니메이션 중인 경우를 제외하고, 다음의 규칙에 따라 움직인다.
1. 컨텐츠 레이어(314)는 레이어(314)의 대략 절반의 길이인 레이어(312)의 대략 두 배의 속도로 움직일 것이다.
2. 레이어(312)는 레이어(312)의 대략 절반의 길이인 레이어(310)의 대략 두 배의 속도로 움직일 것이다.
3. 컨텐츠 레이어(314)는 레이어(314)의 대략 1/4의 길이인 레이어(310)의 대략 네 배의 속도로 움직일 것이다.
4. 배경 레이어(850)는 레이어(310)보다 느리게 움직일 것이다. 배경 레이어(850)가 레이어(310)보다는 길지만, 레이어(310)의 이웃하는 락 포인트들(예컨대, 락 포인트 “A” 및 “B”) 사이에서 이동하게 될 거리는 배경 레이어(850)의 대응 락 포인트들 간의 거리보다 크다.
경우에 따라서, 레이어들(310, 312, 314, 850)의 움직임은 전술한 규칙과 다를 수 있다. 본 예시에서는, 래핑이 허용된다. 사용자(312)는 컨텐츠 레이어(314)의 시작 부분(도 8a에 도시된 위치)에서 왼쪽으로 탐색할 수 있고, 컨텐츠 레이어(314)의 끝부분(도 8c에 도시된 위치)에서 오른쪽으로 탐색할 수도 있다. 몇몇 레이어는 래핑 애니메이션 도중에, 다른 종류의 움직임 도중보다 더 빨리 또는 더 느리게 움직일 수 있다. 본 예시에서, 배경 레이어(850)의 이미지 및 레이어들(310 및 312)의 문자는 컨텐츠 레이어(314)의 시작 부분으로 래핑될 때 더 빨리 움직인다. 도 8c에서, 디스플레이 영역(300)은 레이어(310 및 312)의 각각의 문자열의 끝부분에서 각각 한 글자 및 두 글자의 일부를 보여준다. 디스플레이 영역(300)은 배경 레이어(850)의 이미지의 가장 오른쪽 부분도 보여준다. 도 8a에 도시된 상태로 되돌아가기 위한 래핑 애니메이션은 배경 레이어(850)의 이미지의 가장 왼쪽 부분과 레이어들(310, 312)의 문자의 시작 부분을 오른쪽에서 보이게 하는 것을 포함할 수 있다. 이는 도 8a에 도시된 상태에서 도 8b에 도시된 상태로 전환되는 등의 다른 컨텍스트에서보다 레이어들(310, 312, 314)에서 더 빠른 움직임을 보인다.
예시 10 - 멀티- 레이어 UI 시스템
도 9는 장치(예컨대, 스마트폰 또는 기타 이동 컴퓨팅 장치)에 다수의 UI 레이어를 프리젠테이션하는 예시적인 멀티-레이어 UI 시스템(900)을 도시하는 시스템도이다. 시스템(900)을 사용하여 다른 예시에 설명된 기술이나 또는, 기타 기능을 구현할 수 있다.
본 예시에서, 시스템(900)은 평행 UI 레이어들의 디스플레이를 제어하는 레이어 컨트롤(920)에 허브 페이지의 선언적 기술(declarative description)을 제공하는 허브 모듈(hub module)(910)을 포함한다. 레이어 컨트롤(920)은 “파노라마(panorama)” 또는 “파노(pano)” 컨트롤이라고 불릴 수도 있다. 이런 설명은 UI 레이어들이 파노라마식으로, 또는 수평 방식으로 움직일 때 사용될 수 있다. 또는, 레이어 컨트롤(920)은 수직으로 또는 다른 방식으로 움직이는 UI 레이어들을 제어한다. 레이어 컨트롤(920)은 마크업 생성기(930) 및 모션 모듈(940)을 포함한다.
본 예시에서, 레이어 컨트롤(920)은 UI 구성요소의 여러 레이어들, 예컨대, 배경 레이어, 제목 레이어, 섹션 헤더 레이어 및 컨텐츠 레이어를 제어한다. 컨텐츠 레이어는 컨텐츠 창 집합을 포함한다. 컨텐츠 창은 예컨대, 이미지, 그래픽 아이콘, 목록, 문자 또는 시각적으로 프리젠테이션될 기타 정보를 포함할 수 있다. 컨텐츠 레이어의 하나의 컨텐츠 창 집합은 컨텐츠 창의 한 “세대(generation)”라고도 할 수 있다. 또는, 레이어 컨트롤(920)은 세 개보다 많거나 적은 레이어를 제어하거나, 다른 종류의 레이어를 제어한다. 허브 페이지의 선언적 기술은 UI 구성요소를 정의하는 정보를 포함한다. 멀티-레이어 UI 시스템에서, UI 구성요소는 배경 레이어, 제목 레이어, 섹션 헤더 레이어 및 컨텐츠 레이어와 같은 다수의 레이어를 포함할 수 있다. 허브 페이지의 선언적 기술이 스타일 정보 및/또는 구성의 특징과 같은 기타 정보와 함께 마크업 생성기(930)에 제공된다. 마크업 생성기(930)는 UI 레이어를 렌더링하는 데 사용가능한 마크업을 생성한다. 모션 모듈(940)은 사용자 입력에 대한 응답으로 생성되는 이벤트(예컨대, 직접적인 UI 조작 이벤트)를 수락하고, 모션 명령어를 생성한다. 마크업과 함께 모션 명령어가 UI 프레임워크(950)으로 제공된다. UI 프레임워크(950)에서, 장치 운영 체제(OS)(960)로 전송될 UI 렌더링 요청을 생성하는 레이아웃 모듈(952)이 마크업 및 모션 명령어를 수신한다. 장치 OS(960)는 렌더링 요청을 수신하고, 렌더링된 UI를 장치의 디스플레이에 출력한다. 허브 모듈(910), 레이어 컨트롤(920) 및 UI 프레임워크(950)와 같은 시스템 컴포넌트들은 장치 OS(960)의 일부로서 구현될 수도 있다. 일 구현예에서, 장치 OS(960)는 이동 컴퓨팅 장치 OS이다.
사용자(도시되지 않음)는 UI가 프리젠테이션되는 방식에 영향을 주는 사용자 입력을 생성할 수 있다. 도 9에 도시된 예시에서, 레이어 컨트롤(940)은 UI 프레임워크(950)에 의해 생성되는 직접적인 UI 조작 이벤트를 수신한다. UI 프레임워크(950)에서, 장치 OS(960)로부터 제스처 메시지(예컨대, 장치의 터치스크린과 인터랙션하는 사용자에 의한 팬 또는 플릭 제스처에 대해 생성되는 메시지)를 수신하는 인터랙션 모듈(954)에 의해 직접적인 UI 조작 이벤트가 생성된다. 장치 OS(960)는 사용자 제스처를 인식하고 UI 프레임워크(950)에서 사용될 수 있는 메시지를 제작하는 기능을 포함한다. UI 프레임워크(950)는 제스처 메시지를 레이어 컨트롤(920)로 전송될 직접적인 UI 조작 이벤트로 변환한다. 인터랙션 모듈(954)은 음성 명령어, 키패드나 키보드 상의 방향 버튼, 트랙볼 모션 등과 같은 다른 종류의 사용자 입력에 대해 생성되는 탐색 메시지에 관한 직접적인 UI 조작 이벤트를 수락하고 생성할 수 있다.
예시 11 - 상세한 구현
본 예시는 다른 양태들과 함께, 전술한 예시들의 양태를 포함하는 상세한 구현에 대해 설명한다. 이런 상세한 구현은 전술한 시스템(900)과 같은 멀티-레이어 UI 시스템이나 또는 다른 시스템에 의해 구현될 수 있다.
본 예시에서, 시스템(900)은 수평으로 이동하는 다수의 평행 UI 레이어(예컨대, 배경 레이어, 제목 레이어, 섹션 헤더 레이어 및 컨텐츠 레이어)를 프리젠테이션한다. 컨텐츠 레이어는 여러 컨텐츠 창을 포함한다. 각 컨텐츠 창은 오른쪽 락 포인트 및 왼쪽 락 포인트를 포함한다.
A. 초기화
평행 UI 레이어들을 초기화하기 위해, 시스템(900)은 배경 레이어, 제목 레이어, 섹션 헤더 레이어 및 컨텐츠 레이어의 유효 길이에 관한 정보를 얻는다. (수평으로 움직이는 UI 레이어에서, 유효 길이는 UI 레이어의 유효 폭으로 간주될 수 있다.) 시스템(900)은, 디스플레이 영역에 접근할 때 컨텐츠 창들을 동적으로 생성함으로써 메모리 및 처리 요구 사항을 줄일 수 있지만, 이는 컨텐츠 레이어의 유효 폭을 판단하는 것을 더욱 어렵게 만든다. 본 예시에서, 초기화 시에 컨텐츠 레이어의 유효 폭을 결정하기 위해, 시스템(900)은 각각의 컨텐츠 창에 대한 최대 폭에 기반하여 최대 컨텐츠 레이어 폭을 결정하고, 오버랩되지 않은 모든 컨텐츠 창들의 최대 폭의 합계를 계산한다.
(컨텐츠 창들에 대한) 컨텐츠 레이어의 락 포인트들은 예컨대, 디스플레이 영역의 폭의 증분으로 컨텐츠 레이어를 나눔으로써 자동적으로 설정되어, 오버랩되지 않는 컨텐츠 창들을 생성한다. 또는, 컨텐츠 창에 얼마나 많은 전체 컨텐츠 이미지 n이 들어갈지를 결정하고, 각각의 컨텐츠 이미지가 적어도 하나의 컨텐츠 창에 있을 때까지 매 n 컨텐츠 이미지마다 새로운 컨텐츠 창을 시작함으로써, 컨텐츠 레이어에서 락 포인트들이 설정될 수 있으며, 이는 오버랩되는 컨텐츠 창을 생성을 가능하게 한다.
레이어에서의 모션은 모션 비율(motion ratio)에 기반하여 계산된다. 예를 들어, 시스템(900)은 배경 레이어의 폭과 제목 레이어의 폭을 각각 컨텐츠 레이어의 최대 폭으로 나누어, 배경 레이어와 제목 레이어에 대한 모션 비율을 계산한다. 배경 레이어와 제목 레이어의 폭을 고려하는 경우, 시스템(900)은 컨텐츠 레이어의 대응 락 포인트들의 위치에 기반하여, 배경 레이어와 제목 레이어의 락 포인트들의 위치를 각각 매핑시킨다. 배경 레이어의 이와 같은 위치 매핑의 일례가 도 1에 도시된다.
대응 레이어들을 이동시킬 때, 락 포인트가 사용된다. 예를 들어, 시스템(900)이 컨텐츠 레이어에서 창의 전환을 애니메이션화할 때, 시스템은 배경 레이어 및 제목 레이어에 대한 적절한 락 포인트 위치를 찾아보고, 레이어들을 그 위치로 스크롤하는 명령어를 수행시켜, 각각의 레이어의 락 포인트들 간의 거리에 따라 상대 모션 속도를 설정하게 된다.
실제 렌더링된 컨텐츠 레이어와 비교할 때, 컨텐츠 레이어의 최대 길이에 기반하는 모션 비율은 근사치일 뿐이다. 비율이 근사치이기 때문에(컨텐츠 창들의 최종 폭은 여전히 모름), 시스템(900)은 배경 레이어나 제목 레이어와 같은 레이어들을 조정하기 위해 락 애니메이션을 실행하여, 이들이 렌더링된 최종 컨텐츠 레이어의 대응 락 포인트들과 정렬되게 할 수 있다. 초기화가 종료되면, 시스템(900)은 UI 레이어를 렌더링하고 사용자 입력을 받아들이기 시작할 수 있다.
B. 사용자 입력
본 예시에서, 시스템(900)은 이동 컴퓨팅 장치의 터치스크린과 인터랙션하는 사용자로부터 사용자 입력을 받아들인다. 시스템(900)은 드래그 제스처, 팬 제스처 및 플릭 제스처 등, 터치스크린 상의 다른 제스처들을 구별할 수 있다. 시스템(900)은 사용자가 터치스크린의 특정 위치를 터치하지만, 터치스크린과의 접촉을 끊기 전까지 손가락, 스타일러스 등을 움직이지 않는 것과 같은 탭(tap) 제스처 역시도 탐지할 수 있다. 그 외에도, 탭 제스처에서 터치스크린과의 접촉을 끊기 전에, 작은 임계치 내에서 약간의 움직임이 허용되기도 한다. 시스템(900)은 핀치-및-스트레치(pinch-and-stretch) 제스처와 같은 멀티-터치 제스처도 탐지할 수 있다.
시스템(900)은 터치스크린과의 인터랙션의 특성에 따라 인터랙션을 특정 제스처로서 해석한다. 시스템(900)은 사용자의 인터랙션으로부터 하나 이상의 개별 입력을 얻는다. 일련의 입력으로부터 제스처가 결정될 수 있다. 예를 들어, 사용자가 터치스크린을 터치하고 터치스크린과의 접촉을 유지하면서 수평 방향으로 움직이기 시작할 때, 시스템(900)은 팬(pan) 입력을 개시하고(fire), 레이어에서의 수평 움직임을 시작한다. 사용자가 터치스크린과의 접촉을 유지하고 움직임을 계속하는 동안, 시스템(900)은 계속해서 팬 입력을 유지시킬 수 있다. 예를 들어, 사용자가 터치스크린과의 접촉을 유지하면서 N 개의 화소를 이동할 때마다, 시스템(900)은 새로운 팬 입력을 개시할 수 있다. 이런 방식으로, 터치스크린 상의 지속적인 물리적 제스처는 시스템(900)에 의해 일련의 팬 입력으로 해석될 수 있다. 시스템은 접촉 위치 및 이동 속도를 지속적으로 업데이트할 수 있다.
물리적 제스처가 끝날 때(예컨대, 사용자가 터치스크린과의 접촉을 끊을 때), 시스템(900)은 사용자의 손가락, 스타일러스 등이 터치스크린과 접촉이 끊겼을 때 얼마나 빨리 움직이고 있었는지를 판단함으로써 마지막의 모션을 플릭으로 해석할지 및, 이동 속도가 임계치를 넘었는지를 결정할 수 있다.
C. 사용자 제스처에 대한 응답
시스템(900)은 제스처 유형에 따라 디스플레이 상에 모션(예컨대, 레이어, 목록 또는 기타 UI 구성요소에서의 모션)을 다르게 렌더링할 수 있다. 예를 들어, (사용자가 현재 터치스크린과의 접촉을 유지하고 있는) 수평 드래그 제스처의 경우에, 시스템(900)은 드래그의 수평 거리와 동일한 거리만큼 컨텐츠 레이어를 수평 방향으로 이동시킨다. 제목 레이어 및 배경 레이어 또한 드래그에 따라 움직인다. 드래그의 수평 이동에 각각의 레이어에 대한 모션 비율을 곱함으로써 움직임 양이 결정된다. 예를 들어, 제목 레이어에 대한 모션 비율이 0.5로 결정되고, 드래그의 수평 거리가 100 화소인 경우, 제목 레이어의 움직임은 드래그 방향으로 50 화소가 된다.
팬 제스처(사용자가 터치스크린과의 접촉을 끊을 때, 사용자가 더 느리게 움직이고 있거나 또는 멈추는 등의 제스처)의 경우에, 시스템(900)은 팬의 크기만큼 컨텐츠 레이어를 이동시키고, 장치의 디스플레이 영역에 대한 컨텐츠 창의 현재 위치를 확인하여, 컨텐츠 레이어에서 추가 움직임을 실행할지 여부를 판단한다. 예를 들어, 시스템은 락 애니메이션(즉, 락 포인트에 잠그기(snap) 위한 컨텐츠 레이어에서의 움직임의 애니메이션)을 실행하고, 현재 컨텐츠 창에 관련된 왼쪽 또는 오른쪽 락 포인트로 컨텐츠 레이어를 이동시킬 수 있다. 시스템(900)은 현재 창과 관련된 락 포인트 중 어느 쪽이 더 가까운지를 결정하여, 더 가까운 락 포인트로 전환할 수 있다. 다른 예를 들면, 시스템(900)은 디스플레이 영역 상에 부분 뷰인 컨텐츠 창을 전체 뷰가 되게 하기 위해, 컨텐츠 레이어를 움직이게 할 수 있다. 다른 제스처들도 컨텐츠 창을 전체 뷰가 되게 할 수 있다. 예를 들어, 수직으로 스크롤가능한 목록의 왼쪽 또는 오른쪽이 디스플레이 영역 밖에 있다면, 그 목록에서의 제스처(예컨대, 수직 혹은 실질적으로 수직인 제스처)가 컨텐츠 레이어의 수평 움직임(및 적절한 경우, 다른 레이어에서의 수평 움직임)을 일으켜, 전체 목록을 보이게 할 수 있다. 수직 제스처에 의해 야기되는 목록에서의 임의의 수직 움직임에 레이어의 수평 움직임이 더해질 수 있지만, 컨텐츠 레이어 및 임의의 다른 레이어들의 수직 위치는 영향을 받지 않는다. 또는, 시스템(900)이 컨텐츠 레이어의 현재 위치를 유지할 수도 있다.
일 구현예로, 시스템(900)이 다음의 단계들을 실행한다.
1. 컨텐츠 레이어에서, 현재, 이전 및 다음 컨텐츠 창의 얼마나 많은 영역이 보이는지를 확인하고, 그 가장자리의 위치를 확인한다.
2. 이전 창의 오른쪽 가장자리가 임계 화소 개수보다 더 많이 (왼쪽 스크린 가장자리에 대해) 디스플레이 영역으로 이동한 경우, 이전 창으로 전환한다. 일 구현예에서, 임계치는 “범프 임계 변위(bump threshold displacement)”라고 한다.
3. 다음 창의 왼쪽 가장자리가 임계 화소 개수보다 더 많이 (오른쪽 스크린 가장자리에 대해) 디스플레이 영역으로 이동한 경우, 다음 창으로 전환한다.
4. 그 밖에는, 현재 창의 왼쪽 또는 오른쪽 가장자리가 락 포인트 또는 “범프”와 정렬되도록 컨텐츠 레이어가 이동할 수 있는지 여부를 결정한다. 현재 창의 왼쪽 가장자리가 왼쪽 락 위치에 충분히 가까운 경우, 현재 창을 그 왼쪽 가장자리에 락한다. 또는, 현재 창의 오른쪽 가장자리가 오른쪽 락 위치에 충분히 가깝게 있고, 현재 창이 스크린보다 넓은 경우, 현재 창을 오른쪽 가장자리에 락한다.
(사용자가 터치스크린과의 접촉을 끊을 때, 더 빨리 움직이고 있는) 플릭 제스처의 경우에, 시스템(900)은 플릭 제스처의 방향 및 속도에 따라, 컨텐츠 레이어를 다음 컨텐츠 창 또는 이전 컨텐츠 창으로 진행시킬 수 있는 전환 애니메이션을 시작한다. 플릭의 속도가 충분히 빠르면, 시스템(900)은 그 방향으로 다음 컨텐츠 창으로 전환할 수 있다. 속도가 충분히 빠르지 않거나, 현재 컨텐츠 창이 넓으면, 시스템(900)은 다음 컨텐츠 창으로 실제로 전환하지 않고도 플릭 방향으로 컨텐츠 레이어를 이동시킬 수 있다. 플릭이 탐지되는(즉, 플릭 제스처와 팬 제스처를 구별하기 위한) 임계 속도는 구현에 따라 달라질 수 있다. 플릭으로 인해 다른 컨텐츠 창으로의 전환이 야기되는 임계 속도 역시 구현에 따라 달라질 수 있다.
D. 비선형 모션
경우에 따라서 UI 레이어는 비선형 이동 속도를 보인다. 예를 들어, 전체의 레이어들이 컨텍스트에 따라서 다른 속도로 움직이거나, 레이어의 일부가 컨텍스트에 따라서 동일 레이어의 다른 부분들과 다른 속도로 움직일 수 있다. 비선형 이동 속도를 보일 수 있는 하나의 레이어로 섹션 헤더 레이어가 있다. 섹션 헤더 레이어는 여러 섹션 헤더로 나뉘어질 수 있고, 각각의 헤더가 컨텐츠 레이어의 하나 이상의 컨텐츠 창과 연관될 수 있다.
본 예시에서, 시스템(900)이 섹션 헤더 레이어를 제공하고, 각 섹션 헤더는 컨텐츠 창과 연관된다. 본 예시에서의 섹션 헤더 레이어는 다음의 규칙을 따라 움직인다.
1. 컨텐츠 창이 디스플레이 영역보다 넓지 않으면, 헤더는 컨텐츠 창에 락된 채로 유지된다. 그 외에, 컨텐츠 창이 디스플레이 영역보다 넓은 경우, 규칙들 2-4가 적용된다.
2. 레이어가 창의 왼쪽 락 포인트에 락될 때, 각 헤더의 왼쪽 가장자리는 컨텐츠 창의 왼쪽 가장자리에 정렬된다.
3. 사용자가 컨텐츠 창을 왼쪽으로 팬(pan)할 때, 헤더는 컨텐츠 창보다 느리게 움직인다. 이는 예컨대, 사용자가 팬할 때 헤더의 일부를 여전히 볼 수 있게 하는 데 유용하다.
4. 사용자가 오른쪽으로 팬할 때, 헤더는 컨텐츠 창보다 빠르게 움직인다. 이는 예컨대, 현재 창에서 이전 창으로 전환이 있을 때, 헤더가 컨텐츠 창보다는 조금 더 빠르게 이동하지만, 양쪽 모두 왼쪽 락 포인트에 정렬되는 전환 효과를 내는 데 유용하다.
이와 같은 규칙에 따라 움직임을 실행할 때, 시스템(900)은 변위 값을 계산한다. 먼저, 최대 변위는 컨텐츠 창 폭과 헤더 폭 사이의 차이 값을 취함으로써 계산된다. 최대 변위를 계산할 때, 시스템(900)은 단지 헤더의 문자 폭만이 아닌, 헤더의 버튼이나 기타 기능 아이템에 관한 추가 여백도 포함할 수 있다.
그 다음에, 시스템(900)은 왼쪽 락 포인트에 대한 현재 창의 왼쪽 가장자리의 위치를 판단함으로써 실제 변위를 계산한다. 창의 왼쪽 가장자리가 왼쪽 락 포인트의 오른쪽에 있다면, 시스템(900)은 창의 왼쪽 가장자리의 수평 위치(x 좌표)로부터 왼쪽 락 포인트의 수평 위치(x 좌표)를 빼게 되고, 이는 양의 값 a가 될 것이다. 창의 왼쪽 가장자리가 왼쪽 락 포인트의 왼쪽에 있다면, 시스템(900)은 왼쪽 락 포인트의 수평 위치(x 좌표)로부터 창의 왼쪽 가장자리의 수평 위치(x 좌표)를 빼게 되고, 이는 양의 값 b가 될 것이다. 이 값에 상수를 곱함으로써, 값(a 또는 b)을 조정할 수도 있다. 임의의 조정 후에, 그 값(a 또는 b)이 최대 변위보다 크다면, 그 값의 한도는 최대 변위가 된다.
팬 및 전환 애니메이션에 변위 계산을 사용할 수도 있다. 후자의 경우, 전환이 시작되기 전에, 창들의 최종 위치가 계산되고, 이에 기반하여, 전환 애니메이션에서 사용될 헤더의 최종 위치가 계산된다.
E. 가장자리 탭
시스템(900)은 가장자리 탭 기능을 구현할 수도 있다. 가장자리 탭에서, 사용자는 디스플레이 영역의 가장자리(예컨대, 왼쪽 또는 오른쪽 가장자리)의 특정 여백(예컨대, 40 개의 화소) 내에서 태핑을 하여, (예컨대, 다음 컨텐츠 창 또는 이전 컨텐츠 창으로) 전환되게 할 수 있다. 이는 예컨대, 다음 창 또는 이전 창이 디스플레이 영역에서 부분적으로 보일 때 유용하다. 사용자는 다음 또는 이전 창 주변을 태핑하여, 시스템이 그 창 전체를 디스플레이 영역에 가져오게 할 수 있다.
II . 확장 및 대안적인 구현
본원에서 설명된 실시예에 대한 다양한 확장 및 대안들도 가능하다.
설명된 예시에서, 컨텐츠 레이어는 통상적으로 배경 레이어와 같은 다른 레이어들보다는 긴 것으로 기술된다. 시스템(900)과 같은 멀티-레이어 UI 시스템은 제목 레이어 또는 배경 레이어 등의 레이어들이 컨텐츠 레이어보다 실제로 넓은 시나리오를 다룰 수 있다. 이런 시나리오에서, 레이어들에서의 모션 속도가 보상되도록 자동적으로 조정될 수 있다. 예를 들어, 컨텐츠 레이어가 제목 레이어보다 짧은 경우, 컨텐츠 레이어는 제목 레이어보다 더 느리게 움직일 수 있다.
설명된 예시에서, 일부 레이어들은 다른 레이어들에 락된 것으로 기술된다. 예를 들어, 도 6a-6e에서, 레이어(612)의 부분들이 컨텐츠 레이어(614)의 부분들에 락된 것으로 표시된다. 설명된 다른 예시에서, 일부 레이어들은 보다 유동적으로(flexibly) 움직이는 것으로 기술된다. 예를 들어, 도 5a-5d에서, 섹션 헤더 레이어(512)의 섹션들이 컨텐츠 레이어(514)의 특정 부분들과 관련된 것으로 표시되지만, 섹션들은 서로 독립적으로 움직이고, 컨텐츠 레이어(514)의 부분들 위에 떠 있을 수 있다. 멀티-레이어 UI 시스템은 이런 기능을 결합할 수 있다. 예를 들어, 멀티-레이어 UI 시스템은 레이어의 다른 부분들이 독립적으로 움직일 수 있게 하면서도, 레이어(예컨대, 섹션 헤더 레이어 또는 제목 레이어)의 일부를 컨텐츠 레이어의 컨텐츠에 락할 수 있다.
멀티 레이어 시스템은 레이어들을 함께 락하여 전환 또는 래핑 효과를 향상시킬 수도 있다. 예를 들어, 래핑되는 동안 배경 레이어와 제목 레이어가 동일한 속도로 움직이도록, 배경 레이어가 제목 레이어에 락될 수 있다. 레이어의 유효 길이가 다를 때조차 락될 수 있다.
설명된 예는 컨텐츠 레이어와 같이 사용자가 관심을 가질 수 있는 레이어들의 다른 위치들을 보여준다. 사용자는 레이어들의 시작 부분에서 멀티-레이어 UI 시스템의 탐색을 시작하거나, 또는 다른 진입 지점을 사용하여 UI 레이어 탐색을 시작할 수 있다. 예를 들어, 사용자는 컨텐츠 레이어의 중간에서, 컨텐츠 레이어의 끝부분에서 탐색을 시작할 수 있다. 이는 예컨대, 사용자가 이전에 레이어의 시작 부분이 아닌 위치(예컨대, 레이어의 끝부분)에서 나간 경우, (사용자가 컨텐츠 이미지를 작동시켜 실행되는 애플리케이션을 사용한 후에) 사용자가 이전 위치로 되돌아올 수 있어서 유용하다. 다른 예로, 기본 락 포인트가 UI 레이어들의 이전 상태에 기반할 수 있다. 예를 들어, 사용자는 이전에 보았던 레이어의 부분에 대응하는 락 포인트에서 레이어로 되돌아올 수 있다. 또 다른 예로, 멀티-레이어 UI 시스템은 하나 이상의 레이어에서 상태를 저장하거나 조정을 하여 다른 진입 지점을 허용할 수 있다. 예를 들어, 사용자가 도 5c에 도시된 바처럼 컨텐츠 레이어와 특징 레이어가 보이는 곳에서 진입을 하면, 멀티-레이어 UI 시스템은 레이어(510)의 “Application” 문자의 시작 부분과 레이어(512)의 “Feature 2” 문자의 시작 부분이 정렬되도록 레이어(510)를 조정할 수 있다.
III . 예시적인 컴퓨팅 환경
도 10은 설명된 몇몇의 실시예를 구현할 수 있는 적절한 컴퓨팅 환경(1000)의 일반적인 예시를 도시한다. 컴퓨팅 환경(1000)은 용도나 기능의 범위에 대한 임의의 제한을 제시하기 위한 것은 아니며, 본원에 기술된 기법 및 수단은 다양한 범용 또는 특수 목적 컴퓨팅 환경에서 구현될 수 있다.
도 10을 참조하면, 컴퓨팅 환경(1000)은 적어도 하나의 CPU(1010) 및 관련 메모리(1020)를 포함한다. 도 10에서, 이런 가장 기본적인 구성(1030)이 점선 안에 포함된다. 처리 장치(1010)는 컴퓨터-실행가능 명령어를 실행하며, 실제 혹은 가상 프로세서일 수 있다. 멀티-프로세싱 시스템에서는, 다수의 처리 장치가 컴퓨터-실행가능 명령어를 실행하여 처리 능력을 향상시킨다. 도 10은 제 2 처리 장치(1015)(예컨대, GPU 또는 기타 보조-처리 장치(co-processing unit)) 및 관련 메모리(1025)를 도시하며, 이는 비디오 가속 또는 기타 프로세싱에 사용될 수 있다. 메모리(1020, 1025)는 휘발성 메모리(예컨대, 레지스터, 캐시, RAM), 비휘발성 메모리(예컨대, ROM, EEPROM, 플래시 메모리 등), 또는 이 둘의 조합일 수 있다. 메모리(1020, 1025)는 설명된 하나 이상의 기법 및 수단으로 시스템을 구현하는 소프트웨어(1080)를 저장한다.
컴퓨팅 환경은 추가적인 특징을 가질 수 있다. 예를 들어, 컴퓨팅 환경(1000)은 저장 장치(1040), 하나 이상의 입력 장치(1050), 하나 이상의 출력 장치(1060) 및 하나 이상의 통신 접속부(1070)를 포함한다. 버스, 제어기, 또는 네트워크와 같은 상호 접속 메커니즘(도시되지 않음)은 컴퓨팅 환경(1000)의 컴포넌트들을 상호 접속한다. 통상적으로, 운영 체제 소프트웨어(도시되지 않음)는 컴퓨팅 환경(1000)에서 실행되는 다른 소프트웨어를 위한 운영 환경을 제공하고, 운영 환경(1000)의 컴포넌트들의 동작을 조정한다.
저장 장치(1040)는 이동식 또는 비이동식일 수 있으며, 정보를 저장하는 데 사용가능하고 컴퓨팅 환경(1000) 내에서 액세스가능한 자기 디스크, 자기 테이프 또는 카세트, CD-ROM, DVD, 메모리 카드, 또는 임의의 기타 매체를 포함한다. 저장 장치(1040)는 설명된 기법 및 수단을 구현하는 소프트웨어(1080)를 위한 명령어를 저장한다.
입력 장치(들)(1050)는 키보드, 마우스, 펜, 트랙볼 또는 터치스크린과 같은 터치 입력 장치, 마이크로폰과 같은 오디오 입력 장치, 스캔 장치, 디지털 카메라, 또는 컴퓨팅 환경(1000)에 입력을 제공하는 또 다른 장치일 수 있다. 비디오의 경우, 입력 장치(들)(1050)는 비디오 카드, TV 튜너 카드, 아날로그나 디지털 형태로 비디오 입력을 수신하는 유사 장치, 또는 비디오 샘플을 컴퓨팅 환경(1000)으로 읽어들이는 CD-ROM 또는 CD-RW일 수 있다. 출력 장치(들)(1060)는 디스플레이, 프린터, 스피커, CD-라이터, 또는 컴퓨팅 환경(1000)의 출력을 제공하는 다른 장치일 수 있다.
통신 접속부(들)(1070)는 통신 매체를 통해 다른 컴퓨팅 엔티티와의 통신을 가능하게 한다. 통신 매체는 컴퓨터-실행가능 명령어, 오디오 또는 비디오 입력 또는 출력, 또는 변조된 데이터 신호의 기타 데이터와 같은 정보를 전달한다. 변조된 데이터 신호는 신호의 정보를 인코딩하도록 설정되거나 변경된 하나 이상의 특성을 갖고 있는 신호이다. 예를 들어, 그러나 제한 없이, 통신 매체는 전자, 광, RF, 적외선, 음향 또는 그 밖의 반송파로 구현되는 유선 또는 무선 기법을 포함한다.
기법 및 수단들은 컴퓨터-판독가능 매체로 일반적으로 설명될 수 있다. 컴퓨터-판독가능 매체는 컴퓨팅 환경 내에서 액세스가능한 임의의 사용가능 매체이다. 예를 들어, 그러나 제한 없이, 컴퓨팅 환경(1000)에서, 컴퓨터-판독가능 매체는 메모리(1020, 1025), 저장 장치(1040), 및 이들의 조합을 포함한다.
기법 및 수단들은 타겟 실제 또는 가상 프로세서 상의 컴퓨팅 환경에서 실행되는, 프로그램 모듈에 포함된 것과 같은 컴퓨터-실행가능 명령어로 일반적으로 설명될 수 있다. 일반적으로, 프로그램 모듈은 특정 작업을 수행하거나 특정 추상 데이터 유형을 구현하는 루틴, 프로그램, 라이브러리, 객체, 클래스, 컴포넌트, 데이터 구조 등을 포함한다. 프로그램 모듈의 기능은 다양한 실시예에서 원하는 대로 프로그램 모듈들 사이에서 결합되거나 분리될 수 있다. 프로그램 모듈을 위한 컴퓨터-실행가능 명령어는 로컬 또는 분산 컴퓨팅 환경에서 실행될 수 있다. 본원에 기술된 임의의 방법이 하나 이상의 컴퓨터-판독가능 매체(예컨대, 컴퓨터-판독가능 저장 매체 또는 기타 유형(tangible) 매체) 상에서 인코딩된 컴퓨터-실행가능 명령어로 구현될 수 있다.
설명의 목적으로, 상세한 설명에서는 컴퓨팅 환경의 컴퓨터 동작을 설명하기 위해 “선택” 또는 “판단”과 같은 용어를 사용한다. 이들 용어는 컴퓨터에 의해 실행되는 동작을 위한 상위-레벨 추상화이며, 인간이 행하는 행위와 혼동해서는 안 된다. 이들 용어에 대응하는 실제 컴퓨터 동작은 구현에 따라 달라진다.
IV . 예시적인 구현 환경
도 11은 설명된 실시예, 기법 및 기술들을 구현할 수 있는 적절한 컴퓨팅 환경(1100)의 일반적인 예시를 도시한다.
예시적인 환경(1100)에서, 클라우드(1110)는 다양한 유형의 서비스(예컨대, 컴퓨팅 서비스(1112))를 제공한다. 예를 들어, 클라우드(1110)는 인터넷과 같은 네트워크를 통해 접속된 다양한 유형의 사용자 및 장치에 클라우드-기반 서비스를 제공하는, 중앙에 위치하거나 혹은 분산되어 있는 컴퓨팅 장치들의 컬렉션을 포함할 수 있다. 클라우드 컴퓨팅 환경(1100)은 컴퓨팅 작업을 완수하기 위해 다양한 방식으로 사용될 수 있다. 예를 들어, 설명된 기법 및 수단을 참조하면, 사용자 입력 처리 및 사용자 인터페이스 프리젠테이션과 같은 작업은 로컬 컴퓨팅 장치에서 실행될 수 있는 한편, 다음 처리에 사용될 데이터의 저장과 같은 다른 작업은 클라우드의 다른 곳에서 실행될 수 있다.
예시적인 환경(1100)에서, 클라우드(1110)는 다양한 스크린 성능이 있는 접속된 장치(1120A-N)에 대해 서비스를 제공한다. 접속된 장치(1120A)는 중간 크기의 스크린을 갖고 있는 장치를 나타낸다. 예를 들어, 접속된 장치(1120A)는 데스크탑 컴퓨터, 랩탑, 노트북, 넷북 등의 개인용 컴퓨터일 수 있다. 접속된 장치(1120B)는 작은 크기의 스크린을 갖고 있는 장치를 나타낸다. 예를 들어, 접속된 장치(1120B)는 이동 전화, 스마트폰, PDA(personal digital assistant), 태블릿 컴퓨터 등일 수 있다. 접속된 장치(1120N)는 큰 스크린을 갖고 있는 장치를 나타낸다. 예를 들어, 접속된 장치(1120N)는 TV(예컨대, 스마트 TV) 또는 TV나 프로젝터 스크린에 접속된 다른 장치(예컨대, 셋톱 박스 또는 게임 콘솔)일 수 있다.
하나 이상의 서비스 제공자(도시되지 않음)를 통해 클라우드(1110)에서 다양한 서비스가 제공될 수 있다. 예를 들어, 클라우드(1110)는 모바일 컴퓨팅에 관한 서비스를 접속된 하나 이상의 다양한 장치들(1120A-N)에 제공할 수 있다. 클라우드 서비스는 접속된 특정 장치(예컨대, 접속된 장치(1120A-N))의 스크린 크기, 디스플레이 성능, 또는 다른 기능에 맞게 커스터마이즈될 수 있다. 예를 들어, 클라우드 서비스는 스크린 사이즈, 입력 장치, 및 이동 장치에 통상적으로 관련된 통신 대역폭 제한을 고려하여 이동 장치에 맞게 커스터마이즈될 수 있다.
V. 예시적인 이동 장치
도 12는 1202에 일반적으로 도시된, 각종 선택적인 하드웨어 및 소프트웨어 컴포넌트를 포함하는 예시적인 이동 장치(1200)를 도시하는 시스템도이다. 도시의 편의를 위해, 모든 접속이 도시되지는 않았지만, 이동 장치의 임의의 컴포넌트는 다른 임의의 컴포넌트와 통신할 수 있다. 이동 장치는 다양한 임의의 컴퓨팅 장치(예컨대, 휴대폰, 스마트폰, 핸드헬드 컴퓨터, PDA(personal digital assistant) 등)일 수 있고, 이동 통신 네트워크나 위성 네트워크와 같은 하나 이상의 이동 통신 네트워크(1204)와 양방향 무선 통신을 허용할 수 있다.
도시된 이동 장치는 신호 코딩, 데이터 처리, 입/출력 처리, 전원 제어, 및/또는 기타 기능을 실행하는 제어기 또는 프로세서(1210)(예컨대, 신호 프로세서, 마이크로프로세서, ASIC, 또는 기타 제어 및 처리 논리 회로)를 포함할 수 있다. 운영 체제(1212)는 컴포넌트들(1202)의 배분 및 용도를 제어하고 하나 이상의 애플리케이션 프로그램(1214)을 지원할 수 있다. 애플리케이션 프로그램은 일반적인 이동 컴퓨팅 애플리케이션(예컨대, 이메일 애플리케이션, 달력, 연락처 관리자, 웹 브라우저, 메시지 애플리케이션을 포함함) 또는 기타 임의의 컴퓨팅 애플리케이션을 포함할 수 있다.
도시된 이동 장치는 메모리(1220)를 포함할 수 있다. 메모리(1220)는 비이동식 메모리(1222) 및/또는 이동식 메모리(1224)를 포함할 수 있다. 비이동식 메모리(1222)는 RAM, ROM, 플래시 메모리, 디스크 드라이브, 또는 기타 잘 알려진 메모리 저장 기술을 포함할 수 있다. 이동식 메모리(1224)는 GSM 통신 시스템에서 잘 알려진 플래시 메모리 또는 SIM(Subscriber Identity Module) 카드, 또는 스마트 카드와 같이 잘 알려진 다른 메모리 저장 기술을 포함할 수 있다. 메모리(1220)는 데이터 및/또는 운영 체제(1212) 및 애플리케이션(1214)를 실행하기 위한 코드를 저장하는 데 사용될 수 있다. 예시적인 데이터는 하나 이상의 유선 또는 무선 네트워크를 통해 하나 이상의 네트워크 서버 또는 기타 이동 장치로 전송되고 및/또는 그로부터 수신되는 웹 페이지, 문자, 이미지 음성 파일, 비디오 데이터 또는 기타 데이터 세트를 포함할 수 있다. 메모리(1220)는 IMSI(International Mobile Subscriber Identity)와 같은 가입자 식별자 및 IMEI(International Mobile Equipment Identifier)와 같은 기기 식별자를 저장하는 데 사용될 수 있다. 이런 식별자는 사용자와 기기를 식별하도록 네트워크 서버로 전송될 수 있다.
이동 장치는 터치스크린(1232), 마이크로폰(1234), 카메라(1236), 물리적 키보드(1238) 및/또는 트랙볼(1240)과 같은 하나 이상의 입력 장치(1230), 및 스피커(1252)와 디스플레이(1254)와 같은 하나 이상의 출력 장치(1250)를 지원할 수 있다. 다른 가능한 출력 장치(도시되지 않음)로 압전(piezoelectric) 또는 기타 촉각(haptic) 출력 장치를 들 수 있다. 몇몇 장치는 하나 이상의 입/출력 기능을 제공할 수 있다. 예를 들어, 터치스크린(1232) 및 디스플레이(1254)가 하나의 입/출력 장치로 결합될 수 있다.
터치스크린(1232)은 여러 다른 방식으로 입력을 받아들일 수 있다. 예를 들어, 정전식(capacitive) 터치스크린은 사물(예컨대, 손끝 또는 스타일러스)이 표면에 흐르는 전류를 왜곡하거나 방해할 때 터치 입력을 탐지한다. 다른 예를 들면, 터치스크린은 광학 센서를 사용하여, 광학 센서의 광선이 방해될 때 터치 입력을 탐지할 수 있다. 터치스크린이 입력을 탐지하기 위해 스크린의 표면과의 물리적인 접촉이 요구되는 것은 아니다.
관련 기술에서 잘 알려져 있는 바와 같이, 무선 모뎀(1260)이 안테나(도시되지 않음)에 연결될 수 있고, 프로세서(1210)과 외부 장치 간의 양방향 통신을 지원할 수 있다. 모뎀(1260)은 포괄적으로 도시되며, 이동 통신 네트워크(1204)와 통신하기 위한 이동 통신 모뎀 및/또는 기타 무선-기반 모뎀(예컨대, 블루투스 또는 와이파이)을 포함할 수 있다. 무선 모뎀(1260)은 통상적으로 단일 이동 통신 네트워크 내의 데이터 및 음성 통신을 위한 GSM 네트워크와 같은 하나 이상의 이동 통신 네트워크와의 통신, 이동 통신 네트워크들 간의 통신, 또는 이동 장치와 PSTN(public switched telephone network) 간의 통신을 위해 구성된다.
이동 장치는 적어도 하나의 입/출력 포트(1280), 전원(1282), GPS(global positioning system) 수신기와 같은 위성 네비게이션 시스템 수신기(1284), 가속계(1286), (아날로그 또는 디지털 신호의 무선 전송을 위한) 트랜시버(1288), 및/또는 USB 포트, IEEE 1394(파이어월) 포트, 및/또는 RS-232 포트일 수 있는 물리적 접속부(1290)를 더 포함할 수 있다. 컴포넌트가 삭제될 수 있고 다른 컴포넌트가 추가될 수 있으므로, 도시된 컴포넌트들(1202)이 요구되지 않기도 하고, 또는 모두 포함되기도 한다.
임의의 예시에서의 기술은 하나 이상의 임의의 다른 예시에 설명된 기술과 결합될 수 있다. 개시된 기술의 원리를 적용할 수 있는 많은 가능한 실시예를 고려하면, 예시된 실시예는 개시된 기술의 일례이며, 개시된 기술의 범위에 대한 제한으로 여겨져서는 안 된다는 점을 인식해야 한다. 그보다는, 개시된 기술의 범위는 다음의 특허청구범위에 의해 다뤄지는 범위를 포함한다. 따라서, 이와 같은 특허청구범위의 범위와 사상 안에 있는 모든 것을 본 발명이라고 청구한다.

Claims (15)

  1. 컴퓨터 시스템에서의 방법으로서,
    적어도 제 1 및 제 2 레이어를 포함하는 그래픽 사용자 인터페이스를 디스플레이 하는 단계 -상기 제 1 레이어에서 시각 정보의 제 1 부분이 터치스크린의 디스플레이 영역 안에 있고, 상기 레이어들은 서로 실질적으로 평행함 -,
    상기 터치스크린 상의 제스처에 대응하는 사용자 입력을 수신하는 단계 -상기 제스처는 제스처 이동 속도를 갖고 있음 -,
    상기 사용자 입력에 적어도 부분적으로 기반하여 제 1 움직임을 계산하는 단계 -상기 제 1 움직임은, 상기 제 1 레이어에서 시각 정보의 제 2 부분이 상기 디스플레이 영역 밖에 있는 초기 제 1 레이어 위치로부터 상기 제 1 레이어에서 시각 정보의 상기 제 2 부분이 상기 디스플레이 영역 안에 있는 현재 제 1 레이어 위치로의 상기 제 1 레이어의 움직임을 포함하고, 상기 제 1 움직임은 제 1 이동 속도로 제 1 방향을 향하고, 상기 제 1 이동 속도는 상기 제스처 이동 속도에 기반함 -, 및
    상기 사용자 입력에 적어도 부분적으로 기반하여 제 2 움직임을 계산하는 단계 -상기 제 2 움직임은 상기 제 2 레이어에서 초기 제 2 레이어 위치로부터 현재 제 2 레이어 위치로의 시각 정보의 움직임을 포함하며, 상기 제 2 움직임은 제 2 이동 속도로 상기 제 1 방향을 향함 -를 포함하고, 상기 제 2 이동 속도는 상기 제 1 이동 속도와는 다른 방법.
  2. 제 1 항에 있어서,
    상기 제 1 레이어는 복수의 제 1 레이어 락 포인트들을 포함하는 방법.
  3. 제 2 항에 있어서,
    상기 제 1 레이어는 컨텐츠 창 위치들에서 다수의 컨텐츠 창을 포함하고, 상기 제 1 레이어 락 포인트들은 컨텐츠 창의 개수와 상기 컨텐츠 창 위치들에 적어도 부분적으로 기반하여 자동적으로 결정되는 방법.
  4. 제 2 항에 있어서,
    상기 방법은
    상기 제 1 레이어 락 포인트 중 적어도 하나의 위치에 기반하여 락 애니메이션을 실행하는 단계를 더 포함하고, 상기 락 애니메이션을 실행하는 단계는
    상기 제 1 레이어에서 사용자 인터페이스 구성요소와 연관된 제 1 레이어 락 포인트를 선택하는 단계,
    상기 제 1 레이어에서 상기 현재 제 1 레이어 위치로부터, 상기 사용자 인터페이스 구성요소가 상기 디스플레이 영역에 보이도록 상기 선택된 제 1 레이어 락 포인트가 상기 디스플레이 영역의 일부와 정렬하는 제 1 레이어 차후-락-애니메이션 위치로의 전환을 애니메이션화하는 단계, 및
    상기 제 2 레이어에서 상기 현재 제 2 레이어 위치로부터 상기 제 1 레이어 차후-락-애니메이션 위치에 대응하는 제 2 레이어 차후-락-애니메이션 위치로의 전환을 애니메이션하는 단계 -상기 제 2 레이어 차후-락-애니메이션 위치는 제 2 레이어 락 포인트가 상기 선택된 제 1 레이어 락 포인트와 정렬되는 위치임 -를 포함하고,
    상기 제 1 레이어는 컨텐츠 레이어이고, 상기 사용자 인터페이스 구성요소는 컨텐츠 창이며, 상기 제스처는 플릭을 포함하고, 상기 선택하는 단계는 상기 플릭의 속도에 적어도 부분적으로 기반하는 방법.
  5. 제 1 항에 있어서,
    상기 제 1 레이어 및 제 2 레이어 각각은 시작 부분과 끝부분을 포함하고, 상기 제 1 레이어의 끝부분은 상기 현재 제 1 레이어 위치에서 디스플레이되며, 상기 제 2 레이어의 끝부분은 상기 현재 제 2 레이어 위치에서 디스플레이되고,
    상기 방법은
    래핑 애니메이션을 실행하는 단계를 더 포함하고,
    상기 래핑 애니메이션을 실행하는 단계는
    상기 제 1 레이어에서 상기 현재 제 1 레이어 위치로부터 상기 제 1 레이어의 상기 시작 부분이 디스플레이되는 차후-래핑-애니메이션 제 1 레이어 위치로의 전환을 애니메이션하는 단계, 및
    상기 제 2 레이어에서 상기 현재 제 2 레이어 위치로부터 상기 제 2 레이어의 상기 시작 부분이 디스플레이되는 차후-래핑-애니메이션 제 2 레이어 위치로의 전환을 애니메이션하는 단계를 포함하는 방법.
  6. 제 1 항에 있어서,
    상기 제 1 레이어에서의 상기 시각 정보는 아바타 구성요소를 포함하고, 상기 아바타 구성요소는 상기 제 1 레이어에서 둘 이상의 다른 구성요소들과의 관계를 나타내며,
    상기 방법은
    상기 제 1 이동 속도와는 다른 제 3 이동 속도의 상기 아바타 구성요소의 움직임을 포함하는 제 3 움직임을 계산하는 단계를 더 포함하는 방법.
  7. 제 1 항에 있어서,
    상기 제 1 이동 속도는 상기 제스처 이동 속도와 실질적으로 동일한 방법.
  8. 제 1 항에 있어서,
    상기 제 1 움직임을 계산하는 단계는 상기 초기 제 1 레이어 위치, 상기 제 1 방향 및 상기 제스처 이동 속도에 적어도 부분적으로 기반하여 상기 현재 제 1 레이어 위치를 계산하는 단계를 포함하고, 상기 제 2 움직임을 계산하는 단계는 상기 계산된 현재 제 1 레이어 위치에 적어도 부분적으로 기반하여 상기 현재 제 2 레이어 위치를 계산하는 단계를 포함하는 방법.
  9. 제 1 항에 있어서,
    상기 방법은
    상기 제 2 레이어에 대한 모션 비율에 적어도 부분적으로 기반하여 상기 제 2 이동 속도를 계산하는 단계를 더 포함하고,
    상기 모션 비율은 상기 제 1 레이어의 최대 폭으로 나눈 상기 제 2 레이어의 폭인 방법.
  10. 제 1 항에 있어서,
    상기 제 1 제스처가 가리키는 방향이 상기 제 1 방향과는 다르며, 상기 제 1 제스처가 가리키는 방향은 대각선 방향이고, 상기 제 1 방향은 수평 방향인 방법.
  11. 제 1 항에 있어서,
    상기 방법은
    상기 터치스크린을 포함하는 이동 전화 상에서의 디스플레이를 위해 상기 제 1 움직임 및 제 2 움직임을 렌더링하는 단계를 포함하는 방법.
  12. 하나 이상의 프로세서,
    디스플레이 영역이 있는 터치스크린, 및
    방법을 수행하기 위한 컴퓨터 실행가능 명령어를 저장하는 하나 이상의 컴퓨터 판독가능 저장 매체를 포함하는 컴퓨팅 장치에 있어서,
    상기 방법은
    상기 터치스크린 상에 그래픽 사용자 인터페이스를 디스플레이하는 단계 -상기 그래픽 사용자 인터페이스는 적어도 제 1 및 제 2 레이어를 포함하고, 상기 제 2 레이어는 제 1 부분 및 제 2 부분을 포함함 -,
    상기 제 1 레이어에서의 움직임을 나타내는 상기 터치스크린 상의 적어도 하나의 제스처에 대응하는 사용자 입력을 수신하는 단계, 상기 적어도 하나의 제스처는 제스처 이동 속도를 갖고 있음 -,
    상기 사용자 입력에 적어도 부분적으로 기반하여 제 1 움직임을 계산하는 단계 -상기 제 1 움직임은 상기 제 1 레이어의 움직임을 포함하고, 상기 제 1 움직임은 제 1 이동 속도를 갖고, 상기 제 1 이동 속도는 상기 제스처 이동 속도에 기반함 -,
    상기 제 1 움직임에 적어도 부분적으로 기반하여 제 2 움직임을 계산하는 단계 -상기 제 2 움직임은 상기 제 2 레이어의 제 1 부분의 움직임을 포함하고, 상기 제 2 움직임은 상기 제 1 움직임에 실질적으로 평행하며, 상기 제 2 움직임은 제 2 이동 속도를 갖고 있음 -,
    상기 사용자 입력에 적어도 부분적으로 기반하여 제 3 움직임을 계산하는 단계 -상기 제 3 움직임은 상기 제 1 레이어의 움직임을 포함하고, 상기 제 3 움직임은 제 3 이동 속도를 갖고 있음 -,
    상기 제 3 움직임에 적어도 부분적으로 기반하여 제 4 움직임을 계산하는 단계 -상기 제 4 움직임은 상기 제 2 레이어의 제 2 부분의 움직임을 포함하고, 상기 제 4 움직임은 상기 제 3 움직임에 실질적으로 평행하며, 상기 제 4 움직임은 제 4 이동 속도를 갖고 있음 - 포함하며,
    상기 제 2 이동 속도는 상기 제 4 이동 속도와는 다르며, 상기 제 2 이동 속도는 상기 제 1 이동 속도와는 다른 컴퓨팅 장치.
  13. 제 12 항에 있어서,
    상기 제 1 레이어는 컨텐츠 레이어이며, 상기 제 2 레이어는 상기 컨텐츠 레이어 위에 있는 섹션 헤더 레이어이고, 상기 제 2 레이어의 상기 제 1 부분은 제 1 섹션 헤더이며, 상기 제 2 레이어의 상기 제 2 부분은 제 2 섹션 헤더인 컴퓨팅 장치.
  14. 제 13 항에 있어서,
    상기 제 1 섹션 헤더는 상기 컨텐츠 레이어에서 하나 이상의 컨텐츠 창의 제 1 집합에 연관되어 있고, 상기 제 2 섹션 헤더는 상기 컨텐츠 레이어에서 하나 이상의 컨텐츠 창의 제 2 집합과 연관되어 있으며, 상기 제 2 이동 속도는 상기 제 1 섹션 헤더의 폭과 상기 컨텐츠 창의 제 1 집합의 폭 간의 차이 값에 기반하며, 제 4 이동 속도는 상기 제 2 섹션 헤더의 폭과 상기 컨텐츠 창의 제 2 집합의 폭 간의 차이 값에 기반하는 컴퓨팅 장치.
  15. 방법을 수행하기 위한 컴퓨터 실행가능 명령어를 저장하는 하나 이상의 컴퓨터 판독가능 저장 매체에 있어서,
    상기 방법은
    제스처를 통해 사용자 입력을 수신하도록 동작하는 터치스크린 상에 그래픽 사용자 인터페이스를 디스플레이하는 단계 -상기 그래픽 사용자 인터페이스는 컨텐츠 레이어, 섹션 헤더 레이어, 제목 레이어 및 배경 레이어를 포함하며, 각 레이어는 상기 각각의 레이어에 시각 정보의 적어도 제 1 및 제 2 부분을 포함하고, 상기 각각의 레이어에서 시각 정보의 상기 제 1 부분은 상기 터치스크린의 디스플레이 영역 안에 있고, 상기 각각의 레이어에서 시각 정보의 상기 제 2 부분은 상기 디스플레이 영역 밖에 있음 -,
    상기 터치스크린 상의 제스처에 대응하는 사용자 입력을 수신하는 단계,
    상기 사용자 입력에 적어도 부분적으로 기반하여 컨텐츠-레이어 움직임을 계산하는 단계 -상기 컨텐츠-레이어 움직임은 (a) 상기 컨텐츠 레이어에서 시각 정보의 상기 제 2 부분이 상기 디스플레이 영역 밖에 있는 초기 컨텐츠-레이어 위치로부터 (b) 상기 컨텐츠 레이어에서 시각 정보의 상기 제 2 부분이 상기 디스플레이 영역 안에 있는 현재 컨텐츠-레이어 위치로의 상기 컨텐츠 레이어의 움직임을 포함함 -,
    (a)로부터 (b)로의 상기 움직임을 애니메이션화하는 단계 -상기 컨텐츠-레이어 움직임은 컨텐츠-레이어 이동 속도로 제 1 방향을 향함 -,
    상기 사용자 입력에 적어도 부분적으로 기반하여 섹션-헤더-레이어 움직임을 계산하는 단계 -상기 섹션-헤더-레이어 움직임은 (c) 상기 섹션 헤더 레이어에서 시각 정보의 상기 제 2 부분이 상기 디스플레이 영역 밖에 있는 초기 섹션-헤더-레이어 위치로부터 (d) 상기 섹션 헤더 레이어에서 시각 정보의 상기 제 2 부분이 상기 디스플레이 영역 안에 있는 현재 섹션-헤더-레이어 위치로의 상기 섹션 헤더 레이어의 움직임을 포함함 -,
    (c)로부터 (d)로의 상기 움직임을 애니메이션화하는 단계 -상기 섹션-헤더-레이어 움직임은 섹션-헤더-레이어 이동 속도로 상기 제 1 방향을 향함 -,
    상기 사용자 입력에 적어도 부분적으로 기반하여 제목-레이어 움직임을 계산하는 단계 -상기 제목-레이어 움직임은 (e) 상기 제목 레이어에서 시각 정보의 상기 제 2 부분이 상기 디스플레이 영역 밖에 있는 초기 제목-레이어 위치로부터 (f) 상기 제목 레이어에서 시각 정보의 상기 제 2 부분이 상기 디스플레이 영역 안에 있는 현재 제목-레이어 위치로의 상기 제목 레이어의 움직임을 포함함 -,
    (e)로부터 (f)로의 상기 움직임을 애니메이션화하는 단계 -상기 제목-레이어 움직임은 제목-레이어 이동 속도로 상기 제 1 방향을 향함 -,
    상기 사용자 입력에 적어도 부분적으로 기반하여 배경-레이어 움직임을 계산하는 단계 -상기 배경-레이어 움직임은 (g) 상기 배경 레이어에서 시각 정보의 상기 제 2 부분이 상기 디스플레이 영역 밖에 있는 초기 배경-레이어 위치로부터 (h) 상기 배경 레이어에서 시각 정보의 상기 제 2 부분이 상기 디스플레이 영역 안에 있는 현재 배경-레이어 위치로의 상기 배경 레이어의 움직임을 포함함 -, 및
    (g)로부터 (h)로의 상기 움직임을 애니메이션화하는 단계 - 상기 배경-레이어 움직임은 배경-레이어 이동 속도로 상기 제 1 방향을 향함 - 포함하며,
    상기 컨텐츠-레이어 이동 속도는 상기 섹션-헤더-레이어 이동 속도와 동일하고, 상기 제목-레이어 이동 속도는 상기 컨텐츠-레이어 이동 속도 및 상기 섹션-헤더-레이어 이동 속도와는 다르며, 상기 컨텐츠 레이어, 상기 섹션 헤더 레이어 및 상기 제목 레이어는 서로 실질적으로 평행하며 서로 오버랩되지 않고, 상기 컨텐츠 레이어, 상기 섹션 헤더 레이어 및 상기 제목 레이어 각각은 상기 배경 레이어와 오버랩되는 컴퓨터 판독가능 저장 매체.
KR1020127021119A 2010-02-12 2011-02-11 유연한 평행 움직임을 가진 멀티-레이어 사용자 인터페이스 KR20120135232A (ko)

Applications Claiming Priority (5)

Application Number Priority Date Filing Date Title
US30400410P 2010-02-12 2010-02-12
US61/304,004 2010-02-12
US12/824,060 2010-06-25
US12/824,060 US20110199318A1 (en) 2010-02-12 2010-06-25 Multi-layer user interface with flexible parallel movement
PCT/US2011/024610 WO2011100599A2 (en) 2010-02-12 2011-02-11 Multi-layer user interface with flexible parallel movement

Publications (1)

Publication Number Publication Date
KR20120135232A true KR20120135232A (ko) 2012-12-12

Family

ID=44368473

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020127021119A KR20120135232A (ko) 2010-02-12 2011-02-11 유연한 평행 움직임을 가진 멀티-레이어 사용자 인터페이스

Country Status (10)

Country Link
US (1) US20110199318A1 (ko)
EP (1) EP2534566A4 (ko)
JP (1) JP5726908B2 (ko)
KR (1) KR20120135232A (ko)
CN (1) CN102782632A (ko)
AU (1) AU2011215630A1 (ko)
BR (1) BR112012020293A2 (ko)
CA (1) CA2787112A1 (ko)
IL (1) IL220962A0 (ko)
WO (1) WO2011100599A2 (ko)

Families Citing this family (29)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8473860B2 (en) * 2010-02-12 2013-06-25 Microsoft Corporation Multi-layer user interface with flexible parallel and orthogonal movement
US9417787B2 (en) * 2010-02-12 2016-08-16 Microsoft Technology Licensing, Llc Distortion effects to indicate location in a movable data collection
JP2012033059A (ja) * 2010-07-30 2012-02-16 Sony Corp 情報処理装置、情報処理方法及び情報処理プログラム
US8866822B2 (en) * 2010-09-07 2014-10-21 Microsoft Corporation Alternate source for controlling an animation
US8863039B2 (en) 2011-04-18 2014-10-14 Microsoft Corporation Multi-dimensional boundary effects
US9196075B2 (en) * 2011-11-14 2015-11-24 Microsoft Technology Licensing, Llc Animation of computer-generated display components of user interfaces and content items
US10872454B2 (en) 2012-01-06 2020-12-22 Microsoft Technology Licensing, Llc Panning animations
US20140089850A1 (en) * 2012-09-22 2014-03-27 Tourwrist, Inc. Systems and Methods of Using Motion Control to Navigate Panoramas and Virtual Tours
CN102819400A (zh) * 2012-08-14 2012-12-12 北京小米科技有限责任公司 一种移动终端的桌面系统及界面交互方法、装置
JP5995637B2 (ja) * 2012-10-04 2016-09-21 キヤノン株式会社 撮像装置、撮像装置の制御方法、プログラム、記憶媒体
US20140215383A1 (en) * 2013-01-31 2014-07-31 Disney Enterprises, Inc. Parallax scrolling user interface
US10120540B2 (en) * 2013-03-14 2018-11-06 Samsung Electronics Co., Ltd. Visual feedback for user interface navigation on television system
US9207849B2 (en) * 2013-03-29 2015-12-08 Microsoft Technology Licensing, Llc Start and application navigation
US10757241B2 (en) 2013-07-29 2020-08-25 Oath Inc. Method and system for dynamically changing a header space in a graphical user interface
CN104346054A (zh) * 2013-07-30 2015-02-11 维沃移动通信有限公司 一种实现仿3d场景桌面的方法及系统
KR102134404B1 (ko) * 2013-08-27 2020-07-16 삼성전자주식회사 데이터 표시 방법 및 그 전자 장치
CN103530052B (zh) 2013-09-27 2017-09-29 华为技术有限公司 一种界面内容的显示方法和用户设备
US10157593B2 (en) 2014-02-24 2018-12-18 Microsoft Technology Licensing, Llc Cross-platform rendering engine
US9529510B2 (en) * 2014-03-07 2016-12-27 Here Global B.V. Determination of share video information
US10055009B2 (en) 2014-05-30 2018-08-21 Apple Inc. Dynamic display refresh rate based on device motion
JP6390213B2 (ja) * 2014-06-30 2018-09-19 ブラザー工業株式会社 表示制御装置、表示制御方法及び表示制御プログラム
US10642365B2 (en) * 2014-09-09 2020-05-05 Microsoft Technology Licensing, Llc Parametric inertia and APIs
CN104484095B (zh) * 2014-12-22 2019-07-26 联想(北京)有限公司 一种信息处理方法及电子设备
CN105381611A (zh) * 2015-11-19 2016-03-09 网易（杭州）网络有限公司 一种2d游戏场景分层实现立体表现的方法及装置
KR102412283B1 (ko) * 2016-02-17 2022-06-23 삼성전자 주식회사 전자 장치 및 전자 장치의 영상 공유 제어 방법
US10528244B2 (en) * 2016-04-29 2020-01-07 Microsoft Technology Licensing, Llc Details pane of a user interface
CN106201256B (zh) * 2016-06-30 2020-06-09 北京金山安全软件有限公司 一种图片定位的方法、装置及电子设备
CN109257644A (zh) * 2018-11-16 2019-01-22 上海二三四五网络科技有限公司 一种画面调整防卡顿的控制方法及控制装置
CN109542573B (zh) * 2018-11-28 2021-12-07 北京龙创悦动网络科技有限公司 一种场景显示方法和装置

Family Cites Families (48)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5860073A (en) * 1995-07-17 1999-01-12 Microsoft Corporation Style sheets for publishing system
US7082398B1 (en) * 1996-01-16 2006-07-25 The Nasdaq Stock Market, Inc. Media wall for displaying financial information
KR100400208B1 (ko) * 1996-10-31 2003-12-31 삼성전자주식회사 실영상을배경으로하는비디오게임에서다단계배경화면생성장치
US5874961A (en) * 1997-03-19 1999-02-23 International Business Machines Corporation Scroll bar amplification apparatus and method
JP4416846B2 (ja) * 1997-08-22 2010-02-17 ソニー株式会社 メニュー制御用データを記録したコンピュータ読み取り可能な記録媒体ならびにメニュー制御方法および装置
US6157381A (en) * 1997-11-18 2000-12-05 International Business Machines Corporation Computer system, user interface component and method utilizing non-linear scroll bar
JP2001351125A (ja) * 2000-03-30 2001-12-21 Sega Corp 画像表示方法
WO2002015571A1 (en) * 2000-08-14 2002-02-21 Corporate Media Partners D/B/A Americast System and method for displaying advertising in an interactive program guide
JP2002099484A (ja) * 2000-09-25 2002-04-05 Sanyo Electric Co Ltd メッセージ表示装置、メッセージ表示方法、及び記録媒体
JP2002244641A (ja) * 2001-02-20 2002-08-30 Canon Inc 情報処理装置、スクロール制御方法、及び記憶媒体
US6972776B2 (en) * 2001-03-20 2005-12-06 Agilent Technologies, Inc. Scrolling method using screen pointing device
US6957389B2 (en) * 2001-04-09 2005-10-18 Microsoft Corp. Animation on-object user interface
US7032181B1 (en) * 2002-06-18 2006-04-18 Good Technology, Inc. Optimized user interface for small screen devices
US7636755B2 (en) * 2002-11-21 2009-12-22 Aol Llc Multiple avatar personalities
US20060174214A1 (en) * 2003-08-13 2006-08-03 Mckee Timothy P System and method for navigation of content in multiple display regions
US7698654B2 (en) * 2004-01-05 2010-04-13 Microsoft Corporation Systems and methods for co-axial navigation of a user interface
US7724242B2 (en) * 2004-08-06 2010-05-25 Touchtable, Inc. Touch driven method and apparatus to integrate and display multiple image layers forming alternate depictions of same subject matter
US20060053048A1 (en) * 2004-09-03 2006-03-09 Whenu.Com Techniques for remotely delivering shaped display presentations such as advertisements to computing platforms over information communications networks
US8001476B2 (en) * 2004-11-16 2011-08-16 Open Text Inc. Cellular user interface
US7428709B2 (en) * 2005-04-13 2008-09-23 Apple Inc. Multiple-panel scrolling
WO2007017784A2 (en) * 2005-08-09 2007-02-15 Koninklijke Philips Electronics N.V. Scroll method with contextual scroll rate and feedback
FR2890516A1 (fr) * 2005-09-08 2007-03-09 Thomson Licensing Sas Procede de selection d'un bouton dans une barre graphique, et recepteur mettant en oeuvre le procede
US7690997B2 (en) * 2005-10-14 2010-04-06 Leviathan Entertainment, Llc Virtual environment with formalized inter-character relationships
US7958456B2 (en) * 2005-12-23 2011-06-07 Apple Inc. Scrolling list with floating adjacent index symbols
JPWO2007123014A1 (ja) * 2006-04-20 2009-09-03 パナソニック株式会社 画像出力装置
US8296684B2 (en) * 2008-05-23 2012-10-23 Hewlett-Packard Development Company, L.P. Navigating among activities in a computing device
US20070294635A1 (en) * 2006-06-15 2007-12-20 Microsoft Corporation Linked scrolling of side-by-side content
US20080016471A1 (en) * 2006-07-14 2008-01-17 Samsung Electronics Co., Ltd. Electronic device for providing 3D user interface and method of providing a 3D user interface
JP4775179B2 (ja) * 2006-08-28 2011-09-21 ソニー株式会社 表示のスクロール方法、表示装置および表示プログラム
US8113951B2 (en) * 2006-11-15 2012-02-14 Microsoft Corporation Achievement incentives within a console-based gaming environment
US8689132B2 (en) * 2007-01-07 2014-04-01 Apple Inc. Portable electronic device, method, and graphical user interface for displaying electronic documents and lists
US7903115B2 (en) * 2007-01-07 2011-03-08 Apple Inc. Animations
US8504926B2 (en) * 2007-01-17 2013-08-06 Lupus Labs Ug Model based avatars for virtual presence
US7779360B1 (en) * 2007-04-10 2010-08-17 Google Inc. Map user interface
US9772751B2 (en) * 2007-06-29 2017-09-26 Apple Inc. Using gestures to slide between user interfaces
US8127246B2 (en) * 2007-10-01 2012-02-28 Apple Inc. Varying user interface element based on movement
US20100275150A1 (en) * 2007-10-02 2010-10-28 Access Co., Ltd. Terminal device, link selection method, and display program
EP2469399B1 (en) * 2008-02-11 2019-09-11 Idean Enterprises Oy Layer-based user interface
US9513704B2 (en) * 2008-03-12 2016-12-06 Immersion Corporation Haptically enabled user interface
US8446414B2 (en) * 2008-07-14 2013-05-21 Microsoft Corporation Programming APIS for an extensible avatar system
US8384719B2 (en) * 2008-08-01 2013-02-26 Microsoft Corporation Avatar items and animations
US8352864B2 (en) * 2008-09-19 2013-01-08 Cisco Technology, Inc. Method of operating a design generator for personalization of electronic devices
US8701040B2 (en) * 2008-09-29 2014-04-15 Microsoft Corporation Panoramic graphical user interface
US20100107100A1 (en) * 2008-10-23 2010-04-29 Schneekloth Jason S Mobile Device Style Abstraction
US8315672B2 (en) * 2008-12-01 2012-11-20 Research In Motion Limited Portable electronic device and method of controlling same
US8610673B2 (en) * 2008-12-03 2013-12-17 Microsoft Corporation Manipulation of list on a multi-touch display
US8365091B2 (en) * 2009-01-06 2013-01-29 Microsoft Corporation Non-uniform scrolling
US9417787B2 (en) * 2010-02-12 2016-08-16 Microsoft Technology Licensing, Llc Distortion effects to indicate location in a movable data collection

Also Published As

Publication number Publication date
IL220962A0 (en) 2012-09-24
CA2787112A1 (en) 2011-08-18
EP2534566A4 (en) 2013-11-06
CN102782632A (zh) 2012-11-14
US20110199318A1 (en) 2011-08-18
EP2534566A2 (en) 2012-12-19
AU2011215630A1 (en) 2012-08-09
BR112012020293A2 (pt) 2016-05-03
WO2011100599A3 (en) 2011-10-20
WO2011100599A2 (en) 2011-08-18
JP5726908B2 (ja) 2015-06-03
JP2013519952A (ja) 2013-05-30

Similar Documents

Publication Publication Date Title
JP5726909B2 (ja) 柔軟な平行移動及び垂直移動を備えたマルチレイヤーユーザーインターフェース
JP5726908B2 (ja) 柔軟な平行移動を備えたマルチレイヤーユーザーインターフェース
US10788953B2 (en) Device, method, and graphical user interface for managing folders
US9417787B2 (en) Distortion effects to indicate location in a movable data collection
US10761712B2 (en) Anchoring viewport
US9898180B2 (en) Flexible touch-based scrolling
KR101670572B1 (ko) 다수의 페이지들을 갖는 폴더들을 관리하기 위한 디바이스, 방법, 및 그래픽 사용자 인터페이스
KR20140126327A (ko) 애플리케이션의 썸네일-이미지 선택 기법
KR20090070491A (ko) 터치스크린을 이용한 화면 제어 장치 및 방법
US9836211B2 (en) Device, method, and graphical user interface for selection of views in a three-dimensional map based on gesture inputs
KR101325535B1 (ko) 화면 출력을 제어하는 방법, 단말기 및 기록매체

Legal Events

Date Code Title Description
N231 Notification of change of applicant
A201 Request for examination
E902 Notification of reason for refusal
E601 Decision to refuse application