23
패턴랭귀지 사례 #2 Material deisgn guideline 2016. 2. 4. Thur. 석사과정 최주은 2016-Winter Vacation Lab-meeting

패턴랭귀지 사례 #2 material design

Embed Size (px)

Citation preview

Page 1: 패턴랭귀지 사례 #2 material design

패턴랭귀지 사례 #2 Material����������� ������������������  deisgn����������� ������������������  guideline

2016.����������� ������������������  2.����������� ������������������  4.����������� ������������������  Thur.����������� ������������������  석사과정 최주은

2016-Winter Vacation Lab-meeting

Page 2: 패턴랭귀지 사례 #2 material design

Agenda

1����������� ������������������  

2����������� ������������������  

Material Design 소개

Material Design 원칙

+ Material Properites

Page 3: 패턴랭귀지 사례 #2 material design

Material����������� ������������������  Design����������� ������������������  소개

1

Page 4: 패턴랭귀지 사례 #2 material design

Material����������� ������������������  Design����������� ������������������  배경

원래 도구의 형태를 그 로 반영한 Skeuomorphism����������� ������������������  Design에서 심플하고 직관적인 Flat����������� ������������������  design으로 변화하였고, 공간적 움직임을 더한 Material����������� ������������������  design이 등장함

• 기능적으로 불필요할지라도 실제 물건을 모방하여 디자인

• 아날로그 요소를 디지털 환경에서 모방하여 화면 구성

Skeuomorphism Flat Material

• 스큐어모피즘이 갖고 있는 사물의 입체적인 요소를 배제한 디자인

• 단순한 아이콘, 색 등을 활용해 미니멀리즘한 화면 구성

• 플랫디자인과 유사하지만 스큐어모피즘적 특성을 일부 적용한 디자인

• 그림자와 모션을 활용하여 화면 내 층위 형성하여 화면 구성

Page 5: 패턴랭귀지 사례 #2 material design

디바이스의 제약 없이 일관되고, 통합된 경험을 제공하기 위한 비주얼 랭귀지(Visual Language)

What����������� ������������������  is����������� ������������������  material����������� ������������������  Deisgn?

• Material은 가상의 “종이 뭉치”를 의미 • Material design의 원칙(principle)에 따라 Material의 배치, 높이, 변형, 움직임이 결정됨

Page 6: 패턴랭귀지 사례 #2 material design

What����������� ������������������  is����������� ������������������  material����������� ������������������  Deisgn?

Page 7: 패턴랭귀지 사례 #2 material design

Material����������� ������������������  Design����������� ������������������  원칙

2

Page 8: 패턴랭귀지 사례 #2 material design

2가지����������� ������������������  환경����������� ������������������  요인����������� ������������������  3가지����������� ������������������  원칙

2

Page 9: 패턴랭귀지 사례 #2 material design

2����������� ������������������  Environment

Material은����������� ������������������  ‘3D����������� ������������������  공간에����������� ������������������  빛이����������� ������������������  존재한다’는����������� ������������������  환경을����������� ������������������  가짐����������� ������������������  따라서, 빛의 움직임에 따라 그림자가 형성되고, 그림지는 ‘깊이’를 만들어낼 수 있음

Light and shadow3D space: all objects have x, y, and z dimensions

Page 10: 패턴랭귀지 사례 #2 material design

3����������� ������������������  Principles

1. Material is the metaphor 2. Bold, graphic, intentional 3. Motion provides meaning

Page 11: 패턴랭귀지 사례 #2 material design

3����������� ������������������  Principles

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink. Surfaces and edges of the material provide visual cues that are grounded in reality. The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

1.����������� ������������������  Material����������� ������������������  is����������� ������������������  the����������� ������������������  metaphor

종이와 잉크의 메타포를 바탕으로 ‘종이 위에 떨어지는 빛*’이 어떻게 상호작용하고 움직이는지에 중점 * 빛은 종이 표면과 만나 이음새를 드러내고, 공간을 나누며(깊이 형성) 움직임을 보여주는 핵심적인 요소

