Еще раз о дизайне OutWiker

Еще раз о дизайне OutWiker

В последнее время мне стали часто писать про дизайн интерфейса OutWiker. Мысли о том, как упорядочить кнопки, вы можете прочитать в этом посте, пока я все-таки склоняюсь к идее сделать панели a la Delphi. Но кроме переделки интерфейса панели есть еще и другие моменты, связанные с оформлением.

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

Недавно пользователь sidhe написал пост на форуме с конкретными предложениями по поводу того, что можно изменить:

Наряду с добавлением новых функций было бы здорово привести интерфейс OutWiker к единому, более лаконичному и современному дизайну.

Во-первых, панели, их нужно как-то организовать и закрепить. Этот вопрос уже поднимался в блоге автора. «Лента» действительно может быть слишком громоздка, вкладки лично мне нравятся больше + предложение выпадающих кнопок (от BaNru). Хороший пример с вкладками и такими кнопками — Rhinoceros 3D, причём инструментов в нём несопоставимо больше.

Сейчас например, при расположении панелей в два ряда переход из режима Wiki в Markdown приводит к «пляске» панелей.

Во-вторых, сами кнопки, иконки взяты из разных наборов и потому в целом интерфейс выглядит разбито, нет единого стиля. Их конечно можно поменять самостоятельно, но всё-таки иметь единый дизайн из «коробки» приятнее. Возможно стоит их также немного увеличить, скажем 20х20. Может быть стоит убрать дублирующие или полудублирующие кнопки, типа жирного курсива.

И в-третьих, хочется почистить интерфейс от лишних рамок и градиентов.

Картинка для наглядности:

Иконки Material от icons8, немного большеваты, 24х24, взят один из стандартных размеров набора, просто для примера. Если обобщить, то мне видится дизайн типа Atom, Evernote или OneNote.

В качестве другого примера приведу достаточно давний пост пользователя low2004:

Сделайте «дубовый стол с несколькими кожаными блокнотами». Сделайте верхние вкладки — обзовите блокнотами — отведите им первый уровень — остальные уровни пущай умещаются сбоку. В большинстве случаев этого достаточно. Сверху «проект, блокнот, книга» — сбоку отдельные «этапы, разделы, главы» = папки, а уже в папках — страницы, мероприятия. Ужасно облегчит навигацию…

«Непрограмистам» интерфейс OneNote нравится уже подсознательно. Дык он располагает к запискам + не напоминает программу что ли, он сочетает аскетическую простоту и доступ в одно касание к большинству функций…

Сделайте попестрее скриншоты, добавьте красок.

И еще одно видение интерфейса от Владимира Щепина (цитирую выборочно):

1. Неудобный интерфейс
1.1. Гигантское количество пунктов меню и подменю. Эдакий монстр из 2000-х вылезший.
1.2. Мелкие и некрасивые иконки. Это уже чистый субъективизм, но глаза устают.

Решение: упростить интерфейс.

На мой взгляд, идеальным решением проблемы бы было внедрение Ribbon (ленточный интерфейс) взамен существующему. С большими красивыми кнопками: наверняка, в открытом доступе можно накопать немало бесплатных иконок. Убрать всё «лишнее», оставить под рукой самое нужное.

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

1) Проблема с риббоном, как вам уже писал кто-то в блоге, не с собственно риббоном, а в идиотской подчас компоновке и группировке функций. Взгляните на MS Office: гениально оптимизировано рабочее пространство. Меню в Delphi (кстати, мне тоже нравилось, очень удобно) концептуально не отличается от риббона — это одно и то же (вкладки + элементы). Отличия несущественны: иконки во вкладках мельче, чем в ленточном интерфейсе (хотя, кто вам мешает сделать риббон с небольшими и аккуратными кнопками?) и наличии дополнительных статичных областей с кнопками. При этом, риббон существенно симпатичнее и современнее, к.м.к.

2) Проблема масштабирования решается выбором векторных иконок. Неужели нет красивых бесплатных иконок, которые можно использовать? А если и нет — это решается достаточно просто. К примеру, можно организовать сбор денег и заказать разработку где-нибудь, или купить готовый вариант. Или помогут с отрисовкой. Не кривитесь, я абсолютно уверен: если это будет нужно, вам помогут пользователи: денежно, или любым другим удобным способом. Продукт замечательный, очень хочется, что бы он развивался.

