Design Systems + Sketch - Kullanıcı Arabirimi Bileşenleri Kitaplığı hazırlamaya nasıl başlanır

Sonunda, Tasarım Sistemleri endüstri standardı oldu. Bu yüzden onları projelerimiz için nasıl hazırlayacağımızı bilmek çok önemlidir. Eğer benim gibiyseniz ve dijital tasarımlarınızı çoğunlukla Kroki'de oluşturuyorsanız, bu Öykü, Tasarım Sisteminiz için UI Bileşenleri hazırlamanız için birkaç ipucu içerir.

Not:
İşleri açık tutmayı seviyorum. UXMisfit.com'un yaratıcısı olarak önceliğim, tasarımcılara UX hakkında biraz farklı bir bakış açısıyla ilham vererek ve zaman kazandıran araçlar hazırlayarak yardımcı olmaktır.

UXMisfit araç setleri çoğunlukla Sketch için hazırlanmıştır. Kullanıcı Akışlarını verimli bir şekilde hazırlamak veya daha iyi bir Uygulama Simgesi kalitesi sağlamak için olanlar bulabilirsiniz.

Tasarım Sistemi Setini de bulabilirsiniz - buna Prime denir. Sketch için olması gereken modern UI Tasarım Sisteminden daha fazlasını içerir. Özelleştirilebilir yüzlerce öğe dışında, İllüstrasyon Sistemi, Web UI Kiti, Grafikler ve Ana Cihazların Vektör Şablonları bulunur.

Prime Design System Kit'ten bağımsız olarak, UI Bileşenlerini kendiniz hazırlamaya karar verseniz bile, hikayede belirtilen tüm ipuçları çalışır.

Başlangıçta kaos vardı ...

Yeni bir ürünün başında Tasarım Sistemine bileşen hazırlamaya başlamanız veya mevcut birkaç yıllık projeye dahil etmeye karar vermeniz farketmez. İlk kez yaparsanız her zaman zor bir karardır, çünkü diğer insanları (sadece tasarımcıları değil) bir sistem oluşturma fikrine ikna etmeniz gerekir. Farklı insanları Tasarım Sistemleri konusunda nasıl daha hevesli hale getirebileceğinizi düşünelim:

İş Adamları ve Yönetimi - zamandan ve sıfırdan büyük bir şey yaratmanın maliyetinden korkabilirler (tabii ki süreci hızlandırmanın yolları vardır). Açıkçası, ilk maliyet yüksek olabilir, ancak onları yeni bileşenlerin yaratılmasının gelecekteki fiyatının daha düşük olacağına, uygulamanın daha hızlı olacağına ve ürünün kalitesinin çok daha iyi olacağına ikna etmeniz gerekir.

Geliştiriciler - tasarım sistemi sayesinde bileşenleri daha erken hazırlayabilecekler ve örneklerini birden fazla sayfada kullanabilecekler. Tasarım tutarlılığını korumak çok daha kolay olacaktır. Geliştiriciler bu mavi düğmenin kalın bir yazı tipi yüzüne veya gölgesine sahip olup olmadığını düşünmek zorunda kalmayacaklar - yalnızca doğru bileşeni kullanacaklar (Birincil Düğme).

QA - Testçilere tek bir gerçeğin kaynağını alacaklarını gösterin. Bu sayede bir şeyin doğru yapıldığından şüphe duyulmaz.

Tamam, eğer takımın hazırsa, bir bardak kahve alalım ve Sketch'i başlatalım!

Mevcut bir projeniz var mı? Envanterini yap.

Mevcut projeniz için bir tür Tasarım Sistemi veya kendi UI Kitinizi hazırlamadıysanız, bunu yapmak için ilk adım mevcut tüm unsurları kontrol etmektir. Muhtemelen biraz farklı olan birçok eleman örneği bulacaksınız, ancak bunun düzeltilmesi gerekecek.

Mevcut Tasarım Sistem Kitini kullanırsanız, bileşen kütüphanenizin sahip olması gereken hemen hemen tüm öğelerin listesini anında alırsınız. Dahası, onlar zaten semboller olarak kategorize edildi. Var olan öğeleri çözümünüzünkilerle eşleşecek şekilde ayarlayabilir ve çabucak kullanabilmelisiniz.

