Eskiz Öğreticileri

InVision’ın Yeni Tasarım Sistem Yöneticisi Hakkında Bilmeniz Gerekenler

Takım işbirliği, basitleştirildi.

Adı şimdi tanıdık gelebilir, ancak Ransom E. Olds, birçokları tarafından otomotiv endüstrisinin kurucusu ve seri üretim patriği olarak kabul edilir. Belki Oldsmobile'i duymuşsunuzdur? O o adam.

Bu unutulmuş öncü, dünyanın ilk seri üretilen otomobili Oldsmobile Curved Dash'i inşa etmesine yardımcı olan montaj hattını geliştirmesiyle tanınır. Şimdi bir araba var!

Montaj hattının icadı için verilen kredi, çok kritik bir ilaveden dolayı genellikle Henry Ford'a gider - Ford, arabaları bir çeşit konveyöre yerleştirerek tüm önemli hareket eden montaj hattını yarattı.

Montaj hattı şimdiye kadar geliştirilen en olağanüstü yeniliklerden biridir. İlk defa, ürünler kaliteden ödün vermeden hızlı ve tutarlı bir şekilde monte edilebilir. Hiçbir tahminde bulunulmadı - hattan çıkan ürünler aynı görünüyordu ve her seferinde aynı şekilde çalışıyordu.

Konsept, üretimi hızlandırmak ve çıktıyı iyileştirmek için tüm endüstrilerde geliştirildi ve uyarlandı ve sonunda tasarım sistemleri ile ana tasarım uygulamalarına girişti.

Doğru zaman

Birden fazla kişiden oluşan bir kurum içi tasarım ekibiyle dijital ürünler ölçeğinde oluşturuyorsanız, bir tasarım sistemi oluşturmaya başlamanın zamanı gelmiş olabilir.

Farklı düzeylerde karmaşıklık ve karmaşıklık seviyeleri vardır, ancak tüm sistemler bir çeşit yeniden kullanılabilir elemanlar ve bileşenler koleksiyonu içerir. Temel bir tasarım parçaları setine yerleştiğinde, nasıl ve ne zaman kullanıldıklarını kodlamaya başlayabilir ve tasarım ekibiniz tarafından montaj hattı stilinde üretim için merkezi bir konumda saklayabilirsiniz.

InVision Tasarım Sistem Yöneticisi (DSM)

Her gün yeni tasarım araçlarının piyasaya sürüldüğü bir endüstriyel devrim devrimi geçiriyoruz ve kargaşanın içinden görmek zor olabilir.

Çeşitli araçları incelememden sonra nihayetinde InVision DSM eklentisine geri döndüm, çünkü InVision her zaman tasarım teslimatı iş akışımızın merkezinde ve yanında olacak. Sadece ekosistemde kalmak bana mantıklı geldi.

Not: Ajansım Sketch'de çok kazınmış olduğundan Studio'ya geçmedim. Şu anda, pahalı bir geçiş olacak, ancak bunu reddetmiyoruz. Harika şeyler duyuyorum ve gelecekte zaman daha doğru olabilir.

DSM, tasarım aracınızı terk etmeden bir tasarım sistemini güncellemeyi ve ölçeklendirmeyi kolaylaştıran kavram üzerinde bir gelişme sunan tasarım sistemleri Ford'udur.

Neden sadece Eskiz Kütüphanelerini kullanmıyorsunuz?

Tamamen anlaşılabilir bir soru - Ben de aynı şeyi sordum. İşte bu yüzden hoşuma gidiyor:

  • Sürükle ve bırak arayüzü
  • Bileşenleri arayabilirsiniz
  • Semboller araç kutusunda görsel olarak düzenlenir
  • Takım paylaşımı daha basit
  • Sürüm geçmişi ve sürüm dağıtımı
  • Otomatik olarak oluşturulan çevrimiçi stil rehberi

Tasarım Sisteminizi Kurmak

InVision DSM'deki tasarım sisteminizi oluşturmak için gereken her adımı ayıralım. Tam gelişmiş tasarım sistemlerinin tipik olarak tasarım, felsefe ve kod içerdiğine dikkat etmek gerekir. Bu makaledeki tasarım bölümünü ele alacağım, ancak sadece daha büyük bir montaj hattının bir parçası olduğunu biliyorum.

Stillerinizi ve sembollerinizi zaten oluşturduğunuzu farzedeceğim… henüz yapmadıysanız, InVision DSM tarafından sağlanan örnek tasarım sistemi olan Render'ı kullanmaktan çekinmeyin.

