Google-dan Material Design spesifikasiyası ilk olaraq platformada dizaynın konsentrasiyasını təklif etmək üçün Android platformasına yönəldilmişdir.
01 ilə 06
Adobe təcrübəsi Design CC-də Material Design Card yaratmaq
Dizaynerlər onun vasitəsilə düşünərək və düşüncələrini başa düşdükdən sonra Material Design veb və mobil dizaynda ən təsirli vizual fəlsəfələrdən birinə çevrildi. Nə etdiyimizi görmək Pinterestdə Material Design axtarışını etməkdir və siz cihazlar, tabletlər və hətta saytlarda yüzlərlə nümunə və təcrübəni görəcəksiniz.
Material Design'in maraqlı cəhəti Google-un mobil cihazlarda necə görünməsi və işləməsi barədə fikirləşməsidir, ancaq konsepsiyalar hər platforma istənilən ölçülü ekrana tətbiq olunur. Google, spesifikasiyanın açılış paraqrafında qeyd etdiyimiz kimi, "Biz innovativ və texnologiya və elm imkanları ilə yaxşı dizaynın klassik prinsiplərini sintez edən istifadəçilərimiz üçün vizual dil yaratmaq üçün özümüzə meydan oxuduq. Bu maddi dizayndır. Bu spesifik materiallar dizaynı və xüsusiyyətlərini inkişaf etdirməyə davam edərkən yenilənəcək bir canlı sənəddir. "
Çox ümumi baxımdan danışdığımız maddə kağızdır və materialı dizaynın əlaməti kartdır. Bir sütun üzərində bir endeks kartı düşünün və doğru yolda olursunuz. A kart şəkillər, videolar, mətn əlaqələri və s. Olan bir elementdir, lakin əksər interaktiv dizaynlardan fərqli olduğu bir məqamda odaklanılmalıdır. Kartlar guşələrindən yuvarlaqlaşmışdır, bir səthdən yuxarı olduqlarını bildirən zəif kölgələrə malikdirlər və bütün bunlar eyni təyyarədə "toplama" kimi istinad edilir.
Bu "Nasır" da spec üzərində bir kart yaratmaq niyyətindəyik. Kartı müxtəlif görüntüləmə və rəsm vasitələriylə yaratmaq əvəzinə biz başqa bir istiqamətə gələcəyik. Hal-hazırda Macintosh yalnız ictimai previewdə olan və pulsuzdir Adobe təcrübəsi Dizaynında olan vasitələrdən istifadə edəcəyik. Buradan indirebilirsiniz.
Gəlin başlayaq.
02-dən 06-dək
Adobe Təcrübə Dizaynı CC-də Prototip Dizaynı yaratmaq
Təcrübə Design CC (XD) başlanğıc ekranından bir Android ekranı yaratmaq üçün açıq bir yol yoxdur. XD'yi açdığımızda etdiyimiz şey, iPhone 6 seçimini seçmək və interfeys açıldığında Toolbar altındakı Satır aracı seçin və Properties panelindəki seçimlərdən sağa doğru Android Mobile seçin . Sonra seçmə vasitəsinə keçin, bir dəfə iPhone işarəsinin adına basın və işarəni silin. Xeyr.
XD'nin mövcud versiyasında, tıklandığında açılır menyunu açan iPhone 6'nın yanında kiçik bir ok var. Oradan Android Mobile versiyasını seçdiyinizdə və seçilmiş Android Mobile işarəsi interfeysdə açılır.
Kart üçün açıq ekrana sahib olduğumuzdan əmin olmaq üçün, ümumiyyətlə Sketch 3-ə baş çəkib, Status Bar, Nav Bar və App barını Malzeme Tasarım şablonundan iş yerine kopyalayıp yapıştırın. Sketch 3.2 Material Design şablonu ( Fayl> Yeni Şablondan Materiallar Dizaynı ) və başqa bir həqiqətən yaxşı olanı burada əldə edə biləcəyiniz Kyle Ledbetterdən ibarətdir. Sketchunuz yoxdursa, onları Fayl> Open UI Kit> Google Materialında olan XD etiketlərindən kopyalayıb yapışdıra bilərsiniz. Photoshop, Illustrator, After Effects və Sketch-dan istifadə etmək üçün onları Google-dan da yükləyə bilərsiniz.
03 ilə 06
Bir Adobe XD CC Dizelinə Material Design Card əlavə et
XD'nin ən faydalı xüsusiyyətlərindən biri, Apple iOS, Google Material və Microsoft Windows üçün UI Kitlərinin daxil olmasıdır. Bir çox cəhətdən, onlar "Sürətli" sözünü "Tez Prototip" terminə əlavə edirlər. Həm də bu UI elementlərində dizaynın işini asanlaşdırdıqları kimi, Photoshop, Illustrator və ya Sketch.
Biz lazım olan UI elementi bir kart idi. Buna nail olmaq üçün biz File> Open UI Kit> Google Materialını seçdik və kit yeni bir sənəd kimi açdıq. Bizə lazım olan element Kartlar kateqoriyasında tapıldı.
Bunları sevdiyimiz şey, Materiallar Dizaynı xüsusiyyətlərinə, məzmun bloklarının xüsusiyyətləri ilə yanaşı, Tipoqrafiya spesifikasiyasında göstərilən mətn formatlama və spacing xüsusiyyətlərinə uyğun olaraq uyğun gəlir.
İstədiyimiz kart üslubu sol altındakı bir idi. Biz sadəcə onu siçan ilə bəzəyəcəyik və onu panoya kopyaladık. Təəssüf ki, XD açıq sənədlər üçün sekmeli interfeys içermir. Nə etdiyimiz açıq sənəd pəncərəsini bir az aşağıya çəkirik, işlədiyimiz birini ortaya qoyur, seçin və yapışdırır. XD sənədlərinin açıq şəkildə açılmasının başqa bir yolu Command- 'düyməsinə basmaqdır .
06 04
Adobe Təcrübə Design CC-də Material Design Elementini necə təşkil etmək olar?
XD kartı panodan gəldikdə sadəcə işləməyə başlamayın. Sizə lazım olan ilk şey kartı yığışdırmaq üçün kartı hazırlayan bit və parçalara daxil olmaq lazımdır. Bunu etmək üçün kartı seçin və Object> Qrupu yığın və ya Shift-Command-G düyməsini basın.
Kartınız artıq üç hissədən ibarətdir:
- Şəkil üçün açıq boz rəngli qutu.
- Mətn üçün orta gri qutu
- Arxa arxa çərçivə olaraq istifadə edilir.
İlk addım açıq boz qutuyu silməkdir. Onun yeganə məqsədi, seçdiyiniz halda, isteğe bağlı olan bir görüntü üçün bir tutucu kimi çıxış etməkdir.
Mətnli qutu, həqiqətən,% 50 qeyri-şəffaflıq ilə qaranlıq bir boz. Bu qutu mətn fon kimi istifadə edilə bilər və rəng və qutunun opacity dəyişə bilərsiniz.
Dərhal aydın deyilsə də, açıq-boz rəngli qutu, üst hissələrin 2 piksel yuvarlaqlaşdırıldığı Material Design spesifikasiyasına uyğundur. Bir şəkil əlavə edərkən bunu yadda saxlayın. Ayrıca, bir görüntüleme proqramına və ya XD'ye əlavə edilə bilən yuvarlaq künclərə də ehtiyac duyacaq.
Bu kartın istirahət vəziyyəti necə olduğunu görən bir kölgəyə də ehtiyac var. Bu spec, 2 piksellik kartın istirahət zirvəsi olduğunu aydınlaşdırır. Bunu əlavə etmək üçün qara fon şəklində seçin və Y və B (Blur) dəyərlərini xüsusiyyətlər panelində 2-ə təyin edin.
05-dən 06-dək
Adobe XD CC-də Material Design Card-a şəkil əlavə etmək
Kartı bilmək 344 piksel geniş və görüntü sahəsi 150 piksel yüksəkdir ( açıq boz qutunun yarım yüksəkliyini ) Photoshop'ta təsvir açdıq, ölçüyə saldıq və Photoshopun İxrac Ası Qutu. Şəkil Adobe XD-ə idxal edilib.
Daha sonra, açıq karton qutu şəkli üzərinə sürüşdürdük və seçilmiş Obje> Maska ilə Şəklini çəkdik . Nəticədə şəklin yuvarlatılmış künclərini götürən görüntü idi. Daha sonra imicimizi son vəziyyətə keçirdik.
Yerdəki görüntü ilə Orta Gri qutunun fon rəngini dəyişdik, mətnin və mətnin rənginin dəyişdirildik.
06-dan 06-a
Adobe XD CC Grid xüsusiyyətindən istifadə
Kartın tamamlanması ilə artıq Material Design spesifikasına uyğun olaraq düzgün yerləşdirilməlidir. Bu kartın hər tərəfində 8 piksel var və kartın app barının altındakı 8 piksel olması lazımdır. Bunu etmək üçün, bir iş yeri adına bir dəfə basın və Properties panelində Grid seçin. Izgara işgəncənin üzərində görünür.
Standart dizayn ölçüsü Material Design üçün eyni grid ölçüsü olaraq baş verən 8 pikseldir. Farklı bir ölçüyə ehtiyac varsa, Grid sahəsində dəyər dəyişdirin. Izgaranın rəngini dəyişdirmək istəyirsinizsə, rəng çipini basın və yaranan rəng seçicisindən bir rəng seçin.
Şəffaf görünürsə, kartı basın və son vəziyyətinə keçin.
Bitirmək üçün kartı seçdik, Repeat Grid düyməsini tıkladık və kartları arasında olan aralığı da 8 piksel olaraq dəyişdik.