본문으로 바로가기

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

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


신고
웹기획자 조영수
여행 카테고리 서비스 기획자. 《처음부터 다시 배우는 웹 기획》 저자. 웹기획&AXURE 강사. 웹/모바일 기획자 그룹 운영자.

댓글을 달아 주세요

  1. 학생 신고">2017.01.06 11:20 신고

    #5. 페이지별 OnPageLoad 인터랙션 설정.
    페이지 로드시 해당 GNB 메뉴의 Selected 값을 ture로 설정

    이 부분을 잘 모르겠어요. 어디서 값을 변경하는 건지 설명 부탁드려요.

    • BlogIcon 웹기획자 조영수 신고">2017.01.12 21:26 신고

      안녕하세요. 글로 설명하기는 어려운 점 양해 부탁드립니다. 페이지 로드시 해당 GNB 메뉴의 Selected 값을 ture로 설정하는 방법은.. 중앙의 와이어프레임(캔버스) 화면의 빈 공간을 클릭하면 우측 인스펙터 영역에 OnPageLoad 인터랙션이 노출됩니다. UI를 그리는 와이어프레임 영역의 빈 공간을 클릭해보시기 바랍니다. ^^;;