עבודה יעילה מול מתכנתים

אורי פלג | 06.11.2018

Adobe XD מאפשרת לנו לייעל את תהליכי העבודהמול המתכנתים של הממשקים אותם עיצבנו, בכמה היבטים, החל בשיתוף פרוטוטייפים, הורדת קובצי נכסים (ASSETS) והגדרות מרחקים וגדלים של אלמנטים בעיצוב (SPECS).

רקע

בתהליך פיתוח מוצר אינטראקטיבי מכל סוג, בין אם זהו אתר, אפליקציה, או משחק, על המעצבים להקדים וליצור דו־שיח עם המתכנתים. דו־שיח כזה, ככל שיקדים להתקיים, יכול לפתור בעיות רבות שצצות בעת הפיתוח. כמעצבים עלינו להכיר את עולם הקוד לפחות ברמת המגבלות המתקיימות בו, כמו גם את המגבלות הנובעות משיקולים נוספים כמו תקציב, זמן או פלטפורמת הפיתוח. ידע מקדים כזה שנקבל מהמתכנתים יכול למנוע עוגמת נפש לכל הנוגעים בפרוייקט.
לאורך ההיסטוריה של יצירת מוצרים דיגיטליים, המעבר משלב העיצוב הסטטי אל הבנייה והתכנות היווה את אחת מנקודת התורפה המאתגרות ביותר.
כמעצבים נדרשנו לא פעם עם סיום עבודת העיצוב להקדיש זמן רב בניסוח חוקי העיצוב בעזרת מתיחת קוים אדומים המתארים מרחקים וגדלים בין אלמנטים שונים (Red lines או Specs). תהליך זה גזל זמן רב ולעיתים אף השתווה לזמן שהקדשנו לעיצוב עצמו.
בשנים האחרונות, עם העליה והתפתחות הכלים לעיצוב לתחום ה-UI, שיטות עבודה אלו השתנו והשתפרו באופן משמעותי. דו־השיח עם המתכנתים הפך להיות פשוט וזורם יותר והפחית את מפלס התסכול לשני הצדדים.

פינת התובנות

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

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

כגשר לתיכנות

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

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

הכנת קובצי הנכסים (ASSETS) – אלו כל האלמנטים בהם עשינו שימוש בעיצוב שלא יבוטאו בקוד רגיל, תמונות הינן דוגמא מצוינת לנכס, אייקונים, או כל אלמנט אחר, מורכב יחסית, שאיננו קופסא סטנדרטית.
ייצוא כל קובצי הנכסים – למען הסדר הטוב מומלץ להכין תיקיה מסודרת הכוללת את כל הנכסים בפורמטים שונים (JPG, PNG, SVG). באופן זה, אם יעלה צורך באחד מהם, הגישה מהירה לחומרים תהיה מהירה ונוחה.
שיתוף מסכי הפרוייקט והגדרות העיצוב למתכנתים – חלק זה מתבצע ברובו בענן שלנו ב-Adobe עם סיום הכנת הקובץ והנכסים נבצע את פעולת Publish Design Specs מפקודת השיתוף בפינה הימנית העליונה של התוכנה.

PUBLISH

הכנת קובצי הנכסים

אחת מהפעולות החשובות ביותר בתהליך זה הינה הגדרת האלמנטים שהינם נכסים (Batch). בסביבת Design נפתח את חלון השכבות. לצד כל שכבה מופיעים שלושה אייקונים– שניים מוכרים של נעילה והצגת שכבה ואחד זר וחדש הכולל דמות של ריבוע עם חץ. כדי להשתמש באייקון זה עלינו להכין את הנכס בצורה הטובה ביותר, לדוגמא, אם מדובר באייקון הבנוי ממספר אלמנטים, נקבץ אותם (Group) ואז על שכבת הקבוצה נערוך את שם האובייקט, לדוגמא Icon_Mail, כעת יש לסמן את האייקון לצד השכבה החדשה שלנו. פעולה זו מגדירה שכבה זו כנכס – מה שיאפשר לנו לייצא את כל הנכסים יחד בלחיצת כפתור אחת (טוב אולי שלוש לחיצות).

ככה זה נראה בפועל:

BATCH

פינת התובנות

תובנה #1 – כדאי לשמור על שמות ברורים לכל נכס כך שתוכלו להתמצא בתיקיה בקלות.

תובנה #2 – רצוי לבדוק עם המתכנת אם יש דרך שיעדיף לקבל את הנכסים, לוגיקה של שמות, גדלים ועוד…

ייצוא קובצי הנכסים

כעת ניתן ליצור ייצוא מהיר של כל הנכסים שהוגדרו לייצוא (Batch). פעולה ידנית זו מאפשרת ליצור תיקיה מסודרת הכוללת את כל האלמנטים שסומנו. הפעלת הפקודה Batch מתפריט File>Export תאפשר לבחור מיקום (תיקית הנכסים של הפרוייקט) ואת הפורמט הרצוי של הנכס (PNG, JPG, SVG). אם תרצו ליצור לכל נכס פורמט נוסף יש לבצע את הפעולה בשנית ולקבוע בכל ייצוא פורמט שונה.

שיתוף המסכים ושמירה על הנכסים

עדכון אוגוסט לתוכנה הוסיף יכולת לשיתוף מסכים עם מתכנתים, באופן שיוכלו לצפות בהגדרות עיצוב כמו צבעים, גדלים ומרחקים. כמו כן, מעדכון זה ניתן להוריד את הנכסים שהוגדרו בקובץ (ראו סעיף ’הכנת קבצי הנכסים‘). פעולה זו מקלה מאוד על התהליך היות וכל שנותר

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

אחרי הבחירה בשיתוף (Design Spec) יש לסמן את תיבת הסימון Include Assets. פקודה זו תאפשר למתכנת לראות בכל מסך את הקבצים שניתנים להורדה ולהוריד אותם בפורמט הרצוי:

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

מצורף קישור של ההדגמה

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

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

SPEC2

שימו לב! תמונות כנכסים

תמונות מהוות נדבך חשוב בתוצרי העיצוב, הכוונה היא לנכסים מבוססי פיקסלים, לרוב נכסים אלו כבדים יותר ואיכותיים יותר מהנדרש למסך, בעיקר אם הורדו מבנק תמונות. המלצתי היא לערוך את התמונות בפוטושופ (אני עדיין חסיד של הפקודה Save for Web) לאיכות אופטימלית לפני שילובן ב-XD. כך ניתן יהיה להפוך גם אותן לנכס רלוונטי לשלב התכנות. בדוגמא המצורפת בקישור תוכלו לראות תמונה איכותית וכבדה מדי שלא עברה אופטומיזציה לפני התהליך ולכן שוקלת 2.5 מגה.

בהצלחה לכולם

כתבות נוספות שיכולות לעניין אותך:

נכתב ע"י אורי פלג

10 טיפים לשימוש במלל בפוטושופ

ב-20 השנים הראשונות לקיומה של פוטושופ, אגף הטיפול במלל בתוכנה נדחק לקרן זוית ומרבית המשתמשים השתמשו בכלי המלל בעיקר ליצירת...
06.11.2018 | כתב: אורי פלג
נכתב ע"י אורי פלג

פיתוח משחקים ביוניטי

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

TRUE LAYER DUPLICATOR

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

עבודה יעילה מול מתכנתים