Tasarım Sisteminizi Yapay Zekaya Hazır Hale Getirme
Twitter'da paylaş, LinkedIn
Sapmaların nasıl azaltılacağı, hataların en aza indirileceği, bağlamın nasıl korunacağı ve yapay zeka tarafından oluşturulan prototiplerin kalitesinin nasıl iyileştirileceği hakkında pratik kılavuz. Vitaly'nin kullanıcı deneyimi ve tasarım desenleri hakkındaki samimi video kursuyla size getirildi. Sapmaların nasıl azaltılacağı, hataların en aza indirileceği, bağlamın nasıl korunacağı ve yapay zeka tarafından oluşturulan prototiplerin kalitesinin nasıl iyileştirileceği hakkında pratik kılavuz. Size Yapay Zeka Arayüzleri İçin Tasarım Desenleri ve Vitaly'nin tasarım desenleri tarafından sağlanmıştır.
Sistem Güvenliği
Yapay zeka tarafından oluşturulan prototipler, tasarım sisteminin her tarafına dağılmış küçük tutarsızlıklar nedeniyle çoğu zaman tutarlı bir şekilde iyi sonuçlar vermez. Kararlarım alındı ancak belgelenmedi, sabit kodlanmış değerler hiçbir zaman temizlenmedi veya maketleri veya tasarım akışlarını kendi başına anlamlandıran yapay zekaya çok fazla güveniyordum.
Dün Atlassian'dan Hardik Pandya'nın hazırladığı, sapmaların nasıl azaltılacağı, hataların en aza indirileceği, bağlamın nasıl korunacağı ve yapay zeka tarafından oluşturulan prototiplerin kalitesinin nasıl artırılacağı hakkında faydalı bir pratik rehbere rastladım. Nasıl çalıştığını görelim.
Daha iyi sonuçlar elde etmek için yapay zekanın varsayımları en aza indiren ve belirsizliği azaltan daha iyi rehberliğe ihtiyacı vardır. Hardik Pandya'nın rehberi. (Büyük önizleme)
1. Tasarım Kararları Altyapıdır
Uzmanların Görüşleri
Şaşırtıcı olmayan bir şekilde, daha iyi yapay zeka prototipleri daha iyi verilerden ve aynı zamanda daha iyi insan rehberliğinden geliyor. Yapay zekanın doğru bileşenin nasıl seçileceğini ve erişilebilirlik göz önünde bulundurularak nasıl tasarlanacağını bildiğini varsaymamalıyız. Önceliklere, kararları nasıl aldığımıza dair net bir yola, tasarım ilkelerine, örneklere, yapılması ve yapılmaması gerekenlere ihtiyacı var.
Aslında tasarım kararlarını altyapı olarak ele almalıyız. Bu, her karar verdiğimizde (yalnızca bir tasarım kararı değil, aynı zamanda işimizi nasıl önceliklendireceğimize ve burada nasıl kararlar vereceğimize dair bir karar bile), daha sonra yapay zeka tarafından tüketilecek olan spesifikasyon dosyasına giden bir yol bulması gerektiği anlamına gelir.
2. Denetim: FigmaLint
Tasarım sisteminin kalitesini denetlemek için kullanışlı araçlardan biri FigmaLint'tir. Belirteçleri, durumları, erişilebilirliği denetlemek, belirteçleri bağlamak, katmanları yeniden adlandırmak, ayrılmış örnekleri tespit etmek, eksik etkileşimli durumları ve sabit kodlanmış değerleri tespit etmek ve tasarım belgelerini hazırlamak için kullanışlı ve ücretsiz bir Figma eklentisidir.
Sonuç ve Değerlendirme
Denetimi kolaylaştıracak küçük ve güzel yardımcı: FigmaLint. (Büyük önizleme)
Size tasarım sistemlerini ve bileşen kitaplıklarını sağlayan satıcılar ve üçüncü taraflarla sık sık çalışmak zorunda kalıyorsanız, bu yanınızda bulundurmanız gereken harika bir yardımcıdır; özellikle de prototiplerin, yapay zeka tarafından oluşturulan kodun ve yapay zeka tarafından yazılan belgelerin kalitesini artırmak istiyorsanız.
Önemli Gelişmeler
3. Üç Katman: Özellik Dosyaları + Belirteç Katmanı + Denetim
Kaliteyi sağlamak için tasarım ilkelerini, yönergelerini ve kurallarını "özellik dosyaları" biçiminde oluşturuyoruz. Boşluk kurallarını, renk seçimlerini, bileşen kullanım yönergelerini, öncelikleri vb. içeren yapılandırılmış Markdown dosyalarıdır. Yapay zeka, her prototip oluşturduğunda bu spesifikasyon dosyasını okuyacak ve yeniden kullanacaktır.
Özel dosyaları yapay zeka dostu olacak şekilde düzenleyen bir klasör örneği. Tam örneğe geçin. (Büyük önizleme)
Nasıl Önlem Alınmalı?
Spesifikasyon dosyaları metin dosyaları olduğundan, çok daha uygun maliyetlidir ancak aynı zamanda çok daha doğrudur; bunun nedeni, maketlerdeki kalıpları tanıma veya kod çözme konusunda yapay zekaya güvenmememiz, bunun yerine belirli yönergeler almamızdır. Aslında kodu genişletmek genellikle modellerden kod oluşturmaktan daha etkili bir yoldur.
Gelecekte Ne Bekleniyor?
Belirteç katmanı, tasarım sistemi boyunca kullanılan tüm belirteçleri listeler ve güncel tutar. Yapay zeka, geçici olarak makul değerler icat etmek yerine her zaman kapalı bir adlandırılmış değişkenler kümesi arasından seçim yapar.
Bağlam mühendisliği her şeydir. Bağlam mühendisliğinin beş seviyesi: Pratik bir genel bakış, Matthew Alverson, Addy Osmani aracılığıyla. (Büyük önizleme)
Detaylar ve Etkileri
Bir denetim komut dosyası, yapay zekanın neyi yanlış yaptığını yakalar. Prototipi tarar ve sabit kodlanmış her değeri işaretler ve gerekirse işaretler. Bunu yapan, yapay zekanın geri bildirimini beklediği sıradan bir yazılım olabilir.
Son olarak, bir tasarım sistemi güncellemeleri gönderdiğinde, bir senkronizasyon rutini hangi spesifik dosyaların güncellenmesi gerektiğini işaretler. Amaç, yapay zekanın eski bir sürüme karşı yazılanları değil, her zaman güncel, güncel özellikleri okumasını sağlamaktır.
4. Yapay Zekaya Hazır Tasarım Sistemleri Örnekleri
Teknik Analiz
Sonuçta yapay zeka, uygun rehberlik olmadan teknik borcu veya tasarım borcunu sihirli bir şekilde çözemez. Büyük ölçüde net kararlara, belirlenmiş önceliklere ve iyi tanımlanmış ilkelere dayanır.
Tasarımcılar yapay zekayı yönlendirmede ne kadar bilinçli ve hassas olursa, genel sonuçlar da o kadar iyi olacaktır. Bu sadece tasarım sistemlerinin temizlenmesini ve iyileştirilmesini değil aynı zamanda bunların bakımını da gerektirir. Artık kararların Markdown dosyalarına sızması gerekiyor. Gelecek yıllarda meşgul olacağız.
“Yapay Zeka Arayüzleri İçin Tasarım Desenleri” ile tanışın
Vitaly'nin, insanların gerçekten kullandığı yapay zeka özelliklerini tasarlamaya yönelik 100'lerce gerçek hayattan örnek ve UX yönergeleri içeren yeni video kursu olan AI Arayüzleri İçin Tasarım Desenleri ile tanışın - bu yılın ilerleyen dönemlerinde canlı bir UX eğitimi ile. Ücretsiz önizlemeye geçin.
Vitaly'nin arayüz tasarımı ve kullanıcı deneyimi konulu video kursu olan AI Arayüzleri İçin Tasarım Desenleri ile tanışın.