[13장. 인터페이스 디자인 Part1](박성희)
13장 인터페이스 디자인
디지털 제품이나 서비스의 콘셉트나 정보구조, 인터랙션을 실제 사용자가 지각할 수 있는 형태로 구체화 하는 과정
시각적 인터페이스 디자인 요소
– 기본요소 : 색상, 형태, 위치, 서체, 그래픽
– 시각적 구성 : 기본요소 조합
– 그외 : 청각, 촉각 등 인간의 오감을 이용한 디자인 요소
1. 인터페이스 디자인의 중요성
표현 (representation)
– 자연, 현실 등의 외적인 대상 세계를 묘사 (정보구조 디자인)
– 정서, 인상 등의 내적 상태를 표출 (인터랙션 디자인)
– 추상적이거나 보편적인 관념을 나타냄. (콘셉트 디자인)
인터페이스 (interface)
– 사람이 접촉하는 디지털 제품이나 서비스의 입출력 장치 , 장치를 통해 표현되는 정보나 기능.
단순히 예쁜디자인 X, 제품이나 서비스 가치를 정확하게 전달하는 것이 근본과정.
2. 시각적 인터페이스 디자인 요소와 효과
대상 : 시각, 청각, 촉각, 후각, 미각 인터페이스 -> 다중모드 인터페이스 보편화
시각적 인터페이스가 주된 역할 수행 -> 그래픽 유저 인터페이스가 모든 인터페이스 포괄개념
3. 기본적 시각 디자인 요소
3.1 색상
l 색상 : 태양광선을 스펙트럼으로 분산시켜 나타나는 연속 색띠 (먼셀좌표계)
l 명도 : 밝고 어두운 정도 (Lightness/Brightness), ※ 휘도 luminance : 디스플레이트의 발광 정도
l 채도 : 색의 탁한 정도.
l 톤 : 명도와 채도를 합친 개념.
PCCS (Practical Color coordinate system) – 톤에 따른 감성적 어휘 체계화
3.2 레이아웃
l 정보의 양 : 꼭 보여줘야 할 정보만 제공. 그보다 많거나 적을 경우 사용성 감소
l 정보의 그룹핑 : 시각적 범주를 나누는 방법 – 여백, 색, 윤곽선
※ 수평 2줄이상, 수직 1줄이상 , 각도 5도 이상 – 다른 범주로 인식
l 정보의 정렬 : 사용순서에 따라 (왼쪽상단->오른쪽하단), 일반적인 순서에 따라, 중요도에 따라,
사용빈도에 따라, 일반성/특수성에 따라 정렬
l 정보간의 공간적 관계 : 수평/수직 배열, 들여쓰기
3.3 형태 (shape)
크기 : 디스플레이(하드웨어 스크린) 크기, 윈도우 크기, 대상의 크기 복합적으로 연관
방위 : 대상이 스크린상에서 가지는 각도.
형태(form) : 직선/곡선, Hard/Soft, 규칙/비규칙 .. 등 다양한 속성을 가짐.
4. 복합적 시각 디자인 요소
4.1 타이포그래피
기능적 역할 – 의미의 전달 (가독성, 정보전달력) / 형태적 역할 – 글자의 형태로 조형미 표현
l 타입페이스 : 글꼴(Font) – ex)san serif(고딕), serif(명조)
l 글자크기 : 단위 – 포인트, Q, pica, em
l 글줄사이 (행간)
l 글자사이 (자간)
4.2 그래픽 – 비문자적인 형태의 복합 디자인 요소
주목성, 보편성
l 일반적인 그래픽 디자인 요소
– 이미지 : 일러스트레이션, 다이어그램, 심벌 등 텍스트가 아닌 모든 요소
중요요소 – 디지털용량(byte), 파일포맷(gif, jpg, png)
– 다이어그램 : 복잡한 실세상의 시스템을 추상화, 상징적으로 표현하는 그래픽.
전반적인 시스템 운영 상황 표시 -> 추상화 ▲
구체적인 시스템 작동 현황 표시 -> 추상화 ▼
– 테이블과 그래프 : 정확한 연산이 필요한 경우-> 테이블
어떤 방향으로 진행할지 결정할 경우 -> 그래프
l WIMP 디자인 요소
– 윈도 : 독자적으로 조작될 수 있는 일정 부분의 시각적 디스플레이.
> 스크롤바, 타이틀바, 상태바, 툴바
> 주윈도/부윈도, 다중윈도/단일윈도
> 대화창 (모드– 타액션 불가 /비모드 – 타액션 가능)
– 메뉴 : 특정시점에 시스템이 사용자를 위해 수행할 수 있는 다양한 기능 제시.
> 정지형(ex.리본메뉴) /풀다운메뉴 /팝업메뉴(ex.인쇄메뉴)
> 선형/비선형메뉴 (ex.파이메뉴, 태그 클라우드
> 독립형/연결형메뉴
– 아이콘 : 시스템에 어떤 행동을 취할 수 있는 대상을 표현한 작은 그래픽 이미지.
시스템 표현&조작
아이콘디자인의 중요요소
1. 추상화의 정도 결정 – 추상화▲, 단순화 바람직
2. 어떤 측면을 추상화 할지 결정 – 사용자의 행동/ 조작하는 대상/ 연산자 기호
3. 그래픽만 or 그래픽+글자
버튼 : 아이콘의 특수형태
> 실행버튼(ex. Confirm/delete), 선택 버튼(ex. 라디오버튼, 체크박스)
– 포인터 : 입력장치에 의해 조정되는 화면상의 커서.
역할 : 화면상에서 입력이 이루어 질 수 있는 지점(핫스팟) 명시, 시스템의 상태 표시
4.3 애니메이션
l 무빙타이포그래피 : 영상과 음향이 결합된 동적인 범위의 타이포그래피
강조요소 : 운율성, 연속성, 크기/여백/정렬 등으로 시간개념 부여,
타이포의 동작, 위치 등으로 역동성 표현
l 캐릭터 애니메이션 : 인물, 동물, 심벌 또는 그 이미지를 디자인에 도입한 것. – 흥미유발
특징 – 독창성/오락성/친밀성, 다양성
l 키네틱, 전환애니메이션, 모션그래픽
– 키네틱(kinetic) : 화면 속에 그 자체가 움직이거나 움직이는 부분이 조립된 것을 포함하는 개념. (ex. 노키아 키네틱 스마트폰)
– 전환 애니메이션 : 화면과 화면 이동 시의 애니메이션
– 모션그래픽 : 타이포나 캐릭터를 기반하지 않는 애니메이션
è 다양한 디자인 요소를 자둥적으로 활용하는 추세
But! 무분별한 남용 X, 사용목적에 맞추어 선택적 사용