Tasarım sisteminizi açın Tasarım sisteminizin çeşitli bileşenlerini oluşturduğunuz eskiz dosyasını açın ve başlayalım.

Adım 1: Bir Kütüphane Oluşturma

InVision web panonuza gidin ve DSM'yi tıklayın.

Ekranları senkronize etmeye başlamadan önce yeni bir InVision Project oluşturmanız gerektiği gibi, yeni bir tasarım sistem kütüphanesi de oluşturmalıyız. Tasarım sisteminiz büyüdükçe, sistem bileşenlerinizi birden çok kitaplıkta bölümlere ayırmak en iyisidir - bir masaüstü için kütüphane, bir iOS mobil için, bir Android cep telefonu için bir tane, bir çekirdek ürün için bir tane, ürüne özgü bileşenler için vb.

Başlamak için Yeni Kitaplık Oluştur'u tıklayın:

Adım 2: Eklentiyi İndirme

Tasarım sisteminizin “kabuğu” hazır ve öğeleri, bileşenlerle ve kaydedilmiş stillerle doldurmaya başlamanın zamanı geldi.

Henüz yapmadıysanız InVision Craft eklentisini indirin ve yükleyin. Daha önce hiç kullanmadıysanız, herhangi bir lansman görmediğiniz için uygulamayı açtığınızda kafanız karışabilir. Mac menü çubuğunda bulabilirsiniz.

DSM aracını, üstteki Araçlar sekmesi altında etkinleştirdiğinizden emin olun.

Doğru yüklediyseniz, Sketch'in içinde yeni bir dikey araç çubuğu göreceksiniz:

Adım 3: Kütüphane Bölümlerini Anlamak

