מפרט העיצוב של החומר מ- Google נועד במקור לפלטפורמת Android כדרך להציע עקביות של עיצוב בפלטפורמה.
01 of 06כיצד ליצור כרטיס עיצוב חומר ב Adobe חוויית עיצוב
לאחר מעצבים התחיל לדפדף בו ולהבין את החשיבה שמאחוריו, עיצוב חומר יש בשקט להיות אחד הפילוסופים החזותיים המשפיעים ביותר בעיצוב אינטרנט ונייד. כל מה שאתה צריך לעשות כדי לראות מה אנחנו מקבלים הוא לעשות חומר עיצוב חיפוש על Pinterest ואתה תראה מאות דוגמאות וניסויים על מכשירים, טבליות, ואפילו אתרי אינטרנט.
היבט מרתק של עיצוב חומר זה לחשוב על גוגל סביב איך יישומים צריכים להופיע ולעבוד על מכשירים ניידים, אבל המושגים מוחלים על כל מסך בכל גודל על כל פלטפורמה. כפי שמציינת גוגל בפסקה הפותחת של המפרט, "אנו קראנו לעצמנו ליצור שפה חזותית עבור המשתמשים שלנו אשר מסנתזת את העקרונות הקלאסיים של עיצוב טוב עם החדשנות והאפשרות של הטכנולוגיה והמדע. זהו עיצוב חומר. מפרט זה הוא מסמך חי שיעודכן תוך שאנו ממשיכים לפתח את העקרונות ואת הפרטים של עיצוב החומר. "
החומר דיבר, במונחים כלליים מאוד, הוא נייר סימן ההיכר של עיצוב חומרים הוא הכרטיס. תחשוב על כרטיס אינדקס על פני השטח ואתה על המסלול הנכון. כרטיס הוא רכיב המכיל תמונות, קטעי וידאו, קישורי טקסט וכן הלאה, אבל במקום שבו הם שונים מ עיצובים אינטראקטיביים ביותר הם נועדו להתמקד בנושא אחד. כרטיסים יש פינות מעוגלות, להכיל צללים חלש המציין שהם מעל פני השטח ואם הם כולם על אותו מטוס הם מכונים "אוסף".
ב "איך" אנחנו הולכים ליצור כרטיס מבוסס על המפרט. במקום ליצור את הכרטיס עם מגוון רחב של כלים הדמיה וציור, אנחנו הולכים לבוא על זה מכיוון אחר. אנחנו הולכים להשתמש בכלים Adobe של ניסיון עיצוב אשר נמצא כרגע ב- Macintosh בלבד תצוגה מקדימה הציבור בחינם. ניתן להוריד אותו כאן.
בואו נתחיל.
02 מתוך 06יצירת אב טיפוס אב טיפוס ב Adobe חוויית עיצוב CC
אין דרך ברורה ליצור מסך אנדרואיד ממסך הפתיחה בתכנון חוויית CC (XD). מה שנהגנו לעשות כאשר אנו פותחים את XD, הוא לבחור את אפשרות ה- iPhone 6 וכאשר הממשק נפתח, אנו בוחרים את הכלי 'משטח יצירה' בתחתית סרגל הכלים ובחר Android Mobile מהבחירות בחלונית 'מאפיינים' מימין. לאחר מכן אנו עוברים לכלי הבחירה, לחצו פעם אחת על שם משטח האייפון ומחקים את משטח היצירה. לא עוד.
בגירסה הנוכחית של XD, יש חץ קטן ליד iPhone 6 אשר, כאשר לוחצים, פותח תפריט נפתח. משם תבחר את גרסת Android Mobile, ומשטח היצירה של Android לנייד ייפתח בממשק.
כדי לוודא שיש לנו את שטח המסך הנכון פתוח עבור הכרטיס, אנחנו בדרך כלל ראש מעל סקיצה 3 להעתיק ולהדביק שורת מצב, סרגל בר, App בר תבנית חומר עיצוב לתוך משטח היצירה. סקיצה 3.2 מכיל תבנית עיצוב חומר (קובץ> תבנית חדשה> עיצוב חומר) ועוד אחד טוב חינם הוא מן קייל Ledbetter שבו אתה יכול להשיג כאן. אם אין לך סקיצה, אתה יכול להעתיק ולהדביק אותם מדבקות XD נמצא קובץ> פתח ערכת ממשק משתמש> חומר של Google. אתה יכול גם להוריד אותם מ- Google לשימוש Photoshop, Illustrator, After Effects ו סקיצה.
03 מתוך 06הוספת כרטיס עיצוב חומר ל- Adobe XD CC Artboard
אחד המאפיינים השימושיים ביותר של XD הוא הכללה של ערכות ממשק משתמש עבור Apple iOS, חומר Google ו- Microsoft Windows. במובנים רבים, הם מוסיפים את המילה "Rapid" למונח "Rapid Prototyping", כמו כן הם עושים את העבודה של המעצב קל יותר, כי אלמנטים משותפים ממשק המשתמש לא צריך להיות מחדש באופן קבוע ביישום עיצוב כגון Photoshop, Illustrator או סקיצה.
אלמנט ה- UI שהיינו צריכים הוא כרטיס. כדי להגיע אליו בחרנו קובץ> פתח ערכת ממשק משתמש> חומר של Google והערכה נפתחה כמסמך חדש. האלמנט שהיינו צריכים נמצא בקטגוריה כרטיסים.
מה שאנחנו אוהבים על אלה הם לדבוק מפרט חומרים עיצוב כפי שנקבע את מפרט בלוקים תוכן כמו גם את עיצוב הטקסט ואת המרווחים מפרט הניח מפרט טיפוגרפיה.
סגנון הכרטיס שרצינו היה זה שבצד שמאל למטה. אנחנו פשוט לסמן את זה עם העכבר שלנו להעתיק אותו ללוח. למרבה הצער, XD אינו מכיל ממשק לשוניות עבור מסמכים פתוחים. מה שאנחנו עושים זה להזיז את חלון המסמך הפתוח קצת כדי לחשוף את אחד אנחנו עובדים על, לבחור אותו ולהדביק. דרך נוספת לעבור במהירות בין מסמכים XD פתוח היא הקש Command- '.
04 מתוך 06כיצד לערוך אלמנט עיצוב גשמי בחוויית Adobe Design CC
כאשר כרטיס XD מגיע מלוח לא להתחיל לעבוד בשמחה עם זה. הדבר הראשון שאתה צריך לעשות היא לפצל את הכרטיס כי אתה צריך גישה קצת חתיכות להלחין את הכרטיס. לשם כך, בחר את הכרטיס ו בחר 'אובייקט'> 'התנתקות' או הקש Shift-Command-G.
הכרטיס שלך מורכב כעת משלושה חלקים:
- תיבת אפור בהיר עבור התמונה.
- תיבה אפורה בינונית עבור הטקסט
- התיבה האחורית שימשה כרקע.
הצעד הראשון הוא למחוק את תיבת אפור בהיר. מטרתו היחידה היא לפעול כמציין מיקום עבור התמונה אשר עושה את זה, אם תבחר, אופציונלי.
תיבת עם הטקסט הוא למעשה אפור כהה עם אטימות 50%. תיבה זו יכולה לשמש רקע הטקסט ואתה יכול לשנות את הצבע ואת האטימות של תיבת.
למרות שזה לא ניכרת מיד, תיבת אור אפור כדלקמן מפרט חומרים עיצוב כי פינות העליון שלה מעוגלות על ידי 2 פיקסלים. זכור זאת אם אתה מוסיף תמונה. זה יהיה גם צריך את פינות מעוגלות אשר ניתן להוסיף יישום הדמיה או XD.
לראות איך זה מצב מנוחה של הכרטיס זה גם צריך צל. המפרט מבהיר שיש גובה מנוחה של הכרטיס של 2 פיקסלים. כדי להוסיף זאת, בחר את צורת הרקע השחור והגדר את ערכי Y ו- B (Blur) ל- 2 בחלונית המאפיינים.
05 מתוך 06כיצד להוסיף תמונה על כרטיס עיצוב חומר ב Adobe XD CC
לדעת את הכרטיס הוא 344 פיקסלים רחב שטח התמונה הוא 150 פיקסלים גבוה ( חצי גובה של תיבת אפור בהיר ) פתחנו את התמונה ב Photoshop, קצוץ אותו לגודל ושמר אותו באמצעות אפשרות 2x ב Photoshop ייצוא כ תיבת דיאלוג. התמונה תובא לתוך Adobe XD.
לאחר מכן גררנו את תיבת האור האפור מעל התמונה על לוח הקרטון ונבחרנו אובייקט> מסכה עם צורה. התוצאה היתה הדימוי שאסף את הפינות המעוגלות של הצורה. לאחר מכן העברנו את התמונה למצב הסופי שלה.
עם התמונה במקום, אז שינינו את צבע הרקע של התיבה אפור בינוני, שינו את הטקסט ואת הצבע של טקסט הקישור.
06 מתוך 06באמצעות Adobe XD CC רשת תכונה
עם כרטיס להשלים את זה עכשיו צריך להיות ממוקם כראוי על פי מפרט חומר עיצוב. פירוש הדבר שיש 8 פיקסלים משני צידי הכרטיס ואת הכרטיס צריך להיות 8 פיקסלים מתחת לסרגל היישום. לשם כך, לחץ פעם אחת על שם משטח היצירה ובחר, בלוח מאפיינים, בחר רשת. הרשת מופיעה מעל משטח היצירה.
גודל ברירת המחדל של הרשת הוא 8 פיקסלים אשר במקרה להיות גודל הרשת אותו חומר Design.If אתה צריך גודל אחר, לשנות את הערך באזור הרשת. אם ברצונך לשנות את צבע הרשת, לחץ על שבב הצבעים ובחר צבע מהבורר המתקבל.
עם הרשת גלוי, לחץ על הכרטיס והעבר אותו למצב הסופי שלה.
לסיום, בחרנו את הכרטיס, לחץ על הלחצן 'חזור על רשת' ושינינו את המרווח בין הקלפים ל -8 פיקסלים גם כן.
