UI 흐름 설계

가볍게 읽고 지나가도 되는 내용들

 

UI 설계서 구성

: UI 설계서 표지, UI 설계서 개정 이력, UI 요구사항 정의, 시스템 구조, 사이트 맵, 프로세스 정의, 화면 설계

 

UI 설계안의 적정성 확인

- 실행차를 줄이기 위한 UI 설계 원리 - 사용 의도 파악, 행위 순서 규정, 행위 순서대로 실행

- 평가차를 줄이기 위한 UI 설계 원리 - 수행한 키 조작 결과를 사용자가 빠르게 지각하도록 유도

 

화면과 폼의 흐름 설계

- 화면에 표현되어야 할 기능적 및 비기능적 요구사항 검토

- 화면의 입력 요소 및 유스케이스를 통한 UI 요구사항 확인

- UI 유스케이스 설계

- 기능 및 양식 확인

 

UI 상세설계 프로세스

- UI 요구사항 최종 확인

- UI 구조 설계

- 사용자 기반 메뉴 구조 설계

- 화면 설계(와이어 프레임, 스토리보드, 프로토타입)

- 하위 시스템 단위의 내/외부 상세 화면과 폼 설계

 

UI 시나리오 문서의 작성 요건

- 완전성

- 일관성

- 이해성

- 가독성

- 추적 용이성

- 수정 용이성

 

UI 설계 도구

: 사용자와 시스템 사이에 의사소통 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구

 

화면 설계 도구

- 파워 목업: 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 틀

- 발사믹 목업: 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구

- 카카오 오븐: 카카오에서 제작한 온라인 프로토타이핑 도구

 

프로토타이핑 도구

- UX 핀: 웹 브라우저를 통해 와이어 프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구 / 구글 글라스

- 액슈어: UI 설계보다는 스토리보드에 포함되는 정책, 플로 차트, 디스크립션까지 모두 작성 가능한 도구

- 프로토 나우: 네이버에서 만ㄷ든 프로토타이핑 툴

 

UI 디자인 도구

- 스케치

- Adobe XD

- 인비전

- 픽사에이트

- 프레이머