26 ноября 2010 в 13:14

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

Некоторое время назад наш коллега по цеху, талантливый программист и просто хороший человек Дмитрий Рыжков завоевал со своей программой для рисования «My Little Artist» солидный приз в конкурсе на лучшее приложение для Intel Atom. Воодушевленный успехом, Дмитрий решил продолжить развитие проекта, сделав из него коммерческий проект, и попросил нашу студию помочь с таким сложным делом как интерфейс. Мы с удовольствием взялись за работу.

Первая версия программы выглядела так, как и положено некоммерческому приложению, выигравшему конкурс.



А ведь, как известно, для коммерческого продукта внешний вид – далеко не последнее дело. Итак, создаем интерфейс программы для рисования «выбрал, нажал, нарисовал for advanced dummy users».

За работу взялся наш дизайнер Никита Темрязанский. Что первым делом приходит в голову дизайнеру? Правильно, тот инструмент, которым он пользуется — Фотошоп / Иллюстратор.



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



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



Теперь панель «отвязана» от левого края. Целесообразно ли расположение иконок в одну колонку при такой высоте? Пробуем две колонки. Заодно переместим верхнее меню вправо и для экономии рабочего пространства сделаем его скрывающимся/раскрывающимся.



Хорошо. А зачем нужно дублирование функций в двух меню? Оставляем в вертикальном меню только рабочие инструменты для рисования, остальное выносим наверх. И что-то иконки маловаты и все также корпоративно строги. Ведь такой программой, скорее всего, захотят пользоваться и дети. Укрупняем и делаем иконки добрее.



Отлично. Над меню появилась полезная фича – «последние пять выбранных цветов». В целом концепция готова. Начинаем шлифовку. В рабочем меню есть чужеродный элемент – кнопка «Создать новый документ». Убирая ее, получаем нечетность, которая портит двухколоночное меню. Переключимся на верхнее меню. Там нет ни одного пункта, который нельзя было бы понятно изобразить с помощью иконки. А если иконки будут компактными, то не будут мешать, и интерфейс будет смотреться более целостно. Переделываем, заодно перемещаем наверх иконку «глаз», отвечающую за зеркалирование. Меняем ее дизайн на более очевидный.



Кстати, двухколоночное меню перестало нравиться, там всего 6 пунктов. Попробуем вернуть одну колонку. «Горячие» цвета есть, почему бы не добавить «горячие» кисти.



Так лучше. Возвращаем также в рабочую область иконку «Зеркалирование» (Mirror modes). Снова меняем ей дизайн на еще более понятный. Undo есть, Redo – нет. Нужна ли нам History? Для такого класса программ это неактуально. History убираем, Redo добавляем.



Рабочий прототип готов и устраивает обе стороны. Теперь совместная работа на стыке дизайна и программных технологий. В финальном варианте пришлось переделать кисти. Адекватно изобразить семпл кисти на маленьких квадратных иконках оказалось сложно, поэтому заменили их на большие прямоугольные. Соответственно, пришлось убрать «горячие» кисти.





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



Кстати, специально для хабровчан мы с Дмитрием подготовили сюрприз. Вы можете бесплатно скачать программу отсюда. Возможно она понравится вам, или ваши дети с удовольствием будут рисовать разные забавные картинки. В любом случае было бы интересно услышать ваши отзывы и пожелания, которые могут помочь в дальнейшем развитии проекта. Спасибо.
Николай Руфеев @nickurs
карма
54,0
рейтинг 0,0
Самое читаемое Разное

