Разработка дизайна — это процесс, за которым очень интересно наблюдать со стороны. Мы предлагаем Вам увидеть, как создавался интерфейс с этапа черновика до коммерческой версии.
1244 просмотров
Это был долгий путь от простого наброска на бумаге до дизайна программного обеспечения.
Артем Сергиенко, Глава проекта SimplexPlan
Приветствую! Сегодня мы расскажем вам о том, как разрабатывали интерфейс нашего программного обеспечения SimplexPlan.
Что вам нужно знать о программе? По большому счёту софт является конструктором экономических моделей коммерческих предприятий. Внутри движка было заложено большое количество расчётов, код которых поместился на 44 страницах А4. Их цель — найти способ поднятия прибыли компании пользователя. Если вас интересует методы расчётов и их цель, то можете прочитать подробнее здесь.
Поэтому перед нами стояла задача не загрузить пользователя сложными расчётами, а создать систему, в которой он вносит небольшое количество информации, а после получает ценные рекомендации по управлению его бизнесом.
Python как сделать красивую программу под ПК за 10 минут?
В идеале дизайн сам должен направлять пользователя, а также объяснять, какие данные куда необходимо внести. От клиента оставалось лишь указать свою информацию и запустить нужный вид анализа. Всё остальное программа делает сама.
Теперь, когда софт готов, а клиенты довольны, могу с уверенностью сказать, что мы смогли добиться нужного результата.
В этой статье вы увидите эволюционный процесс нашего интерфейса, а также узнаете фичи, которые позволили сделать наши таблицы в программе удобными, интерактивными и полезными. В конце статьи вас ждёт опрос, нас очень интересует ваше мнение.
Первый прототип дизайна программы
Перво-наперво, для более удобной работы с данными, интерфейс приложения было решено разделить на вкладки.
Каждому инструменту — своё место.
Как уместить всю информацию о предприятии на пяти экранах? Мы быстро пришли к выводу, что необходимо использовать единый лаконичный набор экономических параметров, который был бы достаточен для любой компании. Около года ушло на его создание и утверждение. Прочитать о части из них вы можете здесь.
Фича № 1. Блок история
В ряде программ, которыми пользуется бизнес, не хватает возможности экспериментировать с данными. Ведь в случае обнаружения ошибок необходимо оперативно выявить проделанные изменения.
История — это блок, в котором фиксируются все действия, проделанные пользователем — суть изменения, его место и время.
Фича № 2. Менеджер проектов
Это модуль, который раскладывает информацию о компании по полочкам. Никакого бардака, всё наглядно и структурировано.
Со структурой можно работать из любой вкладки и она не занимает постоянно пространства на экране, благодаря функции «язычка», которая скрывает менеджер проекта за экран.
Выбор палитры
Выбрать подходящую палитру цветов — очень важная задача, ведь пользователю необходимо на протяжении длительного времени работать с таблицей. Мы рассмотрели множество цветовых решений. Стоит ли говорить, что зелёный цвет отлично подходил под формат экономической программы. Но фразы: «О, это же как в Excel!» мы не смогли уйти.
Стиль приложений для Windows
Стиль помогает выделить ваше приложение среди других. Рекомендации в этом разделе помогут создать стиль Fluent Design, используя цвет, шрифтовое оформление и новые функции, например акриловый материал и эффект отображения.
Урок #2 – Дизайн основного окна
Наше приложение будет содержать красивый и современный дизайн. В ходе урока мы разработаем статичную часть главной страницы. Мы не будем прописывать функции и лишь поработаем над оформлением проекта.
Видеоурок
В ходе урока был использован макет с дизайном. Скачать макет можно по этой ссылке .
Разработка дизайна для Андроид проектов является долгим и отчасти сложным процессом. Без готового макета вам будет сложно разработать дизайн, так как постоянно нужно будет пробовать писать код, тестировать его, стирать и заново писать.
По этой причине для создания дизайна зачастую используются программы по типу Sketch, Figma, Illustrator или же старый добрый PhotoShop. Мы для урока подготовили дизайн в программе Figma.
Для создания более динамичного дизайна страницы, вы можете поработать дополнительно со шрифтами, поиграться с настройками кнопок, а также поработать с программой Figma. Внутри программы вы можете сделать нужные вам изображения кнопок и далее экспортировать их в вашу программу.
Источник: itproger.com