Ana içeriğe atla

Material Design Nedir?

Material Design nedir, ne işe yarar, işimizi nasıl kolaylaştıracak?


Şekil 1 - Material Design UI Örneği

Material Design, Google tarafından geliştirilen bir tasarım dilidir. 2014’te I/O konferansında Android 5.0 Lollipop ile beraber duyurulmuştur.

Temel olarak, kullanıcılara daha kararlı bir arayüz sağlayabilmeyi amaçlıyor. Yeni gelen bu tasarım standartları ile Android uygulamalarındaki uyuşmazlık, tutarsızlık, dokümantasyon eksikliği gibi konulara bir çözüm getirilmiş oldu. Böylece kullanıcılar, daha tahmin edilebilir bir ortamda oldukları için uygulamalar arası geçişlerde zorlanmayacak,  bir uygulamanın nasıl çalıştığını daha çabuk kavrayabilecek ve daha kolay alışabilecekler.

Özellikle farklı ekran boyutlarında uygulama geliştirenlerin yaşadıkları problemleri ortadan kaldıracak ve farklı ekran boyutlarını uyumlu hale getiren akıllı arayüz geliştiricilerinin işini bir hayli kolaylaştıracak.


Şekil 2 - Işık ve Gölgelendirme Çalışmaları

Material Design Prensipleri 

Material design üç prensibe dayanıyor;



Material Metaforu

Material derken aslında ne demek istiyoruz? Özellikleri neler? Nasıl davranır?

                                                                                                                   
Rasyonel düzlem ile hareket sistemini bileştiren bir teoridir aslında material metaforu. Google’ın tanımına göre metarial, dokunulabilir gerçeklik üzerine kurulu, kâğıt ve mürekkepten ilham alınmış buna rağmen teknolojik açıdan gelişebilir ve yaratıcı düşünceye açık bir malzemedir. Işığın, yüzeyin ve hareketin temel prensipleri bize objelerin nasıl hareket ettiği, nasıl etkileşime geçtiği ve uzayda ki varlığı ile ilgili bilgi verir.


Yani özetle, fizik kurallarını aşmadığımız ve inandırıcılığımızı kaybetmediğimiz sürece hayal edebileceğimiz her şeyi yapabiliriz.

Material Design Özellikleri

  I.   Ortam

Material design ile tasarım yaparken kullandığımız ortam 3D ortamdır. Yani x, y ve z düzlemlerini kullanıyoruz. Z ekseni ekrana dik bir şekilde konumlandırılmış. Böylece pozitif z - ekseninde yapılan artışlar kullanıcıya doğru yapılmış oluyor. Ve kullanıcı gerçeklik hissine kapılıyor.


Işık ve gölgelendirmeler,  z - ekseninde ki yükseltme işlemini yapmamıza yarıyor. Bu sayede elementler arasında ki yükseklik farkını gösterebiliyoruz. Anahtar ışığı açılı gölgeler oluştururken, ortam ışığı daha yumuşak ve her yönden gölge oluşturur.


Şekil 3 – Z – eksenindeki Yükseltme(Elevation) İşlemi



II.   Fiziksel Yapısı

Material x ve y eksenlerinde farklı ölçülere sahip olabilirler. Ama z ekseninde sabit ve 1 dp kalınlığında olmalıdır. Uygulamalarımız da ki elementlerin kâğıtlardan oluştuğunu düşünüyoruz. İçeriklerin herhangi bir kalınlığı yoktur.


Nesnelerin gölgeleri yüksekliklerine bağımlı bir şekilde doğal olarak değişmeli. Renklendirme ile gölgelendirmeyi arttırmaktan kaçının. Cismin yüksekliğine bağlı olarak değişen gölgelendirme sistemini kullanın böylece istikrarlı bir yapıdan vazgeçmemiş oluyoruz

Doğru : Nesneler birbirinden yükseklikleri ile ayrılır

Yanlış : Nesneleri renklendirerek gölgelendirme




Material katı bir cisimdir. Dolayısıyla inputlar sadece ön plandaki nesneyi etkileyebilir.


Birden fazla material aynı noktada bulunamaz. Eğer bulunacaksa bile aynı köşelere sahip olmaları gerekir ki buna da seam(dikiş) demişler.


Birbirlerinin içinden geçemezler


Material şekil değiştirebilir, kendi ekseninde büyüyüp küçülebilir. Floating Action Button, nam-ı değer FAB material’in bu özelliğinin en güzel örneği bence.  FAB ile yeni bir pencere açabilir ya da pop-up dialoglar yaratabilirsiniz
Kendi ekseninde büyür, küçülür.

Şekil değiştirebilir


