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 מגה.

בהצלחה לכולם



 

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

  • נכתב ע"י
    5 טיפים על שכבות שאולי לא הכרתם
    חלון השכבות נתפס כחלון המרכזי בפוטושופ מאחר והוא מרכז את כל הנכסים בקובץ. מעבר ליכולת לשלב במסמך אלמנטים גראפיים שונים…...
    16.01.2019 | כתב: יגאל לוי
  • נכתב ע"י
    על טיפשים, חכמים ומתחכמים
    על טיפשים, חכמים ומתחכמים
    הכל על לוגו טיפש, חכם ומתחכם
    לקוח שעוסק באדריכלות או בבניין מבקש שבלוגו שלו יופיע ציור של בית, לקוח מתחום הפיננסים מתעקש על גרף צמיחה ובעל…...
    31.12.2018 | כתב: עינת שמשוני
  • נכתב ע"י
    המדריך לבחירת המצלמה המתאימה
    שוק המצלמות כיום מציע אפשרויות בלתי מוגבלות לצלם החובב והמקצועי כאחד, ולכן המבחר הרב עשוי לבלבל גם את האנשים המקצועיים…...
    30.12.2018 | כתב: מיכל וינס
-

שלח לחבר

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

PhotoshowMentorBanner 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 או השאירו פרטים ונחזור אליכם בהקדם.

התקשר
להשארת פרטים