Tasarım Sisteminize Animasyon Dahil Etme

(Bu makale Adobe tarafından desteklenmektedir.) Tasarım sistemleri tüm şekil ve boyutlarda gelir, ancak Sparkbox'ın tasarım sistemi anketinde belirtildiği gibi, hepsi animasyon için yönergeler içermez. Elbette, bazı ekipler, hareketin ürünlerinin rehberliğe ihtiyaç duymadığına karar vermiş olabilir, ancak bazı durumlarda, neyin dahil edileceğinden emin olmadıkları için hareketin dışarıda bırakıldığından şüpheleniyorum.

Geçtiğimiz birkaç yılda, hareketin ele alınması gereken bir konu olduğunu düşündüklerini kabul eden, ancak nasıl yapılacağından emin olmayan birçok ekip ve tasarımcıyla konuştum. Eğer o teknedeyseniz, şanslısınız. Bu makale, tasarım sisteminiz için bir dizi hareket kılavuzuna nelerin dahil edileceği ve nasıl çıkarılacağı hakkındadır.

Neden Animasyon?

Animasyon, hem UX hem de marka mesajlaşması için önemli bir tasarım aracıdır. Tipografi ve renk gibi, kullandığınız animasyon da ürününüz ve kişiliği hakkında bir şeyler söylüyor. Bu nedenle, bir tasarım sisteminde ele alınmadığında, bu sistem esasen UI tasarım araçlarının bu alanını hesaba katmaz. Ardından, tasarım sistemini takip eden insanlar ya animasyonla istediklerini yaparlar - bu, deneyim boyunca garip bir animasyon yürütme karışımına yol açabilir - ya da anlamaya zamanları olmadığı için animasyonu hiç kullanmazlar. tüm detayları kendileri çıkar. Her iki durum da ideal değildir.

Tasarım sisteminizde animasyonun nasıl kullanıldığı (veya kullanılmadığı) konusunda net bir duruşa sahip olmak, markanızın animasyonu tutarlı ve etkili bir şekilde kullanmasını sağlarken ekibinizin daha hızlı çalışmasına yardımcı olabilir. Tasarım sisteminiz için bir dizi hareket yönergesine başlamak için ayrıntılı bir inceleme yapalım.

Temel Çalışma: Neleri Kapsamanız Gerektiğinin Tanımlanması

Önce İnsanlarla Konuşun

Jina Anne'nin dediği gibi, "Tasarım sistemleri insanlar içindir." Yaratmakta olduğunuz tasarım sistemini kullanacak kişilerle konuşmanın, insanların gerçekten kullanacağı bir tasarım sistemi oluşturmanın anahtarı olduğu tavsiyesini sık sık duydum. Bu, animasyon etrafında oluşturduğunuz yönergeler için de geçerlidir. Bundan kazanabileceğiniz en büyük şey, neye ihtiyaçları olduğunu ve neye odaklanmaları gerektiğini bulmaktır. Bu, yönergelerinizde kapsamanız gerekenler için uygun bir kapsam belirlemenize yardımcı olur. Hiç kimse, ekibinizin gerçekten ihtiyaç duyacağından daha fazlasını ele alan kapsamlı yönergeler üzerinde saatler harcamak istemez. Bu hiç eğlenceli (veya kullanım) olmaz.

Ekibiniz size animasyondaki sorunlu noktaları önceden haber vermeyebilir, ancak bu onların hiç olmadığı anlamına gelmez.

“

Bazı kullanıcı görüşmeleri ayarlayın (tasarım sisteminizin kullanıcıları) ve onlara animasyonla nerede takıldıklarını sorun. Onlara animasyonu nasıl/kullanıp kullanmadıklarını ve animasyonun tasarım süreçlerinde nerede olduğunu sorun. Karşılaştıkları acı noktalarında nelere yardımcı olmak istediklerini sorun. En önemlisi, işlerinde animasyon kullanma hakkında nasıl konuştuklarını ve nelerin iyi gittiğini veya çok iyi gitmediğini dinleyin.

