Menu
exm menu

 

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

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

על המחשת רספונסיביות ב-XD

אורי פלג 11.10.18
על המחשת רספונסיביות ב-XD

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

רספונסיביות?!?

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

פינת התובנות
תובנה #1 - לכל אלמנט יש התנהגות במעבר בין גדלי מסך, עלינו להחליט מהי ולהגדיר אותה.
תובנה #2 - ברספונסיביות ניתן לקבוע החלטה קיצונית יותר של אלמנטים, כמו שינוי צורה\מיקום\מופע, חשוב לזכור שהתוכנה לא תחליט עבורכם קביעות אלה.

שינוי גודל רספונסיבי

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

RESPONSIVE RESIZE

עם הפעלת המפסק האפשרות להתאמה רספונסיבית של המימדים כוללת שני מצבים אפשריים, אוטומטית (Auto) או ידנית (Manual). במצב האוטומטי XD מחשבת את יחס המרחק והמיקום של אלמנט (או קבוצת אלמנטים) לאחרים שסביבו ומגדירה את ההתנהגות באופן, נואוטומטי, כך שאותם אלמנטים יגיבו בשינוי גודלם ומיקומם בצורה עצמאית שנסמכת על המיקום המקורי שלהם והיחס שלהם לאלמנטים אחרים הנמצאים סביבם.
המצב הידני מאפשר שליטה מירבית באופן בו ניתן להגדיר לכל אלמנט אתחוקיההצמדות ושינוי גודל ו\או מיקום. באפשרות הידנית אנו בעצם מגדירים שני מאפיינים עיקריים, הראשון הוא הגדרת גודל האלמנט ביחס לשינוי רוחב, או גובה המסך והשני הוא הגדרת היחס שבין אלמנט לגבולות המסך ומיקומו, לצד שינוי רוחב או גובה המסך המציג. כדי להפעיל אפשרויות אלו ראשית יש לבחור אלמנט ולאחר מכן להגדיר את ההתנהגות המצופה.
Fix Width - כאשר הכפתור לחוץ (יוצג בצבע כחול) יוגדר שהרוחב של האובייקט לא משתנה עם שינוי רוחב המסך. Fix Height - כאשר הכפתור לחוץ (יוצג בצבע כחול) יוגדר שגובה האובייקט לא משתנה עם שינוי גובה המסך.
משמאל לשתי אפשרויות אלוניתן למצוא ריבוע המציג 4 כפתורים (’ארבעה כיווני אוויר‘) שמגדירים את המרחק הקבוע של האובייקט מכל אחד מקצוות המסך.
אם נרצה למשל שהכפתור שלנו יגדל לרוחב, ישמור על גובה קבוע ויישאר במקומו היחסי במסך נגדיר ככה: 

RESPONSIVE RESIZE 2

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

RESPONSIVE RESIZE 3




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

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





פינת התובנות

תובנה #3 - כדאי להתחיל לתת לתוכנה להציע התנהגות רספונסיבית אוטומטית ולתקן היכן שישנן סטיות ואי דיוקים, הניסיון מלמד שברוב מוחלט של המקרים הקביעה האוטומטית עושה עבודה מצויינת.
תובנה #4 - כדאי תמיד לעבוד על שכפול של משטח עבודה ולא ישירות על משטח העבודה המקורי, הסיבה לכך נעוצה בעובדה שאין למשטח העבודה גודל הקבוע בברירת המחדל המאפשר לחזור אליו בקלות. משמע- תמיד לשכפל!

לסיכום

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



 

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

-

שלח לחבר

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

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

המכללה ממוקמת במתחם הבורסה ברמת גן סמוך ליציאה מתחנת רכבת ת"א מרכז (סבידור).
  • כתובת: ז'בוטינסקי 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 או השאירו פרטים ונחזור אליכם בהקדם.

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