Menu
exm menu

 

ספרות מקצועית

9 ספרים לקנייה

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

אורי פלג 06.11.18
עבודה יעילה מול מתכנתים

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. פקודה זו תאפשר למתכנת לראות בכל מסך את הקבצים שניתנים להורדה ולהוריד אותם בפורמט הרצוי

SPEC1

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



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

SPEC2

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


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

בהצלחה לכולם



 

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

  • נכתב ע"י
    אינונב – פיתוח בשלושה חלקים
    אינונב – פיתוח בשלושה חלקים
    שנה שלישית: מפבלישר לעבודה עצמאית
    שנה שלישית: מפבלישר לעבודה עצמאית בפרקים הקודמים של הישרדות  בחלק הקודם כתבתי כיצד השנה השנייה החלה באויר פסגות והתדרדרה אל…...
    16.05.2019 | כתב: רוני גריפית
  • נכתב ע"י
    מה חדש בלייטרום גירסה 8.3
    אמש‭ ‬שחררה‭ ‬אדובי‭ ‬עדכון‭ ‬ללייטרום‭ ‬בגירסת‭ ‬הענן‭ ‬ובגירסה‭ ‬הקלאסית‭.‬ כמו‭ ‬תמיד‭ ‬הגירסה החדשה‭ (‬8‭.‬3)‭ ‬כוללת‭ ‬שיפורי‭ ‬ביצועים‭,‬ תיקוני...
    15.05.2019 | כתב: יגאל לוי
  • נכתב ע"י
    לשים את הרגש בצד
    לשים את הרגש בצד
    על ניהול לקוחות מהראש
    אנחנו נוטים לתפוס את עצמנו לרוב כאנשים מחושבים ורציונליים, במיוחד בפן העסקי. אבל הרבה פעמים, מה שמנהל את העסק שלנו…...
    08.05.2019 | כתב: עינת שמשוני
-

שלח לחבר

מלאו את הפרטים הבאים:

May2019OpenDay MentorBanner 1230 300

גללתם פיקסלים! רוצים שוב?

המכללה ממוקמת במתחם הבורסה ברמת גן סמוך ליציאה מתחנת רכבת ת"א מרכז (סבידור).
  • כתובת: ז'בוטינסקי 1, רמת-גן
  • טלפון: 03-5291888 פקס: 03-5290526
  • כתובת לדואר: ת.ד 3625 רמת גן 5213605
  • דוא"ל: This e-mail address is being protected from spambots. You need JavaScript enabled to view it.
  • שעות הפעילות המזכירות:
  • ימים א'-ה' 18:00 - 09:00
  • יום ו' 12:00 - 09:00
  •  
    • This e-mail address is being protected from spambots. You need JavaScript enabled to view it.
בואו נדבר
-

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

התקשר
בואו נדבר