Интернет вещей с remotexy: работа с он-лайн редактором и элементы оформления интерфейса

Интернет вещей с RemoteXY: работа с он-лайн редактором и элементы оформления интерфейса

Продолжаю цикл статей о сервисе RemoteXY. 

Редактор интерфейса

Настало время подробно рассмотреть работу с он-лайн редактором интерфейса, расположенным по адресу http://remotexy.com/ru/editor

Окно редактора делится на 3 части: слева панель элементов интерфейса, по центру поле редактора, справа панель настроек и свойств. Панель элементов интерфейса имеет 3 группы элементов: управления, индикации и оформления.

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

Группа конфигурации и подключения модуля были рассмотрены в предыдущей статье http://cxem.net/arduino/arduino213.php, при описании разных типов подключений.

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

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

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

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

После последнего обновления в группе настроек “Экран” появилась возможность задать пароль для доступа к ардуино.

Дополнительный пароль дает ещё одну степень защиты (наряду с паролем блютуз/вай-фай/точки доступа/токена) от несанкционированного доступа к ардуино.

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

Работа на поле редактора выполняется при помощи мыши методом drag-n-drop. Разберем основные приемы работы в он-лайн редакторе:

• Что бы добавить элемент на рабочее поле наведите курсор на элемент в панели элементов интерфейса, нажмите левую клавишу мыши и, не отпуская ее, перетяните элемент на поле редактора. Элемент будет размещен там, где будет отпущена левая кнопка мыши.
• При щелчке правой кнопкой мыши на элементе откроется контекстное меню из 4 пунктов: вырезать, копировать, вставить (активно только при щелчке на свободном месте поля редактора, когда в буфере обмена находится вырезанный или скопированный элемент) и удалить.
• При щелчке левой кнопкой мыши на элементе, расположенном на поле редактора, вокруг элемента появляется прямоугольная рамка с квадратными маркерами на углах, над рамкой отображается имя переменной, связанное с выделенным элементом.
• Если потянуть за угловой маркер, то изменятся масштаб и пропорции элемента.
• Что бы перенести элемент необходимо нажать на него левой кнопкой мыши (даже если он не выделен) и, не отпуская кнопку, перетащить его в другое место.
• Можно так же выделить один или несколько элементов при помощи выделения мышью: нажмите мышью на свободном месте поля редактора и, не отпуская кнопку, потяните в мышь в сторону. В этом случае появится прямоугольная область, и все элементы, целиком попавшие в эту область, будет выделены. Выделенные группой элементы можно переместить, изменить их цвет, а так же применить к ним функции из контекстного меню. Масштабировать группу выделенных элементов нельзя.

Элементы оформления интерфейса

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

К тому же, элементы оформления – самые простые из всех элементов, предназначены для оформления интерфейса, не интерактивны (кроме элемента «страница»), в обмене информацией между смартфоном и контроллером не участвуют.

Метка

Метка – неизменяемый текст. Имеет 2 параметра: цвет (16 цветов на выбор) и текст метки – тот текст, который будет отображаться на экране

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

Панель

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

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

Панель всегда располагается на заднем плане интерфейса, все остальные элементы интерфейса располагаются поверх панелей.

Страница

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

Сама страница представлена «кнопкой», при нажатии на которую становятся видимыми элементы, привязанные к данной странице. У элемента «страница» следующие параметры: цвет, название страницы и основная страница.

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

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

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

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

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

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

Источник: http://cxem.net/arduino/arduino215.php

Как использовать графический интерфейс для своей задачи

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

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

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

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

Сформированный исходный код имеет большой участок, который выделен тегами RemoteXY include library и завершается тегом END RemoteXY include. Эта часть кода определяет структуру графического интерфейса, который вы создали. В свою очередь данная структура так же разделена на части. Рассмотрим по порядку.

Определение режима соединения и подключение библиотеки RemoteXY

Код содержит определение, каким образом используется подключение к интерфейсу. Это определение вида REMOTEXY_MODE__ XXX. Например, если вы используете SoftwareSerial, это определение будет иметь вид REMOTEXY_MODE__SOFTWARESERIAL, если HardwareSerial – REMOTEXY_MODE__SERIAL соответственно.

Так же этот участок кода содержит подключение необходимых библиотек для обеспечения необходимой функциональности. Так же подключается библиотека RemoteXY.h Нет необходимости вносить правку в этот участок кода.

Пример участка кода приведен ниже.

/* определение режима соединения и подключение библиотеки RemoteXY */  #define REMOTEXY_MODE__SOFTWARESERIAL  #include   #include  

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

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

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

Пример участка кода приведен ниже.