Alttaki dişli şekline tıklayın (Craft Manager'da hangi araçları etkinleştirdiğinize bağlı olarak farklı bir yerde olabilir). DSM araç kutusunun yeni bir pencerede açıldığını göreceksiniz ve yeni kütüphane kabuğunuz zaten seçilmiş olmalı:

Profesyonel İpucu: Bu pencereyi Command + L! Tuşlarına basarak gösterin ve gizleyin!

Bir DSM kütüphanesi varsayılan olarak beş bölüme (“Klasörler” olarak adlandırılır) ayrılmıştır:

  • Renkler: Sisteminizde kullanılan tüm renkleri koyacağınız yer
  • Metin Stilleri: Bu, kaydedilen tüm metin stillerini yerleştireceğiniz yer
  • Katman Stilleri: Kaydedilen tüm katman stillerini (dolgular, kenarlıklar, gölgeler vb.) Koyacağınız yer burasıdır.
  • Simgeler: Bu, tasarım sisteminizin tüm simge sembollerini düzenleyebileceğiniz yerdir.
  • Bileşenler: Burası, tüm sembollerinizi yerleştireceğiniz yerdir.

Klasörler

Klasörler muhtemelen DSM'deki en uygun araçlardır, çünkü tasarım sisteminizin parçalarını dikkatlice düzenlemenizi sağlar, böylece onu kullanan herkes anlamlıdır. Daha derinde organizasyon eklemek için diğer klasörlerde de klasörler oluşturabilirsiniz (şu anda iki yuvalama düzeyi ile sınırlıdır).

Adım 4: Renk Ekleme

Renkler klasörünü seçin ve sağ alt kısımdaki + düğmesine tıklayın. Bu renk paletini adlandırmanızı isteyen bir modal açılır. Renk sisteminize bağlı olarak birden fazla renk paleti olabilir, bu yüzden bir veya daha fazla tane oluşturmaktan çekinmeyin.

DSM, kullandığınız tüm renkleri bulmak için belgenizi tarar. Hangisini bu palete eklemek istediğinizi seçin, ardından Renk Ekle'yi tıklayın.

Renklerinizi biraz daha kullanışlı bir şeyle yeniden adlandırmak için renk örneğinin altındaki metni tıklatın:

DSM, kitaplığınızdaki bileşenlere açıklama ekleyebilmenizi sağlar; bu, kullanım yönergeleri ve tasarım ilkeleri eklemek için harikadır:

Zengin metin editörü oldukça salaktır - kendi yurdu formatımla kesmek zorunda değilim.

5. Adım: Metin Stilleri Ekleme

Zaten metin stillerini kullanmıyorsanız, hemen başlamanızı rica ediyorum. Metin stillerini kullanarak ürünler tasarladığınızda, sadece stili güncelleyerek ve ardından senkronize ederek dosya tipi güncellemelerini yazı tipinde güncellemeyi kolaylaştırabilirsiniz.

Her neyse, metin stilleri eklemek süper kolay çünkü DSM sizin için her şeyi yapıyor. Metin Stilleri klasörüne tıklayın, ardından sağ alt kısımdaki + düğmesine tıklayın:

Kopya çekiyor gibi gözüküyor, ama değil. Sol ve orta hizalama için ayarlanmış iki metin stilim var!

DSM, belgenizdeki her metin stilini otomatik olarak algılar. Tümünü Seç ve Metin Stilleri Ekle'yi tıklamanız yeterlidir.

Adım 6: Katman Stilleri Ekleme

Katman Stilleri klasörüne tıklayın, ardından önceki adımı tekrarlayın. Çok kolay!

Adım 7: Simge Ekleme

Simgelerin DSM kitaplığınıza eklenmesi için sembol olması gerekmediğine dikkat etmek önemlidir.

!!! Çok Çok Önemli Bir Not !!!
DSM, sembollerde derinlemesine yuvalamayı destekler. Bu, simgelerinizin rengini değiştirmenize izin vermek için renk sembolü tekniğini kullanıyorsanız, DSM dosyanızı tüm yuvalanmış semboller için otomatik olarak çizecek ve bunları sizin için otomatik olarak kütüphaneye içe aktaracaktır. Bu, renk sembollerinizi içe aktarmanıza gerek olmadığı anlamına gelir. Sadece son sembol bileşimlerinizi içe aktarın… son bileşeni oluşturan iç içe semboller değil.

Simgeler klasörüne tıklayın, bir simge katmanı veya sembolü seçin, sonra eklemek için + düğmesini tıklayın. Not: Bir seferde birden fazla simge seçebilir ve bunları tek bir dokunuşta ekleyebilirsiniz. Bunları birer birer yapmanıza gerek yok. Uf.

Simgelerinizi anlaşılır bir alt klasör yapısına sokmak için zaman ayırmanızı şiddetle tavsiye ederim. Onları daha sonra bulmayı kolaylaştıracaktır:

Genelde mayını aşağıdakilere böldüm:

  • Uygulama Simgeleri: Twitter ve Facebook gibi şeyler için ürün simgeleri.
  • UI Simgeleri: Ayarlar, silme, kullanıcı profili vb. Gibi standart UI simgeleri
  • Geçiş Simgeleri: Onay kutuları, radyolar ve anahtarlar gibi şeyler.
  • Çeşitli Simgeler: Yukarıdaki kategorilere uygun olmayan herhangi bir şey.

Adım 8: Bileşen Ekleme

Şimdi asılmanı sağlamalısın! Components klasörüne tıklayın, ardından yeniden kullanılabilir öğelerinizi ve bileşenlerinizi eklemeye başlamak için + düğmesine tıklayın.

Klasör yapınızla süper organize olmak isteyeceğiniz yer:

DSM'nin, daha büyük sembol kompozitlerinizi oluşturan derinlemesine yuvalanmış sembolleri otomatik olarak içe aktaracağını unutmayın; bu nedenle yalnızca “son bileşeni” DSM'ye içe aktarmanız gerekir:

Yukarıdaki Chips'lerde, farklı avatar stillerini (resim, baş harfleri, simgeler), yonga rengini ve metin rengini seçmenize olanak tanıyan birçok iç içe sembol bulunur. Son çip sembolümü yalnızca DSM'ye aktarmak zorunda kaldım. Tasarım sistemimdeki çipleri başka bir dosyada kullandığımda, DSM, iç içe geçmiş tüm sembolleri, aynı çalışma yüzeyi boyutuna sahip iç içe geçmiş simgeler de dahil olmak üzere getirecektir.

Gerçekten çok hoş.

Adım 9: Sistemi Dağıtma ve Kullanma

Gerekli tüm bileşenleri tasarım sisteminize eklemeyi bitirdiğinizde, anında ekibinizdeki herkes tarafından kullanılabilir olacak! Dosyalarını, paylaşılan DSM kütüphanesindeki en son ve en iyilerle güncellemek için yalnızca senkronizasyonu tıklamaları gerekir.

Enterprise planında, kütüphane sürümlemesi, kullanıcı izinleri ve kütüphane erişim kontrolü gibi bazı daha iyi şeyler yapma olanağınız olacak.

Şirket planındaysanız ve yeni bir sürüm yayınlamak istiyorsanız, sol üst kısımdaki açılır menüyü tıklayın, ardından Yeni sürüm yayınla ... seçeneğini seçin.

Yeni tasarım sistem sürümünüz artık var ve daha önce bir sürüm çıkardıysanız, Sürüm geçmişi'ni tıklatarak nelerin değiştiğini görebilirsiniz.

Bu, bilgisayarınızdaki bir uygulamayı güncellediğinizde görebileceğiniz gibi, değişiklik günlüğünüzün web görünümüne götürür:

Gerçekten, takımınızın neyin değiştiğini bilmesi için yukarıdaki ekran görüntüsünde olduğundan daha ayrıntılı ve ayrıntılı olmayı hedeflemelisiniz.

Ekipten bahsederken, muhtemelen diğer bazı tasarımcıları yeni DSM kitaplığınızı kullanmaları, düzenlemeleri ve yönetmeleri için davet etmek isteyeceksiniz.

Web arayüzündeki kitaplığınızın içinden, ekranın sağ üst kısmındaki Davet Et düğmesine tıklayın. Diğer tasarımcıları davet edebileceğiniz bir popover göreceksiniz.

Not: Enterprise planındaysanız, kullanıcıları bu kütüphaneyi Görüntülemek, Düzenlemek veya Yönetmek (yönetici) yapmak için ek bir yeteneğe sahip olacaksınız.

Ortak çalışanlarınızı görüntülemek, düzenlemek ve kütüphanelerinize eklemek için DSM giriş ekranındaki Kişiler sekmesini de ziyaret edebilirsiniz.

Bu izinler ve roller yalnızca Kuruluş planında mevcuttur.

Bu sayfaya, DSM eklentisinin içinden de hızlı bir şekilde geçebilirsiniz:

Adım 10: Sisteminizde Güncellemeler Yapma

Yeni tasarım sisteminizin “ana kütüphanecisi” olduğunuz için, zaman zaman yeni bileşenler ekleyerek veya mevcut olanları güncelleyerek güncellemeler yapmak isteyeceksiniz.

Güncellemek istediğiniz bileşeni içeren klasörü tıklayın ve ardından + düğmesini tıklayın. DSM, sembolün zaten mevcut olduğunu tespit ederse, şöyle bir iletişim kutusu göreceksiniz:

Yeni Oluşturmak mı yoksa Var olanı mı Değiştirmek istediğinize karar verin; değişiklik DSM kitaplığınıza yayılır:

Kütüphanenizde güncellemeler yapıldığında, tasarım ekibinizin üyeleri, bileşenlerin güncellendiği konusunda bilgilendirilir:

Tek yapmaları gereken, kitaplığı belgeleştirmek için senkronize et'e tıklamak ve değişiklikler mevcut tüm geçersiz kılmalar (metin gibi) korunmuş olarak belgelerine yansıtılacaktır:

Gerçekten Hızlı Not: Kütüphane sembollerinde dolaşmaması gereken herkes, ortak çalışma izinlerinin içindeki Yönetici veya Düzenleyici yerine Görüntüleyici olarak ayarlanabilir. İstenmeyen değişikliklerden sisteminizi koruyun!

özet

Bu makalede, nasıl bir kütüphane yaratacağımızı, Craft eklentisini nasıl kuracağınızı, kütüphanenizi nasıl kuracağınızı ve sisteminizi nasıl kuracağınızı öğrendik. Siz ve ekibiniz yepyeni tasarım sisteminizi kullanmaya başlamaya hazırsınız!

InVision'ın Render adlı örnek bir tasarım sistemi oluşturmasına yardımcı oldum, böylece web görünümlerinde ne kadar güzel göründüğünü görebilirsiniz. Çizim dosyasını ve Craft eklentisini indirin; Render sistemini başlangıç ​​noktası olarak kullanarak kendi kütüphanenizi DSM aracıyla birleştirmeye başlayabilirsiniz.

InVision'da tamamlanan Tasarım Sistemini görüntülemek için yukarıya tıklayın!

Tasarım sistemleri kurmadığımda, sizi daha iyi ve daha verimli bir tasarımcı yapmak için UX Elektrikli El Aletleri'ndeki Eskiz araçları üzerinde çalışıyorum.

UX Elektrikli El Aletleri'nı Twitter'da Takip Edin
Twitter'da beni takip et
LinkedIn'de merhaba de
Ajansımın blogundan bazı şeyler öğrenin