Luyan Информация Команда дизайнеров Tencent произвела галантерейные товары! Обязательные высокоэффективные инструменты для дизайнеров пользовательского интерфейса

  Основная команда дизайнеров Tencent, отвечающая за дизайн взаимодействия с пользователем и исследования продуктов Tencent, связанных с социальными сетями, Tencent Social User Experience Design ISUX (InternetSocialUserExperience), обновила серию артефактов эффективности для дизайнеров пользовательского интерфейса.  
  В статье ISUX подчеркивает концепцию «полноценного дизайнера пользовательского интерфейса» и считает, что разница между этой концепцией и традиционным дизайном пользовательского интерфейса отражает изменение роли и ответственности дизайнера пользовательского интерфейса.  
  Например, для дизайнеров сотрудничество между вышестоящими и нижестоящими становится все теснее и теснее, а этап вмешательства продвигается вперед, требуя более глубокого осмысления продукта, понимания пользователей, более эффективного общения и сотрудничества, а также тщательного контроля качества и т. д.  
  Стремясь стать более универсальным дизайнером пользовательского интерфейса, ISUX использует ежедневный рабочий процесс как путь и организует для вас серию практических советов и гаджетов, давайте посмотрим вместе.  
  01 Инструмент накопления дизайна/ДИЗАЙН  
  WhatFont  
  Если вы хотите знать, какие шрифты используются на веб-сайте, вы можете установить подключаемый модуль браузера под названием WhatFont.  
  Когда он включен, вы можете быстро определить шрифт, размер шрифта, толщину шрифта, высоту строки и цвет при наведении курсора мыши на текст, что очень просто и практично.  
  UXArchive  
  На этом веб-сайте собраны процессы взаимодействия с пользователями продуктов от технологических компаний мирового класса. Например, если вы разрабатываете интерфейс «входа пользователя», когда вам нужна ссылка, вы обычно открываете разные приложения для работы и делаете снимки экрана одно за другим. А через этот сайт можно быстро просмотреть примеры других компаний и сравнить разные решения по сценарию.  
  Продукт Eagle  
  для управления материалами Eagle должен быть знаком многим дизайнерам: он поддерживает основные форматы, такие как видео и видео, имеет богатую систему маркировки и интеллектуальные функции классификации. Кроме того, поддерживается визуальное управление шрифтами, а также возможен предварительный просмотр формата PSD.  
  02Инструмент анализа исследований/ДИЗАЙН  
  Qimai  
  Если ваш продукт представляет собой зрелое приложение, размещенное на полках крупных магазинов приложений, вы можете просмотреть сводку оценок, обзоров, состава и тенденций каждого магазина приложений на некоторых сторонних платформах, а также можете разместить свое собственного приложения и конкурирующих продуктов на странице Сравните их вместе.  
  Рейтинги магазина Weibo  
  и отзывы пользователей обычно содержат более целенаправленный контент, большая часть которого связана с существующими функциями.  
  Если вы хотите увидеть, как пользователи используют наши продукты в своей жизни, вы можете искать ключевые слова продуктов на социальных платформах, и вы часто найдете очень интересные результаты.  
  03Design Advanced Tool/DESIGN  
  MeshGradient Инструмент градиента сетки  
  — это подключаемый модуль Figma, мощная функция Mesh в Illustrator также может использоваться в Figma. Готовый градиент также можно сохранить и многократно использовать повторно.  
  RunnerPro  
  Если вы в основном используете Sketch, то RunnerPro будет очень хорошим помощником в Sketch. Его использование похоже на использование системного поиска на Mac через окно поиска для быстрой вставки компонентов, выполнения команд, установки подключаемых модулей и быстрого доступа к определенной монтажной области.  
  Компонентный поиск Runner поддерживает китайский язык, но нечеткий поиск по нескольким ключевым словам по-прежнему относительно хорошо поддерживает английский язык.  
  Плагин Blush Illustrator  
  Библиотека бесплатных коммерчески доступных рисованных иллюстраций, разработанных Пабло Стэнли. Имея на выбор десятки вариантов, вы можете настроить волосы, штаны, оттенок кожи и многое другое для своего персонажа, чтобы создавать уникальные иллюстрации, не открывая Illustrator. Он подходит для иллюстраций операций, пользовательских раскадровок, иллюстраций PPT и т. д.  
  Адрес:  
  https://blush.design/zh-CN  
  Предварительный просмотр кривой анимации  
  Тонкая анимация может сделать опыт более теплым. На этом веб-сайте представлены пять простых макетов веб-страницы и три самых основных набора кривых анимации. Вы можете выбрать демонстрацию, которая подходит вам больше всего, и испытать различные кривые анимации на реальной странице. . Вы также можете настроить определенные параметры внизу для достижения желаемого эффекта.  
  Адрес:  
  https://easings.co/  
  04 Инструмент восстановления вывода/DESIGN  
  DesignProjectTemplate  
  Это шаблон дизайн-проекта, организованный командой Dropbox, который можно скопировать из FigmaCommunity для использования. Каждый проект проекта содержит основную информацию о проекте, ответственном лице, прогрессе и другую обзорную информацию, особенно для команд, которые напрямую делятся рукописями Figma с менеджерами по разработке и продуктам, соответствующая контекстная информация хорошо сохраняется для повышения эффективности коммуникации по проекту.  
  Инструмент для совместной работы над дизайном XSHOW  
  XSHOW — это эффективная платформа для совместной работы над дизайном, разработанная ISUX.Благодаря официальному подключаемому модулю Sketch вы можете загружать эскизы дизайна в облако одним щелчком мыши, а XSHOW будет хранить полные записи версий и операций участников. После загрузки в облако и совместного использования с разработчиками вы можете просматривать аннотации в Интернете и предварительно просматривать их на нескольких терминалах. Кроме того, управление командой XSHOW также может контролировать своевременность разрешений, что, можно сказать, очень практично в сценарии внешнего сотрудничества конфиденциальных проектов.  
  Адрес:  
  https://xshow.tencent.com  
  Самотестирование восстановления WindowResizer+Zeplin  
  WindowResizer — это плагин для Chrome, как и его название, он может фиксировать окно браузера до заданного размера, который можно использовать для проверки адаптивного стратегию веб-страницы или вырезать конкретную диаграмму измерений.  
  Мы часто используем его с функцией наложения инструмента аннотации Zeplin. Установите в браузере тот же размер, что и черновик дизайна, а затем поместите полупрозрачный черновик дизайна поверх него, чтобы сразу увидеть, восстановлена ​​ли веб-страница и что нужно скорректировать. Картинка стоит тысячи слов, и я больше не боюсь, что брат по разработке скажет: «Я ее не вижу», что значительно повысило эффективность общения и гармоничную атмосферу в команде.  
  Если инструмент сжатия  
  по-прежнему использует более традиционный метод автономной доставки, его обычно необходимо экспортировать и отправить другой стороне. Иногда размер выходного дизайна веб-страницы или интерактивного черновика всего процесса относительно велик, и может быть выполнен дополнительный шаг сжатия. Во-первых, партнерам проще открыть план при синхронизации, а также он занимает меньше места на нашем собственном компьютере, когда нам нужно экспортировать несколько версий.  
  Если он находится в пределах 5M или должен обрабатываться партиями, вы можете использовать приложения ImageOptim или Tinypng для сжатия без потерь, которые обычно могут уменьшить примерно на 60-90%. Однако, если размер превышает 5M, использование двух вышеуказанных приложений занимает много времени и может привести к сбоям.В это время вы можете попробовать веб-сайт онлайн-сжатия https://compresspng.com/.Даже большие изображения, превышающие 20M, могут быть стабильно сжимается.  
  Динамический макет Rotato  
  Rotato предоставляет множество распространенных эффектов динамического макета. Просто поместите в него свой проект дизайна (или видео), и вы сможете быстро добиться высококачественных и атмосферных эффектов отображения. Он поддерживает очень полные устройства Apple и некоторые основные устройства Android. Эффекты включают переворачивание интерфейса, увеличение масштаба, прокрутка дисплея и т. д.  
  Адрес: https://www.rotato.app/mockups  
  05 инструмент для проверки данных/ДИЗАЙН  
  AB test виджет расчета пользовательского образца  
  AB test, также известный как групповое или пакетное тестирование. Тест AB по сути состоит в том, чтобы разделить трафик платформы на несколько разных групп для экспериментов, а затем наблюдать за показателями пользовательских данных разных групп, такими как: рейтинг кликов, удержание на следующий день, среднее время просмотра на душу населения и другие. основные индикаторы и, наконец, выбрать лучший.  
  Прежде чем приступить к планированию эксперимента, необходимо уточнить цели эксперимента. По количеству элементов в гипотетической схеме AB-тестирование можно разделить на однофакторное и многомерное тестирование. Здесь мы возьмем одну переменную в качестве примера, чтобы кратко объяснить, как распределять трафик. Рекомендуем этот бесплатный инструмент для распределения трафика: https://www.evanmiller.org/ab-testing/sample-size.html, по ожидаемым результатам эксперимента и количеству пользователей на рынке определить минимальный трафик требуется для эксперимента.