10 неща, които трябва да имате предвид, че работите със Sketch & Zeplin. Разработчиците ще ви благодарят!

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

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

Ако някое от тези неща ви се случва, тази статия е за вас. Това са 10-те неща, които ще ви помогнат да извлечете максимума от времето си и да намерите щастлив носител с разработчиците.

1. Размер на дъските

IOS

  • @ 1X: 375 x 667 px

андроид

  • mdpi: 360 x 640 px

мрежа

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

  • 1920 x 1080 px
  • 1200 x 900 px
  • 1024 x 768 px
  • 320 x 480 px

2. Как работят точките на прекъсване при отзивчиви оформления

Качете художествено произведение в Zeplin с отзивчивия дизайн (според точките на прекъсване, които вече сте задали), с други думи, споделете как изглежда вашият дизайн в различни резолюции на екрана и устройства.

Смятате, че е ясно, че дизайнът ще бъде хоризонтално в центъра на по-високи разделителни способности, като 1920 x 1080 пиксела, но разработчиците не са против читатели.

Споделяне на отзивчивия дизайн

3. Размер на растерните изображения

Задайте максималния размер на растерните изображения, за да избегнете загуба на качество, когато дизайнът се показва на екрани с по-висока разделителна способност. Например, ако работите върху приложение за iOS, задайте размера на изображенията на @ 3x. Ако не направите това, ще получите съобщение от програмиста, както следва:

Изпратете ми изображения с големи размери, защото изглеждат пикселирани, когато видя дизайна на iPhone 7.

4. Направете експортируема група икони, но също така и отделните обекти поотделно

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

5. Направете изображения за експортиране, а не текст

Представете си банер, който съдържа изображение, текст и филтър и филтърът не може да бъде изграден с CSS. След това разработчиците трябва да могат да експортират:

  1. Само изображението
  2. Само филтъра
  3. Изображение + филтър

6. Линия-височина

Височината на реда на текста на тялото трябва да бъде 6px повече от текущия размер на шрифта, изключение могат да бъдат заглавия или текстове с наслагване, където искате да повлияете на потребителя чрез овластяване на графиката на елемент.

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

7. Ширина на текстовото поле

Задайте ширината на един ред текст на „auto“. Това ще позволи на вашия екип на разработчиците да види полето между текста и други елементи на интерфейса или границите на дизайна на екрана.

8. Отстранете областта около иконата

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

9. Бутон състояния

Завършихте дизайна си в Sketch и сте качили екраните в Zeplin. Сега идва въпросът на програмиста.

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

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

10. Как да организираме екраните за дизайн в Zeplin

Zeplin ви позволява да организирате екраните по маркери. Можете да сортирате дизайните на вашите екрани по съдържание (например секциите на вашия уебсайт) или функционалности.

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

Какво повече?

Не губете времето си за създаване на ръководство за стил, можете да добавяте цветовете и типографиите директно от Zeplin (раздел Styleguide).

PD: Не забравяйте да поканите екипа за разработка в проекта на Zeplin!

Надявам се това да помогне, уведомете ме ако имате въпроси!

Присъединете се към моя клас Skillshare за това как да изграждате прототипи в inVision с помощта на плъгин Sketch & Craft за още съвети: https://skl.sh/2Y4hj6l