close

Вход

Забыли?

вход по аккаунту

Критерии готовности дизайна мобильного приложения

код для вставкиСкачать
КРИТЕРИИ ГОТОВНОСТИ ДИЗАЙНА
МОБИЛЬНОГО ПРИЛОЖЕНИЯ
АНДРЕЙ ЛИСИЦЫН
арт-директор
W W W.RED M ADROB OT.RU
2014
ЧТО ПРОИСХОДИТ,
КОГДА НИКАКИХ КРИТЕРИЕВ НЕТ?
© RED M ADROB OT, 2014
2
СИТУАЦИЯ №1
Разработчики постоянно что-то
уточняют и просят у дизайнеров.
ПРИЧИНА
Дизайнеры не знают, как правильно
передавать дизайн, разработчики
не могут объяснить.
РЕЗУЛЬТАТ
Увеличение срока разработки в 2-3 раза.
© RED M ADROB OT, 2014
3
СИТУАЦИЯ №2
Отдали дизайн на аутсорс,
а получили непонятно что.
ПРИЧИНА
Не смогли предоставить требования
к передаваемым файлам.
РЕЗУЛЬТАТ
Аутсорсеры рады, а вы не очень.
В итоге плохой продукт.
© RED M ADROB OT, 2014
4
РЕШЕНИЕ
Спецификация дизайна.
СЛЕДСТВИЕ
1.
Дизайнеры и разработчики говорят на одном языке.
2.
Никто никого не тормозит.
3.
Процесс описан и легко передается
новым сотрудникам.
© RED M ADROB OT, 2014
5
Спецификация (дизайна) — весь комплекс
документов, описывающих и иллюстрирующих
дизайн интерфейса, который следует
реализовать.
НАБОР СПЕЦИФИКАЦИИ
UI
Макеты
приложения
Карта
экранов
T
Палитра
элементов
Палитра
стилей
Нарезка
Метрики
T
Анимация
© RED M ADROB OT, 2014
Исходные
материалы
7
ТРЕБОВАНИЯ
Всегда быть в актуальном состоянии.
Что-то поменялось, оповести всеx.
Все составляющие спецификации должны
ориентироваться на разрешение целевого
устройства.
© RED M ADROB OT, 2014
8
РАЗРЕШЕНИЕ ЦЕЛЕВЫХ УСТРОЙСТВ
iOS
5S — 640x1136
4S — 640x960
6 plus — 1920x1080
iPad — 2048x1536
© RED M ADROB OT, 2014
Android
Aphone — 720x1280
7’ — 960*600
10’ — 1024*768
9
Карта экранов (Screenflow) — документ,
изображающий весь комплекс экранов
приложения и связей между ними.
КАРТА ЭКРАНОВ
screenmap.pdf
© RED M ADROB OT, 2014
11
ТРЕБОВАНИЯ
Контент должен быть максимально реальным.
Для этого он должен браться из модели данных
или API.
Экраны состояний
Zero Screen, Error Screen, Coach Marks,
Alert, уведомления.
Стрелки переходов и нумерация.
© RED M ADROB OT, 2014
12
Zero Screen
© RED M ADROB OT, 2014
Error Screen
13
Загрузка
© RED M ADROB OT, 2014
Уведомление
14
Палитра элементов (UI Kit) — графический
справочник, содержащий набор UI-элементов,
используемых в приложении.
ПАЛИТРА ЭЛЕМЕНТОВ
ui_kit.psd
ТРЕБОВАНИЯ
Собирать в ходе работы над дизайном.
Нажатия и скрытые состояния элементов.
Палитра стилей — справочник со всеми
стилями шрифтов и цветов в приложении;
каждый стиль имеет название и описание
параметров.
ПАЛИТРА СТИЛЕЙ (UI KIT)
styles.pdf
Цвета
Wh (Белый)
255 255 255
Bl (Черный)
0 0 0
Gr (Зеленый)
24 168 99
Rd (Красный)
233 0 27
Vt (Фиолетовый)
67 37 110
Шрифты
А1 Sample text 1
B1
PF DinDisplay Pro, Light, 21 Pt
А2 Sample text 4
PF DinDisplay Pro, Regular, 18 Pt
Sample text 1
PF DinDisplay Pro, Regular, 15 Pt
B2
Sample text 4
PF DinDisplay Pro, Regular, 12 Pt
НАРЕЗКА
© RED M ADROB OT, 2014
20
ДЛЯ IPHONE
Retina @2x и Retina HD @3x,
или один пак PDF в @1x.
Каждый объект png на прозрачном фоне.
© RED M ADROB OT, 2014
21
ДЛЯ ANDROID
Нарезка должна включать в себя 4 пака
графики: mdpi, hdpi,xhdpi,xxhdpi.
Все размеры шрифтов должны быть
в SP («шрифтовые» логические пиксели).
Все элементы, предполагающие растягивание
(кнопки, плашки, тени), должны быть
нарезаны не фиксированного размера,
а в 9patch.
© RED M ADROB OT, 2014
22
НЕ ЗАБЫТЬ
Иконку приложения для всех устройств.
Сплеш-скрины для всех разрешений.
Состояния элементов (иконки, кнопки).
© RED M ADROB OT, 2014
23
МЕТРИКИ
© RED M ADROB OT, 2014
24
© RED M ADROB OT, 2014
25
МЕТРИКИ
Все изображения, которые нарезаются
не в край, должны быть обведены для
вычисления отсутпов.
Стили шрифтов — см. палитру стилей.
Для iPhone — r255 g 255 b 255,
для Android —
­ #000000.
© RED M ADROB OT, 2014
26
АНИМАЦИЯ
© RED M ADROB OT, 2014
27
АНИМАЦИЯ
Нативная
Прототип или видео + текстовое описание
параметров.
Сложная статичная
Отдаем в png по кадрам.
Сложная интерактивная
Прототип или видео + текстовое описание
параметров.
© RED M ADROB OT, 2014
28
В ЧЕМ ДЕЛАТЬ
© RED M ADROB OT, 2014
29
ЧТО НЕ ЗАБЫТЬ
Согласовать с Dev.
© RED M ADROB OT, 2014
30
В ЗАВЕРШЕНИЕ
Сформируйте свой или используйте
наш набор спецификации — это упростит
вам жизнь.
Дизайнеры и разработчики заговорят
на одном языке.
Создавайте спецификацию в процессе разработки дизайна,
а не перед сдачей проекта.
Будущие проекты для одного и того же заказчика
проще и быстрее делать.
© RED M ADROB OT, 2014
31
СПАСИБО!
[email protected]
FB:/lisitsynandrey
© RED M ADROB OT
2014
1/--страниц
Пожаловаться на содержимое документа