Google'ın Materyal Tasarımı Kullanıcı Arayüzü Yeni Renkler, İkonografi ve Dokunmaya Odaklanma ile Yenileniyor

Chromium Gerrit'teki yeni taahhütler, Google'ın Materyal Tasarımı dilinin yeni ve geliştirilmiş bir sürümü olabilecek "Materyal Tasarımı 2"ye referans veriyor gibi görünüyor.

Android Lollipop'la birlikte piyasaya sürülen birleşik tasarım dili Materyal Tasarımı, düz, pastel renk paletleri, derinlik, yumuşak aydınlatma ve gerçekçi fizik özelliklerine sahiptir. Gerçek dünyadaki nesnelerin dokunsallığını, skeuomorfizme başvurmadan taklit etmek amaçlanıyor; Google bunu "klasik ilkeler" ile teknolojinin "yeniliği ve olasılığı"nın bir sentezi olarak tanımlıyor.

Materyal Tasarımı 2014'teki ilk çıkışından bu yana, Android ekosistemine orman yangını gibi yayıldı; YouTube, Chrome, Gmail, Hangouts ve Google Takvim gibi Google uygulamalarından bahsetmiyorum bile. Yüzen eylem düğmeleri, hoş renkler ve yükseltme teknikleri, uygulamanın bir parçası olarak kullanıma sunuldu. Malzeme Bileşenleri Kitaplığı GitHub'da (Android'in Tasarım Destek Kitaplığı ve Google'ın web odaklı Materyal Tasarımı Lite'ın devamı), Material'ın Android'e özel görünümler biçiminde ve web'e standart HTML gibi içe aktarılabilen ve kullanılabilen paketler biçiminde iyilik Etiketler.

Şimdi, Materyal Tasarımın dördüncü yıl dönümünün arifesinde Google, yeni neslini hazırlıyor gibi görünüyor. kağıt ve mürekkepten ilham alan estetik: Materyal Tasarımı 2. Varlığını bu hafta Chromium Gerrit'teki yeni taahhütlerde ortaya çıkardığımız Materyal Tasarımı 2 hakkında çok az değerli bilgi kamuya açıktır. Bunun bir olduğunu iddia etmiyoruz düzgün En yeni Materyal Tasarımı çerçevesinin halefi, ancak taahhütler renk paletlerinde, ikonografide ve dokunmatik ekran davranışında ince de olsa fark edilebilir değişikliklere işaret ediyor.


Materyal Tasarımı 2, Chromium Gerrit'te Ortaya Çıkıyor

Şubat ayının başlarında, Chromium Gerrit'e ilişkin yeni taahhütler Chrome'un "Materyal Tasarımı 2" kullanıcı arayüzünü uyguladı sekme şeridi—web sayfası başlıklarını, sık kullanılan simgeleri ve Chrome'un üst kısmındaki "sekmeyi kapat" düğmesini içeren sürüklenebilir sekmeler adres çubuğu.

Taahhütler çok büyük değil ancak Chrome'un sekmelerinin görünümünde değişiklikler yapıyor. Sekme şeridinin yüksekliğini arttırırlar; sekmelerin içerik düzeninde, özellikle başlıklarda ve uyarı göstergelerinde belirtilmemiş ince ayarlar yapın; ve sekme standart genişliğini artırırken sekme dokunma genişliğini azaltın. Onlar açıkça yapma sekme uyarı göstergesi renklerini, sekme ayırıcı renklerini, "yeni sekme" düğmesini veya herhangi bir sekme tipografisini değiştirin.

Chrome sekmelerinden oluşan bir koleksiyon.

Açıkça görülüyor ki, taahhütler "Materyal Tasarımı 2" sekmesi kapatma düğmesi simgesine ve "Google Materyal Tasarımı 2 için gerekli temel renk sabitlerine" atıfta bulunuyor.

Taahhüt kodunun derinliklerine inildiğinde gri, kırmızı ve kırmızı-koyu Chromium temaları için yeni "Materyal Tasarımı 2" renk paletleri ile standart Chrome araç çubuğu ve gizli araç çubuğu için yeni renkler gösterilir. RGB renk örneklerini oluşturmak için onaltılık bir arama tablosu kullandık:

Materyal Tasarımı 2'nin kırmızısı biraz daha koyu mevcut Materyal Tasarımı'ndan daha Kırmızı 800 (#C62828) ve Kırmızı 600 (#E53935), yeni gri tonları (#3C4043, #5F6368, #BDC1C6, #F1F3F4) daha açık, mavimsi bir renk tonuna sahiptir. Malzeme tasarımında R=G=B olan geleneksel griler bulunurken burada her tonda B>G>R bulunur (ancak 255 üzerinden yalnızca 1-4 oranında).

Materyal Tasarımı 2 uyumlu sürümler Chrome ayrıca mevcut sürümlerden çok daha parlak bir araç çubuğuna sahip olacak; mevcut grimsi renk şemasıyla karşılaştırıldığında neredeyse beyaz.

Araç çubuğunun uygulanan yeni renklerle nasıl görüneceğine dair kısa bir örnek:

Son olarak, taahhüt yeni bir şey ekler IsTouchOptimizedMaterial() bayrak Malzeme TasarımıKontrol Cihazı, dokunma açısından optimize edilmiş Materyal Tasarımı 2 öğelerine atıfta bulunabilir. Ocak ayı başlarında Google'ın iyileştirme çabaları hakkında yazmıştık. Chrome web tarayıcısının Chrome OS cihazlarda dokunmatik ekran desteği bulunmaktadır ve bunun devamı gibi görünmektedir.

Örneğin, taahhüt, dokunmatik ekranlı cihazlarda Chrome'un SetStackedLayout'unun 'her zaman' olacağını gösteriyor etkinleştirilmiş.' Varsayılan olarak, çok sayıda sekme açtığınızda diğer sekmelerin genişlikleri, sekmeye uyum sağlayacak şekilde küçülür. yeni sekmeler. Chrome'un yığılmış düzeni, orijinal sekmelerin genişliklerini korur ve bunların arkasına yeni sekmeler ekler.


Materyal Tasarımda Rengin Önemi

Peki Materyal Tasarımının daha geniş bağlamında yeni renkler ne anlama geliyor?

Materyal Tasarımı katmanlardan, bileşenlerden ve öğelerden ve bunların birbirleriyle ilişkili olarak nasıl davrandığından daha fazlasıdır. Google'ın tasarım motifinin merkezinde yüksek kontrastlı temalar, parlak renkler ve çarpıcı vurgular yer alır; bunlar, Materyal Tasarımı uyumlu uygulamaları diğerlerinden farklı kılan unsurlardır.

Google örnek sağlar renk paletleri platformlar arasında "birlikte iyi çalışacak" şekilde tasarlanmıştır ve kaynak kullanımından yararlanan geliştiricileri teşvik eder 500 farklı renkten oluşan bir koleksiyondan "baskın" renk olarak da bilinen birincil uygulama rengi renk örnekleri. ("Mavi", "yeşil" veya "mor" ve diğer temel renkleri düşünün.) Gerekirse, 700 renkten oluşan genişletilmiş koleksiyondan ikincil bir renk elde ederler. (en önemli kullanıcı arayüzü öğeleri için tamamlayıcı renkler ve daha az önemli kullanıcı arayüzü öğeleri için benzer renkler ve bunların bir alt kümesinden üçüncül bir renk) 300).

Renk, Materyal Tasarımı hiyerarşisinde önemli bir rol oynar. Parlak renkler önem arz eder; bunlar belirgin düğmeler ve diğer etkileşimli öğeler için ayrılmıştır. Öte yandan daha ince renkler, metin alanlarını, ilerleme çubuklarını, bağlantıları ve kullanıcı arayüzünün diğer bölümlerini vurgulayarak görsel ilgiyi artırır.

Materyal Tasarımı 2'nin renk paleti hakkında bildiklerimize göre, Google'ın "birincil 500"ündeki Kırmızı 600 ve 800 gibi renk örneklerinden en az birkaçı, Materyal Tasarımı öncüllerinden daha koyudur. Ama diğerleri, örneğin grey, tam tersi muamele görüyor -- Chrome sekmesi modelinde gösterilen gri ve beyaz renk örneklerinin her ikisi de daha soğuk bir gri tonlamaya ve daha yüksek mavi değerlere sahiptir.


Şu anda Materyal Tasarımı 2 hakkında gerçekten bildiğimiz tek şey bu. Ancak taahhütler, perde arkasında bir şeyler olduğunun işareti olabilir ve eğer bu doğruysa, çok geçmeden daha fazlasını öğrenebiliriz. Google'ın, Android'in bir sonraki ana sürümü olan Android P'yi Mart ayında tamamlaması bekleniyor ve Google I/O 2018, 8 Mayıs'ta başlayacak. Her ikisi de Materyal Tasarımı 2'yi tamamlamak için önemli fırsatlardır.

Güncelleme 2/4/2018: Bu makalenin yayınlanmasından kısa bir süre sonra taahhüt gizli hale getirildi, bu da potansiyel olarak gizli tutulması gerektiği anlamına geliyor. Değişiklikler için Chromium Gerrit'i kontrol etmeye devam edeceğiz ve herhangi bir değişiklik bulursak bu makaleyi güncelleyeceğiz.