5 стратегии за използване на символи в Sketch: за отглеждане на екипи и проекти

Символите са най-мощната характеристика на скицата.

Символите имат потенциал - потенциал за свързване, синхронизиране, споделяне, сливане, мащабиране, настройване, влагане и най-доброто от тях - лесно създаване на прототипи. Ако попадна на инструмент за прототипиране, който няма функционалност за символи, го отстъпвам почти направо.

Символите са гъвкави дизайнерски елементи, свързани с редактируем източник, иначе известен като единствен източник на истина. Накратко, те са магия.

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

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

1. Изградете символите по правилния начин

Създайте символи добре и те ще стареят добре. Не е забавно да изграждате символ, защото първия път не сте го направили достатъчно гъвкав, особено когато сте го използвали на десетки места. Ето някои указания, които да помогнат на вас и вашия екип да изградите символи, които няма да се нуждаят от постоянно обновяване.

Започнете с основите

Започнете с най-основните компоненти, които можете. Всичко трябва да започне на атомно ниво. Когато вашите печати са модулни, те се вписват по-добре и са по-лесни за работа.

Символи на гнездото

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

Гнезденето ще ви принуди да мислите на нива. Символите от първо ниво могат да бъдат икони и текстови блокове, два нива символи могат да бъдат бутони и списъци, а нивото три символа могат да бъдат цели панели и изскачащи прозорци. Битовете, парчетата и нивата ще изглеждат различно в зависимост от сложността на проекта, но точката на вмъкване на символите винаги е една и съща. За преодоляване на елементи на по-високи нива.

Докато символ работи като печат, екземпляр от символ работи като впечатление на печат. И тъй като печати са вълшебни, впечатленията от един и същи печат могат да бъдат различни. Тези вариации се наричат ​​отменяне. Ако вашият голям печат има печат на датър в него, можете да използвате отметки, за да направите едно впечатление, да кажем на 1 юни, а друго - на 22 декември. По същия начин с печат с променяща се фраза, едно впечатление може да каже ПОЛУЧЕНО, а друго може да каже ПЛАТЕНО. Дори и с отметки, впечатленията все още са свързани с магическия печат. Ако промените мастилото на датъчния печат в червено, и 1 юни, и 22 декември стават червени! ‍ ​​Магия.

Ето опциите за отмяна на всесилен символ на бутона. С този бутон можете да отмените A) символа за вложен текст, B) самия текст и C) формата на бутона и D) стила на запълване.

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

Законът на Теслер, известен още като Законът за запазване на сложността, гласи, че за всяка система има определена сложност, която не може да бъде намалена.
(Закони на UX)

Използвайте текстови стилове като символи

В текущата версия на Sketch не можете да замените стила на текст в символ. Когато искате да промените стила на текст в любимия си бутон от cta-red-bold до cta-blue-italic, това боли! Но има добри новини Има решение.

Ние например проектираме приложение за съобщения. Потребителският интерфейс се нуждае от чекмедже, в което разговорите могат да се показват в черно, червено или сиво в зависимост от наличността на приятел:

а. Направете символ с червен текст, символ с черен текст и символ със сив текст. Картичката на всеки символ трябва да е със същия размер.

б. Направете символ за чекмеджето за разговори.

° С. Вкарайте символите за име от стъпка 1 в символа на чекмеджето. Правете това толкова пъти, колкото е необходимо, докато нямате списък:

Можете да видите символите „Име“ вдясно да са вложени в символа „Списък на имената“ отляво.

д. Сега, ако вкарам символа на чекмеджето в прототипа си на ниво страница, мога да отменя текстовите стилове в панела със свойства:

След като символът е поставен на страница, неговите опции за отмяна се появяват в панела за инспектори вдясно.

Подредете слоевете

В рамките на сложни символи вижте: вложени символи, не забравяйте да подредите слоевете интуитивно. Левият панел на вашия прозорец е мястото, където можете да намерите и организирате слоевете си. Поставете най-горните елементи в горната част, а най-долните елементи в долната част. Дайте на вложени символи прости имена като „Text-Here” и „Icon”, а не „Icon 10 Copy of Copy 2.“

Редът на слоя диктува как са подредени отмените. Освен това, когато именувате вашите текстови полета и символи, имайте предвид, че имената им се показват до опциите за отмяна.

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

