Skip to content

Latest commit

 

History

History
411 lines (363 loc) · 32.2 KB

UxUi.md

File metadata and controls

411 lines (363 loc) · 32.2 KB

Заметки по UX/UI

Понятия

  • Когнетика - отрасль психологии, которая исследует познавательные процессы, такие, как память, внимание, чувства, представления информации, логическое мышление, воображение, способности к принятию решений

  • UX дизайнер - планирует то, как вы будете взаимодействовать с интерфейсом и какие шаги вам нужно предпринять.
    Изобретатель точильного камня был UX-дизайнером, когда думал:

    • будет ли он сидеть и сам нажимать педаль
    • или он упростит механизм, но приставит раба, который будет раскручивать колесо рукой.

  • UI дизайнер - придумывает, как каждый из этих шагов будет выглядеть
    Изобретатель точильного камня был UX-дизайнером, когда думал:

    • какой величины будет камень
    • какого цвета выбрать дерево для подставки
    • чем скрепить деревянные жерди (гвоздями или кожаными жгутами?)
    • какой длины будет ручка...

  • Интерфейс - тот способ, каким бы вы затачивали меч назывался бы интерфейс.


Книги, которые стоит знать

  • Дональд Норман - Дизайн привычных вещей (1988)
    • когнетика
    • психология
    • ошибки
    • дизайн
    • ориентация на пользователя....
  • Алан Купер - Психбольница в руках пациентов (2004)
    • персонажи
    • для конкретного персонажа, без "резиновых персонажей"
    • цели человека на сайте (по рейтингу)
      • личные - не чувствовать себя глупо, не ошибиться...
      • практические - перезвонить вовремя клиенту
      • корпоративные - увеличить прибыль
    • сценарии работы посетителя (повседневные, обязательные (не часто, но критично), исключительный)
    • общий словарь для всех участников процесса разработки
    • проектирование взаимодействия (Проектирование UI → Дизайн → Программирование → Тестирование)
    • подробная документация
  • Алан Купер - Об интерфейсе (2009)
    • целе-ориентированное проектирование
    • ментальные модели
    • исследования
      • поведение, взгляды, склонности потенциальных пользователей продукта;
      • предметную область – технический, экологический и деловой контексты разрабатываемого продукта;
      • используемый лексикон и прочие социальные аспекты предметной области;
      • способы применения существующих продуктов - модели пользователей
    • шаблоны проектирования взаимодействия
    • метафоры и идиомы
    • визуальный дизайн
  • Влад Головач - Дизайн пользовательского интерфейса. Искусство мыть слона (2 издания, 2001 и 2010)
    • 4 основных (остальные – производные) критерия качества интерфейса:
      • скорость работы пользователей,
      • количество человеческих ошибок,
      • скорость обучения
      • субъективное удовлетворение пользователей
  • Влад Головач - Культура дизайна (тоже два издания, 2014 и 2017)
  • Джеф Раскин - Интерфейс. Новые направления в проектировании компьютерных систем
    • человекоориентированные интерфейсы
    • когнетика и локус внимания
    • мифы, например новичок/эксперт
    • квантификация
    • унификация
    • навигация
  • Стивен Круг - "Юзабилити" (2003, 2005, 2008) Или "Веб-дизайн". Ещё "Не заставляйте меня думать"
    • не заставляйте меня думать
    • опускаем лишние слова
    • разработка навигации
    • юзабилити тестирование + интерпретация
  • Адриан Форти - Объекты желания (1986)
  • Эдвард Тафти
    • Представление информации
    • The Visual Display of Quantitative Information
    • Envisioning Information
    • Visual Explanations: Images and Quantities, Evidence and Narrative
    • Beautiful Evidence
  • Юрий Гордон - Книга про буквы от Аа до Яя
  • Ральф Каплан - С помощью дизайна (2005)
  • Ян Чихольд - Новая типографика. Руководство для современного дизайнера
  • Ян Чихольд - Образцы шрифтов ()
  • Ян Чихольд - Облик книги. Избранные статьи о книжном оформлении и типографике


Тренды (2018)

  • Material design как методология дизайна
  • дизайнеры in home - т.е. как часть команды
  • Figma и Scetch как инструменты. Axure - хорошая интерактивность. Adobe XD и Google (gallery.io, плагин для Scetch Material Theme Editor) -отстают]


