Uploaded by nadina2002

ОСНОВЫ ДИЗАЙНА ПРОГРАММНЫХ ПРОДУКТОВ

advertisement
ОСНОВЫ ДИЗАЙНА ПРОГРАММНЫХ
ПРОДУКТОВ
• ВВЕДЕНИЕ В ДИЗАЙН ПРОГРАММНЫХ ПРОДУКТОВ
• ПРОГРАММЫ
ОСНОВЫ ДИЗАЙНА UI
• ИЗНАЧАЛЬНО ТЕРМИН «ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС» ПРИМЕНЯЛСЯ
КО ВСЕМ ВИДАМ ВЗАИМОДЕЙСТВИЯ ЧЕЛОВЕКА И МАШИНЫ. НА
ПРОТЯЖЕНИИ МНОГИХ ЛЕТ ШЛО РАЗВИТИЕ КОМПЬЮТЕРОВ И МОБИЛЬНЫХ
УСТРОЙСТВ И СЕГОДНЯ ЭТОТ ТЕРМИН ЧАЩЕ ВСЕГО ОЗНАЧАЕТ
«ПОЛЬЗОВАТЕЛЬСКИЙ ГРАФИЧЕСКИЙ ИНТЕРФЕЙС» (GUI).
• «ДИЗАЙН ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА (UID) ИЛИ ИНЖИНИРИНГ
ИНТЕРФЕЙСА . — ЭТО ДИЗАЙН UI ДЛЯ ПРОГРАММ И УСТРОЙСТВ, ТАКИХ КАК:
КОМПЬЮТЕРЫ, БЫТОВАЯ ТЕХНИКА, МОБИЛЬНЫЕ ТЕЛЕФОНЫ И ДРУГИЕ
ЭЛЕКТРОННЫЕ УСТРОЙСТВА С АКЦЕНТОМ НА КАЧЕСТВО ОПЫТА
ИСПОЛЬЗОВАНИЯ.
ЦЕЛЬ UI ДИЗАЙНА
• СОЗДАНИЕ МАКСИМАЛЬНО ПРОСТОГО И ПРОДУКТИВНОГО
ВЗАИМОДЕЙСТВИЯ С ТОЧКИ ЗРЕНИЯ ДОСТИЖЕНИЯ ЦЕЛЕЙ ПОЛЬЗОВАТЕЛЯ
(ОРИЕНТИРОВАННЫЙ НА ПОЛЬЗОВАТЕЛЯ ДИЗАЙН).
А КАК НАСЧЁТ ВЕБ ДИЗАЙНА?
• «ДИЗАЙН ДЛЯ ВЕБА ОТЛИЧАЕТСЯ ОТ ТРАДИЦИОННОГО ДИЗАЙНА UI
ПРОГРАММ. В ОСНОВНОМ, ДИЗАЙНЕР ДОЛЖЕН ПОЛНОСТЬЮ
КОНТРОЛИРОВАТЬ И ДЕЛИТЬ ОТВЕТСТВЕННОСТЬ ЗА UI С
ПОЛЬЗОВАТЕЛЯМИ И ИХ ОБОРУДОВАНИЕМ\ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
ЯКОБ НИЛЬСЕН, «РАЗЛИЧИЯ МЕЖДУ ВЕБ ДИЗАЙНОМ И ДИЗАЙНОМ GUI», 1971 ГОД
ВЕБ ДИЗАЙН—ЭТО НЕБОЛЬШОЙ
ПОДРАЗДЕЛ ДИЗАЙНА UI
• БОЛЬШИНСТВО ПРИЛОЖЕНИЙ ОСНОВАНЫ НА ВЕБ UI. МЫ ИСПОЛЬЗУЕМ ВЕБ
ТЕХНОЛОГИИ ДЛЯ СОЗДАНИЯ СЛОЖНЫХ ПРИЛОЖЕНИЙ. ВЕБ СТАНДАРТЫ И
БРАУЗЕРЫ СТАЛИ БОЛЕЕ-МЕНЕЕ УНИФИЦИРОВАННЫМИ, НО ВМЕСТО ЭТОГО
МЫ ИМЕЕМ ДЕЛО С МНОЖЕСТВОМ МОБИЛЬНЫХ УСТРОЙСТВ. ТАКИМ
ОБРАЗОМ, ЭТИ АППАРАТНЫЕ\ПРОГРАММНЫЕ КРИТЕРИИ УТРАТИЛИ СВОЮ
ЗНАЧИМОСТЬ.
ЦЕЛЬДИЗАЙНЕРА — СОЗДАТЬ ПОТРЯСАЮЩИЙ ДИЗАЙН
И ПОТРЯСАЮЩИЙ ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС
• ДОСТУПНЫ ДЕСЯТКИ ПРОДУКТОВ ДЛЯ ДИЗАЙНА UI. ТОЛЬКО ОТ ВАС
ЗАВИСИТ: КАКИЕ ИНСТРУМЕНТЫ И КАКИМ ОБРАЗОМ ИСПОЛЬЗОВАТЬ В
СВОЁМ РАБОЧЕМ ПРОЦЕССЕ.
ОСНОВНЫЕ
ПРИНЦИПЫ
ДИЗАЙНА
UI
•
ЯСНОСТЬ (В ЛЮБОМ МЕСТЕ ВАШЕГО ПРИЛОЖЕНИЯ ИЛИ САЙТА НЕКОТОРЫЕ ВЕЩИ ДОЛЖНЫ БЫТЬ
СОВЕРШЕННО ЯСНЫ ДЛЯ ПОЛЬЗОВАТЕЛЯ, ПРОСТОТА ИНТЕРФЕЙСА)
•
ГИБКОСТЬ (СОЗДАЙТЕ ЧТО-НИБУДЬ, ЧТО ХОРОШО ВЫГЛЯДИТ ВО ВСЕХ СИТУАЦИЯХ)
•
УЗНАВАЕМОСТЬ (ВЕЩИ ДОЛЖНЫ БЫТЬ АБСОЛЮТНО ЗНАКОМЫ ПОЛЬЗОВАТЕЛЮ: ИКОНКИ, НАВИГАЦИЯ,
•
ЭФФЕКТИВНОСТЬ (ПОЛЬЗОВАТЕЛЬ ВЫПОЛНИТ СВОЮ ОСНОВНУЮ ЗАДАЧУ САМЫМ ЭФФЕКТИВНЫМ
•
ПРИЗЫВЫ К ДЕЙСТВИЮ — ССЫЛКИ, КНОПКИ И Т.Д. ИСПОЛЬЗУЕТ ПРОСТЫЕ, ПОПУЛЯРНЫЕ ГЛАГОЛЫ,
РАСПРОСТРАНЁННЫЕ ЦВЕТОВЫЕ АССОЦИАЦИИ: КРАСНЫЙ ДЛЯ СРОЧНОГО, ЗЕЛЁНЫЙ ДЛЯ ГОТОВОГО И Т.Д.,
ВСЁ, ЧТО СВЯЗАНО С ОБРАБОТКОЙ ПЛАТЕЖЕЙ)
СПОСОБОМ И НИКОГДА НЕ ТЕРЯЕТ РЕЗУЛЬТАТ СВОЕЙ РАБОТЫ)
СОГЛАСОВАННОСТЬ И СТРУКТУРА (СТРУКТУРА ПРИДАЁТ ВЕЩАМ ДОСТУПНОСТЬ, СНИЖАЯ
БЕСПОРЯДОЧНОСТЬ И НАГРУЗКУ. СОГЛАСОВАННОСТЬ НАВИГАЦИИ НА ВСЕХ ЭКРАНАХ САЙТА ИЛИ
ПРИЛОЖЕНИЯ)
ЧТО ТАКОЕ ВАЙРФРЕЙМ?
ВАЙРФРЕЙМ – ЭТО ОБРАЗ ДИЗАЙНА НИЗКОЙ ТОЧНОСТИ (СКЕЛЕТ ВАШЕГО
ДИЗАЙНА). ОН ДОЛЖЕН ЧЕТКО ПОКАЗЫВАТЬ:
• ОСНОВОЮ ГРУППУ КОНТЕНТА (ЧТО?)
• СТРУКТУРУ ИНФОРМАЦИИ (ГДЕ?)
• ОПИСАНИЕ И БАЗОВУЮ ВИЗУАЛИЗАЦИЮ ВЗАИМОДЕЙСТВИЯ МЕЖДУ
ИНТЕРФЕЙСОМ И ПОЛЬЗОВАТЕЛЕМ (КАК?)
ПРИМЕР ВАЙРФРЕЙМА
ЧТО ТАКОЕ ПРОТОТИПЫ?
• ПРОТОТИП, КОТОРЫЙ ЧАСТО ПУТАЕТСЯ С ВАЙРФРЕЙМОМ, — ЭТО СЕРЕДИНА НА
ПУТИ К ВЫСОКОКАЧЕСТВЕННОМУ ИЗОБРАЖЕНИЮ ФИНАЛЬНОГО ПРОДУКТА,
СТИМУЛИРУЮЩЕГО ВЗАИМОДЕЙСТВИЕ С ПОЛЬЗОВАТЕЛЬСКИМ ИНТЕРФЕЙСОМ.
• ПРОТОТИП – ЭТО СИМУЛЯЦИЯ ФИНАЛЬНОГО ВЗАИМОДЕЙСТВИЯ МЕЖДУ
ПОЛЬЗОВАТЕЛЕМ И ИНТЕРФЕЙСОМ. ОН МОЖЕТ ВЫГЛЯДЕТЬ НЕ СОВСЕМ ТАК, КАК
БУДЕТ ВЫГЛЯДЕТЬ ФИНАЛЬНЫЙ ПРОДУКТ, НО ОЧЕНЬ ПОХОЖЕ НА НЕГО
(ОПРЕДЕЛЕННО НЕ СЕРОВАТЫЙ НАБРОСОК).
ПРИМЕР ПРОТОТИПА
ЧТО ТАКОЕ МОКАП?
• МОКАП – ЭТО СЕРЕДИНА НА ПУТИ К ВЫСОКО-ТОЧНОМУ, СТАТИЧНОМУ ДИЗАЙНОБРАЗУ. ЧАСТО МОКАПЫ – ЭТО ГРАФИЧЕСКИЕ НАБРОСКИ ИЛИ ДАЖЕ
АКТУАЛЬНЫЙ ГРАФИЧЕСКИЙ ДИЗАЙН.
ПРИМЕР МОКАПА
ПРИМЕР
Вайрфрейм
Макет рабочий
ПРОТОТИПЫ И ТЕСТИРОВАНИЕ
• ЭТИ МЕТОДЫ ПОЗВОЛЯЮТ ВАМ ИССЛЕДОВАТЬ И ВЫЯВЛЯТЬ ПРОБЛЕМЫ В ВАШИХ
ВАЙРФРЕЙМАХ НА РАННЕЙ СТАДИИ, БЕЗ ОТРИСОВКИ ТОЧНЫХ МАКЕТОВ.
• ВЫ МОЖЕТЕ СДЕЛАТЬ ВАШИ ВАЙРФРЕЙМЫ ИНТЕРАКТИВНЫМИ С
ПОМОЩЬЮ INVISION. HTTPS://WWW.INVISIONAPP.COM/
• РАННИЙ ПРОТОТИП ТЕСТИРУЕТСЯ ВЖИВУЮ КАК ВАМИ, ТАК И КОМАНДОЙ, ИЛИ
ГРУППОЙ ПОЛЬЗОВАТЕЛЕЙ ИЗ ЦЕЛЕВОЙ АУДИТОРИИ.
PHOTOSHOP - ПЛАТНОЕ
(МОЖНО ПОЛУЧИТЬ ЛИЦЕНЗИЮ НА ГОД (ОКОЛО 24 ТЫСЯЧ РУБЛЕЙ) ЛИБО ЖЕ ПЛАТИТЬ ЗА ПРОДУКТ КАЖДЫЙ МЕСЯЦ
(ПРИМЕРНО 1 300 РУБЛЕЙ БЕЗ НДС).
•
БЕСПЛАТНО СКАЧАТЬ PHOTOSHOP CS6 С ОФИЦИАЛЬНОГО САЙТА
http://adobephotoshoprus.ru/fotoshops-photoshop-cs6/
• БАЗОВЫЕ ЗНАНИЯ ПО ФОТОШОПУ ДЛЯ НОВИЧКОВ И ЧАЙНИКОВ
https://www.youtube.com/watch?v=rXlJimW-mes
FIGMA - УСЛОВНО-БЕСПЛАТНОЕ ПО
(ЕСТЬ ПЛАТНОЕ -12 ДОЛЛАРОВ В МЕСЯЦ)
https://www.figma.com
ПЛЮСЫ:
• СОВМЕСТНАЯ РАБОТА НАД ОТДЕЛЬНЫМИ ПРОЕКТАМИ
• ПРИСУТСТВУЕТ ВОЗМОЖНОСТЬ ОСТАВЛЯТЬ КОММЕНТАРИИ. ИХ МОГУТ ДОБАВЛЯТЬ
НЕ ТОЛЬКО РЕДАКТОРЫ, НО И ОБЫЧНЫЕ ПОЛЬЗОВАТЕЛИ.
• КОНТРОЛЬ ВЕРСИЙ. МОЖНО ПОСМОТРЕТЬ, КТО И КОГДА ВНОСИЛ ИЗМЕНЕНИЯ, А
ТАКЖЕ ОТКАТИТЬСЯ ДО НУЖНОЙ ВЕРСИИ ВСЕГО В ПАРУ КЛИКОВ В СЛУЧАЕ
НЕОБХОДИМОСТИ.
• ЛЮБОЙ ЭЛЕМЕНТ СОЗДАВАЕМОГО ИНТЕРФЕЙСА МОЖНО ВЫБРАТЬ И ПРИ
НЕОБХОДИМОСТИ ЭКСПОРТИРОВАТЬ.
• ЕСТЬ ВОЗМОЖНОСТЬ СОЗДАНИЯ ЗАВИСИМЫХ КОПИЙ ОРИГИНАЛА.
•
ЕСТЬ ВОЗМОЖНОСТЬ ПЕРЕДВИГАТЬ
ВМЕСТО ВЕКТОРНЫХ ТОЧЕК ЛИНИИ
• FIGMA РАБОТАЕТ С GOOGLE FONTS
• РАЗРАБОТЧИКИ СОЗДАЛИ LIVE-CHAT, ПОЗВОЛЯЮЩИЙ БЫСТРО СВЯЗАТЬСЯ С
СОТРУДНИКОМ ТЕХПОДДЕРЖКИ, ЗАДАВ ТОМУ ВОПРОС (ТОЛЬКО ПО ДЕЛУ!)
ИЛИ РАССКАЗАВ О КАКОЙ-ЛИБО ТЕХНИЧЕСКОЙ ПРОБЛЕМЕ.
МИНУСЫ:
• ЗАВИСИМОСТЬ ОТ НАЛИЧИЯ ПОДКЛЮЧЕНИЯ К СЕТИ
• ОТСУТСТВУЕТ ОКРУГЛЕНИЕ ПОЛУПИКСЕЛЕЙ.
• ПОЧТИ НЕТ ПЛАГИНОВ.
НУЖНЫЕ ССЫЛКИ К FIGMA
http://figmadesign.ru/3-1-0-sozdanie-novogo-fajla-i-obzor-osnovnyh-funkcij.html начало работы, обзор
https://www.youtube.com/watch?v=shL-27JUe9I – уроки на Figma
СПАСИБО ЗА ВНИМАНИЕ!
Download