От решаващо значение за подреждането на слоевете е и тяхното заключване. Заключеният слой не може да има присвояване на него. Например, символът на навигационната лента може да има текстова линия, която не се нуждае от промяна; заключете слоя с ⌘⇧L и той ще бъде скрит от вашите опции за отмяна. Бъдете добър куратор, като отделяте персонализация там, където не е необходимо.

Използвайте опции за символи за лесно преоразмеряване

Инспекторският панел вдясно има много полезни ограничения за изграждане на преоразмеряващи се символи. Използвай ги. Искате в крайна сметка вашите впечатления за печат да изглеждат добре на всеки размер хартия.

Преоразмеряването на ограниченията е тук, за да ви помогне. Ще ги намерите в панела за инспектори, когато имате избран обект или символ.

Инвестирайте време в поведението на интелигентното преоразмеряване на символа - Link fix Jan. 2018. Използвайте ограничения за оразмеряване, за да фиксирате елементи към една или няколко страни на контейнера, да фиксирате ширината на елемента и / или да фиксирате височината на елемента. Някои неща трябва да бъдат опънати, някои неща да стоят в ъгъла; ограниченията за оразмеряване показват на пример на символа как да се държи, когато размерите му се променят.

https://www.sketchapp.com/images/pages/docs/03-layer-basics/video/after@2x.mp4 - Връзка фиксирана януари 2018 г.

Забележка № 1: Ако искате да поддържате постоянни подплънки при преоразмеряване на символ, фиксирайте обектите си и на четирите ръба. (Видео източник)

Забележка № 2: Символите ще преоразмерят по-добре, ако ги проектирате по съкратен начин. В края на краищата символ е по-лесно да се разгъне, отколкото да се компресира.

Символите, съдържащи изображения, могат да бъдат преоразмерени лесно, ако са зададени като запълване. Вместо да вмъквате изображение (Insert> Image), трябва да използвате запълване на модел. Това означава първо да направите формата на контейнера (Insert> Shape), да изберете „Fill Fill“ в секцията за запълване на инспектора, след което да изберете вашето изображение като модел. Признавам, че това може да се усеща наоколо или контраинтуитивно, но техниката на запълване запазва целостта на изображението ви, когато е преоразмерена, в крайна сметка, за да се предотврати неудобно изкривяване.

Можете да определите как искате изображенията да запълнят формата: Fill, Fit, Stretch или Tile.Изображението вляво е модел запълване на фигура, а изображението вдясно е стандартно изображение. Разпънах ги вертикално, за да покажа колко добре работи пълнежът на шаблона. Урок №1: Не разтягайте кученцата.

2. Организирайте вашите символи

Организирането е от решаващо значение. Ако колекцията ви от печат стане голяма, имате нужда от органайзер за бюро. Ако колекцията ви от печат стане по-голяма, трябва да получите някои чекмеджета. Искате вашите печати така организирани, че когато почивате в Бали, стажант може да седне на бюрото ви и да намери печат, който търсят. Ето няколко съвета за това.

Име на вашите символи

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

Име и последователно организирайте символите си. По-важно от това да имате големи имена за вашите икони е това, че имената им имат смисъл сред другите символи в библиотеката ви. За предпочитане назовавайте символите си по функция, а не по визуални сигнали. Визуална сигнализация като „синьо“ подлежи на промяна, докато функция като „натиснато състояние“ ще се задържи за дългия път.

Използвайте отмените за стил

Вашата система с икони може да има десетина варианти на цвят, контур или рамки - възможен кошмар за всяка библиотека със символи. 20 черни икони означава сортиране на 20 символа. 20 икони в 12 цвята означава сортиране на огромни 240 символа.

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

За щастие, Джон Мур от UX Power Tools обхваща как да го направите.

Стил отменя в действие. (Взето от статията на Джон)

Организирайте символите си визуално - навсякъде

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

Място за всеки символ и всеки символ на негово място.

Метод №1 за организиране на символи: Всеки път, когато правите символ, проверете опцията Изпращане на символ на страница „Символи“. Нека страницата със символите се обърка. Създайте нова страница с ⌘⇧N, където ще добавите и организирате всичките си символи.

