[13장. 인터페이스 디자인 Part1](박성희)

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

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, 사용목적에 맞추어 선택적 사용

 

박 성희 (3 Posts)


0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×