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

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

 

5. 시각적 구성

 

시각적 구성 : 타이포그래피, 그래픽스 등 개별적 디자인 요소들이 어떻게 배합되어

 

             복합적으로 구성되는지에 대한 디자인 법칙

 

 

5.1 한 제품이나 서비스 내에서의 시각적 구성

 

시각적 구성을 표현하기 위한 원칙좋은 예 와 나쁜 예

 

 

11가지 원칙

정의

좋은예 vs 나쁜예

균형성

화면안에 보여지는 시각적 무게의 분포

대칭성

화면의 가로세로 중심선을 축으로 화면 구성요소들의 대칭되는 정도

연속성

정보(개체)의 배열을 통해 시선의 움직임을 수월하게 만드는 것

리듬감

개체 사이에서의 규칙적인 변화 패턴

대비감

 

 

 

 

화면 구성요소의 형태,색상,레이아웃 등의 각 차이

비례감

하나의 개체가 가지고 있는 가로와 세로의 비율

통일감

여러 객체들의 집합이 시각적으로 하나로 느껴지는 것

 

단순미

불필요한 요소를 배제하여 전달효과를 극대화

조밀도

주어진 공간에서 보여줄 수 있는 최적의 정보의 양

규칙성

화면 구성 요소들이 가로or세로축으로 획일적으로 만드는 것(효율적 정보 처리)

안정감

화면의 중심과 표현된 요소들의 집합 중심이 일치됨

 

 

 

5.2 여러 제품이나 서비스 간의 시각적 구성

 

 

 

일관성

페이지간의 일관성을 통해 앞으로 경험할 페이지들에 대해 쉽게 적응하고

전반적인 내비게이션과 정보의 위치 예측가능

 

다양성

사용자에게 변화를 주어 지루함을 해소하고 색다른 즐거움 제공

 

 

 

 

일관성과 다양성의 조화

 

l  일관성만 높은 경우지루함

 

è  두가지의 적절한 조화 필요      

 

l  다양성만 높은 경우혼란스러움     

 

 

 

6. 인터페이스 디자인의 효과

 

 

6.1 유용성 측면의 효과 : 시각적 계층구조

 

 

시각적 계층구조 : 한 페이지 안의 구성요소의 위치와 구성 요소간의 관계를 설정할 때 사용자가 구성요소를

 

단계적으로 인지하도록 설계하는 것

 

-> 구성요소의 위치, 크기, 색상, 형태 등 복합적인 요소들의 영향을 받음

 

 

l  대비 : 시각적 디자인 요소의 색상, 형태, 크기 등의 차이가 극대화 될 수록 긴장감 유발-> 주의력 up

 

 

l  전경, 중경, 배경, 외경의 구분 :

 

전경 :사용자가 처음에 눈에 들어오는 정보. -> 중요한 정보, 양은 적게. 스크롤 없이 즉시 보는 위치

 

(깜박임, 움직입 효과) ex)기사 헤드라인

 

중경 : 전경과 배경 중간단계실제 의미있는 정보 제공 (가장 중심적인 역할) ex)실제 기사내용

 

배경 : 전경 정보를 돋보이게, 중경 역할을 돕는 측면으로 설계.

 

외경 : 화면과 연결되어 있지만 화면 내에 존재하지 않는 경우.

 

 

l  기능별 배치 : 한 화면 내의 구성요소를 기능에 따라 분배

 

       기능적 부분 / 정보적 부분

 

       고정적 정보 / 변동적 정보

 

 

l  색상과 톤을 이용한 시각적 계층구조 : 계층구조 표현에 효과적인 색의 특질 색상,

 

       : 메뉴에 따른 카테고리 분류에 사용

 

       : 제품이나 서비스의 계층적 깊이 표시에 사용

 

※ 색상,톤으로 구분 시 카테고리 규모가 너무 크면 혼란 야기.

 

 

 

6.2 사용성 측면의 효과 : 가독성

 

 

l  색상 색 명도차이가 가독성에 영향

 

 

l  글자체 대문자<소문자, 산세리프체>세리프체, 보통체>이탤릭체 가 가독성 높음

 

 

l  배치 글자 정렬 (왼끝 맞추기), 글자 사이가 글줄 사이보다 좁을 경우 가독성 높음

 

 

