close

Вход

Забыли?

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

?

Основы мобильной разработки. Лекция 10

код для вставкиСкачать
13
Дизайн
Моисеенков Алексей
2
О чем сегодня
§ 
§ 
§ 
§ 
Что такое design driven company
Apple HIG
Material design
Посмотрим на всю эту красоту
3
4
5
Design driven company
§ 
§ 
§ 
§ 
Идеология идет сверху
Руководитель поддерживает главного человека по
дизайну и разделяет его взгляды
Концентрация на пользователях и восприятии
продукта
Все эти компании пересмотрели свои отношение к
дизайну и смогли адаптировать процесс создания
продукта
6
Единый опыт
§ 
§ 
Если бы хотите обеспечить опыт и впечатления то
надо иметь единую концепцию дизайна
Все продукты компании должны выглядеть
одинаково с точки зрения:
1. 
2. 
3. 
4. 
5. 
§ 
§ 
Взаимодействия
Понимания что и как работает
Цели
Текста
Отклика интерфейса
Все это и образует экосистему
Экосистема продуктов цель любой крупной компании
7
8
9
Что важно помнить
§ 
Элементы интерфейса всегда одинаковы:
1. 
2. 
3. 
4. 
5. 
Иконки
Поисковая строка
Расположение основных кнопок
Навигация имеет похожу структуру у похожих приложений
Вам тяжело запутаться в новом приложении, так как все
кажется знакомым
§  Цветовая гамма очень важна != одинаковые цвета
везде
§  Учитывайте, что пользователи переходят между
вашими приложениями
§  Должна быть концепция взаимодействия человека и
продукта
§  Консистентность
10
Как достичь той самой консистентности
§ 
§ 
§ 
§ 
§ 
Первый и самый легкий путь следовать уже
созданным платформенным правилам – гайдлайнам
Гайдлайн это рекомендации о том, как надо делать
дизайн интерфейса на определенной платформе
Две платформы – два гайдлайна
Компании не имеющие своей платформы тоже могут
иметь свои гайдлайны, но только для своих
продуктов
Платформа вещь огромная и гайдлайны сделаны для
всех типов приложений
11
12
13
Основные принципы
Используйте весь экран.
Погодное приложение
отлично показывает, что
пространство можно
наполнить важными
контекстными элементами
14
Контент на первом месте
Избавьтесь от теней и
других тяжелых
эффектов. Они
заркывают доступ к
информации и делают ее
поиск затруднительным.
15
Контекст совершаемых действий
Дайте понять в каком
месте вы находитесь.
Прозрачность помогает
понять какие еще
элементы доступны,
каков контекст
совершаемого действия.
И в данном случае центр
управления не занимает
весь экран, что тоже
важно.
16
Воздух
Интерфейсный воздух это
кол-во свободного места
на экране, это важно. Оно
фокусирует внимание на
содержании, а не на
форме.
Более того использование
чистого пространства
(негативное
пространство) создает
ощущение спокойствия.
17
Цвет
Добавьте цвет там, где он
нужен. Цветовые кнопки
и элементы должны быть
в теме приложения. При
этом они же легко
указывают на те
элементы, которые можно
подвергнуть воздействию.
18
Шрифт
Используйте системные
шрифты. С ними не будет
проблем, они везде
смотрятся хорошо и не
вылезают за границы.
Пользователь привык к
определенному шрифту и
не стоит его раздражать
дикими буквами.
Сосредоточьте его
внимание на сути и
контенте.
19
Кнопки
Старайтесь сделать
кнопки без обводки.
Размещайте их около тех
текстовых элементов, где
вы видите возможными
действие.
20
Глубина
Используйте технологии
позволяющие не уходить
от контента, например 3d
touch или лонг тап.
21
Отделяйте контент
Папка на рабочем столе
выделена специальным
полупрозрачным фоном.
Это не дает спутать папку
и рабочий стол.
22
Анимации и расположение
Расположение месяцев
логично. Анимации по
нажатию создают
ощущение вложенности и
иерархии.
Календарь отличное
приложение где формат
данных представлен так
как и должен быть.
23
24
25
Приложение на старте
§ 
§ 
§ 
§ 
§ 
§ 
§ 
Сразу дайте понять, что это за приложение,
покажите важную информацию сразу
Используйте все данные, которые вы можете собрать
из других приложений или настроек, сразу дайте
понять что человек «хозяин продукта»
Если можно обойтись без регистрации – делайте это,
тяните тот момент когда попросите пользователя
зарегистрироваться
Дайте пользователю на старте только ту
информацию, которая ему нужна
Используйте анимацию для продвижения по
приложению
Если у вас есть туториал сделайте так чтобы его
можно было просто пропустить
Не просите оценить ваше приложение сразу
26
И еще
§ 
§ 
§ 
§ 
Помните, что девайс можно повернуть
Стартовый экран важен (Launch Screen)
Если можете то не заставляйте читать лиц.
Соглашение и другие юридические детали
Если пользователь перезапустил приложение,
начните его в том же месте где он и закончил
27
28
Будьте готовы прервать процесс
использования приложения
§ 
§ 
§ 
§ 
§ 
§ 
Сохраняйте контекст и данные которые вводит
пользователь как можно чаще, но со смыслом
Сохраняйте состояние в котором было приложение
до остановки или сворачивания. Сохраните как
можно больше деталей, чтобы не пришлось
разбираться где мой текст или фотография
Никогда не завершайте приложение программно
Никогда не давайте пользователю кнопки: выйти и
закрыть относительно всего приложения
Показывайте ошибки если они есть, объясните
почему то или иное действие не удалось совершить
Не забывайте о пустых состояниях
29
30
Навигация
§ 
§ 
§ 
§ 
§ 
§ 
Иерархична
Следует контенту
Понятна
Всегда можно вернуться на шаг назад
Всегда понятно как отменить те или иные диалоги и
предложения
Пользователи знакомы со стандартными жестами
1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
Tap
Drag
Flick
Swipe
Double tap
Pinch
Touch and hold (long tap)
Shake (ну вот тут сомнительно)
31
Анимации
32
Что еще
§ 
§ 
§ 
Брэндинг не должен быть навязчивым
Старайтесь сохранить системный стиль если можете
Выбирайте не ядерные цвета, помните о палитре
§ 
§ 
Читайте обо этом всем вот тут
https://developer.apple.com/library/ios/documentation/
UserExperience/Conceptual/MobileHIG/index.html#//
apple_ref/doc/uid/TP40006556-CH66-SW1
33
34
35
Основные принципы Material Design
§ 
§ 
§ 
Метафора с реальным миром
Понятные визуальные очертания
Движение создает смысл и понимание
36
37
Material design
§ 
§ 
§ 
§ 
§ 
Язык на котором приложения общаются с
пользователями
Помогает понять как работает тот или иной сервис
Приближен к реальным действиям
Отражает перспективу как геометрическое понятие
https://design.google.com
38
39
40
41
Почему это важно
§ 
§ 
§ 
§ 
§ 
Дизайн должен идти вслед за технологией
Задача дизайна раскрыть всю мощь технологии за
спиной, ведь человек не знает о формулах и тоннах
кода
Дизайн это лицо и ваш вид, вы ведь хотите хорошо
выглядеть перед миллионами людей
Дизайн это мышление и отражение понимания мира
вами и и большими компаниями
Ну и наконец это просто эстетическое удовольствие
42
Спасибо за
внимание!
Автор
tekhnostrim
Документ
Категория
Без категории
Просмотров
316
Размер файла
7 100 Кб
Теги
лекция
1/--страниц
Пожаловаться на содержимое документа