모바일 커머스, 예약, 로컬 서비스를 위한 시스템. 따뜻한 색상과 넉넉한 곡률을 사용해 상품, 가격과 다음 구매 단계를 쉽게 확인할 수 있게 한다.
결제 흐름에서 가장 중요한 다음 행동을 강조한다.
찜이나 필터처럼 누른 상태가 유지되는 액션을 표시한다.
찜, 공유와 삭제처럼 아이콘만 사용하는 액션에 접근성 이름을 연결한다.
결제 확인이나 주소 편집 콘텐츠를 현재 화면 위에 표시한다.
주문 취소나 장바구니 삭제 전에 결과와 확인 액션을 표시한다.
모바일 화면 하단에서 상품 옵션과 결제 콘텐츠를 표시한다.
모바일 화면 하단에서도 가격과 핵심 행동을 함께 표시한다.
이름, 연락처와 주문 요청을 한 줄로 입력받는다.
배송 요청이나 예약 메모처럼 여러 줄 내용을 입력받는다.
정해진 옵션 목록에서 수량이나 지역을 고른다.
상품, 매장과 예약 항목을 검색하고 입력 내용을 지운다.
긴 지역이나 매장 목록을 검색해 값을 고른다.
기존 배송 메모를 고르거나 새 메모를 만든다.
실명을 입력해 주세요
입력 라벨, 도움말과 오류 문구를 한 입력 단위로 연결한다.
코드 입력과 적용을 하나의 짧은 결제 동작으로 묶는다.
현재 수량을 보여 주고 누르기 쉬운 버튼으로 수량을 조절한다.
약관 동의와 여러 필터의 선택 여부를 표시한다.
배송 방법처럼 하나만 고르는 선택지를 표시한다.
서로 배타적인 결제 또는 배송 옵션을 한 묶음으로 제공한다.
선물 포장이나 알림 수신처럼 즉시 적용되는 설정을 켜고 끈다.
상품 필터와 선택한 옵션을 짧은 라벨로 표시한다.
배송, 픽업처럼 같은 영역의 표시 방식을 전환한다.
배송, 교환과 예약 안내를 제목별로 접고 펼친다.
시간별 예약 가능 여부와 선택 상태를 쉽게 비교한다.
서울시 성동구 성수이로 12
배송지와 선택 여부를 한눈에 보여 주는 카드.
상품 설명, 후기와 문의 패널을 키보드와 클릭으로 전환한다.
현재 상품이나 주문까지의 상위 경로를 링크로 표시한다.
상품과 후기 목록의 이전, 다음 페이지를 이동한다.
재고 안내
결제 오류, 재고 변경과 확인할 내용을 색상과 제목으로 알린다.
신상품, 할인과 배송 상태를 짧은 라벨로 표시한다.
상품이나 주문 정보를 불러오는 동안 콘텐츠 자리를 표시한다.
짧은 결제 처리와 재고 확인이 진행 중임을 알린다.
결제, 포장과 배송의 완료 비율을 트랙과 채움으로 표시한다.
무료 배송 기준이나 적립 목표의 현재 값을 정해진 범위 안에 표시한다.
쿠폰 적용, 장바구니 저장과 결제 결과를 잠시 표시한다.
주문 접수
오늘 09:20
상품 준비
포장 중
배송 시작
주문 접수부터 배송 완료까지 현재 단계를 시간 순으로 표시한다.
이번 주말
5만원 이상 구매하면 자동 적용됩니다.
할인, 무료 배송과 시즌 행사를 제목, 설명, 미디어와 액션으로 알린다.
판매자, 배송 담당자와 후기 작성자를 이미지 또는 이니셜로 식별한다.
공동 구매나 예약에 참여한 여러 사람을 겹친 이미지로 표시한다.
서울 전 지역
내일 오전부터 배송합니다.
제목, 설명, 본문과 액션을 하나의 콘텐츠 블록으로 구성한다.
사용 가능 적립금
12,400원
+1,200원 예정
주문 건수, 적립금과 할인 금액 같은 단일 지표를 표시한다.
아이콘과 가격 정보에 짧은 보조 설명을 제공한다.
상품 검색과 주문 관리에 쓰는 단축키를 키 모양으로 표시한다.
할인 전후 가격과 판매 단위를 알아보기 쉽게 표시한다.
구매 판단에 필요한 만족도와 후기 규모를 짧게 전달한다.
상품 정보와 옵션을 배경, 테두리와 여백으로 묶는다.
가격, 설명과 액션을 일정한 세로 또는 가로 간격으로 배치한다.
상품 카드와 옵션을 같은 너비의 열에 배치한다.
상품 정보와 결제 항목 사이를 선과 선택적 라벨로 나눈다.
장바구니가 비어 있어요
상품을 둘러보고 담아 보세요.
상품이나 주문이 없는 이유와 다음 액션을 안내한다.
주문, 옵션과 가격 데이터를 시맨틱 표로 표시한다.
폭이 큰 상품과 주문 데이터를 열 너비와 스크롤 영역에 배치한다.
주문 기록과 예약 일정을 날짜별로 나눈다.
주문 번호, 결제 수단과 배송 정보를 용어와 값의 쌍으로 정렬한다.
린넨 셔츠
여름 의류
842
판매
4.8
평점
상품이나 매장의 이름과 판매 지표를 한 카드에 담는다.
제공: Ceres
배송 위치를 자동으로 갱신합니다.
결제와 배송 서비스의 연결 상태와 액션을 함께 표시한다.
라이브 판매와 방문 예약의 제목, 시간과 참여자를 표시한다.
이미지부터 가격과 구매 버튼까지 자연스럽게 살펴볼 수 있는 상품 카드.
상품 금액, 할인, 배송비와 최종 결제 금액을 차례로 보여 준다.
크림 · M
상품 이미지, 옵션, 가격, 수량과 제거 액션을 한 행에 배치한다.
일자별 주문과 매출 변화를 선으로 비교한다.
상품군별 판매량과 매출을 막대로 비교한다.
주문 상태나 상품군의 비율을 원형으로 표시한다.
작은 지표 카드 안에서 최근 판매량의 방향을 표시한다.
재고 소진율이나 목표 달성률을 반원과 큰 숫자로 표시한다.
요일과 시간대별 주문량을 색 농도로 비교한다.
결제, 준비, 배송 중 주문의 비율을 한 줄에서 비교한다.
상품의 가격, 품질, 배송과 만족도 점수를 비교한다.
여러 판매 목표의 달성률을 동심원에 배치한다.
상품 금액, 할인과 배송비가 최종 결제 금액을 만드는 과정을 표시한다.
상품이나 매장별 점수를 가는 선과 점으로 비교한다.