l  글자크기 – 9포인트보다 작을 경우 가독성 떨어짐, ansti-aliased 적용시 더욱 가독성 낮음.

 

 

 

6.3 감성 측면의 효과 : 미적 인상

 

 

미적 인상은 문화적 상황이나 환경, 연령, 가치관 등에 따라 다양하게 영향 받을 수 있음.

 

 

l  BD(bright-dark) 인상 차원 (밝음 vs 어두움)

 

밝은 인상 : 고명도, 고채도, 각지지 않은 형태

 

어두운 인상 : 저명도, 저채도, 각진 형태

 

 

 

l  CD(calm-dynamic) 인상차원 (차분함 vs. 역동적)

 

차분함 : 일관된 글자체, 안정적 배치, 깔끔한 이미지, 낮은 채도 이미지

 

역동적 : 각진 모양 큰대비, 제목 글자 굵음, 메뉴명도 낮음, 다양한 모습과 질감 이미지

 

 

 

l  SV(simple-varied) 인상차원 (간결함 vs. 다채로움)

 

간결함 : 이미지 수, 색상 수, 글꼴 종류 제한

 

다채로움 : 메뉴바와 배경색의 대비 차 큼, 다양한 색상, 다양한 도형, 요소 사용

 

 

 

l  LP(luxurious-plain) 인상차원 (고급스러움 vs. 대중적)

 

고급스러움 : 무채색 이미지, 단순한 배경 사용, 시각적 요소의 절제된 사용

 

대중적 : 파스텔톤의 다양한 색상, 다향한 형태, 친숙한 메인 메뉴와 화면분할

 

 

 

l  CF(classical-futuristic) 인상차원 (복고적 vs. 미래적)

 

복고적 : 저채도 사용, 절제된 모양, 굴곡적 질감 배경 사용

 

미래적 : 고명도 제목, 청색,보라 계통 배경, 독특한 모습, 몽환적 이미지 사용

 

 

 

l  OP (optimaistic-pessimistic) 인상차원 (희망찬 vs. 암울한)

 

희망찬 : 배경과 제목 간 색상 차 작음, 밝은 배경색

 

암울한 : 낮은 채도 사용, 메뉴와 배경 간 대비 작음, 금기시 된 색상, 이미지 사용

 

 

6.4. 감성측면의 효과 : 개성

 

 

l  강약의 차원

 

강한 개성 : 복잡한 화면, 산만한 배치, 메뉴바와 배경간의 큰 색상차, 대담한 색상

 

부드러운 개성 : 비교적 단순, 안정감 있는 배치, 친근한 면분할, 파스텔톤 색상

 

 

 

l  형식성의 차원

 

자유분방한 개성 : 일정 규칙에 구애받지 않는 면분할, 다양한 색상(형광색 등)

 

분석적인 개성 : 불필요한 요소 배제, 대조가 분명한 색상

 

 

 

l  개방성의 차원

 

  개방적 : 높은 채도 사용, 화면상 정보 넓게 분산, 친근하고 소박한 이미지 사용

 

  폐쇄적 : 시각적 무게 분포 무겁게, 상하좌우 꽉 찬 이미지, 전형적 이미지 사용

 

 

 

 

 

7. 시각적 디자인 이외의 인터페이스 디자인 요소

 

 

7.1 3D 인터페이스

 

 

사람의 두눈에 다른 이미지 투사 -> 깊이감, 입체감 제공

 

게임, 모바일 인터페이스 등 다방면에 보편화.

 

       유희적 용도로 활용 ( 3D게임, 영화) – 자기표현, 자연스러운 피드백, 공간관계에 영향을 미침

 

  기능적 목적으로 활용,(수술, 박람회 등) – 미세조작, 배경표현, 간접조작

 

 

 

7.2 청각 인터페이스

 

 

시각중심의 인터페이스 일반화 시각적 자극을 처리할 인지적 자원 고갈 ->청각 활용

 

Ex).  Mp3 플레이어, 스마트폰 서비스 사운드하운드’, 아이폰 시리 등

 

언어적 사운드 : 언어 메시지로 사용자 행위에 대한 컴퓨터 피드백을 음성으로 전달 (모국어에 한해 직관적 전달)

 

