헬스 루틴 기록용 앱 만들기#1 - UI 초안

---

작업은 figma로 진행

색상은 대부분 flatUI에서 가져왔다

미적 감각은 개나 줘버렸기 때문에 직접 색을 선정하면 큰일난다

 

대충 했을 때 총 13개의 전환되는 화면이 존재한다

언제 다 만드냐...

홈화면

좌측 상단 - 메뉴 버튼

우측 상단 - 앱 정보, 설정버튼

중간 - 캘랜더

하단 - 오늘 날짜, 루틴(세트, 종목수, 달성볼룜/목표볼륨)

 

메뉴

제목 - 앱 이름

상단 - 간단한 사용자 정보

리스트 - 마이페이지, 운동목록, 운동추가, 루틴추가, 통계

운동 타이머

제목 - 오늘 날짜 표시

상단 - 진행도 표시

중단 - 진행중인 운동 이름, 세트수, 무게 x 횟수

중하단 - 목표 횟수 달성 버튼

하단 - 수행 횟수 입력창, 완료버튼

쉬는 시간 타이머

제목 - 오늘 날짜 표시

상단 - 진행도 표시

중단 - 이전 운동 완료 후 즉시 타이머 진행

중하단 - 쉬는 시간 조절

하단 - 다음 운동 표시 (세트사이, 종목사이 다르게)

 

마이페이지

사용자 상세정보

키/몸무게, 나이, 성별, BMI(수정불가), 운동시작일(수정불가)

 

운동목록

상단 - 검색 및 운동부위 선택(드래그로 이동 가능)

리스트 - 부위별 운동목록

운동 상세정보

제목 - 운동이름

상단 - 이미지

하단 - 운동 이름으로 유튜브 검색

운동추가

사진, 이름, 부위, 도구, 방식(무게 x 횟수 등), 운동설명(선택)

추가버튼

 

루틴 추가

루틴 이름, 총 세트수

추가 버튼

루틴 추가 및 수정

상단 - 루틴 이름

리스트 - 운동종목(세트수, 기본무게 등)

드래그로 순서조절 가능하게

 

통계

몸무게

총 볼륨 변화

운동별 볼륨 변화

...

 

정보

앱 정보

의견보내기(문의)

 

설정

테마색상

언어

단위

 

기본 쉬는시간(세트사이/종목사이)

기본 반복횟수

기본 세트수

 

 

홈화면부터 차근차근 만들어보자