Как да изградя библиотека с модели в Sketch

Били ли сте се борили с последователност в уеб дизайна? Това се случва твърде често, особено когато се работи в мащаб. За наш късмет библиотеките с образци са тук, за да помогнат!



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



Преди да внедрим библиотека с шаблони, трябва да гарантираме, че нашите инструменти за проектиране могат да обработват елементи за многократна употреба. През последните две години моят инструмент за проектиране беше Sketch: лек, векторен инструмент, идеален за интерфейси и библиотеки с модели. Защо е перфектен? Ще ви дам пример.

Да приемем, че имате елемент от бутон, който се използва многократно в даден уебсайт, след което решавате да го промените. Обикновено ще трябва да преминете и ръчно да промените всеки екземпляр на този бутон. Не със Скица. Софтуерът включва функция, наречена Символи: специален вид група слоеве, при която всички промени, които правите в даден символ, автоматично се прилагат към всички останали негови случаи. Той е идеален за работа с елементи за многократна употреба.



Добре, стига да пея похвалите на Sketch. Нека да се потопим в урока! Нямате копие на Sketch? Просто се отправете тук за да изтеглите безплатния пробен период.

Стъпка 01

Настройте монтажната си плоча

Настройте монтажната си плоча

Преди да започнем, уверете се, че имате безплатния шрифт на Google Източник Sans Pro инсталиран. Създайте нов документ, след това вмъкнете нов монтаж, като отидете на Insert> Artboard (клавишна комбинация: A). Artboard е фиксирано платно, което ще използваме като размер на екрана. Ще забележите, че „Artboard 1“ е добавен към списъка със слоеве вляво. В панела Inspector вдясно задайте Width на 1280px и Height на 2000px.



Стъпка 02

Направете вашата мрежа

Направете вашата мрежа

Сега да създадем нашата мрежа. С избрания Artboard 1 отидете на View> Canvas> Show Layout (клавишна комбинация: Ctrl + L). Ще видите да се появи мрежа по подразбиране. Сега просто трябва да го редактираме. Когато Artboard 1 все още е избран, отидете на View> Canvas> Layout Settings. Задайте Обща ширина на 1080px, Брой колони на 12, Ширина на улея на 30px и Ширина на колоната като 60px. Уверете се, че Gutter отвън е проверен. Щракнете върху бутона Center.

Стъпка 03

Изработване на бутон

как да бъда популярен на tumblr
Изработване на бутон

Сега сме настроили нашата артборд и мрежа, време е да добавим малко съдържание. За този урок ще създадем четири различни типа елементи на библиотеката с модели. Нека започнем с бутоните. За да създадете фон на бутона, отидете на Insert> Shape> Rectangle (клавишна комбинация: R). В Инспектора задайте Ширината на 280px и Височината на 44px. Задайте Radius на 3px и цвета на запълване на # 1A9DD3.

Стъпка 04

Вмъкване и форматиране на текст

Вмъкване и форматиране на текст

Сега да добавите текста. Отидете на Вмъкване> Текст (пряк път: T). Променете шрифта на Source Sans Pro, Weight на Bold, Color на #FFFFFF, Size на 16pt и щракнете върху иконата за централно подравняване. Позиционирайте текста така, че да е центриран във фона. Изберете двата слоя и отидете на Arrange> Group Layers (клавишна комбинация: Cmd + G). С избраната група отидете на Layer> Create Symbol. Ще забележите, че Sketch ви подканва да назовете символа, така че въведете Button. Символите могат да бъдат разпознати чрез икона на лилав слой.

Стъпка 05

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

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

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

Стъпка 06

Символи в действие

как да нарисувате лъвска лъва
Символи в действие

За да видите символите в действие, променете цвета на фона на един бутон. Забележете как се променя цветът и за двамата. Но ако промените текста на единия бутон, текстът на другия не се променя. Синхронизират се само стиловете, а не текстовите низове. Това означава например, че можем да създадем бутони Регистрация, Купете сега и Свържете се с мен, които всички споделят един и същ стил.

Стъпка 07

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

Стъпка 08

Започнете със заглавия

Започнете със заглавия

След това, заглавия. Тъй като заглавията са текстови елементи за многократна употреба, важно е да използвате функцията Текстови стилове вместо Символи. Поставете текстов слой и въведете Heading Level 1. Променете Typeface на Source Sans Pro, Weight на Bold, Color на # 3A4654 и Size на 37pt. Отидете на Layer> Create Shared Style. В Инспектора ще забележите, че има маркиран текст. Sketch ви подканва да назовете стила на текста, така че въведете H1.

Стъпка 09

Размери на заглавията

Размери на заглавията