Sıfırdan bir kütüphane oluşturmaya karar verirseniz, önce listeyi veya bir elektronik tabloyu hazırlamak iyidir. Bu doğru yapının kurulmasına yardımcı olacaktır. Doğru belge mimarisini geliştirmek zor olabilir, ancak daha sonra çalışmayı hızlandırmak için yapmaya değer.

Fakat… Eskiz Kütüphaneleri Tasarım Sistemleri değil mi?

Bu çok açık gelmeyebilir, ama doğru. Brad Frost ile aynı fikirdeyim. Eskiz Kütüphaneleriniz bir Tasarım Sistemi değil, aynı zamanda şunu hatırlıyorlar: temel parçası.

Çok sayıda kütüphane Tasarım Sistemlerinin ilk kıvılcımlarıdır. Onlardan canlı sistemler hazırlamanın yöntemleri de var, ancak bu sonraki bölümlerde ele alınacaktır.

Tasarım Sistemleri, UI bileşenlerinden çok daha fazlasıdır. Ayrıca, hareket kılavuzlarını, içerik stratejisinin ilkelerini ve metin yazarlığı stilini ve son olarak da uygulanmış bileşenleri - belirli bir platformda kullanılmaya hazır olarak içermelidirler.

Sonunda, tüm bunlar Sketch gibi tasarım aracında yapılan bileşenlerle başlar. Kitlerin Tasarım Sistemleri'nin kendisi olmadığını unutmayın, ancak bu kütüphaneler sistemler kurmanıza yardımcı olmak için buradalar.

Tasarım Sistemi için UI Bileşen Kütüphanesi Oluşturma

En küçük parçacıklardan büyük organizmalara ve şablonlara kadar, sisteminiz için bileşenlerin nasıl hazırlanacağına bir göz atalım. Atomik Tasarım felsefesi, sık sık kullanılması ve gelecekte genişletilmesi gereken kütüphaneyi hazırlarken çok yararlıdır.

Parçacıklar

Atomik Tasarımdan Konuşma. Temel UI bileşenlerini oluşturmaya başlamadan önce, parçacıkları oluşturmak gerekir.

Renkler

Renklerle başlamak iyidir, çünkü her markanın kendi paleti vardır. İyi bir adlandırma kuralı oluşturmayı unutmayın. Hangi tonun Birincil veya İkincil ve Başarı, Uyarı veya Hata öğeleri için olanları belirtmek iyidir. Sisteminizin sadece “mavi” veya “mor” içermesine izin vermeyin, bu çok önemlidir çünkü her rengin bir anlamı vardır. Doğru adlandırma, ekibinizin rengin amacını tanımasını sağlar.

İpucu: Dolgu ve Kenar Stili Özelleştirmesini optimize etmek için. Yalnızca dolgu içeren Paylaşılan Stile sahip bir Şekil Katmanı oluşturun, ardından yalnızca Kenarlıklı Paylaşılan Stili içeren tam olarak aynı konumda ve boyutta bir tane oluşturun. Dolgu ve Kenarlık aynı renge sahip olmalıdır. Ayrıca yalnızca yakınlıkta veya aynı konumda opaklığa sahip Stillere sahip Şekil Katmanları eklerseniz, stili son derece hızlı bir şekilde güncelleyebilirsiniz. Şekil katmanlarını seçmeniz, iki parametreyi güncellemeniz (Çizimin sağ panelinde kenarlık ve kenarlık doldurmanız) ve Paylaşılan Stilleri güncellemeniz gerekir.

Prime Design System Kit'te renk ayarı

Degradeler ve Bindirmeler

Bazıları degradelerin yeni renkler olduğunu söylüyor. Dribbble veya Behance'e göz atarsanız, birçok çekimin bunları içerdiğini fark edeceksiniz. Bu nedenle Tasarım Sistem Kütüphanenizin proje için hazırlanmış sete sahip olması gerekir.

Aynı durum bindirmeleri ile. Tutarlılığı sağlamak için sistemde ton ve opaklık tanımlanmalıdır.

Neyse ki, Sketch 52+ 'den itibaren renkler, gradyanlar vb. İçin özel çalışma yüzeyleri hazırlamaya gerek yoktur. Hepsi Paylaşımlı Katman Stilleri ve Sembol geçersiz kılmalarındadır.

matbaacılık

