Оноприенко Алла: "Один дизайн для всего"
TRANSCRIPT
![Page 1: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/1.jpg)
ОДИН ДИЗАЙН ДЛЯ ВСЕГО
Алла Оноприенко
![Page 2: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/2.jpg)
Особенности разработкиPhonegap – приложения
Позволяет нам реализовать больше идей
![Page 3: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/3.jpg)
Особенности
Для бизнеса: уменьшение сроков разработки и экономия бюджета;1
Единая логика приложения;2
Обновление продукта и добавление функционала;
* Разработчики могут расширять возможности фреймворка.
3
Мобильная версия сайта.4
![Page 4: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/4.jpg)
Сложности и подводные камниК чему нужно быть готовым и что держать в голове
![Page 5: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/5.jpg)
iOS Guidelines
Возможности PhoneGap
Android Guidelines
Ищем баланс
* Есть есть данные, что большая часть ЦА пользуется, например, продукцией Apple, то логичнее придерживатьсягайдлайнов от Apple.
![Page 6: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/6.jpg)
Все держим в голове
Общий стиль: Flat vs. Material1
Первые отличия
Грамотно комбинируем решения, если нет данных опользователях
Cмартфоны и их аппаратные кнопки2
48px @ 1x4
San Francisco, Roboto? Google Fonts!3
![Page 7: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/7.jpg)
+
Количествовмещаемойинформации;
Не нативен дляiOS;
Подходит дляAndroid иdesktop. Допустим дляiOS.
+
-
Лишний тапдля перехода.
-
![Page 8: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/8.jpg)
+
Не подходитдля desktop;
Быстрый доступдо top levelобластей;
Подходит дляAndroid, iOS.
+
-
Близость каппаратнымкнопкам (Android);
-
Kнопкa “more”?
-
![Page 9: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/9.jpg)
+
Не нативен дляiOS;
Быстрый доступдо top levelобластей;
Подходит дляAndroid и дляdesktop. Допустим дляiOS.
+
-
Kнопкa “more”?
-
![Page 10: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/10.jpg)
+
Не нативен дляiOS и Android;
Количествовмещаемойинформации;
Допустим дляAndroid, iOS и для desktop.
+
-
Лишний тапдля перехода.
-
![Page 11: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/11.jpg)
Material cards или Flat cards?
Концентрируют внимание на необходимой информации
Использовать material cards, если их бесконечное число -не следует т.к. это может тормозить работу самого приложения
+
-
![Page 12: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/12.jpg)
Глобальные элементы
Если есть необходимость освободить место под контроллы, толучше использовать выравнивание названия по левому краю
![Page 13: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/13.jpg)
Сегментированное управление
iOS: удобен для быстрой сортировки контента, визуально понятнее,но если количество разделов больше 4х, то лучше использовать
вариант решения от андроид, т.е. табы, либо найти лучшее решение.
![Page 14: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/14.jpg)
DropDown кнопки и дальше
Simple menus; Simple dialogs;1 2 Confirmationdialogs;
3
![Page 15: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/15.jpg)
DropDown кнопки и дальше
Action sheets; 4 Popover; Data picker.5 6
![Page 16: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/16.jpg)
Другие элементы
Имеют визуальные различияна платформах, но их можносгладить гармоничноиспользовав в своем дизайне.
![Page 17: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/17.jpg)
Подготовка материаладля разработчика
![Page 18: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/18.jpg)
STYLE GUIDEЦветовая палитра, с указанием их hex/rgb;1
Типографика: начертание, расстояния, размеры, параграфы;2
Состояние кнопок (default, hover, pressed, disabled, active/selected);
* Есть вариант создать быстрый стайлгайд по основным скринам с использованием плагина PNG Express.
3
Формы - дропдауны, инпуты и их состояния;4
Контролы: сегмент контролы, свитчеры, табы;5
Расстояния, размеры, метрику страницы, элементов.5
![Page 19: Оноприенко Алла: "Один дизайн для всего"](https://reader036.vdocuments.site/reader036/viewer/2022081511/58eb7a531a28ab90578b4645/html5/thumbnails/19.jpg)
ICON FONTSположительные моменты
Возможность масштабирования без потери качества;1
Более быстрая загрузка на странице по сравнению с обычнымиизображениями;
2
Возможность изменения цветового оформления;
* Использовать можно как и шрифтовые иконки, с посторонних ресурсов, так и создать собственные.
3
Быстрое внедрение в проект с сохранением целостности каркаса.4