{"id":6322,"title":"\u042d\u043a\u0441\u043f\u0435\u0440\u0442\u044b Microsoft \u2014 \u043e \u0442\u0440\u0435\u043d\u0434\u0430\u0445 \u0432 \u043e\u0431\u043b\u0430\u0447\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435","url":"\/redirect?component=advertising&id=6322&url=https:\/\/vc.ru\/promo\/292291-korotko-konferenciya-dlya-razrabotchikov-ot-vedushchih-ekspertov-microsoft&placeBit=1&hash=375c2d721b2d9852bb87139c0426790661017b1f7b417f646406981606618620","isPaidAndBannersEnabled":false}
Дизайн
Женя Иванов

Ультимейт-шаблон скриншотов для стора в Figma

У меня есть небольшая команда, с которой мы частенько участвуем в различных хакатонах. Чтобы не тратить каждый раз время на разворот скриншотов для стора, я сделал гибкий шаблон в Figma на Auto Layout и оптимизировал этот процесс.

В нём можно отредактировать цвет фона, размеры шрифтов и их цвета. Остальное тоже можно изменить, но лучше потрать время на создание крутого приложения, чем на это.

Шаблон был собран по примеру крупных приложений. Если посмотреть, то сейчас все используют большие заголовки с количеством слов от трёх до пяти и описание до десяти слов. Это всего лишь рекомендации, прислушиваться к ним или нет – решать вам.

Как его использовать

1 строка – макеты, 2 – место под экраны​, 3 – готовые скриншоты

Далее просто экспортируете в нужном вам размере (х2 или х3) и закидываете в стор. А чтобы оптимизировать скриншоты под iPhone 8 и ниже, нужно сделать три небольших шага:

  • Вставь адаптированные под восьмёрку макеты, отцентрируй их внутри заготовленной области
  • Поменять через instance маску в компоненте «Мокап телефона» с iPhone X на iPhone 8
  • Уменьшить шаблоны по высоте до 667px
​1 строка – макет, 2 – место под экран, 3 – готовый скриншот, 4 – компонент мокапа

P.S.

Заготовленный пресет скриншотов просто для примера, вы можете сменить шаблон для отдельного скриншота, если хотите.

Если у кого остались вопросы, как использовать шаблон, пишите в комментах или мне в Telegram.

Ну а если хочется ещё полезных материалов, то буду рад видеть тебя в моём Telegram-канале, там я пишу об оптимизации дизайн-процессов, системах и крутом софте


{ "author_name": "Женя Иванов", "author_type": "self", "tags": [], "comments": 36, "likes": 47, "favorites": 293, "is_advertisement": false, "subsite_label": "design", "id": 118714, "is_wide": true, "is_ugc": true, "date": "Thu, 09 Apr 2020 07:13:36 +0300", "is_special": false }
0
36 комментариев
Популярные
По порядку
Написать комментарий...

Революционный якорь

12

Комментарий удален по просьбе пользователя

Ответить
44

Многогранный образец картин для показа на ярмарке чудес заморских *читать со старославянской интонацией*

Ответить
0

Ultimate не значит многогранный на английском языке. В первую очередь это значит - самый лучший.

Ответить
0

Самый лучший - не очень ёмкое описание)) Я закладывал смысл гибкости шаблона, что его можно применять и так и так (много всего в одном), поэтому «многогранный».

Ну а так, думаю, что нет смысла так внимательно вчитываться в мой саркастический комментарий))

Ответить
6

Исчерпывающий шаблон картинок для предварительного просмотра в магазине приложений. 

Nailed it. 

Ответить
0

Интересно, сколько ещё вариантов ему накидают? :D

Ответить
2

Полный набор шаблонов иллюстраций для магазина приложений

Ответить
0

магазин, шаблон - это же заимствовано из французского и немецкого, вы что?

Ответить
0

вы же понимаете, что русский язык становится только богаче, если в нем появляются новые слова, заимствованные из других языков?

Ответить

Революционный якорь

Marakuya
1

Комментарий удален по просьбе пользователя

Ответить
2

Большое спасибо! Даже не думал, что напишу когда-нибудь подобное на VC

Ответить
1

На vc же много полезных материалов, не?)

Ответить
1

Да, но атмосфера не та, чтобы благодарить)

Ответить
0

Желчненько, да.

Ответить
2

Большое спасибо за отличный материал !!!

Ответить

Необыкновенный месяц

1

Автор сам загружал в стор превьюхи с помощью этого шаблона? Ваша идея не прошла тест на практике

Ответить
1

Да, загружал. Поэтому и говорю, что сообщество может допилить что-то для себя, мой шаблон - не панацея)

Ответить
1

Отличный материал! Спасибо!

Ответить
1

Спасибо, что поделились!

Ответить
0

Лонг рид был боринг. Ю не следует райтинг артиклс. Андерстенд? Стюпид 

Ответить
0

Я андестуд, тенкс, море такого не репит

Ответить

Революционный якорь

Женя
0

Комментарий удален по просьбе пользователя

Ответить
0

Zhosko, man... zhosko

Ответить
0

Все красиво, но не учтен такой фактор как размер скриншотов при экспорте.
По дефолту экспортируется в 375х812, в то время как по правилам, скриншоты должны быть в бОльших размеров (https://help.apple.com/app-store-connect/#/dev4e413fcb8). 
Для профессиональных фигма-дизайнеров наверное не сложно поменять размеры, а вот разработчикам, привыкшим кнопки тыкать - сложно что-то модифицировать)