Некоторые события (2014-2018)

  • 2018 весна - презентация Google Material Design 2.0

    • Новые шрифты - гарнитура Product Sans вместо Roboto
    • Больше прозрачного и белого, больше пространства
    • Движение в сторону минимализма
    • Больше скурглений (безрамочные экраны)
    • Навигация всё больше уходит вниз, т.к. устройства больше и длинее (нет рамок)
    • Более яркие и чистые цвета. Использование четырех основных цветов логотипа в качестве визуального языка
    • Навигация по системе в духе iPhone X. Паттерн «рукоятки» вместо кнопки «Домой» с почти аналогичной механикой, отказ от отдельной кнопки списка приложений (также вызывается свайпом снизу) и ставшая официальной в последние годы нижняя панель навигации.
    • Новые инструменты - плагин Material Theme для Sketch, наборы иконок, библиотеки компонент
    • Превращение в полноценную дизайн-систему - с компонентами в коде, а не просто масштабные гайдлайны и шаблоны к ним с какими-то разрозненными примерами. Эти компоненты также поддерживают тематизацию, так что система выглядит целостной (сами компоненты начали появляться год назад).
    • Широкие возможности темизации. теперь Material Design поддерживает более продвинутую тематизацию, чем просто замена цвета. Можно менять шрифтовую сетку, скругления элементов интерфейса (точнее, даже их форму — например, можно сделать диагональные скосы), иконки.
    • https://vc.ru/design/37728-teper-material-design-polnocennaya-dizayn-sistema
    • https://trashbox.ru/topics/117404/material-design-2.0-instrukciya-po-ekspluatacii

  • Влад Головач выпустил второе, расширенное издание "Культуры дизайна 2" http://designculture.exmachina.ru/


Вопросы для собеседования UX/UI дизайнера (middle, 2023)

Про вёрстку

  • Зачем нужны разные тэги? Почему не верстать всё при помощи div с классами?
    • У тэгов есть некое «заранее прописанное, предопределенное поведение» - блочный, жирный и т.д. Можно было бы писать это всё стилями, но пришлось бы каждый раз набирать их заново. А так они «прицеплены» к тегу заранее. Не приходится каждый раз его эмулировать кучей классов
    • Тэги не только структурируют разметку и дают визуальные особенности — они применяются для анализа структуры страницы, для речевых браузеров и т.д. Т.е. разные тэги по-разному структурируют информацию, сам факт использования того или иного тэга вносит много информации о его содержимом
    • Тэги <b> и <strong>, также как <i> и <em>, несмотря на сходный результат, не совсем эквивалентны и заменяемы. Первый тег <b> — относится к тегам физической разметки и устанавливает жирный текст, а тег <strong> — является тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов <b> и <strong>, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.
  • Зачем нужны id и class? Почему не использовать что-то одно?
    • ID можно использовать на странице один раз. Два и более раза — это уже не валидно. Поэтому, если понадобится переделать сайт по схеме «три колонки → блок от края до края → снова три колонки» на одной странице, этот кусок кода придется полностью переписывать.
    • На один элемент можно повесить только один id, а классов на один элемент можно повесить много. Получается, если вешать стили на id, мы лишаемся гибкости.
    • У id слишком высокий вес селектора. Если вам понадобится контекстно перестилить что-то внутри колонки, то вероятнее всего вы впишите в селектор id и потом, чтобы обнулить овверрайд или сделать новый, вам придется использовать этот же id (или поставить другой). Классами перебить селектор с id не получится — не хватит веса. ID будет множиться в css-ке и реффакторить становится всё сложнее.
      • Поэтому выводы — стараться не вешать на id стили;
      • Всегда использовать class, если не уверены, что нужно. ID перекрывает CSS правила, поэтому рекомендуется использовать его в основном для якорей и для JavaScript.
  • Отличия блочных-строчных элементов
    • УТОЧНИТЬ
  • Понятие «потока / flow»
    • Потоком документа в HTML — порядок вывода элементов на страницу. В обычном виде все блоки выводятся в том порядке, в котором они записаны внутри HTML-документа.
    • Нормальный поток документа — схема, при которой блочные и строчные HTML-элементы выводятся друг за другом в том порядке, в котором они размечены в файле.
    • Контекст форматирования — правила расположения строчных и блочных элементов в нормальном потоке называются контекстом форматирования. Блочные элементы участвуют в формировании блочного контекста форматирования. Строчные элементы формируют строчный контекст форматирования. Расположение элементов в контексте форматирования зависит от направления письма для конкретного языка.
    • С помощью CSS-правил возможно вывести элемент из нормального потока. Существуют ещё несколько типов потока документа:
      • Плавающий поток. Создаётся с использованием CSS-свойства float.
      • Поток с абсолютным позиционированием. Создаётся с использованием свойства position: absolute.
    • Ссылки
    • Как работает «float»
  • Какие есть значения «display»

    • <display-outside> values

    • block

    • inline

    • run-in

    • <display-inside> values

    • flow

    • flow-root

    • table

    • flex

    • grid

    • ruby

    • <display-outside> plus <display-inside> values

    • block flow

    • inline table

    • flex run-in

    • <display-listitem> values

    • list-item

    • list-item block

    • list-item inline

    • list-item flow

    • list-item flow-root

    • list-item block flow

    • list-item block flow-root

    • flow list-item block

    • <display-internal> values

    • table-row-group

    • table-header-group

    • table-footer-group

    • table-row

    • table-cell

    • table-column-group

    • table-column

    • table-caption

    • ruby-base

    • ruby-text

    • ruby-base-container

    • ruby-text-container

    • <display-box> values

    • contents

    • none

    • <display-legacy> values

    • inline-block

    • inline-table

    • inline-flex

    • inline-grid

    • Global values

    • inherit

    • initial

    • unset

    • Ссылки

  • Средства реализации адаптивности
    • media-query
    • УТОЧНИТЬ
  • Кроссбраузерность
    • УТОЧНИТЬ
  • Диайн и вёрстка под retina-дисплеи
    • УТОЧНИТЬ
  • Используете какие-то подходы к вёрстке, кроме блочной?
    • Flexbox
    • CSS-grid
    • Табличная вёрстка (ну, это экзотика из 90-х)
    • чем они отличаются?
  • Методология БЭМ
    • есть ли опыт
    • расскажите в паре слов общие принципы
    • отличия Блока и Элемента, когда создавать блок / когда элемент?
    • Ссылки
  • SASS, LESS
    • в чём отличия?
    • что предпочитаете? Почему?
    • Sass — какие для вас главные преимущества
      • переменные
      • вложенность
      • @import - можно подключать другие файлы SASS
      • @mixin (примеси) - позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте. 
        • @mixin transform($property) {
  -webkit-transform: $property; 
  -ms-transform: $property; 
   transform: $property; 
} 
.box { 
  @include transform(rotate(30deg)); 
}
      • @include - подключение миксина
      • @extend - можно наследовать наборы свойств CSS от одного селектора другому. 
        • %message-shared { 
  border: 1px solid #ccc; 
  padding: 10px; 
  color: #333; 
} 
.success { 
  @extend %message-shared; 
  border-color: green; 
}
      • математические операции — сложение, вычитание, умножение, деление, остаток...
      • логические операторы — например, цвет кнопки меняется в зависимости от её ширины
  • Ваше отношение к Bootstrap и подходу к темизации через навешивание классов


