05. 화면설계 A - TOTOLII/study GitHub Wiki
사용자 인터페이스(UI)
User Interface의 약자로 사용자, 시스템, 물리적 제어(전달), 구성, 기능(편리, 간편)
-
사용자 인터페이스의 특징 시간과 노력을 절약할 수 있고, 이해도를 높힐 수 있다.
-
사용자 인터페이스의 구분
CLI(Command Line Interface) : 텍스트로 출력되는 인터페이스
GUI(Graphic User Interface) : 아이콘 메뉴, 마우스로 조작할 수 있는 인터페이스
NUI(Natural User Interface) : 유저의 말이나 행동으로 조작할 수 있는 인터페이스 -
사용자 인터페이스의 기본 원칙
- 직관성 : 사용자는 누구든지 쉽게 이해할 수 있어야 한다.
- 유효성 : 목적이 정확하고 완전하게 달성 할 수 있어야 한다.
- 학습성 : 누구나 쉽게 배울 수 있어야 한다.
- 유연성 : 사용자의 요구사항을 최대한 수용할 수 있어야 하고 실수를 최소화 할 수 있어야 한다.
-
사용자 인터페이스의 설계 지침(고려할 사항은 무엇이냐?)
- 사용자 중심, 일관성, 단순성
- 결과예측 가능, 가시성, 표준화
- 접근성, 명확성, 오류발생 해결
웹 스타일 가이드 구성(사례)
- 스타일 가이드 : 각종 규칙들의 기준이 되는 집합
- introduction : 웹 스타일의 기본 활용, 적용 범위를 규정
- Basic Rules : 폰트, 컬러 등
- Layout : 시안
- Elements : 텍스트, 아이콘 버튼 테이블에 대한 내용
-
정책
웹 스타일 가이드 운영 정책 : 계속적인 업데이트가 필요
조직의 IDENTITY 유지 정책 : 서비스 성격에 맞춰서 디자인 하는것 -
기본 환경
용량 규정
메인화면 전체 페이지 및 이미지 사이즈
서브 화면 전체 페이지 및 이미지 사이즈
공통 아이콘 이미지 사이즈 -
한국형 웹 콘텐츠 접근성 지침
장애인이든 비장애인이던지 다 쉽게 접근할 수 있게 만든 것-
인식의 용이성 대체 텍스트, 멀티미디어 대체수단, 명료성
-
운용의 용이성
키보드 접근성, 충분한 시간제공, 광과민성 발작 예방, 쉬운 네비게이션 -
이해의 용이성
가독성, 예측 가능성, 콘텐츠의 논리성, 입력 도움 -
견고성
문법 준수, 접근성
-
-
전자정부 웹 표준 준수 지침
- 내용의 문법 준수
- 내용과 표현의 분리
- 동작의 기술 중립성 보장
- 플러그인의 호환성
- 콘텐츠의 보편적 표현
- 운영체제에 독립적인 콘텐츠 제공
- 부가 기능의 호환성 확보
- 다양한 프로그램 제공
UI 지침
-
사용자 경험(UX)의 고려사항
사용 대상, 환경, 목적, 빈도 -
핵심 기능의 고려사항
메뉴 구조를 단순화하고 간결한 정보 제공 -
호환성, 확장성의 고려사항
3개 이상의 브라우저에서 동등한 서비스를 제공 -
정보 소외계층의 접근성
장애인, 고령자 등의 정근 및 이용 편의 증진을 위한 지침 -
일관성
용어사용 -
이미지
전송 속도를 위해 용량을 제한하고,
사회적 갈등이 있는 이미지는 사용하지 않아야 한다.
저작권에 관련된 이미지도 조심해야 한다. -
기타 설계 지침
사용자 중심, 단순성, 결과 예측 기능, 가시성, 표준화, 접근성, 명확성, 오류 발생 해결 -
스토리보드의 개념
디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서
UI 화면설계 구분은 개념 스토리보드(설계 산출물을 보는 것)와 도구(PPT, 키노트)으로 나눌수 있다. -
스트리보드 작성 절차
1단계 : 메뉴 구성도 만들기
2단계 : 스타일 확정
3단계 : 설계하기