Connect with us

Дизайн и прототипирование

Podlodka #42: Дизайн-системы

В последнее время в сообществе разработчиков все чаще упоминаются некие “дизайн-системы”.

Леонид Боголюбов

Опубликовано

/

     
     

С тем, что это такое и как это применимо к мобильному миру, нам помог разобраться Александр Зимин – iOS-разработчик из Badoo!

 

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

30 UI-китов для iOS-разработчиков

Соосновательница Flawless App Лиза Дзюба поделилась полезными наборами с готовыми интерфейсами iOS-приложений.

Анна Гуляева

Опубликовано

/

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

Стандартные UI-киты

Design+Code iOS 11 UI Kit —  Sketch-набор, который содержит стили текстов, вложенные символы с изменяемыми размерами и набор компонентов в темной теме. Название каждого компонента соответствует документации Apple.

iOS 11 Screens & Components — огромная коллекция ключевых компонентов iOS 11 и более 60 экранов, доступна для Sketch и Figma.

iOS 11 GUI for Sketch App — набор содержит 22 экрана, 10 клавиатур, векторные элементы и формы, доступные в формате Sketch.

iOS 11 iPhone GUI by Facebook — полный набор файлов для Origami, Sketch и Photoshop от команды Facebook.

UI-киты для социальных приложений

Bronze UI Kit — простой и изменяемый набор с формами регистрации, входа, профилем пользователя, экранами блога и шаблонами для статей. Доступен в формате Photoshop и подходит не только для iOS.

Mail UI Kit — новейший кроссплатформенный набор от InVision, который подойдет для десктопа, смартфона, планшета и умных часов, доступен в Sketch и Photoshop.

Snap UI Kit — UI-кит от сотрудников Marvel, включающий более 50 экранов и большое количество элементов в формате файлов для Sketch. Подойдет для создания приложения с фото.

UI-киты для приложений про путешествия

Travel App UI Kit — более 15 экранов для входа, просмотра информации о месте, фотографий, карты и многого другого.

Navigo UI Kit — UI-кит для приложения про поездки с социальными профилями, в котором находится 60 экранов, организованных в 6 категорий. Набор сделан в формате Adobe XD.

Travel Guide App UI Kit — это не совсем набор элементов, а концепция реального приложения, которое оптимизировано для iPhone X, чтобы показать наилучшее использование фильтра локаций и карт.

Travelisto UI Kit — UI-набор для Sketch с более чем 22 экранами в векторном формате.

Harmony UI Kit — концепция основанного на локации мобильного приложения для того, чтобы искать и оценивать места для прогулок вокруг вас.

UI-киты для приложений с рецептами

Delicious UI Kit — набор включает 11 экранов в формате Sketch.

iOS Recipes App UI Kit — отличный набор с 11 экранами для приложения о готовке в формате Sketch.

1357 Recipe App UI Kit — современный и элегантный набор с 25 базовыми экранами.

UI-киты для чатов и мессенджеров

Mochi — Chat UI Kit — милый набор для мобильного чата с экранами для входа, регистрации, списков чатов, контактов и других.

iOS WeChat UI Kit — этот UI-кит включает в себя множество элементов и взаимодействий для главного китайского приложения WeChat, доступных на английском и китайском.

Messenger Platform Design Kit — официальный набор для бота Facebook Messenger.

UI-киты для eCommerce

Minimal Chic Kit стильный UI-кит для приложения о продаже с экранами страниц категорий товаров и самих товаров, доступных в формате Adobe XD.

Portal freebie — пример приложения, сделанного в Sketch.

Wilhelm iOS UI Kit — набор с изменяемыми экранами в Sketch, которые подойдут не только для продаж, но и для социального приложения.

Helen UI Kit — профессионально разработанный набор пользовательских интерфейсов для Sketch и Photoshop, организованных в более чем 11 экранов.

Mcommerce UI Kit —  набор стильных пользовательских интерфейсов для продаж с более чем 120 экранами, созданными для Sketch.

Другие UI-киты

iOS 11 Place UI Kit — если вы планируете сделать мобильное приложение в ARKit, вы можете использовать набор пользовательского интерфейса, который содержит 22 экрана для iOS 11 и векторные значки (в бесплатной версии).