/* настройки соединения */  #define REMOTEXY_SERIAL_RX 2  #define REMOTEXY_SERIAL_TX 3  #define REMOTEXY_SERIAL_SPEED 9600 

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

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

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

Пример участка кода приведен ниже.

/* конфигурация интерфейса  */  unsigned char RemoteXY_CONF[] =    { 2,2,37,0,1,5,2,0,9,8   ,32,16,2,79,78,0,79,70,70,0   ,4,0,78,9,13,50,2,65,4,46   ,8,16,16,2,66,128,8,47,63,11   ,2 }; 

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

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

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

Пример участка кода приведен ниже.

/* структура определяет все переменные вашего интерфейса управления */  struct {      /* input variable */   unsigned char switch_1; /* =1 если переключатель включен и =0 если отключен */   unsigned char slider_1; /* =0..

100 положение слайдера */     /* output variable */   unsigned char led_1_r; /* =0..255 яркость красного цвета индикатора */   unsigned char level_1; /* =0..

100 положение уровня */     /* other variable */   unsigned char connect_flag;  /* =1 if wire connected, else =0 */ } RemoteXY; 

Функция setup() обязательно должна содержать код для запуска инициализации библиотеки RemoteXY. Это вызов конструктора RemoteXY_Init (). Не удаляйте этот код.

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

Для этого запишите необходимые значения в поля структуры RemoteXY.

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

void setup()   {    RemoteXY_Init ();         pinMode (PIN_SWITCH_1, OUTPUT);       // TODO you setup code        RemoteXY.switch_1 = 1; // После запуска выключатель “ВКЛЮЧЕН” } 

Функция loop() имеет вызов обработчика RemoteXY_Handler (). Не удаляйте этот код. Обработчик RemoteXY_Handler должен вызываться в каждом цикле программы. Вызов необходим для того, что бы библиотека RemoteXY могла обработать очередную порцию данных об элементах управления, переданных со смартфона и предать на смартфон новые данные о состоянии элементов индикации.

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

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

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

Внимание. Не рекомендуется в процедуре loop использовать задержки delay () и другие. Если обработчик RemoteXY_Handler не сможет во время передать необходимую информацию на смартфон, произойдет разрыв соединения.

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

void loop()   {     RemoteXY_Handler ();        // TODO you loop code    // используйте структуру RemoteXY для передачи данных       // Включаем светодиод на плате пин 13 по выключателю switch_1   if (RemoteXY.

switch_1 == 1) digitalWrite (13, HIGH);   else digitalWrite (13, LOW);      // Зажигаем светодиод led_1_r на графическом интерфейсе если на пин 5 есть напряжение   if (digitalRead(5)==HIGH) RemoteXY.led_1_r = 255;   else RemoteXY.

led_1_r = 0;    }

Источник: http://remotexy.com/ru/help/whatiscode/

Разработка интерфейса сайта (цена UI/UX-прототипа на фрилансе): сколько стоит дизайнер интерфейса удалённо

К вашим услугам 4046 UI/UX дизайнеров в категории “интерфейсы UI/UX”, специализирующихся на услуге “создание интерфейсов”. Выберите лучшее предложение, основываясь на 109181 отзывах об исполнителях раздела “Дизайн сайтов и приложений” на YouDo

Поиск UI/UX дизайнеров
Прайс на интерфейсы UI/UX
Типовые услуги UI/UX дизайнеров

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

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

Как разрабатывается юзабилити информационного ресурса

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

• внимательно выслушает ваши пожелания
• проведет анализ пользовательских запросов в вашей сфере бизнеса
• создаст прототип web-ресурса
• протестирует продукт

Разработка веб-интерфейсов осуществляется исполнителем Юду таким образом, чтобы они были простыми и понятными для пользователя.

Квалифицированный мастер, зарегистрированный на Юду, по доступной цене выполнит разработку:

• интернет-магазина
• развлекательного или информационного портала
• landing page с привлекательным дизайном
• визитки фриланс-компаний и частных специалистов, работающих удалённо

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

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

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

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

Как работает исполнитель YouDo

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

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

Сроки дизайнерского оформления ресурса вы согласуете с мастером при личном общении. Разработка интерфейса сайта обычно занимает несколько дней. После этого исполнитель Юду выполнит тестирование ресурса.

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

Сколько стоят услуги исполнителей Юду

Расценки разработчик формирует с учетом сложности оформления информационного ресурса и его функционала. Цена будет зависеть от ряда факторов:

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

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

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

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

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

Источник: http://freelance.youdo.com/design/interface/

Примеры дизайна веб-интерфейса

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

Как оценить качество UI

