Как сделать лейаут в гд

Добавил пользователь Morpheus
Обновлено: 04.10.2024

Все О Лайаутах! | Geometry Dash Уровень: Rock Thing Layout by TwistGMD ID: 57980587 Итак, после такого перерыва я .

Первое подобное видео в таком формате, если понравилось, то оцени его :) ☆Nickname in GD: Exen ☆Sponsorship: .

Happy New Year Everyone )/ It's my pleasure to tell you that Pop Culture is back! But just forget that it was once a SEQUEL or a .

ID: 69283265 Ай Рядовой Моргенштерн тут, сука Слава, что ты сделал? Ай, готовьте пушки, ей, ей, е-е-е Ей, ей Pull up in .

Можно ли купить уровень и получить оценку на нём? Как оказалось, это более чем реально. Второй канал .

EPIC 2.2 BOSSFIGHT LAYOUT: BADLAND FULL VERSION! [2.2 / SubZero] I really suffered while i was beating because it had .

Мой самый первый гайд :3 Старался отразить для начинающих игроков самыйе важные аспекты в строительстве ГД и дал .

noice Basics in Behavior by KitsuneEdu & More ID: 66614033 Song: Basics in Behavior - The Living Tombstone Thx For .

geometry dash dash geometry геометри геометри даш гд gd булкин спидран прохождение дэш speedrun булка bulkin топ .

Checky is a layout level that plays heavily on the sync with the music that was chosen, starting off slowly and building up along .

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

I tried to replicate the layout for The Rock House by Pla and more. I think I did pretty well, I'm just annoyed that the ball proportions .

Чем больше вы познакомитесь с сочетаниями клавиш auto-layout, тем быстрее их использование войдет в привычку.

Попробуйте следующие сочетания клавиш, чтобы ускорить рабочий процесс:

2. Скопируйте свойства и стиль Auto-Layout

Сэкономьте время, скопировав стиль любого контейнера auto-layout с помощью сочетания клавиш OPTION + CMD / CTRL + C и вставив его с помощью OPTION + CMD / CTRL + V.

3. С легкостью изменяйте порядок объектов

Измените порядок объектов внутри auto-layout с помощью клавиш со скобками или клавиш со стрелками.

] = изменить порядок вправо или вниз
[= изменить порядок влево или вверх
Или используйте клавиши со стрелками

4. Создайте слайдер Auto-Layout

6. Выровняйте элементы за пределами auto-layout, используя фреймы с нулевой высотой

У Роджи Кинга есть руководство на YouTube, где он объясняет этот хитрый трюк. Для этого создайте фрейм с нулевой высотой, поместите на него объекты, а затем установите высоту 0,001 для округления до 0.

Этот совет позволяет объектам красиво располагаться за пределами фрейма auto-layout, что обычно невозможно, поскольку Figma не допускает отрицательных значений.

7. С легкостью перемещайтесь по компонентам фреймов auto-layout

Когда у вас есть множество фреймов auto-layouts, перемещение по дочерним элементам может стать запутанным. Но не бойтесь, есть несколько сочетаний клавиш, которые помогут вам легко перемещаться по дочерним элементам фрейма.

ENTER / RETURN = перейти на фрейм
SHIFT + ENTER / RETURN= покинуть фрейм
TAB = перейти от одного дочернего элемента к другому после перехода на фрейм auto-layout
ESC= остановить переход / покинуть фрейм

8. Избегайте вложенных фреймов auto-layout

Удерживайте пробел, чтобы не размещать объекты внутри автоматического auto-layout.

9. Центрируйте элементы с помощью заголовка

Если у нашего контейнера auto-layout есть заголовок, и нам нужно, чтобы объект оставался в центре, есть небольшая хитрость, чтобы сделать это.

Вот что нужно сделать, чтобы этого добиться:

10. Минимальная ширина / высота фрейма

Используйте тот же трюк с нулевой высотой

В совете 6 Роджи Кинг показал нам, что мы можем создать контейнер auto-layout с минимальной шириной или высотой.

11. Бонус! Посмотрите мое расширенное руководство по Auto-Layout

Посмотрите мое руководство, чтобы узнать, как создавать полностью гибкие и адаптивные интерфейсы с помощью функции auto-layout.

Руководство на Youtube:

IYKYK

Лейаут — макет, главная функция которого определить расположение всех функциональных элементов сайта на странице. То есть это визуальный скелет страницы, он не содержит никаких декоративных элементов.

На этапе лейаута решаются задачи: главных и второстепенных блоков, логика и структура, удобство пользования.

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

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

Не нужно собирать компонент ячейки в каждом проекте заново.
UIkit получается компактным, но при этом легко кастомизируемым.
Ускоряет создание диза… Ой ладно, это просто круто!

Вот такие штуки можно делать после этого гайда. Если хочешь так же, открывай фигму, сейчас научу :)

Это и есть наша ячейка, разложенная по частям:

Какие-то форматы картинок слева.
Текст по центру.
Различные контролы справа.

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