İyi tipografi sistemi, daha büyük Tasarım Sisteminin bir parçası olan her UI Çerçevesinin önemli bir parçasıdır. Kiti yaratırken, bu öğenin hazırlığı çok zaman aldı. Tipografinizi oluşturmaya karar verirseniz, en azından aşağıdaki stilleri eklemeyi unutmayın:

  • Siyah
  • Beyaz
  • Gri
  • Birincil (sisteminizin Ana rengiyle)

Ayrıca olması güzel olurdu:

  • başarı
  • Uyarı
  • Hata

Bu renk çeşitleri, daha sonraki çalışmalarınızda yeterince esneklik ve tutarlılık sağlamanıza yardımcı olacaktır.

Şimdi ölçeğe ve boyuta dalalım. Bu özelliği tipografi sistemi boyunca tanımlayabileceğiniz birden fazla yöntem vardır. Prime’ın Apple’a dahil olanlara ilham vermeye ve modern web trendiyle (devasa başlıklar vb.) Genişlemeye karar verdim. Bu güçlü temel sayesinde, sistemin çalışacağından ve tipografinin mobil ve masaüstünde iyi okunabilir olduğundan emin olabilirsiniz.

Doğru boyutta bir tipografi skalasına sahip olmak istiyorsanız, https://type-scale.com adresini faydalı bulabilirsiniz. Sadece Temel Boyut, Ölçek Türünü seçip örnek bir yazı tipi ayarlayın ve ayarları oynayın.

Tüm bedenlerinizi tanımlayacağınız zaman, en azından düzenli ve kalın seçenekler ekleyin. Ardından, tüm öğeleri iki kez çoğaltın. Onları sağa, ortaa ve sola doğru hizalayın. Şimdi her seçenek için Metin Stili oluştur.

Tipografi kullanımının en iyi şekilde kullanılmasını sağlamak için adlandırma kurallarına uyun:

[Boyut Adı] / [Aligment] / [Renk] / [Stil]

Sisteminizde birden fazla font ailesi varsa:

[Boyut Adı] / [Yazı Tipi Ailesi] / [Hizalama] / [Renk] / [Stil]

Örneğin:

Başlık / Merkez / Siyah / Kalın

Başlık / SF Pro / Merkez / Birincil / Sol

Ayrıca tipografi sistemlerini ayrı dosyalara bölebilir ve Paylaşılan Kütüphaneler haline getirebilirsiniz.

İpucu: Tipografi Özelleştirmesini optimize etmek için. Tüm öğeleri (tek bir renk ayarından) bir sütuna yerleştirin. Farklı hizalama stillerini içeren katmanları (sol, orta, sağ) üst üste hizalayın. Bu sayede tipografi ile tek bir sütun alacaksınız. Bu, grubu seçip birlikte güncelleyerek yazı tipini veya stilini değiştirmenizi sağlar. Her hizalama için parametreleri ayrı ayrı hazırlamaktan çok daha hızlı ve daha uygundur.

Prime Design System Kit'te Tipografi Kurulumu

Izgaralar ve Yerleşimler

Izgara sistemini hazırlamak sadece tutarlılığı sağlamakla kalmayacak, aynı zamanda sonraki çalışmalarınızı hızlandıracaktır. Şebekenizin evrensel olması gerekir - popüler seçenek 8 noktalı ızgara oluşturmaktır. Bu, kullanıcı arayüzünüzün Masaüstü, Tablet ve Mobil'de iyi çalışmasını sağlar.

İpucu: İş kurulumunuzu hızlandırmak için Eskiz'deki büyük nudge (Shift + Arrow) ızgara boyutuna (örneğin 8 piksel) kadar. Bu işinizi çok daha hızlı hale getirecek.

Atom UI Bileşenleri

Belirli sembol yaratımına doğrudan geçmeden önce. Gerekli tüm UI bileşenlerini listelemek için biraz zaman ayırın. Bu liste oldukça uzun olabilir ancak UI Çerçevenizin yapısını planlamanıza yardımcı olacaktır.

Atom tasarım sisteminin, Düğmeler, Girişler / Metin Alanları, Simgeler, Onay Kutuları, Anahtarlar ve Radyo Düğmeleri gibi bileşenleri içereceği açıktır, ancak sohbet gibi ilk kez düşündüğünüzde çok açık olmayan unsurlar da vardır. kabarcıklar, cips veya derecelendirme bileşenleri.

