В этом вводном уроке на наглядных примерах будет показано, что такое дизайн вообще и какие ключевые понятия в него входят. Овладеете основными терминами, о которых все слышали, но которые никто не понимает до конца.
Дизайн — это результат проектирования объекта с целью решения поставленных задач, в частности художественных (эстетических).
В широком смысле дизайн концентрируется не только на художественном конструировании, а и на решении ряда других проблем: технических, социальных, потребительских и т.д.
Дизайн должен решать проблему максимально эффективно.
В зависимости от контекста и поставленной задачи дизайн решает проблемы по-разному. Давайте посмотрим на рекламные материалы Coca–Cola 1949 года:
С точки зрения графического дизайна этот плакат должен привлекать внимание, идентифицировать бренд, побуждать к действию — все это задача дизайна в данном контексте. В этом нам помогают композиция, теория цвета и типография — инструменты и принципы дизайна. Ключевую роль здесь также играет копирайтинг или как написанный текст, но это уже смежная дисциплина.
Теперь сконцентрируемся на красном автомате с напитками (который через аллегорию изображен парящим в небе).
Посмотрите на размер дверцы, расположение ручки и приёмника монет. Обратите внимание на петли и решетку охлаждения. Каждая деталь проработана и имеет причину, по которой она выполнена именно так.
Это результат промышленного дизайна – отдельной сложной дисциплины, в которой учитываются совсем другие аспекты: функциональные требования к изделию, технические ограничения, строение и компоновка деталей. Для создания такого дизайна уже потребуется инженерная помощь или консультации с соответствующими специалистами.
Из приведенного должно быть понятно, что дизайн бывает разным, но каждое его направление имеет границы и области применения. Мы собираемся изучать очень специфический вид дизайна — UX/UI дизайн для экранных графических интерфейсов.
Интерфейс — это набор инструментов взаимодействия двух систем. С английского interface означает «место столкновения». В случае с дизайном, одной из систем всегда является человек.
Давайте розберемо UI (User Interface) інтерфейс користувача мікрохвильової печі.
Лицевая панель включает несколько элементов, которые мы можем настраивать в зависимости от наших потребностей:
- Дверцята з вікном та ручкою для відкриття — відкриває доступ до контейнера для їжі та є індикатором. Коли йде розігрів, то ми бачимо світло;
- Ручка потужності — визначає, з якою силою проводити розігрів;
- Ручка таймера — встановлює, як довго проводити розігрів. Крім того, як тільки ми виставляємо час, так одразу починається процес приготування. Тобто, ця ручка ще є вмикачем.
Все вышеупомянутое является элементами интерфейса пользователя.
На примере нашей ретро микроволновой печи рассмотрим, чем являются UI и UX дизайн.
UI–дизайн (User Interface Design) или дизайн интерфейса пользователя – определяет, как выглядит интерфейс пользователя, а именно:
- Материалы и цвета — металл и стекло, кремовый и бронзовый цвета;
- Стиль механических элементов — ретро;
- Стиль иконок и надписей — плоский, шрифт без засечек.
UX–дизайн (User Experience) или опыт взаимодействия – определяет, как пользователь работает с интерфейсом, а именно:
- Какие элементы интерфейса выбрать — вместо механических ручек UX-дизайнер мог поставить дисплей с сенсорным управлением и индикаторами состояния. Также он мог установить дополнительный переключатель для включения/выключения печи или кнопку открытия дверей;
- Размер и расположение элементов интерфейса — с какой стороны поставить ручку, какого размера окно установить в дверцах, насколько большими должны быть ручки.
У коло обов'язків UX–дизайнера також входить пошук сценариев использования продукта на основе ролей пользователей. Например, в нашем случае можно выделить несколько сценариев:
- Студент разогревает замороженную пиццу перед завтраком — кажется, разогревать будут часто, может стоит задуматься о единой кнопке, которая автоматически выставит мощность в 240 ватт и таймер на 3 минуты?
- Мама запекает рыбу в фольге — это может занять целый час, стоит задуматься о громком сигнале окончания приготовления, в этот момент мама может находиться в другой комнате.
Интерфейс микроволновой печи можно описать как физический и даже механический. Но дизайнеры UX/UI работают с графическими экранными интерфейсами. То есть, все элементы интерфейса находятся на экране монитора или мобильного устройства (смартфон, планшет).
Очень важно понимать, что экран монитора настольного компьютера и экран смартфона имеют важные отличия. А именно то, как мы с ними взаимодействуем:
- На настольных компьютерах используется клавиатура и мышь;
- На смартфонах, планшетах и умных часах вместо мыши и клавиатуры используют только пальцы. Это накладывает свои ограничения. Например, нельзя сделать кнопку на мобильном устройстве слишком маленькой, поскольку по ней невозможно попасть пальцем.
Итак, UX/UI дизайнеры создают графические экранные интерфейсы, а именно дизайн для:
- Веб–сайтов — что мы усиленно будем изучать;
- Мобильных приложений — коснемся лишь поверхностно;
- Программ для настольных компьютеров.
Дизайн для веб–сайтов и мобильных приложений – это то, над чем UX/UI дизайнеры работают 99% времени. В этом курсе мы сделаем акцент на дизайне для сайтов, это называют веб–дизайном.
Для лучшего понимания вот вам еще несколько видов необычных интерфейсов. Мы не будем с ними работать, но они существуют:
- Символьный интерфейс или командная строка — один из первых компьютерных интерфейсов, который и сегодня используется профессионалами. Требует высокой технической подготовки, но взамен обеспечивает гибкое и эффективное управление компьютером. Для работы использует исключительно клавиатуру;
- Жестовой интерфейс — управление с помощью жестов рук и сенсорного экрана. Также возможно распознавание без касаний. Так, например, мультимедийная система последних моделей автомобилей BMW позволяет управлять громкостью музыки с помощью интуитивного жеста покручивания указательного пальца;
- Голосовой интерфейс — один из самых понятных способов взаимодействия с компьютерными системами с помощью человеческой речи. Особенно актуален, когда устройство лишено клавиатуры или когда его использование отвлекает от основного занятия (например, водителя в пути).
Новые интерфейсы продолжают разрабатываться и сегодня. Компания Илона Маска Neuralink работает над созданием нейроинтерфейса, который обеспечит взаимодействие мозга человека и компьютера напрямую. Только представьте себе, насколько изменится качество опыта пользователя, когда вы сможете управлять курсором мыслью и вводить текст, не произнося ни слова.
С этого момента этот курс предназначен для самостоятельного изучения и выполнения домашних заданий. Понимаю, что некоторые задания могут быть непростыми для вас.
Для дополнительной поддержки воспользуйтесь чатом в телеграме. Здесь вы сможете задать вопросы, касающиеся уроков, или просмотреть примеры правильного выполнения от других учеников.
Чат недоступен для граждан россии.
Задание 1. Разберите интерфейс двух конкретных предметов, с которыми вы сами взаимодействуете. Например, фен, стиральная машина, пульт от телевизора и так далее. То, чем вы часто пользуетесь. А именно — расскажите, что в выбранном устройстве есть UI (внешний вид: цвет, стиль, шрифты и так далее), а чем является UX (почему у предмета именно такая форма, почему элементы расположены именно так, а не иначе). Постарайтесь докопаться до сути. Например, ручка имеет такую форму, чтобы её было удобно держать в руке.
Если не удается выполнить это задание, перечитайте раздел Что такое UX, UI дизайн и в чем разница? этого урока.
Задание 2 (повышенной сложности, выполнять по желанию). Разберите предмет, у которого нет кнопок и электроники, например, ложку. Где там UX и UI части дизайна? Почему она имеет именно такую форму?
Задание 3. Назовите один новый вид интерфейса, который не описан в уроке. Они точно существуют, можете и свой придумать.
Сегодня вы познакомились с основными терминами дизайна. Пожалуйста, убедитесь, что вы хорошо в них разбираетесь. Сделайте домашнее задание в полном объеме, прежде чем переходить к следующему уроку. Прочитайте урок еще раз через некоторое время.
Пройти тест
Чтобы урок был засчитан как пройденный, вам нужно правильно ответить на 80% вопросов из теста. Чтобы пройти тест и проверить свои знания, вам нужно войти в систему и записаться на курс или зарегистрироваться, если вы еще этого не сделали.
Продолжить обучение
Завдання 1.
Airpods 2 разом з футляром
UI
матеріал – гладкий пластик
колір – білий
стиль - мінімалізм
стиль надписів – шрифт без засічок
UX
- форма навушника зроблена спеціально так, щоб під час руху він не випав;
- ручка навушника зроблена для зручності: при закінченні використання зручно взяти і забрати навушник назад у футляр;
- всередині навушника є сітка, яка виконує захисну функцію;
- додатково є ще збоку роз’єм, зверху і знизу для кращого звучання;
- футляр розроблений так, щоб можна було легко, одним махом, його відкрити;
- всередині футляра є індикатор, який вказує на рівень заряду самого футляра та навушників. Коли відкриваєш – бачиш його посередині. Зроблено, щоб зразу впадало в очі;
- У футлярі є 2 впадини, які повторюють навушники. Причому точно видно, де лівий має бути, а де – правий. Внизу цих впадин є типу закріплювачі, щоб навушник фіксувався і щоб користувач ставив їх на зарядку за долю секунди;
- форма футляра – прямокутник з рівними краями. Це робить його зручним у використанні, бо гарно лягає в руку. Розмір не дуже малий, та й невеликий.
Фен
UI
матеріал – пластик
колір – чорний з червоним;
стиль надписів – шрифт з зарубками + рукописний
є 3 режими – для вибору бажаної укладки та результату; 2 перемикачі – на кожному по-різному позначенні цифри, щоб було зрозуміліше, який перемикач для чого. На нижньому перемикачі 3 режими, позначені схожими до римських цифр, тільки більш хвилясті – вибір температури. На 2 перемикачі 3 режими позначені вентилятором – вибір потужності повітряного обдуву. 3 кнопка з сніжинкою – позначення холодного повітря.
UX
- заді кришка знімається, щоб чистити вентилятор;
- ручка, яку комфортно тримати. Заді ручки йде закруглення, зроблено під лодонь;
- знизу фена є гачок, щоб можна було вішати фен, коли потрібно, наприклад, взяти браш до рук;
- Покриття Soft-touch, щоб фен не вислизував з рук.
Завдання 2.
Бутилка карпатської джерельної
UI
Матеріал – пластик
Стиль надписів – шрифт без зарубок
На етикетці імітація карпатських гір, що підходить до назви.
Бутилка прозора, щоб було видно «чистоту» води.
UX
- зверху біля кришки є «гачок», щоб простіше було нести бутилку;
- посередині є невелика впадина, зроблена для того, щоб користувачу було зручніше тримати воду, коли він її п’є;
- знизу зроблено так, щоб бутилка спокійно стояла на столі й не падала;
Завдання 3. Апаратний інтерфейс.
Коментар frusia.pro:
Привіт, Діана!
Завдання 1-2. Все правильно, молодець!
Завдання 3. В моєму розумінні апаратний інтерфейс - це спосіб взаємодії між електронними компонентами, наприклад в комп'ютері. Чудовий приклад!
Дуже гарний початок, продовжуйте навчання!