Дизайн и верстка: Дизайн и верстка макета – в чем между ними различия?

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

Контент можно рассматривать как инструмент компаса, который указывает дизайнерам направление голоса, тона и бренда. Без контента у дизайнеров могут возникнуть трудности с созданием разумного потока к кнопкам с призывом к действию, с настройкой используемых цветов и векторов.Тип контента, а также тон, используемый в контенте, помогут дизайнерам со стилем дизайна пользовательского интерфейса.

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

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

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

Что может пойти не так со стратегией «сначала контент»

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

Несовместимое содержимое

Если вы не видели дизайн, вы не совсем понимаете, сколько или какой контент вам нужно передать на веб-сайт. Эти знания должны управлять всеми аспектами создания вашего контента, от количества контента на данном слое экрана навигации до типа контента, необходимого на определенной странице. Итак, если дизайн без контента — не что иное, как украшение, тогда что такое контент без дизайна? Примечания!

Возможность визуальных сбоев

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

Например, предположим, что в макете, который вы разработали, есть место для 250 слов на главной странице, но ваше содержание составляет 400 слов. Вы будете вынуждены существенно отредактировать свой контент, поскольку лишний текст не будет хорошо вписываться в макет.

Почему подход «сначала макет»

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

Посетители могут зацепиться за ваш сайт из-за отличного дизайна, и само собой разумеется, что отличный дизайн делает посетителей менее запутанными при навигации по сайту.

Итак, если вы принадлежите к философской школе, ориентированной на контент, как вы узнаете, какой тип контента вам нужен, без компоновки и навигации, которые могли бы его направлять? Это правда, что исследования пользователей расскажут вам о языке, который следует использовать на сайте, но не помогут вам в выборе пути навигации по сайту.

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

Если вы все еще не уверены в том, почему вам следует использовать подход «сначала макет», вот еще одно подтверждающее свидетельство:

Дизайн-макет определяет контент

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

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

Дизайн макета может рассказать историю без слов

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

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

Что может пойти не так с подходом «сначала макет»?

По своей сути дизайн веб-макета — это форма искусства. И этот вид искусства требует, чтобы веб-дизайнеры сочетали форму и функцию, чтобы дать вашим пользователям приятный опыт. Существуют определенные неписаные правила, которым должны следовать веб-дизайнеры, но когда они используют подход «сначала макет», не имея под рукой контента, некоторые из этих правил теряют актуальность.

Вот обсуждение некоторых ловушек, связанных с подходом «сначала макет»:

Несоответствие значению содержимого

Все в макете должно поддерживать, передавать и усиливать смысл содержимого. Но если вы должны сначала начать с макета, то как вы собираетесь убедиться, что дизайн макета сочетается с контентом? Да, это практически невозможно. Знание формата, объема, типа и способа доставки контента — не зеленый свет для начала разработки без фактического контента, который будет использоваться на сайте.

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

Незапланированный редизайн

При использовании подхода «сначала макет» дизайнеры обычно используют стандартные тексты-заполнители, известные как Lorem ipsum. Но они могут быть настолько обманчивыми, потому что могут убедить вас в том, что ваш дизайн-макет более сбалансирован, когда это не так с окончательным контентом. Существует высокая вероятность того, что раздел сломается, когда будет размещен реальный контент или окончательный контент может быть отделен от страницы.Когда это происходит, это приводит к чрезмерным изменениям дизайна, которые могут увеличить ваш бюджет.

Как выбрать правильный подход?

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

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

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

Итак, для достижения этой сплоченности мы начинаем с написания контента или разработки макета?

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

• Результаты исследований
• Тип веб-сайта

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

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

Передаю вам…

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

50 макетов дизайна для воплощения ваших идей

Последнее обновление 10 ноября 2021 г.

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

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

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

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

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

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

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

Не поймите меня неправильно, цвета всегда веселые и захватывающие.Особенно, если ваши редакторы использовали прилагательные «яркий» и «молодой», вы, вероятно, сможете максимально использовать цвет всеми возможными способами.

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

Ограничьте количество цветов, которые вы используете в одном развороте. Таким образом, вы можете быть уверены, что весь текст будет читабельным, и ваши читатели не устанут быстро.

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

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

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

