Изменения интерфейса в elementary OS 6
Дербенев АлександрСтатья является вольным переводом оригинальной статьи из блога разработчиков https://blog.elementary.io/look-and-feel-changes-elementary-os-6/
При публикации новых версий какого-либо программного обеспечения, внимание зачастую сфокусировано на визуальных изменениях. Если визуальных изменений будет мало или они не будут заметны пользователю, социальные сети неизбежно заполнятся комментариями о том, насколько продукт устарел. Эта проблема особенно актуальна для elementary OS, чей дизайн за долгие годы практически не изменился.
На начальном этапе мы старались избегать "изменений ради изменений". Мы очень скептически относимся к тенденциям дизайна и делаем возможное, чтобы создавать вещи, которые могут оставаться актуальными как можно дольше. В конце концов, хороший дизайн - долговечный дизайн, этот принцип позволяет нам больше сосредотачиваться на совершенствовании, а не на постоянном изобретении чего-то нового.
У нас также есть стороннее сообщество разработчиков, о котором нужно думать, так что внесение радикальных визуальных изменений означает, что почти 200 приложений в AppCenter необходимо будет обновить и протестировать, чтобы убедиться, что они по-прежнему выглядят так, как задумано. Поэтому, когда мы решили поработать над внешним видом elementary OS 6, мы хотели подходить к вещам с большой осмысленностью, избегая тенденций и сосредотачиваясь на том, чтобы подготовить почву на следующие несколько лет.
Инструментарий и библиотеки
Разработчики приложений полагаются на готовые виджеты, которые делают большую часть тяжелой работы и предоставляют хорошую стилизацию по умолчанию, при создании своих приложений. В дополнение к виджетам, предоставляемым GTK, мы также поставляем нашу библиотеку Granite, которая упрощает репликацию часто используемых дизайн-шаблонов elementary OS.
В elementary OS 6 мы также активно используем Handy - библиотеку, которая изначально была разработана Purism для мобильных интерфейсов, но теперь стала основной частью платформы разработки приложений GNOME для настольных ПК. Благодаря Handy у нас есть два основных очевидных улучшения визуального дизайна, которые могут принять разработчики.
https://blog.elementary.io/platform-changes-in-elementary-os-6/
У нас давно были планы по модернизации виджета Avatar из библиотеки Granite. Проблема, с которой мы часто сталкиваемся при создании интерфейсов, заключается в том, что многие люди просто не устанавливают аватар для своей учетной записи. Как следствие, нам нужен более осмысленный дизайн, который позволяет аватарам быть различимыми и полезными в таких приложениях, как Почта или в системных настройках.
Оказывается, разработчики, стоящие за Handy, думали о том же, и основная работа уже была сделана. Разработчик Александр Михайленко очень помог и любезно внес изменения в Handy для достижения именно того стиля, который мы хотели, и я рад сообщить, что теперь у нас есть гораздо более красивые элементы интерфейса в elementary OS 6 благодаря Handy Avatar, ведь теперь, даже если люди не устанавливают изображение для своего профиля, мы можем отображать пиктограмму профиля пользователя.
Другое очевидное изменение - более закругленные углы нижнего окна. Кажется, что это было бы просто, но на самом деле это невозможно в GTK3. В elementary OS 5 мы использовали умные обходные пути для конкретных случаев, чтобы дать диалогам и другим плоским окнам закругленные углы на всем протяжении.
Но в elementary OS 6, благодаря Hdy.Window (из библиотеки Handy), мы можем иметь закругленные нижние углы даже в таких сложных случаях, как в приложении Камера. Это мелочь, но она определенно делает интерфейс в целом немного более совершенным.
Типография
Шрифты по умолчанию в elementary OS также были изменены впервые с момента нашей первоначальной работы над брендом. Вместо Open Sans с Raleway для заголовков мы объединились в Inter: новый современный шрифт, специально разработанный для использования в пользовательских интерфейсах на экранах компьютеров. Дизайнер Расмус Андерссон активно обновляет Inter и очень отзывчив к GitHub. Он даже оценил использование Inter в elementary OS, и его отзывы привели к изменению параметров, которые мы используем для различных заголовков.
Мы также пересмотрели настройки рендеринга шрифтов по умолчанию, выбрав сглаживание в оттенках серого вместо RGB; это решает некоторые проблемы в роде ореола / растекания цветов вокруг текста, особенно видимых при использовании прозрачности. В elementary OS 6 вы сможете заметить, что текст стал более жирным, контрастным и разборчивым.
Иконография
Визуальный стиль для наших иконок остался практически неизменным, больше внимания было уделено внутренней целостности. Вы заметите небольшие улучшения, такие как использование нашей цветовой палитры, а также более нейтральное с гендерной точки зрения описание «пользователя» в таких местах, как настройки системы.
Давно обсуждаемой проблемой были споры о разных стилях стрелок, которые мы использовали на протяжении многих лет. В наборе значков elementary OS есть сотни значков со стрелками, которые используются во многих различных контекстах.
Мы предлагаем как полноцветные, так и плоские символические иконки различных размеров. Существуют даже разные виды хвостов стрелок в зависимости от контекста или их отсутствие вообще. В elementary OS 6 у нас есть одна новая форма, которая управляет ими всеми, и мы дали стрелкам более закругленные углы.
В стрелках с изогнутыми концами, например, в значках инструментов «Почта», область под кривой больше, что делает форму более узнаваемой при небольших размерах или для людей с менее острым зрением. Мы также уменьшили частичное перекрытие и улучшили разделение символических значков, которые теперь намного лучше соответствуют своим полноцветным аналогам.
Мы закругляем углы и добавляем более смелые формы в других местах. Например, новые значки управления мультимедиа стали гораздо более весомыми, а символ молнии, используемый на значках питания, более различимым.
Исторически сложилось так, что более подробная информация не была так важна для дисплеев LoDPI, но новые формы действительно выглядят лучше на дисплеях с большим количеством доступных пикселей.
Таблица стилей
Мы постоянно получаем отзывы о том, что в целом таблица стилей в elementary OS 5 имеет низкую контрастность. Низкая контрастность может затруднить чтение текста для пользователей с проблемами зрения, но также может стать большой проблемой для дисплеев более низкого качества. Контраст между виджетами и их фоном также может помочь четко определить различные части приложения, и особенно то, какие из этих частей являются интерактивными. Решение этих проблем является частью нашего более крупного проекта, направленного на то, чтобы сделать elementary OS 6 более доступной по умолчанию, о чем мы писали в одной из предыдущих статей.
Чтобы добиться желаемого контраста, мы создали дизайн-систему, построенную на уровнях пользовательского интерфейса. Использовав немного магии Sass, мы можем стилизовать виджеты, выбрав уровень фона - например, 0 для элементов, предназначенных для ввода данных или 4 для панелей - а затем наложив белый градиент и добавив тень, которая также может быть разных уровней.
Общий результат - стиль, который немного более плоский на поверхности каждого слоя, но в целом более целостный в использовании глубины и с гораздо более выразительным использованием теней между слоями.
Еще одно место для более четкой дифференциации - состояния виджетов. Элементы интерфейса интерактивны: они могут быть выбраны или нажаты пользователем, отключены или сфокусированы.
Мы начали некоторую работу над более четким дифференцированием состояний элементов в elementary OS 5, когда мы переработали флажки (чекбоксы), а в elementary OS 6 эта работа распространилась на другие интерактивные виджеты, такие как поля для ввода текста и кнопки.
Отключенные виджеты, например, теперь гораздо более темные, чем уровень пользовательского интерфейса по умолчанию, и намеренно имеют меньшую контрастность, чем включенные виджеты.
Мы знали, что с самого начала нам нужно было подумать о том, как сделать elementary OS более индивидуальной, не нарушая пользовательских стилей в приложениях. Мы знаем, что многие из наших пользователей в настоящее время используют собственный CSS или неофициальные темы, но это часто приводит к поломанному интерфейсу и разочарованию в системе в целом.
В elementary OS 6 мы предлагаем 10 возможных цветов акцента на выбор. В сочетании с темным стилем вы можете получить гораздо более уникальный внешний вид своей операционной системы, не беспокоясь о неправильном поведении интерфейса приложений.
Темный стиль следует всем тем же принципам, что изложены выше, включая уровни пользовательского интерфейса, использование более высокой контрастности и т.д.
Работа над стилями сфокусированных элементов все еще продолжается, но общая цель в данном аспекте - использовать более различимые цвета и сделать расположение фокуса при использовании клавиатуры более очевидным.
Мы пересмотрели стиль выбранных пользователем элементов и стиль кнопок рекомендуемых действий, чтобы пользователи могли четко различать, например, кнопки выбранного ими клубничного акцентного цвета и красные кнопки деструктивных действий. Вместо того, чтобы использовать белый текст на цветном фоне, мы теперь используем стиль, который, в конечном итоге, также имеет более высокий контраст.
Мы также регулярно слышим жалобы от пользователей, чьи дисплеи находятся в неудобной зоне между масштабированием пользовательского интерфейса от 1x до 2x. Хотя мы все еще не предлагаем традиционное дробное масштабирование в elementary OS, мы поработали над улучшенным масштабируемым решением пользовательского интерфейса.
В elementary OS 5 люди, которые изменяли размер текста по умолчанию, были вынуждены использовать неудобный интерфейс с большим текстом, но мелкими элементами управления.
В elementary OS 6 мы масштабируем расстояние между виджетами по умолчанию, радиусы углов и т.д., тем самым устраняя большую часть визуальных проблем, возникающих при изменении размера текста. Это не самое идеальное решение, но оно сделает интерфейс elementary OS более понятным для большего числа людей без снижения производительности, возникающего при использовании дробного масштабирования.
Участие в программе раннего доступа
Если вам понравилось то, что вы прочитали в этой статье, и вам не терпится попробовать предварительную версию elementary OS 6 для разработчиков, вы можете это сделать прямо сейчас!
Спонсоры GitHub на уровне 10 долларов в месяц или выше получают доступ к нашему серверу ежедневных сборок, где вы можете тестировать самые последние экспериментальные сборки, включая сборки для Pinebook Pro. Подписка помогает нам финансировать разработку elementary OS и приближает нас к выпуску конечного продукта.