Her takım farklı olsa da bu araştırmayı yaparken en sık duyduğum endişeler ve sorular: “Bir animasyonun iyi olduğunu veya markamıza uyduğunu nasıl anlarım?”, “Animasyon detaylarını nasıl iletebilirim?” mühendislerimize etkili bir şekilde mi?" veya "Geliştiricilerimiz her zaman tasarladığımız animasyonları uygulamak için zaman olmadığını söylüyorlar."

Muhtemelen bununla nereye gittiğimi tahmin etmişsinizdir, ancak tüm bu endişeler, hareket yönergelerinizde yanıt vermenize yardımcı olabileceğiniz şeylerdir. Ve hareket kılavuzu çabalarınızı yönlendirmek ve odaklamak için en sık ortaya çıkan soruları ve acı noktalarını kullanabilirsiniz.

Referans Diğer Sistemler

Her tasarım sistemi herkese açık olmak zorunda değil, ancak birçoğunun böyle olması harika. Tasarım sisteminizi planlarken yararlı bir kaynak oluştururlar ve tasarım sisteminizin hareket yönergeleri için de yararlı bir araştırma olabilirler. (Aslında, bu makalede bunlardan birkaçına atıfta bulunacağız.)

Kendi tasarım sisteminiz için referans olarak diğer hareket bölümlerini kullanmak çok faydalıdır, ancak kendi markanızın yerine başka bir markanın hareket yönergelerini toptan olarak benimsemenizi önermiyorum. Hayır, Material Design'ın hareket yönergeleri olsa bile.

Material Design'ın hareket bölümü, Google'ın hareket yönergelerini ele almasıdır. İyi bir tane, evet, ama amacı size Google yolunu nasıl canlandıracağınızı göstermek. Google ekosistemi için bir şeyler yapıyorsanız (veya kasıtlı olarak öyleymiş gibi görünmek istiyorsanız) bu mükemmel. Ama hedefiniz bu olmadığında bu uygun değil. Ürününüzde başka bir markanın renklerini veya yazı tipini kullanmazsınız, bu nedenle başka bir markanın hareket yönergelerini de takip etmeyin.

En etkili tasarım sistemleri, kendilerine özgü markalı bir bakış açısını (tasarım sistemlerini bulundukları ürüne daha özel kılan şeyleri) ve ortak tasarım en iyi uygulamalarını içerir . Diğer sistemlerin hareket yönergelerini araştırmak ve okumak için biraz zaman ayırın ve hangi parçaların en iyi uygulamalar olduğu ve hangi parçaların o marka veya ürünün bakış açısına göre özelleştirildiği konusunda bir fikir edinmeye başlayın. Ardından, yönergelerinize hangi en iyi uygulamaları dahil etmek isteyebileceğinize ve ürününüz için yönergeleri nerede özelleştireceğinize karar verebilirsiniz.

Örneğin, çıkışlar için kolaylıklar ve girişler için kolaylıklar kullanmak, kullanıcı arayüzü animasyonu için en yaygın en iyi uygulamadır. Ancak tam genişleme veya gevşeme eğrisi genellikle bir markanın amaçlanan mesajına ve kişiliğine göre özelleştirilir.

Dan Mall'dan alıntı yapmak için:

“Bu, bir tasarım sisteminin kılavuz ilkelerine sahip olması gereken türden bir şeydir: perspektif, bakış açısı, tasarım sistemiyle bir şeyler inşa etmeye karar veren herkese yaratıcı yönün genişletilmesi. Bu şeyler fırınlanmalıdır.”

Tamamen katılıyorum.

Bir Tasarım Sisteminin Hareket Yönergelerinin İki Ana Bölümü

Bu iki bölüme sahip olmanız gerektiğini belirten belirli bir kural yok, ancak bu dökümü, üzerinde çalıştığım hareket yönergelerine yaklaşmanın etkili bir yolu olarak buldum. Ayrıca, hareketi ele alan çoğu tasarım sisteminin de bu iki kategoriye sahip olduğunu fark ettim, bu yüzden başkaları için de işe yarayan bir yaklaşım gibi görünüyor.