Movies App UI Kit — красочный набор, который включает более 30 экранов с полностью настраиваемыми макетами и слоями для Sketch.

Wonep Calling App — довольно крутой набор для создания приложения для совершения международных звонков.

Banking UI Kit — аккуратный набор для пользовательского интерфейса банка для Sketch с 50 экранами.

Real Estate App UI Kit — UI-кит для создания приложения о недвижимости с 25 элементами, организованными в 8 страниц в формате Sketch.

DO UI Kit — набор для приложения для заметок с более чем 130 экранами, 10 темами, в котором есть все нужное в форматах для Sketch, Photoshop и Craft.

Надеюсь, что эти наборы сделают вашу работу проще и вдохновят вас начать изучать дизайн. Вы можете найти больше бесплатных ресурсов на этих сайтах:

Комментарии
Продолжить чтение

Дизайн и прототипирование

Дизайн-перемена: воркшопы дизайнеров Яндекса в 10 городах страны

Теперь не слушатели поедут к преподавателям, а преподаватели к слушателям. Этой весной ведущие дизайнеры Яндекса проведут бесплатные однодневные воркшопы в десяти городах страны.

Леонид Боголюбов

Опубликовано

/

Три года подряд в Яндексе проходила летняя Школа дизайна. Слушатели Школы проводили в нашем московском офисе почти три месяца: посещали лекции известных дизайнеров, участвовали в мастер-классах и работали над дипломными проектами — с нуля создавали собственные мобильные приложения в команде с разработчиками и менеджерами. Такой формат обучения хорошо себя зарекомендовал: ребята получили огромный практический опыт, а многие из них по окончании Школы стали частью команды дизайнеров Яндекса.

Летние школы, однако, подходят не всем. Несмотря на то, что обучение бесплатное и Яндекс оплачивает иногородним дорогу и проживание, далеко не каждый может позволить себе оторваться от работы или учёбы и приехать на всё лето в Москву.

В этом году компания решила попробовать новый формат — его назвали «Дизайн-перемена». Теперь не слушатели поедут к преподавателям, а преподаватели к слушателям. Этой весной ведущие дизайнеры Яндекса проведут бесплатные однодневные воркшопы в десяти городах страны: Воронеже, Екатеринбурге, Иркутске, Казани, Калининграде, Красноярске, Новосибирске, Ростове-на-Дону, Самаре и Ярославле. Воркшопы состоятся в субботние дни в апреле-мае; точное расписание можно посмотреть на сайте «Дизайн-перемены».

Воркшоп продлится весь день. На нём дизайнеры расскажут, как выстроена в Яндексе работа над веб-сервисами и мобильными приложениями. Затем слушатели разобьются на команды и под руководством преподавателей попробуют создать дизайн продукта. Это позволит на практике понять, как устроены основные этапы работы, от формирования гипотез до создания прототипа. В конце преподаватели дадут обратную связь по каждому проекту. У участников воркшопа будет шанс получить приглашение на стажировку.

Чтобы принять участие в воркшопе, нужно зарегистрироваться и выполнить тестовое задание. Для этого потребуется опыт работы в веб-дизайне, пусть даже небольшой. Задания можно присылать до 20 марта. Претенденты, которые успешно прошли отбор, получат приглашение на воркшоп по почте.

Комментарии
Продолжить чтение

Дизайн и прототипирование

12 “да” и “нет” веб-дизайна

Список советов и распространенных ошибок от Ника Бабича.

Анна Гуляева

Опубликовано

/

При создании дизайна главным приоритетом должно быть создание полезного и приятного опыта взаимодействия. Чтобы упростить эту задачу для начинающих, я создал простой список “да” и “нет”, о которых стоит помнить при создании вашего следующего веб-дизайна.

Сначала “да”

1. Сохраняйте интерфейс последовательным

Один из главных принципов хорошего UX — это сохранять интерфейс однородным на протяжении всего проекта. Постоянство навигации, цветовых палитр, шрифтов и стиля может оказать положительное влияние на UX.

Совет: Сначала сделайте дизайн просто удобным для использования. Постоянство — это обоюдоострый меч. Если сайт изначально не обладает хорошим дизайном, постоянство его частей приведет к появлению сайта с полностью плохим дизайном.

