[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 2주차(0705)

2주차 - 7/5

---

7/5 Material Design

 

안드로이드 가이드

• 앱바: 브랜딩, 탐색, 컴색 및 작업에 사용되는 도구들이 위치
• 탭바: 안드로이드의 탭바는 화면 상단에 위치
• 바텀네비케이션바: 화면 하단에 고정식으로 위치
• 네비게이션 드로어: 햄버거 메뉴를 이용한 네비게이션 드로어
• 시스템 글꼴
  • 한국어는 영문보다 1px 더 크게 사용한다
• 아이콘 터치 사이즈
  • 아이콘은 24*24dp, 둘러싸는 패딩은 48 * 48dp

 

디자인시 주의 사항

• 긍정적인 액션버튼은 우측 배치
• 시각적 단서 제공 - 마이리얼트립 카테고리
• 버튼의 위계 - 한 화면 내에 버튼이 2개 이상이라면 시각적 위계를 준다. 어떤 버튼을 먼저 누르게 할 것인가?
• 사용자에게 한 화면에서 한 가지 행동만 유도
• 사용자가 콘텐츠에 집중하도록 유도
• 콘텐츠가 많을 경우 시각적인 계층구조를 명확하게 하고 관련된 정보를 그루핑한다

 

디자인 심리 법칙

• 피츠의 법칙
  • 대상의 크기와 위치에 따라 획득하는데 걸리는 시간이 달라진다
  • https://story.pxd.co.kr/578
• 제이콥의 법칙
  • 익숙해진 기존의 경험을 바탕으로 기대치를 형성하는 경향을 보인다
  • 사용자가 새로운 것을 배우는데 어려움을 느끼므로 일반적인 디자인 관습을 따를 것을 권장한다
• 힉의 법칙
  • 사용자에게 주어진 선택지의 숫자에 따라 사용자가 결정하는데 소요되는 시간이 결정된다는 법칙이다
  • 주어진 선택지가 너무 많거나 입력이 많을 경우 시간이 서서히 올라가는 것이 아니라 배로 올라간다
• 밀러의 법칙
  • 인지 심리학자 조지 밀러의 법칙으로 사람의 단기 기억의 용량이 7개의 정보 단위로 제한되어 있다

 

실습

• 디스코드 홈화면 제작
  • 유저가 전체를 파악하고, 탐색하기 수월함
• 시각적 위계 유의하기
• 디자인 일관성 고려하기
• 피그마에서 그룹화와 프레임화는 다르다

 

토스 블로그

• 그래픽 디자인 AI 형성기
  • 그래픽 톤을 읽을 수 있는 눈이 중요하다는 생각이 들었다
• https://toss.tech/article/ai-graphic-generator-1

토스의 AI 그래픽 생성기, 토스트를 소개합니다 #1