שחרור מערכות עיצוב

מסירת תפוקות מחוברות למאמצים לאורך זמן

מספר 1 מתוך 6 מהסדרה מערכות עיצוב משחררות:
תפוקות | קדנס | גרסאות | שוברים | תלות | תהליך

חברות מבינות את ערך מערכת העיצוב כאשר אימוץ מוצרים משתמשים במערכת בכדי להפוך ולשלוח חוויות בהן לקוחותיהם משתמשים. כחלק משרשרת הערך ההיא, המערכת משחררת תכונות לאורך זמן. זה מכניס את המערכת לידי לקוחותיה: מעצבים ומהנדסים שעושים את עבודתם.

צוותי מערכת חזקים מתייחסים ברצינות לשחרורים. הם לא רואים עצמם משחררים רק קוד ספריית רכיבים. במקום זאת הם מספקים תפוקות רבות יותר: אסימוני עיצוב, תיעוד, נכסי עיצוב ומשאבים אחרים.

סדרה זו מתארת ​​פנים רבות של שחרור מערכות עיצוב. זה מתחיל בהגדרת התפוקות הרבות של המערכת והיכן הן מועברות. מאמרים שלאחר מכן מכסים נושאים של קצב, גרסאות, שבירת שינויים, תלות וגישה שלב אחר שלב.

הסיפורים הללו משקפים את מה שלמדתי על שחרור מערכות העובדות עם צוותים כמו Discovery Education, Morningstar, Target ו- REI. הם מוגברים על ידי תובנות של עמיתים ב- Salesforce, Adobe, Atlassian, Shopify ו- Financial Times. תודה ששיתפת באדיבות את זמנך ופרקטיקות שלך!

תפוקות: מה יצא?

תוכניות למערכות עיצוב משחררות סוגים רבים של תפוקות, ולא רק קוד. כתוצאה מכך, מערכת צריכה לבדל ולתקשר מגוון זה של תפוקות גרסאות למפתחים, מעצבים ולקוחות אחרים.

קוד, מקור האמת

רוב המערכות מציעות מקור אחד לאמת של קוד שכבת המצגת כמו:

  • ספריית רכיבי ממשק משתמש כמו סימון HTML ו- CSS. הצריכה של חבילה זו מכונה לעתים קרובות "CSS", נשענת על שימוש או קומפילציה של CSS כקו בסיסי בסגנון חזותי, יחד עם שימוש בקטעי HTML חוזרים.

ו / או ...

  • ספריית רכיבי ממשק המשתמש כ- Javascript: מערכות רבות עוטפות HTML ו- CSS עם JavaScript בכדי לחזק את ההיגיון, לכסות את הסגנון ולהקל על האינטגרציה והתחזוקה בצורה ישירה יותר במסגרת הבחירה. בעוד שרוב הספריות מכוונות למסגרת ספציפית (React, Vue, Ember, Angular, ...), אותות בתעשייה מציעים מעבר לייצור רכיבי רשת לכל המסגרות. שש מאמצי המערכת האחרונים שלי? בהמשך 2017: HTML של וניל, HTML של וניל. תחילת 2018: React, Vue. בהמשך 2018: רכיבי רשת, רכיבי רשת.

בנוסף, תפוקות בולטות אחרות עשויות להשתחרר בנפרד:

  • עיצוב סמלים המבססים סגנון חזותי באמצעות זוגות בעלי ערך נכסי בעל ערך סמנטי. אסימונים הם משתנים הזמינים בפורמטים רבים לשימוש בפלטפורמות (אינטרנט, iOS, אנדרואיד), מעבדים מקדימים (Sass ו- LESS) ומסגרות (כמו React). מערכות מסוימות מנהלות אסימונים במאגר הנפרד מקוד רכיב ממשק המשתמש. כתוצאה מכך, הספרייה שלהם - יחד עם יישומים אחרים - יכולים להיות תלויים גם באסימון כחבילה.
  • הדגמה של אפליקציות / אתרים כסביבה עם דוגמאות עמודים שנבנו באמצעות ספריית הרכיבים. ההדגמה מיועדת גם להדרכות ואב-טיפוס מהיר, כולל מעצבים!
  • רכיבי חוצה פלטפורמות המתאימים ל- iOS, Android ו- Windows.

נכסי עיצוב

