Axure 액슈어 따라하기 3. 탭 구조 만들기 2탄 : 하단 컨텐츠 밀어내기

액슈어 따라하기 2편.

액슈어 다이나믹패널로 탭 구조 구현하기!

https://jxmocha.tistory.com/10

Axure 액슈어 따라하기 2. 탭 구조 만들기 feat.다이나믹패널

3편은 탭 구조 만들기 응용편인 하단 컨텐츠 밀어내기(?)

 

컨텐츠 중간에 탭 구조가 들어갈 경우,

탭 내부 컨텐츠 하단의 공통 컨텐츠(?)들을

모든 다이나믹 패널에 넣어야 하나? 생각이 드는데

그럴 필요 없이, 하단 컨텐츠를 밀어내는 방법이 있다.

내가 써놓고도 무슨말인지 헷갈리지만

하단 동영상을 보면 이해가 될듯..^^;

---

Axure 액슈어 따라하기 3.

탭 하단 컨텐츠 밀어내기

---

 

 

1. 2편에서 만든 탭 아래에 추가 컨텐츠를 만들었다.

 

2. 그리고 각 탭구조 내부 컨텐츠들의 세로 높이를 다르게 설정해보자.

 

이렇게 다른 탭을 선택할 때마다 컨텐츠 영역의 높이가 달라지면

그 아래에 있는 추가메뉴는 탭 높이에 따라 가려지게 된다.

그게 싫을 경우, 아래처럼 탭마다 컨텐츠를 추가하는 방법도 있지만!

이렇게 하면 점점 화면이 무거워지니까.

더 편리한 방법이 있다.

 

3. 탭에 인터랙션을 설정할 때 하단에 'more options'가 있었다. 이걸 클릭! 

 

5. Push/Pull Widgets를 선택하고,

하단으로 밀어낼것이기 때문에 'Below'를 선택. 그리고 Done.

 

그럼 '클릭 시 state1 상태가 되며, 하단 위젯을 아래로 밀어내기' 동작이 설정되는 것.

 

나머지 탭에도 동일하게 설정해준다.

 

 

완성되면, 이 동영상처럼

탭을 선택할 때 마다 하단 컨텐츠가 아래로 밀리는 걸 확인할 수 있다.

 

이렇게 액슈어에는

이게 될까..? 싶은 기능들은 대부분 세팅이 가능하다.

파고들수록 기획&프로토타이핑에 진짜 최고..