2. Создайте простую навигацию

Навигация — это краеугольный камень удобства использования. Хорошая навигация на вашем сайте жизненно необходима, чтобы посетители находили то, что они ищут.

Советы:

  • Сделайте высокоуровневую навигацию для основных вариантов выбора, которых должно быть максимум 7. Для остальных категорий сделайте субнавигацию.
  • Используйте понятные обозначения вариантов навигации. Используйте в меню знакомые слова, чтобы помочь пользователям их понять.
  • Сократите пользователям время, необходимое для достижения цели. Навигация должна приводить пользователей к нужному месту за минимальное количество кликов. При создании сайта руководствуйтесь правилом трех кликов, в котором говорится, что посетители должны совершать не больше трех кликов.
  • Включите навигационное меню и контакты в подвал сайта.

3. Измените цвет открытых ссылок

Ссылки играют важную роль в процессе навигации. Если ссылки не меняют цвет, пользователи будут посещать одни и те же страницы несколько раз.

4. Сделайте страницы читабельнее

При посещении вашего сайта пользователи вероятнее будут быстро прочитывать страницу по диагонали, а не читать её целиком. Например, если посетители захотят найти конкретный текст, они быстро пробегут взглядом страницу пока не найдут, чего хотят. Вы можете помочь им, создав хорошую визуальную иерархию.

Советы:

  • Избегайте стен текста. Группируйте информацию, чтобы её было проще усвоить. Разбивайте тексты заголовками или маркерами.
  • Выделите важные элементы. Формы входа или призывы к действию должны быть видны сразу. Вы можете подчеркнуть элементы, используя разные цвета.

  • Учтите естественные паттерны чтения. Люди в западных странах читают слева направо и сверху вниз. Сайты с хорошим дизайном обычно представляют контент в форме букв F или Z.
  • Используйте сетку, которая сделает чтение и понимание информации проще.

5. Отнеситесь к контенту серьезно

Текст на сайте так же важен, как и дизайн. Более 95% информации в вебе содержится в форме текста. Даже хороший дизайн сайта бесполезен без хорошего содержания, и работа дизайнера заключается в том, чтобы убедиться,что дизайн дополняет содержимое.

Советы:

  • Убедитесь, что текст на сайте релевантен. Нерелевантный текст не несет никакой ценности и может запутать пользователей. Стремитесь создать текст,в котором для посетителей будет ценна каждая строчка.
  • Избегайте жаргонизмов. Информация на сайте должна быть максимально простой для понимания любому человеку.

6. Проверьте сайт на ошибки

Отличную работу легко испортить маленькой ошибкой. Проверьте сайт на эти распространенные проблемы:

  • Поищите мертвые ссылки. Пользователи могут разозлиться, когда они кликнут на ссылку и получат ошибку 404.
  • Проверьте сайт на опечатки.
  • Убедитесь, что весь медиаконтент загружается нормально.

7. Сократите количество вариантов выбора

Количество вариантов влияет на решения людей: чем больше у людей выбора, тем меньше действий они совершают. Чтобы увеличить шансы на взаимодействие, сократите количество вариантов выбора.

8. Вовлеките пользователей в скроллинг

При скроллинге страницы пользователи инвестируют во взаимодействие больше времени, и это повышает шанс конверсии. Хотя люди начинают скроллить страницу сразу после её загрузки, верхняя часть сайта все равно очень важна, потому что создает первое впечатление и устанавливает ожидания у пользователей.

Совет: верхняя часть страницы устанавливает ожидания. Если в ней расположено качественное содержание, пользователи захотят увидеть больше.

9. Подписывайте кнопки в соответствии с их функциями

Пользователям комфортнее знать, какое действие совершает кнопка. Размытые обозначения вроде “Предоставить” или подписи из примеров ниже не предоставляют достаточное количество информации о действии.

Не заставляйте людей задумываться, что делает элемент.

10. Вещи должны выглядеть согласно своей функции

Для кнопок и других интерактивных элементов дизайн должен сообщать возможность действия. Форма следует за функцией: внешний вид объекта должен сообщать пользователям, как его использовать. Если подчеркнутые слова не являются ссылками, а элементы с прямоугольным фоном — кнопками, пользователи запутаются.

