Оноприенко Алла: "Один дизайн для всего"

ОДИН ДИЗАЙН ДЛЯ ВСЕГО

Алла Оноприенко

Особенности разработкиPhonegap – приложения

Позволяет нам реализовать больше идей

Особенности

Для бизнеса: уменьшение сроков разработки и экономия бюджета;1

Единая логика приложения;2

Обновление продукта и добавление функционала;

* Разработчики могут расширять возможности фреймворка.

3

Мобильная версия сайта.4

Сложности и подводные камниК чему нужно быть готовым и что держать в голове

iOS Guidelines

Возможности PhoneGap

Android Guidelines

Ищем баланс

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

Все держим в голове

Общий стиль: Flat vs. Material1

Первые отличия

Грамотно комбинируем решения, если нет данных опользователях

Cмартфоны и их аппаратные кнопки2

48px @ 1x4

San Francisco, Roboto? Google Fonts!3

+

Количествовмещаемойинформации;

Не нативен дляiOS;

Подходит дляAndroid иdesktop. Допустим дляiOS.

+

-

Лишний тапдля перехода.

-

+

Не подходитдля desktop;

Быстрый доступдо top levelобластей;

Подходит дляAndroid, iOS.

+

-

Близость каппаратнымкнопкам (Android);

-

Kнопкa “more”?

-

+

Не нативен дляiOS;

Быстрый доступдо top levelобластей;

Подходит дляAndroid и дляdesktop. Допустим дляiOS.

+

-

Kнопкa “more”?

-

+

Не нативен дляiOS и Android;

Количествовмещаемойинформации;

Допустим дляAndroid, iOS и для desktop.

+

-

Лишний тапдля перехода.

-

Material cards или Flat cards?

Концентрируют внимание на необходимой информации

Использовать material cards, если их бесконечное число -не следует т.к. это может тормозить работу самого приложения

+

-

Глобальные элементы

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

Сегментированное управление

iOS: удобен для быстрой сортировки контента, визуально понятнее,но если количество разделов больше 4х, то лучше использовать

вариант решения от андроид, т.е. табы, либо найти лучшее решение.

DropDown кнопки и дальше

Simple menus; Simple dialogs;1 2 Confirmationdialogs;

3

DropDown кнопки и дальше

Action sheets; 4 Popover; Data picker.5 6

Другие элементы

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

Подготовка материаладля разработчика

STYLE GUIDEЦветовая палитра, с указанием их hex/rgb;1

Типографика: начертание, расстояния, размеры, параграфы;2

Состояние кнопок (default, hover, pressed, disabled, active/selected);

* Есть вариант создать быстрый стайлгайд по основным скринам с использованием плагина PNG Express.

3

Формы - дропдауны, инпуты и их состояния;4

Контролы: сегмент контролы, свитчеры, табы;5

Расстояния, размеры, метрику страницы, элементов.5

ICON FONTSположительные моменты

Возможность масштабирования без потери качества;1

Более быстрая загрузка на странице по сравнению с обычнымиизображениями;

2

Возможность изменения цветового оформления;

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

3

Быстрое внедрение в проект с сохранением целостности каркаса.4

CПАСИБО ЗА ВНИМАНИЕ!

ВОПРОСЫ ?

Алла Оноприенкоa.onoprienko@mobidev.biz