Сенсорный графический интерфейс Умного Дома, правила...

ЧАСТЬ 3: "СЕНСОРНЫЙ ГРАФИЧЕСКИЙ ИНТЕРФЕЙС УМНОГО ДОМА, ПРАВИЛА ПОСТРОЕНИЯ, ПРИМЕРЫ ПО"

РАЗДЕЛ 1: ОСНОВЫ ПОСТРОЕНИЯ ГРАФИЧЕСКИХ ИНТЕРФЕЙСОВ

Курс «Умный Дом: Базовый Уровень»

Неделя №3

Международный центр Smarthome Training

2013

Николай Русанов

ПЛАН КУРСА "СЕНСОРНЫЙ ГРАФИЧЕСКИЙ ИНТЕРФЕЙС УМНОГО ДОМА, ПРАВИЛА ПОСТРОЕНИЯ"

Раздел 1 Основы построения

графических интерфейсов Три составляющих

совершенства Структура Функциональность Эстетика

Юзабилити Варианты структуры Правила оформления Шрифты Цвета Взаимодействие с

заказчиком Формы для заполнения

Раздел 2 Примеры инструментов

для сенсорного управления умным домом

Готовые приложения и интерфейсы

Control4 Crestron Wiser Smart-Bus for Android

Примеры приложений для разработки графического интерфейса

Свободный дизайн от производителя, Clipsal Homegate

Независимое ПО, iRidium Mobile

ТРИ СОСТАВЛЯЮЩИХ СОВЕРШЕНСТВАСтуктура, функциональность, эстетика

СТРУКТУРА

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

Основные функции должны быть доступны за 1-2 нажатия

СТРУКТУРА

Правильная структура – ключ к удобному использованию функций интерфейса

Не используйте более 3-х уровней глубины структуры

ФУНКЦИОНАЛЬНОСТЬ

Функциональность нужна в меру Мера определяется

возможностями заказчика Все равно реально будут

использоваться только основные функции – некоторые нужны только для галочки

НУЖНЫ ЛИ ВСЕ ФУНКЦИИ?

Функции помещения, где находится экран – делать максимально, 100% Помещения рядом – основное, 50% Остальной дом – главные параметры и

сценарии, 5% Заказчик часто просит слишком много

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

Защищайте критические функции паролем

ВАРИАНТЫ ФУНКЦИЙ ЭЛЕМЕНТОВ ИНТЕРФЕЙСА Переход на страницу

или вызов страницы Управление функцией

системы (каналом реле/диммера, ИК командой и др.)

Управление сценарием

Расписание Случайное Ежедневное Еженедельное Ежемесячное Ежегодное По праздникам И др.

Специальная функция

Страница

Канал

Сценарий

Расписание

Другое

ЭСТЕТИКА Дизайн – одежда

интерфейса. По ней встречают

Чтобы сделать красивый дизайн, надо: Или взять готовый и не

испортить Или заказать у

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

Нельзя приносить удобство в жертву дизайну Все элементы должны

быть достаточно крупные

ЮЗАБИЛИТИ!Предполагает простое использование без обучения (или с совсем небольшим)

ПРАВИЛА УДОБСТВА ИСПОЛЬЗОВАНИЯ

Используйте общепринятое значение изображений и слов

Где возможно – используйте именно слова

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

ПРАВИЛА УДОБСТВА ИСПОЛЬЗОВАНИЯ

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

Похожие функции должны находиться в одних и тех же местах. Выглядеть похоже

Самые популярные страницы должны иметь наименьшее количество вариантов использования

ВАРИАНТЫ СТРУКТУРЫГрафического интерфейса

СТР

УК

ТУ

РА

«М

ЕН

Ю»

Главная страница, которая ведет на второстепенные. Каждая из второстепенных имеет кнопочку НАЗАД.

Классический вариант – если главная страница – план дома или квартиры.

Такой вариант визуально понятен.

СТР

УК

ТУ

РА

«З

АК

ЛА

ДК

И»

Меню на каждой странице. Закладка страницы, на которой мы находимся – подсвечена.

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