비언어적 사운드 : 청각 아이콘 , 자연계의 소리 활용

 

 

 

7.3 촉각 인터페이스

 

 

기술향상과 모바일 기기 확대로 촉각 인터페이스 관심 증대

 

l  촉각 : 1차적 피부작용접촉감각, 압각, 마찰감각,, 중량감, 충돌감각

 

       좁은 의미의 촉각 : 단순 피부와의 접촉에 의한 의미 전달

 

       넓은 의미의 햅틱 : 자율적 의지에 의한 움직임에 대한 접촉의 순수 정보

 

l  촉감 : 2차적 감성 매끄러움, 부드러움, 딱딱함, 부피감, 뻣뻣함, 탄력성, 차가움

 

       능동적 촉감 : 사용자가 목적성을 가지고 능동적으로 이용 ( ex. 폰 키 탭)

 

       수동적 촉감 : 상요자가 수동적으로 접촉. (ex. 진동 느낌)

 

       시각적 촉감 : 무의식적 행동으로 그저 보는 것을 통해 느끼는 촉감 (ex. 화면을 봄)

 

 

 

   촉각을 이용한 정서표현

 

리듬감 있는 자극 즐거움 / 대비가 큰 자극 각성 / 일정 속도 반복 통제감

 

 

 

 

 

8 인터페이스 디자인의 절차

 

 

디자인은 많은 부분이 주관적 판단과 예술적 감각에 의해 만들어짐

 

인터페이스 디자인의 절차주로 사용하는 절차 (법칙이 아님)

 

 

8.1 메타포 표현하기

 

 

디자인의 단계

 

1. 콘셉트 세우기 (메인 및 서브 메타포 내용을 참고)

 

2. 인터페이스의 성향과 분위기 결정

 

3. 적절한 색, 폰트, 애니메이션으로 표현

 

 

 

8.2 정보구조 표현하기

 

 

1. raw text 를 유사한 내용끼리 카테고리로 묶음정보의 배열과 분류를 기초자료로 화면 분할, 구성요소 배열

 

raw text : 인터페이스 디자인의 원재료

 

2. 전체적 레이아웃 시스템 디자인정보의 흐름을 중요도에 따라 분류, 배치 (for. 사용자의 시선이동 용이)

 

                                  와이어프레임 활용 (디자인 요소 없이 간단한 선, 모양 텍스트로 레이아웃 설계)

 

3. 실제 디자인 요소 가미 -> 인터페이스에 적용

 

 

 

8.3 시각적 구조 표현하기

 

 

시각적 계층구조를 명확히 나타내기 위해 중요도나 순서도 등에 따라 시각적 단서 제공

 

1. 단일 or 여러 서비스 군에서 제공하고자 하는 시각적 구성 표현

 

2. 화면을 전경, 중경, 배경으로 분리

 

3. 중경 분리 (기능적 부분 / 내용적 부분)

 

4. 대비를 이용하여 계층적 단서를 명확히 함 (색상 대비시 디스플레이 패널 상의 차이 체크)

 

 

 

8.4 다양한 모드 활용하기

 

 

문자정보, 그림이나 표 등 다양한 모드로 정보 제공

 

-> 여러 모드들이 시간 간격을 두고 표현되는 동적인 레이아웃 특성이 강조,

 

   각 모드의 특성을 살린 인터페이스 디자인 고려.

 

 

 

8.5 불필요한 요소 걸러내기

 

 

정보를 방해하는 불필요한 배경화면이나 시각적 요소 걸러내기.

 

화면 해상도 및 이미지 크기 로딩속도 고려 -> 이미지나 애니메이션을 적절히 사용. 불필요한 요소 제거

 

 

 

8.6 효과 측정 및 표준화 하기

 

 

인터페이스의 효과를 검증해 표준적인 인터페이스 디자인을 설정하는 단계.

 

가독성, 시각적 계층구조가 명확한지, 미적 인상,사이버 개성이 잘 표현되었는지 확인

 

->표준적인 인터페이스 시스템 확정

 

ex)CSS : 글자, 여백, 레이아웃 등을 일관되게 적용하기 위한 언어, 시스템의 일관성을 높이는 역할. 

 

 

박 성희 (3 Posts)


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