Пользователь
0,0
рейтинг
13 июня 2014 в 16:39

Дизайн → Switch to Sketch. Часть 3 tutorial



Давайте немного отвлечемся, и рассмотрим программу Sketch 3 с точки зрения удобства использования.



Долгое время в сфере программных интерфейсов царили тренды предельного насыщения экранного пространства «полезными» функциями. В какой-то момент это достигло апогея, так что появился целый мем под названием «toolbar hell»:



Это, конечно, шутка, и в реальности настолько лютое загромождение панелями практически не встречается. Хотя бывают случаи, когда аудио-редакторы или 3D-софт демонстрируют как раз такой кромешный ад с точки зрения юзабилити:



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

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

Таковой подход издревле исповедуется в Microsoft. И операционная система Windows, и пакет Office предполагают обилие настроек и подгонок интерфейса под нужды пользователя. Помните эпоху скинов? Когда чуть ли не каждая программа выходила с возможностью скачивать или создавать свои собственные «шкурки». Нынче интерес к разукрашиванию отдельно взятых программ угас, но панельно-тулбарная анархия по-прежнему в чести.

У компании Apple всегда был другой подход. Систему Mac OS практически невозможно перекрасить. На любом маке одна и та же версия этой операционной системы будет выглядеть одинаково. К тому же с каждым годом прогрессирует тенденция на упрощение интерфейса. Последняя OS X Yosemite – более плоская и простая в оформлении. Хотя лично мне по душе ненавязчивый оконный дизайн Mavericks.

В этом плане очень любопытно получилось в офисным пакетом Apple iWork. Разработчики в какой-то момент решили, что текущие версии интерфейсов у программ Pages, Keynote и Numbers чересчур сложные, и сделали рискованный шаг по упрощению дизайна этих приложений. Далеко не всем это понравилось, но все же большинство пользователей приняли нововведение.

Вот так выглядела программа до 2012 года:



А затем в Apple решили, что пользователю совершенно ни к чему плавающие панели, дополнительные тулбары и прочие загромождения. Остался лишь один верхний тулбар с наиболее важными кнопками (которые при желании можно настроить под себя), откуда все лишнее перенесли в панель инспектора. Собственно, в этой панели и кроется причина негодований одних и восторженных откликов других. Эта панель, что называется, несъемная. Ее нельзя отсоединить и перенести куда либо. Она всегда справа и всегда одной ширины. Ее можно лишь спрятать шорткатом Cmd-Alt-I. Зато в ней помещается все, что надо. Причем, управляющие элементы меняются в зависимости от типа редактируемого контента. Иными словами, контекстно-зависимый инспектор стал новым трендом в оформлении программ от Apple. Вот так это выглядит теперь:



Это кажется каким-то даже примитивным по сравнению с тем же Microsoft Word из пакета Mac Office 2011:



Однако же, в Pages вполне можно сделать практически все то же самое, что предлагает Word. Набрать и отформатировать любой текст с картинками, таблицами, графиками в Pages не составляет труда. И даже больше. Ведь у Pages есть неплохие возможности не только по созданию обычного текста, но и довольно сложных макетов, что в какой-то степени роднит эту программу с мощными издательскими пакетами. Во всяком случае, мне попадались весьма продвинутые варианты верстки, которые вряд ли получится сделать в Word, а нужно прибегать к возможностям InDesign или QuarkXpress.

Иными словами, при кажущейся простоте интерфейса программ из пакета Apple iWork, они могут удовлетворить практически любые потребности рядового пользователя. Конечно, Numbers может сильно проигрывать Excel по части манипуляции с данными, но здесь речь не о глубинных мощностях, а о повседневных задачах.

Лично меня интерфейс Mac Office удручает своей перегруженностью. Но даже он кажется куда проще, чем инновации, привнесенный в собрата на платформе Windows. Говорят, что привыкнуть к «риббонам» достаточно просто, и есть немало людей, считающих такой подход вполне оправданным и удобным, но у меня пропадает всякая охота что-либо делать в программе, если я вижу что-то подобное:



Ок. Со стороны может показаться, будто я агитирую или пытаюсь навязать свою точку зрения. Не стану больше этого делать. Если вам нравятся риббоны и навороченные интерфейсы с обилием тулбаров и панелей — воля ваша. Ведь это сугубо дело вкуса и привычки. Но поразмышлять на эту тему любопытно. С точки зрения юзабилити, например.

Итак, вернемся к сфере графических редакторов. А что же там у нас творится?

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

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















Жуть какая. И вот в этом мы годами работаем?

