[마인드 블루밍] 2. UI 디자인

Hwichan Ji·2021년 1월 21일
0

마인드 블루밍

목록 보기
2/4
post-thumbnail

❗ 안드로이드 앱 마인드 블루밍의 개발 과정을 포스팅한 글입니다.

1. 로딩 화면


로딩 화면에는 앱 아이콘과 앱 타이틀 로고를 배치합니다.

2. 인트로 화면


인트로 화면은 앱을 소개하는 이미지를 배치하고 우측 하단에 페이지를 표시합니다.

3. 아이디어 리스트 화면

기본선택

앱의 메인 화면이며 탭으로 다이어그램 종류를 구분합니다. 아이디어 리스트 원소를 long touch한 경우 아이디어를 선택하는 로직이 수행됩니다.

추가검색

우측 하단에 floating button을 누르면 bottom sheet가 올라와 생성할 다이어그램을 선택할 수 있게 합니다. 또 우측 상단에 검색 버튼을 누르면 앱 타이틀 부분이 검색할 수 있는 영역으로 바뀌게 됩니다.

메뉴

좌측 상단에 메뉴 버튼을 누르면 앱 아이콘과 로고, 그리고 앱 버전을 확인할 수 있습니다. 또한 내보내기, 즐겨찾기, 설정, 시리즈 보기 등의 네비게이션 버튼이 존재합니다.

4. 즐겨찾기 / 시리즈 보기 화면


즐겨찾기 혹은 시리즈에 포함된 아이디어 리스트를 볼 수 있는 화면이며 다이어그램 구분이 없습니다.

5. 내보내기 화면

내보낼 아이디어 선택내보내기

메뉴에서 내보내기를 선택하면 내보낼 아이디어를 선택하는 화면으로 넘어가며, 사진으로 내보낼지 PDF로 내보낼지를 선택한 후 해당 형식으로 내부 저장소에 저장합니다.

6. 설정 화면

설정정렬 설정테마 설정

7. 아이디어 보기 화면

8. 아이디어 편집 화면

profile
안드로이드 개발자를 꿈꾸는 사람

0개의 댓글