Обновленный интерфейс Zilliz Cloud: оптимизированный и интуитивно понятный пользовательский опыт
Поскольку ИИ продолжает трансформировать отрасли, спрос на мощные, масштабируемые технологии, такие как векторные базы данных, способные поддерживать GenAI-приложения корпоративного уровня, резко вырос. Разработчикам нужны инструменты, которые не только надежны, но и интуитивно понятны, позволяя им быстро создавать и поддерживать свои ИИ-приложения без лишней сложности.
С учетом этого мы представили последний релиз Zilliz Cloud, который включает множество функций и улучшений, готовых для корпоративного использования, включая multi-replica, миграцию данных и улучшенный векторный поисковый движок Cardinal для 10-кратного прироста производительности. Кроме того, мы выпустили полностью переработанный пользовательский интерфейс (UI). Новый UI стал чище, интуитивнее и специально разработан для оптимизации рабочих процессов, снижения когнитивной нагрузки и повышения продуктивности. Он позволяет разработчикам сосредоточиться на инновациях, а не погружаться в сложности.
В этом блоге мы рассмотрим причины переработки нашего UI, представим внесенные изменения и обсудим, как новый интерфейс может помочь разработчикам работать эффективнее. Мы также поделимся выводами из нашего опыта редизайна UI для SaaS-продукта, предложив рекомендации продуктовым дизайнерам, стремящимся улучшить пользовательские взаимодействия в своих проектах.
Посмотрите видео ниже, чтобы быстро ознакомиться с нашим совершенно новым UI для Zilliz Cloud.
Переосмысление нашего видения: стимул к редизайну UI
С начала работы над Zilliz Cloud в 2022 году мы быстро развивались, почти ежемесячно представляя новые версии и расширяя наш функционал, чтобы решать болевые точки пользователей, приносить ощутимую пользу и помогать им добиваться большего успеха. Изначально мы поставили амбициозные цели в области пользовательского опыта, но быстрый темп выпуска функций часто отодвигал их на второй план. Это распространенная проблема в технологических компаниях, где давление постоянной поставки может затмевать фундаментальные UX-цели.
Наш backlog в Jira, заполненный задачами по оптимизации, подчеркнул необходимость значимой паузы и переоценки. По мере того как рынок векторных баз данных становится все более конкурентным, поддержание отличного пользовательского опыта критически важно для удовлетворенности пользователей и сохранения преимущества над конкурентами.
Это осознание привело нас к решению провести комплексный редизайн UI. Это крупное обновление касается не только улучшения эстетики; оно включает переосмысление функциональности, модулей и общей удобности использования, чтобы наша платформа была интуитивной и мощной. Мы стремимся предоставить разработчикам инструмент, который функционален и приятен в использовании.
Выявление проблем с помощью комплексного UI/UX-аудита
В рамках нашей приверженности улучшению пользовательского опыта мы провели комплексный UI&UX-аудит, включавший детальный обзор всех компонентов, форм и рабочих процессов в нашем интерфейсе. Этот процесс помог нам задокументировать ключевые болевые точки и области, требующие улучшения, обеспечив целостный подход к редизайну.
В ходе этого аудита мы обнаружили, что многие проблемы удобства использования были связаны с устаревшей библиотекой компонентов, которой не хватало гибкости и которая отставала от современных трендов веб-дизайна, в то время как популярные CSS-библиотеки, такие как Tailwind, Radix и shadcn/ui, задают направление к более чистым, легким и прагматичным дизайнерским подходам.
Столкнувшись с этими несоответствиями напрямую, команда дизайнеров ощутила острую необходимость обновить наши компоненты. Контраст между нашими существующими стилями и этими современными, упрощенными дизайнами был разительным, подчеркивая необходимость значительного обновления. Понимая, что исправление старой библиотеки приведет лишь к дальнейшим осложнениям, мы решили переработать нашу библиотеку UI-компонентов с нуля. Этот стратегический шаг направлен на то, чтобы оставаться в русле актуальных трендов и дать нашим командам дизайна и фронтенд-разработки возможность эффективнее обновлять интерфейсы, что в конечном итоге приведет к более качественному продукту, который лучше откликается пользователям и улучшает их общий опыт.
Внедрение упрощенного, удобного для разработчиков UI-дизайна для лучшего пользовательского опыта
Теперь, когда мы определили ключевые факторы, повлиявшие на наше решение переработать UI, и проблемы, с которыми мы столкнулись, давайте посмотрим, что мы изменили и как эти изменения могут помочь нашим пользователям.
Упрощенная и понятная навигация
Наша предыдущая система навигации, разделенная между боковой панелью для функций уровня проекта и верхним меню для организационных задач, создавала несколько ключевых проблем:
Пользователям часто было сложно различать организационные задачи и задачи уровня проекта.
Верхний левый угол был перегружен элементами с разной частотой доступа, создавая ненужный визуальный шум.
Некоторые элементы интерфейса не имели функциональности, что противоречило нашей цели поддерживать чистый и эффективный дизайн.
Ниже приведено сравнение системы навигации до и после редизайна UI. Чтобы решить перечисленные выше проблемы, мы полностью переструктурировали навигацию. Это включало разгрузку верхнего левого угла для уменьшения визуального шума и удаление нефункциональных элементов для создания более чистого интерфейса.
Сравнение системы навигации до и после редизайна UI.png
Помимо решения этих проблем, мы внедрили дополнительные улучшения:
Категоризированные функции: Функции уровня проекта теперь сгруппированы в логические категории, что позволяет быстрее и проще находить инструменты и информацию.
Повышенная ясность боковой панели: Переработанные иконки боковой панели обеспечивают более чистый и интуитивно понятный вид, снижая трение при навигации.
Новая система теперь стала более организованной, упрощенной и интуитивной, обеспечивая более понятный и эффективный пользовательский опыт.
Современный дизайн на основе карточек
Отзывы пользователей выявили две основные проблемы в нашем предыдущем дизайне: плотно заполненные таблицы, которые перегружали пользователей, и пустые страницы, которые казались разреженными, особенно на больших экранах. Чтобы справиться с этими крайностями, мы внедрили в новый UI дизайн на основе карточек. Этот подход идеально балансирует плотность информации и простоту, организуя контент в структурированные, визуально различимые карточки.
Каждая карточка выступает как самостоятельный блок с интуитивно понятными элементами, такими как кнопки и ссылки. Это упрощает взаимодействия и гарантирует, что ключевые действия легко заметить и выполнить. Логически группируя информацию, карточки превращают сложные наборы данных в удобные для быстрого просмотра, аккуратно расположенные блоки, уменьшая визуальную загроможденность и повышая удобство использования.
В результате получился UI, который столь же функционален, сколь и визуально привлекателен, помогая разработчикам оставаться сосредоточенными на своей работе без отвлекающих факторов.
Современный дизайн на основе карточек
Большая ясность благодаря согласованности на основе сетки
Чтобы привнести структуру и гармонию в новый UI, мы внедрили строгую систему сетки, которая точно организует каждый элемент. Этот подход обеспечивает идеальное горизонтальное и вертикальное выравнивание, создавая чистый, отполированный и интуитивно понятный макет. Формируя визуально последовательную основу, сетка снижает когнитивную нагрузку, позволяя пользователям без усилий воспринимать информацию.
Помимо улучшения пользовательского опыта, эта система сетки упрощает процесс проектирования для нашей команды. Единые макеты на страницах функций означают, что дизайнеры и front-end разработчики могут работать более предсказуемо и эффективно при создании новых страниц или добавлении функций. Компоненты тщательно подобраны по размеру, чтобы обеспечивать гибкие комбинации и гарантировать, что интерфейс остается целостным и адаптируемым к различным сценариям.
Этот акцент на выравнивании и структуре не только улучшает внешний вид и восприятие платформы — он также поддерживает масштабируемость. Разработчики могут сосредоточиться на создании функциональности, не отвлекаясь на несоответствия, а пользователи получают функциональный и визуально гармоничный UI.
Большая ясность благодаря согласованности на основе сетки
Более интуитивный интерфейс
По мере того как наш продукт рос и развивался, быстрый темп разработки часто приводил к повторному использованию знакомых дизайн-паттернов, чтобы уложиться в сжатые сроки. Хотя такой подход обеспечивал согласованность на всей платформе, иногда это происходило в ущерб интуитивности для пользователя. Страницы, которые выглядели целостно, не всегда казались естественными для навигации, что выявило ключевое понимание: одной согласованности недостаточно. Настоящее удобство использования требует баланса между согласованностью и адаптивностью, когда дизайн настраивается так, чтобы приоритизировать пользовательский опыт.
Мы перешли к более гибкому подходу к организации информации, чтобы сделать интерфейс более интуитивным. Например, мы доработали дизайн таблиц под разные типы объектов, чтобы каждая таблица лучше отражала данные, которые она отображает. Аналогично, мы реструктурировали плотные информационные блоки в макеты на основе карточек, предлагая более понятный контекст и больше элементов, побуждающих к действию.
Отходя от универсального подхода, мы создаем интерфейс, который ощущается гибким и ориентированным на пользователя, помогая разработчикам эффективнее выполнять задачи и при этом получать более плавный, более интуитивный опыт.
Более интуитивный интерфейс
Основа нашего редизайна: оптимизированная и масштабируемая UI-библиотека
Наш успешный редизайн UI был бы невозможен без создания оптимизированной и масштабируемой UI-библиотеки. Основанная на теории атомарного дизайна, эта библиотека переосмысляет ключевые элементы дизайна — цвета, шрифты, тени и компоненты — в целостную систему, которая обеспечивает согласованность на всей платформе, оставаясь при этом адаптируемой к различным сценариям использования.
Оптимизированная и масштабируемая UI-библиотека
Эта новая UI-библиотека была создана с пониманием того, что и пользователи, и внутренние команды взаимодействуют с продуктом как с единым целым, а не как с изолированными частями. Доработав общий внешний вид и восприятие, а также переработав компоненты для обеспечения бесшовной интеграции во всех интерфейсах, мы создали систему, которая решила задачи нашего редизайна и заложила основу для более интуитивного, эффективного и готового к будущему продукта.
Ниже мы описываем некоторые ключевые стратегии и лучшие практики, лежащие в основе нашего подхода.
Обновление цветовой палитры для современного вида
Первым шагом в оптимизации UI стало обновление цветовой палитры, чтобы отразить более современную и динамичную эстетику. Отзывы пользователей показали, что предыдущий дизайн казался устаревшим, поэтому мы ввели более яркий, вдохновленный технологиями синий цвет, чтобы заменить более тусклый оттенок. Настройка светлоты и значения других цветов добавила более свежий, более молодежный тон, одновременно снизив зависимость от темных цветов и серых оттенков.
Мы сделали черный и белый основными цветами, чтобы добиться минималистичного и сбалансированного вида, используя тщательно контролируемые пропорции для контраста и гармонии. Сильные контрасты были смягчены тонкими контурами и тенями, что придало компонентам более легкий вид. Эти обновления придают интерфейсу отполированное и современное ощущение, согласуя его с сегодняшними стандартами дизайна и повышая его визуальную привлекательность.
Обновление цветовой палитры для современного вида
Повышение удобства использования благодаря продуманному применению негативного пространства
Эффективное использование негативного пространства, или белого пространства, важно для снижения визуального шума и создания более комфортного, удобного для пользователя интерфейса. В рамках нашего редизайна мы внедрили увеличенные отступы во всех компонентах, чтобы улучшить читаемость и удобство использования. Например, у кнопок теперь задана минимальная ширина, благодаря чему короткие надписи, такие как "Edit" и "Save", остаются визуально сбалансированными и удобными для взаимодействия независимо от длины текста.
Такое продуманное использование негативного пространства разгружает интерфейс, делая его визуально привлекательным и интуитивно понятным для навигации. Мы также доработали иконки, сделав их более тонкими и элегантными, что в сочетании с другими элементами усиливает ощущение легкости.
Повышение удобства использования благодаря продуманному применению негативного пространства
Принятие простоты: «Меньше значит больше»
Простота — это не просто дизайнерское предпочтение, а осознанная стратегия. В нашем новом UI мы приняли принцип сдержанности, чтобы создать более упорядоченную и сфокусированную дизайн-систему. Иконки и логотипы были стандартизированы до единого размера и динамически масштабируются в разных контекстах. Эта философия «меньше значит больше» позволяет нам создавать целостные, элегантные дизайны без добавления ненужной сложности.
Мы упростили систему, сузив цветовую палитру до избранного набора ключевых тонов, используя только светлые и темные тени и ограничив текстовую иерархию всего четырьмя уровнями. Эти осознанные ограничения уменьшают визуальный шум, упрощают поддержку интерфейса и повышают продуктивность дизайнеров, одновременно обеспечивая чистый и приятный пользовательский опыт.
Принятие простоты — меньше значит больше
Адаптация компонентов для более умных и интуитивных форм
В дизайне мы руководствуемся принципом: "Форма следует за функцией." Каждый компонент в нашей UI-библиотеке должен иметь четкую и осмысленную роль. Это означает проектирование компонентов, способных поддерживать разнообразные пользовательские вводы и сценарии для продуктов баз данных. Например, как ключевой элемент любой SaaS-платформы, формы необходимы — именно в них пользователи выполняют важные задачи, такие как ввод платежных данных, защищенных кодов, ссылок, паролей и многого другого.
Мы внедрили вариативные компоненты ввода, разработанные для бесшовной адаптации к различным требованиям, чтобы повысить ясность и удобство использования. Эти поля ввода интуитивны и визуально понятны, помогая пользователям быстро и точно выполнять задачи. Отдавая приоритет функциональности и эффективности пользователей, мы сделали даже самые сложные рабочие процессы плавными, снизив трение и обеспечив неизменно легкий общий опыт.
Адаптация компонентов для более умных и интуитивных форм
Кроме того, мы добавили специальный тип Alert специально для обновлений, связанных с расходами, чтобы их было легко отличить от обычных системных уведомлений. Это означает, что пользователи могут быстро распознавать важные предупреждения о платежах, счетах или использовании, не смешивая их с рутинными сообщениями.
Адаптация компонентов для более умных и интуитивных форм 2
Определение четких и последовательных дизайн-рекомендаций
Отличная библиотека компонентов — это не только устранение несоответствий в стилях, но и упрощение рабочих процессов и развитие более эффективного сотрудничества между дизайнерами и разработчиками. Ранее неясные рекомендации по использованию компонентов часто вызывали путаницу и напряжение во время дизайн-ревью и разработки. Мы внедрили понятные, практичные правила, чтобы преодолеть эти сложности: они устраняют неоднозначность, закрывают технический долг и сокращают ненужные обсуждения туда-сюда. Эти правила позволяют командам тратить меньше времени на споры о деталях и больше времени уделять значимым задачам, что приводит к созданию согласованных и эффективных дизайн-результатов.
Вот ключевые правила, которые мы установили:
Ширина кнопок: Теперь все кнопки имеют минимальную ширину, чтобы они оставались удобными в использовании и по ним было легко нажимать независимо от длины текста.
Основные и второстепенные кнопки: Основные кнопки всегда как минимум такой же ширины, как второстепенные, даже если у последних более длинный текст, что поддерживает визуальный баланс.
Индикаторы и подсказки в формах: Индикаторы обязательных полей и подсказки в формах следуют строгим правилам размещения, делая формы более интуитивными и доступными.
Размеры модальных окон: Модальные окна ограничены четырьмя предопределенными вариантами ширины, что дает дизайнерам гибкость при сохранении визуальной согласованности.
Эти рекомендации выходят за рамки эффективности — они закладывают основу для продуманного, целостного опыта, который кажется пользователям естественным и интуитивным.
Что сделало этот редизайн возможным
Согласованность команды: общее видение
Редизайн платформы — задача не из простых: это сложная, масштабная работа, которая может казаться подавляющей для дизайнеров и разработчиков. Чтобы справиться с этой сложностью, нашим главным приоритетом было согласование внутри команды. Хотя начать с четкого видения крайне важно, еще важнее оставаться согласованными в отношении конечной цели. С самого начала мы отказались от индивидуальных предположений или личных предпочтений и приняли осознанный, совместный подход. Каждое дизайн-решение тщательно оценивалось, чтобы убедиться, что оно служит нашим целям в области пользовательского опыта, а каждое изменение пересматривалось, чтобы убедиться, что оно приносит продукту значимую ценность. Этот общий фокус помог команде сохранять единство и двигаться в нужном направлении на протяжении всего процесса.
Agile-шаги и умное управление задачами
Баланс между масштабным редизайном и параллельной разработкой новых функций требовал стратегического и гибкого рабочего процесса. Мы разделили проект на управляемые этапы, уделяя приоритетное внимание понятной коммуникации и эффективному управлению задачами, чтобы обеспечить прогресс без нарушения регулярной итерационной разработки продукта.
Agile-шаги и умное управление задачами
Одним из ключевых моментов стал Agile UI Implementation Review, во время которого мы потратили день на тщательную проверку того, насколько точно недавно реализованный UI соответствует исходным дизайн-планам. Этот обзор выявил более 300 несоответствий, которые мы задокументировали в Smartsheet на Lark. Каждая проблема была помечена практическими статусами, такими как Нерешено, Решено, Требует проверки и Проверено, и назначена конкретным членам команды. Этот структурированный процесс позволил нам устранить и проверить все проблемы в течение недели, гарантировав, что новый UI соответствует нашим стандартам качества и согласованности.
Учимся у лучших: SaaS-дизайн за пределами баз данных
Традиционные продукты для баз данных часто испытывают трудности с удобством использования, поскольку их перегружают сложные наборы функций, которые могут подавлять пользователей. В рамках нашего редизайна мы решили выйти за пределы привычных подходов к UI/UX, характерных для баз данных. Вместо того чтобы ограничивать свою перспективу конкурентами, мы расширили подход и взяли на вооружение лучшие практики современного SaaS-дизайна.
Учимся у лучших — SaaS-дизайн за пределами баз данных
Наше исследование вышло за рамки индустрии баз данных: мы изучили интерфейсы из таких областей, как обработка данных, облачные сервисы, AI-приложения и другие ведущие SaaS-платформы. Такой широкий взгляд дал нам бесценные представления об инновационных решениях и распространенных паттернах, которые работают в разных отраслях.
И напоследок
Этот редизайн стал настоящей командной работой, ставшей возможной благодаря тесному сотрудничеству дизайнеров, инженеров и многих других команд. Их упорный труд, креативность и преданность делу подняли опыт использования Zilliz Cloud на совершенно новый уровень, и мы невероятно благодарны за энтузиазм и вовлеченность, которые каждый участник команды привнес в этот проект.
Наша миссия на этом не заканчивается — мы намерены и дальше постоянно совершенствовать Zilliz Cloud и внимательно прислушиваться к потребностям наших пользователей. Мы приглашаем вас изучить обновленный UI и лично оценить улучшения. Ваши отзывы и предложения бесценны для нас, поэтому, пожалуйста, не стесняйтесь делиться своими мыслями. Вместе мы сможем и дальше делать Zilliz Cloud лучше для всех!
Начните бесплатно со всеми новыми функциями и улучшениями Zilliz Cloud!
Изучайте возможности с нашим бесплатным тарифом (кредитная карта не требуется) или попробуйте нашу 30-дневную корпоративную пробную версию с кредитами до $200.
Оформите подписку через любой облачный маркетплейс и получите дополнительный кредит в размере $100.
Для получения более подробной информации о Zilliz Cloud посетите нашу документацию.
Дополнительные материалы
Читать далее
1 Table = 1000 Words? Foundation Models for Tabular Data
TableGPT2 automates tabular data insights, overcoming schema variability, while Milvus accelerates vector search for efficient, scalable decision-making.
Vector Databases vs. Key-Value Databases
Use a vector database for AI-powered similarity search; use a key-value database for high-throughput, low-latency simple data lookups.
Vector Databases vs. Hierarchical Databases
Use a vector database for AI-powered similarity search; use a hierarchical database for organizing data in parent-child relationships with efficient top-down access patterns.