רוב הצוותים מגבילים את ההבנה של מה שהם משחררים ל"אנחנו משחררים קוד "פשוט. זה נפתח להם בעין להבין שהם מפרסמים כל כך הרבה כלים אחרים שמשתנים עם הזמן. הם כוללים:

  • ערכות כלים לעיצוב כקבצי תבניות וספריות סמלים המוצעות בתוכנת עיצוב. היום כמעט תמיד סקיצה. מחר, פיגמה, סטודיו Invision, ומתחרים מתעוררים אחרים?
  • גופנים, אייקונים ואפילו ערכות תמונה של אוריגמי בגלל התפקיד הצפוי של המערכת לעיתים קרובות בהפצה ובגרסה של ספריות כאלה.
  • מקורות עיצוב אחרים כמו איור וקבצי ASE / CLR דוגמיות צבעוניות כמקפצה ליצירות אמנות בהתאמה אישית. אוספים אלה משתנים באטיות, בצורה פחות פורמלית, ובאמצעות תרומות של חברי הקהילה שאינם חלק מצוות הליבה של המערכת. עם זאת, מבחינת הלקוח ותקשורת המערכת, זהו חלק מהמערכת.

אתר תיעוד

מערכות עיצוב צריכות בית, מקום שכולם מכירים שהם יכולים למצוא דרך לכל מה שיהיה בו האחרון והגדול ביותר. הוא שוכן בכתובת אתר בלתי נשכחת, והוא בנוי לרוב עם רכיבי ממשק משתמש הספציפיים למשימתו.

  • אתרי תיעוד מתארים תכונות (כמו כפתור), משתמשים חדשים באתרים ומפעילים תהליכים כמו קבלת עזרה או תרומה. צוותים בונים אתרים בתדירות גבוהה יותר באמצעות מחולל אתרים סטטי או לעיתים קרובות פחות עם מערכת לניהול תוכן.
  • רכיבי תיעוד - קוד דוגמה-זוג, דו-דונט, hex-code, רכיב-סייר - תלויים בספריית רכיבי ממשק המשתמש ומשרתים בדרך כלל רק את אתר המסמכים. רכיבים כאלה עשויים להיות מנוסחים באתר התיעוד או כספרייה שלישית, עם גירסאות בנפרד, ביחס למסמך ולרכיבי ממשק המשתמש שביניהם.

יעדים: לאן זה הולך?

בעת חלוקת קוד ונכסי עיצוב, חיוני להציע את הקוד באופנים הנצרכים ביותר על ידי המהנדסים המאמצים שלך. משמעות הדבר היא שמערכות מסוימות חייבות להציע בחירה בין אפשרויות רבות, ואילו אחרות יכולות להסתמך על בחירה יחידה כסטנדרט ארגוני.

לקוד

  • BEST: רישומים כמו npmjs (או מקבילה פנימית כמו nexus של Sonatype) המספקים גישה וניהול של חבילות קוד ששוחררו. לאחר מכן מפתחים משתמשים בכלים כמו bower, npm, חוט, webpack ו- babel כדי לשלב ולשדרג את הקוד בצורה חלקה בסביבות שלהם.
  • BETTER: נכסים מתארחים ב- CDN לקישורים ישירים לסגנון ותסריט מנוסחים כמו גם לגופנים וסמלים שמשתנים לאט יותר.
  • רק בסדר: גישה למאגר ל- Github, Bitbucket וכדומה לשיבוט, מזלג או הידור אחר, שימוש ואולי - בסופו של דבר - לתרום.
  • אם נחוץ: הורדות קוד ישירות, בדרך כלל של "קובץ ה- ZIP" של נכסי מערכת מורכבים או לא מורכבים מאתר המסמכים לשימוש מקומי ו / או אינטגרציה ידנית למאגר נפרד.

Bootstrap ו- Material Design Lite הם דוגמאות לשחרור ליעדים 2+.

עבור ערכות כלים לעיצוב

  • BEST: צור חדש כנתיב משובץ ומוטבע בתפריט של כלי עיצוב כדי ליצור מופע חדש מתבנית.
  • BETTER: גרסתה והופצה באמצעות תוכנת ניהול נכסי עיצוב מבוססי הרשאה כגון תקציר או לינגו.
  • GOOD: הורדת ערכת כלים ישירה מאתר תיעוד, עם גירסה ברורה המצוינת ומסמכת התחלת העבודה של המסמך הנמצא בקרבת מקום.
  • רק בסדר: כונן משותף, באמצעות כתובת אתר פנימית מתוקשרת ואולי מפושטת (כגון http: //system.uitoolkit).
  • לא טוב מספיק: קבור באיזה דף ברמה הרביעית באתר wiki בקושי מסודר שרבים לא יכולים למצוא.

הבא → # 2. קדנס