Дизайнерът Хавиер Куело харесва метод №1. Отляво е неговата страница със символи. Вдясно е страницата, на която той държи акта си заедно. (Източник на изображението)

Метод №2 за организиране на символи: Организирайте вашите символи на страницата си със символи. Това е направо! Избирам да сортирам символите си на страницата „Символи“ и ето ви плъгин, който ми помага да го направя бързо.

3. Споделете библиотеки със символи

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

Има уловка обаче, ако вие и колега искате да се свържете към една и съща библиотека: и двамата ще трябва да получите достъп до един и същ файл на едно и също място. Можете да получите достъп до същия файл чрез споделена облачна папка или ако имате екип като моя, който не работи много извън офиса, създайте споделено мрежово устройство.

Достъп до вашите предпочитания, намерени чрез ⌘ или под „Скица“ в менюто на приложението, за да отидете до предпочитанията на вашата библиотека. От там можете да добавите библиотека от всеки Sketch файл, стига да има символи в него. Предпочитанията на библиотеката са там, където бихте добавили своя споделен файл. Ако искате да научите повече за библиотеките, прегледайте документацията на Sketch.

Забележка: Целта на библиотеките на скицата е да ви попречи да редактирате случайно символи, които се споделят с другите. Хубаво е, че Sketch ще ви представи пропуск, за да потвърдите редакциите на символите, които се опитвате да направите; Сигурни ли сте, че искате да редактирате изходния файл? Или искате да прекратите връзката и след това да редактирате библиотеката?

Ако вие или съотборник актуализирате споделена библиотека, ще ви бъде дадена възможност да изберете кои промени да се прилагат към свързани файлове на Sketch.

Няколко пъти се натъкнах на приставката за Sketch на brand.ai и това е скъп вариант за споделяне, който обичам да игнорирам. Той е разработен като плъгин, преди функцията на библиотеките на Sketch да е била наоколо и е проектирана да реши същия проблем. Няма нужда да удвоявате. Също така, тя наскоро беше придобита от InVision и ще бъде интегрирана в предстоящия им дизайнерски системен диспечер DSM може да бъде трудна конкуренция за инструменти за създаване на прототипи като Adobe XD, Framer и самия Sketch. Дотогава продължавайте да споделяте своите библиотеки на Sketch. Екипът ви ще ви благодари за това.

4. Установете контрол на версиите

В дизайнерския екип рискувате да презапишете файлове или да загубите следи от версиите на файловете. Някои екипи решават това с помощта на GitHub за разклоняване, обединяване и извършване на Sketch файлове. Тъй като GitHub е решение, фокусирано върху разработчиците, Elastic Projects създадоха Абстракт, приставка за Sketch на трети страни, която прави контрола на версиите по-удобен за дизайнери.

Облачното съхранение също може да ви помогне да контролирате версиите. Dropbox съхранява моментни снимки на всички промени, направени в документ, например в рамките на 30 дни. Отвъд тези 30 дни промените не подлежат на възстановяване, освен ако нямате DropBox Business или разширено възстановяване на файлове. Има дори някои заобиколни начини за контрол на версиите с Google Drive.

5. Учете се от най-добрите

Най-добрият начин производителят на печат да се научи е да се учи от майсторите на печатите. Чрез изкопаване в най-популярните и / или сложни библиотеки на Sketch ще научите много съвременни трикове. Как екипът на Apple слое своите символи? Как символите са вложени в професионален UI комплект? Препоръчвам да използвате вашата удобна лента за търсене в интернет, за да откриете строго секретни Sketch файлове като този в iOS UI Design Resources.

Може би планирате да изградите нещо сложно като таблица или многостепенно падащо меню. Ех сега! Леко се, лукав! Разгледайте първо. Проверете Sketch App Resources и вижте дали някой е изградил нещо подобно.

Вземете, заемете, заемете. И не забравяйте да опитате опциите за отмяна във файловете, които намерите.

За да затворите, ето няколко варианта на Sketch файлове, пълни със символи, за които можете да ровите, раздробявате и експериментирате с:

  • Библиотека на формуляри от Давиде Писаури
  • Смарт бутон от Доменико Ларикия
  • Android 7.0 Nougat Material Design GUI Kit от Great Simple
  • Лист на стикер за дизайн на материали от Google
  • UI комплект за маса от O / M Studio