Первые два отзыва противоречат друг другу, но идеи sidhe и Владимира Щепина мне нравятся больше. Вообще говоря, когда я начинал делать OutWiker, то считалось хорошим тоном, чтобы внешний вид приложений соответствовал общему оформлению операционной системы, т.е. надо использовать системные компоненты, чтобы их отображением занималась операционная система, а не само приложение. В последнее время появилось много известных приложений, которые полностью игнорируют системное оформление (часто интерфейс таких приложений строится с использованием CSS и JavaScript). Правда, при этом появляется другое преимущество — внешний вид не зависит от операционной системы. Первое, что мне попалось для примера — редактор Atom.

Если раньше стандартом были объемные кнопки на панели инструментов, затем они стали плоскими, но при наведении мыши подсвечивались. Теперь, в эпоху Material Design, все должно быть плоским. Надо сказать, что в целом мне такой дизайн нравится, но на компьютере он полностью противоречит оформлению операционной системы. Внешний вид Windows 10, конечно, приблизился к этому дизайну, но все равно отличается.

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

Отсюда возникает вопрос. Пора перестать обращать внимание на системный внешний вид кнопок и делать их в стиле Material Design?

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

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

Подводя итоги, составлю список того, что неплохо было бы сделать (если будут новые предложения, готов его пополнять):

  • Упорядочить кнопки (стиль Delphi или Ribbons, но склоняюсь к Delphi).
  • Убрать градиенты.
  • По возможности интерфейс сделать более плоским.
  • Уменьшить отступы между панелями.
  • Привести иконки к одному дизайну.
  • … ваши предложения?
Вы можете подписаться на новости сайта через RSS, Группу Вконтакте или Канал в Telegram.

Пожалуйста, оцените запись

УжасноПлохоТак себеХорошоОтлично (Количество голосов: 1, средняя оценка: 5,00)
Загрузка...

комментария 3

  1. sidhe:

    По поводу цветных иконок поддерживаю, в моём примере они однотонные, но я также считаю, что цветные информативнее. По поводу набора, не сочтите за рекламу, просто не знаю аналогичного примера, уже упомянутые мной Icons8 делают иконки по просьбе пользователей https://ru.icons8.com/request-icon/custom/, в любом размере и формате, в том числе в векторе. Думаю, если вы выберете подобный вариант, пользователи вложатся.
    И ещё по поводу дизайна, иконку самого Outwiker наверное имеет смысл обновить вместе с интерфейсом. А так очень радует реакция на предложения и её оперативность, чем не могут похвастаться многие коммерческие продукты.

  2. Jenyay:

    А вот иконка мне нравится. 🙂

  3. 111:

    Тулбары свое отжили. В том же Gnome 3 их просто нет. По мере того, как дизайн десктопных приложений объединяется с мобильным, эта концепция перестает быть востребованной. Интерфейс должен быть простым. Интерфейс с тулбарами простым быть не может по определению, во-первых; съедает вертикальное пространство, которое дорого на широкоэкранных матрицах, во-вторых.

    Сейчас у вас, скажем так, олдскул. Лет через 3-5 он будет смотреться как сейчас смотрится Motif. Если хотите современный интерфейс, то это либо Ribbon. Но на wxwidgets вы его красивым не сделаете — будет смех и огорчение — надо переходить на Qt. Либо тотальное упрощение. Т.е. все функциональные кнопки (создать переименовать, поиск, вложение) выкидываются с тулбара и уезжают (продумано уезжают) в контекстное меню и на хоткеи. Все кнопки редактирования тоже выкидываются с тулбара и уезжают в окно редактора. Т.е. не должны быть видны, когда пользователь находится в режиме просмотра, который должен быть режимом по умолчанию. Как вариант можно заюзать боковые вкладки.

    PyCharm, наверное, пользовались? Обратите внимение на его интерфейс. Он очень чистый для такого комбайна. Меню, breadcrumb (не понимаю почему у вас его до сих пор нет), дерево файлов и редактор. Все остальное в inline диалогах. Очень просто, компактно и здорово.

    Школьника, который там писал про кожаные блокноты, отправьте в 95 год.

Leave a comment

Subscribe without commenting