Чем проще система — тем она эффективнее. Здесь не нужен художественный вкус или особая одарённость. Красота появляется сама собой, если система спроектирована без лишних деталей. Хороший пример таких интерфейсов дают рабочие инструменты. Молоток, ножовка, электропила. Всё это создано не для красоты, а чтобы идеально ложиться в руку и эффективно выполнять свою функцию. О красоте думают в последнюю очередь, но в итоге дизайн профессиональных инструментов зачастую вызывает искреннее восхищение. Ничего лишнего.
Такие же правила действуют в компьютерных интерфейсах. Чем проще — тем лучше. В этом смысле интересно посмотреть на новое поколение Linux-приложений в современном стиле с адаптацией под смартфоны (на КДПВ некоторые примеры), а также на свежие UI-фреймворки, которые продвигают современный стиль разработки.
▍ Когда лоутек-интерфейсы проще и удобнее
Как мы уже говорили, чем проще система — тем она эффективнее. Вот примеры лоутек-интерфейсов, передающих информацию с помощью светодиодных индикаторов или самых простых дисплеев (матричные или семисегментные индикаторы). В них часто используются физические органы управления, кнопки или тумблеры.
Вообще, тактильный фидбек работает лучше, чем визуальный контакт через GUI на экранах высокого разрешения. Часто действует парадоксальное на первый взгляд правило: чем более высокотехнологичен интерфейс — тем менее он эффективен. Все эти анимации и пошаговые визарды только затрудняют восприятие простых, банальных вещей, внося лишнюю сложность.
Физические ограничения простых интерфейсов (например, экранов низкого разрешения) не мешают дизайнерам а, наоборот, позволяют сконцентрироваться на самом важном:
Вот другой пример скрытых интерфейсов на окружающих вещах, которые органично вписываются в дизайн. Они не выделяются и не заметны, пока не понадобятся. Например, индикатор может появиться в тот момент, когда на него посмотришь, или когда человек появляется рядом:
Аналогичные правила в разработке ПО. Чем проще и понятнее UI — тем лучше. Изыски, украшательства, лишние элементы затрудняют взаимодействие.
▍ Новая волна Linux-приложений. Современные интерфейсы
Были времена, когда Linux-приложения уступали по эстетическим качествам не только macOS, но даже Windows-программам. Мало кто знает, но графические интерфейсы в Unix существовали практически с первых дней, ещё до появления X Window System (1984). Каждый вендор придумывал что-то своё. Например, Suntools/SunView от Sun Microsystems (1983). У компании Silicon Graphics было проприетарное рабочее окружение Iris WorkSpace (1983) с графическим интерфейсом. И так далее. Даже после появления X Window эти вендоры не забросили свои разработки, а реализовали их поверх Х, как OpenWindows от Sun, или создали новые, как Common Desktop Environment (CDE).
Окружение SunView на SPARCstation 4 под SunOS 4 (слева) и десктоп CDE (справа)
Некоторые из этих экспериментов весьма неплохи. Но сейчас другая эпоха. И кажется, что новым трендом становится универсальный дизайн для конвергентных Linux-приложений, который подходит для настольных и мобильных устройств.
Нравится нам это или нет, но мода на универсальный дизайн для всех платформ дошла и до Linux. В качестве примеров можно привести Phosh, Wayland-оболочку GNOME для мобильных устройств с новой версией библиотеки libadwaita, UI-фреймворк Kirigami в KDE, а также Maui Shell, универсальную графическую оболочку для десктопов, планшетов и смартфонов (X11/Wayland).
Maui Shell
Судя по всему, это становится новым стандартом UX/UI для универсальных Linux-приложений.
Kirigami в KDE
Общая кодовая база для настольных/мобильных систем имеет ряд преимуществ перед нативной разработкой отдельно для каждой платформы:
- Синхронизация функциональности между платформами, что способствует общему улучшению UX и цельности дизайна.
- Популяризация Linux-смартфонов, таких как PinePhone, которые работают как десктопы при подключении большого монитора.
- Упрощение разработки и поддержки.
- Улучшение безопасности за счёт уменьшения количества багов (в связи с упрощением поддержки).
- Более качественный дизайн, не перегруженный элементами, как в старых нативных приложениях.
По мнению некоторых специалистов, сейчас происходит своеобразная конвергенция между платформами, поскольку экраны смартфонов по разрешению уже приблизились к обычным мониторам, а сами смартфоны можно использовать как КПК, ноутбук или десктоп, если подключить клавиатуру и внешний дисплей:
PinePhone в корпусе с клавиатурой похож на КПК
Есть мнение, что libadwaita и Kirigami — это одно из самых значительных улучшений в дизайне приложений за всю историю Linux. Наконец-то программы на Linux стали выглядеть действительно стильно и современно.
Некоторые примеры:
Программа Ensembles для работы со звуком
А это современные линуксовые редакторы Setzer и Porto для редактирования документов LaTeX и Jupiter, соответственно:
Внедрение современных, универсальных интерфейсов в KDE, GNOME, Nitrux, Elementary и Jingling с фокусом на тачскрины и мобильные устройства вдохнула новую жизнь в десктопный Linux, который в 2023 году поставил исторический рекорд по количеству пользователей на десктопах. Вместо угловатых интерфейсов прошлых десятилетий Linux становится чуть ли не самой модной и современной системой, судя по GUI современных приложений. Они уже не уступают, а во многом превосходят коммерческое ПО на той же MacOS.
Судя по всему, экосистема десктопного Linux вновь начала развиваться бурными темпами. Впереди самое интересное. Возможно, через пару сотен лет никто и не вспомнит, что в мире существовали какие-то проприетарные ОС, они будут интересовать только цифровых археологов.
Говорят, что сейчас лучшее время для разработки сайтов за всю историю интернета. Поднять свой личный сайтик — отличный повод познакомиться с фронтендом, проверить свой вкус на вёрстке и дизайне. То же самое можно сказать про разработку графических интерфейсов. Некоторые товарищи даже изучают ассемблер путём написания UI.
Для создания красивых интерфейсов вовсе не нужно привлекать профессиональных дизайнеров.
▍ Фреймворки для красивых GUI
На сегодняшний день создана куча фреймворков и полезных инструментов для рисования простых и элегантных интерфейсов, если вы обычный программист и не хотите залезать в дебри создания GUI «по науке».
Написание приложения под Linux сегодня просто как никогда: достаточно открыть тот же GNOME Builder, набросать в IDE основную логику в готовых шаблонах на любом языке программирования и в пару кликов настроить графический интерфейс, который будет выглядеть стильно и современно:
GNOME Builder
Среди фреймворков тоже появляются интересные новинки. Например, фреймворк Slint 1.0 ориентирован на разработку нативных GUI для разных платформ. Написанный на Rust, он позиционируется как инструмент нового поколения с автодополнением кода, с компилятором, который транслирует и оптимизирует описание UI (файлы
.slint) в нативный код под любую платформу. Вот один и тот же интерфейс после компиляции под Windows, Linux и macOS:
В этом фреймворке UI программируется декларативным языком с продвинутым синтаксисом для описания любых элементов дизайна:
Что касается веб-разработки, можно упомянуть VanJS, который позиционируется как самый маленький в мире реактивный UI-фреймворк. Он позволяет разработать простенький сайт всего за час без использования React и JSX. Простейшее демо выглядит так:
Здесь смысл в минимальном размере фреймворка, чтобы не увеличивать задержку при загрузке страниц. Да и в принципе каждому перфекционисту приятно использовать оптимальный (самый маленький и быстрый) продукт в своём классе:
Для массовки упомянем ещё Arwes: веб-фреймворк для создания футуристических Sci-Fi-интерфейсов, пропаганды продвинутой науки и технологий, киберпанка и научной фантастики. Разработан в стиле Cyberprep (киберпанк-утопия, без власти корпораций, с праздным счастливым населением) и Synthwave (стиль синтетической музыки), а также вселенных Star Citizen, Halo и TRON: Legacy, вот примеры сайтов:
В общем, для использования таких фреймворков вовсе не обязательно иметь художественное образование и высокий эстетический вкус. Сегодня сделать красивый UX/UI для своей программы или веб-приложения как никогда просто.
А лоутек-примеры на окружающих вещах показывают, что эффективные интерфейсы не обязательно должны быть сложными и бросаться в глаза. Скорее наоборот, они незаметные и максимально простые. Дизайн определяет, как вещь работает, а не как она выглядит.
Telegram-канал с розыгрышами призов, новостями IT и постами о ретроиграх ????️
Комментарии (25)
poulch
31.07.2023 09:40+1да, хорошая штука. использую для web-морды iot устройств. ой, это про Bulma.io
svanichkin
31.07.2023 09:40+4Я вот тоже задумался на счет мультиплатформенных приложений и пошел искать вариант который бы меня устроил. Хочется то настоящей кроссплатформеннсти, даже для OpenBSD/Risc-v например, такие платформы уже не экзотика а вполне рабочие машинки…
Абсолютно все GUI фрейвоки на данный момент имеют одну или несколько проблем:
Привязка к C/C++ с кросскомпилляцией
Только свои встроенные витжеты для отрисовки интерфейса
Ограничение по платформам
Для начала я стал копать на счет создания GUI на Go, т.к. на нем довольно неплохо пишу, ну и собирается он под все платформы без каких либо проблем прямо с целевой машины, без создания контейнеров и прочих кросскомпилляций присущих любым сишным либам. Что бы прямо из командной строки, бац и есть сборки под все что имеется на рынке на данный момент, удобно и без гемороя как это умеет Go.
В итоге, из того что мне удалось найти, это GXUI (больше не поддерживается), shiny (больше не поддерживается), NanoGUI-Go (либа переписанная с C++ почти полностью, но в итоге требует C++ и кросскомпиляции), go-astilectron (переписанная почти целиком на Go версия Electron, так же требует C++). Да, можно кстати связку с QT сделать, но опять же все это собрать под все платформы станет проблемно. Активно развиваются Fyne, Gia, обе либы в конечном счете так же упираются в ограниченное количество платформ, плюс ко всему интерфейс будет не системный, а с теми витжетами что прeдоставляют эти либы.
И вышло так, что для самого простого для кроссплатформы языка нет возможности сделать GUI без ограничений… надеюсь это пока.
Ну, подумал я, если уж C/C++ использовать, то безопасный, ну типа C# или Rust например и быстро будет. Начал с Rust, в итоге даже книжку купил. Пошел искать что там с GUI…
Druid (устаревшее), egui (в целом как вариант, но витжеты используются из самой либы, а не системные), orbtk (тоже самое, да еще и устаревшее), iced (тоже самое, плюс ограничение по платформам), dioxus (кроссплатформенность больше, но витжеты не системные), tauri (легковесный electron, со всеми вытекающими)
Плюс как оказалось, от кросскомпиляции в Rust тоже никуда не деться, т.к. либы так же легко могут подключать к себе C/C++ и тянуть за собой вереницей. А значит придется опять сильно страдать, что бы заставить сборку работать…
Немного расстроился и пошел смотреть как дела у C# и .NET, здесь на удивление оказалось все не плохо, правда с теми же ограничениями по платформам/процессорам. Например из того что есть нормального в GUI под .NET это avalonia UI − наверно единственный неплохой вариант, но это опять же свои витжеты, что будет выглядеть не нативно под любой платформой.
Дальше я пошел смотреть на Python. В нем можно преобразовать код в бинарный исполняемый файл с помощью инструментов, таких как PyInstaller или cx_Freeze и можно запускать этот бинарь как обычное приложение без предварительной установки Python… т.е. впринципе, гипотетически, можно и сделать GUI, есть только проблема в либах они опять же упираются в C/C++, либо на этапе отрисовки Opengl либо где то раньше, либо где то позже.
Окей, а что там с java? С ходу нашел устаревший SWT, и тут же на коленке одной строчкой собрал приложение с нативным итнерфейсом. Потом понял, что можно с Java и GraalVM собрать бинарник. Т.е. по идее, можно ДА, но надо пробовать. Причем будет это все дело нативно и бинарем, но пока не пробовал.
Скажу сразу, что каждый раз погружаясь, я шел в чаты в телеге по конкретному языку и спрашивал у профи, что они думают, чем помогут, что подскажут. И в чате по Java мне подсказали, что Java уже по сути скорее мертв чем жив. Ибо после скандала компании Оракл с Гуглом появился Kotlin. Язык совместимый с Java и имеющий Kotlin/Native технологию по преобразованию кода в бинарный вид. Плюс есть и GUI Compose Multiplatform, который однако имеет свой набор витжетов не похожих на системные.
Есть еще react native, но про него почитайте сами. Как дополнение, вот еще ссылка по аналогам electron на других языках: https://github.com/sudhakar3697/awesome-electron-alternatives
Мое мнение не обязательно может совпадать чьим-то, но как мне кажется, разработчикам сейчас как никогда нужен хотя бы один нормальный визуальный редактор интерфейса (например как QT но с интерфейсом из 2023 года а не из 80х) GUI фреймворк нативно работающий на всех платфромах без танцев с C/C++, язык программирования не требующий контейнеров/кросскомпилляции/доработки кода вручную для сборки под каждую платформу/процессор/ось.
HemulGM
31.07.2023 09:40+4Посмотрите на Delphi. У него есть кроссплатформенный фреймворк FMX (FireMonkey). По умолчанию имитирует нативный стиль платформы, но можно реализовать любой стиль на свой вкус (или взять готовые). Пример можно тут посмотреть https://habr.com/ru/articles/732384/
Нативный код, собирается для каждой платформы отдельно. Один и тот же интерфейс можно адаптировать под разные экраны или платформы без проблем. Отличный дизайнер и дизайнер стиля. Если что, то в FMX стиль является шаблоном (визуальным) для нужного контрола он может состоять из любых других контролов, примитивов, анимаций, шейдеров и т.д. Вот, например, собственный стиль комбобокса
Как итог, никаких ограничений на создание UI. Можно реализовать почти что угодно, включая использование 3D и отображение содержимого окна без самого окна (без фона, рамки и т.д.).
Стилей можно сделать несколько (как наборов, так и для одного типа контрола), каждому контролу можно задать любой стиль. Хоть стиль таблицы кнопке. Также, можно отдельно перекрыть стили для конкретной платформы или целиком отдельный набор стилей (StyleBook).
poulch
31.07.2023 09:40никогда не было и не будет такого. только параллельная разработка под все платформы на выбранном стеке инструментов. простые приложухи можно собрать, а все сложное будет требовать проверки и согласования дизайна во всех ос и пересборки. пересборки и опять согласование дизайна. было время когда gtk2 и windows были близки к идеалу, но сейчас придется плясать от android -> linux -> windows в плане дизайна. или linux->windows. идти от windows в сторону кроссплатформенности гиблое дело. экосистемы слишком расползаются защищая свою уникальность-долю рынка и единый gui слишком монстроузный получается.
svanichkin
31.07.2023 09:40да как вариант можно wine использовать и вот она кроссплатформенность, но это так себе подход... была вотпопытка сделать хорошо на базе golang. Это либа golang-ui, от автора libui. Суть простая, создаются статические библиотеки под каждую платформу/процессор, далее golang cgo собирается содержа в себе эти либу. Т.к. она легковесная то это не сильно напрягает. Проблема в том что либа не обновляется, а для linux например требуется какая никакая зависимость GTK3.
Далее я так же распотрошил библиотеку SWT, посмотреть как сделано на java, а там такой же принцип, внутри расположен .dylib например для macOS, т.е. динамическая библиотека.
Такой путь позволяет содавать натинвыне интерфейсы... но в случае с libui либа поросла мхом, а в случае с SWT сам язык уже еле дышит. Но в обоих случаях нет хорошего редактора интерфейсов, нет полноценного продукта что бы вот ОТ и ДО... и что бы было интуитивно, что бы снизить порог вхождения.
Сейчас посмотрю что там выше написали на счет Дельфи (язык тоже не особо живой, я не уверен что он даже в risc-v умеет)
poulch
31.07.2023 09:40ну я практиковал wxwidgets для win-linux. но очень огорчен что ios и android там никак. дельфи прикольный, но не свободный.
oldd
31.07.2023 09:40Java, может и еле дышит на десктопе, не работаю с ней. Зато плотно работаю с десктопом на котлине, с помощью javafx/tornadofx. Можно нарисовать достаточно красивый интерфейс, со всеми плюшками, будет точно работать под линукс и Винду (мака у меня нет). Но обе либы, считай, заброшены.
svanichkin
31.07.2023 09:40Java впечатляет своей длинной историей существования и развития, очень интересно как выскочка Kotlin подрезал на дороге Java...
В любом случае я не нашел пока ни одной возможности сделать приложение для всех платфром не используя QT с c/c++ и кросскомпиляцией. Win, Mac, iOS, Linux, BSD, Android... конечно было бы идеально вспомнить и про Plan9, но там совсем все по другому.
Beholder
31.07.2023 09:40И в чате по Java мне подсказали, что Java уже по сути скорее мертв чем жив
Java как язык - не то, чтобы мертва, но слегка закаменела. Java как платформа - живее всех живых, релизы выходят дважды в год. Ну и Kotlin, конечно, всё спасает.
Потом понял, что можно с Java и GraalVM собрать бинарник.
Вот всё не очень понимаю, почему все так хотят один бинарник. Много вы видели серьёзных нативных программ с одним бинарником? Везде куча dll и ресурсных файлов. А Java приложение можно легко упаковать в одну поддиректорию (zip) и батник (без необходимости установки JVM отдельно).
Плюс есть и GUI Compose Multiplatform
Compose очень интересный, но ещё пока слишком экспериментальный и сырой, дорабатываться будет не один год. Продвинутых возможностей каких-то наверняка нет (произвольная рисовка и работа со шрифтами). Если хотите себе стабильную разработку без проблем прямо сейчас - браться за него пока рано.
Ну и две одних из самых популярных IDE для/на Java до сих пор сделаны на Swing - вполне себе богатый набор инструментов, с современными скинами (FlatLaf, например) может выглядеть вполне себе хорошо.
svanichkin
31.07.2023 09:40Почему все хотят бинарник, все очень просто, потому что например Apple в своем iPadOS AppStore хочет именно бинарник. Если мы говорим именно про мультиплатформу, то придется считаться так же и с Андроид/iOS.
Hemml
31.07.2023 09:40Не пробовали смотреть в сторону Progressive Web App (PWA)? Если не нужен прямой доступ к железу, вполне себе неплохая заявка на кроссплатформенность.
svanichkin
31.07.2023 09:40Пробовал, но такое приложение в стор не добавишь, плюс на iOS оно может быть только онлайн и нельзя получить доступ к файловой системе...
dom1n1k
31.07.2023 09:40+3О красоте думают в последнюю очередь, но в итоге дизайн профессиональных инструментов зачастую вызывает искреннее восхищение. Ничего лишнего.
Три раза ха. Автор не в курсе, столько там затрачено часов промдизайнеров, чтобы получился тот простой-и-ничего-лишнего дизайн (которые, кстати, обычно существенно дороже графических и веб-дизайнеров).
isadora-6th
31.07.2023 09:40+1Приведенный пример slint 1.0 показал мне, что я неправильно понимаю "кроссплатформенный".
Для меня кроссплатформенный интерфейс означает "одинаково выглядит на всем". А тут как мы видим мешанина из нативных элементов которые ездят по интерфейсу туда сюда и ну не vscode / telegram юай левел же. [понятно, что можно самому рисовать квадратики под кнопки, но все же]. Тут же кроссплатформенный = кросскомпиляция.
Электрон нас всех сожрет. Почему не упомянут, так и не понял.
Недавно столкнулся в объемом необходимого пердолинга чтобы шорткаты на QT5 были позиционные, а не зависили от раскладки. В 2023 году решений в 0 строк почему-то нет.
oldd
31.07.2023 09:40Не так все просто. Например, Astra linux se (на которую переходят все силовые структуры и госаппарат) из коробки не умеет запускать appimage. И юзеры ничего настраивать не умеют и не хотят. Проже дать каталог с явой и баш-файл запуска
PsihXMak
31.07.2023 09:40+9Извините, но вы достали со своими "Красивыми" интерфейсам.
Я считаю, что разработчик, как минимум, должен различать интерфейсы развлекательных приложений и производственные интерфейсы.
Я встречал множество реальных кейсов, когда на производстве заменяли удобную программу с 20-30 кнопок на "красивую", где всего 2-3 кнопки. Работнику вместо одного действия-нажатия, приходилось теперь делать 5-6 кликов.
И это происходит повсеместно.Пожалуйста, оставьте свои модные красивые интерфейсы для развлекательных приложений и игр, а для рабочих инструментов, пускай останутся не очень "красивые", но функциональные приложения.
Biga
Пользуясь случаем...
Посоветуйте, пожалуйста, какой-нибудь css-фреймворк (можно и с js) для web-ui, покрасивее, чем Material Design Lite или Surface. Желательно компактный (без зависимостей) и конечно с тёмной/светлой темой.
PrinceKorwin
Не знаю про ваши требования. Но мне понравился Bulma.io - использую для небольших проектов. Компактный, js-free, достаточно фичастый и внешне приятный
BoberMod
Жаль в тёмную тему не умеет из коробки
PrinceKorwin
Из коробки не умеет, но к ней не сложно прикрутить:
https://blog.openreplay.com/implementing-dark-mode-with-bulma/
nin-jin
$mol.