UX 기반 소프트웨어 및 디지털콘텐츠 UI 설계
인터랙티브 프로토타입 사전 준비물 : 페이퍼 프로토타입 + 사용자 평가 결과물 (종이 스케치) 실습 도구 :노트북
실습 개요 목표 개요 결과물 페이퍼 프로토타입 및 사용자 평가를 통해 개선한 UI 디자인을 인터랙티브 프로토타입으로 구현한다. 인터랙티브 프로토타입 형태로 구현한다. 팀 내부 테스트를 통해 결과물을 수정 보완한다. 결과물 인터랙티브 프로토타입 결과물 (HTML 파일)
1. UI 디자인 정리 페이퍼 프로토타입 및 사용자 평가를 통해 개선 된 시스템의 최종 사용자 인터페이스 화면을 정리한다. 각 화면들은 인터랙티브 프로토타입 구현 시 그대로 사용될 것이므로, 기능 별, 시나리오 별로 잘 정리해두도록 한다.
2. 인터랙티브 프로토타입 구현 NHN Design Studio를 다운로드 받는다. http://dev.naver.com/projects/dstudio 정리한 사용자 인터페이스 디자인 화면을 토대로 각 화면을 구현한다. HTML 미리보기를 통해 결과물을 생성, 검토한다.
설치 및 실행
새 프로젝트 생성 새 프로젝트를 클릭하여 프로젝트 명을 입력하면 새 프로젝트가 생성 됨
새 페이지 추가 및 화면 설계 필요한 수만큼 페이지 생성 각 페이지에서는 화면 설계 요소 템플릿을 이용하여 화면을 구성
화면 설계 예시 – 로그인 화면
인터랙션 추가 인터랙션을 적용 할 요소(버튼) 선택 마우스 액션 선택한 후, 추가 버튼 클릭
인터랙션 추가 왼쪽 선택단계 1에서 액션 선택 선택단계 2에서 세부 설정 현재 프로젝트 내에서 페이지 이동을 시킬 경우, 왼쪽 선택단계 1에서 액션 선택 선택단계 2에서 세부 설정 현재 프로젝트 내에서 페이지 이동을 시킬 경우, 선택단계 1 : 현재 프로젝트 선택단계 2 : 페이지 번호
HTML 생성 프로젝트 우클릭 HTML 생성 우측 상단 미리보기
3. 내부 테스트 및 수정 팀 내부에서 모든 화면이 제대로 연결되었는지 점검하고, 페이퍼 프로토타입 과정에서 미처 발견하지 못한 사용상의 문제점이 없는지 검토한다. 내부 테스트에서 발견 된 에러, 수정 사항들은 보완하여 최종 결과물로 제출한다.