11. Сделайте сайт отзывчивым

Сегодня веб-браузеры доступны более чем на 5 миллиардах устройств. Это значит, что пользователи будут смотреть ваш сайт с компьютера, планшета, телефона, плеера или даже с часов. Вы должны убедиться, что информация будет отображаться корректно на экранах разных размеров.

Советы:

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

12. Протестируйте дизайн

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

Совет: смотрите на аналитику. Веб-аналитика — это мощные инструменты, которые помогут вам найти разделы сайта, к которым нужно дополнительное внимание.

А теперь “нет”

1. Не заставляйте пользователей ждать загрузки содержимого

Время загрузки критически важно для пользовательского опыта. С прогрессом технологий мы становимся более нетерпеливыми, и сегодня 47% пользователей ожидает загрузки страницы за две секунды или меньше. В ином случае посетители могут разозлиться и уйти с сайта.

Советы:

  • Не показывайте во время загрузки пустые страницы. Если загрузка займет какое-то время, покажите часть контента с каким-либо индикатором загрузки.
  • Оптимизируйте изображения. Большие фоновые изображения могут потребовать много времени на загрузку. Вы можете сократить это время, оптимизировав изображения.
  • Измерьте производительность сайта. Инструменты PageSpeed Insights и Think With Google не только помогут вам найти проблемы с производительностью, но и предложат возможные решения.

2. Не открывайте внутреннюю ссылку в новой вкладке

Пользователи ожидают от внешних и внутренних ссылок разного поведения. Все внутренние ссылки должны открываться в одной вкладке — так вы позволите пользователям использовать кнопку “назад”. Если вы решите открывать внешние ссылки в новом окне, создайте предупреждение, которое появится перед открытием нового окна или новой вкладки. Это может быть текст “Откроется в новом окне”, размещенный рядом со ссылкой.

3. Не используйте слишком много шрифтов

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

4. Не используйте слишком много цветов

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

Совет: подумайте, какие эмоции вы хотите вызвать у посетителей. Это поможет вам выбрать нужную цветовую палитру. Например, если вы продвигаете продукты для медитации, вы не захотите использовать на сайте яркие цвета.

5. Не показывайте автоматические всплывающие окна слишком рано

Многие сайты показывают окно с просьбой подписаться сразу при входе на страницу. Это одна из наиболее раздражающих вещей для посетителя сайта. Сами по себе всплывающие окна прерывают опыт взаимодействия и обычно используются для рекламных объявлений, поэтому пользователи часто закрывают их до того, как прочитают содержимое.

Первая вещь, которую пользователи видят на сайте The New York Times

Совет: подберите момент. Перед тем, как попросить пользователей что-то сделать, покажите им вашу ценность. Окно можно показать пользователю в конце страницы после прочтения содержимого полностью.

6. Не используйте неискренние фотографии людей

Изображения с лицами людей — это эффективный способ вовлечь пользователей. Когда мы видим других людей, мы чувствуем, как будто взаимодействуем с ними, а не просто используем продукт. Однако многие сайты слишком часто используют неискренние фотографии для “создания доверия”. Тесты показывают, что чисто декоративные фото редко добавляют ценности дизайну и вредят пользовательскому опыту.

7. Не позволяйте рекламе украсть внимание

Слишком много рекламных объявлений на странице может отвлечь внимание от главного контента и усложнить достижение цели для пользователей. Это может привести к сенсорной перегрузке у пользователей. Более того, пользователи обычно игнорируют все, что похоже на рекламу, — это явление известно как “баннерная слепота”.

8. Не воспроизводите фоновую музыку и видео со звуком

Фоновая музыка может сработать в некоторых случаях, но обычно это плохая идея. Неожиданная музыка может раздражать или даже вызвать проблемы: люди могут заходить на ваш сайт на работе, в публичном месте или около спящих людей. Как и фоновая музыка, автоматическое воспроизведение видео будет раздражать пользователей.

Совет: дайте пользователям контроль. Установите музыку на беззвучный режим по умолчанию, но разрешите пользователям включать её по клику — создайте кнопки play и pause для аудиоконтента.

Видео в Facebook воспроизводится автоматически, но без звука

9. Не нарушайте скроллинг