Общие вопросы

  • Опишите свой дизайн-процесс
  • Опыт работы с Figma
  • Опыт работы со Storybook. Какие вопросы решали, что реализовали?
  • Дизайн-системы
    • какие популярные дизайна-системы знаете
      • Google Material Design
      • Ant Design System
      • Spectrum by Adobe
      • Atlassian
      • Fluent by Microsoft
      • Eva Design System by Akveo
      • Carbon from IBM
      • Liquid
      • Polaris from Shopify
      • Clarity
      • Дизайн-система Airbnb
    • с какими готовыми системами работали?
    • понятие «design language»
  • Какие графические форматы вы применяете для web-разработки, в паре слов про их особенности
    • JPG
    • PNG
    • GIF
    • SVG
    • современные
      • JPEG 2000 — формат, представляющий собой улучшенный вариант обычного JPG. Этот формат был разработан в 1997 году, преимущественно для использования в кинематографе и в медицине. Он позволяет сжимать изображения сильнее, чем JPEG, но с меньшим количеством артефактов.
      • JPEG XR — это формат, родственный JPEG 2000. Он разработан компанией Microsoft в 2009 году.
      • WebP — формат, созданный Google в 2010 году для веб. Основная цель его разработки заключалась в использовании продвинутых способов оптимизации изображений ради уменьшения размеров файлов. WebP поддерживает прозрачность и даже анимацию.
  • Тэг <picture> Элемент picture появился в HTML гораздо позже, чем img. Главная цель этого нового элемента заключается в том, чтобы позволить разработчикам загружать различные графические ресурсы в зависимости от разрешения экрана, или в зависимости от того, поддерживает ли браузер некий графический формат. Элемент picture может включать в себя множество дочерних элементов source и один элемент img. Браузер последовательно парсит эти элементы, подбирая, на основе атрибута type (и media), тот из них, которым сможет воспользоваться. Когда такой элемент будет найден, браузер выясняет адрес изображения, пользуясь атрибутом srcset, после чего выводит это изображение с помощью элемента img. Атрибут srcset обладает гораздо большими возможностями, чем обычный src, но мы, к счастью, можем рассматривать его как аналог src. В целом, элементы source представляют собой нечто вроде настроек, соответствующих различным изображениям. В img попадает то изображение, которое лучше всего соответствует среде, в которой просматривают страницу.
  • Как правильно готовить макет для передачи верстальщику //: # ( - см. https://wiki.yandex.ru/deg/a/designer-to-frontend-checklist)
  • Набросайте простой макет. Например: вызова службы спасения, заказа такси, записи в очередь на автомойку...
    • Особенность, а отчасти и смысл задания в том, что оно общее и не детализированное. Нет точной формулировки, что требуется: кто-то начинает делать сайт, кто-то — приложение, кто-то — кнопку экстренного вызова.
    • Предложить свои варианты можно, но обязательно стоит ответить, что для такого случая (вызов службы спасения) уже существует удобное и общепринятое решение — служба 112.
  • Как визуализировать такие-то данные
  • Как можно сократить время загрузки страницы?
    • сжатие изображений
    • удаление ненужных компонентов
    • использование анимации загрузки и т. д.
      • В идеале — рассказ про Critical render path
        • УТОЧНИТЬ