Повторете последната стъпка, за да създадете вашите елементи от H1 до H6. Размерите на моите заглавия са H1: 37pt, H2: 31pt, H3: 25pt, H4: 21pt, H5: 18pt и H6: 15pt. Тъй като всяко заглавие е текстов стил, всички промени ще бъдат приложени към всички останали негови екземпляри. Използвал съм тази на Джеръми Чърч Напишете инструмент Scale за да определя размера на моите заглавия. Type Scale използва модулната скала за избор на пропорционални размери на шрифта, в зависимост от избраното от вас съотношение.

Стъпка 10

Организиране на текстови стилове

Организиране на текстови стилове

За да организирате току-що създадените текстови стилове, отидете на Insert> Styled Text> Organize Text Styles. Тук можете да изтривате и преименувате текстови стилове, но не и да ги пренареждате. Тъй като текстовите стилове са подредени по азбучен ред, аз назовавам подобни елементи със същата първа дума: например List Unordered и List Ordered. Следвайте същия процес за организиране на символи. Добре, справихме се с бутони и заглавия! Но какво да кажем за изображенията?

Стъпка 11

Създаване на аватар

Създаване на аватар

За аватари вмъкнете изображение и правоъгълник с ширина и височина 130px. Дайте на правоъгълника радиус 65px. Групирайте двата слоя и позиционирайте правоъгълника зад изображението. Щракнете с десния бутон върху слоя с правоъгълник и изберете Използвай като маска. Сега имаме кръгъл аватар. Използвахме правоъгълник с настройка на радиус вместо действителен кръг, защото ако искате да направите квадрат на аватара, можете просто да редактирате радиуса, вместо да вмъквате нова форма.

Стъпка 12

Но какво, ако искам да заменя изображение, чувам, че питате? Добре, може би не сте питали това, но това ме води към изискана функция, подходящо наречена Image Replace. Изберете аватара си и отидете на Layer> Image> Replace. Изберете различна снимка. Скица автоматично ще преоразмери новото изображение и ще го замени със съществуващото. Ще използвате това по-често, отколкото си мислите: това е още едно чудесно спестяване на време!

Стъпка 13

Изтегляне на потребителски снимки с Content Generator за Sketch

Изтегляне на потребителски снимки с Content Generator за Sketch

Алтернатива на вмъкването на вашите собствени изображения е използването на Генератор на съдържание за скица плъгин от Тимур Карпеев. Просто създайте форма и отидете на Plugins> Content Generator Sketch Plugin> Persona> Photos. Тя изтегля потребителски снимки от Потребителски интерфейси , и ги вмъква като запълване на фигура. Общността на приставката Sketch е страхотна.

Стъпка 14

Цветни мостри

Цветни мостри

След това, цветни мостри! Важно е да документирате често използваните цветове в нашата библиотека с модели. Поставете правоъгълник с ширина и височина от 120px и му придайте цвят на запълване # 1A9DD3. Повторете тази стъпка с цветовете # 3A4654, # 475361, # 8793A1 и # EFF0F1. Има и a плъгин за създаване на цветни образци от Джоди Хейвънър. Отидете на Plugins> Swatches и въведете петте шестнадесетични стойности по-горе.

Стъпка 15

Изграждане на вашата цветна библиотека

окончателно изрязване pro срещу след ефекти
Изграждане на вашата цветна библиотека

Изберете мостра и кликнете върху цвета на запълване в Инспектора. В долната част на инструмента за избор на цветове ще забележите два раздела: Глобални цветове и Цветове на документи. Глобалните цветове ще бъдат запазени за всички документи на Sketch, които създавате, докато цветовете на документи са уникални за всеки документ. Добавяйки цветове към раздела за цветове на документа, вие създавате своя собствена библиотека с цветове.

Стъпка 16

Често използвани цветове

Често използвани цветове

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

Стъпка 17

Домакинство

Домакинство

За последни стъпки, моля изтеглете ресурса който придружава този урок и се уверете, че имате инсталиран шрифт Source Code Pro. В ресурса HTML е включен заедно с всеки елемент. Това гарантира, че за разработване се използват правилните HTML тагове и имена на класове. Бележки за употреба могат да бъдат предоставени, когато е подходящо. Чудесен пример за това е в мрежата, където е полезно да имате информация за класове колони, компенсиране на колони и т.н.

Стъпка 18

Уверете се, че хората могат да преминат към елементи, така че да не

Уверете се, че хората могат да преминат към елементи, за да не се налага да превъртате

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

Това е! Вече знаете как да работите с библиотеки с образци: всичко, което трябва да направите сега, е да намерите вдъхновение за собствена библиотека. Горещо препоръчвам да посетите Ресурси за ръководство на уебсайтове от Ана Дебенхам и Брад Фрост, където можете да намерите много страхотни статии, инструменти и примери.

Думи : Ричард Чайлд

Ричард Чайлд е консултант по дизайн. Тази статия първоначално се появи в брой 272 от нетно списание .

Хареса ли ви това? Прочетете тези!