Material katlanamaz ya da kıvrılamaz. Online Ikea kataloglarında ki o kıvırma olayını rafa kaldırıyoruz. Ayrıca Smart Paper’dan da biraz bahsetmek istiyorum. Akıllı kâğıt dedikleri şey ayrılabilir, parçalanabilir ve ayrıldıktan sonrada tekrar iyileşebilir yani mükemmel bir şekilde tekrar bir araya gelebilir bir kâğıt yapısıdır

Yanlış : Katlanamaz Kıvrılamaz

Doğru : Smart Paper Liste Örneği

Doğru : Smart Paper


Yükseklik (Elevation)



Nesnenin z - eksenindeki pozisyonuna göre yapılan gölgelendirmedir. Resimde card, app bar ve FAB yapılarını görüyoruz. Bu nesnelerin her birinin kendine özel bir yüksekliği vardır

Tasarımcılar uygun olan yükseklikler ile ilgili standartlar koymuşlar. Mesela, cardlar normalde 2 dp yükseklikte durmalı, basıldığında ise 8 dp yüksekliğe çıkmalıdır. Bu standartları detaylı olarak

Google’ın design sayfasında bulabilirsiniz:


Basıldığında yüksekliğin artması kullanıcıya mıknatıs hissi vermek için yapılmış. IOS’ tada basıldığında koyulaşan butonlar kullanıcının etkileşime geçtiğini anlaması için önemli.



Şekil 1: FAB(Floating Action Button)

Şekil2 : Raised Button


Nesnelerin diğer nesneler ile ilişkisi, ağaç yapılarına benziyor. Aynı şekilde XML dosyalarında ki parent - child ilişkisine bağlı. Her objenin bir ebeveyni vardır ve her obje istediği kadar çocuk edinebilir. Çocuk ebeveyninden dönüşüm özelliklerini alabilir. Pozisyonu, rotasyonu, ölçüsü (scale), yüksekliği (elevation) gibi.

Şekil 1’ deki card yapıları scroll edilirken FAB sabit kalıyor. Çünkü FAB, card koleksiyonunun çocuğu değil. Şekil 2’deki raised button yapısı ise card yapısının çocuğu olduğu için (kalıtım sebebiyle) scroll hareketini yapıyor.

Cesur, Grafik, Amaca Yönelik

Grafik tabanlı bir tasarım için tipografi, gridler, layoutlar ve renk gibi konularda dikkat edilmesi gerekilen noktalar nelerdir?

Genel olarak arayüz elementlerinin göze güzel gelmekten çok daha fazlasını yaptığını anlatıyor. Aslında arayüz kullanıcıya uygulamayı nasıl kullanması gerektiğini göstermelidir. Kullanıcı aktivitelerinin vurgulanması, ana fonksiyonları görünür kılar ve kullanıcıya bir yol haritası sunar. Bu yüzden material design ile düşünülerek seçilmiş renkler, köşeden köşeye resimler, büyük ölçekli yazılar kullanarak cesur ve grafik bir arayüz yaratmaya çalışıyoruz.

Özetle amaca yönelik olmalı, grafik olmalı ve sizi yansıtmalı böylece kullanıcı ile aramızda evrensel bir dil kullanmış oluruz.

Renk Paletleri

Google'ın Material Design sitesinde ki renk paletleri



Google renk paletleriyle Material design için geniş bir renk yelpazesi vermiş. Burada bilmemiz gereken en önemli şeylerden birisi bu renkleri nerelerde ve nasıl kullanmamız gerektiği. PrimaryColor ve AccentColor neyi ifade eder?

PrimaryColor, uygulamamızın app barında kullandığımız ve genel olarak markamızı ya da uygulamamızı tanıttığımız temel rengimizdir.

AccentColor ise, vurgulamak istediğimiz ya da ana metinden ayırmak isteğimiz noktalarda kullandığımız rengimizdir.

AccentColor yanlış tercih edilirse aşağıda örnekte ki gibi amacımıza ulaşamayız o yüzden renklere de dikkat etmeliyiz.

İkonlar 



Uygulama ikonu kullanıcı dostu, basit ve güçlü olmalı. Markanın görsel temsilcisi olduğu için ürüne özel olmalı ve markayı yansıtmalı.

Kendilerinin tasarladıkları sistem ikonları olduğu gibi istersek biz de ikon tasarlayabiliyoruz. Burada dikkat edilmesi gereken noktalardan biri sistem ikonlarının hepsinin 24x24 px boyutunda olması gerektiği. Daha sonraki boyut ayarlamalarını dp (density-independent pixels) üzerinden yapıyoruz.

Tipografi

