From Design pattern
Jump to: navigation, search
(Getting)
(Navi)
Line 43: Line 43:
 
----
 
----
  
= Navi =
+
== Navi ==
== 미분류 패턴 ==
+
=== 사례명 ===
+
* 사례설명
+
* 사례설명
+
<동영상 코드는 일단 기존방식으로 해놓으시면 나중에 일괄 수정할게요>
+
  
 
+
=== 542번 사례 ===
== 542번 사례 ==
+
 
* 가로로 스크롤을 이동해 동일레벨에 있는 기사들을 훑어본다.
 
* 가로로 스크롤을 이동해 동일레벨에 있는 기사들을 훑어본다.
 
{{#Widget:Vimeo|id=93207968|width=300|height=528}}
 
{{#Widget:Vimeo|id=93207968|width=300|height=528}}
  
== 543번 사례 ==
+
=== 543번 사례 ===
 
* 가로로 스크롤을 이동해 동일레벨에 있는 영화들을 훝어본다.
 
* 가로로 스크롤을 이동해 동일레벨에 있는 영화들을 훝어본다.
 
{{#Widget:Vimeo|id=93208068|width=300|height=528}}
 
{{#Widget:Vimeo|id=93208068|width=300|height=528}}
  
== 544번 사례 ==
+
=== 544번 사례 ===
 
* 가로로 스크롤을 이동해 동일레벨에 있는 운동의 종류를 훑어본다.
 
* 가로로 스크롤을 이동해 동일레벨에 있는 운동의 종류를 훑어본다.
 
{{#Widget:Vimeo|id=93207970|width=300|height=528}}
 
{{#Widget:Vimeo|id=93207970|width=300|height=528}}
  
== NY time_Spinner(554) ==
+
=== NY time_Spinner(554) ===
 
* 화살표 버튼을 클릭해 숨겨져있던 다양한 기능의 버튼을 확인한다.
 
* 화살표 버튼을 클릭해 숨겨져있던 다양한 기능의 버튼을 확인한다.
 
{{#Widget:Vimeo|id=93208741|width=300|height=528}}
 
{{#Widget:Vimeo|id=93208741|width=300|height=528}}
  
== 대한민국 구석구석_Spinner(555) ==
+
=== 대한민국 구석구석_Spinner(555) ===
 
* 화살표 버튼을 클릭해 숨겨져있던 여행지 필터링 기능을 불러온다.
 
* 화살표 버튼을 클릭해 숨겨져있던 여행지 필터링 기능을 불러온다.
 
{{#Widget:Vimeo|id=93208742|width=300|height=528}}
 
{{#Widget:Vimeo|id=93208742|width=300|height=528}}
  
== BBC update_Call option menu(562) ==
+
=== BBC update_Call option menu(562) ===
 
* 뉴스 기사를 Swipe하여 숨겨진 메뉴를 불러온다.
 
* 뉴스 기사를 Swipe하여 숨겨진 메뉴를 불러온다.
 
{{#Widget:Vimeo|id=93208926|width=300|height=528}}
 
{{#Widget:Vimeo|id=93208926|width=300|height=528}}
  
== ios_Paper_Slide to page==
+
=== ios_Paper_Slide to page===
 
* 동일 레벨상의 축소된 각 페이지의 정보들을 좌우로 넘겨본다.
 
* 동일 레벨상의 축소된 각 페이지의 정보들을 좌우로 넘겨본다.
 
{{#Widget:Vimeo|id=94905291|width=258|height=533}}
 
{{#Widget:Vimeo|id=94905291|width=258|height=533}}
  
== ios_Paper_Slide to page==
+
=== ios_Paper_Slide to page===
 
* 동일 레벨상의 확대된 각 페이지의 정보들을 좌우로 넘겨본다.
 
* 동일 레벨상의 확대된 각 페이지의 정보들을 좌우로 넘겨본다.
 
<videoflash type="vimeo">94905012|300|533</videoflash>
 
<videoflash type="vimeo">94905012|300|533</videoflash>
  
== ios_Paper_drag to activate==
+
=== ios_Paper_drag to activate===
 
* 동일 레벨상의 축소된 정보들을 아래서 위로 드래그 하여 크게 본다.
 
* 동일 레벨상의 축소된 정보들을 아래서 위로 드래그 하여 크게 본다.
 
<videoflash type="vimeo">94903446|300|533</videoflash>
 
<videoflash type="vimeo">94903446|300|533</videoflash>
  
== ios_Paper_slide to move==
+
=== ios_Paper_slide to move===
 
* 화면을 아래로 드래그 하여 자신의 정보에 관련된 페이지를 볼 수 있다.
 
* 화면을 아래로 드래그 하여 자신의 정보에 관련된 페이지를 볼 수 있다.
 
<videoflash type="vimeo">94902939|300|533</videoflash>
 
<videoflash type="vimeo">94902939|300|533</videoflash>
  
== ios_airbnb_drag to activate==
+
=== ios_airbnb_drag to activate===
 
* 다른 메뉴 활성화를 위해 작아졌던 화면을 드래그 하여 활성화 시킨다.
 
* 다른 메뉴 활성화를 위해 작아졌던 화면을 드래그 하여 활성화 시킨다.
 
<videoflash type="vimeo">94905862|300|533</videoflash>
 
<videoflash type="vimeo">94905862|300|533</videoflash>
  
== ios_airbnb_slide to scroll==
+
=== ios_airbnb_slide to scroll===
 
* 카테고리별로 나누어진 메뉴를 위 아래로 스크롤 하여 본다.
 
* 카테고리별로 나누어진 메뉴를 위 아래로 스크롤 하여 본다.
 
<videoflash type="vimeo">94906088|300|533</videoflash>
 
<videoflash type="vimeo">94906088|300|533</videoflash>
Line 103: Line 97:
 
<videoflash type="vimeo">94906265|300|533</videoflash>
 
<videoflash type="vimeo">94906265|300|533</videoflash>
  
== ios_News digest_slide to move ==
+
=== ios_News digest_slide to move ===
 
* 하단부분 가로 스크롤을 좌우로 움직여 이전 날짜의 정보를 본다.  
 
* 하단부분 가로 스크롤을 좌우로 움직여 이전 날짜의 정보를 본다.  
 
<videoflash type="vimeo">94907507|300|533</videoflash>
 
<videoflash type="vimeo">94907507|300|533</videoflash>

Revision as of 22:47, 26 May 2014

Comment 작성하시려면 들여쓰기 한칸 하고 글 쓰시면 됩니다.
육제민 : 작성 어려우시면 말씀해주세요
홍길동 : 이 부분 어려운데 어떻게 할까?
육제민 : "----" 따음표 안에 있는거를 쓰시면 패턴간에 구분해 놓으실 수 있습니다.

<동영상 코드는 일단 기존방식으로 해놓으시면 나중에 일괄 수정할게요>

Dealing

Facebook_Sort by drag-and-drop

  • 페이스북에서 대화하던 대화상대의 아이콘을 하단의 x부분으로 drag-and-drop 하여 대화를 종료시킨다.

영상수정중


Navigation

Google play store_Segmented control(552)

  • 동일한 내용의 컨텐츠를 여러 필터링을 통해 정렬해 보여준다. -> * 판매중인 전체 앱 목록 중 일부를 여러 필터링 조건에 따라 그룹핑하여 보여준다. (choi)

Segmented control 은 android patterns에는 있지만 현재 우리 분류체계에는 없는 듯. 현재의 우리 분류체계에서는 navigation > move in same level > tabs 에 이와 유사한 사례가 있어요(474번). Segmented control을 tabs와 함께 묶어서는 안될 것 같고, 474번을 빼내서 552, 553과 함께 navigation > move in same level > Segmented control 을 생성해야 할 것 같습니다. (choi)

단, 474는 552와 같은 앱 스토어 아닌가요? 553도 앱 스토어 사례이고... 다른 컨텐츠 타입의 사례가 더 필요합니다. android patterns의 Segmented control 에 있는 사례들을 참고하세요. (choi)

T store_Segmented control(553)

  • 동일한 내용의 컨텐츠를 여러 필터링을 통해 정렬해 보여준다. -> * 판매중인 전체 앱 목록 중 일부를 여러 필터링 조건에 따라 그룹핑하여 보여준다. (choi)



Getting input

Galaxy 연락처_ (563)

  • 주소 리스트를 Swipe하여 실행 가능한 기능(전화, 메세지)를 활성화 한다. (Getting input 맞나?)

왓챠_Multiple select with check box(564)

  • 체크박스를 tap하여 원하는 영화를 추천 받기위해 필터링 한다.


Navi

542번 사례

  • 가로로 스크롤을 이동해 동일레벨에 있는 기사들을 훑어본다.

543번 사례

  • 가로로 스크롤을 이동해 동일레벨에 있는 영화들을 훝어본다.

544번 사례

  • 가로로 스크롤을 이동해 동일레벨에 있는 운동의 종류를 훑어본다.

NY time_Spinner(554)

  • 화살표 버튼을 클릭해 숨겨져있던 다양한 기능의 버튼을 확인한다.

대한민국 구석구석_Spinner(555)

  • 화살표 버튼을 클릭해 숨겨져있던 여행지 필터링 기능을 불러온다.

BBC update_Call option menu(562)

  • 뉴스 기사를 Swipe하여 숨겨진 메뉴를 불러온다.

ios_Paper_Slide to page

  • 동일 레벨상의 축소된 각 페이지의 정보들을 좌우로 넘겨본다.

ios_Paper_Slide to page

  • 동일 레벨상의 확대된 각 페이지의 정보들을 좌우로 넘겨본다.

ios_Paper_drag to activate

  • 동일 레벨상의 축소된 정보들을 아래서 위로 드래그 하여 크게 본다.

ios_Paper_slide to move

  • 화면을 아래로 드래그 하여 자신의 정보에 관련된 페이지를 볼 수 있다.

ios_airbnb_drag to activate

  • 다른 메뉴 활성화를 위해 작아졌던 화면을 드래그 하여 활성화 시킨다.

ios_airbnb_slide to scroll

  • 카테고리별로 나누어진 메뉴를 위 아래로 스크롤 하여 본다.

ios_airbnb_slide to page

  • 다양한 객실에 대한 정보를 좌우 스크롤로 넘겨 본다.

ios_News digest_slide to move

  • 하단부분 가로 스크롤을 좌우로 움직여 이전 날짜의 정보를 본다.

Screen

미분류 패턴

사례명

  • 사례설명
  • 사례설명

<동영상 코드는 일단 기존방식으로 해놓으시면 나중에 일괄 수정할게요>

ios_weathercube

  • 손가락을 통해 좌우로 벌려 알고자 하는 날씨의 지역정보를 입력한다.

ios_weathercube

  • 손가락을 통해 상하로 벌려 숨어있는 정보를 살펴본다.

ios_steller

  • 손가락을 통해 페이지 속 사진을 책장을 넘겨보듯 본다.

ios_google

  • 불필요한 페이지(카드)를 좌우로 swipe하여 제거한다.

Interactive Presentation of the "Electronic University"System._extend screen

  • 기존 화면의 틀을 벗어나 드래그하는 액션을 통해 큰화면으로 화면을 확장한다.

ios_Duolingo_Carousel

  • 여러장의 카드를 회전하듯 돌려 볼 수 있다.