Темплейты часто работают на этом принципе.

СТР

УК

ТУ

РА

«П

ЕР

ЕЛ

ИС

ТЫ

ВА

НИ

Е»

С каждой страницы есть ссылка на следующую и предыдущую.

Удобно для маленьких экранов.

ДРУГИЕ ВАРИАНТЫ СТРУКТУРЫ

Смешанный Подход «Одной

большой клавиши» Подход «Одной

страницы»

ЭСТЕТИКАПравила красивого оформления

ПОСТОЯНСТВО Одинаковые детали

интерфейса должны быть видны на всех страницах одинаково и в одинаковых местах Названия страниц Шрифты Цвета Позиции невигационных

элементов Главная страница должна

быть идеальной, часто обо всем дизайне судят о ней

Всегда должно быть понятно, что клиент должен делать дальше

РОВНО И ОДИНАКОВО = ПРАВИЛЬНО

Хорош

о

Пл

охо

Пл

охо

Пл

охо

Пл

охо

ШРИФТЫИмеют значение

ШРИФТЫ

Шрифты с засечками (Times New Roman и др.) многим кажутся более простыми для чтения

Шрифты без засечек (Arial и др.) выглядят чище и современнее

Не используйте много разных шрифтов одновременно

Все заглавные буквы – сложно читать

ШРИФТЫ

Убедитесь в достаточном контрасте между текстом и фоном

Размер букв должен быть достаточен для людей со слабым зрением

Привлекайте внимание к важным вещам

размером и выделением слов

Проверяйте грамматику. Мало что удручает заказчика так, как простая ошибка

ЦВЕТАДаже важнее шрифтов

ЦВ

ЕТО

ВО

Й К

РУ

Г

Основные правила выбора цветов для дизайна интерфейса

МО

НО

ХР

ОМ

АТИ

ЧЕС

КА

Я Ц

ВЕТО

ВА

Я

СХ

ЕМ

А

• Выглядит чисто, элегантно

• Успокаивает

• Голубой и зеленый варианты особено

АН

АЛ

ОГИ

ЧН

ЫЕ Ц

ВЕТА

Центральный цвет – основной, остальные два используются для усиления эффекта.

Создают эффект безмятежности.

Есть опасность низкого контраста.

ДО

ПО

ЛН

ЯЮ

ЩИ

Е Ц

ВЕТА

Создают яркое впечатление

В больших количествах сложно сохранить гармонию

Лучше всего сочетать теплые цвета (рядом с красным) и холодные

РА

СЩ

ЕП

ЛЕН

НЫ

Е Д

ОП

ОЛ

НИ

ТЕЛ

ЬН

ЫЕ

ЦВ

ЕТА

Менее напряженная цветовая схема

ТР

ИА

ДЫ

Гармоничное, не настолько контрастное сочетание

Один из цветов должен быть главным, остальные – дополнять его

КВ

АД

РА

ТН

АЯ

И П

РЯ

МО

УГО

ЛЬ

НА

Я

СХ

ЕМ

Ы

Самое цветастое сочетание

Чтобы сохранить баланс – необходимо выбрать один основной цвет

90% ИНТЕРФЕЙСОВ НИКУДА НЕ ГОДЯТСЯ

ВЗАИМОДЕЙСТВИЕ С ЗАКАЗЧИКОМТехническое задание, формы для построения

СТРАНИЦЫ/СЛАЙДЫ

Предварительно зарисовываем вероятные страницы

ТАБЛИЦА СЦЕНАРИЕВ

Вписываем предполагаемые сценарии и значения каналов для них

Не забываем про скорость выполнения

ТАБЛИЦА РАСПИСАНИЙ

Вводим возможные расписания

Основные: День-ночь Лето-зима

МЕЖДУНАРОДНЫЙ ЦЕНТР SMARTHOME TRAINING CENTER

В процессе создания материала использованы собственные разработки Smarthome Training Center. Распространение и перепечатка возможны только с разрешения

автора.

www.smarthometraining.ru

blog.smarthometraining.ru

info@smarthometraining.ru