Axure 액슈어 따라하기 6. 다이나믹패널을 이용해 라디오버튼 만들기

 

액슈어의 필수 기능 다이나믹 패널.

이걸로 라디오버튼도 만들 수 있다.

기본 라이브러리에 라디오버튼과 체크박스가 있긴 하지만

인터랙션까지는 구현이 안되기 때문에

(다중선택이 불가능한 라디오버튼의 인터랙션)

직접 만들어야 정확한 인터랙션 구현이 가능하다.

---

Axure 액슈어 따라하기 6.

라디오버튼 만들기

---

 

1. 라디오버튼을 그린다.

라이브러리의 ellipse과 텍스트를 이용해서 원하는 디자인으로 만들어 준다.

 

 

2. 만든 라디오버튼을 다이나믹패널화 한다.

 

3. 다이나믹패널의 state를 on/off 두가지로 생성한다.

위에서 만든 선택된 상태가 on, 미선택된 상태가 off.

아래 화면은 미선택된 상태의 라디오 버튼이다.

때문에 가운데 원을 지워줬다.

 

4. 다이나믹패널을 close하면 이렇게 라디오버튼이 생긴다!

1차 완료. 이제 여기서

 

이렇게 원하는 개수만큼 라디오버튼을 복사한다.

알아볼 수 있도록 좌측부터 r1, r2, r3로 이름을 설정한다.

 

 

5. 라디오버튼을 선택한 상태로

우측의 인터랙션에서 > click or tap을 선택한다.

 

6. action은 set panel state 선택!

설명하자면..

만들어 둔 라디오버튼(다이나믹패널화 시킨)을 클릭하면

다른 라디오버튼(=다이나믹패널)을 off 상태로 바꿔줘야 하기 때문에

클릭 시 panel state를 세팅하는 액션을 선택한 것이다.

 

 

그럼 어떤 패널을 바꿀지 타겟을 선택해야겠지?

set panel state의  타겟으로 r1 선택 후,

 

STATE : Next로 설정,

Wrap from last to first를 체크한다.

 

클릭한 라디오버튼이 선택되면,

다른 두개의 라디오버튼은 미선택 상태로 변경되어야 하는게 라디오버튼의 동작.

따라서, 다른 두개의 버튼(r2, r3)은 미선택 상태인 'off'가 되도록 액션을 설정한다.

 

7. 이제 다른 라디오버튼에도 같은 인터랙션을 붙여넣기 할 차례.

r1에 설정한 인터랙션을 r2에 복붙 후,

타겟만 r2에 맞게 변경해주면 된다.

즉, 첫번째 타겟은 r2로,

2,3번은 각각 r1,r3이 off 상태로 전환되도록 변경해주면 되는 것.

그럼 r2 클릭 시 r2가 on 상태,

나머지 두개의 버튼은 off 상태로 바꾸는 액션이 적용된다.

 

바로 이렇게! 오른쪽 인터랙션 상자를 참고해서

그대로 세팅하면 된다 :)

 

8. r3에도 인터랙션 복붙 후 타겟을 변경한다.

마찬가지로 r3을 클릭하면 on,

r1, r2는 off 상태로 변경되도록 세팅하면 되는 것.

이런식으로 라디오버튼 개수를 늘려도 동일한 원리로 설정하면 된다.

 

그럼 이런 라디오버튼이 생성되는데,

아래 동영상으로 인터랙션을 확인해보자.

다이나믹패널 라디오버튼 만들기

동영상으로 동작 확인!

 

정말 액슈어는, 다이나믹 패널과 인터랙션 사용법만 알면

웬만한건 뭐든지 만들 수 있다.

지금 설명한 라디오버튼 인터랙션을 응용하면

체크박스와 탭 구조 등 다양한 구조를 프로토타이핑 할 수 있다.

 

지금까지는 간단한 인터랙션들만 소개했는데,

다음부터는 좀더 복잡한(?) 인터랙션(feat.로직)을 소개해봐야지.