Вот еще одна вещь, которая легко может испортить любой макет.

Да, в настоящее время дизайнеры могут использовать несколько различных шрифтов. Но нет необходимости использовать их все за один раз.Магическое число здесь 3 — один шрифт для вашего заголовка, один шрифт для ваших подзаголовков и еще один для вашего текста.

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

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

Очевидно, что чем меньше страница, тем меньше будет и поле. По мере увеличения страницы вам придется увеличивать поле.

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

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

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

также повышают эффективность проектировщика. С помощью сеток, размещенных на любой странице, легче понять, что нужно делать. Без правильной сетки дизайнерам пришлось бы выяснять, куда может идти каждый элемент.Но когда сетка присутствует, вопрос не в том, куда она МОЖЕТ идти, а в том, куда она ДОЛЖНА идти.

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

Да, когда вы говорите о макете, задействованы все эти элементы, так что это не совсем та концепция, которая стала бесполезной.

Ищете вдохновение для макета? Хотите знать, как применить приведенные выше советы к своей работе? Эти макеты могут помочь.

Мы собрали 50 дизайнерских макетов, которые идеально отражают то, как макеты должны быть созданы. Некоторые из них довольно консервативны и ориентируются на минимализм.

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

Macomb Community College — Media & Communication Arts

3 главных причины выбрать Macomb для средств массовой информации и коммуникационного искусства — Дизайн и верстка

1. Сэкономьте 20 000 долларов, начав здесь — более 80% наших студентов не имеют долгов
2. Доступно около 250 частных и трансфертных стипендий
3. Что нужно для успеха, включая бесплатное обучение

Медиа и коммуникационное искусство — Курсы дизайна и верстки в Macomb

Карьера в СМИ и коммуникационных искусствах — Дизайн и верстка

Macomb объединился с Burning Glass Technologies, чтобы предоставить вам самую свежую информацию о карьерах, для которых вы сможете получить квалификацию после успешного завершения этой программы.

Данные о вакансиях могут дать вам представление о работодателях, ищущих соискателей, о том, где они расположены, и о средней предлагаемой заработной плате. Используйте инструмент Career Insights Tool, чтобы просмотреть информацию о стране, штате или мегаполисе.

Данные предоставлены Burning Glass Technologies и взяты из образцов большой площади. Данные не берутся из результатов студентов или программ конкретного колледжа Macomb.

Карьерные услуги

Macomb’s Career Services — ваш мост от образования к работе.Он предлагает множество бесплатных ресурсов, в том числе оценку навыков и интересов, составление резюме, семинары по успеху, трудоустройство и многое другое.

Транспортные пути

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

Создание пользовательского интерфейса с помощью редактора макетов | Разработчики Android

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

Редактор макета особенно эффективен, когда построение макета с помощью ConstraintLayout , менеджер компоновки, совместимый с Android 2.3 (уровень API 9) и выше.

На этой странице представлен обзор редактора макетов. Чтобы узнать больше о макете основы, см. Макеты.

Введение в редактор макетов

Редактор макета появляется при открытии файла макета XML.

Рисунок 1. Редактор макета

1. Палитра : содержит различные представления и группы представлений, которые можно перетаскивать ваш макет.
2. Дерево компонентов : показывает иерархию компонентов в вашем макете.
3. Панель инструментов : Нажмите эти кнопки, чтобы настроить внешний вид макета в редактор и изменить атрибуты макета.
4. Редактор дизайна : редактируйте макет в представлении «Дизайн», «Чертеж» или в обоих режимах.
5. Атрибуты : элементы управления для выбранных атрибутов представления.
6. Режим просмотра : Просмотр макета в любом из Код , Проект , или Разделить режимы. Разделенный режим показывает как Код и Одновременное проектирование окон .
7. Элементы управления масштабированием и панорамированием : Управление размером и положением предварительного просмотра в редактор.

Когда вы открываете файл макета XML, редактор дизайна открывается по умолчанию, как показано на рисунке 1. Чтобы отредактировать XML-макет в текстовом редакторе, нажмите Code в правом верхнем углу окна. Обратите внимание, что Палитра , Дерево компонентов и Атрибуты окна недоступны при редактировании макета в представлении Code .