Для оценки качества UI можно воспользоваться принципом MAYA от промышленного дизайнера Раймонда Лоуи. Эта аббревиатура расшифровывается как Most Advanced Yet Acceptable — самый прогрессивный и в то же время приемлемый. На практике он означает, что интерфейс должен быть инновационным, но при этом достаточно понятным. Применение принципа MAYA можно оценить по таким показателям:

1. Использование стандартных «метафор».

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

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

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

3. Отсутствие ненужных шагов в стандартных процессах. Усложняя стандартные процессы, вы только раздражаете пользователей.

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

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

MailChimp

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

При этом продвинутым пользователям предлагаются расширенные опции в так называемом меню по требованию (menu-on-demand):

Темплейты для рассылок представлены в виде схематических превью — пользователь может сделать выбор, даже не читая описание:

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

При этом здесь есть важные элементы для тестирования внешнего вида и сохранения шаблона. Особого внимания заслуживает сообщение «We’ll autosave every 20 seconds» — благодаря ему пользователь знает, что ему не нужно периодически сохранять шаблон, чтобы не потерять изменения.

Меню внизу страницы сообщает пользователю, на каком этапе создания рассылки он находиться и позволяет вернуться на нужные этап, если требуется внести какие-то изменения:

Если пользователь сделал ошибку при создании рассылки, во-первых, он увидит сообщение о том, что что-то пошло не так:

А во-вторых, ему будет предложено возможное решение, которое можно сразу же применить:

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

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

Hootsuite

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

При этом, кликнув на ссылку «or create new account», пользователь не перейдет на новую страницу, а всего лишь увидит окошко с крестиком и всего тремя проиллюстрированными полями:

Настроить свою ученую запись и начать использовать Hootsuite мотивирует статистика о том, как сколько времени экономит его использование:

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

Его можно пройти или пропустить (Skip tour):

В Hooutsuit меню слева с иконками раскрывается, открывая доступ к остальным разделам сервиса (например, настройкам и рекламе):

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

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

Содержимое приложения организовывается в виде вкладок (прямо как браузере), которые можно добавлять, удалять и редактировать:

В паблишере пользователю предлагаются понятные подсказки по управлению публикациями:

My Energy

Сайт My Energy, который предназначен для учета расхода электроэнергии, газа и воды, отлично объясняет пользователям, для чего нужны те или иные данные и сразу показывает, что шагов по настройке профиля будет только три:

А после ввода адреса демонстрирует карту и, предвосхищая возможность ошибок картографического характера, предлагает нажать кнопку не That’s right, а Close enough!:

В зависимости от местоположения сайт сразу предлагает возможности по получению вычетов из налогов при использовании тех или иных технологий:

А вот советы по экономии и опросник по характеристикам жилья:

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

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

Отдельно стоит упомянуть раздел с советами по экономии:

В нем можно отмечать советы, которых вы придерживаетесь, добавлять их в список дел и быстро просматривать по фильтрам или ориентируясь на показатели Saving Impact (сколько денег они помогают сэкономить) и Effort Required (сложность выполнения), которые представлены в виде градиентных кружочков:

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

Мы, студия stfalcon.com, разрабатываем MVP для стартапов, UI для сайтов и мобильных приложений и с удовольствием создадим современный дизайн пользовательского интерфейса, который будет радовать ваших клиентов.

Источник: https://stfalcon.com/ru/blog/post/web-ui-design-examples

2.2 Выбор и обоснование средств разработки

2.2.1 Выбор модели платы Arduino

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

1) Наличие достаточного числа цифровых выходов

2) Габариты

3) Цена

Сравнительная характеристика моделей Arduino представлена ниже в таблице 1.

Таблица 1 – Модели Arduino

Модель	Цена, руб	Кол-во выходов	Габариты, мм	Микро контроллер	Флеш память, кб	Дополнительно
Mini	990	14	43×18	ATmega328	32	Является аналогом Uno в компактном варианте. Для использования нужна пайка.
Uno	1150	14	68.6 x 53.3	ATmega328	32	Самая популярная версия базовой платформы Arduino
Leonardo	1150	20	68.6 x 53.3	Atmega32u 4	32	Аналог Uno, но на микроконтроллере Atmega32u4
Micro	1190	20	48 x 17.7	Atmega32u 4	32	Является аналогом Leonardo в компактном варианте. Нет гнезда для питания.
Nano	1990	14	43 x 18	ATmega328	32	Является аналогом Uno в компактном варианте. Нет гнезда для питания.
Ethernet	2290	14	68.6 x 53.3	ATmega328	32	Uno со встроенным Ethernet адаптером
Mega 2560	2290	54	101.6 x 53.3	ATmega256	256	Расширенная версия Arduino Uno. Больше контактов и аппаратных serial- портов.
Due	2590	54	101.6 x 53.3	AT91SAM3 X8E	256	Мощная плата с новым процессором и большим числом контактов и входов

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

