Materyal Tasarım Kartı Oluşturmak için Adobe Experience Design CC’yi kullanın

Google’ın Materyal Tasarımı spesifikasyonu, başlangıçta Android platformunu, platformda bir tasarım tutarlılığı önermenin bir yolu olarak hedefliyordu. Tasarımcılar bunu incelemeye ve arkasındaki düşünceyi anlamaya başladığında, Materyal Tasarımı sessizce web ve mobil tasarımdaki en etkili görsel felsefelerden biri haline geldi. Neye ulaştığımızı görmek için yapmanız gereken tek şey, Pinterest’te Materyal Tasarım araştırması yapmak ve 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 üzerine düşünmesi, ancak kavramların herhangi bir platformda herhangi bir boyuttaki herhangi bir ekrana uygulanmasıdır. Google’ın şartnamenin açılış paragrafında belirttiği gibi, “Kullanıcılarımız için iyi tasarımın klasik ilkelerini, teknoloji ve bilimin yenilik ve olasılığı ile sentezleyen bir görsel dil yaratmak için kendimize meydan okuduk. Bu malzeme tasarımıdır. Bu özellik, malzeme tasarımının ilkelerini ve özelliklerini geliştirmeye devam ettikçe güncellenecek canlı bir belgedir.” Bahsedilen malzeme, çok genel anlamda kağıttır ve Materyal Tasarımının ayırt edici özelliği karttır. Bir yüzeyde bir dizin kartı düşünün ve doğru yoldasınız. Kart, fotoğraflar, videolar, metin bağlantıları vb. içeren bir öğedir, ancak çoğu etkileşimli tasarımdan farklı olarak tek bir konuya odaklanmaları amaçlanır. Kartların köşeleri yuvarlatılmıştır, bir yüzeyin üzerinde olduklarını gösteren soluk gölgeler içerirler ve hepsi aynı düzlemdeyse “koleksiyon” olarak adlandırılır. Bu “Nasıl Yapılır” da, spesifikasyona dayalı bir kart oluşturacağız. Kartı çeşitli görüntüleme ve çizim araçlarıyla oluşturmak yerine, ona farklı bir yönden geleceğiz. Şu anda yalnızca Macintosh için genel bir önizlemede olan ve ücretsiz olan Adobe’nin Deneyim Tasarımındaki araçları kullanacağız. Buradan indirebilirsiniz. Başlayalım.

Adobe Experience Design CC’de Prototip Çalışma Yüzeyini Oluşturma

Experience Design 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çmek ve arayüz açıldığında, Çalışma yüzeyi aracı alt kısmında araç çubuğu ve seçin Android Mobil Sağdaki Özellikler panelindeki seçimlerden. Ardından seçim aracına geçiyoruz, bir kez tıklayın iPhone çalışma yüzeyinin adı ve çalışma yüzeyini silin. XD’nin şu anki sürümünde, iPhone 6’nın yanında tıklandığında bir açılır menüyü açan küçük bir ok var. Oradan seçin Android Mobil sürümü ve seçilen Android Mobile çalışma yüzeyi arayüzde açılır. Kart için uygun ekran alanına sahip olduğumuzdan emin olmak için genellikle Sketch 3’e gideriz ve Materyal Tasarım Şablonundan bir Durum Çubuğu, Gezinme Çubuğu ve Uygulama çubuğunu kopyalayıp çalışma yüzeyine yapıştırırız. Sketch 3.2 bir Materyal Tasarım şablonu içerir (Dosya > Şablondan Yeni > Malzeme Tasarımı) ve bir başka gerçekten iyi ücretsiz olanı da buradan edinebileceğiniz Kyle Ledbetter’den. Sketch’iniz yoksa, bunları şurada bulunan XD etiketlerinden kopyalayıp yapıştırabilirsiniz: Dosya > UI Kit’i aç > Google Materyal. Bunları Photoshop, Illustrator, After Effects ve Sketch’te kullanmak üzere Google’dan da indirebilirsiniz.

Adobe XD CC Çalışma Yüzeyine Materyal Tasarım Kartı Ekleme

