본문 바로가기

I learned

[Today I Learned] 2024-03-21 목요일

#1 Learning

 ❑ 학습 요약

  • Figma 개인 과제_디자인 시스템 및 프로토타입 제작
  • 오늘의 아티클 1건

 

#2 Learned

   아티클

   ▽ IOS와 안드로이드 UI 디자인의 차이점 정리

  • 네비게이션
    • 상단 네비게이션
      - IOS : 왼쪽 상단 뒤로가기 버튼, 중앙에 현재 페이지, 오른쪽에는 편집 완료 버튼
      - 안드로이드 : 왼쪽 상단 햄버거 버튼, 현재 페이지 위치를 왼쪽 정렬, 오른쪽 검색 버튼, 즐겨찾기, 더보기 제어 옵션 버튼
    • 주요 기능 네비게이션
      - IOS : 하단 탭바 주요 기능 2~5개 배치
      - 안드로이드 : 주요기능이 전체에 분포
    • 부가 기능 네비게이션
      - IOS : 하단 오른쪽 탭에 자세히 탭을 이용하여 부가 기능 접근
      - 안드로이드 : 상단 햄버거 버튼을 눌러 부가 기능 접근
    • 뒤로 가기 네비게이션
      - IOS : 아이폰은 뒤로가기 버튼이 없기 때문에 뒤로가기 버튼을 상단 우측에 배치
      - 안드로이드 : 안드로이드는 하단에 뒤로가기 버트니 있기 때문에 상단에 행버거 메뉴 버튼을 배치하는 등 디자인 패턴을 만들 수 있다.
       ※ Apple에서는 햄버거 버튼을 권장하지 않지만 많은 사라믈이 햄버거 버튼이 익숙해져있기 때문에 IOS에서도 빈번하게 사용중
  • 알림창
    - IOS : 제목과 내용과 별도로 하단에 버튼이 있는 구성
    - 안드로이드 : 하나의 평면에 통합 구글에서 제공하는 머터리얼 디자인 가이드를 따랐기 때문
  • 타이포그래피
     - 안드로이드 : 충분한 공백을 통하여 계층 구조를 표현
     - IOS : 볼트체로 텍스트 계층구조를 표현
  • 해상도
    - IOS : 375*667
    - 안드로이드 : 360*640
  • 결론
    - OS는 주기적으로 버젼 업데이트되고 모바일 디자인 트렌드 또한 계속 변하기 때문에 디자이너는 계속 공부해야한다.

   ▽ 인사이트

  1. UXUI디자이너라면 주사용기기인 OS뿐만 아니라 다른 OS를 사용하고 트렌드를 파악하는게 중요할 것 같다.
  2. 사용자에게 익숙한 환경을 제공하기 위해서는 각 OS에 맞는 디자인 가이드를 준수해야한다는 점과 디자인 가이드보다 더 중요한 것은 전반적인 사용자 경험이 우선시 해야한다는 점을 알게됨을 통하여 디자이너는 비주얼 트렌드는 물론 경험적 트렌드에도 민감해야겠구나 생각이 들었던 아티클이였다.
  3. 사용자가 익숙한 환경을 제공하기 위해서는 각 OS에 맞는 디자인 가이드를 참고해야하는 점과 오랫동안 OS를 사용했던 사용자를 배려하기 위해서 디자인 가이드를 준수해야하는 점

 

   Figma 개인 과제_디자인 시스템 및 프로토타입 제작

   ▽ 디자인시스템

  • 배송탭에 관련된 버튼 컴포넌트 추가 제작
  • 로고타이틀 및 아이콘 추가 제작
  • 프로토타이핑 구현