Page 12: 패턴랭귀지 사례 #2 material design

3����������� ������������������  Principles

1.����������� ������������������  Material����������� ������������������  is����������� ������������������  the����������� ������������������  metaphor요소의 기능에 따라 깊이를 제한, 동작의 우선순위를 정해주고, do / do not의 구분을 명확히 함

Page 13: 패턴랭귀지 사례 #2 material design

2.����������� ������������������  Bold,����������� ������������������  graphic,����������� ������������������  intentional

3����������� ������������������  Principles

The foundational elements of print-based design They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience. An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

섬세한 색의 사용, 맞닿아 있는 이미지, 큰 스케일의 타이포, 의도적인 여백은 몰입감있는 인터페이스를 형성함 따라서, 강조와 중요도에 따라 위와 같은 디자인 요소를 사용

Page 14: 패턴랭귀지 사례 #2 material design

2.����������� ������������������  Bold,����������� ������������������  graphic,����������� ������������������  intentional

3����������� ������������������  Principles

8

2.�Material�Design�원리

2) Bold, Graphic, intentional

“Bold design creates hierarchy, meaning and focus.”

- 강조와 중요도의 요소e color의 m도와 채도g 달i t용한다.

- colorg ‘색A으e p기 전에 ‘인지요소Ae 본다.

디자인 가이드에 따라 색, 아이콘, 이미지, 타이포, 설명까지 스타일 정의를 갖춤

Page 15: 패턴랭귀지 사례 #2 material design

3.����������� ������������������  Motion����������� ������������������  provides����������� ������������������  meaning

3����������� ������������������  Principles

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design. All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.

화면의 전환은 끊기듯 갑작스럽게 이루어지지 않으며 특정 움직임을 삽입해 화면이 바뀌는 과정을 보여줌 잉크의 퍼짐을 기본적인 속성으로, 그림자와 광원을 이용해 생동감, 입체감, 공감감 부여

Page 16: 패턴랭귀지 사례 #2 material design

3.����������� ������������������  Motion����������� ������������������  provides����������� ������������������  meaning

3����������� ������������������  Principles

Page 17: 패턴랭귀지 사례 #2 material design

Material����������� ������������������  Properties����������� ������������������  (Material Design의 소원칙)

+

Page 18: 패턴랭귀지 사례 #2 material design

3가지 원칙 속에 3소원칙들이 있음Material����������� ������������������  Properties

Physical properties Transforming material Movement of material

Page 19: 패턴랭귀지 사례 #2 material design

3가지 원칙 속에 3소원칙들이 있음Material����������� ������������������  Properties

Physical properties

• (1) Has varying x & y dimensions and a uniform thickness (1dp) • (2) Cast shadow • (3) Content is displayed on material and behave independently of

the material • (4) Input events cannot pass through material • (5) Multiple material elements cannot occupy the same point in

space simultaneously • (6) Material cannot pass through other material.

Page 20: 패턴랭귀지 사례 #2 material design

3가지 원칙 속에 3소원칙들이 있음Material����������� ������������������  Properties

Transforming material

• (1) Material can change shape • (2) Material grows and shrinks only along its plane • (3) Material nerver bend or folds • (4) Sheets of material can join together to become a single sheet

of material • (5) When split, the sheet of material will become a whole sheet

again

Page 21: 패턴랭귀지 사례 #2 material design

3가지 원칙 속에 3소원칙들이 있음Material����������� ������������������  Properties

Movement of material

• (1) Material can be spontaneously generated or destroyed anywhere in the environment

• (2) Material can move along any axis • (3) Z-axis motion is typically a result of user interaction with

material

Page 22: 패턴랭귀지 사례 #2 material design

Properties

Links

Making����������� ������������������  film

Page 23: 패턴랭귀지 사례 #2 material design

End����������� ������������������  of����������� ������������������  document

!