Манипуляции с прокруткой страницы раздражают многих пользователей, потому что лишают их контроля и делают поведение страницы непредсказуемым. Избегайте этого при создании сайта и позвольте пользователям контролировать свое движение по странице.

Страница входа в Tumblr нарушает скроллинг

10. Не используйте горизонтальную прокрутку.

Некоторые дизайнеры используют на страницах горизонтальный скроллинг. К сожалению, это взаимодействие чаще всего получает негативные отзывы от пользователей. Обычно пользователи не знают, что могут обнаружить контент при помощи горизонтальной прокрутки. В результате они могут проигнорировать часть контента.


Пользователи не знают, что могут скроллить горизонтально, особенно если у них нет визуальных подсказок

11. Не жертвуйте удобством ради красоты

Дизайн не должен нарушать способность пользователя воспринимать содержимое сайта. Типичный пример — использование светло-серого текста на светлом фоне. Лучше избегать использование загруженного фона или низкого контраста.

Совет: проверьте показатель контрастности. Инструменты вроде Color Contrast Checker поможет вам проверить контраст цветов за несколько кликов.

12. Не используйте мигающий текст и рекламу

Вспышки и мерцание могут спровоцировать приступы у некоторых людей и будут раздражать остальных пользователей.

Итог

При взаимодействии с сайтами и приложениями люди ожидают отличного пользовательского опыта. Если вы не можете удовлетворить их потребности, они уйдут к вашим конкурентам. При принятии любого дизайнерского решения вы должны думать о том, что будет лучше для посетителей.

Комментарии
Продолжить чтение

Дизайн и прототипирование

5 тенденций в мобильном дизайне на 2018 год

На сегодняшний день мобайл – одна из самых динамично развивающихся сфер, поэтому разработчикам приложений важно всегда держать руку на пульсе передовых тенденций мобильного дизайна. Джей Лаб рассказывает, какие 5 трендов 2018 года позволят вам превратить технологии в искусство.

Джей лаб

Опубликовано

/

Автор:

1. Простота

Когда в мобильном интерфейсе слишком много элементов и отвлекающих анимаций, это дезориентирует пользователя и портит общее впечатление от взаимодействия с продуктом. Концепция «меньше – значит больше» – это важное эмпирическое правило для размещения элементов, выбора цвета и анимационной составляющей. Каждый элемент на экране должен преследовать конкретную цель и вносить свой вклад в визуальную индивидуальность приложения. В мире постоянной визуальной стимуляции простой дизайн будет выделяться больше, а наличие четкой иерархии в визуальных элементах поможет облегчить понимание контента. Удаляя излишне загроможденные элементы, бренды могут сосредоточиться на ключевом сообщении или продукте и предполагаемом взаимодействии с пользователем.

2. Анимационные жесты

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

3. Короткие видео

В течение последних 15 лет средний уровень концентрации внимания человека резко снизился. С возросшим в 2017 году преобладанием видеоконтента, разработчики должны адаптировать и более четко представлять визуальные материалы брендов. Оптимальным вариантом будут короткие 6-15-секундные видеоролики. Возможность адаптации более длинного видеопотока (от 30 до 60 секунд) в более удобоваримую версию будет иметь ключевое значение для эффективной реализации этой тенденции.

4. Материальный дизайн

Хотя в последние годы скевоморфизм уступил место плоскому дизайну, постепенно происходит переход к чему-то среднему между этими понятиями, что называется материальным дизайном. Этот подход отвергает плоские стили в пользу тактильного дизайна. Такие техники, как добавление глубины при помощи тени и осмысленных движений, использование пространства от края до края, крупномасштабная типография, преднамеренное пустое пространство и другие смелые варианты и формы помогают создать визуально стимулирующий, но в то же время простой дизайн.

5. Яркие цвета

Придерживаясь тенденции материального дизайна, в этом году дизайнеры будут выбирать более смелые и яркие цветовые схемы. Сдержанные тона и приглушенные палитры будут уступать место ярким оттенкам и цветовым градиентам,, привлекающим внимание пользователей.

Ультрафиолет стал цветом 2018 года: что он значит?

Комментарии
Продолжить чтение

Постеры для разработчиков

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков!

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.