일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Observable
- ribs
- swift documentation
- Refactoring
- UITextView
- UICollectionView
- 클린 코드
- 스위프트
- tableView
- rxswift
- swiftUI
- 애니메이션
- Human interface guide
- uiscrollview
- MVVM
- RxCocoa
- clean architecture
- collectionview
- HIG
- 리펙토링
- combine
- map
- Xcode
- 리팩토링
- Protocol
- uitableview
- Clean Code
- SWIFT
- ios
- 리펙터링
- Today
- Total
목록HIG(Human Interface Guidelines)/HIG - UI (61)
김종권의 iOS 앱 개발 알아가기
Tab bar 모든 화면 방향에서 동일한 높이를 유지 키보드 등장 시 자동으로 숨김처리 TabBar vs ToolBar TabBar: 현재 컨텍츠와 전혀 다른 섹션간의 전환 (ex 알람, 스톱워치, 타이머 탭) ToolBar: 현재 컨텐츠와 연관된 작업 (ex 항목 생성, 삭제, 사진 촬영) TabBar Guide 탭 막대에 들어가는 아이템 배치에는 독립적이고 정보 계층 구조 평평화 탐색용으로만 TabBar를 표시하고 현재 화면의 요소에 대해 작동하는 컨트롤은 ToolBar 사용 iPhone에는 탭 아이템을 3~ 5개만 사용: 너무 많으면 탭할 수 있는 영역이 줄어들고 앱의 복잡성이 증가하여 정보를 찾기가 어려워지는 현상 사용자가 앱의 다른 영역으로 이동할 때 탭 표시줄을 숨기지 말고 언제나 표출: 탭 ..
Status bar status bar를 custom하지 말고 시스템에서 제공하는 것을 그대로 사용: 사용자는 시스템 전체에서 status bar가 일관된 모습을 기대하기 때문 컨텐츠와 대비되는 것으로 status bar 색상 조정 dark status bar는 밝은 컨텐츠 에 적용 light status bar는 어두운 컨텐츠에 적용 사진, 동영상을 표출할 땐 일시적으로 status bar를 숨길것: 몰입감 상승 Status bar를 영구적으로 숨기는 것을 지양: 사용자가 Wi-Fi에 연결되어 있는지 확인하기 위해 앱을 나가야 하는 상황 발생 interaction통해 status bar를 나오게끔 하는 설정 추가 ex 사진 앱) 전체 화면 사진을 탐색할 때 한 번 탭하면 status bar가 다시 표출..
* UISearchController 구현 참고: https://ios-development.tistory.com/578 [iOS - swift] UI 컴포넌트 - UISearchController, tableView * UISearchBar HIG 먼저 참고: https://ios-development.tistory.com/505 [iOS - HIG] 31. Search Bars (검색창) Search Bars UITextField가 아닌 SearchBar 사용 TextField는 사용자들이 기대하는 표준 검색 창.. ios-development.tistory.com Search Bars UITextField가 아닌 SearchBar 사용 TextField는 사용자들이 기대하는 표준 검색 창 모양이 아..
Navigation Bar 사용자에게 현재화면이 어느 화면인지 인지 할 수 있게끔 제공 뒤로가기 버튼 현재 화면의 타이틀 문구 기타 버튼 사용자에게 컨텐츠 몰입감을 주기 위해서, 평상시에는 navigation bar를 숨긴 상태 -> 탭을 한 경우 다시 보이도록 설정 Navigation bar의 제목 label 레이아웃 탐색 표시 줄에 현재 화면의 제목을 표출: 사용자가 현재 어떤 화면을 사용하고 있는지 알리기 위함 제목을 표출하지 않아도 명확히 알 수 있는것에는 생략 ex) notes 앱 문맥을 강조하고 싶은 경우 더욱 크고 굵은 제목을 사용 큰 제목을 사용할때는, 사용자가 scroll할 경우 title이 다시 작은 사이즈로 변경 후 중앙으로 이동하게끔 설정 큰 제목을 사용할 경우, separator ..
시스템 아이콘 iOS 13+ : SF 기호 사용 iOS 12이하: UIBarButtonSystemItem, UITabBarSystemItem, UIApplicationShortcutIconType 아이콘에 대한 대체 텍스트 레이블을 제공하는것을 지향: 시각장애인을 위한 VoiceOver 용도 시스템 아이콘에서 필요로하는 것을 찾지 못한경우, 사용자 지정 아이콘(Glyphs)을 디자인하여 사용 UIBarButtonSystemIcon Tab Bar Icons Home Screen Quick Action Icons * 참고 https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/
앱 아이콘 단순함 즉시 주의를 끌고 앱을 명확하게 식별하는 단일 중앙 지점 아이콘 선택 배경을 단순하게하고 아이콘 이미지는 불투명성을 지양 홈화면에서 앱 아이콘 밑에 바로 앱 이름이 표출되므로, 아이콘 이미지에 불필요한 문구를 넣지 말것 아이콘 이미지 모서리를 정사각형으로 지정: 시스템에서 자동으로 아이콘 모서리를 둥글게 지정 앱 아이콘 속성 (지키지 않을 경우 리젝 사유 중 하나) format: .png shape: corner가 라운되어 있지 않은 정사각형 이미지 layers: 투명성이 없는 레이어 앱 아이콘 크기 홈 화면 Spotlight 검색 결과 아이콘, 설정, 알림 아이콘 * 참고 https://developer.apple.com/design/human-interface-guidelines/i..
Point 단위 iOS가 화면에 콘텐츠를 배치하는데 사용되는 좌표계는 1pixel = 1point @1x, @2x, @3x는 픽셀의 배율을 의미 예시) @2x: 1포인트에 2배의 픽셀이 담긴다는 의미 표준 해상도 디스플레이는 1:1 픽셀 밀도(= @1x) 고해상도 디스플레이는 1:2, 1:3 배율의 픽셀 밀도 (= @2x, @3x) ... 1point에 2배의 pixel이 들어가 있는 형태 예시) 100px * 100px의 표준 해상도에 @1x 이미지가 있을 때, @2x버전은 200px * 200px 장치에 따른 Scale Factor 고해상도 디자인 grid는 8*8 픽셀을 사용: 흐릿한 디테일을 최소화하는 적절한 값은 8*8 bitmap, raster artwork에는 PNG파일 사용 PNG파일은 투..
비디오 시스템 제공 비디오 플레이어는 2가지 보기모드를 제공: https://developer.apple.com/documentation/avkit/avplayerviewcontroller 전체 화면 모드 화면 맞춤 모드 전체 화면 모드 resizeAspectFill 비디오 크기가 디스플레이를 채우는 형태 비디오의 가장자리 잘림이 발생할 수 있는 가능성 존재 와이드 비디오 (2:1 ~ 2.4:1) - 화면 맞춤 모드 resizeAspect 전체 비디오가 화면에 표출 표준 비디오(4:3, 16:9 최대 2:1) 초광각 비디오 (2.4:1 이상) 비디오 플레이어 사용시 주의 사항 연결된 Bluetooth 키보드에서 Space를 누르면 미디어 재생을 재생하거나 일시 중지 4:3 16:9 2:1 21:9 비디오..