Новости



4.5: Обновление стандартной темы

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

Цели

Цели, которые были поставлены перед редизайном темы:

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

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

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

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

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

image.png

image1.png

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

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

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

image2.png

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

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

image3.png

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

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

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

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

image4.png

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

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

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

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

image5.png

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

image6.png

image7.png

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

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

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

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

image8.png

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

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

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

Из-за нехватки места (из-за ссылок на жалобы / публикации) показ более чем одного флага был затруднен.

Показывать какие-либо флаги на мобильном устройстве было перегружено из-за ограниченности пространства.

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

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

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

image.png9.png

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

imagepng10.png

Ещё несколько изображений:

ForumView(mobile).jpg

CreateTopic.jpg

ForumView.jpg

TopicView.jpg

Оцените новость: 

  Report новость


User Feedback


There are no comments to display.



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...