Dark Mode | Apple Developer Documentation
Dark Mode is a systemwide appearance setting that uses a dark color palette to provide a comfortable viewing experience tailored for low-light environments.
developer.apple.com
Dark Mode
- 앱 업데이트 이후 디폴트 화면이 다크모드가 됐다.
- 기존에는 배경(Secondary) 컬러가 흰색이었는데 다크모드처럼 변해서 다크모드로 착각하는 사용자가 있을 것 같다.
Stream and listen to music online for free with SoundCloud
Discover and play over 320 million music tracks. Join the world’s largest online community of artists, bands, DJs, and audio creators.
soundcloud.com
- 데스크탑 화면은 아직 디폴트 모드(흰색)다.
FAB – Material Design 3
Floating action buttons (FABs) help people take primary actions. They’re used to represent the most important action on a screen, such as Create or Reply.
m3.material.io
FAB (Floating Action Button) / Outlined Button
- 재생버튼 (바로 재생할 수 있음)
- 제목과 가수의 정보 (제목/가수 정보는 텍스트가 길기 때문에 플로팅 버튼이 가로화면에 꽉 차게 디자인된 것 같다)
- 저장된(Like) 음악 여부를 알려줌
- 플로팅 버튼에 아웃라인 색을 밝게 적용해서 어두운 화면과 차이를 줬다.
Buttons | Apple Developer Documentation
A button initiates an instantaneous action.
developer.apple.com
All buttons – Material Design 3
Choose the best button for an action based on the amount of emphasis it needs. The more important an action is, the higher emphasis its button should be.
m3.material.io
Filled Button
- 재생을 멈췄을 때 앨범 커버가 블러처리되고 이전곡/재생/다음곡 버튼이 뜬다.
- 화면 위에 앱 테마에 맞는 검은색의 Filled Button을 썼다.
Material Design
The shape scale defines the style of container corners, offering a range of roundedness from square to fully circular.
m3.material.io
Search – Material Design 3
Search allows users to enter a keyword or phrase and get relevant information. It’s an alternative to other forms of navigation.
m3.material.io
Shape
- 서치 바, 앨범 커버 테두리, 재생 플로팅 액션 버튼, 장르 추천 버튼을 둥근 모양(Rounded corner)으로 만들었다.
- 앨범커버는 사각형, 새로운 트랙 알림과 프로필은 원형이라서 현재 모양이 3가지인데, 통일되거나 2가지로 줄인다면 좀 더 깔끔해 보일 것 같다.
'UXUI > 강의학습일지' 카테고리의 다른 글
| [강의학습일지] UXUI 디자인 입문 3주차 강의 (0) | 2024.06.03 |
|---|---|
| [강의학습일지] UXUI 디자인 입문 2주차 강의 (0) | 2024.06.03 |
| [강의학습일지] UXUI 디자인 입문 2주차 숙제 - 디자인 씽킹을 활용해 스카이스캐너 앱 개선 아이디어 도출 (0) | 2024.06.02 |
| [강의학습일지] UXUI 디자인 입문 1주차 강의 (0) | 2024.05.30 |
| [강의학습일지] Figma 활용법(1) 1주차 강의 (0) | 2024.05.27 |
