Передовий досвід ескізного символу

Символи отримали велике оновлення в Ескізі 39. Вони набагато потужніші, ніж раніше, і ми всі намагаємося розібратися, як краще їх використовувати.

Доступна оновлена ​​версія цього посібника:

На Tradeshift ми починаємо підтримувати центральний документ Sketch з усіма нашими символами. Для того, щоб бути доданим до цього документа, символу необхідно пройти кілька перевірок якості та послідовності. Усі, хто розробляє для нас, будуть використовувати цей документ, тому ми не хочемо поширювати нічого, крім найкращих символів наших загальних компонентів інтерфейсу. Символи повинні поводитись аналогічно, бути досить маленькими, щоб бути модульними, бути досить великими, щоб бути корисними, і бути добре організованими для легкого редагування (або вбудовування в документ, коли їх від'єднувати).

Сподіваємось, ви знайдете корисні мої ідеї створення символів хорошої якості, але це, безумовно, живий документ, і я його оновлюю, оскільки ми неминуче знайдемо кращі способи зробити складніші справи. Я не зовсім впевнений, що це ідеальний підхід, але я хотів би почати розмову про якість Symbol.

Створіть найосновніші компоненти

В ідеалі не слід відривати символи часто, бо це перемагає мету. Створіть найосновнішу версію компонента, індивідуальні символи, які ви зможете комбінувати пізніше, щоб створити більш ремонтоване ціле.

Наприклад: у Tradeshift у нас є вкладка значків, яка виглядає так, але ви бачите, що наш компонент дозволяє розмістити піктограму вгорі, поза символом, що дозволяє вам легко перемикати вкладку в активні / неактивні режими без необхідно від'єднати або створити занадто багато варіантів того, що є по суті тим самим символом.

Встановити конвенцію про іменування

Назвіть шари відповідно. Ми намагаємось дотримуватися всіх малих регістрів, розділених тиреми. Ескіз автоматично впорядковує символи в папки, коли ви вводите ім’я /.

Я рекомендую конвенцію про іменування управління / визначення властивості-стану. Стани за замовчуванням не повинні мати стан - вкладка неактивна, а активна вкладка є зайвою. вкладка, активні вкладки - це шлях.

Приклад:

  • кнопка / колір-миша
  • вкладка / піктограма активна

Піт Лейсі зауважив, що імена не повинні бути занадто тісно пов'язані з їх фізичними ознаками, оскільки вони, ймовірно, еволюціонують. Для нас ми досить суворо зелені та сині, тому це справді їх визначальна властивість. Але, можливо, первинне, вторинне тощо було б доречнішим.

Використовуючи програму Sketch Runner, встановлення конвенції про іменування означає, що ви завжди зможете швидко знайти те, що шукаєте, оскільки існує організаційна схема, якій потрібно відповідати.

Ніхто не любить успадковувати погано організований файл Sketch взагалі, тож не давайте поширювати погано організовані символи.

Використовуйте загальний текст

Надайте шарам загальний текст заповнювача - не лише текст, який ви використовували у конкретному випадку використання, який ви мали під час створення цього символу. Текст-заповнювач для кнопок - "НАМІР ДІЇ" як пасивне нагадування про те, як слід формувати мікрокопію.

Дайте шарам відповідні назви

Дайте шарам самих відповідних і послідовних назв. Фони завжди повинні називатися фоновими, а не змішуватися з bg і т. Д. Проклинайте вас, якщо залишите його з назвоюRectangle 100! Якщо ви від'єднаєте Символ, він повинен залишатися охайним і самодостатнім об’єктом.

Текст особливо важливий. Переконайтесь, що символи, які ви будете регулярно замінювати (тобто подібними символами різних станів), мають однакові імена текстового шару. Ви можете редагувати текст у межах символу в редакторі заміщення - якщо ви заміните символ, він збереже текст у новому символі, якщо він має те саме ім'я текстового шару. Він також показує назву текстового шару, а не вмісту, як ідентифікатора поля.

Впроваджуйте чітку та послідовну ієрархію

Покладіть будь-який редагований текст зверху.

Групуйте впорядковано та переконайтесь, що немає зайвих груп чи елементів, які не виконують мети (що може статися, якщо вставити значок тощо).

Символи будуть повторно використані, відокремлені та реміксовані - вони повинні бути справді добре організованими, щоб кожен міг швидко зрозуміти, що відбувається, коли загляне під капот.

Переконайтесь, що символи правильно змінюються

Пограйте зі своїми символами, протестуйте їх і спробуйте їх зламати. Ви повинні ставити собі за мету створити щось бронезахисне. Додаткові кілька хвилин вашого часу на вдосконалення символу врятують головні болі в дорозі та зрадять дизайнерів, які повинні підтримувати ваші файли ескізів та символи.

Ознайомтеся з розміром шпаргалки Пітера Ноуелла

Текст має бути виправлений

Текст слід виправити та вирівняти правильно, щоб при зміні розміру символу він підтримував належне його положення та прокладку. Текст повинен мати властивість змінити розмір "Resize Object".

Створіть найменший варіант символу

Розробити навколо розтягуючих символів простіше, ніж стискати їх.

Для нас ми хочемо, щоб вкладка мала мінімальну ширину 99 пікс., Незалежно від тексту. Тож найменша версія вкладки шириною 99 пікселів, і ми знаємо, що не робити її меншою.

Переконайтеся, що символи, які ви будете замінювати, мають однаковий розмір аркуша

Ескіз замінить один символ іншим і стисне / розтягне символ, щоб він змістився до однакового розміру. Можливо, це навмисно, можливо, це помилка, але в кінцевому підсумку ви повинні спробувати створити символи, які регулярно будуть обмінюватися однаковим розміром. Якщо їх розтягнути, ви можете виправити його правою кнопкою миші-> Встановити оригінальний розмір.

Удар мене ідеями та відгуками! Я не зовсім впевнений, що це ідеальний підхід, але я хотів би почати розмову про якість Symbol.