И вот, наконец-то, появляется редактор, который по своим возможностям не уступает (а где-то даже превосходит) конкурентам, и который в достаточной мере ломает устоявшиеся стереотипы и предлагает более простое и современное исполнение интерфейса:



Просто. Элегантно. Вкусно. Но непривычно.

Более того, для начала работы вполне будет достаточно даже такого интерфейса:



Полагаю, у многих могут возникнуть вопросы вроде:

«Да разве же это графический редактор?»
«А где тулбар с инструментами? Где панели настроек? Где перетаскиваемые палитры?»
«И вот эта хрень может быть чем-то лучше фотошопа или файрворкса?»
«И что, в этой программе реально создавать современные интерфейсы любой сложности, рисовать фотореалистичные иконки и дизайнить модные сайты?»

Примерно такие же вопросы я задавал себе, когда впервые скачал демку Sketch. Ну не может по моим представлениям программа со столь куцым, каким-то несерьезным интерфейсом составлять конкуренцию Великому и Могучему нашему Фотошопу.

И поначалу я был крайне обескуражен. Пока не начал пробовать что-либо сделать в Sketch. Потом почитал разнообразные статьи, изучил туториалы, скачал какие-то исходники (коих, надо сказать, в сети изрядное количество, и сайты с ресурсами для Sketch растут как грибы после дождя). И я постепенно втянулся. Скажу более: я влюбился в эту программу. По-другому и не скажешь.

А причина в том, что разработчики из Bohemian Coding пошли по пути Apple и сделали свой пакет абсолютно в духе последних версий iWork.

То есть по максимуму убрали все лишнее.

Ведь что мы видим в любом фотошопоподобном редакторе при создании нового документа? Мы еще ничего не создали, а у нас на экране присутствуют панели с выбором цвета, шрифта, кистей, градиентов и т.п. То есть метафора подобных интерфейсов, возникшая еще на заре компьютерной эпохе, диктует непременное условие — пользователю необходимо предоставить весь имеющийся инструментарий сразу. Ошарашить. Оглушить. Доказать, что мы не какая-то там примитивная финтифлюшка, а самый настоящий взрослый пакет, стоящий на одной лестнице с Великим и Могучим.

При этом что-то окажется недоступным для нажатия (grayed), а какие-то управляющие элементы остаются доступными все время, хотя они могут быть и не применимы к текущему типу объекта. Что вполне нелогично и нередко вносит сумятицу.

В Sketch используется другая, более современная и эффективная метафора, в которой можно выделить семь основных критериев:

1. У программы не реализовано никаких собственных средств для отрисовки создаваемого контента. Все эти функции возложены на средства MacOS X. Ведь на самом деле в этой системе есть прекрасные технологии QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL и ColorSync. Так и зачем изобретать велосипед, если отлаженный движок от Apple сделает всю работу? Плюс Sketch по самому минимуму использует нестандартные интерфейсные элементы, полагаясь на базовый набор того, что доступно в среде Cocoa. Собственно, являясь нативным Cocoa-приложением, Sketch получился маленьким по размеру, совсем мало нагружает процессор и память, и он двольно шустрый. Да и, если говорить по существу, Sketch — всего лишь проводник между вашими идеями и мощной графической средой MacOS. В отличие от, например, Photoshop, у которого есть собственный расхваленный движок Mercury Engine, существенно проигрывающий в производительности системным решениям Apple. По этой причине, вероятно, Sketch не очень скоро (если вообще когда-либо) выпустят под Windows.

2. Панели нельзя никак кастомизировать. Их всего две (палитра слоев и панель инспектора). Они всегда находятся по бокам (слои слева, свойства справа). Их нельзя отцепить и сделать плавающими. Можно только скрыть на время. Все это позволяет программе выглядеть одинаково на любом компьютере, и это облегчает совместную работу и процесс обучения, ведь в туториалах вы видите абсолютно то же самое, что и на своем компьютере. Верхний тулбар, впрочем, позволяет, как и все программы Apple, настроить размещение управляющих кнопок под свои нужды. Этот тулбар также невозможно отцепить и перенести куда-то, но можно скрыть. Такая жесткая на первый взгляд система организации поначалу может отпугнуть, но на самом деле она прекрасно дисциплинирует, а главное — сполна выполняет возложенные на нее функции: дать пользователю необходимый инструментарий для работы с объектами.