Комментарии (92)

  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Спасибо за отзыв. Попробуйте программу. Важно мнение пользователя, как это все в деле работает ;)
      • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    О, вы тоже с дополненной реальностью работаете www.inetio.ru/entries/ag/386?year=2010

    накатайте плз лучше статью про это.
  • 0
    Сейчас заценим!
    • +4
      Заценят только пользователи Windows :(
      • +5
        Qt версия в процессе :)
      • 0
        wine Artist.exe
  • +1
    imho: Первоначальный интерфейс был лучше.
    • 0
      Первоначальный не смог уместить в себе новые кисти, работу со слоями, более широкую палитру цвета и т.д.
      • +1
        Но он был для визуалов.
        А то что получилось дигитальное…
        • 0
          Спасибо за замечание, мы примем это во внимание, при разработке новой версии.
        • +3
          Согласен, ориентироваться стоит, ну например, на Artrage.
      • +1
        На первый взгляд: добавили функций, как следствие отбросили простоту и получили совсем другую программу.
      • 0
        И все-таки идея спрятать тулбар мне не совсем нравится. И еще мне кажется, что инструменты «калейдоскопа» должны быть заметнее.
        • 0
          Если честно, то прячущийся тулбар был выбран с оглядкой на будущие устройства на базе атомов, такие как смартфоны, планшеты и т.д., возможно мы поспешили :)
    • 0
      Он был просто другой ;) Думаю, что не попробовав обе программы, сложно дать объективную оценку какой интерфейс лучше.
      • 0
        Я про первое впечатление.
        Когда что то ищешь выкачиваешь на выбор несколько программ, соответственно первичное знакомство больше по принципу нравится не нравится первое, что ты видишь, и понятно или не понятно.
  • 0
    Классно. Windowed mode есть?

    Заметил небольшой баг: постоянно мерцает курсор при перемещении его в верхнюю часть приложения (где меню). Может быть из-за того, что 2 монитора?
    • 0
      Windowed режима нет, если честно не задумывался об этом, т.к. нацеливались, в основном, на нетбуки
  • 0
    баг или фича, но ластик при нажатии не стирает О_о стирает только в движении…
    а так все понравилось =)
    • 0
      Баг, исправлю, спасибо за информацию.
  • +1
    > Там нет ни одного пункта, который нельзя было бы понятно изобразить с помощью иконки.

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

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

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

    • 0
      Пока нельзя, панель не скрывается при отпускании правой кнопкой. За предложения спасибо, соберем все в кучу и будем думать над новой версией :)
    • 0
      На тачпаде, я думаю, рисовать в любом случае неудобно.
  • 0
    Что-то мне продукт Дмитрия напоминает.
    Но не уверен, Artist под виртуалкой с Windows XP просто не запустился, сказав «Приложение не было запущено, поскольку оно некорректно настроено», не смотря на то что я распаковал его из архива.
    • 0
      Ой, надо же, нашёл подтверждение в about.html. И ведь Дмитрий не один такой.
    • 0
      Это Windows XP, просто тема под Ubuntu.
      • +1
        Обычно эта ошибка означает, что у вас отсутвует MS Visual C++ Redist нужной версии. Или .Net
        • +5
          Приложение не было запущено, поскольку оно некорректно настроено. Телепатия может решить данную проблему.
        • 0
          Спасибо, помогла новая версия MS Visual C++ Redist.
          • 0
            Поставил 2010. Не помогло.
      • 0
        Windows Vista:

        Не удалось запустить приложение, поскольку его параллельная конфигурация неправильна. Дополнительные сведения содержатся в журнале событий приложений.

        [ОК]

        MS Visual C++ Redist 2010 установлен
  • –1
    Save only .png...(-)
    Interface very GOOD (+)
  • +3
    Были исследования, результатом которого оказалось, что интерфейсы, расположенные непосредственно к краю экрана — отыскиваются взглядом намного быстрее, чем плавающие или немного отдаленные (например — второй ряд кнопок).
    • 0
      Пардон, «элементы интерфейса, расположенные непосредственно у края экрана.»
  • +2
    Простите, но интерфейс получился посредственный. Программа оставляет приятные впечатления, но есть несколько замечаний:
    — Иконка про симметрию совсем не очевидна для первого распознавания — она говорит про перемещение чего-то, но не про симметрию уж точно. На последующее её использование это никак не влияет, так что можно это замечание пропустить, да.
    — Иконка программы больно явно похожа на иконку MS Paint (в версии для Windows 7).
    — Кнопки Undo/Redo — близнецы, их нужно размещать рядом, на одном уровне и именно в этом порядке, это очевидно, я думаю. Иначе непонятна логика размещения Redo выше/раньше Undo.
    — Меню выбора группы кистей не выглядит оным. Я лично только со второго запуска программы понял, что кистей в программе больше, чем 3. Но опять же, стоит решить эту проблему 1 раз, и в последствии привыкаешь.
    — Отсутствие настраиваемой палитры цветов расстраивает, так как при использовании более чем 5 цветов в рисунке становится невозможным выбрать уже использованный цвет (ни пипетки, ни цифрового кода цвета, конечно, нет).

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

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

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

    Не думайте, что придираюсь, смотрел с точки зрения тех самых детей, которым и посвящена программа.
    • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      про детей — верно подмечено, в первых версиях умение читать вообще не подразумевалось.
    • +7
    • 0
      Не думаю и даже рад такому огромному количеству замечаний, спасибо.
  • +4
    вообще переделка ужасная
    иконки неочевидны, неиконочные (т.е. это мелкие картинки, а не иконки)
    одноцветная иконка палитры вообще убила ( типа жертвуем понятностью в угоду «синеватому стилю»)

    а мотивация изменений, кажется, вообще была придумана опосля для этого отчета, а не в процессе
    изначальный интерфейс, несмотря на его недостатки, на голову выше того г..., что оказалось в итоге
  • +1
    Хм у меня по ходу не работает выбор цвета )
    Еще странно что при выходе не спрашивается сохранить ли документ.
    А и еще при всей аккуратности программы ластик ужасен. Бешеный кирпич без настроек в принципе
    • +1
      Да, бешеный кирпич как минимум, как максимум — кирпичный дырокол: чистит с определённой частотой, а не «аналогово» — при быстром перемещении курсора промежутки остаются неочищенными.
      • +1
        Дырокол хотя бы делает дырку когда нажимаешь, а ластик нет! Только если водить )
    • 0
      А спрашивать и не надо. Надо молча сохранять последний сеанс и молча же его загружать при открытии. Если я закрываю программу, я хочу её закрыть, а не отвечать на дурацкие вопросы.
      • 0
        Boss mode. =) Рисует ребёнок что-то неприличное, быстро выключает, потом включает и продолжает занятие. =)
      • 0
        Ну знаете, это все таки стандарт. Внес изменения? Получи на выходе вопрос о сохранении.
        Да, можно сделать возможность отключить это или перевести в такой режим как вы предлагаете, но не надо менять стандарты так лихо
        • 0
          это не стандарт, а порочная практика. Я сохраняю, когда хочу сохранять. я закрываю, когда хочу закрыть. А программа если считает, что закрывая я забыл сохранить может взять и сохранить. А при следующем открытии напомнить о том, что дескать есть тут несохранённый сеанс. Программы должны быть вежливыми. Спрашивать действительно ли я хочу выйти, когда даю команду выхода не вежливо.
          Рекомендую к прочтению Алана Купера.
          • 0
            то есть вы случано никогда не закрывали скажем много часовой документ ворда? ну правда случайно, когда спасает только тот самый вопрос. вы так категоричны, что просто жуть
  • +3
    • 0
      Это же я в молодости!
    • 0
      У вас говорящий ник.
  • 0
    Спасибо огромное! Очень полезный материал, прочитал с удовольствием!
  • 0
    За сюрприз-подрарок — спасибо. Скачал — потестирую.
    Статья наглядная — ценно, понятны мотивации.

    А вопрос очевиден — интерфейс ArtRage видели? Дежавю на 90%
  • 0
    с планшетом не чувствует силы нажатия или где-то можно откалибровать?
    • 0
      О планшете подумал только после того как сам попробовал, будем исправлять
  • 0
    Вопрос автору программы, вы использовали исходникик Harmony? Эффекты похожи :)
    • 0
      и еще используется OpenGl для рисования? или просто на канвасе?
      • 0
        Исходники гармонии были отправной точкой, правда многое пришлось изменить, т.к. в режиме симметрии тот алгоритм жутко «тормозил». OpenGL не использую, в этой версии используется GDI+
        • +1
          А вы не планируете опубликовать исходники? GPL подразумевает. Ну, вы понимаете. Надеюсь.
          Вы опубликовали программу, одновременно с ней должны публиковаться исходники.
  • +2
    Дочку из-за компа теперь не могу вытащить…
  • 0
    Вот молодцы! Очень порадовали! Сделано очень аккуратно. Дизайн, иконки, цвета, идеи.
    Такие проекты прямо-таки воодушевляют.

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

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

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

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

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

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

    • 0
      Тоже не могу выбрать цвет кисти(
    • 0
      проблему с цветом никак не могу «выловить». Ранее сообщали об этом. на на всех моих тестовых машинах она, как назло, не хочет проявляться.
      За пожелания спасибо. :)
  • +2
    Почему то программа не дает выбрать цвет из палитры. Вообще отказывается реагировать на нажатие мыши.
  • 0
    Предпоследняя фотка, вкладки: Brush — «Cunvas» — наверное имелось в виду Canvas?

    ПС. А программа классная, спасибо!
  • 0
    Класс, много функционала + красивая реализация = успех!
  • 0
    Canvas пишется через «а», не «u» :)
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Молодцы! К юзабилити есть ряд вопросов, наверное потому, что маленький художник немного подрос (судя по интерфейсу лет так на 10 ;).

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

    Дмитрию привет и наилучшие пожелания — верной дорогой идешь, товаришь! :)))))
    • 0
      Задумка была в том, чтобы сделать «взрослого» артиста. Т.к. в пожеланиях к первому много раз проскакивали размеры кистей, цвета, а перегружать первого не хотелось. в любом случае в AppUp-е доступны обе версии программы :)
  • 0
    Знаете, что меня смущает, тот факт, что на этапе между первой картинкой и 10-й фотошоп нужно было открывать реже.
    Что в дизайне, что в программировании, по моему сугубо личному мнению, нужно меньше садиться за компьютер и больше продумывать… Пропала бы стадия рисования прикрепленного к левому краю меню, меню в два столбика, меню в один столбик и т.п. со всем этим можно было определиться на этапе «бумажного проектирования». Вы бы потратили гораздо меньше сил и времени.
    Финальный интерфейс качественный, но предыдущая (серо-белая) стилизация лично мне нравится больше.
    P.S. У вас cunvas на картинке с палитрой :)
  • 0
    Как совет: можете присмотреться к интерфейсу Alias SketchBook.
    • 0
      На этапе проектировании я как раз всем предлагал никуда не смотреть и аналоги не изучать. Дабы не сделать случайно клон чего-либо :)
      • 0
        А в результате получилось как-раз нечто похожее.
  • 0
    «Артист» в данном контексте вызывает некий диссонанс.

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

    артист — профессиональный исполнитель произведений искусства, преимущественно театрального или вокального.
  • 0
    Спасибо за статью. Есть чему поучиться.
  • 0
    Панель зря скрыли, коль уж она такая маленькая стала.
    Неудобные ползунки. И хорошо бы чтобы образец кисти менялся динамически в зависимости от тех параметров что выбраны, в т.ч. цвет.
  • +2
    В целом, концепция интерфейса приятна, однако он получился слишком сложным — не для изначальной целевой аудитории: как был в вашем первом макете недофотошоп, так им и остался.

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

      Итого, может быть, задумка и была, но сделана очень сыро в плане функциональности.
  • +1
    Испытал на доче. Показал сначала просто как рисовать, потом, что можно размер менять, потом как палитру выбирать. Доче очень понравилось зеркальное рисование. Доче программа очень понравилась.
    А вот результат работы:
    • 0
      Я знал, что псилоцибиновые грибы это натурально и естественно.
  • 0
    Если удалить все слои, то рисовать не получится, пока не добавишь новый. Логично было бы при удалении всех слоёв добавлять пустой автоматически или хотя бы писать предупреждение…
  • 0
    А у меня цвета кистей не переключаются.

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