[온라인] iOS 와 안드로이드 앱 디자인

출처 : unsplash.com

 

1. 앱 구조와 사용성

---

1) 모바일 정보구조 설계

• Handholds : 손으로 잡을 수 있는 범위 파악
• 모바일 핸드폰 사용성에 대한 이해 필요

 

2) 모바일 IA 비교

• 공통 요소 : 상태바, 해더바

	Android	iOS
Bar	툴 바 (Tool Bar) ‣ 섹션 제목 ‣ 왼쪽의 업 버튼 ‣ 네비게이션 드로워 ‣ 메뉴 버튼 및 3닷 더보기 버튼	네비게이션 바 (Navigation Bar) ‣ 섹션 제목 ‣ 뒤로가기 버튼 ‣ 콘텐츠 컨트롤 요소 ‣ 사용자들이 이동할 수 있도록
Text	왼쪽 정렬	가운데 정렬
Primary Navigation	드로워	하단의 탭바
Gesture - 경험을 빠르고 유연하고 즐겁게 해주는 것	탭 간의 이동	뒤로가기
레이아웃 (Android : Struture / iOS : Layout)	툴바, 드로워, 플로팅 액션 버튼, 콘텐츠 구역, 검정색 네비게이션 바, 하단의 툴바	타이틀 바, 네비게이션, 콘텐츠 구역

 

 

2. 앱 컴포넌트와 인터렉션

---

	Android	iOS
애니메이션	‣ 반응형, 자연스러움 ‣ 사용자가 제스처를 완료할 때 무엇이 발생하는지에 대한 힌트 제공 ‣ 요소들 간의 계층 구조가 잡혀 있음 ‣ 배경에서 발생하는 일에 대해 방해받음 ‣ iOS에 비해 대범한 인터렉션	‣ 조심스럽게 애니메이션 사용 ‣ 사실적이고 신뢰할 수 있도록 애니메이션 사용 ‣ 주로 인지하지 못하나 배경에서 보여지는 미세한 차이
UI Controls  (Android : Components / iOS : Controls)	‣ 라디오 버튼 ‣ 체크 박스 ‣ 스위치 ‣ 플로팅 버튼 (안드로이드) ‣ 버튼 (안드로이드 : 48px, iOS : 44px) ‣ 액션 시트 / 바텀 시트     ‣ UI 아이템들 중 가장 대중적인 액션     ‣ 하단에서 보여짐
	‣ 단색, 그림자로 표현	‣ 살짝 투명하고 그림자 없음
텍스트 필드, 폼	‣ 드롭다운 ‣ 팝업 다이얼로그	‣ 새 페이지 ‣ 휠 액션 시트
Cards (예시. 인스타그램)	‣ 그림자와 간격을 통해 카드를 표현	‣ 투명도와 겹침으로 카드를 표현
Segment Content	‣ 디바이더로 구분	‣ 라인 버튼 2-4개의 탭으로 구분
Notification ‣ 사용자들의 시간이 가장 중요하다는 것 ‣ 유용한 알림이어야 하는 것	‣ 평평한 텍스트 위주의 버튼 스타일	‣ 디바이더로 여러 알림을 구분

 

 

3. 비주얼 디자인

---

1) 타이포그래피

	Android	iOS
폰트	Roboto	San Francisco
	‣ 충분한 여백을 사용함 ‣ 드라마틱한 폰트사이즈를 사용함	‣ 폰트 사이즈 보다는 폰트 굵기로 차이를 줌

 

2) DP & PX

• DP (dp) = Density independent pixels
  • 물리적인 스크린 사이즈에 기반한 추상적인 단위
• PX (px) = Pixels
• Dots per inch (DPI) = 프린트에서 사용하는 점의 밀도를 측정한 것
• Pixels per inch (PPI) = 스크린의 픽셀을 측정한 것
  • Windows 디폴트 값 : 96 PPI
  • Mac 디폴트 값 : 72 PPI
• Points : 실제 스크린 사이즈에 기반하여 인치당 1/72
• Pixels : 실제 스크린의 필셀 사이즈 

	Android	iOS
픽셀의 밀도	(DP x DPI)/160	(Points x DPI)/163

 

3) 이미지

• 이미지는 브랜딩과도 연결
• 광고가 아닌 정보력을 가지고 있고 사용자를 즐겁게 해주는 것
• 맥락에 맞는 이미지를 사용하고 이미지로 이야기를 전달할 것

4) 아이콘

	Android	iOS
아이콘 특징	두꺼운 라인	얇은 라인

 

5) 컬러

	Android	iOS
컬러 사용의 특징	‣ 밝은 컬러위주의 팔레트 ‣ 높낮음을 표현하는 그림자 ‣ 둥근 모서리 보다는 각이 있는 도형	‣ 부드러운 컬러 팔레트 ‣ 화이트 혹은 중성의 그레이를 주로 사용 ‣ 선명한 컬러의 사용이 드묾

 

 

4. 마무리

---

• 기본적인 안드로이드와 iOS의 디자인 가이드에 따라 구성요소를 조합 후 컨셉에 맞게 디자인을 수정
• 그러나 안드로이드와 iOS의 룩앤필은 동일해야 함 
• 각각의 플랫폼 사용자가 예상할만한 사용성을 제공하는 것이 중요

 

• Android Material Design : material.io/

Material Design

• iOS Human Interface Design : developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

Themes - iOS - Human Interface Guidelines - Apple Developer

 

 

강의 출처 :

Designing iOS and Android Apps

By. Renata Phillippi @ LinkedIn Learning

www.linkedin.com/learning/designing-ios-and-android-apps/