Как сделать мобильную программу

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

Знакомство с интерфейсом Figma

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

Панель инструментов

• Move (V)
• Scale (K)
• Frame (Aили F)
• Rectangle (R)
• Line (L)
• Arrow (Shift + L)
• Ellipse (O)
• Place Image (Shift + Ctrl + Kили Shift + Cmd + K)
• Pen (P)
• Text (T)
• Hand (Нажмитеили удерживайтеSPACE)

Панель слоев (Layers Panel)

В левой части экрана находится панель слоев.

Создай мобильное приложение без кода

Она дает вам легкий доступ к слоям, компонентам и страницам, используемым внутри вашего текущего файла Figma.

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

Панель компонентов (Assets Panel)

Внутри панели компонентов у вас будет легкий доступ ко всем вашим компонентам.

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

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

Холст (Canvas)

Холст.

Здесь представлены ваши проекты.

Все просто, поэтому двигаемся дальше…

Панель свойств (Properties Panel)

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

Вкладка «Дизайн» (Design)

Вкладка «Дизайн» позволяет легко просматривать, добавлять, удалять или изменять свойства элементов вашего дизайна.

Слой, который вы в настоящее время выбрали, будет определять, какие настройки доступны вам на вкладке «Дизайн».

Вкладка «Прототип» (Prototype)

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

Вкладка «Inspect»

Вкладка «Inspect» на панели свойств позволяет увидеть элементы вашего дизайна в коде, в следующих доступных форматах:

CSS

iOS

Android

А теперь о хорошем .

Проектирование экрана мобильного приложения

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

Открыв Figma, создайте новый документ, щелкнув значок плюса (+) в правом верхнем углу экрана.

На появившемся экране выберите вариант iPhone 11 Pro / X и нажмите Create File.

Затем, когда фрейм не выбран, щелкните имя файла на панели инструментов и переименуйте его в «Mobile App Screen».

Миниатюра карточки

Выберите инструмент «Прямоугольник» (R), нарисуйте фигуру примерно 375px в ширину и 406px в высоту и поместите ее в верхней части фрейма. Вы также можете дважды проверить ее правильность, убедившись, что для нее установлено значение 0 по осям X и Y на панели свойств.

На панели свойств кликните по иконке Independent Corners и выберите 30 для радиусов скругления левого нижнего и правого нижнего углов прямоугольника.

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

Используя сочетание клавиш Shift + Ctrl + K или Shift + Cmd + K, выберите файл preview.jpg из папки Images, а затем кликните по фигуре, чтобы вставить изображение прямо в нее.

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

На панели «Заливка» (Fill) щелкните значок «Плюс» (+), чтобы добавить новую заливку. Убедитесь, что выбран параметр Solid.