İki ana bölüm şunlardır:

1. Hareket Prensipleri
   İlkeler tipik olarak o markanın hareketi nasıl kullandığını açıklayan üst düzey ifadelerdir. Bunlar, markanın animasyonu neden kullandığının ve ona bakış açısının arkasındaki büyük resim bakış açısı veya tasarım amacıdır.
2. uygulama
   Bu bölüm, bu ilkelerin tasarım ve/veya kodda pratik olarak nasıl uygulanacağına odaklanmaktadır. Tasarım sistemi için animasyonun yapı taşları olarak hizmet eder ve kapsadıkları detay miktarı marka ihtiyaçlarına göre değişir.

Hareket Prensipleri

İlkeler bölümü, marka değerlerinizi animasyonla ilgili olarak belirteceğiniz yerdir. Tasarım kararlarını ölçmek için üst düzey ilkelerdir ve animasyonla ilgili bazı belirli tanımları veya değerleri belirtmek için bir yerdir. İlkeler genellikle belirli bir tasarım sistemi içinde animasyon kullanmanın “nedenine” ve hizmet ettikleri UX odaklı amaca odaklanma eğilimindedir. Çoğu durumda, tasarım sistemleri bunları hareket bölümlerinde İlkeler başlığı altında listeler. Ancak, kendilerine özel bir bölüm içermeyenlerde de ilke kavramının mevcut olduğunu görebilirsiniz.

Hareket ilkeleriniz, markanızın sahip olabileceği mevcut küresel tasarım ilkelerinden sonra modellenebilir, ses ve ton yönergeleri gibi şeylerden tahmin edilebilir veya hatta bir hareket denetiminde ürününüzün mevcut UI animasyonlarına bakmaktan çıkarılabilir.

Bunların nasıl gerçekleştiğine dair daha iyi bir fikir edinmek için bazı örneklere bakalım. Microsoft'un Fluent tasarım sistemi, hareket ilkelerini fiziksel, işlevsel, sürekli ve bağlamsal olarak listeler. Kullanıcı arayüzü animasyonuna nasıl uygulandığını açıklamak için her birinin kısa bir açıklamasını ve resmini içerirler.

Audi'nin ayrı bir ilkeler bölümü yok, ancak animasyon bölümüne neden animasyon kullandıklarını açıklayarak başlıyorlar, bu da tasarım sisteminde ne tür bir hareketin kullanılacağına zemin hazırlıyor, tıpkı bir ilke gibi. . Şunları belirtirler:

“Dinamik premium mobiliteyi temsil ediyoruz. Bu nedenle Audi görünümündeki hareketler tipik olarak dinamik bir karaktere sahiptir.”

Adobe'nin tasarım sistemi Spectrum için hareket bölümünü geliştirirken, sistemin diğer bölümlerinde kullanılan desene uygun bir ilkeler bölümü seçtik. Spectrum'da animasyon, amaçlı, sezgisel ve kusursuz olmayı amaçlar.

Not : Spektrum, bu yazının yazıldığı sırada halka açık bir siteye sahip değildir.

Bunları nasıl sunmaya karar verirseniz verin, tasarım sisteminizin animasyon ilkeleri hem sistemin animasyonla ilgili beklentisini oluşturmak hem de tasarım sisteminin uygulandığı ürün(ler) için gelecekteki potansiyel UI animasyonunu değerlendirmek için kullanılabilir. Örneğin, Fluent tasarım sistemini takip eden bir tasarımcı, bir bileşene büyük bir sıçrayan animasyon eklemek isterse, bunun hareket ilkelerini karşılayıp karşılamadığı konusunda tartışmalar olabilir. (İşlevsel ve süreklilik ilkelerine uyuyor mu?) Daha sonra söz konusu animasyonun belirtilen ilkelerden ayrılmayı garanti edip etmediğine veya animasyonun ilkelere uygun olarak yeniden tasarlanıp tasarlanmamasına karar verilebilir.