3. Панель инспектора предельно контекстно-зависима. На ней показаны ровно те свойства, которые доступны для данного типа выбранных объектов. Никаких отдельных панелей с эффектами, градиентами, стилями, шрифтами, информацией о размерах и т.п.
Все доступно сразу в одном месте и только по мере необходимости. Что-то можно изменять сразу же, для чего-то (например, выбор заливки) вызывается небольшой попап. Все базовые свойства (заливки, тени, обводки, блур) можно добавлять в любом количестве и менять местами, инспектор в таком случае будет скроллируемым. Если вы заходите в какой-то вложенный режим (например, редактирование узлов на векторной форме), панель видоизменяется соответствующим образом, а вернуться на уровень выше можно при нажатии клавиши Esc. Иными словами, Sketch всегда знает, что конкретно вам нужно в данный момент и скрывает все то, что работать на данном этапе по какой-либо причине не может. Просто, как дважды два.

4. Большая часть всех манипуляций с объектами возложена на клавиатурные сокращения и работу с мышью. Существуют различные манипуляции, которые возможны лишь при нажатии определенных клавиш или при наведении мышки, но аналогичных дублирующих команд нет ни в меню, ни в виде кнопок на тулбарах. Немалое количество операций можно произвести лишь только одним способом. Что существенно отличает Sketch от фотошопа, где многие функции включаются сразу несколькими вариантами: из меню, на тулбаре или шорткатом.

5. Основу Sketch составляет слой или группа слоев. К его разновидностям относятся: векторная форма, растровое изображение (причем, сразу как смарт-объект в фотошопе), маска (ими могут стать любые векторные формы), символ, артбоард и слайс. Любая группа может восприниматься как единый объект, а так же в любой момент можно добраться до свойств любого компонента группы. Плюс имеются стили двух типов: для обычных объектов и текстовые. Больше в Sketch нет ничего. Никаких выделений, слой-масок, каналов, обтравочных контуров, корректирующих слоев, смарт-объектов, видео-лэйеров, 3D-объектов, комп-лэйеров, слоев-заметок и т.п.

6. В Sketch отсутствует панель с инструментами. Вернее, на верхнем тулбаре можно организовать кнопки для быстрого создания нужной формы. Но даже они не особо нужны, т.к. их полностью заменяет меню Insert или клавиатурные сокращения. Полностью отсутствуют: инструменты Picker Tool (да, да, прощай ненужная «стрелочка», но придется привыкнуть), Select Tool (при выборе растрового изображения на инспекторе будут доступны прямоугольное выделение и «волшебная палочка»), Zoom Tool (есть элемент управления масштабом на тулбаре плюс шорткаты), Hand Tool (а зачем вообще нужна рука, если пробел прекрасно справляется с паннингом канваса?), Edit Tool (кривые можно редактировать по двойному клику или нажатию кнопки Edit на тулбаре), Eyedropper Tool (нажимайте Ctrl-C и выбирайте цвет из любого места на экране), Crop, Brush, Gradient, Fill, Erase, Stamp, Dodge, Patch и что там еще бывает у прочих графических пакетов. Помните — у вас есть курсор мыши, который сам подскажет вам как и что сделать с объектами безо всякой нужды обращаться к отдельному тулбару, забитому иконками. Нужно лишь заучить несколько важных клавиатурных комбинаций.

7. Будучи Cocoa-приложением, Sketch позволяет перетаскивать внутрь документа любые данные, которые программа может принимать (например, изображения JPEG или графику SVG) прямиком из Finder, Mail, Safari или любой другой Cocoa-программы). Соответственно, можно из Sketch вынести любой набор объектов, потащив за миниатюрки в панели слоев. Можно, например, перенести объект со всеми градиентами, тенями и размытием прямиком на рабочий стол или в тело письма в Mail. При этом будут созданы PNG-файлы для каждого такого объекта с сохранением всех уровней прозрачности. Если же вам надо, чтобы все выбранные объекты попали не в отдельные PNG, а были единым целым, до перетаскивания создайте из них группу и нажмите кнопку Make Exportable в самом низу инспектора. Причем все подобные перетаскивания внутрь программы из из нее происходят мгновенно без какого либо утомительного ожидания процесс конвертации. Привыкнув этой потрясающей возможности, вы напрочь забудете об окне экспорта файла на диск.

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

На этом пока все. Ну а в следующей части обзора мы рассмотрим наиболее важные детали этих описанных выше характеристик программы Sketch.

Удачного фотошопинга скетчинга!





