designwhale - Введение в основы Framer.zip
993.5 MB
Курс «Введение в основы Framer», с примерами
3 типичные ошибки в флэт-иллюстрации
Я адаптировал текст статьи @mr_mad_rabbit и добавил кое-что от себя.
Дизайнеры интерфейсов постоянно рисуют иллюстрации и иконки. Это должен уметь любой нормальный специалист, и от этого он не становится иллюстратором. Флэт-иллюстрация идёт рука об руку с дизайном интерфейсов и используется повсеместно, потому что она эффективна и проста в освоении. Когда иконки и иллюстрации уместны, они могут вдохнуть жизнь в проект.
medium.com/sketchdesigner/flat-illustrations-680247f39c3f
Итак, какие ошибки делают начинающие?
1. Ломают форму объекта, неправильно рисуя тени
Можно научиться хорошо работать с тенями, если рисовать больше базовых геометрических объектов: шар, параллелепипед или цилиндр, а также их тени друг на друге. Привет, академический рисунок.
2. Выбирают невыразительный ракурс
Самый примитивный ракурс — в анфас. Большинство предметов смотрятся скучно и не передают реальной формы. Вариант с перспективой может лучше показать форму объекта, иллюстрацию станет интереснее разглядывать. Но даже если используется ракурс в анфас, можно накладывать объекты друг на друга, показывая объём при помощи теней.
3. Не используют потенциал цвета
Нужно изучить цветовую теорию, чтобы понимать, какие цвета образуют гармоничные композиции. В флэт-иллюстрации можно подкрасить теневые участки объекта его комплиментарным цветом и от этого будет ощущение насыщенной тени.
#первые_шаги #высушено #флэт
Я адаптировал текст статьи @mr_mad_rabbit и добавил кое-что от себя.
Дизайнеры интерфейсов постоянно рисуют иллюстрации и иконки. Это должен уметь любой нормальный специалист, и от этого он не становится иллюстратором. Флэт-иллюстрация идёт рука об руку с дизайном интерфейсов и используется повсеместно, потому что она эффективна и проста в освоении. Когда иконки и иллюстрации уместны, они могут вдохнуть жизнь в проект.
medium.com/sketchdesigner/flat-illustrations-680247f39c3f
Итак, какие ошибки делают начинающие?
1. Ломают форму объекта, неправильно рисуя тени
Можно научиться хорошо работать с тенями, если рисовать больше базовых геометрических объектов: шар, параллелепипед или цилиндр, а также их тени друг на друге. Привет, академический рисунок.
2. Выбирают невыразительный ракурс
Самый примитивный ракурс — в анфас. Большинство предметов смотрятся скучно и не передают реальной формы. Вариант с перспективой может лучше показать форму объекта, иллюстрацию станет интереснее разглядывать. Но даже если используется ракурс в анфас, можно накладывать объекты друг на друга, показывая объём при помощи теней.
3. Не используют потенциал цвета
Нужно изучить цветовую теорию, чтобы понимать, какие цвета образуют гармоничные композиции. В флэт-иллюстрации можно подкрасить теневые участки объекта его комплиментарным цветом и от этого будет ощущение насыщенной тени.
#первые_шаги #высушено #флэт
Medium
3 типичные ошибки в флэт-иллюстрации
И как их исправить
Разработчики Скетча выпустили UI-кит Elements
35 экранов для iPhone Х, свёрстанных на символах, по семь штук на каждую из тем: еда, соцсеть, музыка, фото, тревел.
sketchapp.com/elements
Этот кит — пример того, как можно удачно использовать оверрайды. Например, символ навбара не содержит никакого фонового цвета, потому что тот задаётся через оверрайд и вынесен в отдельный символ.
#скачать
35 экранов для iPhone Х, свёрстанных на символах, по семь штук на каждую из тем: еда, соцсеть, музыка, фото, тревел.
sketchapp.com/elements
Этот кит — пример того, как можно удачно использовать оверрайды. Например, символ навбара не содержит никакого фонового цвета, потому что тот задаётся через оверрайд и вынесен в отдельный символ.
#скачать
/designer
Photo
Однако, это не самый удачный пример того, как организовать сами символы. Аккуратные батальоны кнопочек маршируют по странице Symbols. Идеальный мир перфекциониста. На большом боевом проекте на выстраивание солдатиков нет времени, а плагины не решают этой задачи, потому что не умеют читать наши мысли. Рано или поздно символы в Symbols начнут напоминать бесформенное облако и их будет трудно искать.
Есть две альтернативы странице Symbols:
1. Локальные символы
Выносить символы над каждым экраном и не отправлять их в Symbols. Если некий блок встречается на очередном экране впервые, значит, он будет над ним всегда. Получается ровный горизонтальный ряд экранов и символы над ними. Такой метод хорош для сценариев, состоящих из последовательных экранов. Чтобы символ создавался на той же странице, на которой ты работаешь, снимай галочку Send to Symbols page.
2. Глобальные символы
Формировать внешнюю библиотеку, на которой много страниц, выполняющих функции категорий. В каждой категории однотипные символы. Пример таких категорий: Кнопки, Иконки, Поля, Заголовки, и тд. Подключить такой файл в качестве библиотеки к Скетчу, либо импортировать все элементы в Линго. В первом случае будет больно вставлять символы, потому что Скетч не позволяет перетаскивать нужные символы в макет из библиотеки, а ориентироваться по их названиям муторно. Во втором будет удобно перетаскивать символы в макет прямо из Линго. Но тогда будет другая боль: импорт и экспорт символов в Линго. Он тоже косячит, пусть не так люто, как Крафт.
На январских я планирую раскрыть тему создания и поддержки дизайн-систем более подробно.
#для_профи #дизайн_системы
Есть две альтернативы странице Symbols:
1. Локальные символы
Выносить символы над каждым экраном и не отправлять их в Symbols. Если некий блок встречается на очередном экране впервые, значит, он будет над ним всегда. Получается ровный горизонтальный ряд экранов и символы над ними. Такой метод хорош для сценариев, состоящих из последовательных экранов. Чтобы символ создавался на той же странице, на которой ты работаешь, снимай галочку Send to Symbols page.
2. Глобальные символы
Формировать внешнюю библиотеку, на которой много страниц, выполняющих функции категорий. В каждой категории однотипные символы. Пример таких категорий: Кнопки, Иконки, Поля, Заголовки, и тд. Подключить такой файл в качестве библиотеки к Скетчу, либо импортировать все элементы в Линго. В первом случае будет больно вставлять символы, потому что Скетч не позволяет перетаскивать нужные символы в макет из библиотеки, а ориентироваться по их названиям муторно. Во втором будет удобно перетаскивать символы в макет прямо из Линго. Но тогда будет другая боль: импорт и экспорт символов в Линго. Он тоже косячит, пусть не так люто, как Крафт.
На январских я планирую раскрыть тему создания и поддержки дизайн-систем более подробно.
#для_профи #дизайн_системы
Дизайнеры из Мэил.ру собрали российские дизайн-системы на сайте Design Systems Club
Юрий Ветров и Андрей Сундиев из открытых источников собрали на этом сайте наработки Мэил.ру, Яндекса, Альфа-Банка, Мегафона, Акрониса, Тинькова и государственной дизайн-системы. Очень рекомендую поразглядывать. Чужие гайдлайны — это концентрированный опыт. Здорово, что у нас есть сильные разработки.
#для_профи #дизайн_системы
Юрий Ветров и Андрей Сундиев из открытых источников собрали на этом сайте наработки Мэил.ру, Яндекса, Альфа-Банка, Мегафона, Акрониса, Тинькова и государственной дизайн-системы. Очень рекомендую поразглядывать. Чужие гайдлайны — это концентрированный опыт. Здорово, что у нас есть сильные разработки.
#для_профи #дизайн_системы
Скетч-дизайнер: итоги 2017 года
1. Дизайн-инструменты для создания интерфейсов устроили гонку вооружений
В инструментах для продукт-дизайна за год прошли большие изменения. Гонка инструментов в самом разгаре и компании грызутся между собой за огромный рынок. У Скетча появляются серьёзные конкуренты.
Всё больше дизайнеров пересаживается с продуктов Адоба на Скетч и Фигму, понимая, что Фотошоп не годится для масштабирования дизайна. Адоб сопротивляется, но не слишком успешно: Адоб Экспириенс Дизайн, пусть вышел из бета-версии, убийцей Скетча не стал, потому что был слишком сырой. Фреймер усиленно пытается занять территорию Скетча, вышел первый полноценный видеокурс про Фреймер на русском. Инвижн получил много денег от инвестров и тоже будет оттягивать на себя внимание. Фигма не отстаёт и привлекает тех дизайнеров, у которых нет денег на Мак и которым не так важны кастомные горячие клавиши и плагины.
2. Скетч: библиотеки, клауд, новые плагины и сервисы
Сам Скетч очень здорово развился за этот год: появились библиотеки, которые упрощают работу над большими проектами, Скетч Клауд для шеринга исходников. Стали набирать популярность незаменимые плагины вроде Киc (Keys), Раннер, Дупликатор, Марвел, Линго, Абстракт и другие сервисы, работающие в экосистеме Скетча. Появилась синхронизация символов в Линго.
3. 2017 стал годом телеграм-каналов
Как грибы после дождя, в Телеграме выросли десятки каналов, в том числе, про дизайн. Админы пабликов в Контакте и Фейсбуке поняли, что умная лента в этих соцсетях настолько умная, что даже при большой аудитории лишает их каких-либо просмотров, если если не вкладывать деньги в рекламу каждого поста. В итоге, вовлечённость читателей в контент стала чрезвычайно низкая. Пример из жизни: если в группе 180 000 человек, пост не набирает даже 10 000 просмотров. А читатели поняли, что употреблять неконтролируемый сладкий кефир ленты, где вперемешку с котиками и рекламой попадаются серьёзные посты, тоже не в кайф. Поэтому, наблюдаем отток профессиональной аудитории из соцсетей в Телеграм. Это будет продолжаться из-за системных проблем соцсетей.
Появился сервис tgstat.ru, на котором собран прозрачный рейтинг в категории Дизайн: tgstat.ru/design. Даже крупные студии вроде Чулакова (20 октября), Горбунова (9 июня) и Лебедева (17 ноября 2016) вовремя завели телеграм-каналы. Самым популярным каналом в категории Дизайн стал Костя Горский из Интеркома с 17 000 подписчиков. По меркам цифр соцсетей, аудитория небольшая, но надо учитывать, что канал открыт 16 июля 2017 и в отдельные месяцы рос на 5000 человек в месяц, а вовлечение аудитории каналов несравнимо выше, чем в пабликах.
4. Смотри в сторону VR
Всё более ощутимо чувствуется близящаяся VR-революция. Очки и шлемы становятся более доступны широкой аудитории. Oculus Go за 200$, который выходит в январе 2018, тому пример.
Тема дизайна для VR мне очень близка и я о ней точно буду писать. Поэтому я завёл отдельный канал @vrdesigner, которым пока не занимаюсь из-за Скетч-дизайнера. Те, кто сейчас начинает изучать специфику дизайна для VR и технологии вроде ThreeJS и Unity, будут очень востребованы в будущем. Вообще, чем быстрее дизайнеры начнут писать код, тем им будет лучше. Если занимаешься интерфейсами, знание как минимум связки HTML-CSS-JavaScript даёт большие преимущества.
5. Скетч-дизайнеру 4 месяца
Для меня год был большим прорывом. В феврале я начал работать в банке и нашёл свою нишу. В конце августа открыл Скетч-дизайнер.
Сегодня каналу исполниось всего 4 месяца. За это время я перезнакомился с огромным количеством интересных людей и классных дизайнеров. Написал много материала, придумал кучу идей для новых постов, намонтировал #GIF-уроков, выложил свои конспекты по Фреймеру, открыл @framerchat и зарегистрировал домен sketchdesigner.ru, скоро открою на нём сайт. Я вдохновлён тем откликом, который вызвал мой проект и хочу верить, что это только начало.
1. Дизайн-инструменты для создания интерфейсов устроили гонку вооружений
В инструментах для продукт-дизайна за год прошли большие изменения. Гонка инструментов в самом разгаре и компании грызутся между собой за огромный рынок. У Скетча появляются серьёзные конкуренты.
Всё больше дизайнеров пересаживается с продуктов Адоба на Скетч и Фигму, понимая, что Фотошоп не годится для масштабирования дизайна. Адоб сопротивляется, но не слишком успешно: Адоб Экспириенс Дизайн, пусть вышел из бета-версии, убийцей Скетча не стал, потому что был слишком сырой. Фреймер усиленно пытается занять территорию Скетча, вышел первый полноценный видеокурс про Фреймер на русском. Инвижн получил много денег от инвестров и тоже будет оттягивать на себя внимание. Фигма не отстаёт и привлекает тех дизайнеров, у которых нет денег на Мак и которым не так важны кастомные горячие клавиши и плагины.
2. Скетч: библиотеки, клауд, новые плагины и сервисы
Сам Скетч очень здорово развился за этот год: появились библиотеки, которые упрощают работу над большими проектами, Скетч Клауд для шеринга исходников. Стали набирать популярность незаменимые плагины вроде Киc (Keys), Раннер, Дупликатор, Марвел, Линго, Абстракт и другие сервисы, работающие в экосистеме Скетча. Появилась синхронизация символов в Линго.
3. 2017 стал годом телеграм-каналов
Как грибы после дождя, в Телеграме выросли десятки каналов, в том числе, про дизайн. Админы пабликов в Контакте и Фейсбуке поняли, что умная лента в этих соцсетях настолько умная, что даже при большой аудитории лишает их каких-либо просмотров, если если не вкладывать деньги в рекламу каждого поста. В итоге, вовлечённость читателей в контент стала чрезвычайно низкая. Пример из жизни: если в группе 180 000 человек, пост не набирает даже 10 000 просмотров. А читатели поняли, что употреблять неконтролируемый сладкий кефир ленты, где вперемешку с котиками и рекламой попадаются серьёзные посты, тоже не в кайф. Поэтому, наблюдаем отток профессиональной аудитории из соцсетей в Телеграм. Это будет продолжаться из-за системных проблем соцсетей.
Появился сервис tgstat.ru, на котором собран прозрачный рейтинг в категории Дизайн: tgstat.ru/design. Даже крупные студии вроде Чулакова (20 октября), Горбунова (9 июня) и Лебедева (17 ноября 2016) вовремя завели телеграм-каналы. Самым популярным каналом в категории Дизайн стал Костя Горский из Интеркома с 17 000 подписчиков. По меркам цифр соцсетей, аудитория небольшая, но надо учитывать, что канал открыт 16 июля 2017 и в отдельные месяцы рос на 5000 человек в месяц, а вовлечение аудитории каналов несравнимо выше, чем в пабликах.
4. Смотри в сторону VR
Всё более ощутимо чувствуется близящаяся VR-революция. Очки и шлемы становятся более доступны широкой аудитории. Oculus Go за 200$, который выходит в январе 2018, тому пример.
Тема дизайна для VR мне очень близка и я о ней точно буду писать. Поэтому я завёл отдельный канал @vrdesigner, которым пока не занимаюсь из-за Скетч-дизайнера. Те, кто сейчас начинает изучать специфику дизайна для VR и технологии вроде ThreeJS и Unity, будут очень востребованы в будущем. Вообще, чем быстрее дизайнеры начнут писать код, тем им будет лучше. Если занимаешься интерфейсами, знание как минимум связки HTML-CSS-JavaScript даёт большие преимущества.
5. Скетч-дизайнеру 4 месяца
Для меня год был большим прорывом. В феврале я начал работать в банке и нашёл свою нишу. В конце августа открыл Скетч-дизайнер.
Сегодня каналу исполниось всего 4 месяца. За это время я перезнакомился с огромным количеством интересных людей и классных дизайнеров. Написал много материала, придумал кучу идей для новых постов, намонтировал #GIF-уроков, выложил свои конспекты по Фреймеру, открыл @framerchat и зарегистрировал домен sketchdesigner.ru, скоро открою на нём сайт. Я вдохновлён тем откликом, который вызвал мой проект и хочу верить, что это только начало.
Пожелание на Новый год
В новом году я хочу пожелать тебе то, что считаю ключевым в пути дизайнера: это сложно, но это обязательно нужно сделать. Найти свою нишу. Почувствовать свою самую сильную черту характера. Понять, как она поможет развить уникальный навык, который востребован на рынке. Чтобы искать то, что востребовано, нужно внимательно смотреть по сторонам и исследовать жизнь. Когда нашёл, прокачать этот навык до состояния, когда тебе нет равных. Это сделает тебя редким и нужным. Это путь к правильной работе с белой зарплатой и крупным адекватным клиентам с деньгами.
Конечно, хорошо если ты разбираешься в смежных областях вроде вёрстки и маркетинга, нужно всё-ещё быть открытым новому. Но фокус должен быть ярко выражен и на него ты должен тратить львиную долю своих жизненных сил. Время фрилансеров-одиночек прошло: большой интересный проект это всегда результат командной работы. Даже индусы на Апворке объединяют свои силы в команды.
Моей нишей стала организация дизайн-систем. Это очень скучная область, требующая дотошности и системного мышления программиста. И она оказалась не занятой. Без порядка немыслим ни один крупный продукт. Я с детства любил всё систематизировать, составлять списки и словари. Мало кто любит наводить порядок в слоях макета, а тем более, сортировать иконки по алфавиту. А мне это всегда доставляло самое большое удовольствие.
С новым годом, скетч-дизайнеры!
В новом году я хочу пожелать тебе то, что считаю ключевым в пути дизайнера: это сложно, но это обязательно нужно сделать. Найти свою нишу. Почувствовать свою самую сильную черту характера. Понять, как она поможет развить уникальный навык, который востребован на рынке. Чтобы искать то, что востребовано, нужно внимательно смотреть по сторонам и исследовать жизнь. Когда нашёл, прокачать этот навык до состояния, когда тебе нет равных. Это сделает тебя редким и нужным. Это путь к правильной работе с белой зарплатой и крупным адекватным клиентам с деньгами.
Конечно, хорошо если ты разбираешься в смежных областях вроде вёрстки и маркетинга, нужно всё-ещё быть открытым новому. Но фокус должен быть ярко выражен и на него ты должен тратить львиную долю своих жизненных сил. Время фрилансеров-одиночек прошло: большой интересный проект это всегда результат командной работы. Даже индусы на Апворке объединяют свои силы в команды.
Моей нишей стала организация дизайн-систем. Это очень скучная область, требующая дотошности и системного мышления программиста. И она оказалась не занятой. Без порядка немыслим ни один крупный продукт. Я с детства любил всё систематизировать, составлять списки и словари. Мало кто любит наводить порядок в слоях макета, а тем более, сортировать иконки по алфавиту. А мне это всегда доставляло самое большое удовольствие.
С новым годом, скетч-дизайнеры!
#фреймер_кейс №2: Анимация SVG-пути
В этом уроке мы сделаем прототип анимации приложения Activity для Apple Watch. При нажатии на кнопку будет срабатывать анимация графика, который показывает статистику фитнес-трекера.
medium.com/sketchdesigner/framer-case-2-d8e2e36ffa5d
В версии 107 в Фреймере произошли важные изменения. До сих пор можно было двигать объекты только по прямой линии от координаты начала до координаты окончания. Теперь можно двигать объекты по произвольной траектории, которая задаётся пером или другим контуром объекта. В Фреймере появились новые инструменты, такие как перо (Path) и шейпы (Oval, Polygon, Star). Теперь можно вставлять иконки из внутренней библиотеки svg-иконок и прямо в режиме дизайна рисовать объекты произвольной формы, которые заключаются в SVG-контейнеры.
Мы научимся использовать SVG-слои, зададим атрибуты SVG через новый метод setAttribute(). На наглядном примере научимся использовать modulate() и привяжем изменение одного значения к другому.
Получившийся проект: framer.cloud/vPUBb/
Вот готовое решение с одним графиком, которое можно быстро разобрать и интегрировать в любой дизайн:
framer.cloud/EwVwU/
#для_профи #лучшее #Фреймер #UI_анимация
В этом уроке мы сделаем прототип анимации приложения Activity для Apple Watch. При нажатии на кнопку будет срабатывать анимация графика, который показывает статистику фитнес-трекера.
medium.com/sketchdesigner/framer-case-2-d8e2e36ffa5d
В версии 107 в Фреймере произошли важные изменения. До сих пор можно было двигать объекты только по прямой линии от координаты начала до координаты окончания. Теперь можно двигать объекты по произвольной траектории, которая задаётся пером или другим контуром объекта. В Фреймере появились новые инструменты, такие как перо (Path) и шейпы (Oval, Polygon, Star). Теперь можно вставлять иконки из внутренней библиотеки svg-иконок и прямо в режиме дизайна рисовать объекты произвольной формы, которые заключаются в SVG-контейнеры.
Мы научимся использовать SVG-слои, зададим атрибуты SVG через новый метод setAttribute(). На наглядном примере научимся использовать modulate() и привяжем изменение одного значения к другому.
Получившийся проект: framer.cloud/vPUBb/
Вот готовое решение с одним графиком, которое можно быстро разобрать и интегрировать в любой дизайн:
framer.cloud/EwVwU/
#для_профи #лучшее #Фреймер #UI_анимация
FontRapid
Гениальный плагин, который позволяет делать файлы шрифтов прямо в Скетче.
Нет в Раннере, только по ссылке: fontrapid.com
1. Рисуем каждый глиф в виде комбинированного шейпа (combined shape) и называем его так же как глиф («А» для заглавной «А», «b» для строчной «b»).
2. Включаем панель плагина Plugins → Toggle Font Rapid.
3. Подстраиваем высоту глифа и базовую линию во вкладке Editor.
4. Во вкладке Metadata заполняем название и начертание.
5. Импортируем OTF-файл.
6. Устанавливаем его как новый шрифт через Font Book или другой менеджер шрифтов.
Со специализированным софтом вроде FontLab и Glyphs этому плагину не конкурировать, но если нужно быстро набросать шрифт, например, для набора иконок, он будет очень полезен. Протестировал работу с русскими буквами, узнаёт без всяких проблем.
Спасибо за ссылку Dean Rie из чата @teamsketch.
#плагины #для_профи
Гениальный плагин, который позволяет делать файлы шрифтов прямо в Скетче.
Нет в Раннере, только по ссылке: fontrapid.com
1. Рисуем каждый глиф в виде комбинированного шейпа (combined shape) и называем его так же как глиф («А» для заглавной «А», «b» для строчной «b»).
2. Включаем панель плагина Plugins → Toggle Font Rapid.
3. Подстраиваем высоту глифа и базовую линию во вкладке Editor.
4. Во вкладке Metadata заполняем название и начертание.
5. Импортируем OTF-файл.
6. Устанавливаем его как новый шрифт через Font Book или другой менеджер шрифтов.
Со специализированным софтом вроде FontLab и Glyphs этому плагину не конкурировать, но если нужно быстро набросать шрифт, например, для набора иконок, он будет очень полезен. Протестировал работу с русскими буквами, узнаёт без всяких проблем.
Спасибо за ссылку Dean Rie из чата @teamsketch.
#плагины #для_профи
This media is not supported in your browser
VIEW IN TELEGRAM
#GIF Демо плагина FontRapid
Диаграмы в ПФМ: круговые против линейных
Только недавно я сделал урок про то как анимировать круговую диаграмму для Apple Watch и хотел бы продолжить эту тему, потому что этот способ визуализации довольно специфический.
Что такое ПФМ
Во всех адекватных приложениях банков есть функция ПФМ (персональный финансовый менеджер). Эта функция помогает сравнить, на что были слиты кровные, и показывает визуализацию трат в виде диаграм. Цель ПФМ — дать пользователю ощущение контроля за расходами и показать, на что он тратит больше всего.
Банки очень любят показывать круговые диаграммы (пайчарты), потому что они яркие, их можно модно анимировать. От этого приложение будет смотреться дороже и вкуснее, как UI-киты в Дрибле.
Почему все используют пайчарты
По моему мнению, это наследие Пауэрпоинта. Пайчарты привычны и понятны менеджерам, с которыми дизайнеры часто взаимодействуют. Но на практике они не так наглядны, как обычные диаграмы-столбики (барчарты), особенно, если в них много мелких сегментов.
Как лучше?
Самый наглядный способ оценить траты — это столбики, отсортированные от большего к меньшему по единой базовой линии. Тогда мы можем оценивать линии: «короткий — мало», «длинный — много». В таком графике сразу видно, какой сегмент самый большой, даже если он больше лишь на процент. В пайчарте для оценки сегмента мы можем использовать только его площадь и визуальный размер. Люди не так хорошо определяют площадь, как длину. Другой огромный плюс барчартов в том, что ты можешь сравнить любой столбик с любым другим. Пайчарт такого не позволяет.
Как сделать пайчарт ещё хуже?
Проблема невизуальности усугубляется, когда средствами Пауэрпоинта пайчарт делают объёмным, потому что можно. Тогда вообще нихрена непонятно, потому что 3D-перспектива вносит свои искажения. Ближние сегменты кажутся визуально больше, а дальние меньше. Лучший способ солгать, когда одну величину нужно приуменьшить, а другую приувеличить.
Когда всё-таки стоит использовать пайчарт?
Это уместно, когда нужно сравнить 2-3 значения, при условии, что они радикально отличаются друг от друга. Например, пайчарт хорошо покажет, как 30% отличается от 70%.
Как правильно кодировать цвет: динамика трат
Чтобы было легче различать сегменты в пайчартах их красят какими-попало цветами. В барчартах цветовое кодирование становится ненужным, потому что сегменты отличаются по естественному признаку: ширине.
Юлия Кондратьева предложила классную идею: когда период завершён, можно использовать цветовое кодирование, чтобы отслеживать динамику трат. В этом месяце на кафе потратил больше, чем в среднем на ту же дату за последние месяцы, значит график красный. Если меньше, зелёный. Чем меньше значение, тем бледнее оттенки.
Источники
yulyakondratyeva.ru/blog/all/statistika-rashodov/
(за ссылку спасибо @mosinkru)
Хорошая ссылка по теме: The Worst Chart In The World (англ)
businessinsider.com/pie-charts-are-the-worst-2013-6
#UX #первые_шаги
Только недавно я сделал урок про то как анимировать круговую диаграмму для Apple Watch и хотел бы продолжить эту тему, потому что этот способ визуализации довольно специфический.
Что такое ПФМ
Во всех адекватных приложениях банков есть функция ПФМ (персональный финансовый менеджер). Эта функция помогает сравнить, на что были слиты кровные, и показывает визуализацию трат в виде диаграм. Цель ПФМ — дать пользователю ощущение контроля за расходами и показать, на что он тратит больше всего.
Банки очень любят показывать круговые диаграммы (пайчарты), потому что они яркие, их можно модно анимировать. От этого приложение будет смотреться дороже и вкуснее, как UI-киты в Дрибле.
Почему все используют пайчарты
По моему мнению, это наследие Пауэрпоинта. Пайчарты привычны и понятны менеджерам, с которыми дизайнеры часто взаимодействуют. Но на практике они не так наглядны, как обычные диаграмы-столбики (барчарты), особенно, если в них много мелких сегментов.
Как лучше?
Самый наглядный способ оценить траты — это столбики, отсортированные от большего к меньшему по единой базовой линии. Тогда мы можем оценивать линии: «короткий — мало», «длинный — много». В таком графике сразу видно, какой сегмент самый большой, даже если он больше лишь на процент. В пайчарте для оценки сегмента мы можем использовать только его площадь и визуальный размер. Люди не так хорошо определяют площадь, как длину. Другой огромный плюс барчартов в том, что ты можешь сравнить любой столбик с любым другим. Пайчарт такого не позволяет.
Как сделать пайчарт ещё хуже?
Проблема невизуальности усугубляется, когда средствами Пауэрпоинта пайчарт делают объёмным, потому что можно. Тогда вообще нихрена непонятно, потому что 3D-перспектива вносит свои искажения. Ближние сегменты кажутся визуально больше, а дальние меньше. Лучший способ солгать, когда одну величину нужно приуменьшить, а другую приувеличить.
Когда всё-таки стоит использовать пайчарт?
Это уместно, когда нужно сравнить 2-3 значения, при условии, что они радикально отличаются друг от друга. Например, пайчарт хорошо покажет, как 30% отличается от 70%.
Как правильно кодировать цвет: динамика трат
Чтобы было легче различать сегменты в пайчартах их красят какими-попало цветами. В барчартах цветовое кодирование становится ненужным, потому что сегменты отличаются по естественному признаку: ширине.
Юлия Кондратьева предложила классную идею: когда период завершён, можно использовать цветовое кодирование, чтобы отслеживать динамику трат. В этом месяце на кафе потратил больше, чем в среднем на ту же дату за последние месяцы, значит график красный. Если меньше, зелёный. Чем меньше значение, тем бледнее оттенки.
Источники
yulyakondratyeva.ru/blog/all/statistika-rashodov/
(за ссылку спасибо @mosinkru)
Хорошая ссылка по теме: The Worst Chart In The World (англ)
businessinsider.com/pie-charts-are-the-worst-2013-6
#UX #первые_шаги
yulyakondratyeva.ru
Понятная статистика расходов vs пай чарты
Тафти, Бирман, здравый смысл и все-все-все топят за то, что круговые диаграммы использовать не надо. Но у банковских приложений свой особый путь
Скетч-чат: разговариваем о Скетче и дизайне интерфейсов
Если у тебя есть вопросы про Скетч, на которые ты не можешь найти ответ, их всегда можно задать в Скетч-чате. Изначально этот чат открыл @deanrie, теперь мы предлагаем сделать его основным чатом Скетч-дизайнера.
Меньше воды, больше жира: только про Скетч
Формат тот же, что и в @framerchat: вопросы по теме → компетентные ответы. Высушенные ответы собираются в @sketchanswers.
Я наблюдал за несколькими чатами в телеграме и видел везде одну и ту же проблему: когда начинается неконтролируемое живое общение, теряется содержательность. Если в счётчике пушей 400 непрочитанных, от чата пора отписываться. Я считаю, что содержательность важнее милой болтовни, поэтому часто удаляю сообщения.
Соблюдай правила
Чаты крупнее 500 человек становится сложно читать, если не сформированы правила. Слишком жёсткие правила убивают общение, но удалять сообщения и банить неадекватов необходимо, чтобы большинство участников могли читать интересное. Правила чата закреплены в шапке. Без зазрения совести трём неинтересные сообщения, включая те, что по теме. Знаю, некоторым это не понравится. Извиняйте.
Что обсуждаем и что можно постить
Вопросы про Скетч, на которые ты не нашёл ответ в @sketchanswers. Свежие новости, связанные со Скетчем. Действительно классные лонгриды, которые ты дочитал до конца, а также плагины, которые ты сам используешь.
Чтобы поддерживать структуру, в обязательном порядке используем функцию Reply (не через @!). Мы на «ты» и рады помочь. Велкам: @sketchchat.
Для обсуждения других инструментов и просто общения мы также создали второй чат: @sketchfree.
@okunev и @deanrie.
Если у тебя есть вопросы про Скетч, на которые ты не можешь найти ответ, их всегда можно задать в Скетч-чате. Изначально этот чат открыл @deanrie, теперь мы предлагаем сделать его основным чатом Скетч-дизайнера.
Меньше воды, больше жира: только про Скетч
Формат тот же, что и в @framerchat: вопросы по теме → компетентные ответы. Высушенные ответы собираются в @sketchanswers.
Я наблюдал за несколькими чатами в телеграме и видел везде одну и ту же проблему: когда начинается неконтролируемое живое общение, теряется содержательность. Если в счётчике пушей 400 непрочитанных, от чата пора отписываться. Я считаю, что содержательность важнее милой болтовни, поэтому часто удаляю сообщения.
Соблюдай правила
Чаты крупнее 500 человек становится сложно читать, если не сформированы правила. Слишком жёсткие правила убивают общение, но удалять сообщения и банить неадекватов необходимо, чтобы большинство участников могли читать интересное. Правила чата закреплены в шапке. Без зазрения совести трём неинтересные сообщения, включая те, что по теме. Знаю, некоторым это не понравится. Извиняйте.
Что обсуждаем и что можно постить
Вопросы про Скетч, на которые ты не нашёл ответ в @sketchanswers. Свежие новости, связанные со Скетчем. Действительно классные лонгриды, которые ты дочитал до конца, а также плагины, которые ты сам используешь.
Чтобы поддерживать структуру, в обязательном порядке используем функцию Reply (не через @!). Мы на «ты» и рады помочь. Велкам: @sketchchat.
Для обсуждения других инструментов и просто общения мы также создали второй чат: @sketchfree.
@okunev и @deanrie.