ADOBE XD – חידושים וניהול צבע
אורי פלג |
14.06.2018
כאמור, Adobe XD מהווה את המענה של אדובי עבור כל מעצבי הממשק באשר הם, מעצבי חוויית משתמש ומאפיינים. בחודשים האחרונים הוצגו מספר חידושים ושיפורים מעניינים המציגים מאפיינים ופעולות יעילות המקלות על המשתמשים.
עושה רושם שבאדובי החליטו לקחת ברצינות את הפיתוח של XD. לראייה מהלך עליו הכריזה החברה
באמצע חודש מאי המאפשר שימוש בתוכנה בגירסה חינמית בתוכנית מתחילים. תוכנית זו מאפשרת לכל אחד לעשות שימוש חופשי לכל
צורך בתוכנה עם מגבלה של פרוטוטייפ אחד פעיל ו-SPEC אחד פעיל (קובץ לתכנות). משמעות הדבר היא שלכל מעצב ישנה כיום
האפשרות להתחיל להשתמש בתוכנה לעיצוב ממשקים ללא תלות במערכת הפעלה, מנוי או חיבור לאינטרנט. על המגבלה המדוברת ניתן
להתגבר בשלבי עבודה ראשוניים- ועל זה במאמר נפרד הסוקר כלים חינמיים נוספים למעצבי ממשקים. להלן קישור להורדת של
גרסה החינמית:
https://creative.adobe.com/products/download/xd
באמצע חודש מאי המאפשר שימוש בתוכנה בגירסה חינמית בתוכנית מתחילים. תוכנית זו מאפשרת לכל אחד לעשות שימוש חופשי לכל
צורך בתוכנה עם מגבלה של פרוטוטייפ אחד פעיל ו-SPEC אחד פעיל (קובץ לתכנות). משמעות הדבר היא שלכל מעצב ישנה כיום
האפשרות להתחיל להשתמש בתוכנה לעיצוב ממשקים ללא תלות במערכת הפעלה, מנוי או חיבור לאינטרנט. על המגבלה המדוברת ניתן
להתגבר בשלבי עבודה ראשוניים- ועל זה במאמר נפרד הסוקר כלים חינמיים נוספים למעצבי ממשקים. להלן קישור להורדת של
גרסה החינמית:
https://creative.adobe.com/products/download/xd
העתיד מעבר לפינה
מעבר להכרזה האחרונה על פתיחת התוכנה לשימוש חופשי, אדובי משחררים בכל חודש עדכון משמעותי
לתוכנה ועל פניו נראה שבכל חודש יש למה לצפות והטוב עוד לפנינו.
אחד המהלכים המעניינים של אדובי שהחל לקרום עור
וגידים הוא האפשרות לפיתוח תוספים והרחבות לתוכנה. גישה זו המוכרת לנו מכלים אחרים של אדובי כפוטושופ ואינדיזיין
תאפשר לתוכנה להתפתח למחוזות חדשים שלא תלויים רק בהחלטות של אדובי. המהלך הזה מזכיר את המהלך שהובילה אדובי עם
פיתוח MUSE שקודמה בצורה מרשימה על ידי קהילת מפתחים, שיצרו הרחבות לתוכנה ואיפשרו למעצבים ליצור מוצרי ווב מורכבים
יותר. המהלך המדובר של אדובי עדיין בשלבי הרצה והחל בחודשי הקיץ הקרובים יצוצו מפתחים חיצוניים שיחלו ליצור תוספים
והרחבות ל-XD- מה שמבטיח לנו הפתעות מעניינות. בנימה אישית, פיתוח של תוספים לתוכנה על ידי גורמים חיצוניים יביא את
התוכנה למקום שיחייב אותנו כמעצבים להיות עם אצבע על הדופק. לגבי אפשרויות שאינן מובנות בתוכנה, זוהי תכונה חשובה
לכל מעצבי הממשקים ועושה רושם שלא יקלו עלינו בהקשר זה גם כאן ולכן כדאי להישאר מעודכנים.
לתוכנה ועל פניו נראה שבכל חודש יש למה לצפות והטוב עוד לפנינו.
אחד המהלכים המעניינים של אדובי שהחל לקרום עור
וגידים הוא האפשרות לפיתוח תוספים והרחבות לתוכנה. גישה זו המוכרת לנו מכלים אחרים של אדובי כפוטושופ ואינדיזיין
תאפשר לתוכנה להתפתח למחוזות חדשים שלא תלויים רק בהחלטות של אדובי. המהלך הזה מזכיר את המהלך שהובילה אדובי עם
פיתוח MUSE שקודמה בצורה מרשימה על ידי קהילת מפתחים, שיצרו הרחבות לתוכנה ואיפשרו למעצבים ליצור מוצרי ווב מורכבים
יותר. המהלך המדובר של אדובי עדיין בשלבי הרצה והחל בחודשי הקיץ הקרובים יצוצו מפתחים חיצוניים שיחלו ליצור תוספים
והרחבות ל-XD- מה שמבטיח לנו הפתעות מעניינות. בנימה אישית, פיתוח של תוספים לתוכנה על ידי גורמים חיצוניים יביא את
התוכנה למקום שיחייב אותנו כמעצבים להיות עם אצבע על הדופק. לגבי אפשרויות שאינן מובנות בתוכנה, זוהי תכונה חשובה
לכל מעצבי הממשקים ועושה רושם שלא יקלו עלינו בהקשר זה גם כאן ולכן כדאי להישאר מעודכנים.
העדכונים האחרונים שיצאו
אלה הם כל העדכונים הרשמיים של אדובי, פירוט על חלקם בהמשך הכתבה.
- 2/2018 – העברת אלמנטים וקטורים מתוך ספריית הענן, שמירה על מיקום הגלילה במעבר בין
מסכים, שליטה גבוהה יותר בתהליכי עבודה המתרחשים במסכי מגע מבוססי חלונות 10, הצגת גריד בהעברה לפיתוח (SPEC),
דוגם צבע הזמין מחלון ה-Inspector לצד שליטה בצבע המילוי וצבע הקו. - 3/2018 – פתיחת מסמכי פוטושופ וסקאצ’ בתוך XD (הרחבה בהמשך), כולל המרה של שכבות חכמות
ואובייקטים מורכבים בצורה כמעט מושלמת, העתקת סימבולים בין מסמכים, שליטה על גובה ה-VIEWPORT להגדרת הפולד
הראשון של המסך. - 4/2018 – יצירת סיסמה בעת כניסה לפרוטוטייפ בדפדפן, שיפורים משמעותיים לחלון ה-ASSETS
בדמות חיפוש וסינון, סימון סגנון או אלמנט בתוך משטחי העבודה, שיפורים בעיבוד קבצי PSD, - 5/2018 – החלפת סימבולים במקביל לכל המסכים, הדבקה בכמה משטחי עבודה במקביל, שיפורים
נוספים בקובצי PSD וסקאצ’ והגבלת כניסה לקובץ SPEC בדפדפן באמצעות סיסמה.
לא על הפוטושופ לבדו
אחד המהלכים המרשימים והמתבקשים ביותר עד כה בפיתוחה של XD הוא האפשרות לפתיחת קובצי
פוטושופ וסקאצ‘ בתוך XD והמשך עבודה על העיצוב והפרוטוטייפ באופן נוח ויעיל יותר.
פוטושופ וסקאצ‘ בתוך XD והמשך עבודה על העיצוב והפרוטוטייפ באופן נוח ויעיל יותר.
למהלך הזה מספר משמעויות:
- מאפשר לנו לעבור עם קבצים מסורבלים ועתיקים (PSD) לסביבת עבודה עדכנית ויעילה.
- מאפשר למשתמשי חלונות להשתלב בקובצי סקאצ‘ ולהמשיך לעבדם ב-XD בנוחות.
- מאפשר לנו לבצע את כל פעולות העיצוב וההמחשה בכלי אחד ללא פיצול תהליכים.
ההמלצה שלי היא – תמיד לדעת לבחור את הכלי הרלוונטי למשימה. אם, למשל, תרצו לדפוק מסמר
בקיר, הרי לא תשתמשו במברג, אותו הדין גם בתהליכי עיצוב. XD מאפשרת לנו להתמקד במשימות איפיון ועיצוב ללא הסירבול
הכרוך בעבודה עם תוכנת עיבוד תמונה. עם זאת נכון יהיה לשלב בתהליכי העבודה גם את פוטושופ ובנוסף את אילוסטרייטור
לצורך יצירת אלמנטים מורכבים יותר שלא ניתן לבצע בכלים של XD.
בקיר, הרי לא תשתמשו במברג, אותו הדין גם בתהליכי עיצוב. XD מאפשרת לנו להתמקד במשימות איפיון ועיצוב ללא הסירבול
הכרוך בעבודה עם תוכנת עיבוד תמונה. עם זאת נכון יהיה לשלב בתהליכי העבודה גם את פוטושופ ובנוסף את אילוסטרייטור
לצורך יצירת אלמנטים מורכבים יותר שלא ניתן לבצע בכלים של XD.
כדי לפתוח קובץ פוטושופ כל שצריך לעשות הוא להפעיל את הפקודה Open מתפריט File, לבחור בקובץ
PSD ולאשר את החלון. רצוי שהקובץ יכלול משטחי עבודה (Artboards), באופן זה נקודת המוצא של הקובץ תהיה איכותית יותר.
בכל הנוגע לקובצי סקאצ‘- התהליך זהה.
PSD ולאשר את החלון. רצוי שהקובץ יכלול משטחי עבודה (Artboards), באופן זה נקודת המוצא של הקובץ תהיה איכותית יותר.
בכל הנוגע לקובצי סקאצ‘- התהליך זהה.
ניהול צבע ב-XD
בסביבת העבודה של התוכנה ישנם מספר איזורי שליטה ויצירה של צבע. כל איזור והיתרונות היחסיים
שלו על פני האחרים, בהמשך המאמר אמנה אותם ואנסה להקנות לכם בסיס נכון ויעיל לעבודה עם צבעים בעת עיצוב ממשקים.
שלו על פני האחרים, בהמשך המאמר אמנה אותם ואנסה להקנות לכם בסיס נכון ויעיל לעבודה עם צבעים בעת עיצוב ממשקים.
יצירת ועדכון צבעים בחלון אינספקטור
עקרון העבודה הבסיסי בחלון האינספקטור הוא שעבור המילוי והקו יש תיבת סימון (Checkbox)
המאפשרת את הופעת כל אחד מערכים אלה בנפרד. לצד כל אחד מהם מופיע דוגם הצבע. מדובר, אגב, באחד העדכונים האחרונים
לתוכנה. כלי זה מאפשר לדגום כל גוון המופיע במסך עבור קו המתאר והמילוי בנפרד כפי שניתן לראות בדוגמא:
המאפשרת את הופעת כל אחד מערכים אלה בנפרד. לצד כל אחד מהם מופיע דוגם הצבע. מדובר, אגב, באחד העדכונים האחרונים
לתוכנה. כלי זה מאפשר לדגום כל גוון המופיע במסך עבור קו המתאר והמילוי בנפרד כפי שניתן לראות בדוגמא:
בלחיצה על מלבן הצבע של כל אחד מהערכים
יפתח חלון בחירת הצבע, בחלון זה מספר אפשרויות חשובות, בחירת צבע אחיד או מעבר צבע (מעגלי או קווי), סקאלות גוון,
רוויה ושקיפות הצבע. בחלון זה שוב נפגוש את דוגם הצבע וכן את הערך ההקסדצימלי (קוד צבע בן 6 תוים), ניתן להחליפו
למודל צבע RGB או HSB- עבור מי שזקוק לשליטה מספרית ביצירת הצבע (מומלץ). פעולה נוספת היא שמירת הצבע לספריית הצבע
של הפרוייקט בעזרת כפתור הוספה (+), המופיע בתחתית השמאלית של המסך, צבעים אלו יופיעו בחלקו התחתון של חלון
זה.
מעברי צבע – חלון האינספקטור
שני סוגי מעברי צבע מתאפשרים דרך חלון יצירת הצבע, קווי ומעגלי. מעברי צבע מאפשרים
הוספה של מספר גוונים ביניהם יתאפשר המעבר. כמו כן ניתן למקם את המעבר בצורה חופשית על גבי הצורה, כך שהתחלת המעבר
מוסתרת על ידי גבולות הצורה ובכך מאפשרת יצירת מעברים מורככים יותר.
הוספה של מספר גוונים ביניהם יתאפשר המעבר. כמו כן ניתן למקם את המעבר בצורה חופשית על גבי הצורה, כך שהתחלת המעבר
מוסתרת על ידי גבולות הצורה ובכך מאפשרת יצירת מעברים מורככים יותר.
ניהול צבע מחלון הנכסים (ASSETS)
חלון הנכסים (Assets) מאפשר בין היתר, שמירה של דוגמיות צבע, סגנונות מלל ואלמנטים חוזרים
עבור אותו הקובץ לשימוש מהיר ושמירה על אחידות העיצוב.
בחלק הנוגע לצבע ניתן לשמור כל סוג צבע וליישם אותו דרך
חלון זה על גבי העיצוב.
כפי שניתן לראות בדוגמא, איזור הצבעים בחלון מאפשר באמצעות לחיצה על לחצן ימני בעכבר על
צבע לבצע מספר פעולות, החל בעריכת הצבע (הפעלת הפקודה תפתח את חלון יצירת הצבע עליו נכתב בסעיף הקודם), יישום הצבע
על מילוי הצורה, או על קו המתאר שלה, העתקת קוד הצבע, מחיקת דוגמית הצבע מהספריה, או הצגת כל האלמנטים שעושים שימוש
בצבע זה. האלמנטים יודגשו באמצעות קו מתאר כחול סביבם לזיהוי מהיר. הפקודה האחרונה הופכת משמעותית במקרה של עיצוב
הכולל הרבה מסכים והצורך שלנו לזהות שימוש בנכס (Assets) מסויים בקלות.
אחד היתרונות הגדולים של שימוש בחלון זה
הוא היכולת שלנו לשנות סכימה צבעונית של ממשק שלם במינימום מאמץ. אם, לדוגמא, יישמנו גוון מסויים דרך חלון Assets על
מספר רב של אלמנטים ומסכים ובשלב מסויים נרצה לערוך צבע זה, בעת עריכת הצבע בחלון Assets (כאמור, לחיצה עם לחצן ימני
בעכבר על הצבע ובחירה בפקודה Edit)- שינוי הצבע יתקיים בכל המופעים שלו במסמך.
מדובר בחלון מרכזי לניהול צבעי
המסמך ולשמירה על אחידות בין מסכים רבים באותו הפרוייקט.
עבור אותו הקובץ לשימוש מהיר ושמירה על אחידות העיצוב.
בחלק הנוגע לצבע ניתן לשמור כל סוג צבע וליישם אותו דרך
חלון זה על גבי העיצוב.
כפי שניתן לראות בדוגמא, איזור הצבעים בחלון מאפשר באמצעות לחיצה על לחצן ימני בעכבר על
צבע לבצע מספר פעולות, החל בעריכת הצבע (הפעלת הפקודה תפתח את חלון יצירת הצבע עליו נכתב בסעיף הקודם), יישום הצבע
על מילוי הצורה, או על קו המתאר שלה, העתקת קוד הצבע, מחיקת דוגמית הצבע מהספריה, או הצגת כל האלמנטים שעושים שימוש
בצבע זה. האלמנטים יודגשו באמצעות קו מתאר כחול סביבם לזיהוי מהיר. הפקודה האחרונה הופכת משמעותית במקרה של עיצוב
הכולל הרבה מסכים והצורך שלנו לזהות שימוש בנכס (Assets) מסויים בקלות.
אחד היתרונות הגדולים של שימוש בחלון זה
הוא היכולת שלנו לשנות סכימה צבעונית של ממשק שלם במינימום מאמץ. אם, לדוגמא, יישמנו גוון מסויים דרך חלון Assets על
מספר רב של אלמנטים ומסכים ובשלב מסויים נרצה לערוך צבע זה, בעת עריכת הצבע בחלון Assets (כאמור, לחיצה עם לחצן ימני
בעכבר על הצבע ובחירה בפקודה Edit)- שינוי הצבע יתקיים בכל המופעים שלו במסמך.
מדובר בחלון מרכזי לניהול צבעי
המסמך ולשמירה על אחידות בין מסכים רבים באותו הפרוייקט.
צבע מחלון CC LIBRARIES
את הצבעים ניתן ליישם גם מחלון הספריות (CC Libraries) הזמין nתפריט File. נכון לגירסה
הנוכחית לא ניתן ליצור ספרייה חדשה מחלון זה, אלא רק להמשיך לעדכן ספרייה קיימת. נוח בעיקר במקרים של פרוייקטים חוצי
תוכנות וחוצי מחשבים.
הנוכחית לא ניתן ליצור ספרייה חדשה מחלון זה, אלא רק להמשיך לעדכן ספרייה קיימת. נוח בעיקר במקרים של פרוייקטים חוצי
תוכנות וחוצי מחשבים.
לסיכום, ניהול הצבע ב-XD
מתקיים במספר איזורים בתוכנה ובעזרת מספר כלים שלכל אחד יתרונות וחסרונות שונים. הכרת הכלים ואזורי העריכה תאפשר
עבודה יעילה יותר ותהפוך את יישום הצבעים ועריכתם לפעולה קלה ומהירה המשפיעה באופן מיידי ומהיר על העיצוב
שלכם.
באותו נושא
-
נכתב ע"י ג׳ניה אטין
כמות ההחלטות שאתם מקבלים ביום כנראה גדולה יותר ממה שנדמה לכם. בכל רגע בו אתם משתמשים בממשק דיגיטלי, נכנסים לאתר...27.08.2020 | כתב: ג׳ניה אטין -
נכתב ע"י אורי פלג
כנס ADOBE MAX שנערך לאחרונה הביא איתו מבול של עידכונים משמעותיים ביותר למעצבי הממשקים שבינינו. מעניין לבחון את המתח שנוצר...12.11.2019 | כתב: אורי פלג
-
נכתב ע"י מאיה פרי
בחירה בטיפוגרפיה הנכונה והמתאימה היא אחת המשימות החשובות בעבודתו של מעצב. פונט נכון יוצר איזון בין השפה המילולית לחזותית, עושה...04.09.2019 | כתב: מאיה פרי
כתבות נוספות שיכולות לעניין אותך:
-
נכתב ע"י אורי פלג
כאשר מצלמים סרט וידאו ממספר מצלמות בו-זמנית, נדרשת ׳עריכה מרובת מצלמות׳. בעידן בו לרובינו מצלמת וידאו בטלפון הנייד ומצלמות ״סטילס״...04.09.2019 | כתב: מאיה פרי -
נכתב ע"י מאיה פרי
הסטודיו לעיצוב חזותי של זגמייסטר & וולש בניו יורק עשיר בעבודות מרתקות. במאמר קצר זה נתמקד במספר עבודות העושות שימוש בטיפוגרפיה...04.09.2019 | כתב: מאיה פרי
-
נכתב ע"י אורי פלג
ציפורים הן לבטח מבעלי החיים היפים והמסקרנים ביותר בטבע – שלל צבעים, גדלים, מקורים והתנהגויות שמהוות אתגר עבור כל חובב...04.09.2019 | כתב: מאיה פרי