Bu, tasarım tartışmalarını “beğendiniz mi?” sorusundan uzak tutmaya yardımcı olur. veya kişisel fikir alanıdır ve animasyonu daha pragmatik tasarım odaklı bir şekilde değerlendirmek için bir yapı sağlar. Hareket ilkelerini beyan etmenin en sevdiğim avantajı bu; çok fazla animasyon deneyimi olmayan kişiler için bile animasyonu anlamlı bir şekilde tartışmayı çok daha kolay hale getiriyorlar.

Hızlı İpucu : Daha fazla hareket ilkesi referansı için Photon'un hareket ilkelerine, Malzeme Tasarımı hareket ilkelerine ve Carbon'un hareket ilkelerine bakın. Dışarıda başkaları da var, ama bunlar iyi bir başlangıç.

uygulama

Hareket ilkeleri, bazı üst düzey rehberlik için harikadır, ancak bunların tam olarak nasıl uygulanacağına dair bazı ayrıntılar olmadan, animasyonu tasarım sisteminize dahil etmenin zaman kazandıran en büyük avantajlarını kaçırmış olacaksınız. Uygulama bölümü (nadiren böyle bir başlık olsa da), ekibinizin animasyonla ilgili sahip olduğu “nasıl” ve “ne” sorularının çoğunu yanıtlamaya yardımcı olur. Amaç, tasarım sistemini takip eden herkes için akıllı varsayılanlar sağlamaktır. Bu şekilde, her animasyon için sürelerle ve yumuşatmalarla oynamak yerine, yönergelerde sağladığınız akıllı varsayılanları kullanabilir ve yola çıkabilirler. Ayrıca, kullanıcı arayüzü animasyonunuzu pano genelinde çok daha tutarlı hale getiren çok büyük bir zaman kazandırıcıdır.

Uygulama yönergeleri, pek çok tasarım sisteminin yaklaşım ve kapsam açısından ayrıldığı yerdir. Eklediğiniz ayrıntı miktarı ve bu yönergelerde ele aldığınız konular , tasarım çalışmalarınızda animasyonun ne kadar büyük bir rol oynadığına ve ekibinizin neye ihtiyacı olduğuna bağlı olacaktır. Örneğin, Photon'un uygulama bölümü yalnızca bir süre ve bir hareket hızı eğrisi içerirken, Materyal Tasarımı'nın süresi ve hareket hızı ile ilgili ayrı bölümlerin yanı sıra uygulama ayrıntılarıyla dolu ek sayfalar içerir.

Hareket bölümü için mükemmel bir uzunluk yoktur; bu, belirli sayıda sayfaya veya kurala ulaşmaktan çok, ekibinizin ihtiyaç duyduğu ayrıntıları ele almakla ilgilidir. Hareket yönergelerinize dahil etmeniz gereken animasyon yapı taşlarından bazıları şunlardır:

• Animasyon Süreleri
• Kullanılan yumuşatma değerleri
• Adlandırılmış efektler

Listedeki ilk üç, animasyonu özelleştirmenin veya stil vermenin ana yollarıdır. Animasyon için kullanılan özellikler, süreler ve yumuşatmalardaki farklılıklar, animasyonların nasıl göründüğünü büyük ölçüde etkileyebilir. (Ve sonuncusu, ilk üçünü paketlemenin bir yoludur.)

Her birini daha ayrıntılı olarak inceleyelim ve bunların her biri için bazı yaygın en iyi uygulamalara ve kendi özelleştirilmiş yorumunuz için yer olan yerlere işaret edeceğim.

Süreler, Aralıklar ve Ritim

Süre, animasyonların ne kadar uzun olması gerektiği ile ilgilidir ve UI animasyonundan bahsederken bu değerler çok kısa olma eğilimindedir. Bir saniyenin kesirlerinde ne kadar çok bilgi aktarabildiğimiz şaşırtıcı! Bu, animasyonun önemli bir yönüdür, bu nedenle hareket yönergelerine sahip her tasarım sistemi bunu kapsar, ancak bunu çeşitli şekillerde yaparlar.

