Оноприенко Алла: "Один дизайн для всего"
TRANSCRIPT
ОДИН ДИЗАЙН ДЛЯ ВСЕГО
Алла Оноприенко
Особенности разработки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
