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

Как да промените дизайна си в движение

Научете как да направите бързи промени в дизайнерските си активи за нула време

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

Ако не ви е интересно да прочетете всички тези думи, не се колебайте да изтеглите файла на урока точно тук - Урок за динамичните бутони

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

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

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

Но защо трябва да е болезнено, защо не може да бъде по-забавно?

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

Какво трябва да се направи?

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

  1. Определете набор от всички UI елементи, които ще се използват във вашия проект, като бутони, икони, текст, аватар, макети и т.н. Опитайте се да мислите за тези елементи като за нещо, което може да бъде кодирано и използвано извън файла на вашата скица.
  2. Създайте отделен символ за всеки случай на визуални параметри като цвят, форма или състояние. (Например, ако вашият проект използва 16 различни цвята, трябва да създадете символ за всеки от тях).
  3. Намерете правилния баланс между броя на параметрите и UI елементите, на които са разпределени. (Работата с падащото меню на отмените може понякога да е доста досадна, така че е важно да поддържате баланс между броя на параметрите и удобството да взаимодействате с тях).
Изглежда много работа, може би е така, но този подход ви възнаграждава в дългосрочен план и ви позволява да спестите стотици часове, създавайки нов дизайнерски файл, когато имате всички съставки, които винаги са готови да бъдат приготвени.

Нека имаме прост пример

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

Как да го накара да работи?

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

  • Текст - Настройте ширината на символа, за да отговаря на размера на бутона, и го задайте височина, за да остане фиксирана в средата на бутона. За да промените цвета на текста, трябва да създадете желания брой цветове за този елемент.
  • Форма - това също е родителски символ, който включва състояния и цветни символи вътре в него. Използвайте го, за да превключвате между заоблени и основни форми и да прилагате различни цветове и състояния, като задържане, фокусиране или натискане.
  • Икона - По подразбиране иконата е скрита, можете да я покажете и да премахнете текста на бутона, за да създадете бутон за икона. Чувствайте се свободни да промените цвета си, ако е необходимо, и не забравяйте да го зададете ширина и височина, за да останат фиксирани при преоразмеряване. Използвайте го, за да направите плаващи бутони за действие или прости социални бутони.

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

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

Преди да заминете, не забравяйте да:

  • Изтеглете безплатния по-горе!
  • Помогнете ни да разпространим думата за Frames for Sketch и ще получите 25% отстъпка. Просто ни изпратете имейл / чурукайте ни / DM ни връзката към вашата публикация и ние ще се свържем с вас възможно най-скоро.
  • Следвайте Robowolf в Twitter за още страхотни безплатни и уроци.