UXUI 디자인 스터디

IOS Vs 안드로이드 UI 차이점 찾기(더 찾아서 디벨롭하기) 본문

[UXUI] 개인학습 & 과제

IOS Vs 안드로이드 UI 차이점 찾기(더 찾아서 디벨롭하기)

^수빈^ 2024. 1. 9. 10:24
728x90

UI 에 차이를 두기 위해서는 사용하는 목적과 상황을 모두 고려해서 다르게 해야한다. ( 디자이너가 판단했을때 어떻게 디자인하는것이 사용자에게 최선의 결과를 줄 수 있는지 고민하는 과정이 필요함)

 

  • 웹 vs 앱?
  • 안드로이드 vs 아이폰?
  • 같은 아이폰이라도 홈인디케이터로 차이가 생길 수 있음
  • 이모든건 사용성을 고려해서 선택!

<인스타그램 ios와 안드로이드 비교하기>

(안드로이드 유저라..아이패드화면을 캡쳐 했다.)

 

다른점을 캡쳐해보고 비교해보니까 전반적으로는 비슷하게 보여지지만 보통 하단시트부분이 약간씩 달랐다.

하단시트 IOS는 블럭단위?로 구분하는데 안드로이드는 구분선으로 구별, 메뉴의 순서도 다름

 

안드로이드 구글 머티리얼 디자인 참고

: 상단 작업에 대한 액세스를 제공하기 위해 모달 하단 시트의 초기 수직 위치는 화면 높이의 50%로 제한됩니다.
내용이 화면 높이의 50%를 초과하는 모달 하단 시트는 전체 화면으로 끌어당기고 내부적으로 스크롤하여 나머지 항목에 액세스할 수 있습니다.

 

애플 휴먼인터페이스 가이드 참고

:

 

시트는 자동으로 큰 시트를 지원. 아이폰앱에서는 점진적으로 공개할 수 있도록 중간 시트지원하는게 좋음. 스와이프하여 시트를 닫는 기능을 지원합니다. 사람들은 닫기 버튼을 누르는 대신 수직으로 스와이프하여 시트를 닫기를 기대합니다. 사람들이 스와이프하여 시트를 닫을 때 시트에 저장되지 않은 변경 사항이 있는 경우 작업 시트를 사용하여 작업을 확인할 수 있도록 하세요. 완료 및 취소 버튼 배치 - 시트의 오른쪽 위 모서리 또는 왼쪽 위 모서리에 위치. 취소버튼은 시트의 왼쪽상단 또는 오른쪽 상단 속함

 

하단시트 IOS는 블럭단위?로 구분하는데 안드로이드는 구분선으로 구별, 메뉴의 순서도 다름

 

메뉴구성과 양이 다르긴한데 아이패드라서 그런거일수도 있어서 왜 다른지 모르겠다.

 

https://m3.material.io/components/bottom-sheets/guidelines

 

Bottom sheets – Material Design 3

Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.

m3.material.io

 

https://developer.apple.com/design/human-interface-guidelines/sheets

 

Sheets | Apple Developer Documentation

A sheet helps people perform a scoped task that’s closely related to their current context.

developer.apple.com

 

 

사실..왜 다른지는 이유를 잘 모르겠다. 같이 읽어보면서 나머지도 비교해봐야지!