Son 2014 G / Ç etkinliğinde Google yeni sürprizleriyle geri döndü. Google, Lollipop isimli yeni Android güncellemesini resmen yayınladıktan sonra, aynı zamanda yeni tasarım dili olan Material Design'ı da tanıttı. Sadece yeni Lollipop kullanıcı arayüzü iyileştirmeleri için değil, aynı zamanda cihazlar ve ortamlar için amaçlanan bir tasarım sistemidir.
Materyal Tasarımı, onu diğer tasarım trendleri arasında kendine özgü yöntemlerle farklılaştıran bazı temel özelliklere sahiptir. Tıpkı adı gibi, gerçek malzemelerden ilham aldı ve şık, sezgisel, güzel ve en etkileşimli kullanıcı deneyimi yaratmak için bunları tek bir tasarım sistemine birleştirdi. Bu yazıda, Material Design'ın içinde ne olduğuna bakacağız ve nasıl uygulanacağı konusunda size hızlı bir rehberlik edeceğiz. Google’ın blogundan alıntı yaparak, “Bu, Materyal Tasarımı” diyeceğim.
Giriş
Materyal Tasarımı birleşik bir tasarım sistemidir, mevcut tüm cihazlarla ve platformlarla çalışmak için yapılmıştır. Tabletten, akıllı telefondan masaüstüne ve Android'den, iO'lardan, Windows'tan Web platformlarına. Tüm tasarım görünümleri ve hisleri, nerede olursa olsun aynı olmalıdır.
Ana ilkeler
Materyal Tasarımı yapan üç ana prensip vardır. Bunlar, Malzemenin genel olarak sunduğu şeylerin en temel kısmıdır.
- Malzeme mecazdır . Materyalin gelişimi, her gün kullandığımız dokunsal unsurların, kağıt ve mürekkebin çalışmasından ilham almıştır. Nesneyi ışıklandırır, yüzey ve hareketler birbirleriyle etkileşime girdiğinde daha iyi olur.
- Kalın, grafik ve kasıtlı . Baskıya dayalı tasarımda kullanılan imgelem, tipografik, ızgara, uzay, ölçek, renk ve imge kullanımı Materyalin içeriğini daha iyi hale getirir.
- Hareket anlam sağlar . Bu en dikkat çeken şeylerden biri. Malzeme'de anlamlı ve uygun hareketlere, ince ve net geri bildirimlere ve verimli ve tutarlı bir geçişe sahip olmalısınız.
Bileşenler
Materyal Tasarımı, bileşenlerinin her ayrıntısına dikkat eder, böylece evrensel olarak kullanılabilirler. Bu bileşenler, muhteşem uygulama ve site oluşturmanıza yardımcı olur. Düğmeler, anahtar, kart, metin girişi, fab (kayan işlem düğmesi), iletişim kutusu, kızarmış ekmek, alt menü, sekme ve daha fazlası gibi Malzeme tarafından sağlanan birçok bileşen vardır. Her birinin kendi kuralı vardır ve nasıl inşa edileceğine dair rehberlik eder, böylece tutarsız unsurlara sahip olmazsınız.
Desenler Şey
Bileşenlerin yanı sıra, Malzeme ayrıca ek UI için bazı temel kalıpları sağlar. Bu modeller, Material'ın bileşenleriyle oluşturduğunuz UI'yi iyileştirir. Veri formatı, navigasyon çekmecesi, hatalar, el hareketleri, kaydırma tekniği, arama, ayarlar, görüntü yükleme, tazelemek için kaydır ve daha fazlasını içeren desenler.
Malzeme Tasarım Renkleri
Materyaldeki renkler sizi rahatsız edici, garip ve düz hissetmenize neden olmayacak şekilde tasarlanmıştı. Yol işaretleri, çağdaş mimari, kaldırım işaretleme bandı ve spor sahaları gibi günlük ortamlarımızdan ilham alan Material Design, beklenmedik ve yüksek ruhlu renkler sunar. Uygulamalar veya siteler geliştirirken size daha fazla kolaylık vermeyi seçebileceğiniz çok fazla renk paleti vardır. Renk örneklerini Photoshop koleksiyonunuzdaki gibi yerel kullanım için de indirebilirsiniz.
Malzemenin Simgesi
Bir Android geliştiricisiyseniz, Google tarafından sağlanan bazı ücretsiz simge paketlerine aşina olmalısınız. Genellikle sadece ana eleman ve actionbar için kullanılırlar. Başka bir kaynak için klasör, dosya, kopyala ve yapıştır, vb. Gibi diğer simgeleri manuel olarak aramak zorundayız. Malzeme Tasarımında Google, kullanabileceğiniz tonlarca simge paketiyle sorunu çözdü.
Simgelerin her biri, dokunsal materyaller çalışmasını da kullanan bir tasarım yaklaşımından geçti. Onlar da Materyal prensibini koruyorlar, bu tutarlı. Bu simgeleri GitHub'a indirebilirsiniz, iOs, web, Android veya svg gibi farklı kullanım seçenekleriyle birlikte gelirler. Kolay kişiselleştirme için daha geniş bir seçenek istiyorsanız, muhtemelen FlatIcon'da Malzeme Tasarımı simge paketlerini görmek istersiniz. Paketin içinde, simge vektörü (SVG ve EPS), PSD ve PNG sürümünü alacaksınız.
Malzemenin Animasyonu
Bu, Malzemenin en çok sevdiğim özellikleri. Materyal içindeki animasyonlar çok gerçek ve sezgiseldir. Her animasyonun anlamlı, tutarlı ve doğru zamanlama geçişleri vardır. Aşağıda gösterilen gif demosu güzel Materyal animasyonlarından sadece bir tanesi. Etkileyici ve duyarlı bir etkileşim sağlamak için Google ekibi, kullanıcı girişi etkisi için su dalgalanma benzeri bir animasyon da oluşturur. Genellikle düğmeler ve kartlarda kullanılır.
Açıkladığım bu özellikler, Materyal Tasarımı'nın sunduklarının sadece bir kısmı. Malzeme dünyası hakkında daha fazla bilgi edinmek için dokümantasyon sayfasına gidin.
uygulama
Varsayılan olarak, Material Design Android Lollipop için yeni UI güncellemesi olarak geliyor. Malzemenin içinde uygulandığı tüm kurallar. Malzeme her türlü ortama yönelik olduğundan, onu başka bir sisteme uygulamak zor olmaz. Ve topluluklar sayesinde, yarattıkları bazı araçlarla çok daha kolay.
Bunlar, örneğin Web dışında Android dışında Materyal Tasarımı elde etmenin birkaç yolu.
CSS Alt Yapılarını Kullanma
Materyal Tasarımı'nı web platformunda uygulamak istiyorsanız bu en kolay yoldur. Çerçevelerle, yapmanız gereken tek şey başlatmak, sonra ihtiyacınız olan öğeleri yazmak. Birkaçını adlandırmak için Materialize, Material UI veya Polymer gibi kullanabileceğiniz birçok çerçeve var. Benim kişisel seçimim Materyalize oldu. Güzel demo ile kullanımı ve anlaşılması ve harika dokümantasyona sahip olması daha kolaydır.
Kuralları takip ediyor
Malzemeyi çerçeve yardımı olmadan uygulamak ve en çok kodları karıştırmayı tercih ediyorsanız, Malzeme kurallarına uymalısınız. Orada, Maddi ilkelere ulaşmak için dikkat etmeniz gereken her şeyi ve yapılmaması gerekenleri bulacaksınız. Bileşenler, düzen, animasyon, renk, desenler ve daha fazlasını oluşturmak için tüm temel kılavuzları göreceksiniz. Daha kolay gelişme için bazı Malzeme kontrol listesini görmek isteyebilirsiniz.
Sonuç
Materyal tasarımı harika bir tasarım sistemidir ve yılın en çok beklenen trendlerinden biri haline gelmiştir. Önümüzdeki birkaç ay içinde her yerde görebiliriz. Bu yeni Google’ın tasarım güncellemesiyle daha fazla uygulama ve site cilalanacak.
Materyal Tasarımı ile Google, en büyük teknoloji şirketlerinden biri olarak üstünlüğünü kanıtladı. Google’ı yalnızca arama motoru ve mobil işletim sistemi alanında değil aynı zamanda tasarım alanında da yönlendirir. Şu ana kadar, Google’ın yaptığı gibi bu büyük şeyi geliştiren başka şirketler de yok. Ancak deneyim diyor ki, uzun sürmeyecek. Google’ın Materyal Tasarımı’na başka şirketlerin yanıt vermesini bekleyelim.
