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

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

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

Admin 샘플 :: 위사(WISA)

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

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

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

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

Axure Prototype

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

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

• 제작시간 : 10분
• Preview : http://evkzei.axshare.com

파워포인트로 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 공식 강좌 수강생은 페이스북 그룹을 통해 상세설명이 첨부 된 완료 파일을 다운받으실 수 있습니다.

강좌

2016년 Axure 강좌일정 및 공식 커리큘럼 안내

소개

IT 기획 연구소 운영자 소개