Ответить

Необыкновенный месяц

whalemare
0

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

Ответить
0

В чем собственно проблема сделать картинки как надо, и раскидать пресеты с экспортом?) Это занимает 10 минут, а шаблон и статья распухли бы от этих манипуляций, поэтому я оставил их на вас. Все же я ещё раз хочу донести что можно делать, а что нельзя делать в фигме с компонентами, поэтому и даю свободу и возможность тыкаться, вместо строгого флоу: закинул, экспортнул. Как говорится: «Дай человеку рыбу - будет сыт день, дай удочку - будет сыт год»

Ответить

Необыкновенный

Женя
0

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

https://www.figma.com/file/BsEcXEEsvssXuOUtZ5Nfac/App-Store-Screenshots-iPhone-Copy-Copy-Copy?node-id=33%3A78

Ответить
0

Сделал также в итоге

Ответить

Необыкновенный

Женя
0

Там у вас даже соотношение сторон не то, требуемый размер 886x1920, у вас экспортируется 886х1918

Ответить
0

Зашёл посмотреть, а для чего тебе такое разрешение экрана?

Ответить

Необыкновенный

Женя
0

При загрузке в AppStore требуется приложить скриншоты устройства, они могут быть в строго определенной пропорции, вот тут можно почитать https://help.apple.com/app-store-connect/#/dev4e413fcb8

Минимально каждый разработчик должен предоставить 
1. Промо для 6.5 дюймовых девайсов 886 x 1920 pixels (portrait)
2. Промо для 5.5 дюймовых девайсов 1080 x 1920 pixels (portrait)
3. iPad если версия совместима с iPad 1200 x 1600 pixels (portrait)

Если просто взять экспортированные скриншоты и просто изменить их размер (дотянуть с 1918 до 1920) то эффекта не будет. 

Поэтому я воспользовался другим шаблоном (см комментарий выше)
Он довольно удобный, я уже второе приложение за месяц с ним оформляю. 

Ответить
0

Странно, так-то всё проверял по таблице, но возможно, где-то упустил. На такие несостыковки, я оставил возможность менять высоту, а у тебя как раз высота и не совпадает, пару пикселей можно было дотянуть вручную, «откалибровать»)

Ответить
0

Согласен, я там описал про экспорт в х2/х3. Если есть желание, можешь доделать проект и накидать сразу готовые экраны для айфонов 6/7/8 и 10/11 с готовыми пресетами экспорта, чтобы разрабы просто нажимали “export”. Закидывай потом в комменты ссылку на проект, заплюсуем и поднимем вверх)

Ответить
0

Уникальная отрисовка всех возможных вариантов для создания скриншотов в Figma.

Ответить
0

Сообщение удалено.

Ответить
0

Можно на «ты». Я, к сожалению, далёк от этой темы, но напиши мне в личку телеги, обсудим, может сделаем🤟

Ответить
Читать все 36 комментариев
«Оптимальный портфель» – новая стратегия автоследования от «БКС Мир инвестиций»

«БКС Мир инвестиций» запустил новую стратегию «Оптимальный портфель» на площадке Fintarget – маркетплейсе инвестиционных стратегий.

«Модульбанк» запустил сервис для анализа продаж на маркетплейсах (даже у конкурентов)

Он доступен бесплатно всем клиентам банка.

Brooke Cagle
Disney построил дом Винни-Пуха в английском лесу — его можно арендовать на ночь через Airbnb Статьи редакции

Ночь стоит от 7633 рублей.

Спальная зона Airbnb
Финт ушами от Тинькофф банка

Короче начали мне названивать операторы, типо возьмите кредитку, бла бла бла, вам предодобрена кредитная карта до 700к. Ну я их шлю, нах мне ваша кредитка, религия не позволяет. И тут один из операторов, с 10го звонка пробивает меня, а повелся я на то что можно с их кредитки без % оплатить другую кредитку. Ну я так подумал в целом 120 дней без %…

«Самокат» запустит доставку безрецептурных лекарств совместно со «Сбер Еаптекой» Статьи редакции

Благодаря партнёрству ритейлер планирует сократить время доставки с 1–2 часов до 15 минут.

Рынок CPA в России: обзор исследований AdIndex

Рынок партнерского маркетинга продолжает развиваться. Какие задачи бренды закрывают благодаря этому каналу, как предпочитают взаимодействовать с CPA и кого выбирают в качестве партнеров – в обзоре двух исследований AdIndex 2021 года.

19 этикеток вина, которые намного больше, чем просто этикетка
Бренд спортивной одежды и обуви Under Armour вновь откроет магазины в России в 2022 году — «Ъ» Статьи редакции

Магазины бренда начали закрываться в 2019 году из-за высокой конкуренции.

Осталось всего 3 дня, чтобы подать заявку в Finlanding
В Москве стартовал прием заявок на соискание премий в области охраны окружающей среды

Победителям конкурса вручат  статуэтки с символом конкурса, нагрудные знаки и удостоверения, подписанные мэром Москвы.

фото: Департамент природопользования и охраны окружающей среды города Москвы

Премия разделена на два блока и предусматривает финансовое вознаграждение. Один блок – конкурс в области охраны окружающей среды – включает 8 премий. Сумма награды составляет по 200 тысяч рублей и по 100 тысяч рублей в 4-х номинациях.

null