Çoğu hareket kılavuzunda ele alındığını göreceğiniz süre ile ilgili en iyi uygulamalardan bazıları şunlardır:

• Daha basit efektler ve nispeten küçük boyutlu animasyonlar (solma veya renk değişiklikleri gibi) için daha kısa süreler kullanılmalıdır;
• Daha karmaşık efektler ve daha büyük göreli ölçekli animasyonlar için daha uzun süreler kullanılmalıdır (örneğin, sayfa geçişleri veya ekran üzerinde ve dışında hareket eden nesneler);
• Optimal zamanlama, görüntü alanı boyutuna göre değişebilir. Her bir yönerge grubunun özellikleri değişiklik gösterse de - hatta bazen büyük ölçüde - bu ortak en iyi uygulamaları neredeyse hepsinde göreceksiniz. Farklı sistemler, "kısa" veya "uzun" sürelerin tam olarak ne olduğuna dair farklı tanımlara sahiptir ve ikisi arasındaki fark konusunda değişen miktarlarda ayrıntıya girer. Ayrıca, en iyi animasyon uygulamasından çok bir tasarım sistemi meselesi olsa da, belirtilen süre değerleriniz için tasarım belirteçleri sağlamak burada da dikkate alınması gereken yararlı bir şeydir.

Carbon, söz konusu animasyon türüne göre kısa bir süre değerleri tablosu sağlar. Materyal Tasarımı, animasyonun kapsadığı göreceli alanın yanı sıra animasyonun karmaşıklığına dayalı olarak kategorilerdeki süre hızıyla ilgili önerileri bozar. Pluralsight farklı bir yaklaşım benimsiyor ve sevimli hayvanlarla eşleştirilmiş farklı süreler için bir dizi anahtar kelime sağlıyor.

Kolaylaştırıcı Değerler

Kolaylaştırma yönergeleri için bir numaralı tavsiyem, kendi özelleştirilmiş eğrilerinizi oluşturmanız ve yalnızca CSS varsayılanlarını kullanmamanızdır. Bu, markanız için tutarlı bir hareket ilişkisi oluşturmanın en etkili yoludur ve Sarah Drasner'ın dediği gibi: "hareket eşitliği" oluşturun. Yalnızca üç eğriyle sağlam bir zeminde olacaksınız: özel bir hareket kolaylığı, içeri girme kolaylığı ve dışarı çıkma kolaylığı. Ve gerekirse daha fazlasını ekleme seçeneği her zaman vardır.

Hızlı İpucu : Yavaşlatma eğrilerine nereden başlayacağınız konusunda tamamen şaşkınsanız, easings.net'teki Penner Easing denklemlerine göz atın. Bunlar size güzel görünen hareketler sağlamak için tasarlanmıştır ve kolay kullanım için üçlü gruplar halinde gruplandırılmıştır. CSS varsayılanlarından çok daha anlamlı ve esnektirler. Hareket yönergelerinizde bunlardan bir set kullanmak, başlamak için harika bir yer olabilir.

Temel Kolaylaştırma İşlevleri

Çeşitli animasyonlar için tüm temel hareket hızı ihtiyaçlarınızı karşılayacağından, üç temel hareket hızı eğrisi tanımlamanızı öneririm.

• kolaylık
  Bu eğri, bir nesneyi görüş alanının dışına taşımak için iyi okunan herhangi bir harekete başladığında hızlanan eğridir.
• kolaylık
  Bu eğri nesnelerin durmadan önce yavaşlamasına neden olur ve bu da nesneleri görüş alanına getirmenin daha doğal bir hissini verir.
• giriş çıkış kolaylığı
  Adından da anlaşılacağı gibi, bu eğri ilk ikisinin özelliklerini birleştirir ve öğeleri bir noktadan diğerine taşımak için en iyisidir.

Bu üç özel eğriyle, neredeyse tüm animasyon ihtiyaçlarınızı karşılamış olacaksınız.

