![](http://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/getpro/habr/hub/4ea/bd9/5a1/4eabd95a1dc768a8246a91e504a353f1.png)
Интерфейсы *
То, что помогает ориентироваться
Новости
Что будет, если у программиста появится хобби кулинария. Часть 2
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/e4b/76f/246/e4b76f246a583e4ede655dff0b26ae4e.png)
Всем привет, продолжаю свою историю увлечения кулинарией и мобильной разработкой в MIT App Inventor (буду называть "аппинвентор" далее в статье) под это дело. Будет подробно расписана эволюция моего приложения и запредельные, не побоюсь этого слова, возможности аппинвентора, который некоторые считают "инструментом для детей". Кстати, сразу, пока не забыл - дети, если у вас есть интерес к программированию вообще и мобильной разработке под андроид в частности, то я очень рекомендую вам ознакомиться с аппинвентором. А фуллстак-разработчикам и UI/UX дизайнерам возможно будет интересны мои мысли, на основе которых происходила эволюция интерфейса приложения, потому что путь к итоговому результату был очень неблизкий и я бы дорого дал, чтобы сразу придумать то, что получилось в итоге, пропустив промежуточные шаги и сэкономив два года, но я не верю, что это реально в принципе. Зато теперь у меня есть вся эволюция в картинках, так что есть о чем на Хабре рассказать и показать, короче, будет "комикс" ))).
Чем хорош и чем плох Tailwind CSS, или «Допустим, у вас стартап!»
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/7bc/e26/53f/7bce2653f7fb502ba79b6bf1ffd7b77f.png)
Привет, Хабр! Меня зовут Александр Водолазских. Я живу в Новосибирске и я работаю Frontend Domain Lead в СберМаркете. Сегодня хочу немного поговорить об опыте работы с Tailwind CSS — utility-first CSS framework. Поделюсь болью и радостью, которые возникли при его эксплуатации.
Проектируем быстрые действия в iOS: 58 гайдлайнов
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/689/35d/800/68935d800a34f34d4732a619c3875c25.png)
Быстрые действия – полезная функция приложений в iOS, позволяющая упростить путь клиента и сократить число действий, требуемых для выполнения задач.
Несмотря пользу, применяют ее далеко не все, а у тех, кто применяет, часто есть потенциал для улучшения.
В этой статье – 58 гайдлайнов с лучшими практиками и примерами ошибок, которые лучше не совершать при проектировании быстрых действий в iOS, а также идеи применения быстрых действий в e-commerce приложениях.
Истории
Как создать портфолио, если ничего нет
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/08b/faa/142/08bfaa142591e1cb1b2ec78f1ff00834.png)
Я Саша — занимаюсь продуктовым дизайном уже более 6 лет. Я прошёл путь от программиста и дизайнера в отделе маркетинга до старшего дизайнера в крупном финтех продукте. А ещё я веду канал о продуктовом дизайне. Подписывайтесь, там интересно.
Статья будет полезна молодым дизайнерам, у которых за плечами курсы или мало практики в проектах. Более опытные ребята смогут узнать о возможном расширении своего кругозора и портфолио.
В нескольких компаниях я занимался техническим интервью дизайнеров и иногда их поиском. Сейчас тоже бывает необходимость, но намного меньше. Чаще всего найм и вообще интервью зависят от множества факторов:
«Для меня все люди — пользователи». Из регионального сисадмина в UX-дизайнера в Москве
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w780/getpro/habr/upload_files/55c/b09/706/55cb09706f679cc0a7687cacd5c38df9.jpg)
Одна из наших сотрудниц — Валентина Жукова — прошла необычный путь от специалиста по АСОИУ и сисадмина до дизайнера пользовательских интерфейсов. Сейчас у неё своя растущая команда, весьма разносторонний опыт и множество интересных наблюдений. В этом интервью Валя рассказала о том, как подбирает сотрудников, растит их и выявляет лидеров, а также поделилась полезными советами и ресурсами для развития в UX/UI-дизайне.
Как спроектировать хороший таббар: 67 гайдлайнов
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/649/a70/11c/649a7011c5225853eb0de73762310ed5.png)
Таббар – элемент интерфейса, упрощающий навигацию в приложении. Причем достаточно популярный: для этой статьи я скачал 500 аппов и лишь в 14 его не было.
Может показаться, что таббар – это просто. Но, как показывает практика, это ощущение обманчиво, и классный таббар от убогого отличает множество деталей.
В статье будет много анти-примеров, чтобы вы не наступали на грабли, на которые кто-то уже наступил.
Проектируем уведомления в iOS: 104 гайдлайна
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/572/d56/92f/572d5692f98d5e4b7a2c0d2da1a176b3.png)
Push-уведомления – важная точка контакта с пользователями, которая может либо обогатить customer journey, либо обрушить их лояльность. При проектировании уведомлений есть много тонкостей в плане UX-редактуры, дизайна и разработки.
Сегодня на базе анализа 150+ приложений мы разберем 104 гайдлайна – как лучшие практики, так и грабли, на которые не стоит наступать.
Введение в проектирование трехмерного пользовательского интерфейса
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w780/getpro/habr/upload_files/9af/16a/a49/9af16aa494383c3b0edce407eaa00458.jpg)
Проектирование трехмерного пользовательского интерфейса - критический компонент любого приложения с использованием виртуальной среды (VE). Представим краткий обзор трехмерного взаимодействия и интерфейсы пользователя. Обсудим влияние обычных VE аппаратных устройств на пользовательское взаимодействие, так же как техники взаимодействия для трехмерных задач и использование традиционных двумерных стилей взаимодействия в трехмерных средах. Мы делим большинство пользовательских взаимодействий на три категории: навигация, выбор/манипуляция, и систему управления.
Центр внимания находится на доступных методах, но также и на практических рекомендациях для трехмерного взаимодействия. Наконец, мы обсуждаем два подхода к проектированию трехмерного взаимодействия («артистическую» философия дизайна и систематическую философию дизайна) и рассмотрим некоторые примеры приложений со сложными трехмерными требованиями.
Сударь, у Вашей АЭС уши разъехались. Весёлая визуализация многопараметрических систем
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w780/getpro/habr/upload_files/cf1/4e8/a5f/cf14e8a5fb256d5120d253aa9eab4217.jpg)
Описание интересной идеи визуализации контроля за техническими системами со многими параметрами.
Минимпример реализации этой идеи для управления и контроля за выходными радиолампами в аудио-усилителе.
И заодно про радиолампы, ламповые усилители, религию Hi-Fi и Hi-End.
Как мы создаем Squadus: улучшение UX в новом продукте
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/66f/490/d6a/66f490d6a0c29d4639ded37c9864cb29.png)
Ранее мы рассказали о том, с чем столкнулись при разработке фронтенда Squadus — нашего нового продукта для деловых коммуникаций. Сегодня же обратимся к теме улучшения пользовательского опыта.
Squadus — приложение с обширной функциональностью. Это единое цифровое рабочее пространство, которое позволяет общаться в чатах, проводить конференции, совместно работать над документами и автоматизировать типовые действия с помощью ботов. Обеспечение комфорта пользователя было одной из приоритетных задач нашей разработки. При создании интерфейсов мы учли массу возможных UX-сценариев, провели серии исследований, проверили десятки гипотез и протестировали несколько прототипов приложения.
О том, как мы сделали Squadus не просто универсальным, но и удобным в работе инструментом коммуникаций, читайте под катом.
Jetpack Compose: Expandable Text
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/getpro/habr/upload_files/54d/5e9/25c/54d5e925c38eadddd3ad76cb085ef35f.gif)
На протяжении нескольких последних лет мобильная разработка движется в сторону декларативного пользовательского интерфейса. Кто-то начал раньше, кто-то – позже. Большой толчок развитию этого направления сообщество Android разработчиков получило благодаря языку программирования Kotlin, который отлично раскрывает данную концепцию. В 2019 Google представила свой фреймворк для создания декларативного UI: Jetpack Compose.
Подход имеет большое количество плюсов благодаря которым технология набирает популярность и развивается еще более динамично. Однако, как это часто бывает, новые технологии порой вынуждают нас заново изобретать решения старых проблем, об одной из которых я бы и хотел поговорить сегодня – компонент, который поддерживает отображение текста в свернутом и развернутом виде.
Анатомия экрана приложения для трейдинга
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/611/68f/98d/61168f98de2974028ca2273cf9fccf90.png)
Кратко разобрал из каких частей состоит экран приложения для торговли криптовалюты на бирже. Сделал это чтобы объяснить дизайнерам задание для воркаута. Подумал, что вдруг кому ещё пригодится для быстрого старта в теме :)
Настраиваем клавиатуру с помощью графического интерфейса Vial
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/28d/47e/ea4/28d47eea4a3c1792f194c409a65d1f03.png)
Vial — это кроссплатформенный графический интерфейс с открытым исходным кодом и форк QMK для настройки клавиатуры в режиме реального времени.
Программа позволяет настроить клавиатуру с помощью простого и интуитивно понятного интерфейса без каких-либо знаний о программировании.
Консерватизм пользователей программных продуктов
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/fc0/ad7/9ca/fc0ad79cae580ab2304cf2906ea36012.png)
За последние несколько лет мы несколько раз переводили наших клиентов на новые версии платформы. При этом в графическом интерфейсе постоянно происходили какие-то изменения. Естественно, с нашей стороны все делалось исключительно ради улучшения удобства работы с программой. Но каждый раз мы сталкивались с недовольством пользователей, которые требовали все вернуть назад.
Сначала мы принимали это близко к сердцу, думали, что возможно мы что-то делаем не так. Но через какое-то время стало понятно, что проблема не в конкретных изменениях, а в том, что многие пользователи просто никогда не хотят ничего менять. Однако, к сожалению, прогресс не возможен без перемен. Поэтому мы начали воспринимать это как естественный процесс, и кое как научились с этим жить, и мириться с недовольством пользователей.
16 простых и эффективных правил дизайна UI
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/webt/mj/sz/vg/mjszvgutreg0atdrhjsiytuhy-y.png)
Проектировать пользовательский интерфейс сложно. Здесь есть множество возможных вариаций макета, отступов, типографики и цвета, в которых можно просто запутаться. А если к этому дополнительно прибавить юзабилити, доступность и принципы психологии, то задача становится ещё труднее.
К счастью, дизайн UI не обязательно должен представлять такие сложности. Работая в качестве дизайнера продуктов более двух десятков лет, я понял, что большая часть моих решений в плане визуального представления и реализации взаимодействия определялись системой логических правил. Не художественным чутьём или магической интуицией, а простыми правилами.
Наличие системы логических правил помогает эффективно принимать в дизайне продуманные решения. Без логической системы вы просто используете внутреннее чутьё, меняя компоновку элементов, пока не получится желаемый красивый результат.
Мне нравятся правила и логика, но в дизайне решения редко являются двоичными. Вместо строгих правил, которым вам необходимо следовать, воспримите приведённые далее рекомендации как руководства, которые прекрасно работают во многих случаях.
Самый быстрый способ обучения — это практика, так что приступим!
Arc — революционный браузер нового поколения
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w780/getpro/habr/upload_files/b6d/059/ca8/b6d059ca887a4c597b31e5b927b5eeab.jpg)
Каждую неделю свет видит новое приложение или стартап. Команды создают новые продукты или адаптируют старые механики под новые паттерны и реальности.
В этот раз энтузиасты перепридумали браузер. В социальных сетях ходило очень много шума по поводу браузера Arc, но доступ к нему выдают не сразу и не всем. Давайте посмотрим на него поближе и разберемся, действительно ли он революционный?
У меня на компьютере установлено несколько браузеров: Safari, Firefox Developer, Yandex и как основной — Google Chrome. Каждый раз, когда я запускаю какой-то не основной браузер, мне предлагают сделать его браузером по умолчанию, но я отказываюсь.
С Arc картина поменялась, теперь он браузер по умолчанию и сейчас я расскажу почему.
Метод персон на примере проектирования ПО для аренды шашлычных беседок
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w780/getpro/habr/upload_files/545/708/05c/54570805c798e7c0ded18c3794c800cd.jpeg)
При проектировании программ кто-то использует методику Алана Купера, а кто-то считает всё это баловством. Те, кто пользуются, тоже используют её по-разному. Предлагаю посмотреть полусерьёзный пример такой проектной работы и подискутировать о том, работает это или нет.
Уточню, что сам я не являюсь проектировщиком и рассматриваю ситуацию со стороны программиста, который с переменным успехом применяет метод персон после прочтения известной книги.
Как мы в SM Lab сделали редизайн системы «Оценка вклада»
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w780/getpro/habr/upload_files/2e1/1be/c1d/2e11bec1deb4941dba7c81ca9d5ef31a.jpg)
Привет! Меня зовут Сергей Топунов, я фронт-разработчик в SM Lab. Недавно мы сделали редизайн одной из наших внутренних систем, о чем я и хочу вам сегодня рассказать.
«Оценка вклада» — это внутренняя Backoffice-система, которая нужна для регулярной оценки сотрудников. Она позволяет отметить точки роста, рабочий прогресс коллег, а также получить отзыв от других сотрудников.
Основная задача, которая стояла перед нашей командой, заключалась в том, чтобы качественно и за ограниченное время обновить интерфейс Backoffice-системы. Интерфейс был собран с использованием фреймворка Vuetify, представляющего из себя стандартную дизайн-систему Material Design от Google. Были достаточно серьезные недостатки и проблемы, связанные с UX/UI, потому что версию делали в определенной спешке.
Сразу было принято решение — оставить Vuetify как основной фреймворк, а свои компоненты делать только при крайней необходимости. Задача состояла в том, чтобы придумать простые и универсальные правила, которые не конфликтовали бы с Vuetify и позволяли бы легко подключать новые компоненты.
Как повысить эффективность своего колл-центра или улучшить пуш-сообщения
![](https://webcf.waybackmachine.org/web/20230531090401im_/https://habrastorage.org/r/w1560/getpro/habr/upload_files/f6c/092/371/f6c0923711c0eaf0ee53eafcbbfc7289.png)
Я перевела несколько научных исследований, авторы которых проверяли, как разные формулировки в почте, чате или телефонном разговоре влияют на поведение покупателя. В частности, на то, насколько довольным он уходит, сколько тратит и как быстро вернется.
Вклад авторов
-
jvetrau 3666.0 -
alizar 2245.5 -
forgotten 1155.0 -
Milfgard 983.0 -
dmitrysatin 833.0 -
badlittleduck 810.8 -
Leono 716.1 -
kamushken 591.0 -
grokru 541.0 -
object 528.0