Hyperlane 상점 UI

Hyperlane 상점 UI은 아케이드 스타일로 그린 상점과 경제 부품 12개의 세트입니다. 색은 테두리가 아니라 본체입니다. 양 끝이 뾰족한 포화된 판입니다. 구매 행 네 상태, 선택된 분류 탭과 대기 탭, 소지금 띠, 수량 조절기, 구매 확인 띠, 그리고 셀 수 있는 재고 표시 세 종이 들어 있습니다.

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

모든 판이 긴 축을 따라 두 단계 그러데이션으로 채워져 있고, 표식은 검정 위에 밝게가 아니라 색 위에 어둡게 그려져 있습니다. 뾰족한 양 끝은 실루엣의 일부라 외곽선 효과가 아니라 확대해도 남습니다.

그 스타일 안에서 이것은 Hyperlane의 해석입니다. 짙은 바이올렛 팔레트에 노을 오렌지 강조색을 얹은 다크 인터페이스로, 동심의 이중 프레임, 192x48의 완전히 둥근 알약형 버튼, 6칸으로 나뉜 광택 있는 바, 32px 그리드의 두 가지 색 아이콘을 축으로 짜여 있습니다. 두 계열이 아트 스타일을 공유하면서도 서로 대체되지 않는 이유가 바로 이 치수에 있습니다. 스타일은 가장자리를 어떻게 그릴지 정하고, 숫자는 그 인터페이스가 무엇을 위한 것인지 정합니다.

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

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

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