[Post] 1. Design UI

김민형·2022년 10월 29일
0

Post

목록 보기
2/4

Latest

2022.11.13
Figma

Onboarding Screen

초안


(+ 2022-11-01 디자인 수정)

(+ 2022-11-13 디자인 수정)

  • 중앙 화면에 앱 소개문구 및 이미지 삽입
  • 촬영버튼 (흰색) 클릭 시 다음 장으로 넘기기
  • SKIP (황색) 클릭 시 메인 화면으로 넘기기
  • 앱의 전체적인 테마를 다크 모드로 변경

Main Screen

초안


(+ 2022-11-13 디자인 수정)

  • Scaffold 구조
  • 중앙의 폴라로이드 사진부분을 클릭 시 해당 설정화면으로 넘기기
    • 커플 사진
    • 사귄 날짜
    • 커플 닉네임
  • Leading Icon 에 로고를 추가할 예정
  • 하단에 커플뱃지 기능 추가
    • 특정 조건을 달성하면 업적달성 및 뱃지획득
    • 뱃지 이름, 뱃지 설명, 획득한 날짜 표시
    • 뱃지 디자인은 미정
  • 슬라이드 메뉴 추가

EditProfile Screen

  • 각 항목을 변경하기 전 : 회색
  • 한 번이라도 수정됨 : 노란색
  • 변경이 완료된 항목 : 초록색

Chat Screen

초안


(+ 2022-11-13 디자인 수정)

  • 채팅을 자음으로 변환하여 보여주기
  • 자물쇠 해제 시 정상 메세지 출력
    • 포인트 사용
    • 혹은 간단한 커플 퀴즈를 풀면 해제
  • 디자인은 많은 수정이 필요해 보임

Game Screen

초안


(+ 2022-11-13 디자인 수정)

  • 문제와 관련된 사진이 출력될 예정
  • 답의 난이도에 따라 포인트가 다름
    • 문제 하단이나 우측에 포인트 기재
    • 2지 선다형, 4지 선다형, 주관식, 서술형에 따라 점수가 다를 예정
  • 현재까지 총 맞춘 문제, 틀린 문제 등 기록해주는 기능도 있으면 좋을 것 같음 (보류)

Days Screen

초안


(+ 2022-11-13 디자인 수정)

  • 앞으로 다가올 기념일들을 나열
  • 해시태그 커스텀 가능
  • 카드를 펼치면 기념일에 관련된 메모를 보여줌
    • 항목은 총 4 가지
    • 장소 : 해당 기념일에 방문하고자 한 (혹은 방문한) 장소 기록
    • 음식 : 해당 기념일에 먹으려고 한 (혹은 먹은) 음식 기록
    • 선물 : 해당 기념일에 선물하려고 하는 (혹은 선물한) 선물을 기록
    • 메모 (기타) : 자유롭게 메모

Sign In/Sign Up Screen



(+ 2022-11-13 디자인 수정)

  • 디자인 여러가지로 시도 중
  • 별로인 듯...
  • 카OO 디자인 참조

TODO

  • 대략적인 메인 화면 추가 디자인
    • 로그인/회원가입 (완료)
    • 설정 (구현 안할 예정)
  • 상세 화면 디자인
  • 기능 명세
    • 화면 內 컴포넌트 별로 구현되어야 할 기능 정의
    • 해당 화면 별로 필요한 데이터 정의
    • 문서화
    • 구현 가능한 기술인지 조사
  • 아키텍쳐 설계
    • Modulization
    • Clean Architecture
    • MVVM
    • KMM
  • 개발
profile
Stick To Nothing!

0개의 댓글