액슈어(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
In this tutorial, you'll learn how to use [style effects][style effects] to create a button that takes on different styling when it's in various interactive states, such as being moused over or clicked on.
docs.axure.com
Interactive Button
- 마우스오버(Mouseover)
- 마우스다운(Mousedown)
- 선택/미선택(Selected, Checked / Unselected, Unchecked)
- 활성화/비활성화(Enable / Disabled)
1. 마우스오버(Mouseover)
마우스를 이동하여 버튼위에 올리면 효과가 적용되는 기능입니다.
먼저 버튼을 하나 만듭니다. 우측 중간에 Mouseover Style Effect를 클릭해주세요.
INTERACTIONS - :mouseover 에서 Fill Color를 원하는 색상으로 선택해주세요.
:mouseover Fill Color에 적용된 색상을 확인해주세요.
미리보기를 실행한 후에 마우스를 버튼위에 over하면서 테스트해주세요.
2. 마우스다운(Mousedown)
마우스다운(Mousedown)을 선택해보겠습니다.
INTERACTIONS에서 New Interaction 버튼을 클릭하여 style effects에서 :mousedown을 선택합니다.
미리보기 실행 후에 버튼을 마우스로 눌러봅니다. 색상이 변경된 것을 확인할 수 있습니다.
3. 선택/미선택(Selected, Checked / Unselected, Unchecked)
사실 버튼을 선택/미선택하는 경우가 있을까라는 생각을 했었는데요. 기본동작이라고 생각하고 한 번 해보겠습니다.
적용하는 패턴은 버튼이 :selected 되었을 때 Fill Color를 선택하고 마우스를 클릭하면 버튼의 Selected / Unselected 상태를 토글(toggle)로 변경하는 패턴입니다. (처음에는 저도 약간 헷갈렸는데, 연습을 위해서 이러한 패턴을 만든 것 같아요.)
INTERACTIONS에서 New Interaction 버튼을 클릭하여 style effects에서 :selected를 선택하고 Fill Color를 적용합니다.
New Interaction에서 Click or Tap을 선택하고 Set Selected/Checked 선택합니다.
TARGET - Select Widget 에서 This Widget 선택합니다.
SET = value, To = toggle 설정합니다.
미리보기 실행 후 마우스를 클릭(Toggle)하면서 Selected / Unselected 되었을 때의 색상을 확인합니다.
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를 적용합니다.
New Interaction에서 Click or Tap을 선택하고 Enable/Disable 선택합니다.
미리보기 실행 후 마우스를 1회 클릭(Toggle)하면 Disable 상태가 되는데요. 이 때 색상을 확인합니다.
지금까지 액슈어(Auxre)에서 Interactive Button 사용 방법을 알아보았습니다. 다음에는 특정 위젯을 보이고 숨기기할 수 있는 Hiding and Showing Widgets에 대해서 알아보겠습니다.
<예제 파일과 링크>
예제 링크 - https://ueplnz.axshare.com/
Untitled Document
ueplnz.axshare.com