IPS 4.5: Представляем нашу обновленную тему по умолчанию

Eсли вы некоторое время работали в Invision Community, вы знаете, что наша стандартная тема по умолчанию не развивалась с первых дней 4.0. Действительно, последнее значительное обновление пришло с 4.2.

В предстоящем выпуске 4.5 мы хотели бы вернуться к теме по умолчанию и внести в нее изменения в 2020 году, а также внести постепенные улучшения в базовую кодовую базу в качестве основы для дальнейшей реорганизации в будущей версии.

В этой статье я хочу немного рассказать о некоторых дизайнерских решениях, которые были заложены в создание новой темы.

цели

Редизайн ради этого никогда не является хорошей идеей, поэтому мы сначала изложили то, чего хотели достичь:
Более яркий пользовательский интерфейс с большей насыщенностью и контрастностью и более простой общей цветовой схемой
Улучшенная типография
Лучше, последовательнее, расстояние между элементами, особенно на мобильных устройствах
Лучшая логическая группировка разделов каждой страницы
Сокращение недостаточно используемых ссылок / кнопок на странице и поиск альтернативных способов сделать их доступными
Улучшение отображения состояний сообщений
Модернизация и расширение основного кода, который поддерживает тему по умолчанию

Давайте немного поговорим о каждом из них.

Более яркий интерфейс

Наиболее очевидным изменением будет то, что наши стандартные цвета будут ярче и насыщеннее, чем раньше. Прежде чем вносить какие-либо изменения, мы сначала создали цветовую шкалу как для нейтральных, так и для фирменных цветов (синий, конечно). Это дало нам гибкую, но непротиворечивую палитру цветов на выбор, с соответствующим встроенным контрастом. Нейтралы тоже имеют оттенок синего, чтобы не выглядеть размытыми.

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

Яркие цвета по умолчанию

Упрощение пользовательского интерфейса путем удаления фоновых блоков

Улучшение типографии

Мы чувствовали, что в течение некоторого времени наша типография была несколько запутанной - в зависимости от конкретного контекста использовалась смесь размеров, веса и цветов.

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

Наша шкала типографии

(Остроумные из вас могут также заметить, что мы переключили наш шрифт по умолчанию на Inter. Inter - это фантастический шрифт с открытым исходным кодом, который идеально подходит для текста в Интернете, и недавно был добавлен в проект Google Web Fonts, что делает его очень простым для нас, чтобы включить его в нашу тему по умолчанию.)

Мы более тщательно продумали применение стилей шрифтов, особенно для заголовков, чтобы они всегда визуально отличались от окружающего текста. Мы сделали это с помощью цвета и веса. В результате страницы должны инстинктивно чувствовать себя более организованными и логичными, чем раньше.

Пример улучшенной типографии из приложения «Загрузки»

Улучшенный интервал (особенно на мобильном телефоне)

Мы определили, что интервалы (отступы и поля) нуждаются в некотором улучшении. Многие значения пробелов были произвольными и противоречивыми, что приводило к плохой визуальной гармонии на любой странице.

Больше всего беспокоит то, что в мобильных размерах мы просто вдвое уменьшаем значения заполнения рабочего стола. Хотя это было разумным подходом во времена телефонов с маленькими экранами, оно определенно устарело в течение некоторого времени. Экран телефона теперь, как правило, больше и способен вместить более просторный пользовательский интерфейс, не выглядя смешным.

В 4.5 мы покончили с этим подходом, и воздействие было немедленным. Мобильные размеры теперь получают гораздо более приятный интерфейс, элементы которого могут дышать. Кроме того, мы также сделали большинство карт полноформатными, чтобы обеспечить дополнительное пространство для контента.

Сообщения могут наконец дышать на мобильном телефоне

Также существует множество других настроек: интервал по умолчанию немного увеличен, таблицы данных (например, список тем) получают дополнительный интервал по вертикали, а интервал между элементами стал более согласованным.

Улучшена группировка связанных элементов

До 4.5 большинство областей контента существовало внутри карт. Однако, одним заметным исключением из этого были заголовки страниц, и в результате они могли чувствовать себя особенно дезорганизованными, особенно для пользователей, которые имели много элементов управления в этой части страницы (например, сотрудники).

Чтобы решить эту проблему, мы разработали новый стандартизированный дизайн для заголовков страниц элементов контента, предоставив им свои собственные карточки и последовательное размещение кнопок.

Заголовок темы

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

Заголовок календаря

Заголовок беседы личных сообщений

Сокращение недостаточно используемых ссылок / кнопок

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

Две конкретные области, на которых мы сосредоточились, - это обмен ссылками и постбитами (как постами на форуме, так и комментариями в других приложениях).

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

Поделиться ссылками в элементах контента

Области комментариев также пострадали от «ползучести кнопок» на протяжении многих лет. Типичный комментарий будет содержать ссылку на отчет, ссылку на общий доступ, ссылку на цитату и кнопку с несколькими цитатами, реакции, а также IP-адрес, флажок, ссылки редактирования и параметров для определенных пользователей. Это много визуального шума вокруг важной части: контента.

Поэтому мы упростили поля комментариев настолько, насколько это разумно. Отчеты и публикации комментариев / сообщений теперь доступны в меню параметров сообщений, как и любые инструменты для автора / сотрудников. Цитирование и реагирование - это два основных взаимодействия для пользователей, поэтому они, конечно, сохраняют свои позиции в панели управления.

Простые посты, даже для персонала

Улучшение почтовых состояний

Сообщения / комментарии в Invision Community могут иметь много состояний, иногда больше одного. Сообщения могут быть скрыты / не одобрены, популярны, рекомендованы, решены (новые в 4.5!) Или выделены из-за авторской группы. Всегда было сложно указать эти статусы хорошо.

В предыдущих версиях мы добавляли границу, но самым заметным индикатором был флаг в верхнем правом углу поста. Это было три проблемы:

Из-за нехватки места (из-за ссылок на отчеты / публикации) показывать более одного флага было сложно.
Показывать какие-либо флаги на мобильном устройстве было грязно из-за нехватки места.
Смысл флагов не был очевиден, особенно для новых пользователей. У постов, выделенных группой, не было флага, только была граница, что делало их еще более трудными для понимания.

Теперь, когда верхний правый угол постов убран и свободен от пуха, мы смогли гораздо более эффективно использовать это пространство для указания статусов постов.

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

Пост с двумя состояниями: группа выделена и популярна

Это работает намного лучше и на мобильном телефоне, где значки статуса получают известность, которую они заслуживают:

Статусы мобильной почты

Модернизация базового кода

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

Завершение

Помимо этих масштабных концепций, вы заметите множество других небольших улучшений, когда начнете использовать новую тему.

Я показал некоторые фрагменты страниц на скриншотах выше, но я включил некоторые полные просмотры ниже, чтобы вы могли увидеть общую эстетику и то, как эти части сочетаются друг с другом.

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

Скриншоты