Google'dan Materyal Tasarım özelliği, platformda tasarımın tutarlılığını önermenin bir yolu olarak başlangıçta Android platformunu hedefliyordu.
06/06
Adobe Deneyim Tasarım CC'de Materyal Tasarım Kartı Nasıl Oluşturulur
Tasarımcılar bu fikirleri anlamaya ve arkasındaki düşünceyi anlamaya başladığında, Materyal Tasarımı sessizce web ve mobil tasarımda en etkili görsel felsefelerden biri haline geldi. Ne yaptığımızı görmek için yapmanız gereken tek şey, Pinterest'te Materyal Tasarımı araması yapmaktır. Cihazlarda, tabletlerde ve hatta web sitelerinde yüzlerce örnek ve deney göreceksiniz.
Materyal Tasarımı'nın büyüleyici yönü, Google'ın uygulamaların mobil cihazlarda nasıl görünmesi ve çalışması gerektiği konusunda düşünmesidir, ancak konseptler herhangi bir platformdaki herhangi bir boyuttaki herhangi bir ekrana uygulanmaktadır. Google, şartnamenin açılış paragrafında belirttiği gibi, “Kullanıcılarımıza, iyi tasarımın klasik ilkelerini, teknoloji ve bilimin inovasyonu ve olasılığı ile sentezleyen görsel bir dil yaratmaya itiraz ettik. Bu malzeme tasarımıdır. Bu özellik, materyal tasarımının ilkelerini ve özelliklerini geliştirmeye devam ettikçe güncellenecek olan canlı bir belgedir. ”
Çok genel anlamda konuşulan materyal kağıttır ve Materyal Tasarımı'nın bir işareti karttır. Bir yüzeye bir dizin kartı düşünün ve doğru yoldasınız. Bir kart, fotoğraf, video, metin bağlantısı vb. Içeren, ancak etkileşimli tasarımlardan farklılık gösterdiği bir unsurdur. Bunlar, tek bir konuya odaklanmaktır. Kartların yuvarlatılmış köşeleri vardır, bir yüzeyin üstünde olduklarını belirten soluk gölgeler içerirler ve hepsi aynı düzlemde ise “koleksiyon” olarak adlandırılır.
Bu “Nasıl Yapılır” da, spesifikasyonlara göre bir kart oluşturacağız. Kartı çeşitli görüntüleme ve çizim araçlarıyla oluşturmak yerine, farklı bir yönden geleceğiz. Adobe'nin Deneyim Tasarımında şu anda sadece Macintosh'un önizlemesinde olan ve ücretsiz olan araçları kullanacağız. Buradan indirebilirsiniz.
Başlayalım.
02/06
Adobe Experience Design CC'de Prototip Çalışma Yüzeyini Oluşturma
Deneyim Tasarımı CC'de (XD) Başlangıç Ekranından bir Android ekranı oluşturmanın belirgin bir yolu yoktur. XD'yi açtığımızda yaptığımız şey, iPhone 6 seçeneğini seçmektir ve arayüz açıldığında, Araç Çubuğunun alt kısmındaki Artboard aracını seçer ve Özellikler panelindeki seçimlerden Android Mobile'ı sağa doğru seçeriz. Daha sonra seçim aracına geçiyoruz, iPhone çalışma yüzeyinin adına bir kez tıklayın ve çalışma yüzeyini silin. Daha fazla yok.
XD'nin mevcut sürümünde, iPhone 6'nın yanında, tıklandığında açılan menüyü açan küçük bir ok bulunmaktadır. Buradan Android Mobile sürümünü seçtiniz ve seçilen Android Mobile çalışma yüzeyi arayüzde açılır.
Kart için uygun ekran boşluğuna sahip olduğumuzdan emin olmak için genellikle Sketch 3'e gidiyoruz ve Materyal Tasarımı Şablonu'ndan bir Durum Çubuğu, Nav Bar'ı ve Uygulama çubuğunu çalışma yüzeyine kopyalayıp yapıştırıyoruz. Çizim 3.2 bir Materyal Tasarım şablonu ( Dosya> Şablondan Yeni Materyal Tasarımı ) içerir ve bir başka gerçekten iyi olan bir tanesi de buradan elde edebileceğiniz Kyle Ledbetter. Sketch'iniz yoksa, bunları Dosya> Open UI Kit> Google Material'da bulunan XD etiketlerinden kopyalayıp yapıştırabilirsiniz. Bunları Photoshop, Illustrator, After Effects ve Sketch'de kullanmak üzere Google'dan da indirebilirsiniz.
03/06
Adobe XD CC Çalışma Yüzeyine Malzeme Tasarım Kartı Ekleme
XD'nin en kullanışlı özelliklerinden biri Apple iOS, Google Material ve Microsoft Windows için UI Kitlerinin eklenmesidir. Birçok açıdan “Hızlı Prototipleme” kelimesini “Hızlı Prototipleme” terimine eklerler.Ayrıca, tasarımcıların işini kolaylaştırmak, ortak UI elemanlarının Photoshop, Illustrator gibi bir Tasarım Uygulamasında sürekli olarak yeniden oluşturulması gerekmez. kroki.
İhtiyacımız olan UI öğesi bir karttı. Buna ulaşmak için Dosya> UI Kitini Aç> Google Materyal'i seçtik ve kit yeni bir belge olarak açıldı. İhtiyacımız olan öğe Kartları kategorisinde bulundu.
Bunları sevdiğimiz, İçerik Blokları özelliklerinde belirtilen Materyal Tasarım özelliklerine ve ayrıca Tipografi spesifikasyonlarında yer alan metin biçimlendirme ve boşluk özelliklerine bağlı kalmalarıdır.
İstediğimiz kart stili sol alt kısımdaydı. Sadece mouse'umuzla seçip panoya kopyaladık. Ne yazık ki, XD açık belgeler için sekmeli bir arayüz içermiyor. Yaptığımız, üzerinde çalıştığımız şeyi ortaya çıkarmak, yapıştırmak ve yapıştırmak için açık belge penceresini biraz aşağı çekmektir. Açık XD belgeleri arasında hızla geçiş yapmanın başka bir yolu da Command- 'tuşuna basmaktır .
04/06
Adobe Experience Design CC'de Materyal Tasarım Öğesi Nasıl Düzenlenir
XD'deki kart, panodan geldiğinde, onunla çalışmaya başlamamaktadır. Yapmanız gereken ilk şey kartın gruplarını ayırmaktır çünkü kartı ve parçayı oluşturan parçalara erişmeniz gerekir. Bunu yapmak için kartı seçin ve Nesne> Grubu kaldır'ı seçin veya Shift-Command-G tuşlarına basın.
Kartınız şu anda üç parçadan oluşmaktadır:
- Görüntü için açık gri kutu.
- Metin için orta gri kutu
- Arka kutu arka plan olarak kullanılır.
İlk adım açık gri kutuyu silmek. Tek amacı, eğer isterseniz, isteğe bağlı olarak onu yapan görüntü için bir yer tutucu görevi görmektir.
Metin içeren kutu aslında% 50 opaklığa sahip koyu gridir. Bu kutu metin arka planı olarak kullanılabilir ve rengi ve kutunun opaklığını değiştirebilirsiniz.
Açıkça görülmese de, açık gri kutu, Üst Köşeleri 2 piksele yuvarlatılmış olduğundan Malzeme Tasarımı özelliklerini izler. Bir görüntü ekliyorsanız bunu aklınızda bulundurun. Ayrıca bir görüntüleme uygulamasına veya XD'ye eklenebilen yuvarlatılmış köşelere de ihtiyaç duyacaktır.
Bunun kartın dinlenme durumu nasıl olduğunu görmek de bir gölgeye ihtiyaç duyar. Bu özellik, 2 pikselli kartın bir dinlenme yüksekliğinin olduğunu açıkça ortaya koymaktadır. Bunu eklemek için, siyah arka plan şeklini seçin ve özellikler panelinde Y ve B (Bulanıklık) değerlerini 2 olarak ayarlayın.
05/06
Adobe XD CC'de Materyal Tasarım Kartına Görüntü Ekleme
Kartın bilinmesi 344 piksel genişliğinde ve görüntü alanı 150 piksel yüksekliğinde (açık gri kutunun yüksekliğinin yarısı ) Fotoğrafı Photoshop'ta açtık, onu kırptık ve Photoshop'un Farklı Gönder iletişim kutusundaki @ 2x seçeneğini kullanarak kaydettik. Kutu. Görüntü Adobe XD'ye alındı.
Daha sonra, açık gri kutuyu, panodaki görüntü üzerinde sürükledik ve Nesne> Şekil İle Maske'yi seçtik. Sonuç, şeklin yuvarlak köşelerini toplayan görüntüydi. Daha sonra görüntüyü son konumuna taşıdık.
Görüntü yerinde iken, daha sonra Orta gri kutusunun arka plan rengini değiştirdik, metni ve link metninin rengini değiştirdik.
06/06
Adobe XD CC Izgara Özelliğini Kullanma
Kart tamamlandığında şimdi Malzeme Tasarımı özelliklerine göre uygun bir şekilde yerleştirilmelidir. Bu, kartın her iki tarafında 8 piksel bulunduğunu ve kartın uygulama çubuğunun 8 pikselin altında olması gerektiği anlamına gelir. Bunu yapmak için, çalışma yüzeyinde bir kez tıklayın ve Özellikler Panelinde Kılavuz'u seçin. Izgara çalışma yüzeyinde görünür.
Varsayılan ızgara boyutu, Materyal Tasarımı için aynı ızgara boyutu olan 8 pikseldir. Farklı bir boyuta ihtiyacınız varsa, Izgara alanındaki değeri değiştirin. Kılavuzun rengini değiştirmek isterseniz, renk yongasını tıklayın ve sonuçtaki Renk Seçici'den bir renk seçin.
Izgara görünür olduğunda, karta tıklayın ve son konumuna getirin.
Bitirmek için, kartı seçtik, Tekrarlama Izgarası düğmesine tıkladık ve kartlar arasındaki boşluğu 8 piksel olarak değiştirdik.