Ссылка на этот Figma-проект есть в Telegram-канале. Там я всё аккуратно разложил по полочкам и добавил подсказки, а то когда я пришёл к такой ячейке в первый раз, было примерно так :D

Рисуем Frame и включаем вертикальный Auto layout с фиксированной шириной, которая тебе нужна в дизайне, — это контейнер ячейки, в котором кроме слоя с контентом и Padding’ов больше ничего не будет.

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

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

Это детальки, которые я использовал для демо, у тебя их может быть гораздо больше (помнишь скриншот моей первой ячейки? :). Естественно заведи все эти детали в компоненты. У текстового компонента обязательно включи лэйаут c Fixed width, потом нам это понадобится.

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

С левой частью всё легко. Просто группируем и включаем лейаут.

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

Сделать такие контейнеры не сложно, если ты включил Fixed width для текстовой детали (text root component) несколько шагов назад, просто растяни его на нужную ширину (вычти из ширины ячейки ширину левой и правой части ячейки).

Когда делаешь правую часть, закинь в неё все контролы, что тебе нужны, отключи Clip content у компонента и поставь фиксированную ширину, размером самой часто используемой детали, например иконки.

Это нужно, чтобы ячейка не разъезжалась при переключении деталей внутри правой части, если они разной длины. Обсуди этот момент с разработчиками, чтобы предотвратить различные вопросы :)

Теперь предыдущие компоненты с деталями закидываем в дополнительные контейнеры, и включаем лейауты. Для левой части — горизонтальный Auto height (в продвинутом mode закидывай туда систему отступов), для центральной — вертикальный Auto width, а для правой части — горизонтальный Fixed height, размер которой поставь по высоте средней левой части, в моём случае — 48 pt.

Правую часть делаем так специально, чтобы ваши контролы не ехали вслед за растягивающимся текстом. В таком способе есть мини-костыль, в маленькой ячейке нужно будет переключить правую часть с Fixed на Auto height либо сделать несколько контейнеров, для маленькой ячейки и для ячеек размером побольше, но в 95% случаев моего способа будет достаточно, чтобы покрыть все кейсы.

Теперь закидываем все три слоя Left, Center и Right part в наш компонент Content — и наша ячейка готова…

Это базовый компонент кита, который покрывает большинство кейсов. Если мне понадобится что-то добавить, я добавлю, а если нужно сделать редизайн общего стиля, то кастомизирую детальки компонента — и вуаля.

По сути, я скруглил края аватарки в левой части, добавил кнопку (тоже на лэйаутах) в правую часть, и ячейка уже подходит под другое приложение.

Если у вас платная версия Figma, то всё легче некуда, ну а если бесплатная, то придётся потратить минуты две… О нет…

Копируешь инстанс cell component в новый проект, он должен стать детачнутым.
Идёшь в самый низкоуровневый слой и делаешь из него компонент.
Формируешь компонент из слоя уровнем выше, что заставит нижнеуровневый компонент выпрыгнуть рядом, оставив внутри свой инстанс.
Profit!

Спасибо, что дочитал. Если интересно, в следующей статье, я разберу не менее важную тему — неправильного использования стилей в дизайн-системе и как настроить их супер гибко, bye :)

Из-за этих авто-лейаутов я пришёл к наплевательству на сетку

Квадратные сетки и не нужны)

давно от них отказался, как и от колонок. Перешел сначала на 8рх линейки горизонтальные, а потом на 4рх линейки.

Счас думаю да пошло оно всё нахуй

Пользуюсь готовой системой отступов (2 4 8 12 16 18 24 34 48 68 96 134 188) - это кайф. Ну, в новом проекте понадобилось ещё 6px. Такие системы сразу несколько проблем решают:
1. Не надо подгонять интерлиньяж под сетку
2. Не надо думать какой отступ выбирать, когда шаг 8px.

А что именно за отступы, хде? чёт не понял

Это готовый список отступов, которые я использую в проектах сейчас. 2px, 4px и т.д

Вот представь что у тебя теперь есть вот этот список с отступами и никакие другие тебе использовать нельзя)

P.S Идея не моя, но мне максимально удобно.

Тэк-с. Всё еще до конца непонятно. Как заготовки из квадратиков избавляют от необходимости подгонять интерлиньяж под сетку?

Нет необходимости подгонять, потому что нет сетки) Вот просто нет клеточной сетки и всё) Ты её не используешь. А пользуешься исключительно готовыми отступами и делаешь из них красивый макет.

Выше мой коммент затрагивает эти квадратики)

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

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

правило внешнего и внутреннего.
Уведу дискуссию в это русло.

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

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

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

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

Ты усложняешь всё)

Разрабу не надо знать ни про какие системы отступов. Он просто верстает макет, а макет (его элементы) имеют заданные отступы по системе.

Кстати, одно дело делать отступы в шотике на дрибле, а другое в большом проекте. Как будешь соблюдать отступы тогда? На каждой странице новые придумывать? Или запоминать те, которые ты придумал на первом странице?)

Эту проблему решает система. Тебе не надо придумывать и выбирать отступы.