despoth @despoth
карма
32,9
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

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

  • +7
    Хотя бывают случаи, когда аудио-редакторы или 3D-софт демонстрируют как раз такой кромешный ад с точки зрения юзабилити:
    Ад там потому что открыты куча вкладок с разными инструментами, никто так не работает, в том же 3д-максе есть про-режим, где скрываются почти все элементы интерфейса и все делается горячими клавишами. В случае аудио-редакторов просто открыты панели кучи плагинов. ИМХО любому профи больше понравится интерфейс который можно настроить под себя, а не когда «Просто. Элегантно. Вкусно.»
    • +7
      Отчасти согласен. Ибо многие годы работал с таким софтом. Photoshop, Illustrator, Corel, QuarkXPress, 3D Max, modo, Cubase, Logic… но попробовав Sketch отчего-то больше не горю желанием настраивать софт под себя. Зачем? Если и так все сделано хорошо. При этом ничто не мешает, не отвлекает, не нужно ничего искать и вспоминать, а всегда все под рукой :)
      • 0
        Это не всегда реализуемо. В том же Лоджике, например, огромное число способов работы, при множестве задач, которые там решаются.

        А вот, например, рабочий контекст Гудини, в котором нет ничего лишнего (полный размер по клику):
        Гудини
        • 0
          Интерфейсы многих таких приложений сделаны очень грамотно и идеально заточены для профессионалов. Logic, modo, Goudini — все это организовано достаточно хорошо и довольно несложно изучить эти программные комплексы.
          Но тут речь не об этом.
          Потому как вряд ли можно, например, аудио-секвенсор сделать столь же простым, как Sketch. Не получится просто.
          А вот с редакторами 2D-графики очень даже получается. Ведь, сохранив практически все, что есть в фотошопе или иллюстраторе (за исключением обработки растра и полиграфических фишек), а где-то даже и превзойдя по удобству и возможностям фотошоп (артбоарды, символы, стили, бесконечное число заливок, теней и обводок), скетч остался крошечным по размеру и максимально простым. И в работе эта простота, как оказалась, не мешает, а даже наоборот. Я уже пятый день кромсаю скетч и не перестаю удивляться тому, насколько же быстрее и эффективнее в нем делать все то же самое, что я когда-то делал в фотошопе.
          • 0
            Про «несложно изучить» Houdini это вы, конечно, загнули. Ни один из разработчиков не знает всех возможностей программы, это просто невозможно. Каждый работает над своим сегментом. На скриншоте показан только один из сотен повседневных контекстов. В этой среде люди создают искусственный интеллект, синтезируют звуки, управляют из нее механизмами и т. д.

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


            А потом за двацать секунд поменять интерлиньяж, расстояние между колонками, цвет десятичной части и добавить точки между значениями:


            Типографика в Скетче вообще рудиментарная.
            • 0
              этот пример для «компьютера» или печати?
              • 0
                Это пример работы с текстом.
  • +1
    В своё время на меня (юного дизайнера) повлияла эта статья.
  • +3
    Всё вернулось на круги своя
    идеальный интерфейс

  • 0
    Это конечно отлично, что рабочая среда в Скетче пока такая скромная. Но всё может поменяться, не так ли?
    Может нарасти к "-нацатой" версии ещё кучей панелек и тп. Какое продуктовое развитие программы может нас ждать уже на Скетч 8?
    • +2
      Сомневаюсь, что такое наращивание будет таким уж слишком сильным. Во-первых, потому что Sketch создают дизайнеры, которые за основу взяли принцип максимального упрощения. Так, например, версия 3.0, добавив целую кучу нововведений, в плане интерфейса стала проще, чем предыдущая 2.0… Во-вторых, так или иначе все дополнительные плюшки буду производиться в трех местах: в меню (новые пункты), на тулбаре (новые кнопки) и на инспекторе (новые свойства). А поскольку, как уже было сказано, инспектор контекстно-зависим, то и свойства эти будут появляться в нужный момент и для конкретного типа объектов. Например, сейчас добавлены самые простые функции для растровых изображений, и при выборе фотографий инспектор практически пуст. Предполагаю, что в будущих версиях появится более расширенный набор инструментария, например, регулировка яркости-контраста, кривые, наведение резкости и т.п. Что-то, возможно, добавят для текста, что-то для векторных форм. Сделают, к примеру, мастер-артбоарды для повторяющихся элементов. Возможно, добавят поддержку psd и т.п. Там много чего можно сделать, не меняя основной концепции простоты интерфейса.
  • 0
    спасибо за статью.
  • +1
    Какой тонкий троллинг, однако +)
  • +8
    Конечно, профессионалы, привыкшие работать с этими программными монстрами, уже давно не обращают внимание на подобные нюансы.

    Наоборот, обращают. И аскетичные интерфейсы «как бы не запугать новичка» при профессиональном использовании зачастую становятся огромным минусом. Особенно в приведенных интерфесах аудиоредакторов. Профессионалу очень важно иметь быстрый доступ к инструментарию, а не любоваться аскетичностью интерфейса. Да, порог вхождения гораздо выше, но вместе с тем и эффективней работа для профессионала. Речь ведь не идет о массовом продукте, предназначенном привлечь как можно больше новых пользователей.

    Вот вам пример еще одного «кромешного ада с точки зрения юзабилити»:

    Image #2221141, 46.2 KB
    • +1
      Контекстный интерфейс это отлично, но не всегда возможно.

      В Индизайне, кстати, тоже есть контекстная панель в которой можно сделать почти все. Но практика показывает, что для многих вещей проще открыть свои панели. Это, банально, сокращает количество кликов в два раза. 10 000 кликов против 5 000 — это серьезный фактор.
    • 0
      А почему бы в самолете не сделать одну только кнопочку «Лететь»? Вечно эти инженеры намудрят…
  • +5
    В статье не хватает ключевого слова «воркфлоу», без которого многое встает с ног на голову. Сложность интерфейса напрямую зависит от количества и связности решаемых приложением задач, а не от вкусовых предпочтений или отношения к минимализму. Интерфейс — это всегда инженерное решение, реализующее, по возможности, кратчайший путь от потребности к результату. И довольно часто на этом кратчайшем пути поиск всяких хитроспрятанных контролов — не самая полезная вещь. Интерфейсом Modo или его наследника Blender-a — профессионала вы не напугаете, потому, что это самые удобные приложения в своем классе, несмотря на кажущуюся перенасыщенность. Минимализм — это чаще всего красиво, но далеко не всегда удобно, и чем сложнее задачи — тем больше кнопок понадобиться, это закон, который будет справедливым до тех пор, пока компьютеры не научаться полноценно читать наши мысли.
    • 0
      Или пока не станут умнее людей :)
  • 0
    Прошу пояснить некоторый момент, а то я вас немного понять не могу. В комментарии к первой части, вы писали (цитирую весь комментарий, важное сейчас выделил жирным):
    Это сугубо дело привычки. С самого начала в фотошопе ничего такого не было, и он приучил практически все делать из тулбаров, кликая мышкой по иконкам и кнопкам. Со временем появились вменяемые и главное — настраиваемые шорткаты, стало поудобнее. Но все равно, многие вещи приходится делать по старинке, по привычке.
    К тому же немаловажным здесь является фактор лернабельности. Исследуя скетч, я поставил себя в позицию начинающего дизайнера, который мало что знает. Так проще открывать интересные функции. Так вот лернабельность таких функций у скетча пока значительно лучше, чем у фотошопа. О том, как войти в редактирование текста и выйти из него, не прибегая к переключению инструментов на тулбаре (а это самый очевидный с точки зрения лернабельности путь), нужно откуда-то ЗНАТЬ. И это очень плохо. Ведь нужно изучить документацию, посмотреть туеву хучу туториалов, типсов-триксов и т.п., чтобы набрать себе в голову всю эту методику. В скетче же делаешь все интуитивно, и процесс того же входа и выхода в режим редактирования текста прост и понятен сразу.

    В этой статье вы говорите, что:
    Потом почитал разнообразные статьи, изучил туториалы...

    То есть читать туториалы по Photoshop, вам было, грубо говоря, лень, а здесь нет? Вы-таки были начинающим дизайнером или использовали приобретенный багаж знаний? Мне в этих высказываниях видится непоследовательность. Не думайте, что я докапываюсь — мне оно правда кажется странным и хотелось бы услышать ответ.

    Еще вы пишите про большое количество «ненужных» инструментов. Я понимаю, что вы рассматриваете Photoshop только как инструмент для дизайна, но не забывайте про то, что он умеет еще много всего (полноценное рисование, простая и сложная обработка фотографий, включая их реставрацию, анимация, коллажирование, даже хоть какое 3D), чему это количество инструментов способствует. Не мудрено, что приложение заточенное именно под дизайн, будет удобнее и содержать меньшее количество инструментов (и вполне логично выбрать таковое для работы именно над дизайном — тут супротив не попрешь). Посмотрите, например, набор инструментов Cad Tools для Illustrator. Сможет Sketch вписать их в свою концепцию? Можно ли их вообще как-то сделать «красиво и удобно»? Честно говоря, сомневаюсь во всем.
  • 0
    По ТРиЗу «идеальный интерфейс» это когда интерфейса нет, но функции его выполняются :)

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