일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- combine
- RxCocoa
- collectionview
- ios
- Human interface guide
- 리팩토링
- SWIFT
- map
- 스위프트
- 클린 코드
- ribs
- 애니메이션
- swift documentation
- swiftUI
- MVVM
- UITextView
- Clean Code
- clean architecture
- HIG
- Protocol
- 리펙터링
- uiscrollview
- Refactoring
- 리펙토링
- Observable
- UICollectionView
- rxswift
- tableView
- uitableview
- Xcode
- Today
- Total
목록Human interface guide (57)
김종권의 iOS 앱 개발 알아가기
ScrollView 손가락을 모으거나 두 번 택하여 확대, 축소하도록 줌 동작을 적절하게 지원 단일 문자가 화면을 채울때까지 텍스트를 확대하는 것은 의미가 없으므로 확대/축소를 활성화할때는 최대 및 최소 배율 값을 설정 ScrollView가 Paging모드 일 경우 PageControl을 표출 ScrollView안에 다른 ScrollView를 넣으면 예측할 수 없는 인터페이스가 생성되므로 지양 한 화면에 두 개의 스크롤보기를 배치해야 하는경우 한 제스처가 두 ScrollView에 영향을 미치지 않도록 다른 방향으로 스크롤되도록 설계 * 참고 https://developer.apple.com/design/human-interface-guidelines/ios/views/scroll-views/
Page PageViewController는 문서, 책, 메모장, 달력 같은 콘텐츠 페이지간에 탐색을 구현 두 가지 스타일 특정 애니메이션이 없는 스타일 (좌) 페이지 말림 전환 스타일 (우) 위 page bar를 탭하면 특정 페이지로 이동할수 있게끔 비선형 탐색 방법을 구현: 사용자들 입장에서 인접하지 않은 페이지에도 쉽게이동할수 있도록 제공 * 참고 https://developer.apple.com/design/human-interface-guidelines/ios/views/pages/
Collection 개념: 사진 set과 같이 순서가 지정된 콘텐츠 set을 관리하고 시각적인 레이아웃으로 표출 일반적으로 collection은 이미지 기반 컨텐츠를 보여주는데 이상적 collection은 상호작용과 애니메이션을 모두 지원: 탭하여 선택 / 길게 터치하여 편집 / 스와이프하여 스크롤 collection 내에서 항목이 삽입 / 삭제 / 재정렬 될때마다 애니메이션을 활성화할 수 있는 기능 Collection View 가이드 표준 행 또는 격자 레이아웃으로 충분한 경우, 웬만하면 새로운 디자인을 만들지 않고 그대로 사용 collection은 관심의 중심이 되는것이 아닌 사용자 경험을 향상시키기 위함 레이아웃 변경 시 주의사항은 사용자 입장에서 예측 가능하도록 설계 * 참고 https://dev..
Alerts 피드백 요청 제목, 메세지, textField, 하나 이상의 button 경고 제목, 메시지 경고의 빈도가 많으면 사람들이 경고를 진지하게 받아들이지 않으므로 크리티컬한 상황에서만 사용: ex) delete 세로모드 뿐만이 아닌 가로모드에서도 경고 모양을 확인하고 스크롤 없이 모든 방향에서 잘 읽을 수 있도록 텍스트를 최적화 사용자가 화면에서 읽어야하는 텍스트가 적을수록 좋으므로 짧고 설명이 포함된 여러 단어로 된 경고 제목으로 작성 제목이 완전한 문장인 경우, 대문자와 마침표 사용 제목이 불완전한 문장인 경우, 대문자는 사용하지만 마침표는 없이 작성 메시지를 제공해야하는 경우 짧고, 마침표가 있는 완전한 문장 사용 경고 텍스트와 버튼 제목이 명확하면 버튼의 기능을 설명할 필요가 없으므로, ..
Activity View 사용자 지정 활동을 나타내는 간단한 템플릿 이미지를 디자인: 마스크를 이용하여 아이콘을 만들고 흑백을 사용하고 그림자는 불포함, 70px * 70px 영역의 중앙에 배치 작업을 간결하게 설명하는 '할동'을 나타내는 제목 사용, 회사 또는 제품 이름을 불포함 시스템 제공 작업은 순서를 변경할 수 없지만 앱에 적용할 수 없는 경우 제외가 가능하므로, 적절히 기능을 제외하여 제공 Action button을 탭하면 action sheet가 나오도록 설계 * 참고 https://developer.apple.com/design/human-interface-guidelines/ios/views/activity-views/
액션 시트 현재 컨텍스트와 관련된 두 개 이상의 선택 사항을 제공하는 경고 표출 용도 iOS 같이 작은 화면에서는 밑에서 올라오고, iPad와 같은 큰화면은 pop over 형태로 표출 주의사항 컨텍스트 상에서 강한 경고를 줄때 사용하며, 약한 알림은 Pull down(iOS 14+) 메뉴 사용 사용자가 뒤로 돌아갈 수 있도록 제공 cancel 버튼을 필수로 표출 "Delete"와 같은 강한 경고를 제공하고 싶을 경우 빨간색 사용 action sheet에서 상단에 위치 Action sheet를 스크롤되지 않도록 option을 조금만 표출 * 출처 https://developer.apple.com/design/human-interface-guidelines/ios/views/action-sheets/
ToolBar 앱 화면 하단에 존재 반투명과 색조가 존재 ex) safari는 사용자들이 페이지 하단으로 스크롤하는 동안 ToolBar를 숨기고 화면 상단으로 스크롤하거나 화면 하단을 탭하면 다시 가져오는 형태필요하지 않은 경우 종종 숨겨지는 형태 TabBar와의 차이점 TabBar: 현재 컨텍스트와 연관되지 않은 화면이동 ToolBar: 현재 컨텍스트와 관련된 항목 추가, 삭제, 주석 추가, 사진 촬영과 같은 일 버튼이 3개 이하인 ToolBar에서는 텍스트를 사용 or 글리프 사용 버튼 사이의 공간은 상수값 UIBarButtonSystemItemFixedSpace 사용 버튼은 UIBarButtonItem 사용 Toolbar 버튼에 커스텀 glyph를 적용할 경우 사이즈 규약 ToolBar에는 segm..
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가 다시 표출..