Materyal simgelerine, bunları nereden alabileceğinize ve projelerinize nasıl entegre edeceğinize genel bir bakış.
Materyal simgeleri nedir?
Materyal tasarım sistemi simgeleri sade, modern, samimi ve bazen ilgi çekicidir. Her simge, kullanıcı arayüzünde yaygın olarak kullanılan evrensel kavramları basit ve minimum biçimlerde göstermek üzere tasarım yönergelerimiz kullanılarak oluşturulur. Hem büyük hem de küçük boyutlarda okunabilirlik ve netlik sağlayan bu simgeler, yaygın kullanılan tüm platformlarda ve görüntü çözünürlüklerinde güzel görünüm için optimize edilmiştir.
Malzeme Simgeleri Kitaplığı'ndaki materyal tasarım simgelerinin tamamına bakın.
Simgeler alınıyor
Simgeler çeşitli biçimlerde sunulur ve farklı proje ve platform türleri, uygulamalarındaki geliştiriciler ve model veya prototiplerindeki tasarımcılar için uygundur.
Lisanslama
Apache Lisans Sürümü 2.0 kapsamında bu simgeleri ürünlerinize dahil edebilmeniz için kullanıma sunduk. Bu simge ve belgeleri remiks olarak derleyip ürünlerinizde yeniden paylaşabilirsiniz. Uygulamanızın about ekranında ilişkilendirmeyi kullanmak isteriz, ancak zorunlu değildir.
Simgeleri tek tek göz atma ve indirme
Malzeme simgelerinin tamamı, malzeme simgesi kitaplığında mevcuttur. Simgeler, SVG veya PNG'lerde, web, Android ve iOS projelerine uygun biçimlerde indirilebilir veya herhangi bir tasarımcı aracına eklenebilir.
Her şey indiriliyor
Tüm simgelerin en yeni kararlı zip arşivini (~310 MB) veya ana sürümden yeni sürümü alın.
Git Kod Deposu
Malzeme simgeleri, kullanıma sunduğumuz çeşitli biçimlerin tümü dahil olmak üzere simge setinin tamamını içeren git deposundan edinilebilir.
$ git clone https://github.com/google/material-design-icons/
Web için simge yazı tipi
Malzeme simgesinin yazı tipi, web projelerine malzeme simgeleri eklemenin en kolay yoludur. Tüm malzeme simgelerini, modern tarayıcıların yazı tipi oluşturma özelliklerinden yararlanan tek bir yazı tipinde paketledik. Böylece, web geliştiricileri bu simgeleri yalnızca birkaç satır kodla kolayca ekleyebilir.
Yazı tipini kullanmak en pratik yöntem olmakla kalmaz, aynı zamanda verimlidir ve harika görünür.
- 900'ü aşkın simge, tek bir küçük dosyadan.
- Google Web Font sunucularından sunulur veya kendi kendine barındırılabilir.
- Tüm modern web tarayıcıları tarafından desteklenir.
- Tamamen CSS ile renklendirilmiş, boyutlandırılmış ve konumlandırılmış.
- Vektör tabanlı: Her ölçekte, retina ekranlara, düşük dpi ekran ekranlarında harika görünür.
Simge yazı tipinin ağırlığı, en küçük woff2 biçiminde yalnızca 42 KB ve standart woff biçiminde 56 KB'tır. Buna karşılık, gzip ile sıkıştırılmış SVG dosyalarının boyutu genellikle yaklaşık 62 KB olur, ancak yalnızca ihtiyacınız olan simgelerin sembol imgeleri içeren tek bir SVG dosyasında derlenmesiyle bu önemli ölçüde küçültülebilir.
1. Kurulum Yöntemi. Google Fonts aracılığıyla kullanma
Herhangi bir web sayfasında kullanmak üzere simge yazı tiplerini ayarlamanın en kolay yolu Google Fonts'u kullanmaktır. Bunun için tek bir HTML satırı eklemeniz yeterlidir:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Diğer Google Web Yazı Tipleri'ne benzer şekilde, tarayıcıya özel "Malzeme Simgeleri" yazı tipini etkinleştirmek için doğru CSS sunulur.
.material-icons adında ek bir CSS sınıfı bildirilecektir.
Bu sınıfı kullanan tüm öğeler, bu simgeleri web yazı tipinden oluşturacak doğru CSS'ye sahip olacaktır.
2. Kurulum Yöntemi. Kendi kendine barındırma
Web yazı tipini kendi kendilerine barındırmak isteyenler için bazı ek ayarlar gereklidir.
Simge yazı tipini https://example.com/material-icons.woff gibi bir konumda barındırın ve aşağıdaki CSS kuralını ekleyin:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
Ayrıca, yazı tipini doğru bir şekilde oluşturmak için simgeyi oluşturmaya yönelik CSS kurallarının bildirilmesi gerekir. Bu kurallar normalde Google Web Yazı Tipi stil sayfasının bir parçası olarak sunulur ancak yazı tipini kendi bünyesinde barındırırken projelerinize manuel olarak dahil edilmeleri gerekir:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
HTML'de simgeleri kullanma
Web sayfanıza simge eklemek kolaydır. Küçük bir örnek verelim:
yüz
<span class="material-icons">face</span>
Bu örnekte, ligatür adı verilen ve basitçe metin adını kullanarak simge glifinin oluşturulmasına olanak tanıyan bir tipografik özellik kullanılmaktadır. Değiştirme işlemi web tarayıcısı tarafından otomatik olarak yapılır ve eşdeğer sayısal karakter referansına göre daha okunabilir bir kod sağlar.
Bu özellik, hem masaüstü hem de mobil cihazlardaki çoğu modern tarayıcıda desteklenir.
| Tarayıcı | Bağlantı işaretlerini destekleyen sürüm |
|---|---|
| Google Chrome | 11 |
| Mozilla Firefox | 3.5 |
| Apple Safari | 5 |
| Microsoft IE | 10 |
| Microsoft Edge | 18 |
| Opera | 15 |
| Apple MobileSafari | iOS 4.2 |
| Android Tarayıcısı | 3.0 |
Bağlantı işaretlerini desteklemeyen tarayıcılar için, aşağıdaki örnekteki gibi sayısal karakter başvuruları kullanarak simgeleri belirtmeye devam edin:
<span class="material-icons"></span>Herhangi bir simgeyi seçip simge yazı tipi panelini açarak malzeme simgeleri kitaplığında hem simge adlarını hem de kod noktalarını bulun. Her simge yazı tipinin git depomuzda tüm ad ve karakter kodlarını gösteren bir kod noktası dizini bulunur (burada).
Materyal tasarımda simgelerin stil özelliklerini ayarlama
Bu simgeler, materyal tasarım yönergelerine uymak için tasarlanmış olup önerilen simge boyutları ve renkleri kullanıldığında en iyi şekilde görünür. Aşağıdaki stiller, önerdiğimiz boyutları, renkleri ve etkinlik durumlarını uygulamayı kolaylaştırır.
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Boyutlandırma
Yazı tipindeki simgeler herhangi bir boyuta ölçeklendirilse de malzeme tasarımı simgeleri yönergeleri uyarınca 18, 24, 36 veya 48 piksel olarak görünmelerini öneririz. Varsayılan değer 24 pikseldir.
Standart malzeme tasarımı boyutlandırma yönergeleri için CSS kuralları:
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
Materyal simgeleri en iyi 24 pikselde görünür, ancak bir simgenin alternatif bir boyutta görüntülenmesi gerekiyorsa yukarıdaki CSS kurallarını kullanmak yardımcı olabilir:
<span class="material-icons md-18">face</span><span class="material-icons md-24">face</span><span class="material-icons md-36">face</span><span class="material-icons md-48">face</span>Boyama
Simge yazı tipinin kullanılması, herhangi bir renkteki simgenin stilinin kolayca oluşturulmasına olanak tanır. Materyal tasarım simge yönergeleri uyarınca, etkin simgeler için açık veya koyu arka planlar üzerinde gösterirken sırasıyla% 54 opaklıkta siyah veya% 100 opaklıkta beyaz renk kullanmanızı öneririz. Bir simge devre dışı bırakılırsa veya devre dışı bırakılırsa açık ve koyu arka planlar için sırasıyla% 26 oranında siyah ve% 30 oranında beyaz kullanın.
Aşağıda, yukarıda açıklanan malzeme CSS stillerini kullanan bazı örnekler verilmiştir:
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
Açık renkli arka plan üzerinde koyu ön plan rengine sahip bir simge çizme örneği:
<span class="material-icons md-dark">face</span><span class="material-icons md-dark md-inactive">face</span>Koyu arka plan üzerinde açık ön plan renginde simge çizme örneği:
<span class="material-icons md-light">face</span><span class="material-icons md-light md-inactive">face</span>Özel bir simge rengi ayarlamak üzere yazı tipi için istediğiniz rengi belirten bir CSS kuralı tanımlayın:
.material-icons.orange600 { color: #FB8C00; }
ve ardından simgeye başvuruda bulunurken sınıfı kullanın:
<span class="material-icons orange600">face</span>Web için simge resimleri
Ayrıca, malzeme simgeleri hem PNG hem de SVG biçimlerinde normal resimler olarak kullanılabilir.
SVG
Malzeme simgeleri, web projelerine uygun SVG'ler olarak sağlanır. Simgeler, malzeme simgeleri kitaplığından bağımsız olarak indirilebilir. SVG'lere, şu yolun altındaki materyal tasarım simgeleri git deposundan da erişilebilir:
material-design-icons/src/
Örneğin, haritaların simgeleri src/maps içindedir:
material-design-icons/src/maps/
Bir web sitesinde birden fazla simge kullanılıyorsa resimlerden model sayfası oluşturmanız önerilir. Daha fazla bilgi için git deposunun sprites dizinindeki dokümanlara bakın.
PNG
PNG, web'de simgeleri görüntülemenin en geleneksel yoludur. Malzeme simgeleri kitaplığından indirdiğimiz dosyalar, her simge için hem tek hem de çift yoğunluk sağlar. İndirmede bunlar sırasıyla 1x ve 2x olarak anılacaktır. Simgeler git deposunda şunun altında da bulunmaktadır:
material-design-icons/png/
Bir web sitesinde birden fazla simge kullanılıyorsa resimlerden model sayfası oluşturmanız önerilir. Daha fazla bilgi için git deposundaki sprites dizinindeki önerilere bakın.
Android için simgeler
Android için uygun PNG'ler, malzeme simgeleri kitaplığından bulunabilir. Bunlar desteklenen tüm ekran yoğunluklarında olduğu için tüm cihazlarda iyi görünür.
Simgeler, malzeme tasarımı simgeleri git deposunda aşağıdaki gibi aynı renk ve boyut kombinasyonunda da mevcuttur:
Vektör Çizimi şu anda yalnızca siyah 24 dp simge olarak kullanılabilir. Bu, en standart simge boyutumuzla uyumluluk içindir. Simgeyi farklı bir renkte oluşturmak için Android Lollipop'ta kullanılabilen çekilebilir renklendirme özelliğini kullanın.
Vektör Drawable'ı kullanırken xxxhdpi yoğunluk PNG'sini eklemeniz gerekmeyebilir. Çünkü, ekran yoğunluğunu destekleyen bir cihaz Vektör Çekilebilirlerini desteklemeyebilir.
iOS için simgeler
Materyal simgeleri iOS uygulamalarında da iyi performans gösterir. Bu simgeler hem malzeme simgeleri kitaplığında hem de git deposunda Xcode resim kümeleri olarak paketlenir ve Xcode Öğe Katalogları (xkasetler) ile kolayca çalışır. Bu resim kümeleri, öğe kataloğundaki Xcode'a sürüklenerek veya klasörü xcasset klasörüne kopyalanarak herhangi bir Xcode Öğe Kataloglarına eklenebilir.
Görüntü kümesi tek, çift ve üç yoğunluklu resimler (1x, 2x, 3x) içerdiğinden, bilinen tüm iOS ekran yoğunluklarında çalışırlar. Hem siyah hem de beyaz simgeler sağlanır ancak resmin mümkün olan herhangi bir renge tonlandırılabilen bir alfa maskesi olarak kullanılmasına olanak tanıyan UIImageRenderingModeAlwaysTemplate ile UIImage'ın imageWithRenderingMode öğesinin kullanılmasını öneririz.
Objective-C örneği:
UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
[[UIImage imageNamed:@"ic_close"]
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];
Swift Örneği:
let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)
Sağdan sola simgeler
Arapça ve İbranice gibi diller sağdan sola doğru (RTL) okunur. RTL dilleri için kullanıcı arayüzleri, çoğu öğeyi RTL olarak görüntüleyecek şekilde yansıtılmalıdır. Bir kullanıcı arayüzü sağdan sola doğru yansıtıldığında, bazı simgelerin de yansıtması gerekir. Metin, düzen ve ikonlar sağdan sola kullanıcı arayüzlerini destekleyecek şekilde yansıtıldığında zamanla ilgili her şey sağdan sola doğru hareket ediyormuş gibi gösterilmelidir. Örneğin, ileriye doğru sol tarafa ve geriye dönükler sağa işaret eder. Ancak simgenin yerleştirildiği bağlamın da yansıtılıp yansıtılmamasını etkilediğini unutmayın.
Simgeler yalnızca yönleri sağdan sola modundaki diğer kullanıcı arayüzü öğeleriyle eşleşiyorsa yansıtılmalıdır. Bir simge web sitenizin sağdan sola okunacak şekilde farklı görsel özelliklerini temsil ediyorsa, simge sağdan sola doğru da yansıtılmalıdır. Örneğin, numaralı listedeki sayılar sağdan sola yazılan bir dilde sağ taraftaysa sayılar, yansıtılan simgenin sağ tarafında olmalıdır.
Android'de RTL simgeleri
Bu Android geliştirici makalesinde, RTL kullanıcı arayüzlerinin nasıl uygulanacağı açıklanmaktadır. Android'de varsayılan olarak, düzenin yönü yansıtıldığında simgeler yansıtılmaz. Gerektiğinde, RTL dilleri için özel öğeler sağlayarak veya öğeleri yansıtmak için çerçeve işlevini kullanarak uygun simgeleri özellikle yansıtmanız gerekir.
Sağdan sola yazılan diller için özel öğeler sağlamak amacıyla res/drawable-ldrtl/ gibi kaynak dizinlerinde ldrtl niteleyicisini kullanabilirsiniz. Bu tür dizinler içindeki kaynaklar yalnızca RTL dilleri için kullanılır. Android API 19 veya sonraki sürümleri çalıştıran cihazlarda çerçeve, Drawables için autoMirrored özelliğini de sağlar. Bu özellik true (doğru) değerine ayarlandığında, çekilebilir öğe, RTL dillerinde otomatik olarak yansıtılır.
autoMirrored'ı kullanma:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0"
android:tint="?attr/colorControlNormal"
android:autoMirrored="true">
<path
android:fillColor="@android:color/white"
android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>
AutoMirrored'ı kullanmak veya alternatif Çekilebilir kaynaklar sağlamak bir seçenek değilse ImageViewScaleX özelliği de çekilebilir öğeleri yansıtmak için (örneğin, res/layout-ldrtl dizininde RTL'ye özel bir düzen sağlayarak) kullanılabilir.
Düzen dosyası içinde yansıtma:
<ImageView
android:id="@+id/my_icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:scaleX="-1" />
Son olarak, çizimler programlı bir şekilde yansıtılabilir.
getLayoutDirection'ı kullanarak düzen yönünü manuel olarak kontrol edin:
if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
// custom code
}
ImageView içeriklerini programlı olarak yansıtma:
imageView.setScaleX(-1);
iOS'te RTL simgeleri
iOS, her görünüme eklenmiş bir UISemanticContentAttribute kavramına sahiptir. Bu unspecified, forceLeftToRight, forceRightToLeft, playback veya spatial olabilir. iOS bu değeri ve görünümün etkiliLayoutDirection'ını belirlemek üzere arayüzü sunan cihazın (soldan sağa (LTR)/RTL ayarını) kullanır. Bu etkiliLayoutDirection, görüntülenen bir resmin yansıtılıp yansıtılmayacağını belirler.
Varsayılan olarak, resimlerin semantik içeriği unspecified değerine ayarlanır. Bu durum, öğelerin RTL modunda yansıtılmasına neden olur. Bir simgenin hiçbir zaman yansıtılmasını istemiyorsanız bunu açıkça forceLeftToRight olarak ayarlamanız gerekir. Apple; medya oynatma (İleri Sarma, geri sarma vb.), müzik notaları, zamanın geçişini gösteren resimler gibi yansıtılmaması gereken bazı istisnalar belirler.
Objective-C örneği:
// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
UISemanticContentAttributeForceLeftToRight;
Swift örneği:
// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;
iOS ve macOS'te RTL'yi uygulama hakkında daha ayrıntılı dokümanlar için lütfen Apple'ın RTL belgelerini inceleyin.
Anlamsal içerik iOS 9'da eklendi. iOS'in önceki sürümlerini destekliyorsa malzeme uluslararasılaştırma çerçevesi, işlevlerin bir kısmını iOS 8'e geri aktarır.
Web'de RTL simgeleri
Web'de RTL'ye giriş için yardımcı olması amacıyla şu makaleyi öneririz: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2
Varsayılan olarak, düzen yönü yansıtıldığında simgeler yansıtılmaz. Gerektiğinde uygun simgeleri yansıtmanız gerekir.
Aşağıdaki örnekte, basit bir RTL CSS kuralının nasıl uygulanacağı gösterilmektedir. Kod kaleminde de görüntüleyebilirsiniz.
page.html
<html dir="rtl">
<img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>
page.css
html[dir="rtl"] .icon {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
ImageMagick kullanarak kendi RTL simgelerinizi oluşturun
Koddaki simgeleri yansıtma seçeneği sunulmuyorsa görüntüyü yatay olarak yansıtmak için ImageMagick'i kullanabilirsiniz.
convert -flop my_icon.png my_icon_rtl.png
Hangi simgeler sağdan sola doğru yansıtılmalıdır?
Programlı bir şekilde RTL'ye yansıtılabilen simgelerin listesi aşağıda verilmiştir:
| geri oku | geri ok iOS | ileri ok |
| ileri ok iOS | sol ok | sağ ok |
| ataması | ödevi geri verildi | geri tuşu |
| pili bilinmiyor | arama yapıldı | çağrı birleştirme |
| Cevapsız arama | Giden araması cevapsız | arama alındı |
| telefon araması bölündü | sol ayraç | Sağda köşeli çift ayraç |
| Chrome okuyucu modu | cihaz bilinmiyor | dvr |
| etkinlik notu | öne çıkan oynatma listesi | Öne çıkan video |
| ilk sayfa | uçağının inişi | kalkışlı uçak |
| biçim girintisini azalt | biçim girintisini artırma | biçim listesi madde işaretli |
| forvet | işlev | ile ilgili giriş |
| klavye sekmesi | etiket | etiket önemli |
| etiketinin dış çizgisi | son sayfa | başlatma |
| listesi | canlı yardım | mobil ekran paylaşımı |
| çok satırlı grafik | önce rotayı izleyin | sonraki rotayı izleme |
| Gelecek hafta | not | yeni pencerede aç |
| oynatma listesine ekle | müziği sıraya koydu | yeniden yap |
| yanıt | tümünü yanıtla | ekran paylaşımı |
| gönderme | kısa metin | grafiği göster |
| sıralama | Yarım yıldız | konu |
| sabit eğilim | içinde | düşüyor |
| yükseliyor | geri alındı | listeyi görüntüle |
| yorganı görüntüle | Metni kaydır: |