UI_UX Design/UI Design 개론

ch04_1_모바일 UI/UX 디자인의 종류

jsBae 2024. 10. 29. 18:02

학습목표

- 모바일 디자인 트렌드 변화와 그 특징을 알아본다.

모바일 디자인 트렌드의 변화

 

iOS가 점차 머티리얼 디자인을 받아들이는 추세
플랫 + 머티리어 디자인은 각각 장단점이 있으므로 유동적으로 사용하는 것이 바람직

스큐어모픽 디자인(Skeuomorphic Design)

  • 현실의 객체를 디지털로 구현한 사실적이고 3차원적인 디자인
    -> 익숙한 소재를 모방해 사용자의 친숙함과 편안함
  • 아날로그감성을 디지털로 재현 (종이질감, 카메란 렌즈효과)
  • iOS7이후 사라짐
  • 초창기 애플에서는 스큐어모픽 디자인을 활용해 스마트폰에 현실감을 적용(질감, 색감, 빛, 엠보싱 등)
    -> 사용자는 터치스크린 환경에 빠르고 친숙하게 적응
  • 다양한 기기에서 일관된 느낌을 주기 어려움
    -> 콘텐츠에 집중하는데 효과적이지 않음
  • 그래픽 요소의 과다 사용으로 인해 비용적인 측면에서도 효율적이지 않다.

플랫 디자인(Flat Design)

 
•입체적이고 복잡한 그래픽 요소를 배제하고 단순한 구성과 컬러를 통해 사용자가 직관적으로 인식할 수 있게 하는 2차원적인 평면 방식 디자인.
•Window8 메트로 UI는 사각형 타일
•레이아웃은 그리드를 기반으로 규칙적으로 구성
•그림자,빛,질감,심도 배제
•Bitmap -> Vector 활용 (다양한  디바이스 활용)
•RWP(Responsive web Design)발전
 

•장점 :

  • 단순한 면 분할, 대비가 높은 컬러, 입체적 요소를 배제한 아이콘, 가독성 높은 타이포그래피, 손쉬운 반응형 디자인 전환, 빠른 로딩 등 => 기능 중심

•단점 :

  • 그림자와 깊이감이 부족해 직관적으로 형태를 알아보기 어려울 수 있음.
  • 평면 적이기 때문에 어떤 요소가 중요하며 요소에 어떤 기능이 있는지 알기 어려움
  • 클릭 이 가능한 영역의 구분도 모호.
  • 지나친 단순화로 인해 중요한 기능을 놓치거나 서비스를 이해하지 못하게 될 수 있음
  • 레이아웃, 폰트, 컬러로 독창성을 표현 - but 한계성 (유사한 디자인 양상)
  • 이 후 blur, 그라디언트로 입체감과 우선 순위 표현-> 플랫2.0

머티리얼 디자인(Material Design)

 

•물질의 질감이나 광원 효과, 그림자 효과 등을 통해 디자인에 깊이감을 더한 것

•디자인보다는 단순하고 편리한 기술 개발에 주력했던 구글이 디자인 중심 으로 개편되면서 발표한 것이다

 

 

•머티리얼 디자인은 3차원의 Z축을 이용해 표면에 높낮이를 구현.

•요소 간의 우선순위를 그림자를 통해 나타내므로 정보 구조를 표현하기에 적합.

•머티리얼 디자인은 플랫 디자인의 장점인 단순함을 유지하면서 스큐어모피즘의 시각적 다양성을 추가해 사용성을 더 끌어올린다.

•초기 iOS interface : Bas ording의 관성 스크롤

  • 관성 스크롤은 현실 세계의 물리적 원리를 UI에 반영하여 사용자가 보다 직관적으로 화면을 읽고 탐색할 수 있게 했다.
  • 탄성이 느껴지는 관성 스크롤 – 스크롤이 관성이 붙었던 것처럼 점점 줄어드는 속도로 구현- UI에 현실적 요소 반영 - 모바일 환경에의 ‘읽기＇를 가능
  • 맥 OS에서 창을 최소화하면 dock으로 빨려 들어가는 지니 효과

•뉴모피즘(Neumorphism)

  • 빛과 그림자로 사실적, 미래적인 특징
  • 보다 더 촉각적이다.(행동유도성:affordance를 높인다.)
  • 시각적 위계에 저촉
  • https://dribbble.com/ 플랫폼 사용한 디자이너 Alex Plyuto가 뉴모피즘 디자인 스타일을 대중화하기 시작한 것으로 알려져 있다.
 

728x90
반응형