Как да направим Sketch още по-добър?

Sketch е един от най-добрите инструменти за дизайн на потребителски интерфейс в момента. Това е първият инструмент за дизайн, създаден с намерението да задоволи възвишените нужди на дизайнерите на продукти. Много пъти Sketch беше толкова приятна изненада, че бях изумен колко интуитивен е.

Харесвам Sketch поради гъвкавостта, която предлага на потребителите си. Можем да използваме собствените си плъгини, да зададем собствени преки пътища и да създадем работен процес, който ни подхожда най-добре. Като нахален наркоман с клавиатура, се чувствам като у дома си със Sketch. Има много операции, които можем да правим с клавишни комбинации. Аз лично обичам да използвам Runner (чрез въвеждане на команди мога да се чувствам като хакер ).

Въпреки цялото великолепие на Sketch, все още има място за подобрение. По-долу можете да видите моя личен списък с функции:

1. Нека изберете цветовете за символите

Отмените на символите бяха промяна на играта в работния процес на Sketch.

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

Виждате ли модел тук?

Например, ако се нуждаехме от лента с раздели на iOS, тогава трябваше да имаме няколко версии за всяко състояние на бутона. Ако имахме 5 раздела, тогава трябваше да имаме поне 5 символа за това. Ако искахме да покажем различни „известия“ за всеки елемент и всеки екран, тогава трябваше да създадем отделни версии на символите с известията. Като цяло, всяко друго „състояние“ на символа би ви принудило да създадете напълно нов, посветен символ.

Сега можем да изградим все по-сложни символи, които съдържат още по-гъвкави елементи. Можем да жонглираме инстанциите в елементите, да сменяме икони, елементи, състояния, известия и т.н., което го прави толкова по-гъвкав. И накрая, почти можем да се възползваме напълно от потенциала на символите! Почти ...

Проблем:

За да отменим състоянията или просто да използваме различни цветове на едни и същи икони, трябва да създадем няколко версии на същата икона само с различен цвят на запълване ... Имам чувството, че това трябва да бъде подредено по различен начин.

Предложено решение (основно):

Можем да избираме от нашите „цветове на документа“

Можем да подходим към този проблем по същия начин, както текстовите слоеве се третират със символи. Те могат да се редактират. Така че това ни позволява просто да изберем цвета на запълване.

Предложено решение (разширено):

Допълнителен панел за промяна не само на цветове, но и на други стойности

Както можете да видите тук, можем да отидем още по-далеч и да отворим повече опции за неразрушителното издание на елемент от символи в символи (усещам, че тук, между другото, се нуждаем от по-широка терминология). В този модел началото на оста на вложен символ е в горния ляв ъгъл. Дори бихме могли да променим неговото място и размер, да го трансформираме, да променим непрозрачността му и смесването на отметката. Но изчакайте секунда! Не е толкова лесно. Ами ако символът има множество елементи в различни цветове? Радвам се, че попитахте. Бихме могли да подходим към него по два начина:

1. Показване на следното меню само когато съдържанието на символа е единична (комбинирана) форма или набор от форми с идентични цветове за запълване.

2. Показвайте следното меню само за елемента, който има цветовете от библиотеката (това показва, че цветовете могат да бъдат променени).

Необходимостта е основата на изобретението, затова в момента използвам решение: използвам обикновени цветове като маска, която мога да променя, но тя има своите ограничения и изисква допълнителна работа.

2. Нека превключим режима на смесване с пряк път

Би било чудесно да може бързо да преминете през режимите на смесване.

Когато искате да видите какъв ефект ще има режимът на смесване, трябва да:

  1. Кликнете върху падащото меню
  2. Изберете режима на смесване
  3. Кликнете, затворете падащото меню и вижте резултата.
  4. Искате ли да го промените? Повторете 16-те режима на смесване

В този случай софтуерът на Adobe върши много по-добра работа, като ни позволява да преминем бързо през режимите, като задържаме shift ++ (плюс), за да преминем към следващия режим, и shift + - (минус), за да се върнем към предишния режим.