Atomik bileşenleriniz bile içinde bazı parçacık sembollerine sahip olabilir. Örneğin, düğmenizde şu semboller bulunabilir: Simge, Gölge, Şekil, Bileşen durumu veya hatta Metin (onlar için ayrı semboller hazırlamaya karar verirseniz).

Bu atomlar gelecekteki projelerinizde yalnızca UI kontrollerinin örnekleri olmayacak, aynı zamanda Eskiz Kitaplığınızda daha karmaşık olanları oluşturmanıza yardımcı olacaktır.

İpucu: Söylemeye değer olan, Sketch 52'den bu yana düğmelerinizin veya simgelerinizin renkleri için özel maskeler hazırlamanız gerekmez. Paylaşılan Stiller, Sembol Geçersiz Kılma özelliğiyle bununla ilgilenir. Bu, daha az sembol ve daha şeffaf ve zarif iş akışı anlamına gelir.

Moleküller ve Organizmalar

Demek bütün atomik elementleri yarattın. Şimdi onları moleküller halinde birleştirebilirsiniz.

Bu, temel Giriş, Düğme ve Simgenizin daha karmaşık olanla birleştirilebileceği anlamına gelir - Sisteminiz için Metin Ara Kartı Ara Bileşeni, Şekil veya Görüntü, Kaplama, Simgeler, Düğme veya Metin Stillerinden oluşturulabilir.

Semboller ve katmanlardaki Paylaşılan Stillerle bir dizi temel öğe kullanmak, kendini çok hızlı bir şekilde güncelleyen sistemi oluşturmanıza olanak sağlar.

Atom Tasarımı, Tasarım Sistemleri İçin Mükemmeldir

UI Kit

Atom tasarımı, önceden tanımlanmış atomların, moleküllerin ve organizmaların kompleks kümelerini Şablonlar olarak adlandırır. Bunlar, çözümünüzün birçok kez kullanılabilecek büyük bölümleridir (web sitesi bölümleri gibi).

Şablonları kendi amaçları göz önünde bulundurarak tasarlamak iyidir. Bunları çok genel yapmak, belirli durumlarda uymayan elemanlara neden olabilir.

Prime, Şablonlar için aşağıdaki kategorileri içerir:

  • Kahraman
  • Ürün Özellikleri
  • Galeriler
  • Ticaret
  • Sipariş
  • Fiyatlandırma
  • Haber / Blog
  • İletişim
  • Görüşler
  • hesap
  • Gösterge Paneli
  • hakkında
  • Alt Bilgi
  • Diğer (404 için ve yakında sayfa geliyor).

Kendi UI Çerçevenizi oluşturduğunuzda, bu büyük şablonları en azından bu kategorilerle hazırlamanızı tavsiye ederim.

Design Birçok Tasarım Sisteminin Eksik Elemanları

Birçok tasarımcı, UI Kontrolleri Kütüphanesi'nden itibaren Eskiz için Tasarım Sistem Kitini düşünüyor. Ancak Tasarım Sistemleri çok daha fazla; Sketch, başka birçok dijital tasarım amacıyla da kullanılabilir.

Kiti yaratırken, Kütüphanelerin de grafikler ve vektör cihazları (anahat, düz ve gerçekçi tarzda) içermesi gerektiğini anladım. Modern web sitesinde ve sistemde tutarlı bir şekilde temsil edilmeleri için ihtiyaç duydukları çözümlerde çok sık kullanılırlar.

Dahası, günümüzde web siteleri ve uygulamalar güzel resimlerle doludur. Bu nedenle, bunları hızlı bir şekilde oluşturmak ve stil vermek için bileşenler içeren özelleştirilebilir illüstrasyon sistemini de ekledim.

Prime'da 5 dakika içinde yapılan örnek resim

Design Systems için kendi kütüphanelerinizi tasarlamaya karar verdiyseniz, bu unsurları kendilerine eklemeyi düşünün.

Takım İşbirliği

Tasarım sistemleri ekip üyeleri için gerçeğin kaynağıdır. Bu, Eskiz Kütüphanelerinizin projeye katılan tüm Tasarımcılar tarafından kullanılmak üzere hazırlanmaları gerektiği anlamına gelir. Dosyaları ekibinizle paylaşmanın en kolay yolu, onları Sketch Cloud'a yüklemektir

UI Çerçevesini Kütüphane olarak hazırlarken tutarlı ve doğru adlandırma sağlamayı unutmayın. Mantıklı ve açık bir yapı oluşturmak, meslektaşlarınızın kitin tüm olanaklarını keşfetmesine yardımcı olacaktır.

