דער מאַטעריאַל פּלאַן ספּעסיפיקאַטיאָן פון Google איז געווען אָריגינעללי דיזיינד אויף די אַנדרויד פּלאַטפאָרמע ווי אַ וועג צו רעקאָמענדירן קאָנסיסטענסי פּלאַן אויף די פּלאַטפאָרמע.
01 פון 06
ווי צו שאַפֿן אַ מאַטעריאַל דיזיין קאַרד אין Adobe Experience Design CC
אַמאָל דיזיינערז סטאַרטעד פּאָוקינג דורך אים און פארשטאנד די טראכטן הינטער עס, מאַטעריאַל דיזיין האט שטיל ווערן איינער פון די מערסט ינפלוענטשאַל וויסואַל פילאָסאָפיעס אין וועב און רירעוודיק פּלאַן . אַלע איר דאַרפֿן צו טאָן צו זען וואָס מיר זענען געטינג בייַ איז צו טאָן אַ מאַטעריאַל דיזיין זוכן אויף פּינטערעסט און איר וועט זען הונדערטער פון ביישפילן און יקספּעראַמאַנץ אויף דעוויסעס, טאַבלאַץ, און אפילו וועבסיטעס.
דער פאַסאַנייטינג אַספּעקט פון מאַטעריאַל דיזיין איז גוגל 'ס טראכטן אַרום ווי אַפּפּס זאָל דערשייַנען און אַרבעט אויף רירעוודיק דעוויסעס אָבער די קאַנסעפּס זענען געווענדט צו קיין פאַרשטעלן פון קיין גרייס אויף קיין פּלאַטפאָרמע. ווי גוגל שטייט אין דער עפנטליכע פּאַראַגראַף פון דער באַשרייַבונג, "מיר האָבן זיך אויסגעפירט צו שאַפֿן אַ וויזשאַוואַל שפּראַך פֿאַר אונדזער ניצערס וואָס סינטעזיז די קלאַסיש פּרינציפּן פון גוט פּלאַן מיט די כידעש און מעגלעכקייט פון טעכנאָלאָגיע און וויסנשאַפֿט. דאס איז מאַטעריאַל פּלאַן. דאס ספּעק איז אַ לעבעדיק דאָקומענט וואָס וועט זיין דערהייַנטיקט ווי מיר פאָרזעצן צו אַנטוויקלען די טענעץ און ספּיסיפיקס פון מאַטעריאַל פּלאַן. "
דער מאַטעריאַל רעדט וועגן, אין זייער אַלגעמיין טערמינען, איז פּאַפּיר און אַ כאַלמאַרק פון מאַטעריאַל דיזיין איז די קאָרט. טראַכטן פון אַן אינדעקס קאָרט אויף אַ ייבערפלאַך און איר זענען אויף די רעכט שפּור. א קאָרט איז אַן עלעמענט מיט פאָטאָס, ווידיאס, טעקסט לינקס און אַזוי אויף אָבער ווו זיי אַנדערש פון רובֿ ינטעראַקטיוו דיזיינז, זיי זענען מענט צו פאָקוס אויף אַ איין טעמע. קאַרדס האָבן ראַונדיד עקן, אַנטהאַלטן פיינט שאַדאָוז ינדאַקייטינג זיי זענען אויבן אַ ייבערפלאַך און אויב זיי זענען אַלע אויף דער זעלביקער פלאַך זיי זענען ריפערד צו ווי אַ "זאַמלונג".
אין דעם "ווי צו" מיר זענען געגאנגען צו שאַפֿן אַ קאָרט באזירט אויף די ספּעק. אלא ווי צו מאַכן די קאָרט מיט אַ פאַרשיידנקייַט פון בילדזינג און צייכענונג מכשירים, מיר וועלן קומען אין אַ אַנדערש ריכטונג. מיר נוצן די מכשירים אין Adobe's Experience Design וואָס איז דערווייַל אין אַ מאַסינטאָש-בלויז ציבור פאָרויסיקע ווייַזונג און איז פֿרייַ. איר קענען אראפקאפיע עס דאָ.
לאמיר אנהייבען.
02 פון 06
שאפן די פּראָטאָטיפּע אַרטבאָאַרד אין Adobe Experience Design CC
עס איז קיין קענטיק וועג צו שאַפֿן אַ אַנדרויד פאַרשטעלן פון די אָנהייב סקרין אין דערפאַרונג פּלאַן קק (קסד). וואָס מיר האָבן צו טאָן ווען איר עפענען קסד, איז צו אויסקלייַבן די יפאָנע 6 אָפּציע, און אויב די צובינד עפענען, אויסקלייַבן די אַרטבאָאָק געצייַג בייַ די דנאָ פון די Toolbar און אויסקלייַבן אַנדרויד מאָביל פון די סעלעקשאַנז אויף די פּראָפּערטיעס טאַפליע צו די רעכט. דעמאָלט מיר יבערקוקן איבער די סעלעקציע געצייַג, דריקט אַמאָל אויף די יפאָנע אַרטבאָרד ס נאָמען און ויסמעקן די אַרטבאָרד. נישט מער.
אין דעם קראַנט ווערסיע פון קסד, עס איז אַ קליין פייַל בייַ די יפאָנע 6 וואָס, ווען קליקט, עפענען אַ פאַל-אַראָפּ מעניו. פון דארט איר אויסקלייַבן די אַנדרויד מאָביל ווערסיע און די אַנדרויד מאָביל אַרטבאָאָק אויסגעקליבן עפענען אין די צובינד.
צו ענשור מיר האָבן די רעכט פאַרשטעלן פּלאַץ עפענען פֿאַר די קאָרט, מיר יוזשאַוואַלי קאָפּע צו סקעטש 3 און קאָפּיע און פּאַפּ אַ סטאַטוס באַר, נאַוו בר, און אַפּ באַר פון די מאַטעריאַל פּלאַן טעמפּלאַטע אין די אַרטבאָרד. סקעטש 3.2 כּולל אַ מאַטעריאַל דיזיין טעמפּלאַטע ( טעקע> New פון מוסטער> מאַטעריאַל פּלאַן ) און אנדערן טאַקע גוט פֿרייַ איינער איז פון קייל לעבעדבעטער וואָס איר קענען באַקומען דאָ. אויב איר טאָן ניט האָבן סקעטש, איר קענען צייכענען און פּאַפּ זיי פון די קסד סטיקערז געפונען אין טעקע> Open וי קיט> Google מאַטעריאַל . איר קענען אויך אראפקאפיע זיי פון Google פֿאַר נוצן אין פאָטאָשאָפּ, יללוסטראַטאָר, נאָך עפפעקץ און סקעטש.
03 פון 06
אַדדינג אַ מאַטעריאַל פּלאַן קאַרד צו אַ אַדאָובי קסד קק אַרטבאָאַרד
איינער פון די מערסט נוציק פֿעיִקייטן פון קסד איז די ינקלוזשאַן פון וי קיץ פֿאַר עפּל יאָס, גוגל מאַטעריאַל, און מיקראָסאָפט ווינדאָוז. אין פילע שייכות, זיי לייגן דעם וואָרט "ראַפּיד" צו דער טערמין "ראַפּיד פּראָטאָטיפּינג." ווי געזונט, זיי מאַכן די דיזיינער דיזיינער גרינגער אין אַז פּראָסט וי עלעמענטן טאָן ניט האָבן צו קעסיידער ריקריייטיד אין אַ פּלאַן אַפּלאַקיישאַן אַזאַ ווי פאָטאָשאָפּ, יללוסטראַטאָר אָדער סקיצע.
די וי עלעמענט וואָס מיר דאַרפֿן איז געווען אַ קאָרט. צו באַקומען צו עס מיר אויסגעקליבן טעקע> Open וי קיט> Google מאַטעריאַל און דער קיט געעפנט ווי אַ נייַע דאָקומענט. די עלעמענט מיר דארף איז געווען געפונען אין די קאַרדס קאַטעגאָריע.
וואָס מיר ליבע וועגן די איז זיי אַדכיר צו די מאַטעריאַל פּלאַן ספּעסיפיקאַטיאָן ווי געלייגט אויס אין די אינהאַלט בלאַקס ספּעקס ווי געזונט ווי די טעקסט פאָרמאַטטינג און ספּייסינג ספּעקס געלייגט אויס אין די טיפּאָגראַפי ספּעק.
דער קאָרט נוסח מיר געוואלט איז די איין אין די דנאָ לינקס. מיר פשוט צייכן עס מיט אונדזער מויז און קאַפּיד עס צו די קליפּבאָרד. צום באַדויערן, קסד טוט נישט אַנטהאַלטן אַ טאַבבעד צובינד פֿאַר עפענען דאָקומענטן. וואָס מיר טאָן איז מאַך די עפענען דאָקומענט פֿענצטער אַראָפּ אַ ביסל צו אַנטדעקן דעם איינער מיר זענען ארבעטן אויף, אויסקלייַבן עס און פּאַפּ. אן אנדער וועג פון געשווינד סוויטשינג צווישן עפענען קסד דאָקומענטן איז צו דריקן קאַמאַנד-' .
04 פון 06
ווי צו רעדאַגירן אַ מאַטעריאַל דיזיין עלעמענט אין Adobe Experience Design CC
ווען די קאָרט אין קסד קומט פון די קליפּבאָרד טאָן ניט מער אָנהייבן צו אַרבעטן מיט אים. דער ערשטער זאַך איר דאַרפֿן צו טאָן איז צו ונגראָופּ די קאָרט ווייַל איר דאַרפֿן צוטריט צו די ביסל און ברעקלעך קאַמפּאָוזינג די קאָרט. צו טאָן דאָס, אויסקלייַבן די קאָרט און אויסקלייַבן אָבדזשעקט> ונגראָופּ אָדער דריקן Shift-Command-G.
דיין קאָרט איז איצט פארלאנגט פון דרייַ ברעקלעך:
- ליכט גרוי קעסטל פֿאַר די בילד.
- מיטל גרוי קעסטל פֿאַר די טעקסט
- דער צוריק קעסטל געניצט ווי דער הינטערגרונט.
דער ערשטער שריט איז צו ויסמעקן די ליכט גרוי קעסטל. זייַן בלויז ציל איז צו שפּילן ווי אַ אָרטהאָלדער פֿאַר די בילד וואָס מאכט עס, אויב איר קלייַבן, אַפּשאַנאַל.
דער קעסטל מיט דעם טעקסט איז פאקטיש אַ פינצטער גרוי מיט 50% אָופּאַסאַטי. דעם קעסטל קענען זיין געניצט ווי די טעקסט הינטערגרונט און איר קענען טוישן די קאָליר און די קעסטל ס אָופּאַסאַטי.
כאָטש עס איז ניט מיד קלאָר ווי דער טאָג, די ליכט גרוי קעסטל גייט די מאַטעריאַל פּלאַן ספּעק אין אַז זייַן שפּיץ עקן זענען ראַונדיד דורך 2 פּיקסעלס. האַלטן דאָס אין גייַסט אויב איר לייגט אַ בילד. עס וועט אויך דאַרפֿן די ראַונדיד עקן וואָס קענען זיין מוסיף צו אַ ימידזשינג אַפּלאַקיישאַן אָדער אין קסד.
זען ווי ווי דאָס איז די רעסטינג שטאַט פון די קאָרט עס אויך דאַרף אַ שאָטן. די ספּעק מאכט עס קלאָר עס איז אַ רעסטינג הייך פון די קאָרט פון 2 בילדצעלן. צו לייגן דעם, סעלעקטירן די שוואַרץ הינטערגרונט פאָרעם און שטעלן די י און ב (בלער) וואַלועס צו 2 אין די פּראָפּערטיעס טאַפליע.
05 פון 06
ווי צו לייגן אַ בילד צו די מאַטעריאַל דיזיין קאַרד אין Adobe XD CC
ווייל די קאָרט איז 344 פּיקסעלס ברייט און די בילד געגנט איז 150 בילדצעלן הויך ( העלפט די הייך פון די ליכט גרוי קעסטל ) מיר געעפנט די בילד אין פאָטאָשאָפּ, קראַפּט עס צו די גרייס און געראטעוועט עס ניצן די @ 2x אָפּציע אין פאָטאָשאָפּ ס עקספּאָרט ווי דיאַלאָג box. דער בילד איז ימפּאָרטיד אין Adobe XD.
מיר דעמאָלט דראַגד די ליכט גרוי קעסטל איבער די בילד אויף די פּאַסטבאָאַרד און אויסגעקליבן אָבדזשעקט> מאַסקע מיט פאָרעם . דער רעזולטאַט איז די בילד פּיקינג אַרויף די ראַונדיד עקן פון די פאָרעם. מיר דעמאָלט אריבערגעפארן די בילד צו זייַן לעצט שטעלע.
מיט די בילד אין אָרט, מיר דעמאָלט געביטן די הינטערגרונט קאָליר פון די מיטל גרוי קעסטל, געביטן דעם טעקסט און די קאָליר פון די לינק טעקסט.
06 פון 06
ניצן די Adobe XD CC Grid Feature
מיט דעם קאָרט פאַרענדיקן עס איצט דאַרף צו זיין רעכט געשטעלט לויט די Material Design spec. דעם מיטל עס זענען 8 בילדצעלן אויף יעדער זייַט פון די קאָרט און די קאָרט דאַרף צו זיין 8 בילדצעלן אונטער די אַפּ באַר. צו טאָן דאָס, גיט אַמאָל אַרייַן די אַרבאָרד נאָמען, און אין די Properties Panel, אויסקלייַבן גריד. די גריד איז איבער די אַרטבאָרד.
די פעליקייַט גריד גרייס איז 8 פּיקסעלס וואָס פּאַסירן צו זיין די זעלבע גריד גרייס פֿאַר מאַטעריאַל דיזיין. אויב איר דאַרפֿן אַ אַנדערש גרייס, טוישן די ווערט אין די גריד געגנט. אויב איר ווילן צו טוישן די קאָליר פון די גריד, גיט די קאָלירן שפּאָן און קלייַבן אַ קאָליר פון די ריזאַלטינג קאָליר פּיקקער.
מיט די גראָב קענטיק, גיט אויף די קאָרט און מאַך עס אין זייַן לעצט שטעלע.
צו ענדיקן, מיר אויסגעקליבן די קאָרט, קליקט די איבערחזרן גריד קנעפּל און געביטן די ספּייסינג צווישן די קאַרדס צו 8 בילדצעלן.