새소식

본캠프/과제

[UIUX]디자인입문 W1-1

  • -

1. 앱 : 요기요 배달어플

2. 기능

1) 플로팅 버튼
    a.  타임특가 : 스크롤 상태 시 사라짐 >  닫기 버튼 누르지 않으면 계속 떠 있음
              ✅ 좋은점
                    - 메인 화면을 방해하지 않는 선에서 한정적인 추가 혜택 느낌을 줌
              ⚠️아쉬운 점
                     - 버튼을 한번 눌러봐야지만 생기는 닫기 버튼
                     - 닫기 버튼을 누르면 영구적으로 사라짐. 닫으면 혜택이 더 이상 없다는 경고창이 있는 것도 좋을 것 같음


    b. top 플로팅 버튼 : 초기 상태에 없다가 스크롤 시 나타남
              ✅ 좋은점
                    - 아이폰의 경우, 맨 상단 중앙을 선택해도 top으로 이동할 수 있지만 우측 아래 오른 엄지가 가장 잘 도달할 수 있는 위치에 top fab를 통해 대체 선택 수단을 제공함                    
                   - 스크롤을 내리지 않은 상태에선 보이지 않아 화면에 걸리적 거림을 최소화
                   - 쉐도우 및 투명도를 활용해 메인 페이지를 방해하지 않는 선에서 편의성 제공
              ⚠️아쉬운 점
                  - X

 

 

2) 하단 버튼

   a. 주문 버튼 : 메뉴 상세 페이지에서 처음 등장, 장바구니 수량 담긴 후에는 계속 플로팅 상태
                   ✅ 좋은점
                         - 메뉴를 담으면 하단에 고정되어 나타남
                        - 상세 메뉴화면에서 나와도 하단에 고정되어 있어 주문 페이지로 이동이 용이함
                        - 강렬한 bi색상으로 눈에 잘 보임
                        - 드롭쉐도우 효과로 주문 페이지와 분리된 레이어 효과
                        - 크고 넓은 선택 영역으로 쉽게 터치가 가능함
                     ⚠️아쉬운 점  
                        - X

 

3) 모달 화면
    a. 타임특가 : 스크롤 상태 시 사라짐 > 클릭시 모달 화면으로 변환
              ✅ 좋은점
                    - 회사 측에서는 유저에게 보여주고 싶은 프로모션(혜택)페이지, 유저에겐 방해가 될 수 있는 페이지를 모달을  활용해 적당한 거리 유지. 유저의 몰입감에 방해를 주지 않는 선에서 제시
                    - 타임 어택, 작고 임시적인 모달 화면으로 한정적인 기회라는 느낌을 줌
              ⚠️아쉬운 점  
                    - 메인 화면과 어울리지 않은 어두운 색상

 

    b. 주소 설정 : 입력창 클릭 or 위로 스왑 시 창 커짐, 바깥 영역 선택 혹은 아래로 스왑 시 닫힘
    c. 쿠폰 받기 : 버튼 클릭 시 모달 등장, 아래 스왑 or 닫기 버튼 or 바깥 영역 선택시 닫힘.
   d. 배달정보 자세히, 가게위치-지도보기, 문의하기- 자세히 : 버튼 클릭시 모달 등장, 아래 스왑 or 닫기 버튼 or 바깥 영역 선택시 닫힘.

              ✅ 좋은점
                    - 이전 맥락에서 벗어나지 않고, 내가 원하는 정보를 멀티태스킹으로 볼 수 있음
                    - 사용자가 해당 모달에서 손쉽고 명백하게 벗어날 수 있음(기존 학습된 모션 이용하여 닫기, 어두운 영역, 스와이프)
                    - 짧고 단순한 액션으로 능률적으로 정보를 전달 할 수 있음
              ⚠️아쉬운 점 
                    - X

 

'본캠프 > 과제' 카테고리의 다른 글

[UIUX] 스파르타 Ch.2 개인과제 - 11번가 UI 2  (0) 2024.01.02
[UIUX] UIUX디자인입문 W1-6  (1) 2023.12.27
[UIUX] UIUX디자인입문 W1-5  (1) 2023.12.26
[UIUX] UIUX디자인입문 W1-3  (1) 2023.12.26
[UIUX] UIUX디자인입문 W1-2  (1) 2023.12.26
Contents

포스팅 주소를 복사했습니다 lrdud030@gmail.com