본문 바로가기

Article Study

[Article Insights] iOS와 안드로이드 UI 디자인의 차이점

#1 오늘의 아티클

iOS와 안드로이드 UI 디자인의 차이점

https://pixso.net/kr/reviews/the-ui-differences-between-ios-and-android/

 

iOS와 안드로이드 UI 디자인의 차이점 [정리]

iOS 혹은 안드로이드 UI 디자인 패턴에 익숙한 사용자가 위화감 없이 자연스럽게 이용할 수 있기 때문입니다. iOS 아이폰과 안드로이드 폰 UI 디자인 차이점을 알려드리겠습니다.

pixso.net

 

#2 아티클 정보 요약

❑ 네비게이션

1. 네비게이션

  • 상단 네비게이션
    - IOS : 왼쪽 상단 뒤로가기 버튼, 중앙에 현재 페이지, 오른쪽에는 편집 완료 버튼
    - 안드로이드 : 왼쪽 상단 햄버거 버튼, 현재 페이지 위치를 왼쪽 정렬, 오른쪽 검색 버튼, 즐겨찾기, 더보기 제어 옵션 버튼 등등
  • 주요 기능 네비게이션
    - IOS : 하단 탭바 주요 기능 2~5개 배치
    - 안드로이드 : 주요기능이 전체에 분포
  • 부가 기능 네비게이션
    - IOS : 하단 오른쪽 탭에 자세히 탭을 이용하여 부가 기능 접근
    - 안드로이드 : 상단 햄버거 버튼을 눌러 부가 기능 접근
  • 뒤로 가기 네비게이션
    - IOS : 아이폰은 뒤로가기 버튼이 없기 때문에 뒤로가기 버튼을 상단 우측에 배치
    - 안드로이드 : 안드로이드는 하단에 뒤로가기 버트니 있기 때문에 상단에 행버거 메뉴 버튼을 배치하는 등 디자인 패턴을 만들 수 있다.
     ※ Apple에서는 햄버거 버튼을 권장하지 않지만 많은 사라믈이 햄버거 버튼이 익숙해져있기 때문에 IOS에서도 빈번하게 사용중

2. 알림창

 - IOS : 제목과 내용과 별도로 하단에 버튼이 있는 구성
 - 안드로이드 : 하나의 평면에 통합 구글에서 제공하는 머터리얼 디자인 가이드를 따랐기 때문

 

3. 타이포그래피

 - IOS : 볼트체로 텍스트 계층구조를 표현

 - 안드로이드 : 충분한 공백을 통하여 계층 구조를 표현

 

4. 해상도

 - IOS : 375*667

 - 안드로이드 : 360*640

 

4. 결론

 - OS는 주기적으로 버젼 업데이트되고 모바일 디자인 트렌드 또한 계속 변하기 때문에 디자이너는 계속 공부해야한다.

 

#3 인사이트

  • UXUI디자이너라면 주사용기기인 OS뿐만 아니라 다른 OS를 사용하고 트렌드를 파악하는게 중요할 것 같다.
  • 사용자에게 익숙한 환경을 제공하기 위해서는 각 OS에 맞는 디자인 가이드를 준수해야한다는 점과 디자인 가이드보다 더 중요한 것은 전반적인 사용자 경험이 우선시 해야한다는 점을 알게됨을 통하여 디자이너는 비주얼 트렌드는 물론 경험적 트렌드에도 민감해야겠구나 생각이 들었던 아티클이였다.
  • 사용자가 익숙한 환경을 제공하기 위해서는 각 OS에 맞는 디자인 가이드를 참고해야하는 점과 오랫동안 OS를 사용했던 사용자를 배려하기 위해서 디자인 가이드를 준수해야하는 점
💡 <알게된 점>
      - 각 OS 별로 디자인이 조금씩 차이가 나는 이유는 기기 특성과 함께 디자인이 개선되어 왔기
      - 디자인 가이드를 준수하되 통합적인 사용자 경험을 우선시해서 디자인 설계

💡 <좋았던 점>
      - 주요 기능을 IOS와 안드로이드를 비교하며 참고자료(시각자료)를 통헤 쉽게 비교 분석이 되어 좋았다.
      - IOS와 안드로이드의 UI 차이점을 기기의 특성과 함께 설명함으로써 왜 이런 디자인을 따랐는지 쉽게 이해가 되어서 좋았다.