본문 바로가기

Origami + Studio

[오리가미 스튜디오 Basic 05] 상태 State


오리가미 스튜디오Origami Studio는 모던 인터페이스 디자인을 위한 프로토타이핑 툴입니다. 페이스북Facebook 디자이너들이 만들고 사용 중인 프로토타이핑 툴로써, 특히 인터랙션, 애니메이션 및 동작을 위한 프로토타입을 구현하기에 적합한 툴입니다. 

[오리가미 스튜디오 Basic] 목차


1. 소개 Introduction

2. 패치 Patches

3. 레이어 Layers

4. 인터랙션 Interaction

5. 상태 State

6. 애니메이션 Animation

7. 미리보기 & 공유하기 Previewing & Sharing






5. 상태 State

모든 프로토타입에는 여러 상태가 전환될 수 있습니다. 오리가미에서는 스위치Switch 패치를 사용하여 현재 상태를 추적할 수 있습니다. 이 스위치는 전등 스위치와 같으며 인터랙션 패치로 켰다 껐다 할 수 있습니다.

 

상태 패치 State Patches

스위치 Switch (단축키 S)

스위치 패치는 전등 스위치와 같습니다: 켜면 계속 켜져 있고, 끄면 계속 꺼져 있게 됩니다. 이는 단순한 두 상태의 인터랙션을 만드는데 도움이 됩니다. (예: 팝오버popover에서 주석을 보이고 숨기기)


여러 개의 스위치Switch 패치를 로직Logic 패치 (Or, And, Not)와 결합하여 서로의 위에 구축할 수 있습니다. 



옵션 스위치 Option Switch

옵션 스위치 패치는 공존할 수 없는 상호 배타적인 상태에 유용합니다 (예: 탭 바tab bar). 옵션 스위치는 상태에 따라 다른 값을 전달하기 위해 일반적으로 옵션 선택기Option Picker와 함께 사용됩니다. 예를 들어, 3가지 상태 사이에서 내비게이션 타이틀을 변경할 때 사용할 수 있습니다. 




카운터 Counter

카운터 패치는 공존할 수 없는 상호 배타적인 상태에 유용하며, 고정된 순서로 증가합니다. (예: 온보딩onboarding)


인덱스 번호는 상태를 나타냅니다

스위치 옵션 스위치 패치는 활성 상태에 대한 번호를 출력합니다. 스위치 패치 출력을 0(꺼짐) 또는 1(켜짐) 전환하고 옵션 스위치 패치 출력은 번째 상태의 경우 0, 번째의 경우 1, 이렇게 계속 늘어납니다.


인덱스 0 → 초기 상태 / 꺼짐 상태

인덱스 1 → 번째 상태 / 켜짐 상태

인덱스 2 → 번째 상태

인덱스 3 → 번째 상태

...





원문: Origami Studio - State


Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.