Ръководства за скициране

Всичко, което трябва да знаете за новия дизайнер на система за дизайн на InVision, включително как да изградите такъв

Сътрудничество в екип, опростено.

Сега името му може да звучи познато, но Рансъм Е. Олдс се смята от мнозина за основател на автомобилната индустрия и патриарх на масовото производство. Може би сте чували за Oldsmobile? Той е този човек

Този позабравен пионер е кредитиран за разработването на монтажната линия, която му помогна да изгради първия в света серийно произведен автомобил Oldsmobile Curved Dash. Сега има кола!

Заслугата за изобретяването на монтажната линия често се дължи на Хенри Форд заради едно много критично допълнение - Ford постави колите на своеобразен конвейер, създавайки най-важната движеща се монтажна линия.

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

Концепцията е подобрена и адаптирана във всички индустрии, за да се ускори производството и да се подобри продукцията, и най-накрая проби в основната практика на проектиране с дизайнерски системи.

Правилното време

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

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

InVision Design System Manager (DSM)

Преминаваме през своеобразна индустриална революция, при която всеки ден се пускат нови дизайнерски инструменти и може да е трудно да се види през претрупването.

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

Забележка: Не съм преминал към Studio, защото агенцията ми е много вписана в Sketch. В момента това би било скъпо превключване, но ние не го изключваме. Чувам страхотни неща и времето може да е по-правилно в бъдеще.

DSM е Ford на дизайнерските системи, предлагащ подобрение на концепцията, което улеснява актуализирането и мащабирането на дизайнерска система, без да се изоставя вашия дизайнерски инструмент по избор.

Защо не просто да използвате Библиотеки за скица?

Напълно разбираем въпрос - зададох същото. Ето защо ми харесва:

  • Интерфейс за влачене и пускане
  • Можете да търсите компоненти
  • Символите се организират визуално в кутия с инструменти
  • Споделянето на екипи е по-просто
  • История на версиите и разгръщане на версиите
  • Автоматично генерирано ръководство за онлайн стил

Изграждане на вашата система за проектиране

Нека разбием всяка стъпка, необходима за изграждането на вашата система за проектиране в InVision DSM. Струва си да се отбележи, че пълноценните дизайнерски системи обикновено включват дизайн, философия и код. Ще покрия частта на дизайна в тази статия, но просто ще разбера, че това е само една част от по-голяма сглобяваща линия.

Предполагам, че вече сте създали стиловете и символите си… ако все още не сте го направили, не се колебайте да следвате, използвайки Render, примерната система за дизайн, предоставена от InVision DSM.

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

Стъпка 1: Създаване на библиотека

Отидете до вашето табло за управление InVision и кликнете върху DSM.

По същия начин, по който трябва да създадете нов проект InVision, преди да можете да започнете синхронизиране на екрани, ние трябва да създадем нова библиотека за системна система. Тъй като вашата система за проектиране расте, най-добрата практика е да разделяте системните си компоненти в множество библиотеки - една библиотека за десктоп, една за iOS мобилни, една за Android мобилни, една за основните компоненти, една за специфични за продукта компоненти и т.н.

Кликнете върху Създаване на нова библиотека, за да започнете:

Стъпка 2: Изтегляне на приставката

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

Изтеглете и инсталирайте приставката InVision Craft, ако още не сте я направили. Ако никога не сте го използвали преди, може да се объркате, когато отворите приложението, защото не виждате нищо да стартира. Ще го намерите в лентата на менюто си Mac.

Уверете се, че активирате инструмента DSM в раздела Инструменти в горната част.

Ако сте го инсталирали правилно, ще видите нова вертикална лента с инструменти вътре в Sketch:

Стъпка 3: Разбиране на библиотечните секции

Кликнете върху формата на зъбчатка в долната част (може да е на различно място в зависимост от това кои инструменти сте активирали в Craft Manager). Ще видите отворен пакет DSM в нов прозорец и новата ви обвивка на библиотеката вече трябва да бъде избрана:

Професионален съвет: Покажете и скрийте този прозорец, като натиснете Command + L!

DSM библиотеката е разделена на пет секции (наречена „Папки“) по подразбиране:

  • Цветове: Тук ще поставите всички цветове, използвани в системата ви
  • Текстови стилове: Тук ще поставите всички запазени стилове на текст
  • Слоеве на слоеве: Тук ще поставите всички запазени стилове на слоя (запълвания, рамки, сенки и т.н. ...)
  • Икони: Тук можете да организирате всички символи на иконата на вашата система за дизайн.
  • Компоненти: Тук ще поставите всичките си символи.

Папки

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

Стъпка 4: Добавяне на цветове

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

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

Кликнете върху текста под цветовия образ, за ​​да преименувате цветовете си на нещо малко по-полезно:

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

Редакторът на богат текст е доста допинг - не е нужно да го хаквам със собственото си домашно форматиране.

Стъпка 5: Добавяне на текстови стилове

Ако вече не използвате текстови стилове, ви моля да започнете веднага. Когато проектирате продукти, използвайки текстови стилове, това прави умално лесно да се правят актуализации за шрифта за целия файл, като просто актуализирате стила и синхронизирате.

Както и да е, добавянето на стилове на текст е супер лесно, защото DSM просто прави всичко за вас. Кликнете в папката Текстови стилове, след което щракнете върху бутона + в долния десен ъгъл:

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

DSM автоматично ще открие всеки стил на текст във вашия документ. Просто щракнете върху Избери всички и Добавете текстови стилове.

