[문제해결 스터디] 상품 리스트 카드 및 제품 상세 페이지 디자인

 

0. 문제해결 스터디 2회차

(1) 디자인 규격 : 앱

(2) 디자인 내용 : 상품 리스트 카드 디자인 / 제품 상세 페이지 디자인

 

1. 문제 배경

(1) 대상 서비스

리디자인이 아니므로 대상 서비스 X

 

(2) 대상 화면 

- 상품 리스트 카드가 보여지는 페이지

- 상품 리스트에서 상품 클릭 시 전환되는 상품 상세 페이지 디자인

 

 

2. UI 디자인 시안

Number	변경 내용
1번 항목	원하는 제품을 탐색할 수 검색할 수 있는 검색창을 상단에 제공
2번 항목	랭킹 페이지이므로 각 제품의 순위를 제품 이미지 좌측 하단에 표현
3번 항목	해당 제품을 찜하고 싶을 경우 제품 우측 하단의 하트 아이콘을 클릭하게끔 유도.(하트 아이콘은 찜하기, 좋아요-라는 의미로 일반적인 사용자들의 멘탈 모델에 부합)
4번 항목	브랜드명, 상품명, 가격, 할인율을 정보의 위계에 따라 폰트 사이즈, 굵기, 색깔로 구분
5번 항목	1) 제품 상세페이지에서도 마찬가지로 랭킹을 알 수 있도록 이미지 좌측 하단에 표현 2) 또한, 좌우로 슬라이딩 할 수 있는 이미지가 있다는 것을 이미지 하단 중앙의 chip을 통해 표현
6번 항목	제품의 브랜드명을 표현하였으며 아코디언을 통해 브랜드 페이지로 이동할 수 있음을 드러냄
7번 항목	제품을 찜한 사용자가 몇 명인지를 나타내는 영역이며 해당 아이콘 클릭을 통해 찜 상태를 활성화/해제 할 수 있음
8번 항목	기존 금액, 할인율, 할인이 적용된 금액을 나타내는 영역
9번 항목	쿠폰을 받을 수 있는 버튼을 가격 우측에 배치하여 사용자의 편의성을 증대
10번 항목	결제 주요 혜택에 대해 노출하며 그 외의 혜택에 대해선 아코디언을 통해 클릭을 유도
11번 항목	제품의 상세 정보 및 리뷰 등을 확인할 수 있는 리스트 영역
12번 항목	주요 정보들에 대한 상세 내용
13번 항목	계속 하단에 고정되어 있는 하단 Tab Bar의 좌측에 찜하기 기능 제공
14번 항목	하단 Tab Bar의 우측에 구매하기 버튼 제공

 

 

 

 

 

 

 

 

참고: 무신사, 프립, 룩핀