1. UI 요구사항 확인
1. UI(User Interface)개념
컴퓨터, 웹 사이트, 시스템 등의 정보기기와 사용자가 서로 상호작용을 할수 있도록 연결해주는 매개체
2. UX(User eXperience)개념
사용자가 컴퓨터, 웹 사이트, 시스템 등 정보기기의 UI를 직/간접적으로 이용하여 경험한 모든 것
UI 유형
1. CLI(Command Line Interface), CUI
사용자가 컴퓨터 자판을 이용해 명령을 입력하여 컴퓨터를 조작하는 시스템
2. GUI(Graphical User Interface)
그래픽과 텍스트로 이루어져 있어 사용자의 입력이나 출력이 마우스 등을 통해 이루어짐
3. AUI(Auditory User Interface)
보다나은 사용자 경험을 제공하기 위해 만들어진 임베디드 사운드
4. NUI(Natural User Interface)
특별한 하드웨어 없이 인간의 자연스러운 움직임을 인식하여 정보를 제공UI 설계원칙
- 직관적 - 누구나 쉽게 이해하고 사용할 수 있어야 한다.
- 유효성 - 사용자의 목적을 정확하게 달성해야 한다.
- 학습성 - 누구나 쉽게 배우고 익힐 수 있어야 한다.
- 유연성 - 사용자의 요구사항을 최대한 수용하며, 요류를 최소화해야 한다.
UI 설계 절차
UI 개발목표 및 범위 수립 -> UI 전략 수립 ->
사용자 요구사항 분석 -> UI 상세설계 -> 구현 -> 테스트
용어
웹 표준, 웹 호환성, 웹 접근성, 반응형 웹, 인포그래픽, 브랜드 아이덴티티, 네비게이션, 아코디언, 플레이스 홀더, 필터링, 입력 폼, 입력 필드, 썸네일, 레이블, 대체 텍스트, 초첨
1.기능적 요구사항
무슨 기능을 수행해야 하나?
(입력, 출력, 데이터 저장, 연산, ...)
- 비기능적 요구사항
품질에 관한 요구사항(시스템 환경, 비용, 일정)
(사용성, 효율성, 신뢰성, 유지 보수성, 재사용성, ...)
2.UI 설계
- 문제 정의
- 사용자 모델 정의
- 작업 분석
- 컴퓨터 오브젝트 및 기능정의
- 사용자 인터페이스 정의
- 디자인 평가
UI 설계 도구
1. 와이어프레임(Wireframe)
기획자가 간단한 그림 (기획 -> 디자인, 선(Wire)틀(frame))
2. 스토리보드(Storyboard)
프로젝트의 전체적인 구성
스토리보드 작성 철자
- 표지
- 문서의 버전
- index 작성(목차)
- IA(Information Architecture)작성(메뉴구성)
- 공통모듈 작성(Header, Footer, GNB, LNB)
- 화면설계와 discription작성
3. 프로토타입
실제 서비스와 흡사한 모형을 만드는 작업
와이어프레임이나, 스토리보드에 인터렉션(동적효과)을 적용함으로써 실제 구현된 것처럼 시뮬레이션 할 수 있다.
4. 목업
디자인, 사용 방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형
5.유스케이스
사용자 측면의 요구사항
사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술
다이어그램 형태로 제작
감성공학
인간의 심상을 구체적인 물리적 설계 요소로 번역하여 이를 실현하는 기술
1. 감각적 감성
2. 기능적 감성
3. 문화적 감성
1류 접근 방법 - 디자인 요소 연계
2류 접근 방법 - 디자인 요소 연계 + 문화적 감성
3류 접근 방법 - 정량화된 값을 환산
- 요소화 -> 형상화 -> 구현 -> 생산화
안녕하세요!