Система отступов не всегда работает без осечек. Я бы даже сказал, что она настолько часто даёт осечку, что руки чешутся ее выкинуть. Например, в одном окружении заданные отступы работают хорошо, а в другом - не работают. Проблема именно в окружении, оно слишком сильно влияет на вроде бы уже отлаженные и отдизайненные объекты. И приходится выковыривать из мозгов нативное чувство прекрасного, чтобы собрать экран так, как будет удобно юзеру, а не дизайнеру или фронту. Да, на гомогенизации экранов можно ставить крест. Зато на выходе получаем реально удобный инструмент, а не шотик в дрибл)

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

Эх, наглядные примеры бы.

Системы-то можно разные делать. Под стандартную верстку, под воздушную и т.д.

Напиши свой набор.

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

Ааа, ну эт да)) Я не так давно перешёл на продвинутую систему отступов, всё благодаря тем же лейаутам, вроде как лечится нормально. Попробуй паддинги и марджины сделать компонентами и раскидывать во все компоненты

Попробуй паддинги и марджины сделать компонентами и раскидывать во все компоненты

Да в пизду) Надоела эта мышинная возня. Решил, что новые проекты буду делать полностью бессистемно, полагаясь исключительно на глазомер.

Пхах, ну если ты дизайнер различных промо страниц и прочего рекламного, то я всеми руками и ногами за, но не трогай святые интерфейсы))

Именно их я и собираюсь трогать. Не бойся, больно не будет

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

Ну мы с фронтом сейчас определили, что вот так ему будет удобно. То есть левый экран у меня полностью на лэйаутах и засунут в компонент, чтобы его можно было положить рядом и раскрыть сами отступы. Разраб просто пробегает по ним глазами и на раз-два вставляет условный padding-blue

Хэй, я в итоге пришёл к твоим квадратикам.

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

Очень удобным оказалось построить вообще ВСЁ на автолейаутах. И вот здесь я споткнулся об спейсинг в АЛ - он равен между любыми объектами. Выхода два:

1) загонять объекты в компоненты, внутри которых отступаешь от краёв как тебе нужно,

2) сделать спейсинг в АЛ равным нулю и отбивать объекты прозрачными плашками (или непрозрачными, но цветом фона, короч чтоб их не было видно).

Выбрал второй путь.

Всего спустя неделю я поймал себя на том, что использую плашки размером в 4, 8, 12, 16, 20, 24, 28 и т.п.

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

Правда показывать я их собираюсь не цветом, а нумерацией или литерацией, типа так:

A = 4 px
B = 8 px
и т.п.

По-любому споткнусь ещё обо что-нибудь, так что было бы прикольно если б ты разродился статьёй про этот плашечно-автолейаутный подход :)

Привет. Круто, что у тебя получается то, что ты описал. Тема системы отступов одна из самых сложных, потому что она затрагивает сразу множество элементов и легко ошибиться, поэтому её я оставил напоследок, после разбора всех хардкорных компонентов. Но если есть спрос, возможно я начну готовить эту тему пораньше, следи за обновлениями в телеге)

Спрос есть - на спектруме давно уже видел кривотолки про отступы в АЛ, люди сходятся во мнении что нужны вот эти вот плашечки искусственные :)

Прямо щас переделываю весь проект, ну то есть убираю автоматические отступы и внедряю компонентные.

Пока что столкнулся со следующим: если АЛ состоит из абсолютно однородных объектов, то внедрять туда компонентные отступы бессмысленно. Например, обычный список гиперссылок - вертикальный или горизонтальный. Или галерея карточек.

А вот если АЛ состоит из объектов различной природы - иконки, тексты, кнопки - вот там да, компонентные отступы рулят.

Еще сходу напоролся на оформление самих компонентов для отступов. Решил не делать нумерацию, потому что легко спутать номер и размер самого компонента (например из имени indent-04 можно ошибочно сделать вывод, что он равен 4 рх, а он просто четвертый по счёту)

Поэтому дал им буквенные имена: indent-a, -b, -c и т.п.

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

Тут кстати небольшой лайфхак: делать индент без заливки неудобно, так как его невозможно выделить. А с заливкой делать - замучаешься подстраивать цвет под фон в различных контекстах. Поэтому я залил их чёрным цветом и присвоил режим смешения Lighten - вуаля, инденты теперь не видны на любом фоне.

Так вот, про имена опять таки. У меня щас так:

a = 4 px
b = 6 px
c = 8 px
. после 'e' увеличение идёт на 4 рх, после 'h' - на 8, и вот тут заковыра: что, если мне понадобится некое промежуточное значение? Получать его суммируя имеющиеся? Тупо как-то. Внедрять новый компонент? Тогда как его называть, если пространство имён уже определено? Добавлять еще один суффикс? Какой? тоже буквенный? Запутанно. Числовой? типа indent-i-01 - ну, можно конечно, но выглядит не оч

Напрашивается полная независимость имени не только от размера индента, но и от его места в последовательности всей линейки индентов. Тут на помощь могут прийти эмодзи (см. скрин)

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

Читайте также: