Как да създадете FRAMET END FRAMEWORK със скица

Front End Framework

Някои аспекти, които трябва да се вземат предвид:

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

Чувствайте се свободни да изтеглите файла на скицата
https://dribbble.com/shots/2882661-Styleguide

Един от начините, по които можем да предприемем, за да генерираме „нормализиране“ в интерфейса, е да определим ръководство за стил (мислено от 100% визуална перспектива), което помага на целия дизайнерски екип да избегне бъдещи промени, ненужно работно време и да увеличи производителността, позволявайки ние да се фокусираме по-добре върху поведението на компоненти и взаимодействия в рамките на приложението.

Трябва да се приеме ръководство за добър стил от всички членове на екипа, като разработчици, собственици на продукти, ръководители на проекти и дори клиент, което ще генерира по-добра комуникация и по-голямо сътрудничество между тях. Към това „еволюирано“ ръководство за стил ние наричаме рамката на предния край (FEF).

Преди да започнете с процеса на създаване на FEF, важно е да имате предвид някои аспекти:

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

Нека започнем да прилагаме FEF

Стъпка 1, Дефиниране на ИА:

Първата стъпка е да определим съдържанието (въз основа на нашия проект го разделяме, както следва):

  1. Стайлинг: цветова палитра, семейство шрифтове, типография, икони.
  2. Оформления и модели на страници: различни композиции, решетки и основна навигация.
  3. Навигационни елементи: връзки, раздели и страници.
  4. Модални прозорци: пропуски, съвет, падащи панели, диалогови съобщения.
  5. Въвеждане на текст: формуляри.
  6. елементи

Стъпка 2, създаване на FEF съдържание:

Стайлинг - Първото нещо е да се създаде първична, вторична цветова палитра и допълнителни цветове, като се посочи #HEX и къде трябва да се приложи.

Цветова палитра

След това създайте стиловете в скица, за да можете да оптимизирате работния процес в бъдещите дизайни.

Създайте нов споделен стил

Колкото по-добра е номенклатурата на компонентите във FEF, толкова по-организирана е таблицата със стилове в скица.

Създадени стилове

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

Избор на предварително определен цвят на фона.

Повтаряме същия процес за типографски стилове:

книгопечатане
  1. Подробно описваме шрифтовете, които ще бъдат използвани в дизайните, първичните и вторичните.
  2. Ние създаваме стилове в Sketch, както и цветове
Създадени стилове

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

Семейни икони

Съвет: Създайте една и съща икона в различни състояния и ги кръстете по следния начин ComponentName / state / sub-state, ние ще можем да осъществим достъп до всички състояния от главното меню лесно, без да се налага да променяме оригиналната икона.

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

  1. отметка / нормален
  2. отметка / висене
  3. квадратчето / фокус / минус
  4. квадратчето / фокус / напускане
  5. отметка / натиснат
  6. квадратчето / инвалиди / напускане
  7. квадратчето / инвалиди

Следното ще се покаже вътре в падащото меню в горната лента:

Вмъкване на падащото меню

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

Промяна на стилове

Стъпка 3, създаване на компоненти:

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

Ето някои от компонентите, които обичам да показвам като пример:

Подсказки

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

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

Всеки компонент трябва да бъде придружен от обяснителен текст (кога да го използвате и какво поведение трябва да има). Ако е необходимо, можете да добавите раздел отдясно, като посочвате размери, полета и стилове.

ПРИМЕР ЗА ПОВЕЧЕ ПОПОВЕР

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

Визуализация на Zeplin.

Стъпка 4, поведение:

Има компоненти, които търпят модификации в своите размери (ширина и височина) в зависимост от мрежата, която използваме, като списъци с данни или мрежи с данни. За този тип компоненти скица предоставя серия от опции, които позволяват предварително да се определят позициите на всеки елемент и да се работи върху това, което би било отзивчивата таблица.

Пример за отзивчива мрежа от данниПример с много колони

Как да постигнем това отзивчиво поведение? Във версия 39 на скицата беше добавен нов прозорец с 4 опции, които позволяват да се постигне това.

Опциите са:

Stretch (по подразбиране) - ще плава и преоразмерява слоя, когато групата е преоразмерена (тази опция трябва да се прилага за разделителни линии и правоъгълници на всеки ред).

Закрепване към ъгъла - Автоматично фиксира новия слой към най-близкия ъгъл. Не оразмерява, когато групата е преоразмерена. (Иконите в горния десен ъгъл и квадратчетата трябва да имат тази опция.)

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

Поплавък на място - Слоят не оразмерява, но процентът на позицията му се запазва, когато групата е преоразмерена. (Тази опция трябва да се прилага за икони, които трябва да бъдат центрирани в колоната им.)

За повече информация как да създадете тези таблици препоръчвам следната статия: https://medium.com/sketch-app-sources/https-medium-com-megaroeny-resizing-tables-withsketch-3-9-2e02e6382d3d#. fsx0udd9v

Стъпка 5, Референции

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

Поради тази причина се препоръчва да се създаде последен раздел, който показва как се използва един и същ компонент въз основа на функционални нужди, така че дизайнерът да може да анализира и да научи как да репликира стилове с различна архитектура.

елементи

Общо бъдеще

Работата рамо до рамо между всички членове на екипа в сложен проект, базиран на ръководство за стил, може да подобри качеството на работата, а сътрудничеството може да избегне въпроси като „Какво би било поведението на компонента„ x “в по-малки резолюции?

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

Чувствайте се свободни да изтеглите файла на скицата
https://dribbble.com/shots/2882661-Styleguide

Можете да намерите повече от мен на https://dribbble.com/sebamantel