Стъпка 6: Добавяне на слоеве на слоеве

Кликнете в папката „Слоеве на слоевете“, след което повторете предишната стъпка. Доста лесно!

Стъпка 7: Добавяне на икони

Важно е да се отбележи, че иконите не трябва да са символи, за да ги добавите във вашата DSM библиотека.

!!! Много МНОГО важна забележка !!!
DSM поддържа дълбоко влагане в символи. Това означава, че ако използвате техниката на цветните символи, за да ви позволи да промените цвета на вашите икони, DSM автоматично ще изстърже файла ви за всички вложени символи и ще ги импортира автоматично в библиотеката. Това означава, че не е необходимо да импортирате цветните си символи. Просто импортирайте окончателните си символни композити ... не отделните вложени символи, които съставляват крайния компонент.

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

Горещо препоръчвам да отделите време за организиране на вашите икони в разбираема структура на подпапките. По-лесно ще ги намерите по-късно:

Обикновено разделям моята на следните:

  • Икони на приложения: Икони на продукти за неща като Twitter и Facebook.
  • Икони на потребителския интерфейс: Стандартни иконки на потребителския интерфейс като настройки, изтриване, потребителски профил и т.н.
  • Превключване на икони: неща като отметки, радиостанции и превключватели.
  • Разни икони: Всичко друго, което не се вписва в горните категории.

Стъпка 8: Добавяне на компоненти

Досега трябва да го закачите! Щракнете в папката Components, след което щракнете върху бутона +, за да започнете да добавяте елементите и компонентите за многократна употреба.

Тук ще искате да бъдете супер организирани със структурата на папките си:

Не забравяйте, че DSM автоматично ще импортира всички дълбоко вложени символи, съставляващи вашите по-големи композитни символи, така че трябва само да импортирате „крайния компонент“ в DSM:

Чиповете по-горе имат много вложени символи в тях, за да позволят избор на различни стилове на аватар (изображение, инициали, икони), цвят на чипа и цвят на текста. Трябваше само да импортирам окончателния си чип символ в DSM. Когато използвам чипове от моята система за проектиране в друг файл, DSM ще внесе със себе си всички онези вложени символи, включително всички вложени символи със същия размер на таблото.

Наистина е много приятно.

Стъпка 9: Разгръщане и използване на системата

Когато приключите с добавянето на всички необходими компоненти към вашата система за проектиране, те незабавно ще бъдат достъпни за всички от вашия екип! Ще трябва просто да щракнете върху синхронизиране, за да актуализирате своя файл с най-новото и най-доброто от споделената DSM библиотека.

В Enterprise план ще имате възможност да правите някои по-причудливи неща като версия на библиотеката, потребителски разрешения и контрол на достъпа до библиотеката.

Ако сте в корпоративния план и искате да пуснете нова версия, просто кликнете върху падащото меню в горния ляв ъгъл и след това изберете Освобождаване на нова версия ...

Вашата нова версия на дизайнерската система вече съществува и ако вече сте пуснали по-ранна, можете да видите какво е променено, като щракнете върху История на версиите ...

Това ще ви отведе до уеб изглед на вашия дневник за промени, точно както може да видите, когато актуализирате приложение на вашия компютър:

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

Говорейки за екип, вероятно ще искате да поканите някои други дизайнери да използват, редактират и управляват новата си DSM библиотека.

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

Забележка: Ако сте в Enterprise план, ще имате добавената възможност да каните потребители да преглеждат, редактират или управляват (администратор) тази библиотека.

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

Тези разрешения и роли са достъпни само в Enterprise план.

Можете също бързо да преминете към тази страница от приставката за DSM:

Стъпка 10: Актуализиране на вашата система

Тъй като вие сте „главният библиотекар“ на новата ви система за проектиране, има смисъл да искате да правите актуализации от време на време, независимо дали добавяте нови компоненти или актуализирате съществуващи.

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

Решете дали искате да създадете нов или да замените съществуващ и промяната ще се разпространи във вашата DSM библиотека:

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

Всичко, което трябва да направите, е да щракнете върху библиотека Синхронизиране, за да документирате и промените ще бъдат отразени в документа им, като всички съществуващи отметки (като текст) са запазени:

Наистина бърза забележка: Всеки, който не бива да се разхожда в символите на библиотеката, може просто да бъде настроен да бъде Viewer вместо администратор или редактор вътре в разрешенията за сътрудник. Защитете системата си от всякакви нежелани промени!

резюме

В тази статия научихме как да създадем библиотека, да инсталираме приставката на Craft, да изградим библиотеката си и да разгърнем системата си. Вие и вашият екип вече сте готови да започнете да използвате вашата чисто нова система за дизайн!

Помогнах на InVision да създаде примерна система за дизайн, наречена Render, за да можете да видите колко хубаво изглежда в уеб изгледа им. Изтеглете файла Sketch и плъгина Craft и можете да започнете да сглобявате собствената си библиотека с инструмента DSM, като използвате системата Render като начална точка.

Кликнете по-горе, за да видите завършената система за дизайн в InVision!

Когато не изграждам дизайнерски системи, работя над инструментите на Sketch в UX Power Tools, за да ви направя по-добър и по-ефективен дизайнер.

Следвайте UX Power Tools в Twitter
Последвай ме в Туйтър
Кажете здрасти на LinkedIn
Научете някои неща от блога на моята агенция