Совет: Вы можете переключаться между дизайнерским и текстовым редакторами, нажимая Alt + Shift + стрелка вправо / влево ( Control + Shift + стрелка вправо / влево на Mac).

Изменить внешний вид предварительного просмотра

Кнопки в верхнем ряду редактора дизайна позволяют настроить внешний вид вашего макета в редакторе.

Рис. 2. Кнопки на панели инструментов редактора макета, которые настроить внешний вид макета

Доступны следующие кнопки, соответствующие номерам на рисунке 2:

1. Дизайн и план : Выберите, как вы хотите просматривать свой макет в редактор.Выберите Дизайн , чтобы увидеть предварительный просмотр вашего макета. Выбирать Blueprint , чтобы видеть только контуры для каждого вида. Выбирать Design + Blueprint для одновременного просмотра обоих представлений. Вы также можете нажать B для циклического просмотра этих типов просмотра.
2. Ориентация экрана и варианты компоновки : выбор между альбомной и портретная ориентация экрана или выберите другие режимы экрана, для которых ваше приложение предоставляет альтернативные макеты, например ночной режим.Это меню также содержит команды для создания нового варианта раскладки. Вы также можете нажать O , чтобы изменить ориентацию.
3. Тип и размер устройства : Выберите тип устройства (телефон / планшет, Android TV, или Wear OS) и конфигурацию экрана (размер и плотность). Вы можете выбрать из несколько предварительно настроенных типов устройств и ваши собственные определения AVD, или вы можете создайте новый AVD, выбрав Добавить определение устройства из списка. Ты можно изменить размер устройства, перетащив правый нижний угол макета.Вы также можете нажать D , чтобы просмотреть список устройств.
4. Версия API : выберите версию Android для предварительного просмотра макет.
5. Тема приложения : выберите тему пользовательского интерфейса для применения к предварительному просмотру. Обратите внимание, что это работает только для поддерживаемых стилей макета, поэтому многие темы в этом списке приводят к ошибка.
6. Язык : выберите язык для отображения строк пользовательского интерфейса. Этот список отображает только языки, доступные в ваших строковых ресурсах.Если хочешь чтобы отредактировать перевод, нажмите Изменить перевод в раскрывающемся списке меню. Подробнее о работе с переводами см. Локализуйте пользовательский интерфейс с помощью редактора переводов.

Создать новый макет

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

Создать новый макет можно одним из следующих способов:

1. В окне Project щелкните модуль, в который вы хотите добавить макет.
2. В главном меню выберите Файл> Создать> XML> Файл макета XML .
3. В открывшемся диалоговом окне укажите имя файла, корневой тег макета и исходный набор, в который входит макет.
4. Нажмите Готово , чтобы создать макет.

Использовать представление проекта

1. Выберите вид Project из окна Project .
2. Щелкните правой кнопкой мыши каталог макета, в который вы хотите добавить макет.
3. В появившемся контекстном меню выберите New> Layout Resource File .

Используйте представление Android

1. Выберите представление Android в окне Project .
2. Щелкните правой кнопкой мыши папку макета .
3. В появившемся контекстном меню выберите New> Layout Resource File .

Используйте диспетчер ресурсов

1. В диспетчере ресурсов выберите Макет вкладка.
2. Нажмите кнопку + , а затем щелкните Файл ресурсов макета .

Используйте варианты компоновки для оптимизации для разных экранов

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

Использовать предлагаемый вариант компоновки

Android Studio включает общие варианты макета, которые вы можете использовать в своем проекте. Чтобы использовать предложенный вариант компоновки, выполните следующие действия:

1. Откройте исходный файл макета, щелкните значок Design в правом верхнем углу окна.
2. Щелкните Ориентация для предварительного просмотра () на панели инструментов.
3. В раскрывающемся списке выберите предложенный вариант, например Создать вариант ландшафта .

Создайте свой вариант компоновки

Если вы хотите создать свой вариант макета, сделайте следующее:

1. Откройте исходный файл макета и щелкните значок Design () в правом верхнем углу окна.
2. Щелкните Ориентация для предварительного просмотра на панели инструментов.
3. В раскрывающемся списке выберите Создать другое … .
4. В открывшемся диалоговом окне определите квалификаторы ресурсов для варианта.Выберите квалификатор из списка Доступные квалификаторы , а затем щелкните Добавить кнопка. Повторите этот шаг, чтобы добавить другие квалификаторы по мере необходимости.
5. После добавления всех квалификаторов нажмите ОК .

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

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

