실습 실습 #6 #6 인터랙티브 프로토타입 인터랙티브 프로토타입
숙명여자대학교 임순범
1
실습 개요
사전 준비물
페이퍼 프로토타입 + 사용자 평가 결과물 ( 종이 스케치 )
목표
페이퍼 프로토타입 및 사용자 평가를 통해 개선한 UI 디자인을 인터랙티브 프로토타입으로 구현한다 .
개요
페이퍼 프로토타입 테스트를 통해 개선한 UI 디자인을 최종 정리한다 .
인터랙티브 프로토타입 형태로 구현한다 .
팀 내부 테스트를 통해 결과물을 수정 보완한다 .
결과물 : 인터랙티브 프로토타입 결과물 ( 링크 )
Ⓒsblim, 2011
1. UI 디자인 정리
이전 단계 최종 사용자 인터페이스 화면을 정리한다
페이퍼 프로토타입 및 사용자 평가를 통해 개선된 UI 및 화면
각 화면들은 인터랙티브 프로토타입 구현 시 그대로 사용될 것이므로 , 기능 별 , 시나리오 별로 잘 정리해두도록 한다 .
2. 인터랙티브 프로토타입 구현
Figma 에 접속하여 , 가입한다 .
https://www.figma.com/
UI 화면의 구현
이전 단계에서 정리한 UI 디자인 화면을 토대로 각 화면을 구현한다 .
공유 링크를 통해 최종 결과물을 생성 , 검토한다 .
페이퍼 프로토타입 디지털 프로토타입 실행 프로그램
Ⓒsblim, 2011
Figma 실행
피그마 (Figma)
https://www.figma.com/
프로토타이핑을 도와주는 웹기반 프로토타입 툴 .
•
이메일을 통한 계정 생성 후 로그인•
을 클릭하여 새로운 디자인 파일 생성새 디자인 파일 생성
Ⓒsblim, 2011
•
격자 모양 버튼을 클릭해서 다양한 종류의 캔버스를 확인•
제작하고자 하는 프로토타입과 목적에 알맞게 캔버스를 선택•
스마트폰 , 태블릿 , 데스크탑 , 프레젠테이션 등캔버스 선택
화면 설계 예시 : 로그인 화면
1) 사용하고자 하는 스마트폰 종류에 맞게 캔버스 생성
Ⓒsblim, 2011
화면 설계 예시 : 로그인 화면
2) 다양한 컴포넌트 추가
•
네모 모양 버튼 : 다양한 모양의 컴포넌트 추가•
펜 모양 버튼 : 직접 그림을 그려 컴포넌트 추가•
T 모양 버튼 : 텍스트 컴포넌트 추가화면 설계 예시 : 로그인 화면
3) 컴포넌트들을 추가하여 앞서 정리한 UI 화면을 제작
•
각 컴포넌트들을 클릭하고 우측의 상세 옵션을 조정하여 디자인 을 세밀하게 조정할 수 도 있음Ⓒsblim, 2011
화면 설계 예시 : 로그인 화면
4) 로그인 성공 화면 추가
•
앞선 방식과 동일하게 새로운 프레임을 생성•
프레임 내에 로그인 성공을 알리는 텍스트를 추가화면 설계 예시 : 로그인 화면
5) 인터랙션 ( 링크 , 이동 ) 추가
①우측 목록 중에서 프로토타입 클릭
Ⓒsblim, 2011
화면 설계 예시 : 로그인 화면
5) 인터랙션 ( 링크 , 이동 ) 추가
②인터랙션을 넣고자 하는 컴포넌트 더블클릭
③+ 버튼을 드래그하여 이동하고자 하는 화면과 연결
화면 설계 예시 : 로그인 화면
6) 새로운 단위의 화면을 만들고자 할 때 : page 를 추가 (Page 옆 + 버튼 )
Ⓒsblim, 2011
7) 인터랙티브 프로토타입 테스트 및 공유
•우측 상단에서 모양의 present 버튼을 클릭하여
제작한 인터랙티브 프로토타입을 테스트 해볼 수 있도록 실행
•테스트 화면의 상단 바에서 버튼을 클릭하여 공유 링크 생성 가능 ( 공유되 는 사람들에게 부여되는 권한에 주의 )
화면 설계 예시 : 로그인 화면
•
웹 테스트 결과 예시화면 설계 예시 : 로그인 화면
Ⓒsblim, 2011
3. 내부 테스트 및 수정
팀 확인 ( 내부 테스트 )
모든 화면이 제대로 연결되었는지 점검
페이퍼 프로토타입에서 미처 발견하지 못한 사용상의 문제점 확인
수정
내부 테스트에서 발견 된 에러 , 수정 사항들
보완하여 최종 결과물을 작성
