Как да създадете отзивчива целева страница със скица

Anima Toolkit 101

Anima Toolkit ви позволява да публикувате уебсайтове директно от Sketch, не се изисква кодиране. Нашата мисия да дадем възможност на дизайнерите непрекъснато натискаме плика върху това, което дизайнерите могат да постигнат, без да пишат код.

Създавайте отзивчиви и интерактивни прототипи с висока Fidelity и експортирайте HTML. Всички вътрешни скици

На този пост

  • ‍ Създайте образ на герой
  • Дизайнерски платки за мобилни устройства, таблети и настолни компютри с точки на прекъсване
  • Добавете формуляр, за да могат клиентите да се свържат
  • Публикуваме нашия дизайн като уебсайт
  • Изтеглете файловете

Нека да започнем!

Имате нужда от герой?

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

Ако искате тя да се разтегли, вижте съветите в долната част.

Дизайн Отзивчиво

В Anima всеки артборд е уеб страница. За да създадем отзивчив дизайн, който да пасва както на мобилен, така и на настолен компютър, ще използваме функцията Breakpoints.

Ще изберем едно от платките, в раздела Prototype> Flow, щракнете върху бутона + Точки за прекъсване и маркирайте втория, за да кажем, че всъщност са една и съща уеб страница (но за различни размери на екрана).

Свързване на две дънни платки като една и съща уеб страница (различни размери)

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

Например, ако задам ширината на Artboards на 320px, 768px и 1024px:

  • За ширина на браузъра под 320px ще получим хоризонтално превъртане.
  • 320–767 ще покаже таблото с 320px ширина.
  • 768–1023 ще покаже таблото с ширина 768px.
  • 1024+ ще покаже таблото с ширина 1024.
Показаното платно ще се промени при ширина на браузъра 1023px

За да прикачите нещата към страни или да зададете по-сложни правила за това как изглежда 320px artboard, когато се представя на екрана с 480px, използвайте раздела Layout> Pins.

Форми - Говорете с потребителите си

Най-вече целевите страници имат формуляр за контакт или регистрация. Много е лесно да се направи едно с Анима.

  • Започнете с проектирането му - въвеждане на текст (или няколко) и бутон за изпращане.
  • Използвайте раздела Прототип> Умни слоеве> Бутон Форми, за да ги направите бутон за въвеждане и изпращане.
Създаване на формуляр - Изберете текстови слоеве за вход, а след това слой, който да бъде бутон за изпращане
  • Когато правите бутон за изпращане, можете да определите какво се случва с изпратените данни - изпратете го по имейл и / или направете електронна таблица.
  • Освен това можете да зададете страници „Благодаря“ и „Неуспех“.

Важно - Настройте вашия дом

Когато използвате няколко дъски (няколко страници на уебсайтове), уведомете Anima за началната си страница, разширявайки панела, като изберете таблото за дома и прототипа за дома> Flow> Set as Home.

Изберете Artboard, Prototype Tab> Flow> Set as Home

Преглед!

Готови ли сте за забавната част? Щракнете Преглед в браузъра, за да гледате как оживява

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

Готови ли сте за споделяне?

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

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

Съвети

  • Накарайте своя герой да се разтегне вместо да прелива, като използвате Layout> Pins:
Незадължително: Пин герой, за да го разтегне
  • Изображенията се експортират, докато го дефинирате в секцията „Експортируем“, така че можете да зададете групата като „Експортируема“, за да я изравните. И можете да зададете някои изображения да бъдат JPG, SVG или PNG според вашите нужди.
Например изображението на героя е голяма снимка, най-добрата практика би била да се използва JPG формат с 1x.
  • Градиентите и векторите обикновено работят най-добре със SVG или PNG, ако Sketch не успее да експортира SVG точно както сте искали.

Downloads

  • Плъгин за Anima Sketch
  • Файл за скица
  • Шрифтове (Montserrat & Raleway)
  • Всички снимки са направени от unsplash.com

Научете повече

  • Как да публикувате уебсайта си
  • Как да експортирате HTML
  • Страница за документация на Anima: docs.animaapp.com
Създавайте отзивчиви и интерактивни прототипи с висока Fidelity и експортирайте HTML. Всички вътрешни скици

За дискусия не се колебайте да се присъедините към нашата Facebook група
От вашите приятели в Anima