Общий кругозор, понимание

  • Опишите что такое UX и UI
    • см выше. раздел «Понятия»
  • UX/UI - Книги и люди
    • Дональд Норман - Дизайн привычных вещей (1988)
    • Алан Купер - Психбольница в руках пациентов (2004)
    • Алан Купер - Об интерфейсе (2009)
    • Влад Головач - Дизайн пользовательского интерфейса. Искусство мыть слона (2 издания, 2001 и 2010)
    • Джеф Раскин - Интерфейс. Новые направления в проектировании компьютерных систем
    • Стивен Круг - "Юзабилити" (2003, 2005, 2008) Или "Веб-дизайн". Ещё "Не заставляйте меня думать"
  • Книги по истории дизайна
    • Адриан Форти - Объекты желания
    • Ральф Каплан - С помощью дизайна
    • Влад Головач - Культура дизайна
  • Книги по визуализации данных
    • Эдвард Тафти
      • The Visual Display of Quantitative Information / Визуальное отображение количественной информации
    • Envisioning Information / Представление информации
    • Visual Explanations: Images and Quantities, Evidence and Narrative / Визуальные объяснения: изображения и количества, доказательства и повествование
    • Beautiful Evidence / Красивые данные
  • Какие сайты или приложения вам нравятся с точки зрения UX дизайна.
  • Каким вы видите будущее дизайна?


О себе

  • Расскажите о самой сложной UX проблеме с которой вы сталкивались и как вы с ней справились?
  • Кем вы видите себя через пять лет?



Головач о дизайне интерфейсов

Дизайн интерфейса можно рассматривать как процесс. Авторы, пишущие о процессе, негласно допускают, что если мы провели этот процесс правильно (в правильном порядке выполнили нужные шаги, на каждом этапе сделали всё, что нужно), мы получаем правильный интерфейс. На мой взгляд, это допущение неверно. Поваренные книги тоже являются фактически сборниками процессов в кулинарии, но следование поваренной книге обеспечивает пристойный результат, только если её читатель умеет готовить вообще. Соответственно, одного процесса недостаточно.

Другие трактуют дизайн интерфейсов как следование набору правил-эвристик («терминальные кнопки должны быть размещены справа внизу или справа сверху» и т. п.). Авторы этих книг допускают, что если мы сделаем интерфейс по этим правилам, интерфейс получится хорошим. Этот вариант тоже не кажется мне плодотворным. Он напоминает мне изучение иностранного языка по словарю и грамматическому справочнику. Конечно, это приемлемо, но истинного знания языка так получить невозможно. Например, фразы «Коля пошел в школу» и «В школу Коля пошел» являются правильными как грамматически, так и орфографически. Только вот смысл у них чуточку разный...

Отрицать важность этих двух подходов глупо. Но одних их, на мой взгляд, недостаточно. Дизайн интерфейса — творческая деятельность, которую невозможно алгоритмизировать хотя бы так же полно, как грамматику или поваренную книгу. Не менее важно обладать пониманием дизайна, умением отделять значимые вопросы в проектной деятельности от незначимых, а главное — отвечать на них. Кроме того, дизайнер интерфейса редко когда занят разработкой хорошего интерфейса. На самом деле он разрабатывает хороший интерфейс в имеющиеся у него сроки и бюджет. Такая задача девальвирует и процесс (нужно знать ещё и КПД каждого этапа, чтобы решать, какие этапы проводить и сколько ресурсов на них выделить), и эвристики (без знания того, насколько применение каждой из них улучшает интерфейс, работать тяжело).

В этом смысле дизайн интерфейса не только и не столько процесс работы или знание и применение правил построения интерфейсов, а живая проектная деятельность. В ней не только важно сделать правильно, но, не менее важно, не сделать неправильно — и даже важно не сделать чего-либо ненужного. В ней нет чётких этапов (где это видано, чтобы жизнь следовала интеллектуальным построениям), но зато важен коэффициент полезного действия.




Legmo, 2019-2023