ПРИЛОЖЕНИЕ ИЗОБРЕТАТЕЛЬ 2 - Чистые передние наконечники (+4 примера): 6 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:51

Посмотрим, как сделать ваше приложение на AI2 эстетичным:)

На этот раз кода нет, только подсказки для плавного приложения, как в примере 4 вверху!

Запасы

Шаг 1. Введение

Это руководство предназначено для всех, кто изучает или использует App Inventor 2, программное обеспечение, разработанное MIT.

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

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

Мы познакомимся с основами создания приложения, которое будет выглядеть так, как показано в 4-м примере.

Давайте начнем !

PS: Если вам нравится этот проект, вы можете проголосовать за меня в конкурсе Classroom Science Contest. Спасибо большое !!

PS2: Будут допущены некоторые английские ошибки, простите меня:)

Шаг 2: фон

Дальнейшее создание я сделал на Figma, бесплатном векторном программном обеспечении, вроде расширенной раскраски, которое позволяет легко создавать формы и цвета: это очень интуитивно понятно, я рекомендую его: www.figma.com!

Вам не нужно использовать Figma для своего внешнего вида, но мне нравится делать дизайн перед созданием самого приложения.

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

Я рекомендую прозрачность 30% для используемого вами цвета и фон только с одним цветом.

Шаг 3: цвета

Выбранные вами цвета и их интенсивность очень важны в приложении.

Первый совет, который я даю, - выбрать максимум 3 цвета (+ черный и белый): мы все еще стараемся быть мягкими:)

Для 4 примеров, которые я сделал, вот советы, которые я выбрал (вы также можете увидеть их на картинке в качестве резюме):

Фон: мягкий и светлый фон без формы (прозрачность цвета 30%). Запомните этот цвет, чтобы интегрировать ваши кнопки!

Заголовок: Тонкий текст темно-серого цвета смотрится хорошо! Для следующих подзаголовков и текста оставайтесь черным, но измените оттенок черного (серый, если это не большая информация) и поиграйте с размером и атрибутом, которые вы можете (полужирный, курсив).

Кнопка: одного цвета, обычно это цвет вашего фона (прозрачность 80-100%), затем черный или белый для завершения.

Ползунки: не используйте для них 2 цвета, только один цвет с левой стороны и с правой стороны в оттенке черного.

Вот и все !!

Меньше - больше !!!! Не используйте слишком много цветов, форм и размеров, будьте осторожны!

Шаг 4: Установите правильный параметр экрана

На главном экране части App Inventor Designer вы можете выбрать основные характеристики экрана.

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

1 - Ориентация экрана

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

Я выбрал портретную ориентацию.

2 - Отключить «Видимый заголовок» и 3- Отключить «ShowStatusBar»

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

4 - Размер

Размер обычного приложения - 505x320 (высота x ширина). Помните об этом измерении, чтобы создать свой фон и изображения (по крайней мере, иметь те же пропорции)! Если вы используете Figma, вы можете мгновенно создать приложение нужного размера.

5 - Размеры

Если вы выберете «Фиксированный», размер приложения будет 505x320. Если вы выберете «Адаптивный», приложение подойдет для вашего смартфона, но будьте осторожны, вам придется адаптировать свои изображения.

Шаг 5: Как это сделать:)

Чтобы воспроизвести первый пример, мы собираемся выполнить 3 шага (как на картинках):

1 - Измерьте размеры

Что круто на фигма, так это то, что вы можете видеть размер ваших рамок и объекта, так что вы можете видеть, какого размера будут ваши объекты и пустое пространство! Заготовки очень важны в App Inventor, потому что мы собираемся создать их, поместив невидимую метку!

2 - Заполнить пустые будут невидимые надписи

Как вы можете видеть на втором рисунке, мы воспроизводим желаемую переднюю часть, размещая этикетку соответствующего размера. Затем сделайте его невидимым (уберите кнопку «видимый»).

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

3 - Попробуйте создать свои кнопки в программном обеспечении

По возможности создавайте свои кнопки на сайте AI2, они будут в высоком качестве, а небольшая анимация «при нажатии» будет как-то круто:). Если вы не можете создать свои собственные кнопки, вы можете создать их в другом программном обеспечении, а затем импортировать его как изображение.

Шаг 6: Результат:)

Слева: скриншот моего смартфона на AI2.

Справа: черновик, сделанный на Figma.

Я очень надеюсь, что это руководство поможет вам создать великолепное приложение на AI2.

Большое спасибо за просмотр. Если вам понадобятся дополнительные советы, дайте мне знать …

Еще одно руководство по бэкэнду AI2 будет скоро выпущено!

С уважением, Томас из Technofabrique