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

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

Въведение

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

„Намалете изображението на героя и ми покажете оформлението си с много дълъг текст, защото знам, че никой в ​​интернет не харесва големи изображения и всеки обича да чете много текст. Имате две минути за това. ”И знаете ли какво можете да отговорите, след като прочетете тази статия?
„Ще го направя в едно“;)

След тази втора част от урока ще бъдете подготвени за друга заявка на клиента, която вероятно звучи така:

„Можете ли да ми покажете как става това на iPhone 7 Plus. И как изглежда на iPad? Трябва ли да създадем конкретно оформление за това? “
И отговорът ви ще бъде само на няколко кликвания.

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

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

Доста новото дете в града, когато става въпрос за отзивчивия дизайн, се нарича Auto-Layout. Това е Plugin for Sketch, който ви позволява да дефинирате елементите на оформлението по начин, който те отговарят на различни ширини на екраните. Без значение дали се очаква елементът да има подплънки на базата на процент, пиксел на базата на пиксел или центрирано подравняване. Функцията за автоматично актуализиране го прави още по-невероятно.

Това е Auto-Layout. Gif от официалните указания.

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

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

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

Стъпка 1: Настройте вашия дизайн с опциите за оразмеряване и фиксиране на скицата

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

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

Добре. Направихте ли това? След като настроите всички правилни опции за оразмеряване, вашите елементи трябва да се държат така:

Преоразмеряване на опциите

Стъпка 2: Направете вашата оформление да реагира на различни ширини на екрана с помощта на автоматична подредба

Вашето оформление вече е готово да стане отзивчиво с помощта на Auto-Layout. Сега ще определите как елементите се държат в различни размери на екрана. Да започнем с изображението на заглавката Предполага се, че той е с ширина 100%. Изберете групата "Header", щракнете върху иконата на процента и я направете 100% широка.

Даване на заглавното изображение на ширина 100%

Следва група „Текст“. Това трябва да има поле отляво и отдясно 24 px. Затова просто изберете папката и щракнете върху квадратчето за отметка отдясно и отляво и въведете 24 (ако вече няма такава позиция).

Предоставяне на групата „Текст“ с марж 24px

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

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

Когато сте готови, трябва да изглежда така:

Изглежда доста готино на пръв поглед. Но на втория поглед вероятно виждате някои неща, които бихте искали да оптимизирате. Например появяващото се празно пространство над и под слоевете. Това е така, защото все още не сте в състояние да определите относителните граници между елементите. Елементите променят размера си, но запазват своите x позиции.

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

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

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

Това е. Вие сте създали най-гъвкавия дизайн на приложения, някога :)

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

заключение

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

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

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