PracticU

הסבר על Material Design

בלי כתוביותעם כתוביות
PracticU › קורס פיתוח אפליקציות - לאנדרואיד - Android - ב-JAVA › הסבר על Material Design
הסבר על Material Design
הסבר על Material Design מציג את מסמך העקרונות העיצוביים שפרסמה Google בשנת 2014 לעיצוב אפליקציות, ואת הדרך להשתמש בו בזמן התכנון.
השלבים העיקריים
1. המסמך: Material Design מתאר איך לעצב אפליקציה: רכיבים, צבעים, הצללות, אייקונים וכתיבה. העקרונות מבוססים על מחקר וניסיון של Google.
2. הצללות וגובה: הצללה מסמנת את גובה הרכיב מעל המשטח. הצללה שלא תואמת את הגובה נחשבת לשגויה.
3. צבעים: מומלץ לבחור צבע מרכזי לאפליקציה ולפצל אותו לגוונים משניים לפעולות שונות.
4. כתיבה: הטקסט צריך להיות קצר, ישיר ופשוט, ולהתמקד במשתמש ולא באפליקציה. לא מערבבים בתוך אותו משפט בין I, me או my לבין you או your.
5. מילות כפתורים: Done מסמנת סיום של תהליך רב שלבים, Cancel מבטלת פעולה, ו-Back חוזר לשלב הקודם.
6. דוגמאות: בכל מאמר יש דוגמאות של מה נכון לעשות ומה לא, בירוק ובאדום.
שימו לב
המרצה מציין שאחרי המסמך מופיעים רכיבים מעוצבים יותר, ועליהם ידובר בהרצאות הבאות.
בסיום ההרצאה הסטודנט יודע מה כולל מסמך Material Design, ואיך להשתמש בו כשמתכננים מסך.
השיעור הבא בקורס: Floating Action Button

פרקי ההרצאה: הסבר על Material Design

  1. 00:00

    ההיכרות עם מסמך Material Design

  2. 01:39

    כללי הצללה וגובה ברכיבים

  3. 02:58

    סטיילינג וצבעים באפליקציה

  4. 03:54

    כתיבה ברורה וקצרה בממשק

  5. 04:28

    מיקוד הטקסט במשתמש ולא באפליקציה

  6. 05:22

    ניסוח פשוט וישיר בהוראות

תמלול ההרצאה: הסבר על Material Design

הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Material Design» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

    ב-2014 גוגל פרסמו מסמך עקרונות עיצוביים שנקרא Material Design. המסמך הזה מדבר על איך נכון לעצב אפליקציה, איך נכון להגדיר את הרכיבים השונים באפליקציה, איך נכון לבחור צבעים לגבי האפליקציה, מה נכון ומה לא נכון לבצע עבור הרכיבים השונים שבאפליקציה, ובעצם כל מה שקשור לעולם

  2. 00:31

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

  3. 00:48

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

  4. 01:12

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

  5. 01:43

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

  6. 02:10

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

  7. 02:41

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

  8. 02:59

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

  9. 03:11

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

  10. 03:26

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

  11. 03:48

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

  12. 04:01

    ב-Writing אנחנו יכולים לראות עשה ואל תעשה בנוגע למה נכון לכתוב באפליקציה שלנו מבחינת הוראות, מבחינת לחצנים. Text should be simple, concise and direct.

  13. 04:14

    מתומצת, קצר וישיר. יש פה כל מיני דוגמאות ממש ממש מעניינות. לדוגמה, אסור להשתמש גם ב-Me או My ביחד עם You או Your באותו המשפט. הנה משפט שהוא לא נכון לשימוש change your preferences in my account שכנראה כאשר my account זה איזה שהוא שם עצם של החשבון של המשתמש אז יש פה your ו-my וזה לא נכון לפי ה-material design של גוגל כאן אנחנו רואים שהפוקוס צריך להיות על

  14. 04:48

    היוזר ולא עליכם כבוני האפליקציות או על האפליקציה עצמה לדוגמה משפט נכון יהיה get started with this popular post on Google+ ומשפט לא נכון יהיה to get you started we're showing you popular post on Google+ כמובן ההתמקדות היא עלינו במקום על היוזר בואו נמשיך פה למטה כאן אנחנו רואים לשמור על המשפטים

  15. 05:14

    והביטויים קצרים ועם מעט מאוד משמעויות ככל שניתן לדוגמה read the instructions that came with your phone במקום consult the documentation that came with your phone for further instructions or כל מיני דברים מורכבים כאלה.

  16. 05:34

    כאן אנחנו רואים שוב פעם use simple direct language that is easy for users to understand. Save changes הכי פשוט במקום would you like to save your changes.

  17. 05:47

    Send a message send במקום message has

לקורס המלא: קורס פיתוח אפליקציות לאנדרואיד

ההרצאה הקודמת: Google Maps - User Location

ההרצאה הבאה: Floating Action Button

הרצאות קשורות מקורסים אחרים

  • הסבר על Material UI
  • Page Object Design - חלק 1
  • פייטון design pattern factory

קורסים נוספים במסלול

  • קורס יסודות התכנות - שפת JAVA - קורס ג'אווה למתחילים
  • קורס פיתוח אפליקציות - לאייפון iPhone iOS - ב-Swift-Xcode
  • קורס פלאטר - Flutter - שפת DART של גוגל למובייל - פיתוח אפליקציות לאנדרואיד ואייפון
  • קורס PhoneGap - פיתוח אפליקציות לאנדרואיד ואייפון