Преобразование вида или компоновки

Вы можете преобразовать вид в другой вид, а также преобразовать макет. к другому виду макета.

1. Нажмите кнопку Design в правом верхнем углу окна редактора.
2. В дереве компонентов щелкните правой кнопкой мыши вид или макет, а затем щелкните Преобразовать вид … .
3. В появившемся диалоговом окне выберите новый тип вида или макета, а затем нажмите Применить .

Преобразование макета в ConstraintLayout

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

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

1. Откройте существующий макет в Android Studio и нажмите кнопку Design в правом верхнем углу окна редактора.
2. В дереве компонентов щелкните макет правой кнопкой мыши и выберите Преобразуйте your-layout-type в ConstraintLayout .

Чтобы узнать больше о ConstraintLayout , см. Создайте отзывчивый пользовательский интерфейс с помощью ConstraintLayout.

Найти предметы в палитре

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

Часто используемые элементы можно найти в категории Общие в разделе Палитра . Чтобы добавить элемент в эту категорию, щелкните правой кнопкой мыши представление или представление группу в палитре , а затем щелкните Избранное в контекстном меню.

Открыть документацию из Палитры

Чтобы открыть справочную документацию для разработчиков Android для представления или группы представлений, выберите элемент пользовательского интерфейса в палитре и нажмите Shift + F1 .

Чтобы просмотреть документацию Руководства по материалам для представления или группы представлений, щелкните правой кнопкой мыши элемент пользовательского интерфейса в палитре и выберите Material Guidelines из контекстное меню. Если для элемента не существует конкретной записи, откроется команда. домашняя страница Документация по материалам Руководства.

Добавьте виды к макету

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

Если вы используете ConstraintLayout , вы можете автоматически создавать ограничения с помощью функций Infer Constraints и Autoconnect.

Изменить атрибуты вида

Рисунок 3. Атрибуты Окно

Вы можете редактировать атрибуты вида в окне Атрибуты в правой части окна. Редактор макета.Это окно доступно только при открытом редакторе дизайна, поэтому убедитесь, что вы используете режим Design или Split для просмотра макет.

Когда вы выбираете представление, щелкая ли оно в дереве компонентов или в редакторе дизайна окно Атрибуты показывает следующее, как обозначено на рисунке 3:

1. В разделе Declared Attributes перечислены атрибуты, указанные в макете. файл. Чтобы добавить атрибут, нажмите Добавить кнопку в правом верхнем углу раздела.
2. Раздел Layout содержит элементы управления шириной и высотой Посмотреть. Если представление находится в ConstraintLayout , в этом разделе также отображается смещение ограничения и перечисляет ограничения, которые использует представление. Для большего информацию по работе с ConstraintLayout см. Создайте отзывчивый пользовательский интерфейс с помощью ConstraintLayout.
3. В разделе Common Attributes перечислены общие атрибуты для выбранных Посмотреть. Чтобы увидеть все доступные атрибуты, разверните раздел Все атрибуты внизу окна.
4. Нажмите кнопку Search для поиска определенного атрибута представления.
5. Значки справа от каждого значения атрибута показывают, значения атрибутов являются ссылками на ресурсы. Эти показатели солидные когда значение является ссылкой на ресурс и пусто когда значение жестко запрограммировано. Эти индикаторы помогут вам с первого взгляда распознать жестко запрограммированные значения. Щелкнув индикаторы в любом состоянии открывает диалоговое окно ресурсов , в котором вы может выбрать ссылку на ресурс для соответствующего атрибута.

6. Красная подсветка вокруг значения атрибута указывает на ошибку в значении. Ошибка может указывать на недопустимую запись для атрибута, определяющего макет, как показано красным цветом на рис. 3.

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

Добавьте пример данных в представление

Поскольку многие макеты Android полагаются на данные среды выполнения, может быть трудно визуализировать внешний вид макета при разработке приложения.В Android Studio 3.2 и новее, вы можете добавить образец данных предварительного просмотра в TextView , ImageView или RecyclerView из редактора макета.