Redline 상점 UI

Redline 상점 UI은 사이버펑크 스타일로 그린 상점과 경제 부품 12개의 세트입니다. 모든 프레임이 저마다 비대칭 외곽선을 갖습니다. 어느 모서리에는 홈, 어느 변에는 레일이 있습니다. 구매 행 네 상태, 선택된 분류 탭과 대기 탭, 소지금 띠, 수량 조절기, 구매 확인 띠, 그리고 셀 수 있는 재고 표시 세 종이 들어 있습니다.

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

실루엣은 확대가 아니라 조립입니다. 네 모서리와 네 변이 각각 따로 처리되어, 세트 안에 외곽선을 공유하는 프레임은 둘도 없습니다. 네온 발광은 블러 필터가 아니라 불투명도를 낮추며 겹친 선입니다. 필터는 일부 SVG 래스터라이저에서 다르게 적용되어 4x에서 헤일로를 번짐으로 바꿉니다.

그 스타일 안에서 이것은 Redline의 해석입니다. 핏빛 검정 팔레트에 경고 앰버 강조색을 얹은 다크 인터페이스로, 테두리가 하나인 프레임, 140x36의 모따기 버튼, 10칸으로 나뉜 빈 코어 바, 32px 그리드의 두 가지 색 아이콘을 축으로 짜여 있습니다. 두 계열이 아트 스타일을 공유하면서도 서로 대체되지 않는 이유가 바로 이 치수에 있습니다. 스타일은 가장자리를 어떻게 그릴지 정하고, 숫자는 그 인터페이스가 무엇을 위한 것인지 정합니다.

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

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

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