exm menu

 

exm menu

 

מה חדש ב-XD

אורי פלג | 23.10.2018

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

בקצרהרשימת העידכונים

  • אנימציה אוטומטית (Auto Animate) ממש ככה, אלמנטים של ממשק ב-XD כעת מונפשים באופן יעיל וחכם, ללא ציר זמן (Timeline) או Keyframes, אנימציה שמבוססת על מעבר שבין צורות, גדלים, מיקומים ועוד… דוגמא בהמשך.
  • מחוות גרירה (DRAG) כעת מעבר ללחיצה על הפורטוטייפ ניתן גם לגרור אלמנטים ולבצע אינטרקציה התואמת יותר למסכי מגע. בשילוב עם אנימציה אוטומטית התוצאה לא פחות ממהממת! דוגמא בהמשך.
  • סימבולים מקושרים כעת ניתן ליצור קובץ ’מאסטר‘ לכל הסימבולים, בעת העתקת הסימבול לקובץ חדש הוא מקושר לקובץ המקור- עובדה המאפשרת שמירה על אחידות בעיצוב של מערכות מורכבות וכן שמירה על אחידות בין חברי צוות העיצוב העובדים במקביל. דוגמאות בהמשך.
  • פתיחת מסמכי אילוסטרייטור XD מאפשרת כעת לפתוח קובצי אילוסטרייטור שיצרתם, כמעט כל מאפייני הקובץ נשמרים בעת הפתיחה בתוכנה (למעט אפקטים מורכבים). האלמנטים הוקטורים שומרים על איכותם.
  • ייצוא ל-After Effects במידה ותרצו לייצר אנימציות הממחישות באופן מורכב יותר את האינטרקציה בממשק, XD מאפשרת כעת לייצא את משטחי העבודה בשלמותם, כולל את כל השכבות לתוכנת האפקטים המיוחדים ולהנפיש בה באופן גמיש ומורכב יותר.
  • הפעלה בפקודה קולית אשכרה עובד! אפשר לתת ל-XD (בפרוטוטייפ) פקודה קולית שתגרום לאינטרקציה, התוכנה יכולה גם לענות. שדרוג זה נותן מענה לתחום העיצוב חווית משתמש המבוסס דיבור (אלקסה, סירי, גוגל ועוד שירותים ומכשירים המגיבים לפקודות קוליות)!
  • תוספים (Plug-Ins) התוכנה מאפשרת כעת התקנת תוספים, במטרה להרחיב את יכולות התוכנה באמצעות כלים שאינם תוצרת Adobe. דוגמא בהמשך.

אנימציה אוטומטית (AUTO ANIMATE)

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




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

AUTO ANIMATE 2

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


מחוות גרירה (DRAG)

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

בכדי להגיע לתוצאה זו כך נראות ההגדרות של שני משטחי העבודה:

AUTO ANIMATE 4


סימבולים מקושרים

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

SYMBOLS 1

תוספים (PLUGINS)


שיתוף הפעולה של Adobe עם מפתחים שונים היוצרים תוספים והרחבות ל-XD מרחיב את יכולות התוכנה. אמנם בשלב זה עושה רושם שרוב התוספים לא משנים באופן דרמטי את אופן העבודה, אבל ראויים לציון שני תוספים עיקריים שיכולים בהחלט לסייע. שינוי גודל אותיות בלעז Change Case – לעיתים יש צורך בהחלפת מלל לטיני שהוקלד באותיות קטנות, בגדולות וההיפך, קביעת אות ראשונה גדולה בכל מילה וכדומה. התוסף Change Case מאפשר זאת ועוד. כל שצריך הוא להוריד את התוסף מחלון התוספים הממוקם בתפריט PlugIns > Discover PlugIns. חיבור לתוכן אמיתי מגוגל דוקס – תוספת זו מאפשרת כבר עכשיו לחבר תוכן אמיתי לעיצוב שלנו, עם יצירת מסמך גליון נתונים מבית Google ניתן לשייך כל תא בטבלה לאלמנט בעיצוב שלנו. התוסף מאפשר חופש בעריכת התוכן על ידי הלקוח ללא הצורך בהקלדת המלל בעצמינו. נראה יעיל ונחמד. עוד תוספים ששווה לבדוק – בדיקת ניגודיות של צבעים לנגישות (STARK), שילוב תמונות ממאגר UI FACES ועוד.  נראה שאחד הכיוונים המעניינים הצפויים הם תוספים שמייצאים קוד לווב או אולי אפילו לנייטיב, אמנם עוד חזון למועד אבל מניסיון העבר זה בהחלט מעבר לפינה.

PLUGIN 1

לסיכום

הגירסה החדשה מציגה קפיצה משמעותית ביכולות התוכנה, כהמשך להתקדמות המטאורית שהתרחשה בחודשים האחרונים. עושה רושם ש-XD תפסה את מקומה ב'כיתה של הגדולים' ברמת הביצוע והיכולות וכעת, כל שנותר הוא לקחת אותה לקצה ולהפיק ממנה את המירב בעיצוב לדיגיטל ואינטראקטיב.
אתם מוזמנים לבדוק את קורס XD שפיתחנו במנטור הכולל את כל החידושים והעדכונים בזמן אמת ולהרשם במחיר מוזל לזמן מוגבל. https://www.mentor.co.il/courses/course/xd


 

print

 

באותו נושא

  • נכתב ע"י
    כנס ADOBE MAX שנערך לאחרונה הביא איתו מבול של עידכונים משמעותיים ביותר למעצבי הממשקים שבינינו. מעניין לבחון את המתח שנוצר...
    12.11.2019 | כתב: אורי פלג
  • נכתב ע"י
    החל מעדכון פברואר 2020 ניתן לעצב רכיבי ממשק מורכבים בעזרת הגדרות ריווח פנימי (ריפוד=Padding). בכל הנוגע לבניית אתרים, מהווה הריווח...
    19.03.2020 | כתב: אורי פלג
  • נכתב ע"י
    מערכות עיצוב לXD - דיזיין סיסטם
    איך עובדים בין צוותים שצריכים מקור אחד של רכיבים? איך ניתן לשתף נכסים גראפיים תוך שמירה על אחידות והתאמה בין...
    13.01.2021 | כתב: אורי פלג

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

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

שלח לחבר

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

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

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

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

    • רותם

    • ליהיא



      התקשר

      להשארת פרטים




      אתם מוזמנים למלא פרטים כאן ואנחנו נחזור אליכם