Switch to Sketch. Частина 3

    
 
Давайте трохи відвернемося, і розглянемо програму 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.
 
 Вдалого фотошопинг скетчінг!
 
 

  

    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.