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/06Adobe 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. İç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’in Deneyim Tasarımı’nda bulunan ve şu anda yalnızca Macintosh’a ait bir önizlemede bulunan ve ücretsiz olan araçları kullanacağız. Buradan indirebilirsiniz.
Başlayalım.
02/06Adobe 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 Malzeme Tasarımı şablonu içerir (Dosya> Şablondan Yeni> Malzeme Tasarımı) ve başka gerçekten iyi bir bedava, buradan elde edebileceğiniz Kyle Ledbetter'den. Sketch'iniz yoksa, bunları bulunan XD etiketlerinden kopyalayıp yapıştırabilirsiniz. Dosya> Açık Kullanıcı Arabirimi Kiti> Google Malzeme. Bunları Photoshop, Illustrator, After Effects ve Sketch'de kullanmak üzere Google'dan da indirebilirsiniz.
03/06Adobe 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 dahil edilmesi. 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ı. Onu almak için seçtik Dosya> Açık Kullanıcı Arabirimi Kiti> Google Malzeme 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. Maalesef, 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- 'düğmesine basın.
04/06Adobe Experience Design CC'de Materyal Tasarım Öğesi Nasıl Düzenlenir
XD'deki kart panosundan geldiğinde, onunla çalışmaya başlamayın. Yapman gereken ilk şey Kartı Ungroup çünkü kartı oluşturan parçalara ve parçalara erişmeniz gerekiyor. Bunu yapmak için kartı seçin ve Nesne> Gruplandır'ı seçin veya Shift-Command-G'ye 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 (Blur) değerlerini 2 olarak ayarlayın.
05/06Adobe XD CC'de Materyal Tasarım Kartına Görüntü Ekleme
Kartın tanınması 344 piksel genişliğinde ve görüntü alanı 150 piksel yüksek ( açık gri kutusunun yarısı ) Resmi Photoshop'ta açtık, boyutuna göre kırptık ve Photoshop’ta @ 2x seçeneğini kullanarak kaydettik. Dışa Aktar iletişim kutusu. Görüntü Adobe XD'ye alındı.
Daha sonra, açık gri kutuyu, panodaki görüntü üzerinde sürükledik ve seçildik Nesne> Şekli ile Maske. 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/06Adobe 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.
