액슈어(Axure) 따라하기 - Interactive Button

액슈어(Axure) 따라하기 - Interactive Button

이번 포스팅은 버튼(Button)에 여러가지 효과들을 적용해보는 포스팅입니다. IT서비스를 기획할 때 버튼이 없는 것은 상상할 수가 없겠죠?? 그런데 버튼 하나하나의 효과를 구글 슬라이드나 PPT로 만들어서 의사소통하게 되면 만드는데 시간이 많이 걸리고 수정하는데 또 시간이 굉장히 많이 듭니다. 액슈어(Axure)에서는 이러한 기능을 굉장히 쉽고 빠르게 적용하여 프로토타이핑(prototyping)을 제작할 수 있어서 많은 노력과 시간을 절약할 수 있습니다. PM에게는 굉장히 고마운 도구라고 할 수 있죠. (Axure 감사용~!)

이번 포스팅에서 버튼(Button)을 활용하여 효과를 주면서 연습을 하지만 실제로는 다른 객체들에도 적용할 수 있습니다. 여러가지 객체에 활용해보면서 연습해보면 좋을 것 같네요.

 

(참고) - https://docs.axure.com/tutorials/basics/interactive-button/

Interactive Button Tutorial · Axure Docs

 

Interactive Button

1. 마우스오버(Mouseover)
2. 마우스다운(Mousedown)
3. 선택/미선택(Selected, Checked / Unselected, Unchecked)
4. 활성화/비활성화(Enable / Disabled)

 

1. 마우스오버(Mouseover)

마우스를 이동하여 버튼위에 올리면 효과가 적용되는 기능입니다.

먼저 버튼을 하나 만듭니다. 우측 중간에 Mouseover Style Effect를 클릭해주세요.

<버튼(Button) 생성하기>

 

INTERACTIONS - :mouseover 에서 Fill Color를 원하는 색상으로 선택해주세요.

<Fill Color 선택하기>

<Fill Color 선택하기>

 

:mouseover Fill Color에 적용된 색상을 확인해주세요.

<:mouseover Fill Color 적용 후 확인하기>

 

미리보기를 실행한 후에 마우스를 버튼위에 over하면서 테스트해주세요.

<마우스가 over되지 않았을 때 버튼 색상>

<마우스가 over되었을 때 버튼 색상>

 

2. 마우스다운(Mousedown)

마우스다운(Mousedown)을 선택해보겠습니다.

INTERACTIONS에서 New Interaction 버튼을 클릭하여 style effects에서 :mousedown을 선택합니다.

<:mousedown 선택하기>

<:mousedown Fill Color 적용하기>

<:mousedown Fill Color 적용 후 확인하기>

 

미리보기 실행 후에 버튼을 마우스로 눌러봅니다. 색상이 변경된 것을 확인할 수 있습니다.

<미리보기 - 마우스를 버튼 위에 올리고 누르기>

 

3. 선택/미선택(Selected, Checked / Unselected, Unchecked)

사실 버튼을 선택/미선택하는 경우가 있을까라는 생각을 했었는데요. 기본동작이라고 생각하고 한 번 해보겠습니다.

적용하는 패턴은 버튼이 :selected 되었을 때 Fill Color를 선택하고 마우스를 클릭하면 버튼의 Selected / Unselected 상태를 토글(toggle)로 변경하는 패턴입니다. (처음에는 저도 약간 헷갈렸는데, 연습을 위해서 이러한 패턴을 만든 것 같아요.)

INTERACTIONS에서 New Interaction 버튼을 클릭하여 style effects에서 :selected를 선택하고 Fill Color를 적용합니다.

<:selected Fill Color 적용하기>

 

New Interaction에서 Click or Tap을 선택하고 Set Selected/Checked 선택합니다.

<New Interaction - Click or Tap에서 Set Selected/Checked 선택>

 

TARGET - Select Widget 에서 This Widget 선택합니다.

<TARGET - Select Widget 에서 This Widget 선택>

 

SET = value, To = toggle 설정합니다.

<SET = value, To = toggle 설정>

 

미리보기 실행 후 마우스를 클릭(Toggle)하면서 Selected / Unselected 되었을 때의 색상을 확인합니다.

<미리보기 - Selected 일 때 Fill Color 확인>

<미리보기 - Unselected 일 때 Fill Color 확인>

 

4. 활성화/비활성화(Enable / Disable)

버튼이 비활성화 되는 경우는 종종 있기 때문에 한 번 해보겠습니다. (사실 클릭했을 때, 비활성화 하는 경우는 없을 것 같고 나중에 연습해볼 체크박스 / 라디오버튼의 선택 유무에 따라서 버튼을 활성화/비활성화 하는 경우가 생길 것 같아요. 그러한 시나리오를 상상해보면서 지금은 연습용이라고 생각하면 좋을 것 같습니다.)

적용하는 패턴은 버튼이 :disabled 되었을 때 Fill Color를 선택하고 마우스를 클릭하면 버튼의 Enable / Disable 상태를 Disabled로 변경하는 패턴입니다.

INTERACTIONS에서 New Interaction 버튼을 클릭하여 style effects에서 :disabled를 선택하고 Fill Color를 적용합니다. 현실감있게 비활성화에 많이 사용되는 컬러를 사용해보았어요. ㅎㅎ

 

INTERACTIONS에서 New Interaction 버튼을 클릭하여 style effects에서 :disabled를 선택하고 Fill Color를 적용합니다.

<:disabled Fill Color 적용하기>

 

New Interaction에서 Click or Tap을 선택하고 Enable/Disable 선택합니다.

<New Interaction - Click or Tap에서 Enable/Disable 선택>

<TARGET - Select Widget 에서 This Widget 선택>

<Disable 선택>

 

미리보기 실행 후 마우스를 1회 클릭(Toggle)하면 Disable 상태가 되는데요. 이 때 색상을 확인합니다.

<미리보기 - 1회 클릭 후 버튼이 disable 일 때 Fill Color 확인>

 

지금까지 액슈어(Auxre)에서 Interactive Button 사용 방법을 알아보았습니다. 다음에는 특정 위젯을 보이고 숨기기할 수 있는 Hiding and Showing Widgets에 대해서 알아보겠습니다.

 

<예제 파일과 링크>

Interactive Button.rp

0.04MB

예제 링크 - https://ueplnz.axshare.com/

Untitled Document