2.2.2 среды разработки Android

Существуют многочисленные IDE для например, Android Studio, NetBeans, IDEA, Borland JBuilder и другие. Таким прежде чем приступить к разработке приложения базе ОС Android, необходимо подготовить инструментарий. разработки приложения на базе ОС Android решил использовать готовое приложение Remote XY, так как она является наиболее и удобнои?.

Преимущества Remote XY перед аналогами:

1) Привлекательная внешность.

Благодаря встроенному интерфейсу Remote XY приложения получаются очень привлекательными. Вид основного интерфейса системы представлен ниже в соответствии с рисунком 2.1.

Рисунок 2.1 – Интерфейс RemoteXY

2) Простота использования.

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

Рисунок 2.2 – Рабочий стол RemoteXY

3) Отсутствие необходимости установки дополнительных сред разработки

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

4)Собственная библиотека

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

if (RemoteXY.button_1!=0){

/*кнопка нажата*/

}

else{

/*кнопка не нажата*/

} [2]

Источник: http://prog.bobrodobro.ru/96463

40 PSD-файлов с элементами веб-интерфейса

8 февраля 2012 | Опубликовано в Веб-дизайн | 9 Комментариев »

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

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

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

Наборы веб-элементов

1.Aluminoi UI Kit -набор веб-элементов в синих тонах

Скачать

2.Grey UI Pack -красивый набор в светло-серых тонах

Скачать

3.Sticky Butterscotch UI Kit -набор веб-элементов в коричнево-жёлтых тонах

Скачать

4.Cloudy UI kit -набор веб-элементов в бело-голубых тонах

Скачать

5.Moonify UI -интересный набор с элементами для веб-интерфейса

Скачать

6.Colorfull UI Elements -набор красочных веб-элементов

Скачать

7.Black UI Kit— красивый  набор в тёмных тонах

Скачать

8.UI Resource -оригинальный набор веб-элементов

Скачать

9.Clean UI Elements -аккуратный набор элементов в  светлых тонах

Скачать

10.Blaubarry UI Kit -большой набор элементов для создания сайтов

Скачать

11.Purple UI Elements -фиолетовые набор

Скачать

12.White&blue set — исходник  элементов веб-интерфейса

Скачать

13.UI Kit — Milky (PSD)-интересный набор веб-элементов

Скачать

14.Hand Drawn UI Kit— набор, в котором элементы выполнены в рукописном стиле

Скачать

15.Green web ui set-набор в зелёных тонах

Скачать

Панели навигации, админ-бары

16.Apple Style Navigation Menu-навигация в стиле «Apple»

Скачать

17.Top Fixed Bar-шаблон админ-бара

Скачать

18.Dropdown menu-красивая выпадающая менюшка

Скачать

19.Simple navigation menu-аккуратное навигационное меню

Скачать

20.Slick horizontal menu-горизонтальное меню

Скачать

Слайдеры

21.Clean and Simple Image Slider -шаблон для слайдера

Скачать

22.Slider Boxes-несколько готовых вариантов для слайдеров

Скачать

Формы входа и регистрации

23.Dark Clean Forms Collection-красивая форма регистрации в тёмных тонах

Скачать

24.Login Modal Box -симпатичная форма входа на сайт

Скачать

25.Simple modal sign up form-простая и красивая форма регистрации

Скачать

26.Login modal box— форма входа на сайт в светлых тонах

Скачать

27.Log In -красивая форма входа в стиле Web2.0

Скачать

Аудио- и видео-плееры

28.A Free Compact Music Player Design (PSD)-бесплатный красочный плеер

Скачать

29.Vimeo Player -исходник плеера «Vimeo»

Скачать

30.A Free Custom Video Player Design (PSD)-красивый видео-плеер в светлых тонах

Скачать

31.MP3 player -тёмный mp3-плеер

Скачать

32.Audio player -красивый плеер для проигрывания музыки

Скачать

33.Video player -красочный видео-плеер

Скачать

34.Audio Player -красивый аудио-плеер

Скачать

Поисковые панели

35.Search boxes -набор  форм поиска

Скачать

36. 4 Designs for Search Input Field -4 поисковые панели

Скачать

Другие графические элементы

37. Curled date ribbon-исходник ленточки с датой

Скачать

38. Sliding Tags-исходник облака тегов

Скачать

39. Psd Ribbon Classic Set-шаблоны красивых ленточек с надписью

Скачать

40. Psd Web Ribbon Sale Label Vol 1-исходники ленточек

Скачать

Автор подборки — Дежурка

Желаем  Вам творческих успехов!

Источник: http://www.dejurka.ru/web-design/40-web-interface-files/

20 принципов дизайна пользовательских интерфейсов

