Ответы пользователя по тегу Интерфейс пользователя
  • Из каких программ UI/ UX дизайна можно экспорировать xml для Android Studio?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Попробуй Figma. Знакомые разработчики отзывались, что из нее выходит готовая разметка под андрюху
    Ответ написан
    Комментировать
  • Неужели нельзя убрать такой блок "Welcome to Figma! Sign in or create an account to collaborate on this file."?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Как вариант, создай аккаунт для заказчика типа qwerty/123 и попроси залогиниться)
    Ответ написан
    Комментировать
  • Какая должна быть ширины лейаута при 8px модульной системе?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Но при привычных всем ширинах контентной области 12 колоночную сетку и 8px микромодуль совместить не получится.

    Всё получится)))
    лови шаблон
    Ответ написан
    Комментировать
  • Программы для UI/UX дизайна?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Figma наше всё. Правильный совет дали друзья. Она еще и бесплатная.
    Ответ написан
    Комментировать
  • Figma и типографика?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    По-моему гораздо проще, эдак раз в миллион, указывать междустрочный интервал в пикселях, а не процентах. Так и вписываешь в поле: 40 рх например. И настрой горизонтальные линейки, а потом подвинь текстбокс так, чтобы базовая линия покоилась на линейке (не забывая про правильный интерлиньяж, кратный размеру линеек). И всё. Проблемы вообще нету.
    Ответ написан
    Комментировать
  • Где скачать дизайн emoji-клавиатуру в dark-версии для Android мобильного приложения?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Не очень понятно, зачем именно тебе эта клава нужна. Просто для визуализации - мол, в приложении будет возможность вызывать список эмодзи? Или тебе нужны примеры, чтобы сделать на свой лад? В первом случае, можно вставить скриншот просто. Например такой (сойдет и для второго кейса кстати)
    kk-emoji-keyboard-4.3.2-6.png
    Ответ написан
  • Как вы систематизируете компоненты и стили в Фигме?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Мда, чуваки придумали охрененно крутую новую парадигму работы над дизайном, но по сути кинули щенят в реку, а нам теперь самим выплывать. Сам миллиард раз переделывал один и тот же макет, т.к. в процессе постоянно приходили новые идеи, как этот самый процесс оптимизировать.

    По поводу цветов. Есть два подхода, старый и новый.

    Старый - хранить цвет в компоненте, например в квадратике 24х24 (не суть). Суть - использовать этот компонент в качестве маски, чтобы окрашивать объект (что угодно - текст, иконки). Есть кейсы, когда это в тыщу раз круче и удобнее стилей. Пример: панель навигации, в которой кнопки имеют иконку и текст рядом. В компоненте этой самой кнопки цвет иконки задаем пресловутой маской. Подменяем иконки, меняем тексты, получаем меню. Теперь если нужно поменять цвет всех иконок - меняем компонент цвета, который их маскирует. Плюс в том, что не нужно заводить отдельный стиль для этих кнопок, то есть минимизируем стили. Но получаем лишние компоненты, да.

    Новый - хранить цвет в стиле, тут лишний раз объяснять не нужно, но есть нюансы. Главная боль - политика именования. Как называть цвета? "Главный акцент - светлый / средний / тёмный", "Вторичный акцент - ... "? Или же "Голубой - светлый / средний / темный", "Зелёный - ..."? Или "Активный / Отключенный / Ховер"? Лично я для себя решил, что первый вариант лучше. Еще одна проблема - я хочу иметь под рукой не только лишь ограниченный набор цветовых стилей, а целую палитру, особенно актуально это в начале дизайна, когда хз какие цвета закрепятся в макете.

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

    5c26392b5b998478772190.png

    По поводу твоей проблемы - а ты не пробовал инструменты выделения?
    5c2639f3b2e78215242530.png

    *
    По поводу состояния элементов. Раньше я тоже внутри кнопки хранил еще и другие ее состояния, в скрытом виде.

    Теперь поступаю проще - создаю отдельные компоненты её фона: активная, ховер, и т.п., и создаю компонент кнопки например из текста и компонента активного фона, который потом заменяю на disabled, focus, hover, что угодно, ну и цвет текста меняю (стилем цвета или компонентным цветом опять таки). Это сильно упрощает структуру кнопки и улучшает вид стопки слоёв.

    По поводу твоей проблемы - ты создаешь отдельные компоненты, и потом облазишь макет и заменяешь инстансы на новые дизайны, а ты попробуй сделать ровно наоборот: создай копии оригинальных компонентов, детачни их в качестве бек-апа, и смело модифицируй оригиналы. В теории, это сэкономит время, т.к. дизайн поменяется автоматически, а если что - переделаешь потом компоненты на старый лад. Этот процесс сильно ускоряется шорткатами ctrl+alt+c и ctrl+alt+v (копирование и вставка свойств объекта) с зажатым ctrl (это позволяет проникать внутрь группы в один клик).

    По поводу хранения компонентов. Я вообще изначально приучил себя складывать компоненты на отдельный фрейм, а не оставлять их там, где они были созданы. Геморрно конечно, но в итоге такой подход гораздо продуктивнее.

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

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

    - Иконки (даже если под сотню)
    - Элементы интерфейса (атомы и молекулы)
    - Интерфейсы (организмы и страницы)

    Ну и если решил создать компонентные цвета - еще и для них фрейм. Внутри этих фреймов не нужно использовать слеши в названиях компонентов! Компоненты будут наследовать имена страницы и фрейма, на котором они находятся, типа Page1/icons/vk-logo. Понятно, что например иконок может быть под сотню, но в итоге такая плоская структура сильно способствует скорости работы, а быстрый поиск в длиннющем списке через меню инстансов должен облегчаться грамотными префиксами и суффиксами названий, например вместо того чтобы создавать отдельный каталог иконок соцсетей вида Page1/icons/social/vk, нужно тупо название этого каталога сделать префиксом: Page1/icons/social-vk

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

    Важный момент в каталогизации компонентов: не оборачивайте слэши пробелами! То есть, именовать нужно вот так: catalogue1/subcatalogueA/component-alpha, а не catalogue1 / subcatalogueA / component-alpha. Суть в том, что при экспорте компонентов в файлы на жесткий диск образуются ломанные папки, если юзать пробелы вокруг слэшей.
    Ответ написан
    1 комментарий
  • Как лучше сделать интерфейс выбора языка (локали) и валюты, вместе или раздельно?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Забавно что никто еще не додумался объединить их в один дроплист, при активации которого показываются два списка (со странами и валютами). Нажимаешь, выбираешь из двух списков, и если странице требуется перезагрузка для применения настроек - жмёшь еще и какую-нибудь кнопку ОК
    Ответ написан
  • Как вы учили гайдлайны iOS и Android?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    В сети полно ресурсов, предоставляющих переведенные гайдлайны, в открытом доступе. Конкретные сайты не подскажу, так как изучал эту тему годы назад - нужно искать свежие обновленные источники. Это могут быть целые сайты или просто блоги.
    Ответ написан
    Комментировать
  • Что надо знать о дизайне иконок?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Много полезного я узнал из гугловского гайда:
    https://material.io/design/iconography/system-icon...
    (в инете наверняка найдется перевод)

    А рисовать в векторе я учился по урокам этого чувака:
    https://blog.spoongraphics.co.uk/category/tutorials

    Очень толковый чувак, мне пару уроков хватило и дальше я уже сам)

    Вообще, иконки это нечто среднее между дизайном и иллюстрацией. В маленьком рисунке нужно внятно передать некий смысл, да еще без слов - это дизайн. Но рисунок должен быть гармоничным и красивым, что ли, - тут могут понадобиться навыки иллюстратора. Занятие весёлое так то, ну и практика рулит. Можно брать чужие паки и перерисовывать их на свой манер, изучать и перенимать какие-то трюки рисования или идеи для иконок.
    Ответ написан
    Комментировать
  • Какой графический инструмент вы используете для верстки под Linux?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Figma, и только Figma: на Linux, MacOS и Windows.

    UPD: написал краткую вводную для этого и похожих вопросов: https://vms-blog.ru/?p=302
    Ответ написан
    Комментировать
  • Какие есть ресурсы, с помощью которых можно найти похожие альтернативные шрифты?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Спрашивай тут, на Тостере, поможем. Есть кнопка "пригласить эксперта" - зови dom1n1k, Pavel Designer и меня.
    Ответ написан
    Комментировать
  • Какой путь из QA в дизайн предложите вы?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Лови, вот отличный старт - "Искусство мыть слона", займет не больше часа на ознакомление:
    https://cloud.mail.ru/public/6Kzs/1YyWLjfPc
    Ответ написан
  • Как сохранить svg в иллюстраторе без белого фона?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Не должно быть такой проблемы, если в люстре нет объекта на фоне с белой заливкой. Я постоянно рисую иконки в люстре и таскаю их в фигму - никогда такой проблемы не возникало.
    Ответ написан
    6 комментариев
  • Как бороться с длиной строк при локализации контента на маленьких экранах?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Серебрянной пули нет. Таблицы на мобильнике - это всегда боль и индивидуальный подход. В зависимости от контента в таблице, ее мобильная версия всегда компромис и результат некоторых трюков:
    1) как уже писал xmoonlight - колонки превращаются в строки, грубо говоря.
    2) как уже писал Андрей - тупо скролим таблицу горизонтально
    3) я сам частенько просто убираю некритичный контент из таблицы, чтобы способ из п.1 выглядел не слишком монструозно.
    4) уменьшаем кегль, юзаем узкий шрифт, включаем переносы, - чтобы впихнуть не впихуемое

    Опять-таки, универсального решения нет. Просто анализируем контент, чистим его и дизайним так, чтобы сохранить максимум исходного смысла, но не в ущерб читаемости. Это тяжело...
    Ответ написан
    Комментировать
  • Можно ли в Figma создавать стили текста?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Ее действительно нет. И не предвидится. Я несколько месяцев прессовал сообщество и поддержку - не удалось ни слова выудить о потенциальном внедрении стилей в будущем. Скорее всего их не будет.
    Ответ написан
  • Лучший конкурент Sketch, но под Windows?

    Nekto_Habr
    @Nekto_Habr Автор вопроса
    Чат дизайнеров: https://t.me/figma_life
    Кому интересно - я в итоге подсел на Фигму.

    Мне выносит мозг отсутствие необходимых как воздух фич (блин, там нет Swatches и стилей текста!!!), но в целом работать над интерфейсами в ней проще и быстрее.
    Ответ написан
    3 комментария
  • В чем делаете карты навигации приложения для разработчиков?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    для люстры есть плагины упрощающие чертежи. не знаю название правда - видел как-то у коллеги
    Ответ написан
    Комментировать
  • Как обосновать использование Photoshop для прототипирования интерфейса мобильного приложения?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Не надо переубеждать, препод прав. Юзай Иллюстратор.
    Ответ написан
    1 комментарий