x
 
Михаил Шамин
19 мая 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как описывать поведение и состояние компонентов? Переходы между страницами, состояния страниц? Как это делать компактно и понятно?


Михаил!

На мой взгляд, ника­кой осо­бой «пере­дачи» быть не должно. Опыт­ный дизай­нер делает макет таким, чтобы в нём могли ори­ен­ти­ро­ваться дру­гие — дизай­неры, раз­ра­бот­чики, редак­торы. Даже если в макете бар­дак, а его уже пора пока­зать раз­ра­бот­чи­кам, пока­жите его и парал­лельно наве­дите поря­док. Раз­ра­бот­чики сами под­ска­жут, что им мешает и что нужно испра­вить в первую очередь.

Чтобы макеты в Фигме были понятны раз­ра­бот­чи­кам, реко­мен­дую делать несколько вещей.

Заранее договоритесь о формате файлов

Зара­нее рас­ска­жите раз­ра­бот­чи­кам, в какой про­грамме вы дела­ете макеты, осо­бенно если рабо­та­ете с этими раз­ра­бот­чи­ками пер­вый раз. Так они зара­нее будут знать, с чем при­дётся иметь дело.

Поддерживайте порядок в слоях и артбордах

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

Чтобы упро­стить работу раз­ра­бот­чи­кам, выде­ляйте немного вре­мени на под­дер­жа­ние порядка: груп­пи­руйте слои по смыслу, давайте им осмыс­лен­ное назва­ние, уда­ляйте скры­тые и ненуж­ные, сни­майте бло­ки­ровку со слоёв.

В наве­де­нии порядка здо­рово помо­гает пла­гин Clean Document.

Назы­вайте осмыс­ленно стра­ницы и фреймы, чтобы было проще понять логику макета и ори­ен­ти­ро­ваться в структуре.

Плохо
Хорошо

Кстати, в Фигме раз­ра­бот­чику в боль­шин­стве слу­чаев доста­точно доступа на про­смотр, но убе­ди­тесь, что нуж­ные ему эле­менты не пере­кры­ва­ются выше­сто­я­щими сло­ями: прав не хва­тит, чтобы их отодвинуть.

Не допускайте дробные размеры и отступы

Раз­меры и отступы должны быть заданы целыми чис­лами, если вам не нужны именно дроб­ные. Во‑пер­вых, это хорошо с точки зре­ния порядка и акку­рат­но­сти, а во‑вто­рых раз­ра­бот­чику не при­дётся гадать, напри­мер отступ 27,56 пик­селя — это 27 или 28?

Чтобы рабо­тать с целыми пик­се­лями, вклю­чите функ­цию Snap to Pixel Grid в меню Preferences.

А чтобы быстро изба­виться от дроб­ных зна­че­ний в раз­ме­рах и коор­ди­на­тах, нажмите на под­пись слева от них.

Правильно задавайте размеры текстовых слоёв

Если выбрать объ­ект и зажать Alt, то можно изме­рять рас­сто­я­ния до сосед­них объ­ек­тов. Для раз­ра­бот­чика это самый удоб­ный спо­соб опре­де­ле­ния отсту­пов. Чтобы отступ был оче­ви­ден, не делайте рамки тек­стов пересекающимися.

Плохо
Хорошо

В этом помо­гает опция Auto Height, кото­рая под­го­няет ниж­нюю гра­ницу тек­ста под интерлиньяж.

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

Плохо
Текст зани­мает шесть коло­нок, а сколько дол­жен зани­мать заго­ло­вок — непо­нятно
Хорошо
Текст зани­мает шесть коло­нок, заго­ло­вок — восемь.

Оставляйте заметки для разработчиков в ЦСС

Выбе­рите Master Component и вве­дите текст в поле Description, кото­рое появится в пра­вой панели. Текст отоб­ра­зится в виде ком­мен­та­рия в ЦСС, кото­рый уви­дят разработчики.

Собирайте библиотеку компонентов

Во время работы сде­лайте отдель­ный арт­борд со всеми ком­по­нен­тами, кото­рые исполь­зу­ются в макете. Для каж­дого нари­суйте мат­рицу состо­я­ний: обыч­ное, неак­тив­ное, при наве­де­нии мыши, нажа­тии, ошибке и так далее. Ука­жите цвета и шрифты, кото­рые исполь­зу­ете в макете. Такое пред­став­ле­ние наи­бо­лее нагляд­ное для разработчиков.

Показывайте анимацию вживую, а не описывайте словами

Ани­ма­цию исполь­зуют не только для пре­зен­та­ции про­екта кли­енту или демон­стра­ции в порт­фо­лио. Если хотите, чтобы эле­менты сайта или интер­фейса дви­га­лись, собе­рите ани­ми­ро­ван­ный про­то­тип и пока­жите его разработчикам.

Неслож­ную ани­ма­цию можно сде­лать прямо в Фигме, напри­мер с помо­щью пла­гина Figmotion:

Но лучше при­ме­нять спе­ци­аль­ные про­граммы, напри­мер Прин­цип. Если рабо­та­ете в Вин­до­усе, при­смот­ри­тесь к ана­логу — Про­то­пай.

Прикладывайте к макету шрифты и иконки

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

Если исполь­зу­ете шрифт с сер­виса Гугль‑фонтс, дайте раз­ра­бот­чику ссылку на него. В этом слу­чае файл шрифта не пона­до­бится, потому что на сайт его под­клю­чают через этот сервис.

Проведите презентацию

Важно про­ве­сти пре­зен­та­цию макета до окон­ча­ния работ по дизайну — воз­можно, вы при­ду­мали штуку, кото­рую сложно, долго или вообще невоз­можно реа­ли­зо­вы­вать. Так вы вовремя об этом узна­ете и у вас будет время при­ду­мать дру­гое решение.

Созво­ни­тесь с раз­ра­бот­чи­ками, вклю­чите пре­зен­та­цию экрана или рас­шарьте Фигму и про­ве­дите раз­ра­бот­чи­ков по всем маке­там. Пусть раз­ра­бот­чики зада­дут вопросы и про­ком­мен­ти­руют ваши реше­ния в дизайне.

Даль­ней­шие изме­не­ния в маке­тах уже после начала раз­ра­ботки необя­за­тельно пре­зен­то­вать вжи­вую. Их можно доне­сти в переписке.

P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

Поделиться
Отправить

Комментарии

Николай Гузев
19 мая 2020

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

Поделитесь опытом, как передать результат работы дизайнера так, чтоб разработчик понимал задачу?

Константин Мозговой
20 мая 2020

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

Данил Левинсон
26 мая 2020

В Фигме, вместо того, чтобы прикладывать к макету увеличенные под ретину растровые изображения, разработчику достаточно указать «2x» в параметрах экспорта. Но исходный размер картинки в макете должен быть соответствующего качества.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как работать в Фигме быстрее. Часть 3 1 Как работать в Фигме быстрее. Часть 2 Как работать в Фигме быстрее 6 Плагины для Фигмы. Часть 2




Недавно всплыло

3 3 Как разделать папайю 2 Как избежать «эффекта Тильды»? 3