Paper Интерфейс крафта

Paper Интерфейс крафта — набор из 13 элементов крафта и рецептов, нарисованных в стиле плоский, где здесь нет ни контуров, ни какой-либо тени. В набор входят три состояния ячейки ингредиента, увеличенная ячейка результата, стрелка сборки и стрелка разбора, знак соединения, три шкалы качества, строка известного и неоткрытого рецепта, а также ступенчатая полоса крафта.

Крафт — единственный экран, где ячейка обязана сказать то, чего ячейка инвентаря не говорит никогда: не что в ней лежит, а хватает ли этого. В наличии, нет и есть частично — это три состояния, и набор с одним спрайтом ячейки вынуждает движок отвечать на этот вопрос текстом под каждой ячейкой.

Глубина берётся только из слоистой мягкой тени — трёх наложенных проходов, а не фильтра размытия, потому что часть SVG-растеризаторов масштабирует размытие неверно и PNG 4x выходит кляксой. Всё остальное — один сплошной цвет.

Внутри этого стиля перед вами прочтение Paper: интерфейс в режиме светлый на палитре тёплая бумага с акцентами ржаво-красный, построенный вокруг рамки с одинарной границей, полностью скруглённых кнопок-пилюль в 140x44, полос с полосами, разделённых на 10 сегментов, и контурных иконок на сетке 24px. Именно эти размеры объясняют, почему два семейства могут делить художественный стиль и при этом не быть взаимозаменяемыми: стиль решает, как рисуется край, а числа решают, для чего интерфейс нужен.

Ячейка ингредиента идёт во всех трёх состояниях, и различие несёт кромка, а не заливка: набранная ячейка замкнута, отсутствующая — пунктирная, частичная замкнута только по нижней половине. Это читается при 56 пикселях и читается без цвета. Стрелка сборки и стрелка разбора — отдельные файлы, а не одна повёрнутая стрелка, потому что обе находятся на одном экране, а зеркальная стрелка уводит затенение не на ту сторону. Ячейка результата нарисована на треть крупнее намеренно: итог рецепта — не ещё один ингредиент и не должен помещаться в ту же коробку.

Каждый спрайт поставляется как редактируемый SVG и как прозрачный PNG в 1x, 2x и 4x, так что PNG можно закинуть прямо в движок или открыть вектор и поменять цвет. Нарисовано в тех же размерах, что и остальное семейство Paper, а значит этот набор и набор панелей Paper совпадают без масштабирования любого из них. Хорошо подходит для минималистичных и мобильных интерфейсов.

Creative Commons «С указанием авторства» 4.0 — Бесплатно для коммерческого использования. Указание авторства обязательно. Полные условия · Что это значит на практике