Как мы рисовали интерфейс для «Артиста»

О, вы тоже с дополненной реальностью работаете www.inetio.ru/entries/ag/386?year=2010

накатайте плз лучше статью про это.

Сейчас заценим!

imho: Первоначальный интерфейс был лучше.

Классно. Windowed mode есть?

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

баг или фича, но ластик при нажатии не стирает О_о стирает только в движении…
а так все понравилось =)

> Там нет ни одного пункта, который нельзя было бы понятно изобразить с помощью иконки.

Первые три вам удались, следующие три (два) — насчет них вы, боюсь, заблуждаетесь.

А вот палитра по правой кнопке мыши — бомба. Пара вопросов: можно ли зажать правую кнопку, не отпуская, выбрать нужное и отпустить? Это было бы удобно. И второй: удобно ли упомянутым вами пользователям нетбуков с таким меню работать на тачпаде?

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

Что-то мне продукт Дмитрия напоминает.
Но не уверен, Artist под виртуалкой с Windows XP просто не запустился, сказав «Приложение не было запущено, поскольку оно некорректно настроено», не смотря на то что я распаковал его из архива.

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

Простите, но интерфейс получился посредственный. Программа оставляет приятные впечатления, но есть несколько замечаний:
— Иконка про симметрию совсем не очевидна для первого распознавания — она говорит про перемещение чего-то, но не про симметрию уж точно. На последующее её использование это никак не влияет, так что можно это замечание пропустить, да.
— Иконка программы больно явно похожа на иконку MS Paint (в версии для Windows 7).
— Кнопки Undo/Redo — близнецы, их нужно размещать рядом, на одном уровне и именно в этом порядке, это очевидно, я думаю. Иначе непонятна логика размещения Redo выше/раньше Undo.
— Меню выбора группы кистей не выглядит оным. Я лично только со второго запуска программы понял, что кистей в программе больше, чем 3. Но опять же, стоит решить эту проблему 1 раз, и в последствии привыкаешь.
— Отсутствие настраиваемой палитры цветов расстраивает, так как при использовании более чем 5 цветов в рисунке становится невозможным выбрать уже использованный цвет (ни пипетки, ни цифрового кода цвета, конечно, нет).

В общем, для детей программу и её UI стоит ещё допилить.

Кстати, к автору программы вопрос: как быть русским маленьким детям? Хоть количество надписей и сведено к минимуму, хотелось бы иметь выбор языка, на котором они исполнены.

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

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

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

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

Хм у меня по ходу не работает выбор цвета )
Еще странно что при выходе не спрашивается сохранить ли документ.
А и еще при всей аккуратности программы ластик ужасен. Бешеный кирпич без настроек в принципе

Спасибо огромное! Очень полезный материал, прочитал с удовольствием!

с планшетом не чувствует силы нажатия или где-то можно откалибровать?

Вопрос автору программы, вы использовали исходникик Harmony? Эффекты похожи :)

Дочку из-за компа теперь не могу вытащить…

Вот молодцы! Очень порадовали! Сделано очень аккуратно. Дизайн, иконки, цвета, идеи.
Такие проекты прямо-таки воодушевляют.

Проблемы:
— не выбирается цвет кисти (Windows XP, SP3);

Предложения:
— колесико мышки изменяет размер ластика;
— добавить кисть, которая ведет себя похоже на обычный карандаш;

Все-таки при работе с цветом неудобно каждый раз открывать меню.

Предлагаю 2 варианта:

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

2. внизу создать длинную полоску по всей ширине экрана высотой пикселей 30-40
и «намешать» в нее все цвета. В левой ее части накапливать последние 20 выбранных цветов
в виде квадратиков.

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

Предпоследняя фотка, вкладки: Brush — «Cunvas» — наверное имелось в виду Canvas?

ПС. А программа классная, спасибо!

Класс, много функционала + красивая реализация = успех!

Canvas пишется через «а», не «u» :)

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

Но то, что приложению требовалась рука дизайнера было очевидно. Теперь она есть, и это здорово.

Дмитрию привет и наилучшие пожелания — верной дорогой идешь, товаришь! :)))))

Знаете, что меня смущает, тот факт, что на этапе между первой картинкой и 10-й фотошоп нужно было открывать реже.
Что в дизайне, что в программировании, по моему сугубо личному мнению, нужно меньше садиться за компьютер и больше продумывать… Пропала бы стадия рисования прикрепленного к левому краю меню, меню в два столбика, меню в один столбик и т.п. со всем этим можно было определиться на этапе «бумажного проектирования». Вы бы потратили гораздо меньше сил и времени.
Финальный интерфейс качественный, но предыдущая (серо-белая) стилизация лично мне нравится больше.
P.S. У вас cunvas на картинке с палитрой :)