В този случай софтуерът на Adobe върши много по-добра работа, като ни позволява да преминаваме бързо през режимите, като задържаме Shift + (плюс), за да преминем към следващия режим, и Shift - (минус), за да преминем към предишния режим.

3. Дайте ни опция да скрием символен елемент по подразбиране

С напредването на нашия проект ние създаваме все повече и по-напреднали случаи на символи. Нека разгледаме основна лента за навигация на iOS.

Това е основният ни символ:

Пример за гъвкав символ

Позволява ни да създадем следните случаи (като просто включим и изключим елементите):

Проблем:

Да допуснем, че имаме 40 такива случая в проекта. По време на итерацията на дизайна откриваме, че трябва да добавим още един елемент към този символ, който ще бъде видим само в някои конкретни нови екрани:

Добавихме нов елемент към символа

Добавянето на нов елемент ще засегне всичките 40 случая:

Новият елемент беше добавен към всички наши инстанции, което малко съсипва проекта

Решение:

Тъй като е по-добре да скриете този нов елемент в един основен символ, отколкото да го търсите в 40 случая, би било чудесно да имате тази опция (скрий по подразбиране) в основния символ.

4. Възможност за задаване на пряк път за „Задаване на оригинален размер“ (символ)

Проблем:

Представете си, че имате 20 инстанции на символ. След това решавате да промените малко размера на таблото на символа. Това обикновено бърка екземплярите на символите, така че трябва да отидете един по един, RMC, да отидете до самата дъно на падащите опции и да изберете „Задаване на оригинален размер“.

Би било много по-лесно да присвоите клавишна комбинация на тази функция. Смешно е, че има опция като тази в менюто, но тя се отнася до изображения: Слой / Изображение / Задайте на оригиналния размер. За съжаление, това не работи за символи.

Решение: Направете го унифициран, напр. Слой / Обект / Задайте на оригиналния размер. Това ще работи както за символи, така и за изображения (тогава ще можем да зададем пряк път за това )

5. Множество модификатори на натискане

Просто: нека да назначим повече модификатори за натискане (с изключение на Shift за x10). Напр. Shift + Fn за x100 умножител. Би било чудесно да зададем нашите собствени стойности на натискане. За това обаче има приставки.

6. Добавете CMD + букви за букви в диалоговите прозорци:

CMD + D и CMD + C не работи

Повечето софтуер използва този прост трик, като улеснява живота на милиони хора. Бях малко разочарован, че на Sketch липсва тази проста функция, но както виждам, това се случва дори и на най-добрите .

7. Пробел за преместване на създадена точка на кръпка

Ами ако искам да променя позицията на създадената точка?

Adobe дава и по-добър пример тук. В софтуера на Adobe можем лесно да променим разположението на току що създадена точка, като задържим интервала (докато все още натискаме LMB). Би било чудесно да имате същата гъвкавост, докато работите с пътеки в Sketch.

8. Нека решим как искаме символите ни да се мащабират

В момента, ако искаме да мащабираме символ, единствената възможност е да го разтегнем с влачене на мишката или да използваме входни размери. Не можем да използваме диалоговия прозорец за мащаба, така че това означава, че оставаме без възможност да пропорционално мащабираме символ (с пропорционални размери на шрифтове и т.н.).

Това би било всичко засега. Надявам се и други дизайнери да се отнасят към тези идеи - моля, уведомете ме какво мислите в коментарите! Надявам се също, че екипът на Bohemian Coding ще намери това полезно. Може би предполагам, че вече работят по някои от проблемите, тъй като изглежда са близки до общността. Може би решенията и реализациите ще ни изненадат - както обикновено - позитивно! Нямам търпение да видя как ще изглеждат следващите версии на Sketch и стискам пръсти към тях. Мир ️

Статията първоначално е публикувана в блога на Netguru