Tasarım dili Temeller
Figürler bir mekanizmayı anlatır
Bir diyagram bir şeyin nasıl aktığını gösterir; bir figür tek bir mekanizmanın nasıl karar verdiğini gösterir. Bu sayfadaki 4 figür türü Zerone glifinin yapısından ve sayfaların sergi dilinden kurulur; birini gösteren her sayfa aynı bileşeni kullanır.
Çizim sistemi gliften ve sayfadan doğar.
#Her figür biçimini Zerone glifinden, tavrını içinde durduğu sayfalardan alır. Burada yeni bir üslup yok: figürler logo ve diyagram sayfalarının zaten tanımladığını kullanır.
Nereden gelir
Glif bir çubuktan, 45 derecelik bir çizgiden ve açıklığı olan bir halkadan kurulur. Figürler bu parçaları site derlenirken glifin yolundan ölçer ve onları dolu işaret olarak değil, yapı çizgileri ve biçimler olarak çizer.
Sergi dili sayfalardan gelir: yapı için ince çizgi, makine metni için mono etiket, karar için mürekkep, doğrulanmış sinyal için vurgu rengi. Kart, gölge ve renk geçişi kullanılmaz.
Hangi iş için hangi figür
| Figür | İşi | Ne zaman kullanılır |
|---|---|---|
| DamFigure | Orijinaline karşı bir dosya | Sayfa bir dosyanın, aynı dosyanın meşru orijinaliyle nasıl karşılaştırıldığını anlatıyorsa. |
| EvidenceSpine | Kararla biten kanıt | Sayfa tek bir sonuca götüren kanıt adımlarını sıralıyorsa. |
| RingMark | Tek bir şeyin hâli | Bir cümle bir doğrulama hâlini adlandırıyor ve okur onu bir bakışta görmeliyse. |
| SignalLoop | Sinyale dönüşen gürültü | Sayfa açıklanmamış çok sayıda olayın tek bir bulguya nasıl indiğini anlatıyorsa. |
Diyagramlar sayfasının zaten anlattıkları
Figürler diyagramlar sayfasını izler ve onu tekrarlamaz. Kendini çizme, hareketin yaşam döngüsü ve duraklatma düğmesi orada hareket başlığında, renk rolleri rengin anlamı başlığında, her görselin taşıdığı cümle de metin karşılıkları başlığında tanımlanır.
Baraj orijinalleri saklar.
#Baraj, Zero Door sayfasının iddiasını tek bir sahnede gösterir: bir dosya orijinaliyle eşleştiğinde meşrudur. Zero Door açılışının çizimidir; aynı iddiayı anlatan bir sayfa da aynı figürü kullanır.
Ne gösterir
Akıntı sağ üstten her seferinde bir dosya getirir: Linux ve Windows ile gelen gerçek adlar; her kartta adın üstünde işletim sistemi yazar. Barajın tepesinde oturan bir kunduz, gelen kartı aynı dosyanın meşru orijinalinin yanında tutar; orijinali barajdaki kendi türünün yığınından alır: ikili dosyalar, kütüphaneler ve paketler. Eşleşen dosya orijinalinin mührünü, halka içinde bir tiki alır ve barajın tek açıklığından arkadaki sakin göle geçer. Eşleşmeyen dosyalar, biri Linux biri Windows, ham bir kontur, boş ham bir halka ve tek bir karar etiketiyle kıyıda durur.
Kunduz, Zero Door sayfasının maskotu Castor'dur. Kendi sayfası onun kim olduğunu, sahnenin her parçasının neyi temsil ettiğini ve nerede görünebileceğini anlatır. Maskot Castor
Şüpheliorijinaliyle eşleşmiyor
loop ile baraj: girişten sonra kunduz dosyaları birbiri ardına denetlemeyi sürdürür ve geçişler arasında dinlenir; durdurulan kartlar ve karar girişin bıraktığı yerde kalır. Yanındaki duraklatma düğmesi döngüyü dinlenme karesinde durdurur.Nasıl hareket eder
Giriş suyu, barajı ve yığınları çizer, mühürleri yerine oturtur ve kunduzu getirir. Önce eşleşmeyen dosyalar gelir: kunduz her birinin orijinalini kaldırır, karşılaştırır ve kartı kıyıya bırakır; kart orada ham renge döner. Karar etiketi ilk kart ham renge dönünce açılır. Döngü açıkken sözlükteki her dosya her dönemde sırayla bir kez geçer ve her geçiş, hareket etmeden önce hareket dilinin dinlenme süresinin farklı bir katı kadar bekler. Karara bağlanan hiçbir şey bir daha kıpırdamaz.
Nasıl kurulur
Barajdaki her konum bu ölçülerin ve zamanın bir fonksiyonudur. Ölçüler site derlenirken glifin yolundan, glifin kendi biriminde okunur. Kunduzun duruşu, yüzü ve döngünün ritmi ise aynı modülün adlı sabitlerinde tutulan çizim kararlarıdır.
| Parça | Ölçü | Glifteki kaynağı |
|---|---|---|
| Kart genişliği | 39,97 birim | Çubuğun yarısı |
| Kartın oranı | 0,75 | Glifin genişliğinin yüksekliğine oranı |
| Katlanan köşe | kart genişliğinin 0,27 katı | Çubuğun kalınlığının genişliğine oranı; çizginin açısıyla kesilir |
| Gövde | 50,81 birim | Halkanın dış yarıçapı: sağrı çemberi, gövdenin ve ayakların birimi |
| Baş | 30,03 birim | Halkanın iç yarıçapının 1,03 katı, başın yarı genişliği; iç yarıçap yüzün birimidir |
| Kuyruk | 10,84 birim | Çubuğun yarı kalınlığı: küreğin kısa yarı ekseni |
| Akıntı, katlanan köşe ve kuyruğun pulları | 45 derece | Çapraz çizginin açısı |
| Barajın tepesi | 21,66 birim | Glifin çizgi kalınlığı |
| Çerçeve, kare | 195,38 birim | Türetilir: en uzun dosya adı, 264 px genişliğindeki çizimde 9 px boyunda kartına sığar |
Barajın her parçası glifin bir ölçüsüdür: kart çubuğun yarısıdır, gövde ve baş halkadan, barajın tepesi çizginin kalınlığından gelir.
NedenGlif değişirse baraj onu izler. Elle yazılmış bir koordinat, geldiğini söylediği işaretten zamanla uzaklaşırdı.
TestHer değişiklikte bir testle korunur.
Kartlardaki adlar ve işletim sistemleri Zero Door sayfasının sözlüğünden gelir, İngilizcede ve Türkçede aynıdır; figür kendi metnini yazmaz.
NedenFigür kanıt gibi okunur. Uydurduğu bir dosya adı, kimsenin denetlemediği bir iddia olurdu.
TestHer değişiklikte bir testle korunur.
Kıyıda duran her dosya döngüde kapıdan da geçer; böylece hiçbir gerçek dosya yalnızca şüpheli olarak gösterilmez.
NedenAdlar her sistemle gelen gerçek dosyalardır. Yalnızca kıyıda çizilen bir ad, o dosyaya yöneltilmiş bir suçlama gibi okunurdu.
TestHer değişiklikte bir testle korunur.
Tek vurgu: koyu vurgu orijinalleri, mühürlerini ve suyu işaretler; ham renk yalnızca durdurulan kartlarda görünür.
NedenSitenin her yerinde koyu vurgu doğrulanmış, ham renk doğrulanmamış demektir.
TestHer değişiklikte bir testle korunur.
Karara bağlanan hiçbir şey kıpırdamaz: döngü durdurulan kartlara, halkalarına ve karar etiketine dokunmaz; yanında bir duraklatma düğmesi durur.
NedenKararı silen bir döngü, figürün göstermek için var olduğu sonucu gizlerdi.
TestHer değişiklikte bir testle korunur.
Dinlenme karesi sunucunun çizdiği karedir ve döngünün son karesidir: duraklatıldığında, azaltılmış harekette ve JavaScript olmadan baraj aynı resmi gösterir.
NedenHareketi durdurmak sonucu hiçbir zaman ortadan kaldırmamalı ya da başka bir sonuç göstermemelidir.
TestHer değişiklikte bir testle korunur.
Kanıt bir kararla biter.
#Kanıt omurgası soldan sağa uzanan bir raydır; her kanıt adımı için bir düğüm taşır ve son düğüm karardır. Etiketleri ve metinleri gerçek metindir; bu yüzden o bir resim değil, ekran okuyucuların okuduğu bir listedir.
- Parmak izini alAjan her dosyanın içeriğinden parmak izini alır ve yalnız değişeni bildirir.
- Referans ve karşılaştırmaPlanlı bir değişiklikten sonra referans alın; herhangi iki referansı ya da bir referansı canlı durumla karşılaştırın.
- Meşruiyetİlk soru: orijinal mi?
- MühürleBulgular ve işlemler zincirlenir ve imzalanır; kayıt çevrimdışı doğrulanabilir.
- denetim paketiDenetçinin çevrimdışı doğruladığı kanıt.
Nasıl kurulur
Ray kendini çizer ve her düğüm, ray ona vardığında tek CSS eğrisiyle büyüyerek belirir. Karar düğümü de ötekiler gibi yerine oturur; ardından figür dinlenir. Döngü olmadığı için duraklatma düğmesi de yoktur. Her düğümün işareti, büyük boyundaki bir halka işaretidir: 24 px. Figürün kendisi 760 px genişliğinde ya da daha dar olduğunda ray dikey olur ve düğümler alt alta dizilir; işaretleme değişmez. Böylece dar bir sütundaki figürün düğümleri, geniş bir ekranda da alt alta dizilir.
Hâller isteğe bağlıdır
Bir düğüm, sayfanın doğrulandı, bekliyor ya da başarısız dediği bir adım için kelimesiyle birlikte bir halka hâli taşıyabilir. Hâli olmayan düğüm düz bir mürekkep halkadır ve hiçbir şey iddia etmez. Karar düğümü hiçbir zaman hâl taşımaz: her zaman mürekkeple, tam halkayla çizilir, çünkü karar bir denetim daha değil, bir karardır.
Ekran okuyucu ne duyar
Başlık, figürü taşıyan sayfadan gelen bir cümledir ve figürü adlandırır. Adımlar etiket ve metinle, varsa hâl kelimesiyle birlikte sıralı bir liste olarak okunur. Halkalar ve ray ekran okuyuculardan gizlenir, çünkü gösterdiklerini kelimeler zaten söyler.
Omurga başlığı olan gerçek bir sıralı listedir; halkaları ve rayı ekran okuyuculardan gizlenir.
Nedenİçerik metindir. Etiketli bir resim, adımları göremeyen herkesten saklardı.
TestHer değişiklikte bir testle korunur.
Hâl taşıyan düğüm kelimesini de taşır; karar düğümü hiçbir hâl taşımaz.
NedenBir halka hiçbir zaman kelimesiz çizilmez; bir denetim daha gibi görünen karar ise zayıflardı.
TestHer değişiklikte bir testle korunur.
Düğümler eşit sütunların ortasında durur; ray ilk düğümden karara uzanır.
NedenDiyagramlar sayfasının okuma yönü geçerlidir: kaynak solda, karar sağda.
TestHer değişiklikte bir testle korunur.
Halka tek bir şeyin hâlini söyler.
#Halka işaretleri, glifin halkasından oranlanmış ve her doğrulama hâlinde biçim değiştiren tek bir şekildir. İşaret her zaman kelimesinin yanında durur.
16 px
- Doğrulandı
- Bekliyor
- Başarısız
- İddia yok
24 px
- Doğrulandı
- Bekliyor
- Başarısız
- İddia yok
| Hâl | Kelime | Biçim |
|---|---|---|
| verified | Doğrulandı | Koyu vurgu renginde tam bir halka. |
| pending | Bekliyor | Glifin açıklığını taşıyan halka, ikinci ince çizgi renginde: işaret henüz kapanmadı. |
| failed | Başarısız | Deliğinin alt yarısı ham renkle dolu tam bir halka; başarısız kanıt da karar hapını böyle doldurur. |
| neutral | İddia yok | Tepesinde tek bir çentik olan, mürekkep renginde tam bir halka; karar hapının kenarındaki gibi. |
Gliften gelen oranlar
İşaretin bandı dış yarıçapının 0,43 katıdır; glifin halkasındaki oran da budur. Bekleyen hâlin açıklığı merkezden bakınca 36 derecelik bir açı kaplar; bu, glifin açıklığının bandın ortasında kapladığı açıdır ve açıklık glifte olduğu gibi sağ üste bakar. İşaret 16 px ve 24 px boylarında çizilir.
Renk tek başına taşımaz
Hâli biçimi ve kelimesi söyler; renk yalnızca onu tekrarlar. Koyu vurguyu hamdan ayıramayan bir okur da tam bir halkayı, açıklığı olan bir halkayı, dolu bir deliği ya da bir çentiği görür ve yanındaki kelimeyi okur.
Önem derecesi için kullanılmaz
Halka işaretleri doğrulama hâllerini adlandırır. Önem dereceleri ürünün durum simgelerine aittir ve onların renkleri başka hiçbir şey için ödünç alınmaz. Renklerin nasıl atandığı
Her hâlin çizimi ayrıdır: alt yol sayısı da geçtiği noktalar da farklıdır.
NedenRenk hiçbir zaman bir hâli tek başına taşımaz.
TestHer değişiklikte bir testle korunur.
Bant oranı ve açıklık açısı elle yazılmaz, glifin halkasından okunur.
Nedenİşaret, geldiği logonun oranlarını korur.
TestHer değişiklikte bir testle korunur.
Halka işareti kelimesini her zaman metin olarak basar ve biçimini ekran okuyuculardan gizler.
NedenEkran okuyucunun duyduğu ve renkleri ayıramayan okurun okuduğu şey kelimedir.
TestHer değişiklikte bir testle korunur.
Halka işaretleri önem dereceleri için kullanılmaz.
NedenÖnem derecesi doğrulama hâlinden farklı bir sorudur ve ürün onu zaten kendi simgeleriyle yanıtlar.
İncelemeBir testle değil, incelemeyle korunur.
Gürültü sinyale dönüşür.
#Döngü, ana sayfanın mekanizmasını küçük bir çerçevede gösterir. Bir alana dağılmış kısa ham çizgiler tek bir noktada birleşir; o noktadan tek bir vurgu teli çıkar ve kalır.
Ana sayfadaki büyük biçim
Ana sayfanın açılışı aynı figürün tuvale çizilmiş büyük biçimidir. İkisi aynı sabitleri okur: odak yüksekliğin 0,56 katında durur, mühür 16 px ve 26 px boyunda halkalarla kapanır, tel de hero'nun dalga boyunu genişliğin bir payı olarak korur. Hero 3 teli birlikte örer ve odağını genişliğin 0,55 katına koyar; küçük biçim yalnız bir teli tutar ve odağını 0,3 katına çeker ki gürültünün gelecek yeri olsun.
Dinlenirken
Azaltılmış harekette ve JavaScript olmadan döngü birleşmiş hâlini gösterir: tel, mühür halkaları ve odak görünür, ham çizgi görünmez. Duraklatılmış döngü de aynı kareyi gösterir.
Döngü kendini belli eder: çalışmaya başlayınca
data-ambienttaşır; sayfa da yanına bir duraklatma düğmesi koyar.NedenSürüp giden hareket okura onu durdurmanın bir yolunu vermelidir.
TestHer değişiklikte bir testle korunur.
Duraklatma düğmesi döngüyü durdurur; döngü dururken tel çizili kalır.
NedenHareketi durdurmak sonucu hiçbir zaman ortadan kaldırmamalıdır.
TestHer değişiklikte bir testle korunur.
Dağılım tohumlu bir üreteçten gelir; her derleme aynı alanı çizer ve hiçbir şey
Math.randomçağırmaz.NedenHer derlemede değişen bir figür ne incelenebilir ne de sınanabilirdi.
TestHer değişiklikte bir testle korunur.
Küçük biçim hero ile paylaştığı sabitleri kullanır; bir test her birini hero'nun kaynağında bulur.
NedenSayfa ikisinin tek bir figür olduğunu söyler. Bu cümle yalnızca sayılar tuttuğu sürece doğrudur.
TestHer değişiklikte bir testle korunur.
Figürlerin nerede kullanıldığı burada görünür.
#Bu tablo site derlenirken sitenin kaynağından okunur. Her figür için, tasarım dilinin dışında onu bir bileşen aracılığıyla ya da bir yazının metninde içe alan sayfaları ve figürün orada neyi gösterdiğini listeler.
4 figür türünden 3 tanesi tasarım dilinin dışındaki bir sayfada yer alıyor: DamFigure, EvidenceSpine ve RingMark. Sayfası olmayan figür bunu açıkça söyler.
| Figür | Sayfa | Ne gösterir |
|---|---|---|
| DamFigure | Zero Door | Açılış sahnesi: her dosya orijinaliyle karşılaştırılır |
| EvidenceSpine | Çözümler | Sektörün, teslim edilene varan kanıt noktaları |
| EvidenceSpine | Araştırma · The stealthy Linux threat, and what Zero Door sees | Bir Symbiote bulaşmasının geride bıraktığı izler ve Zero Door'un bunlarla ne yaptığı |
| RingMark | Çözümler · Savunma ve kamu | Doğrulayıcının PASS ya da FAIL sonucu |
| RingMark | Zero Door | Eşleşmeyen katalog imzası |
| SignalLoop | Henüz kullanılmıyor |
Bir figürü gösteren sayfa onun bileşenini içe alır, çizimini hiçbir zaman kopyalamaz.
NedenTek kaynak her örneği aynı tutar; bu tablo da yalnızca içe almaları görebilir.
TestHer değişiklikte bir testle korunur.
Her figür bu kurallara uyar.
#Bu kurallar sitedeki her figür için geçerlidir: bu sayfadakiler ve sonradan eklenecek her figür için. Bir kuralı bir test tutuyorsa kart bunu söyler.
Figür, metnin zaten anlattığı bir mekanizmayı açıklar. Gösterdiği her metin onu taşıyan sayfadan gelir; uydurma veri, sayı ya da yüzde taşımaz.
NedenFigür kanıt gibi okunur. Uydurduğu bir sayı, kimsenin denetlemediği bir iddia olurdu.
TestHer değişiklikte bir testle korunur.
Geometri modüllerden gelir: glif ölçüleri glifin yolundan, yerleşim saf bir fonksiyondan, süreler ve eğriler hareket dilinden. Hiçbir çizim öğesi elle koordinat yazmaz.
NedenElle yazılmış bir sayı kopyalandığı kaynaktan zamanla ayrılır ve bunu kimse fark etmez.
TestHer değişiklikte bir testle korunur.
Glifin kendisi hiçbir zaman yapıştırılmaz, dış hattı çıkarılmaz ya da konturlenmez. Figürler onun yapısını yapı çizgileri ve biçimler olarak kullanır.
NedenLogonun tek bir kaynağı vardır ve yalnızca kendisi olarak gösterilir. Kopyası çıkarılmış ya da dış hattı çizilmiş bir glif ikinci bir logo olurdu.
TestHer değişiklikte bir testle korunur.
Renk, diyagramlar sayfasının rollerini izler ve yalnızca tokenlardan gelir. Önem derecesi renkleri hiçbir zaman ödünç alınmaz.
NedenSitenin her yerinde koyu vurgu doğrulanmış, ham renk doğrulanmamış demektir. Onları başka türlü kullanan bir figür yanlış okumayı öğretirdi.
TestHer değişiklikte bir testle korunur.
Hareket hiçbir zaman saydamlığı canlandırmaz. Çizgiler kendini çizer, biçimler ölçeklenir ya da yer değiştirir; azaltılmış hareket son hâli gösterir.
NedenSolma neyin değiştiğini gizler; çizim onu gösterir.
TestHer değişiklikte bir testle korunur.
JavaScript olmadan ve azaltılmış harekette her figür son hâlini gösterir ve sayfada hiçbir şey kıpırdamaz.
NedenFigürün amacı sonuçtur. Hareketi göremeyen ya da görmek istemeyen okur da sonuca ulaşır.
TestHer değişiklikte bir testle korunur.
Anlam taşıyan çizilmiş bir figür
role="img"olur ve etiketi sözlükten gelen bir cümledir. İçeriği metin olan bir figür, örneğin kanıt omurgası, bunun yerine başlığı olan gerçek bir listedir.NedenEkran okuyucu kullanan okur, gören okurla aynı sonuca bir cümleyle ya da kelimelerin kendisiyle ulaşır.
TestHer değişiklikte bir testle korunur.
Her figürün tek bir bileşeni ve tek bir geometri modülü vardır;
role="img"taşıyan her yayındaki figür diyagramlar sayfasının envanterinde yer alır.NedenBirden çok yerde çizilen bir figür zamanla ayrışır; envanterde olmayan bir figür de denetimlerinden kaçar.
TestHer değişiklikte bir testle korunur.
Dar bir telefon genişliğinde hiçbir şey taşmaz.
NedenYana kayan bir figür sonucu taşıyan parçasını kaybederdi.
TestHer değişiklikte bir testle korunur.
Sitenin kırılımının altında ya da bir figürün durduğu sütun dar olduğunda, figürün parçaları aynı işaretlemeyle alt alta dizilebilir; kanıt omurgası kendi genişliğini ölçer.
NedenDar bir sütuna sıkışan bir omurga adımlarını ezerdi. Kendini ölçtüğü için yalnız telefonda değil, dar kaldığı her yerde alt alta dizilir.
TestHer değişiklikte bir testle korunur.