프로토타입 툴 Axure/기초강좌

[Axure 강좌] Admin 내비게이션 만들기

예성군 2016. 8. 30. 11:12

안녕하세요. 조영수입니다.

AXURE 강좌를 진행하던 중 Admin 내비게이션 제작 부분이 헷갈린다는 의견이 있어 제작 방법을 공유드립니다.

Admin 샘플 :: 위사(WISA)

Admin 샘플은 쇼핑몰 전문 제작회사 위사의 관리자 화면으로 선정했습니다. 

선정 이유는 타사 솔루션 대비 디자인이 깔끔해서! ^^


위사(http://www.wisa.co.kr) 접속 후 화면 중앙의,

[관리자 모드 체험하기 > PC 버튼]을 클릭하면 WISA의 Admin 화면을 체험하실 수 있습니다.

Axure Prototype

AXURE로 위사 Admin의 상단 내비게이션 영역을 제작해봤습니다.

상단 GNB의 설정/상품관리/주문배송/고객CRM 버튼을 클릭하면 메뉴 이동을 확인할 수 있습니다.


파워포인트로 GNB를 설계하는 경우에는 메뉴명 하나만 수정하더라도 모든 페이지를 일일이 수정해야 하는 번거로움이 발생하는데,
Axure의 경우 GNB를 마스터로 설정하여 단 한번의 수정으로 모든 페이지를 일괄 반영할 수 있습니다.

제작방법


#1. BG 컬러 일괄 변경하기

Project >  Page Style Manager > Back Color 에서 배경색 일괄설정


#2. UI 그리기

WISA Admin을 참고하여 내비게이션 UI 제작


#3. GNB 인터랙션 설정

  • GNB 메뉴의 링크 인터랙션 설정
  • GNB 메뉴의 인터랙션 스타일 설정 (MouseOver, Selected)

#4. 마스터 생성

GNB를 마스터로 제작하고 각 페이지에 삽입


#5. 페이지별 OnPageLoad 인터랙션 설정.

페이지 로드시 해당 GNB 메뉴의 Selected 값을 ture로 설정


Axure 공식 강좌 수강생은 페이스북 그룹을 통해 상세설명이 첨부 된 완료 파일을 다운받으실 수 있습니다.


반응형