[02주_2024_10_30] UI 차이점 & 프로토타입

2024년 10월 30일 ( Wednesday  )
───────────⚪──────
◄◄⠀▐▐⠀►► 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀───○ 🔊

[개인]
🩶디자인 카타 진행하기
🩶 강의듣기 및 과제
🩶 TIL 작성 및 제출하기
[팀플]
🩶 저녁 팀 스크럼(회고)
🩶 팀원들 TIL 댓글달기

---

iOS vs Android UI  디자인 차이점

디자인 엘리먼트	iOS	Android
최소 탭 크기	44*44pt	48*48dp
주요 앱 탐색 방법	하단 네비게이션	화면 상단 탭
보조 앱 탐색	하단 탐색 메뉴 '더보기' 또는 하단 UI	탐색 메뉴/ '햄버거' 사이드 메뉴
기본 버튼/ 액션	상단 탐색 메뉴/오른쪽	플로팅 액션 버튼
보조 조치	페이지UI	상단 메뉴 탐색/ 오른쪽
단일 선택 목록	선택된 항목에 체크 표시 목록	라디오 버튼 목록
다중 선택 목록	스위치/ 선택된 항목 체크 표시 목록	체크박스 또는 스위치 목록
제거 동작 진행 여부	모달 대화창을 통한 여부 확인	임시 화면 알림을 통한 여부 확인

 

프로토타입

• 프로토타입(Proto-type)의 원래 뜻은 시제품임
• 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것을 뜻함
• 구현하는 정도에 따라 낮은 단계와 높은 단계로 나눌 수 있음
  • Lo-fi(Low fidelity): 낮은 단계의 프로토타입으로, 전체적인 흐름을 빠르게 맞춰볼 수 있는 수준 와이어프레임도 낮은 단계의 프로토타입이라고 볼 수 있음
  • Hi-fi(High fidelity): 높은 단계의 프로토타입, 실제 제품과 거의 같거나 유사한 수준
• 프로토타입을 만들거나 또는 포로토 타입을 사용해 테스트하는 것을 프로토타이핑이라고 함
• 프로토타입을 만드는 이유
  
  • 실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있음
  • 팀 구성원들과 시각적인 결과물로 소통할 수 있음
  • 부족하거나 놓친 부분을 확인 가능
  • 1초가 1000ms

 

---

🫠 오늘 진행하며 어려웠던 부분!

오늘 캠프를 진행하면서 어려웠던 부분은 UI 차이점 찾아보기였다. 주로 아이폰만 쓰는 입장에서 갤럭시 UI를 본 적이 별로 없기 때문에 비교 대상을 찾기가 어렵다. 예시도 찾기 어려운데 2가지를 찾으라니 더더욱 어렵게 느껴진 과제였다 :(

 

😆새로 알게 된 사실!

• 웹 페이지를 만들때 로고를 사용 할 시 로고 색상 바꾸는 것을 지향해야함
• 컬러가 복잡해 보일 때는 주로 영역이 명확☓ / 이미지 영역에서는 컬러 많이 사용 가능
• 랜딩페이지를 만들 시 이미지 길 때 다음 영역이랑 겹치게 만들어야 유입이 더 잘 됨
• 일확적인 디자인 중요
• Android의 기기는 독립 픽셀 'dp'를 사용함! (CSS단위 "pt"과 동일)

---

💭내일 계획

 🤍 디자인 카타 진행하기

 🤍강의 복습하기

 🤍 TIL 작성 및 제출하기