Dosyaları ayırmak

Dahası, Sketch UI Tasarım Sisteminin bazı kısımlarını ayrı dosyalar olarak düşünmelisiniz. Çekirdek kütüphanesi dışında, bir Simge seti, Çizim Seti, Cihaz Şablonları veya Grafikler için bir dosya hazırlamayı düşünebilirsiniz.

Bu şeyleri ne zaman ayırabilirim? Büyük bir belirli öğeler kümesi (simgeler gibi) veya sadece ekibinizden bazı tasarımcılar bunları yarattığında (bu, resimlere uygulanabilir) ve gerisi sadece onların yarattıklarını kullanıyorsa, bunu yapmayı düşünmelisiniz.

Kütüphanelerinizin geçmişini kontrol edin

Sketch Library dosyalarını ekiple yönetmenin en iyi yolu, Abstract gibi Version Control çözümünü kullanmaktır. Bu sayede, kütüphanenin değişiklik geçmişine göz atabilir, takım arkadaşlarınızın değişikliklerini inceleyebilir, yorum yapabilir ve bunları ana kütüphaneye eklemenize izin verebilirsiniz (Kitaplığın ana sürümü).

Eskizden Yaşam Tasarım Sisteminin Kurulması

InVision Design System Manager gibi bazı araçlar, yalnızca Tasarımcılar için değil Geliştiriciler, Kalite Güvencesi Uzmanları ve diğer Ekip Üyeleri için Tasarım Sistemi Belgeleri ve gerçeğin kaynağını oluşturmanıza olanak sağlar.

Invision DSM'nin kullanımı basittir, burada hızlı bir giriş bulabilirsiniz. Sistemi görüntülemek veya düzenlemek için tasarım sistemi belgelerini hızla oluşturabilir, sürümleri ve kullanıcı izinlerini yönetebilirsiniz.

Bu araç Çizim Kitaplığınızı gerçek yaşam Tasarım Sistemi yapar.

Sonunda: Tutarlılığı bozma - gerekirse

Tutarlı strateji temel olmakla birlikte, bir UX Tasarımcısı olarak kullanıcıların ihtiyaçlarını zevkli bir şekilde çözen ve iş gereksinimlerini karşılayan çözümü hazırlamak zorunda olduğunuzu hatırlamanız gerekir. Bu nedenle, bunun için daha yüksek bir amaç varsa, tutarlı Tasarım Sisteminizi kırmaya hazır olmanız gerekir.

"Ne öğrendiysen unutmalısın."
- Usta Yoda

Belirli bir öğenin işe yaramadığı bir durum varsa, onu doğrulamanız gerekir. Testler, kullanıcı arayüzünün tutarlılığının kırılmasının kullanıcıları daha mutlu edeceğini gösterecekse, değiştirmeyi düşünün. Sadece sistemdeki bu “istisnaları” not almayı unutmayın, böylece diğerleri bunun bir hata olmadığını, stratejik bir karar olduğunu anlarlar.

Özetliyor

Sketch, Tasarım Sistemi Kullanıcı Arabirimi Bileşenleri oluşturmak için doğru araçtır. İş akışını son derece kolaylaştıran geçersiz kılma özelliklerine sahip Semboller, Katman ve Metin Stilleri gibi birçok özellik içeren araçtır. Kütüphane felsefesi sayesinde, dosyalarınızı hızlı bir şekilde paylaşabilir ve ek eklentilerle hızlı bir şekilde gerçek Tasarım Sistemlerine dönüştürebilirsiniz.

Tasarım Sistemini oluşturmayı veya UI Kütüphanenizi düzenlemeyi planlıyorsanız, her şeyi sıfırdan başlayarak zamanınızı boşa harcamayın. Prime - Design System Kit'i kullanmaktan çekinmeyin.

Bunu kolaylaştırmak için bir hediye var%% 10 indirim almak için MEDIUM10 teklif kodunu kullanın.

Eğer öyküyü beğendiyseniz yapmayı unutmayın.

Ayrıca, UI Tasarım Sisteminin korunmasına yardımcı olan Eskiz Eklentileri ile de ilgilenebilirsiniz:

Okuduğunuz için teşekkürler, Tasarım Sisteminizde iyi şanslar!