Paczki interfejsu

Paper Kontrolki — pole wyboru, przełącznik i suwak

Osiem kontrolek interfejsu w jasny pergamin: pole wyboru, radio, przełącznik i suwak, każdy stan wł./wył. narysowany jako inny kształt. SVG i PNG.

  • ui
  • svg
  • przezroczysty png
  • pole wyboru
  • przełącznik
  • suwak
  • ustawienia
  • kontrolki
  • jasny interfejs
  • minimalistyczny
  • casual
Kontrolki ustawień na tle szachownicy — puste i zaznaczone pole wyboru, niewybrany i wybrany przycisk radiowy, przełącznik wyłączony i włączony oraz tor suwaka z gałką
podgląd 1600×749przezroczystość pokazana jako szachownica

O tej paczce

Kontrolki formularza do jasnego ekranu ustawień. Stan zaznaczony wypełnia się rdzą zamiast odwracać się na ciemno, a fajka w środku jest narysowana najciemniejszym tonem papieru — biała fajka na tym akcencie nie przechodzi kontrastu przy 22 pikselach, czyli dokładnie w rozmiarze używanym przez rząd ustawień.

Zestaw obejmuje cztery kontrolki, których ekran ustawień naprawdę potrzebuje: pole wyboru, przycisk radiowy, przełącznik i suwak z osobną gałką. Każda kontrolka ze stanami niesie oba stany we własnym pliku, na bazie 22×22 — przełącznik ma 44×22, a tor suwaka 176 px szerokości, żeby dało się go rozciąć nine-slice na dowolną długość.

Włączone i wyłączone są narysowane jako różne kształty, a nie różne kolory. Niezaznaczone pole to pusta wnęka; zaznaczone to pełna powierzchnia z wyciętą fajką. To ma znaczenie, bo ekran ustawień jest właśnie tym miejscem, gdzie gracz najczęściej ma włączony tryb dla daltonistów, shader w skali szarości albo mocno zabarwiony postprocess — a stan czytelny wyłącznie po odcieniu znika pod każdym z tych trzech.

Suwak dostajesz jako tor i gałkę, a nie jeden sprite. Animowanie suwaka z jednej części zmusza do przerysowywania go dla każdej wartości; przy dwóch częściach rozciągasz wypełnienie i przesuwasz gałkę, czyli dokładnie to, czego każdy toolkit interfejsu i tak oczekuje. Gałka ma centralne nacięcie, żeby jej obrót i pozycja pozostały czytelne w małych rozmiarach.

Wszystko dołączone jako edytowalny SVG i jako przezroczysty PNG płaski w 1x, 2x i 4x, narysowane tymi samymi sześcioma tonami ciepły papier co reszta rodziny Paper.

Pobieranie

Bezpośredni link · bez rejestracji · bez strony oczekiwania
Pobierz ZIP45 kB

Komplet — 8 źródeł SVG, eksporty PNG w 1x/2x/4x, licencja i readme

Pliki zawarte w tej paczce
PlikFormatWagaPobieranie
Komplet — 8 źródeł SVG, eksporty PNG w 1x/2x/4x, licencja i readmeZIP45 kB Pobierz →
Przełącznik (stan włączony), edytowalny SVGSVG415 B Pobierz →
Tor suwaka, edytowalny SVGSVG442 B Pobierz →

Jak używać

  1. Podmieniaj całą teksturę między plikiem włączonym i wyłączonym zamiast barwić jednego sprite'a; oba stany różnią się kształtem, więc sama barwa ich nie odtworzy.
  2. Tor suwaka przyjmuje nine-slice z końcówką 7 px po każdej stronie — rozciągnij środek, a zaokrąglone końce zostaną nietknięte przy dowolnej szerokości.
  3. W Unity podepnij oba pliki do grafik Background i Checkmark komponentu Toggle albo podmieniaj sprite'a w handlerze onValueChanged, jeśli wolisz jeden obraz.
  4. Wyśrodkuj gałkę na krawędzi wypełnienia: ma 19 px szerokości, więc przesuń ją o połowę tej wartości od prawej krawędzi wypełnienia, żeby siedziała na wartości, a nie za nią.
  5. Znacznik wyboru jest narysowany w najciemniejszym tonie palety, a nie na biało, bo biała fajka na akcencie rdzy nie przechodzi kontrastu w tym rozmiarze, a ciemna przechodzi z zapasem.

Licencja

Creative Commons Uznanie autorstwa 4.0 — Za darmo do użytku komercyjnego. Uznanie autorstwa obowiązkowe. Pełne warunki · Co to znaczy w praktyce

Linijka uznania do skopiowania
"Paper Kontrolki — pole wyboru, przełącznik i suwak" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/paper-ui-controls