Paper 상점 UI

Paper 상점 UI은 플랫 스타일로 그린 상점과 경제 부품 12개의 세트입니다. 외곽선도 음영도 전혀 없습니다. 구매 행 네 상태, 선택된 분류 탭과 대기 탭, 소지금 띠, 수량 조절기, 구매 확인 띠, 그리고 셀 수 있는 재고 표시 세 종이 들어 있습니다.

상점 화면에는 소지품 화면에 결코 없는 일이 하나 있습니다. 버튼을 누르기 전에 무엇을 살 수 없는지 알려 주는 일입니다. 무료 세트 대부분은 가격을 붉게 만들어 해결하는데, 그 붉은색을 읽지 못하는 사람에게는 통하지 않고 흑백 스크린샷에서도 통하지 않습니다. 게다가 인터페이스의 나머지가 이미 쓰고 있는 체력 색과 부딪힙니다.

깊이는 겹친 소프트 섀도에서만 나옵니다. 블러 필터가 아니라 세 번의 겹침입니다. 일부 SVG 래스터라이저가 블러의 확대를 잘못 처리해 4x PNG가 번짐으로 나오기 때문입니다. 나머지는 전부 단일한 채움 색입니다.

그 스타일 안에서 이것은 Paper의 해석입니다. 따뜻한 종이색 팔레트에 녹슨 빨강 강조색을 얹은 라이트 인터페이스로, 테두리가 하나인 프레임, 140x44의 완전히 둥근 알약형 버튼, 10칸으로 나뉜 띠 형태의 바, 24px 그리드의 선화 아이콘을 축으로 짜여 있습니다. 두 계열이 아트 스타일을 공유하면서도 서로 대체되지 않는 이유가 바로 이 치수에 있습니다. 스타일은 가장자리를 어떻게 그릴지 정하고, 숫자는 그 인터페이스가 무엇을 위한 것인지 정합니다.

네 가지 행 상태는 색이 아니라 구조로 갈립니다. 살 수 있는 행은 왼쪽 가장자리에 실선 띠를, 살 수 없는 행은 파선 띠와 가격 칸을 가로지르는 막대를 답니다. 이미 가진 행은 가격 칸을 닫고 오른쪽 위 모서리에 표시를 남깁니다. 덕분에 이 상태는 색 변경에도, 색각 필터에도, 채도를 뺀 스크린샷에도 살아남습니다. 재고 표시가 셀 수 있는 것도 같은 이유입니다. 점 다섯, 점 하나, 점 없음이 단어 하나 색 하나 없이 충분·부족·품절로 읽힙니다.

모든 스프라이트는 편집 가능한 SVG와 1x, 2x, 4x 투명 PNG로 제공됩니다. PNG를 엔진에 그대로 넣어도 되고, 벡터를 열어 색을 바꿔도 됩니다. Paper 계열의 나머지와 같은 치수로 그렸기 때문에, 이 키트와 Paper 패널 키트는 어느 쪽도 크기를 바꾸지 않고 맞물립니다. 미니멀한 인터페이스와 모바일에 잘 어울립니다.

크리에이티브 커먼즈 저작자표시 4.0 — 상업적 이용도 무료. 출처 표기가 필요합니다. 전문 보기 · 실제로 무슨 뜻인지