Как совет: можете присмотреться к интерфейсу Alias SketchBook.

«Артист» в данном контексте вызывает некий диссонанс.

artist [’ɑ:rtɪst] [US], noun — художник;

артист — профессиональный исполнитель произведений искусства, преимущественно театрального или вокального.

Спасибо за статью. Есть чему поучиться.

Панель зря скрыли, коль уж она такая маленькая стала.
Неудобные ползунки. И хорошо бы чтобы образец кисти менялся динамически в зависимости от тех параметров что выбраны, в т.ч. цвет.

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

Отличная идея в плане юзабилити — сделать тулбар в стиле контекстного меню.

Серьезные замечания по юзабилити и оформлению:
1) Не отрабатывается рисование/стирание по простому клику левой кнопки мыши — надо обязательно двигать мышь.

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

3) Про настройки параметров кисти отдельный разговор: если ползунок (Slider-control) имеет фиксированные значения — эти значения обязательно помечаются штрихами, например так:
----/ \--------
| | | |

4) Цветовая гамма, подобранная для контролов слишком тусклая, в неё приходится всматриваться т.к. на стандартном белом фоне плохо заметно активные элементы. Более того, нерабочие (disabled) элементы практически ничем не отличаются от рабочих. Ну а поскольку нельзя задать фон рисунка одни кликом, например, на черный — то этот пункт очень важен. Да и вообще, нужно больше яркости и насыщенности для интерфейса, он какой-то слишком сухой и строгий.

5) Иконка для зеркалирования недостаточна понятна, однако, это не настолько критично — практически любой человек, который хоть как-то любознателен на неё нажмет и поймет для чего она нужна.

6) Еще раз про ползунки — они слишком маленькие, по ним ОЧЕНЬ трудно попасть мышкой;

7) И еще раз про ползунки — они ДОЛЖНЫ работать так, как работают стандартные контролы винды, к которым привык пользователь. Если ты зажал левую кнопку мыши на определенной позиции — ползунок ДОЛЖЕН на неё установиться со временем, без дополнительных кликов.

8) Подсвечивание активных элементов (Hotlight для кнопок) слишком слабое как для белого фона, в принципе, это можно отнести к пункту 4.

Итог — из простого и понятного с первого взгяда приложения, действительно для детей, сделали совсем другое приложение — недофотошоп с ужасным юзабилити.
У меня растет племянник — пользоваться данной программой для него было бы просто неинтересно и сложно.

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

habreffect.ru/files/876/6dc044b1c/zhopa2.png
^)

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

Скетчи рисовать очень удобно — понравилось. Линии получаются плавные и автоштриховка практически всегда к месту.

Интерфейс тоже хорош, но сбивает с толку минимализмом поначалу. Вам бы ввести 2 режима интерфейса один по умолчанию с видимой палитрой инструментов для знакомства с программой и второй с вызываемой по правой кнопкой для «профи», а переключать как в Шопе по Tab.

И почему стиралка квадратная?!!! Сделайте еще и круглый вариант и чтоб по краям послабже стирала. Мы, когда я учился в «художке», иногда резинку тоже использовали как изобразительный инструмент.

Сразу бросившиеся в глаза недостатки (для авторов программы):

1. Открывается только на полный экран.
2. Открывается только на первом мониторе (даже если место запуска — второй монитор)
3. При закрытии программы нет предложения сохранить рисунок.
4. Никаких настроек прежних пунктов или куда-то очень хорошо спрятаны.

5. Есть баги с переключением кистей и стиралки — никак не удавалось выйти из режима стирания, если сначала поменял краску, а потом перешёл к кисти.
6. Размер стирательной резинки не регулируется.
7. нет человеческой кисти или карандаша.

Испытал на доче. Показал сначала просто как рисовать, потом, что можно размер менять, потом как палитру выбирать. Доче очень понравилось зеркальное рисование. Доче программа очень понравилась.
А вот результат работы:

Если удалить все слои, то рисовать не получится, пока не добавишь новый. Логично было бы при удалении всех слоёв добавлять пустой автоматически или хотя бы писать предупреждение…

А у меня цвета кистей не переключаются.