Как да направите вашия UI дизайн напълно отзивчив със скица - част 1

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

Въведение

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

Това може да бъде досадно

Не, не ми харесва това! Предпочитам да натиснете „Актуализация“ и всички елементи се движат автоматично според промените. И това е, което може да се направи с плъгин Fluid.

Просто така:

Магия :)

За приставката за течности

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

Но Fluid има голямо предимство в сравнение с Auto Layout: Можете да използвате математически изрази, за да създадете относителни полета между елементите. Това означава, без значение колко дълго е зададен текстът или колко високо е изображението, всички елементи се движат вертикално според промените, които правите.

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

Начална точка

Ето вашата начална точка: Изтеглете този пример за Sketch. След това моля, изтеглете Fluid Plugin тук или по-добре просто използвайте Sketch Toolbox и го потърсете.

Стъпка 1: Подредете слоевете

Най-важното е подреждането на слоевете. Този подход се основава на т. Нар. „Предишен брат”. Трябва да подредите слоевете отгоре надолу. Тъй като слоевете в Sketch (както и във Photoshop) в инспектора на слоевете са поставени отдолу нагоре, докато визуалният дизайн е подреден отгоре надолу, това е малко объркващо, но свиквате с него.

Подреждане на слоевете

Така че след като подредите слоевете отдолу нагоре (обърнато според това, което ви показва оформлението, нали?;)) Можете да започнете да създавате някои правила ...

Стъпка 2: Направете позициите на елементите зависи една от друга

Отначало искате да имате гъвкава височина на изображението, така че всичко под изображението да се движи нагоре и надолу, съответно към височината на изображението. За да се постигне това, тези елементи се нуждаят от относителна граница на изображението по-горе (= предишното братя). Така че трябва да направите: Изберете групата „Текст“, отворете прозореца с течности и дайте на групата „Текст“ следното фиксиране:

Определяне на относителен марж спрямо предишния брат

Това означава, че групата „Text“ се движи точно под групата „Header“ (това е 100%) плюс марж от 24 (това е 24-те). Просто се заемете със стойностите и ще разберете.

След това натискате Copy на Fluid Window и правите същото за групите слоеве по-долу. Повторете това и за всички елементи в групите като този:

Определяне на още по-относителни маржове

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

Направете елемент да се залепи в долната част на групата

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

Забележка: В този урок дефинирахме полета за всеки малък слой, за да създадем най-гъвкавото оформление, което светът някога е виждал :) Очевидно това може да стане много сложно и объркващо. Така че най-вече правя, за да създам прищипване между основните групи или модули. Това е много бързо и лесно, спестява време и изобщо не става много сложно.

Тадаа: Вашето завършено оформление трябва да се държи така:

заключение

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

Ако сте харесали този урок, ще ви хареса част 2, която обединява Fluid и Auto-Layout: „Как да обединим Fluid и Auto-Layout да създадете UI дизайн, който е вертикално и хоризонтално отзивчив“

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

О, между другото. Подредбата, която използвам, е екрана с подробности от нашето безплатно приложение за iOS, наречено MYGIGS. Това е приложение, което двама разработчици създадохме в свободното си време, без инвеститори или бюджет. Показва ви бързи и лесни концерти и клубове наблизо и други градове. Безплатно е, просто го вземете :)