티스토리 뷰

6장 화면설계 (0/1/1)

 

 사용자 인터페이스 (UI, User Interface)

사용자와 시스템 간의 상호 작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어

CLI 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스
GUI 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스
NUI 사용자의 말이나 행동으로 기기를 조작하는 인터페이스

 

 사용자 인터페이스의 기본원칙 [ 직유학유 ] ★★★★★

직관성 누구나 쉽게 이해하고 사용할 수 있어야 함
유효성 사용자의 목적을 정확하고 완벽하게 달성해야 함
학습성 누구나 쉽게 배우고 익힐 수 있어야 함
유연성 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 함

 UI 설계 도구 [ 와목스프유 ] ★★★★

와이어프레임
Wireframe
기획 단계에 초기에 제작하는 것. 페이지에 대한 개략적인 레이아웃이나 UI 요소등에 뼈대를 설계. 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계.
- 종류 : 손 그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등
목업
Mockup
디자인, 사용방법 설명, 평가 등을 위해 와이어 프레임보다 좀 더 실제 화면과 유사하게 제작한 정적인 형태의 모형. 시각적으로만 구성 요소를 배치
- 종류 : 파워 목업, 발사믹 목업
스토리보드
Story Board
와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름(인터랙션)을 추가한 문서. 디자이너와 개발자가 최종적으로 참고하는 구체적인 작업 지침서로, 정책, 프로세스 콘텐츠 구성, 와이어 프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어 있음. 상단이나 우측에는 제목, 작성자를 입력. 좌측에는 UI 화면, 우측에는 디스크립션(설명)을 기입
- 종류 : 파워포인트, 키노트 스케치, Axure
프로토타입
Prototype
와이어프레임이나 스토리보드 등에 인터랙션을 적용함으로 실제 구현된것처럼 테스트가 가능한 동적인 형태의 모형.
- 종류 : HTML/css, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등
유스케이스
Use Case
사용자 측면에서의 요구사항으로, 목표를 달성하기 위해 수행할 내용을 기술. 사용자의 요구사항을 빠르게 파악함으로 프로젝트 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화함. 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것 -> 다이어그램으로 묘사.

 

 UI상세설계

요구사항 최종 확인  UI 구조 설계  사이트 맵 구조 설계  화면설계

 

 HCI (Human Computer Interaction or Interface)

사람이 시스템을 보다 편리하고 안전하게 사용할 수 있도록 연구하고 개발하는 학문

 

 UX (User Experience, 사용자 경험)

사용자가 시스템이나 서비스를 이용하면서 느끼고 생각하게 되는 총체적인 경험

 

 감성공학

제품이나 작업환경을 사용자의 감성에 알맞도록 설계 및 제작하는 기술

 

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함