Во всплывающем меню введите следующее Hex-значение (#): 303030 и установите непрозрачность (opacity) на 50%.

Наконец, давайте добавим легкую тень (drop shadow) к миниатюре и придадим глубины нашему дизайну.

На панели «Effects» щелкните значок плюс (+), выберите «Drop Shadow» в меню выбора, а затем настройте следующие параметры эффекта…

Панель навигации (Navigation Bar)

Для панели навигации мы вставим пару иконок. Одну для возврата к предыдущему экрану, а другую для добавления статьи в закладки.

Открыв папку Icons, просто перетащите на фрейм следующие иконки, по одной.

Выделив обе иконки, перейдите на панель «Selection Colors» и измените Hex-значение цвета на белый (FFFFFF).

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

Затем, выбрав обе иконки, перейдите на панель свойств и выберите «Align Vertical Centers» (Alt + V).

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

Всегда переименовывайте и группируйте по ходу дела. Это экономит кучу времени.

Теперь, удерживая Alt, поместите эту новую группу в 56px от верхнего края основного фрейма.

Уведомление

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

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

Инструментом «Прямоугольник» (R) нарисуйте фигуру размером 131px x 33px, а затем закруглите углы до 24.

На панели «Заливка» (Fill) задайте Hex-значение (#) 303030 и уменьшите его непрозрачность до 60%.

На панель «Эффекты» (Effects) добавим этому маленькому уведомлению легкое размытие фона, чтобы добавить визуальный интерес и немного большего контраста между изображением и текстом, который мы скоро разместим в нем.

На панели «Эффекты» щелкните значок плюс (+) и в меню выбора выберите Background Blur (Размытие фона).

Щелкните значок настроек эффекта (Effect Settings) и измените силу размытия (Blur Strength) на 6.

Пришло время написать немного текста и настроить еще несколько свойств, не так ли?

Используя инструмент «Текст» (T), добавьте новый текстовый элемент и напечатайте слово «Bookmarked» (добавлено в закладки).

Затем на панели свойств текста (Text Properties) примените следующее…

• Шрифт (Font) — Lato
• Вес (Weight) — Regular
• Размер (Size) — 14
• Выравнивание текста (Text Align) — Center
• Выравнивание (Align) — Middle
• Заливка (Fill) — #FFFFFF

Выбрав текст, и слой фигуры, используйте параметры выравнивания (Alignment) в верхней части панели свойств, чтобы выровнять элементы как по горизонтали, так и по вертикали относительно друг друга.

Используйте сочетания клавиш Ctrl + G или Cmd + G, чтобы сгруппировать их, и Ctrl + R или Cmd + R, чтобы переименовать.

Затем, наконец, используйте Ctrl + Click или Cmd + Click, чтобы выбрать группу уведомлений и изображение, а затем используйте параметры выравнивания, чтобы выровнять уведомление по горизонтали и вертикали внутри изображения.

Аватар + иконки социальных сетей

Давайте разместим аватар, имя автора и иконки социальных сетей на свои места.

Выберите инструмент Эллипс (O) и нарисуйте фигуру размером 48 x 48px. Вы также можете удерживать клавишу Shift, чтобы сохранить пропорции.

Используя сочетание клавиш Shift + Ctrl + K или Shift + Cmd + K, чтобы использовать инструмент «Поместить изображение» (Place Image), выберите avatar.png из папки «Images» и поместите его внутри фигуры.

Выделив фигуру, перейдите на панель свойств и добавьте следующее…

Stroke –

Drop Shadow –

Давайте добавим еще несколько текстовых слоев как для имени автора, так и для даты публикации статьи .

Используя инструмент «Текст» (T), создайте 2 новых текстовых слоя, отредактируйте текст соответствующим образом, а затем примените к имени автора следующие свойства…

А для Даты публикации используйте следующее…

• Шрифт (Font) — Open Sans
• Вес (Weight) — Regular
• Размер (Size) — 12
• Выравнивание текста (Text Align) — Left
• Заливка (Fill) — #7D7D7D

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

Затем используйте инструменты выравнивания, чтобы они были выровнены по левому краю относительно друг друга, и, наконец, сгруппируйте их (Ctrl + G или Cmd + G).

Выровняйте эту новую группу на 16px справа от аватара, а затем, выбрав новую группу и аватар, нажмите Alt + V, чтобы выровнять их по вертикали относительно друг друга.

Давайте добавим пару иконок социальных сетей .

Как и раньше, просто перетащите по одной иконки Instagram и Twitter в свой дизайн и, используя комбинацию инструментов выравнивания и клавиши Alt, выровняйте их по вертикали относительно друг друга (Alt + V) и разместите их. На расстоянии 16px.

Сгруппируйте иконки (Ctrl + G или Cmd + G) и переименуйте (Ctrl + R или Cmd + R).

Выделив группу иконок социальных сетей, группу текстовых слоев и аватар, используйте Alt + V, чтобы выровнять их по вертикали относительно друг друга.

Сгруппируйте (Ctrl + G или Cmd + G) все эти элементы вместе, а затем поместите эту новую группу на 32px от левого и правого края фрейма и на 32px от нижнего края изображения.

Давайте добавим небольшой заголовок и фрагмент контента, чтобы еще немного дополнить наш дизайн .

Используя инструмент «Текст» (T), создайте простой заголовок, а затем на панели свойств примените следующее…

• Шрифт (Font) — Lato
• Вес (Weight) — Bold
• Размер (Size) — 21
• Высота строки (Line Height) — 32
• Выравнивание текста (Text Align) — Left
• Выравнивание (Align) — Top
• Заливка (Fill) — #212121

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

• Шрифт (Font) — Open Sans
• Вес (Weight) — Regular
• Ращмер (Size) — 16
• Высота строки (Line Height) — 28
• Выравнивание текста (Text Align) — Left
• Выравнивание (Align) — Top
• Заливка (Fill) — #7D7D7D

Как создать мобильное приложение для бизнеса

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

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

Шаг 1. Определите бизнес-задачу

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

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

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

Шаг 2. Проанализируйте целевую аудиторию и конкурентов

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

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

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

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

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

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

• Боятся, что товар закончится, пока они едут в магазин — предоставьте возможность зарезервировать его в 2 клика прямо с мобильного.

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

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

Шаг 3. Оцените вашу инфраструктуру данных

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

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

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

Если речь идет о нейронных сетях и анализе данных, то серверные работы займут существенную часть бюджета.

Шаг 4. Выберите способ и инструмент разработки

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

Мобильное приложение своими руками

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

Существует три варианта самостоятельной разработки приложения:

Написание кода своими силами

Если вы обладаете навыками программирования или готовы получить их, то вполне можете написать приложение самостоятельно. Технологии можно использовать разные: от натива (Swift или ObjectiveC для iOS, Java или Kotlin для Android) до всевозможных фреймоворков — например, Xamarin (C#), ReactNative (Javascript) или Flutter(Dart).

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

Онлайн-сервисы для создания приложений на основе готового контента

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

Если вас интересует такой вариант, рекомендую также в качестве альтернативы рассмотреть возможность доработки своего сайта и создания PWA — progressive web app. Эта технология позволяет получить своеобразный гибрид сайта и приложения: в десктопе он будет отображаться как обычный сайт, а в мобильной версии — имитировать приложение. Возможно, вам окажется достаточно этого функционала и не придется делать отдельное приложение.

Конструкторы мобильных приложений

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

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

Затраты на самостоятельную разработку

Во многих сервисах доступны бесплатный базовый функционал и Pro-версии. Стоимость платных тарифов сильно разнится в зависимости от опций, периода оплаты и пр. В среднем для создания стандартного приложения понадобится около 50-150$ в месяц.

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

Профессиональная разработка мобильного приложения

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

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

Разработка отдельного приложения под каждую платформу

Как создать мобильное приложение — с чего начать

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

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

С чего начать — кроссплатформенность

Первое с чего вам стоит начать – придумать идею своего проекта и начать его проектировать. Главный и, видимо, очень интересный вопрос — на чем делать приложение? Может ли это быть нативное приложение или нужно посмотреть в сторону кроссплатформенных решений? Для чего необходима кроссплатформенность?

Она дает возможность сохранять время и ресурсы (бывает в 2-3 раза), объединить разделенный на 2 отдельных процесса (и 2 команды) проект к одному. Данный плюс нельзя переоценить. Безусловно, двойная экономия ресурсов — довод. Кроссплатформенные движки в наше время вышли на весьма неплохой уровень, тем более стали иметь множество облегчающих инструментов.

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

Если у вас как раз подобное приложение или вы поклонник material design (как и многие разработчики), то да, кроссплатформа вам не подойдет. У нас есть команда партнеров, которые занимаются разработкой сайтов и приложений в Уфе. Называется данная компания Halikov Studio — это digital агентство с многолетним опытом и экспертами по разработке digital проектов любой сложности.

Вот их официальный сайт https://halikov-studio.ru разработка сайтов Уфа. Если вам нужно срочно воплотить в реальность ваш проект приложения или сайта – обращайтесь к ним. Неважно где вы находитесь. В наше время всю работу можно сделать находясь в любой точке мира – удаленно.

Что сделать сначало — iOS или Android

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

Это их очень огромное преимущество перед остальными, ведь их нет даже в iTunes Connect (консоль разработчика от Apple). В Apple специалисты пытаются некоторое время тоже добавлять в консоль новые инструменты для работы. Мнение разработчиков приложений – Яровой Вячеслав, Брянск, 42 года:

У меня такое ощущение, что логичность и интуитивность iOS — это заслуга совершенно другой компании, а консоль разработчика от Apple придумывает и внедряет кто-то незнакомый с понятием «юзабилити».

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

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

Как мы писали уже выше это компания Halikov Studio — агентство с долголетним опытом и знатоками по разработке digital проектов всякой сложности. Если вам нужно срочно воплотить в реальность ваш проект приложения или сайта – обращайтесь к ним. Неважно где вы находитесь. В наше время всю работу можно сделать находясь в любой точке мира – удаленно.

Поделитесь статьей в соц. сетях:

(голосов: 2, средняя оценка: 5,00 из 5)

Источник: telephongid.ru