XD’nin en kullanışlı özelliklerinden biri, Apple iOS, Google Material ve Microsoft Windows için UI Kitlerinin dahil edilmesidir. Ayrıca, yaygın UI öğelerinin Photoshop, Illustrator gibi bir Tasarım Uygulamasında sürekli olarak yeniden oluşturulması gerekmediği için tasarımcının işini kolaylaştırırlar. veya Sketch. İhtiyacımız olan UI öğesi bir karttı. Ona ulaşmak için seçtik Dosya > UI Kit’i aç > Google Materyal ve kit yeni bir belge olarak açıldı. İhtiyaç duyduğumuz öğe şurada bulundu: Kartlar kategorisi. Bunlar hakkında sevdiğimiz şey, İçerik Blokları spesifikasyonlarında ortaya konan Materyal Tasarımı spesifikasyonunun yanı sıra Tipografi spesifikasyonunda ortaya konan metin biçimlendirme ve aralık özelliklerine bağlı olmalarıdır. İstediğimiz kart stili sol alttakiydi. Basitçe faremizle çerçeveliyoruz ve panoya kopyalıyoruz. Ne yazık ki, XD açık belgeler için sekmeli bir arayüz içermiyor. Yaptığımız şey, üzerinde çalıştığımız belgeyi ortaya çıkarmak için açık belge penceresini biraz aşağı hareket ettirip onu seçip yapıştırmaktır. Açık XD belgeleri arasında hızlı geçiş yapmanın başka bir yolu da Komut+‘.

Adobe Experience Design CC’de Materyal Tasarım Öğesi Nasıl Düzenlenir

XD’deki kart panodan geldiğinde onunla neşeyle çalışmaya başlamayın. Yapmanız gereken ilk şey Kartı oluşturan parça ve parçalara erişmeniz gerektiğinden kartın grubunu çözmektir. Bunu yapmak için kartı seçin ve Nesne > Grubu çöz veya basın Vardiya+Komut+G.

Kartınız artık üç parçadan oluşuyor:

• 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 silmektir. Tek amacı, isterseniz onu isteğe bağlı yapan görüntü için bir yer tutucu olarak hareket etmektir. Metni içeren kutu aslında %50 opaklığa sahip koyu gridir. Bu kutu metin arka planı olarak kullanılabilir ve kutunun rengini ve opaklığını değiştirebilirsiniz. Hemen belli olmasa da, açık gri kutu, üst köşelerinin 2 piksel yuvarlatılmış olması nedeniyle Materyal Tasarımı spesifikasyonunu takip ediyor. Bir resim ekliyorsanız bunu aklınızda bulundurun. Ayrıca bir görüntüleme uygulamasına veya XD’ye eklenebilecek yuvarlatılmış köşelere de ihtiyaç duyacaktır. Kartın dinlenme durumu bu şekilde görüldüğü için bir gölgeye de ihtiyacı vardır. Spesifikasyon, kartın 2 piksellik bir dinlenme yüksekliği olduğunu açıkça ortaya koyuyor. Bunu eklemek için, siyah arka plan şekli ve özellikler panelinde Y ve B (Bulanıklaştırma) değerlerini 2 olarak ayarlayın.

Adobe XD CC’de Materyal Tasarım Kartına Resim Nasıl Eklenir

Kartın 344 piksel genişliğinde ve görüntü alanının 150 piksel yüksekliğinde olduğunu bilmek (açık gri kutunun yüksekliğinin yarısı) Resmi Photoshop’ta açtık, boyutuna göre kırptık ve Photoshop’un Farklı Dışa Aktar iletişim kutusundaki @2x seçeneğini kullanarak kaydettik. Görüntü Adobe XD’ye aktarıldı. Daha sonra açık gri kutuyu çalışma tahtasındaki görüntünün üzerine sürükledik ve Nesne > Şekilli Maske. Sonuç, şeklin yuvarlak köşelerini alan görüntüydü. Daha sonra görüntüyü son konumuna taşıdık. Görüntü yerindeyken, Orta gri kutunun arka plan rengini değiştirdik, metni ve bağlantı metninin rengini değiştirdik.

Adobe XD CC Izgara Özelliğini Kullanma

Kart tamamlandığında, şimdi Materyal Tasarımı spesifikasyonuna göre düzgün bir şekilde yerleştirilmesi gerekiyor. Bu, kartın her iki tarafında 8 piksel olduğu ve kartın uygulama çubuğunun 8 piksel altında olması gerektiği anlamına gelir. Bunu yapmak için, üzerine bir kez tıklayın. çalışma yüzeyi adı Ve içinde Özellikler Paneli, seç Kafes. Kılavuz, çalışma yüzeyinin üzerinde 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. Izgara rengini değiştirmek isterseniz, renk çipi ve sonuçtan bir renk seçin Renk seçici. Izgara görünürken, üzerine tıklayın. kart ve son konumuna getirin. Bitirmek için kartı seçtik, Izgarayı tekrarla düğmesine bastı ve kartlar arasındaki boşluğu da 8 piksel olarak değiştirdi.