Spectrum için tam olarak bunu yaptık ve her birinin hangi tür animasyonlar için kullanılacağına ilişkin önerilerle birlikte üç özel hareket hızı eğrisi oluşturduk. (Bu eğrileri, mevcut animasyona bakarak ve bazı hareket çalışmalarıyla deneyler yaparak bulduk.)

Carbon ve Pluralsight benzer bir yaklaşımı benimser, önerilen kullanımlara sahip üç eğri belirler ve bir tanesini şüpheli durumlarda kullanılacak varsayılan eğri olarak belirler. Bazı durumlarda, tüm animasyonlarda kullanım için tek bir eğri tanımlayan (Photon'un yaptığı gibi) yalnızca bir özel hareket hızı eğrisine sahip olmanız gerektiğini hissedebilirsiniz.

Hareket hızı eğrilerinin yanı sıra, ilişkili tasarım belirteçleri, dile özgü kod (CSS, JS, iOS ve/veya Android için) veya ekibinizin kullandığı araçlara bağlı olarak After Effects ana kare hızları gibi bazı destekleyici bilgiler sağlamak yararlı olur. Bu, kullanım kolaylığına katkıda bulunur ve hareket yönergelerinizdeki akıllı varsayılanları en az dirençli yol yapmanıza yardımcı olur.

Eğrinin görsel bir gösterimi ve eğrinin etkileşimli örnekleri de, hareket hızı eğrilerinin nasıl çalıştığını ve neye benzediklerini hızlı bir şekilde göstermek için büyük bir artıdır. Anlatmak yerine göstermenin gücünü asla küçümsemeyin. (Ya da anlatmakla birlikte göstermek!)

Kolaylaştırıcı Hiyerarşi

Bir hareket hızı hiyerarşisi eklemek, işleri üç temel özel eğriden biraz daha ileriye götürmenin bir yoludur. Bu, özellikle tasarım mesajlarını iletmek için hareketi temel bir yöntem olarak kullanan markalar için faydalı olabilir. Tıpkı yazımda olduğu gibi, belirli animasyonları diğerlerinden daha fazla öne çıkarmanın bir yolunu isteyebilirsiniz. Daha güçlü bir şekilde öne çıkan animasyonlar, belirli bir noktayı veya etkileşimi vurgulamak için kullanılabilir. Bu durumlarda, yumuşama eğrilerinizi diğerlerinden öne çıkacak daha çarpıcı bir eğriye sahip olacak şekilde yapılandırmak yararlı bir teknik olabilir.

İyi Bir Başlangıç ​​İçin

Bu noktada, ilkelere ek olarak süreleriniz ve kolaylaştırma bölümleriyle donanmış olarak, sağlam bir dizi hareket yönergesine sahipsiniz. Hareket yönergelerinizin bir sürümü veya tasarımında büyük ölçüde harekete bağlı olmayan bir marka için ihtiyacınız olan tek şey bu olabilir. Zaman sıkıntısı çekiyorsanız, süreler ve yumuşatma için akıllı varsayılanlar oluşturmak, hareket yönergeleri oluşturmanın faydalarını görmeye ve ekibinize zaman kazandırmaya yetecek kadar ileri gidecektir.

Adlandırılmış Etkiler

Kullanılacak adlandırılmış efektlerin bir listesini veya bir animasyon kitaplığı sağlamak, hareket yönergelerinizde olması yararlı olabilir. Tüm tasarım sisteminin hareket yönergeleri bunlara sahip değildir, bazıları animasyon yönergelerini bileşenlerine (veya aynı zamanda) yerleştirmeyi tercih eder ve bazıları bu ayrıntı düzeyine ihtiyaç duymaz.

Bununla ilgili bir uyarı: daha fazlası her zaman daha iyi değildir . Tasarım sisteminizin bir parçası olarak büyük bir animasyon kitaplığına sahip olmak harika görünebilir, ancak ne kadar çok efekt listelerseniz, bu efektleri korumak için o kadar fazla zaman ve çaba harcanacaktır. Kendiniz ve ekibiniz için büyük bir zaman kaybı yaratmaktan kaçınmak için, adlandırılmış efektler koleksiyonunu olabildiğince küçük yapmanızı öneririm.

Hareket kılavuzlarında bir efekt kitaplığı sağlamaya yönelik iki yaklaşım vardır. Bir yaklaşım, Lightning tasarım sisteminin bunu yapma şeklidir ve daha karmaşık animasyonlar oluşturmak için ayrı ayrı veya birlikte oluşturulabilen küçük animasyon efektleri (eğer yapacaksanız animasyon molekülleri) içeren bir kitaplık sağlar.

Diğer yaklaşım, Audi'nin gösterme ve gizleme, dönüştürme, kaydırma ve bindirme efektleri için yaptığı ve Fluent'in sayfa geçiş efektleri için yaptığı gibi daha kapsamlı ve amaca özel efektler sağlamaktır. Her iki yaklaşım için de tasarım gerekçesini ve her biri için özel kod uygulamalarını sağlamak faydalıdır.

Hızlı İpucu : Araştırma için ek hareket yönergeleri arıyorsanız, Adele, hareket gibi konulara göre filtrelemenize olanak tanıyan bir tasarım sistemi koleksiyonudur ve styleguides.io, genel tasarım sistemlerini bulmak için de her zaman harika bir kaynaktır.

Tasarım Sisteminizde Başka Yerlerde Hareket Gelebilir

Tasarım sistemleri tüm şekil ve boyutlarda gelir. Ve çoğu durumda bu animasyon yönergeleri tasarım sistemlerinizin DNA'sına veya bileşenlerine işlenir. Bunun nasıl yapılacağı, burada ele aldıklarımızın kapsamı dışındadır, ancak, animasyon bilgilerini adlandırılmış efektler bölümü yerine bileşene özel sayfalara dahil etmenin de yararlı olabileceğini belirtmek isterim. Her şey ekibiniz ve tasarım sisteminiz için neyin en iyi olduğuna bağlıdır.

Ek olarak, tasarım sisteminizin bu bölümlerinde, bileşenlere ilişkin yönergelerde veya hareket bölümünün kendisinde animasyon için performans ve erişilebilirlik hususlarını belirtmek yararlı olabilir. Performans ve erişilebilirlik hedefleri, tasarım çalışmalarımızın tüm yönlerini etkiler ve animasyon burada bir istisna değildir.

Bazı Ayrılık Düşünceleri

Umarım bu makale, tasarım sisteminize hareket yönergeleri eklemenin inanılmaz derecede yararlı olabileceğini göstermeye ve bir tane oluşturma sürecinin gizemini çözmeye yardımcı olmuştur. Tasarım sisteminizde animasyonu ele almak, ürününüzün tasarımının tutarlılığı için faydalı olabilir ve aşırı zaman alan bir çaba olmak zorunda değildir.

Hareket yönergeleriniz üzerinde çalışırken, hareket yönergelerinizin mükemmel olmasını beklemek yerine aşamalı olarak çalışmanızı tavsiye ederim . Bir sürümün eklenmesi ve güncellenmesi amacıyla göndermek, siz, yönergeleri yazan kişi veya kişiler için çok daha kolaydır ve yararlı yönergeler oluşturduğunuzdan emin olmanıza yardımcı olabilir.

Bazı ayrıntıların eksik olduğunu bildiğiniz bir şeyi paylaşmak ne kadar zor olsa da, hareket yönergelerinizin bir sürümünü göndermek ve ardından yönergelerin ilk sürümünün onlara nasıl yardımcı olduğunu görmek için ekibinizle tekrar konuşmak son derece yararlı olabilir ve hangi ağrı noktaları hala bir faktördür. Bu yinelemeli yaklaşım, yönergelerinizin en alakalı konuları kapsamasına ve bunları ekibinizin ihtiyaçlarına göre uyarlamanıza izin vermede çok ileri gidebilir. Her ikisi de faydalı bir sisteme sahip olmak ve gereksiz ekstra çabadan kaçınmak için iyidir.