Roboto ve Noto adında iki yazı tipi geldi. Roboto sadece Latin ve Latin benzeri dilleri karşılayabiliyor. Güney, Güneydoğu Asya ve Orta Doğu dillerini (Korece, Japonca, Çince, Farsça, Arapça, Hintçe vb.) ise Noto karşılıyor



Faydalı Linkler : 
Renk ve Tema: 


Roboto ve Noto:


Yazım ile ilgili: 


Layout ve Rehber Gridlerin Standartları:


Component:


Patterns:


Devices:


What is New:


Referans:


Yağmur GÜLDALI

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

UML ve Modelleme – Bölüm 4 (Class (Sınıf) Diyagramları)

Bir önceki makalemizde UML modellemede kullanılan ilk diyagram olan Use Case diyagramını incelemiştik. Bu makalemizde nesne tabanlı programlamada kullanılan sınıflar ve sınıfların arasındaki ilişkileri modelleyebileceğimiz diyagramlar olan Class(Sınıf) diyagramlarını inceleyeceğiz. UML’de sınıflar, nesne tabanlı programlama mantığı ile tasarlanmıştır. Sınıf diyagramının amacı bir model içerisinde sınıfların tasvir edilmesidir. Nesne tabanlı uygulamada, sınıfların kendi özellikleri (üye değişkenler), işlevleri (üye fonksiyonlar) ve diğer sınıflarla ilişkileri bulunmaktadır. UML’de sınıf diyagramlarının genel gösterimi aşağıdaki gibidir. Şekil 1. Class Diyagram Şekil1’de görüldüğü üzere bir dikdörtgeni 3 parçaya bölüyoruz. En üst bölüm sınıf adını, orta kısım özellik listesini (üye değişkenler) ve en son kısım, işlev listesini (üye fonksiyonlar) göstermektedir. Çoğu diyagramlarda alt iki bölüm çıkarılır. Genelde tüm özellik ve işlevler gösterilmemektedir. Ama

Yazılım Maliyet Tahmineleme Tecrübeleri

Yazılım mühendisliğinde maliyet hesabı her zaman problem olmuştur. "Bu iş kaç Adam/Gün tutar?" sorusuyla sıkça karşılaşıyoruz. Adam/gün veya Adam/ay ölçütleri bir kaynağın/kişinin belirtilen zaman dilimindeki iş gücü anlamına gelir. Tabi bu noktada yine kafa karışıklıkları başlar. 6 A/G'lik bir işi hızlandıralım diye 2 kişi ile yapmaya çalışsak ve kaynak/kod, modül, altyapı, insan vb. her bir şeyi bir kenara bıraksak, matematiksel basit formülle 6/2=3 A/G'de biter? Gerçek hayat böyle değil, öncelikle bunu anlamamız lazım. Hep şu örnek verilir; "Aynı bebeği 2 kadın birlikte daha kısa sürede doğurur mu?" Eğer bunun cevabı "Evet" ise (veya bir gün böyle bir durum ortaya çıkarsa), yazımı değiştirmem gerekecek:) Mevzu gerçekten derin...Maliyet hesabı; bulunduğunuz firmanın yazılım süreçlerini hangi methodlarla uyguladığına, ilgili işin o dönemdeki aciliyetine, (şirket yönetiminin baskısına:)) vb. bir çok duruma bağlı olabilir. Örneğin; bizim firmada e

UML ve Modelleme – Bölüm 3 (Use Case Diyagramlar)

Önceki iki makalemizde ( 1 , 2 ) UML’e genel olarak değinip ve modellemede kullanacağımız dokuz diyagram hakkında bilgiler vermiştik. Bu makalemizde Use Case diyagramından detaylı bahsedeceğiz. Öncelikle, genel Use case diyagramının tanımını hatırlayalım. “Bir kullanıcı ve bir sistem arasındaki etkileşimi anlatan senaryo topluluğudur.” Ivar Jacobson Senaryo tanımı için der ki: “Aktörle sistem arasında gerçekleştirilen, sonucunda aktöre farkedilir getirisi/ faydası oluşan etkileşimli diyalogdur. ” UML Use Case Diyagramları  sistemin işlevselliğini açıklamak amacıyla kullanılır. Sistemin birbirinden ayrı özelliklerinin detaylarını göstermekten ziyade, Use Case Diyagramlar, tüm mevcut işlevselliği göstermek için kullanılabilir. Buradaki en önemli noktalardan biri,   Use Case Diyagramlar temelde sequence diyagram ve akış diyagramlarından farklıdır. Use Case diyagramlar dört ana elemandan oluşmaktadır. Aktörler , Sistem (Proje kapsamını belirtir) , Use Caseler ve bunlar ara