Перевёл статью Principles of User Interface Design. Уже когда сделал основной перевод и перешёл к редактуре, нашёл перевод на Хабре, а в комментариях в нему ещё одну версию перевода (-:

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

Рекомендую воспринимать нижеследующее не как заповеди, а как повод лишний раз задуматься.

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

1. Интерфейсы созданы для обеспечения взаимодействия
   Интерфейсы существуют, чтобы обеспечить взаимодействие между людьми и нашим миром. Они могут помочь прояснить, осветить, включить и показать взаимоотношения, объединяют нас, разделяют, управляют нашими ожиданиями и предоставляют доступ к услугам. Процесс проектирования интерфейса это не искусство, а сами интерфейсы не монументы. Интерфейсы выполняют некоторую работу и их эффективность может быть измерена. И, однако, они не утилитарны. Лучшие интерфейсы могут вдохновлять, пробуждать, мистифицировать и усиливать наше взаимодействие с миром.
2. Задача №1 — обеспечить ясность
   Ясность — это и первая и самая важная задача интерфейса. Чтобы быть эффективными, используя интерфейс, который вы создали, люди должны быть способны распознать что он собой представляет, осознать то, зачем они используют его, понять с чем интерфейс помогает взаимодействовать, предсказать, что произойдёт, когда они станут использовать его, и затем успешно взаимодействовать с ним. В то время, как при знакомстве с интерфейсом есть место некоторой загадке и отложенной выгоде от его использования, не должно быть места для путаницы. Ясность внушает доверие и помогает дальнейшему использованию. Сотня простых и понятных экранов предпочтительнее одного запутанного.
3. Удерживайте внимание любой ценой
   Мы живём в мире, полном отвлекающих факторов. Трудно даже ненадолго погрузиться в чтение без того, чтобы что-то нас не отвлекло и не перетянуло на себя внимание. Внимание же бесценно. Не отвлекайте пользователя мусором в боковой колонке своего приложения, помните, для чего экран нужен в первую очередь. Если кто-то читает, то позвольте ему закончить прежде чем показывать рекламу (конечно, если без этого никак). Цените внимание и тогда не только ваши пользователи станут счастливее, но и вы выгодаете от этого. Когда взаимодействие является основной целью, внимание становится необходимым условием. Удерживайте его любой ценой.
4. Дайте пользователям контроль в их руки
   Люди ощущают себя комфортно, когда они чувствуют контроль над собой и окружением. Бездумное ПО уводит их в сторону от комфорта, вовлекает в незапланированные взаимодействия, путает навигацией и непредвиденными результатами. Предоставьте пользователям контроль: показывайте системный статус, описывайте причинно-следственную связь (если вы сделаете это, получите то) и давайте им понять, что их ждёт на каждом шаге. Не переживайте, что это будет им очевидно, потому что почти всегда это совсем неочевидно.
5. Лучшие манипуляции — прямые Лучший интерфейс это тот, которого нет. Например, когда мы непосредственно управляем физическим объектом в нашем мире. Но т. к. это не всегда возможно, и многие объекты не физические, а информационные, мы делаем интерфейсы, которые помогают нам взаимодействовать с ними. Легко оступиться и добавить больше, чем необходимо в интерфейс: откарамеленные кнопки, градиенты и блеск, графику, опции, настройки, окна, вложения, и другой хлам. В итоге мы манипулируем элементами интерфейса, а не тем, что на самом деле важно. Вместо этого, стремитесь к идее прямого управления. Интерфейс должен быть незаметным и распознавать самые обычные человеческие жесты. В идеале, интерфейс должен быть настолько незаметным, чтобы у пользователя сложилось впечатление, что он непосредственно управляет объектом, находящимся в его фокусе.

   Добавлено: см. принцип Интерфейс — зло.

6. Одно основное действие на экран
   Каждый экран, который мы проектируем, должен быть предназначен лишь для одного важного действия пользователя. Это упрощает обучение, использование пользователями, и облегчает доработку и поддержку разработчиками при необходимости. Экраны, в которые заложены два и более целевых действий, быстро приводят к путанице. Как статья, которая должна содержать один чёткий тезис, так и каждый экран должен предлагать одно действие, наполняющее его смыслом.
7. Оставьте вторичные действия на втором плане
   Экраны с одним основным целевым действие могут иметь множество дополнительных действий, но они должны остаться вторичными! Ваша статья существует не для того, чтобы её можно было расшарить в твитере. Она существует, потому что люди могут прочитать и понять её. Делайте вес вторичных целевых действий визуально легче или показывайте их после того, как основное будет выполнено.
8. Сделайте следующий шаг естественным
   Лишь немногие действия являются заключительными, так что хорошенько проработайте для каждого действия следующий шаг. Предвидьте, каким будет следующее действие и спроектируйте его заранее. Так же, как и в обычном разговоре, предложите возможность для следующего слова. Не оставляйте человека висеть в небытии только потому, что они сделали то, что вы хотели, чтобы они сделали. Дайте им сделать следующий естественный шаг который поможет дальше достигнуть их цели.
9. Внешний вид следует из поведения (или «функция определяет форму»)
   Людям больше всего удобно с теми объектами, которые ведут себя так, как они ожидают. Другие люди, животные, вещи, программы. Когда кто-то или что-то ведёт себя в соответствии с нашими ожиданиями мы чувствуем будто у нас с ними хорошие отношения. Именно поэтому спроектированные элементы должны выглядеть соответственно своему поведению. На практике это означает, что кто-то должен быть в состоянии предсказать как элемент интерфейса себя поведёт просто взглянув на него. Если он выглядит как кнопка, то он и должен действовать как кнопка. Не заигрывайте с основами взаимодействия. Оставьте свою креативность для вопросов другого уровня.
10. Последовательность имеет значение
    Следуя предыдущему принципу, элемент не должен выглядеть подобно другому, если только их поведение не взаимосвязано. Элементы с одинаковым поведением должны выглядеть одинаково. Так же важно для различающихся элементов выглядеть непохожими (и непоследовательными). В стремлении быть последовательными новички дизайнеры часто неявно выделяют важные различия, используя те же самые визуальные трактовки, в то время как визуальные различия являются целесообразными.
11. Сильная визуальная иерархия работает лучше
    Сильная визуальная иерархия достигается когда на экране наблюдается чёткий порядок последовательности визуальных элементов. То есть, когда пользователи каждый раз просматривают подобные блоки в одинаковом порядке. Слабая визуальная иерархия даёт мало подсказок о том, где взгляду можно отдохнуть и, в итоге, создаёт суматоху и выглядит запутанной. Трудно поддерживать сильную визуальную иерархию, потому что визуальный вес относителен: когда всё выделено, то не выделено ничего. Если требуется добавить один визуально тяжёлый элемент на экран, то может понадобиться снизить акцент со всех элементов для сохранения иерархии. Большинство людей не замечают её, но это один из самых простых путей усилить или ослабить дизайн.
12. Продуманная организация снижает когнитивную нагрузку
    Как сказал Джон Маеда в своей книге «Простота», продуманная организация элементов на экране может сделать большое малым. Она помогает людям проще и быстрее понять интерфейс, если вы показали взаимосвязи контента в дизайне. Группируя подобные элементы, можно показать связь элементов с помощью взаимного расположения и ориентации. С помощью продуманной организации контента вы уменьшаете когнитивную нагрузку на пользователя, которому не нужно задумываться о том, как элементы соотносятся между собой, потому что вы уже сделали это за них. Не заставляйте пользователя думать. Вместо этого помогите ему и покажите связи на экране с помощью дизайна.
13. Подсвечивайте, но не указывайте
    Цвет физических предметов изменяется при изменении освещения. В яркий солнечный день мы видим дерево совсем не так, как на закате. Как в физическом мире где цвет относителен, в интерфейсе он так же не должен жёстко определять что-либо. Он может помочь подсветить, использоваться для акцента, но не должен быть единственным отличием элементов. Для длительного чтения используйте светлые или приглушённые цвета, оставляя яркие цвета для акцентирования. Конечно же, можно использовать яркие цвета и для фоновой заливки, только убедитесь, что это подходит вашей аудитории.
14. Прогрессивное раскрытие
    На каждом экране покажите только то, что необходимо. Если людям необходимо сделать выбор, покажите им достаточно информации, чтобы они могли сделать его, затем погрузите их в детали уже на последующем экране. Избегайте тенденции чересчур разъяснить и вывалить всё разом. Когда возможно, отложите принятие решения на нескольких экранах последовательно раскрывая информацию по мере необходимости. Это обеспечит более ясное взаимодействие с интерфейсом.
15. Помогайте людям по ходу
    В идеальном интерфейсе не требуется помощь, потому что интерфейс легок в изучении и удобен в использовании. В реальном же, помощь встроена и контекстна. Доступна только в нужных местах, когда необходима, и скрыта от взора всё остальное время. Предлагая идти в раздел помощи, чтобы найти ответ на вопрос, вы возлагаете ответственность на пользователей знать то, что им нужно искать, и как формулировать запрос. Вместо этого встраивайте помощь там, где она может понадобиться. Просто убедитесь, что она не стоит на пути пользователей,  которые уже знают как пользоваться интерфейсом.
16. Решающий момент: нулевое состояние
    Первый опыт использования интерфейса решающий, но при этом дизайнеры часто упускают его из виду. Для того, чтобы образом помочь пользователям освоиться, правильно будет спроектировать нулевое состояние, т. е. состояние, когда ещё ничего не происходило. Это состояние не должно быть пустым экраном. Оно должно обеспечить направление и содержать указание для быстрого начала работы. Большая часть затруднений возникает на самом первом шаге. Но как только люди понимают правила игры, у них повышаются шансы на успех.
17. Текущие проблемы являются наиболее важными
    Люди обычно ищут решение своих актуальных проблем, а не потенциальных, тех, что возникнут в будущем. Таким образом, нужно противостоять созданию интерфейсов для гипотетических проблем. Нужно изучать текущую ситуацию и проектировать решение существующих проблем. Это может быть не так интересно, как витать в облаках и строить воздушные замки, но если люди действительно будут пользоваться вашим интерфейсом, то это принесёт больше пользы.
18. Отличный дизайн незаметен
    Любопытное свойство отличного дизайна заключается в том, что он остаётся незаметным пользователям. Одна из причин этого в том, что если дизайн удачен, то пользователи могут сконцентрироваться на их задачах, а не интерфейсе. Когда они завершают свои задачи, они получают удовлетворение, а не рефлексируют над ситуацией. Для дизайнера это может быть жестоким открытием, т. к. мы в этом случае он получает меньше похвалы, когда дизайн оказывается действительно хорош. Но хорошие дизайнеры довольствуются тем, что их дизайном активно пользуются, и знают, что счастливые пользователи обычно молчат.
19. Развивайте навыки в других дизайнерских дисциплинах
    Визуальный и графический дизайн, типографика, копирайтинг, информационная архитектура и визуализация — все эти дисциплины являются частью дизайна интерфейсов. Они могут быть лишь затронуты вскользь или по ним можно специализироваться. Не участвуйте в дебатах и не смотрите свысока на другие дисциплины: возьмите от всех них те аспекты, что помогут развиваться дальше в вашей работе. Попробуйте взять что-то из, казалось бы, не связанных дисциплин: издательского дела, программирования, переплёта книг, скейтбординга, пожаротушения, каратэ.
20. Интерфейсы существуют, чтобы их использовали
    Как и в других направлениях дизайна, дизайн интерфейсов успешен тогда, когда люди используют результат вашего труда. Как в случае красивого стула, на котором невозможно комфортно сидеть, дизайн интерфейса терпит неудачу, когда люди предпочитают не пользоваться им. Таким образом, дизайн интерфейсов это и создание продукта и среды его использования. Недостаточно когда интерфейс тешит эго дизайнера — им должны пользоваться!

Источник: http://d8pusher.com/lifeflow/20-principles-designing-ui/

14 необходимых инструментов для управления интернет-магазином

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

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

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

Настройки дизайна магазина

При помощи модуля “Управление шаблоном” администратор может легко поменять шаблон магазина и настроить отображение определенных элементов интерфейса: логотипа магазина, цветовой схемы, меню и свойств товаров. Шаблоны можно загрузить с нашего официального сайта и разместить в папке templates или из модуля “Управление дизайном”, вкладка “Загрузить шаблон”.

Функционал “Редактор шаблонов” упрощает работу администратора с шаблонами. Чтобы открыть редактор выберите подпункт “Редактор шаблонов” в пункте главного меню пользователя “Система”.

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

Все виджеты настраиваются в подразделе главного меню “Настройки”- ”Виджеты”- “Гаечный ключ”.

По умолчанию на главной странице шаблонов ImageCMS установлены такие виджеты:

• Преимущества 
• Популярные товары 
• Акционные товары 
• Новинки 
• Бренды 
• SEO-текст 
• Новости 

На страницах товаров есть виджет “Похожие товары”. Больше информации по типам, созданию и редактированию информационных виджетов можно найти на странице документации “Виджеты”. 

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

Еще один полезный функционал, упрощающий работу администратора, — возможность прописать прямо в админке java-скрипты без изменения кода шаблона. Так администратор может легко установить в интернет-магазине такие сервисы как JivoSite (онлайн-чат), Binotel или Callbackhunter (заказ обратного звонка) и другие.

Настройки магазина

Функционал “Общие настройки” предоставляет администратору возможность задать ряд основных настроек магазина. В основном эти настройки касаются оптимизации работы интернет-магазина в целом, а также элементов оформления интерфейса покупателя.

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

Управление администраторами

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

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

По умолчанию в ImageCMS Shop создан только один один пользователь — Администратор, с неограниченными правами доступа.

Посмотреть, редактировать и удалить роль пользователя можно, выбрав пункт главного меню пользователя “Система” или “Пользователи” подпункт “Управление правами доступа”.

Создать роль пользователя можно кликом по клавише “Новая роль” в правом верхнем углу окна “Управление правами доступа”.

Настройки SEO

По вопросам SEO-продвижения мы ранее публиковали детализированный материал: Инструкция по самостоятельному SEO-аудиту интернет-магазина.

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

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

Настройки аналитики

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

По вопросам аналитики мы ранее публиковали детализированный материал: 17 шагов для настройки подробной аналитики вашего интернет-магазина.

Управление общими статьями

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

Управление блогом, новостями

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

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

Блог по умолчанию выводится как список страниц с изображениями, содержанием и ссылками на полную версию статьи. Для размещения новостей, обзоров и другой информации в административном профиле перейдите: Страницы → Список страниц → вкладка «Блог» → выберите нужную категорию →Создать страницу.

Использованный в сборке редактор TinyMCE позволяет легко вставлять медиа-файлы и форматировать текст.

Управление фотогалереей

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

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

Организация контента по категориям, брендам

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

Управление каталогом товаров

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

Категории товаров в каталоге создаются и редактируются через Пункт главного меню “Каталог товаров” -> “Категории товаров”.

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

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

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

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

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

Модуль “Импорт-Экспорт” позволяет автоматизировать процесс пополнения каталога, упрощая тем самым работу администратора с товарной массой магазина путем:

• автоматизации наполнения магазина большими объемами контента; 
• извлечения данных из магазина. 

Модули интеграции с 1С и системой Мой Склад позволяют гибко управлять большим количеством товаров в интернет-магазине на ImageCMS Shop.

Модуль интеграции с 1C обеспечивает автоматизированный обмен данными в режиме реального времени между интернет-магазином и учетной системой 1С. Установка не требует специальных настроек, а интеграция работает с минимальной нагрузкой на интернет-магазин. В результате владелец интернет-магазина получает актуальный каталог товаров и обработанные заказы покупателей.

При помощи модуля интеграции с системой “МойСклад” администратор может публиковать товарную номенклатуру из “МойСклад” прямо в интернет-магазин.

Модуль также служит для обратной передачи заказов из магазина в “МойСклад” для обработки и выгрузки ее результатов.

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

Управление скидками и баннерами

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

• Администратор может создавать неограниченное число скидок и настраивать их по типу пользователя, по дате, по количеству использований и т. д. 
• Можно предоставлять скидки на похожие товары (аксессуары к главному товару), объединенные в комплекты. Этот прием нацелен на поднятие среднего чека и дохода в целом. 
• Гибкая система управления баннерами дает возможность выводить разные типы баннеров на необходимых страницах. Ваши пользователи будут всегда в курсе самых горячих акционных предложений. 

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

Управление комментариями

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

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

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

Управление клиентской базой

Модуль «Пользователи» предназначен для администрирования пользователей интернет-магазина. В нем есть инструменты для управления данными пользователей, позволяющие разделять их на разные группы (администраторы/менеджеры/клиенты и др.), а также создавать новые группы пользователей, чтобы, например, присвоить им скидку (VIP-покупатели).

Администратору магазина доступна статистика по заказам: специальный функционал “Статистика” предоставляет подробную информацию отдельно по каждому из основных параметров.

Чтобы просмотреть статистику, необходимо выбрать пункт главного меню “Статистика”, а в нем необходимый раздел (Стартовая страница, Заказы, Пользователи, Продукты, Категории продуктов, Поиск).

Более подробную информацию об этом функционале можно найти в статье документации “Статистика”.

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

Управление заказами

Идеально продуманная работа с заказами упрощает работу с интернет-магазином. Пользователь с ролью администратора может:

1. Просматривать список статусов — для этого нужно выбрать пункт главного меню пользователя «Заказы», а в нем подпункт «Статусы заказов» 
2. Создать новый статус — при помощи кнопки «Создание статуса заказа» в правом верхнем углу окна «Статусы заказов» 
3. Редактировать статуса заказа — через список статусов 
4. Удалить статуса заказа — при помощи клавиши с изображением корзины справа окна «Статусы заказов», напротив статуса, подлежащего удалению 
5. Присвоить или изменить статус — через окно «Список заказов». Подробнее об управлении заказами — в нашей специальной статье документации “Статусы заказов”. 

Ускоряет процесс поиска фильтр заказов по ID, статусу, дате, заказчику, товару, сумме заказа и статусу оплаты. Также для полей фильтра “Заказчик” и “Товары” реализовано автодополнение, которое упрощает поиск нужных пользователей или товаров.

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

Источник: https://www.imagecms.net/blog/e-commerce/14-neobhodimyh-instrumentov-dlia-upravleniia-internet-magazinom