Menu
exm menu

 

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

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

מה חדש ב-XD

אורי פלג 23.10.18
מה חדש ב-XD

כבכל שנה באוקטובר מציגה 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 שפיתחנו במנטור הכולל את כל החידושים והעדכונים בזמן אמת ולהרשם במחיר מוזל לזמן מוגבל. http://www.mentor.co.il/courses/course/xd



 

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

  • נכתב ע"י
    סודות מקש alt/Option בלייטרום
    לייטרום מציעה מאות קיצורי מקלדת לשליטה מהירה בכל המודולים והקטגוריות בתוכנה. אך לעיתים די בהחזקת מקש אחד כדי לפתוח צוהר…...
    15.11.2018 | כתב: יגאל לוי
  • נכתב ע"י
    עבודה יעילה מול מתכנתים
    Adobe XD מאפשרת לנו לייעל את תהליכי העבודהמול המתכנתים של הממשקים אותם עיצבנו, בכמה היבטים, החל בשיתוף פרוטוטייפים, הורדת קובצי…...
    06.11.2018 | כתב: אורי פלג
  • נכתב ע"י
    מה חדש באילוסטרייטור CC2019
    אילוסטרייטור בגירסה CC 2019 מציעה שלל תכונות חדשות ביניהן מעבר צבעים מסוג חדש, תוספות ושידרוגים לתפריט הפונט, אפשרויות תצוגה חדשות (ומאוד…...
    28.10.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 או השאירו פרטים ונחזור אליכם בהקדם.

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