Stil Rehberine Dayalı Geliştirme Yoluyla Modüler UI Sistemleri Tasarlama

Geliştirmeyi yönlendirmek için bir stil kılavuzu kullanmak, ön uç geliştirmede çok fazla ilgi çeken bir uygulamadır ve bunun iyi bir nedeni vardır. Geliştiriciler, stil kılavuzuna yeni kod ekleyerek veya mevcut kodu güncelleyerek başlayacak ve böylece daha sonra uygulamaya entegre edilecek modüler bir UI sistemine katkıda bulunacaktır. Ancak modüler bir UI sistemi uygulamak için tasarıma modüler bir şekilde yaklaşmalıyız.

Modüler tasarım, bizi bir UI ve UX modellerini düşünmeye ve tasarlamaya teşvik eder. Örneğin, bir kullanıcının bir görevi tamamlamasını sağlamak için bir dizi sayfa veya görünüm tasarlamak yerine, UI sisteminin nasıl yapılandırıldığını ve bileşenlerinin kullanıcı akışını oluşturmak için nasıl kullanılabileceğini anlayarak tasarım sürecini başlatırdık.

SmashingMag'de Daha Fazla Okuma :

• Etkili Bir Stil Rehberi Nasıl Yapılır?
• Yaşayan Stil Rehberi Araçlarına Derinlemesine Bir Bakış
• Stil Rehberine Dayalı Geliştirmeyi Otomatikleştirme
• Yazarlar ve Editörler İçin Serbest Stil Kılavuzları Simge Seti

Bu yazıda, UI tasarımında modülerliğin değerini ve bunun, tasarımcılar ile geliştiricilerin daha verimli bir şekilde işbirliği yapmasına yardımcı olurken, esnek ve kullanıcı dostu uygulamaların uygulanmasını iyileştiren stil rehberli geliştirme süreciyle nasıl bağlantılı olduğunu açıklayacağım.

Kullanıcı Arayüzündeki Modüler Tasarım

Modüler tasarım, bir tasarımı küçük parçalara (modüllere) bölmek, bunları bağımsız olarak oluşturmak ve daha sonra bunları daha büyük bir sistemde birleştirmek ile ilgilidir. Etrafımıza bakarsak modüler tasarımların birçok örneğini buluruz: Arabalar, bilgisayarlar ve mobilyalar modülerdir. Modülerlikleri nedeniyle bu sistemlerin parçaları değiştirilebilir, eklenebilir, çıkarılabilir ve yeniden düzenlenebilir. Bu tüketiciler için harika çünkü sistemi ihtiyaçlarına göre özelleştirebiliyorlar . Sunroof, daha güçlü bir motor, deri koltuklar ister misiniz? Anladın! Arabaların modüler tasarımı, bu tür özelleştirmelere ve çok daha fazlasına izin verir.

Bir başka harika örnek de IKEA mobilyalarıdır. Aşağıdaki çizimlerde, tasarımın modülerliğinin sadece kitaplığın şeklinde olduğunu, bu da farklı yönlere yerleştirilmesine izin verdiğini veya açıklıklarına eklemeler ekleyebildiğinizi görebilirsiniz, aynı zamanda en iyi şekilde Aynı kalıbı tekrar eden, farklı boyutlarda dikdörtgenler olan parçanın kendisini oluşturan parçalar.

İmalat açısından bakıldığında, modüler tasarım aynı zamanda uygun maliyetlidir. Bunun önemli bir yönü, daha sonra birleştirilebilecek küçük basit parçalar inşa etmenin, aynı anda büyük bir karmaşık parça oluşturmaktan daha kolay ve ucuz olmasıdır. Ek olarak, çözüm defalarca yeniden kullanılabilir ve üretkenliği en üst düzeye çıkarır.

Bir UI tasarımı oluşturmadaki hedefler benzerdir. Tasarımcılar olarak hem yapım hem de operasyon açısından verimli bir UI sistemi oluşturmak istiyoruz. Bir soruna çözüm bulduğumuzda, çözümü birçok yerde yeniden kullanabilmek isteriz. Bu sadece zamandan tasarruf sağlamakla kalmaz, aynı zamanda kullanıcıların bir kez öğrenebilecekleri ve uygulamanın diğer alanlarında yeniden uygulayabilecekleri bir kalıp oluşturur. Ayrıca, her şeyi yeniden yapılandırmak zorunda kalmadan sistemi belirli senaryolar için özelleştirebilmek istiyoruz.

Modülerliğin kullanıcı arayüzü tasarımına getirdiği şey tam olarak budur: Esnek, ölçeklenebilir ve uygun maliyetli , aynı zamanda özelleştirilebilir, yeniden kullanılabilir ve tutarlı bir sisteme yol açar.

Modüler Tasarım Örnekleri

Modüler UI tasarımının bazı örnekleri, duyarlı ızgaralar, döşeme pencere tasarımı ve kart tasarımı gibi kalıplarda görülebilir. Hepsinde, farklı ekran boyutlarına kolayca uyum sağlayan esnek bir düzen sağlamak için modüller tekrar tekrar kullanılır. Ayrıca modüller, bileşenler için kaplar görevi görerek, tıpkı bir IKEA dolabına eklenebilen ekler gibi farklı türde içerik ve işlevsellik eklememizi sağlar.

Bu Homojen mi?

Modüler tasarım bir sistem tasarlamakla ilgiliyse ve UI sistemleri çoğunlukla aynı parçalardan oluşuyorsa (düğmeler, yazı tipleri, simgeler, ızgaralar vb.), o zaman şunu merak ediyor olabilirsiniz:

• Modüler tasarımların hepsi aynı görünmeyecek mi?
• Bu, marka kimliğini nasıl etkileyecek?
• Bir ürünün kullanıcı arayüzü nasıl benzersiz hale getirilebilir?

Bu sorular geçerli olmakla birlikte, altta yatan bir soruyu gündeme getiriyor: Ürün tasarımında yenilik ve benzersizlik nerede yatıyor? Bu tartışma son zamanlarda hız kazandı (bkz. “Tasarımın Dayanılmaz Homojenliği” ve “Homojen Tasarımın Savunmasında”), ancak şunu söyleyebilirim, çünkü ilk gördüğümüz şey görsel tasarım olduğundan, yenilikçiliğin ve benzersizliğin içinde yattığını düşünme eğilimindeyiz. bir tasarımın nasıl göründüğü. Ancak, görsel tasarım bunun sadece bir parçasıdır. Ürün tasarımındaki yenilik ve benzersizlik, ürünün tamamında hesaba katılmalıdır: görünüşü de dahil olmak üzere sağladığı içsel değerde ve insanların onu deneyimleme biçiminde. Bir sandalye al. Bir sandalye olması gerekir, ancak tüm sandalye tasarımları aynı şekilde görünmez, hissettirmez veya çalışmaz. Aslında, sandalye tasarımı tarihsel olarak tasarım ve malzemelerde bir yenilik alanı olmuştur. Benzer şekilde, kullanıcı arayüzlerinin kendi gereksinimleri vardır ve işe yaradığı kanıtlanmış kalıpları kullanmak, yenilik ve benzersizlikten ödün vermek anlamına gelmez. Aksine, müşterilerinizin sahip olduğu belirli sorunları çözmek için yenilik ve benzersizliğe ihtiyaç duyulacaktır. Modüler tasarımın güzelliği, farklı olmak adına izole bir şekilde özgün çözümler bulmak yerine, bu çözümlere birbirine bağlı parçalar sistemi olarak yaklaşmaya teşvik etmesidir. Başka bir deyişle, bir UI denetimine uygulanan yenilikçi bir tasarım, uygulamada tek bir yere indirgenmeyecek, bunun yerine tüm sisteme nüfuz ederek uyumu sürdürecek ve kullanılabilirliği artıracaktır.

Stil Rehberi-Drive Geliştirmenin Modülerliği

Uygulama açısından, stil kılavuzuna dayalı geliştirme de oldukça modülerdir. Yeni başlayanlar için süreç bir keşif aşamasıyla başlar: çözülmesi gereken sorunu anlamak, gereksinimleri toplamak ve tasarım çözümlerini yinelemek. Tasarım çözümleri genellikle bütün bir paket veya özellik olarak sunulurken, stil kılavuzunda belgelenen sistemin birçok parçasının birleşimi olmalıdır. Tasarımın bazı bölümleri yeni olabilir, ancak yine de modüller olarak oluşturulmaları gerekir. Buradaki nokta, tasarımı oluşturmak için yeniden kullanılabilecek veya genişletilebilecek UI sisteminde hangi modüllerin mevcut olduğunu belirlemek için stil kılavuzunu kullanmaktır.

(Stil kılavuzu yoksa ne olur? Üzülmeyin! Bir sonraki bölümde size stil kılavuzu kullanmasanız bile modüler bir şekilde nasıl tasarım yapacağınızı göstereceğim.)

Stil kılavuzuna dayalı geliştirmede bir sonraki adım, temelde tasarım çözümünü daha küçük parçalara ayırma alıştırması olan soyutlama aşamasıdır. Bu aşamada, tasarımcılar ve geliştiriciler, önerilen tasarımı ayırt etmek ve kullanılacak veya geliştirilecek veya uygulama için oluşturulması gereken öğeleri ve bileşenleri (yani modülleri) belirlemek için birlikte çalışırlar.

Soyutlama aşaması, bir sonraki adım için bir planın izlenmesine de hizmet eder: uygulama ve dokümantasyon . Bu aşamada, modüller mevcut modüllerin geri kalanından yalıtılmış olarak inşa edilir veya geliştirilir. Web geliştirmede bu, uygulamadan bağımsız bir bileşen oluşturmak veya bir öğe için stilleri tanımlamak anlamına gelir. Bu, modülerliğin önemli bir yönüdür, çünkü sistemin diğer bölümleriyle öngörülemeyen bağımlılıkları önleyerek, herhangi bir sorunu sürecin başında belirlemenize yardımcı olur. Sonuç, bütüne entegre edilmesi daha kolay olan daha kararlı parçalardır.

Stil kılavuzuna dayalı geliştirme ile ilgili benzersiz bir şey, uygulama ilerledikçe, sonradan düşünülmekten ziyade dokümantasyonun da gerçekleşmesidir. Bu mümkündür, çünkü bir stil kılavuzu oluşturucu kullanıldığında, belgeler bir yaşam tarzı kılavuzu haline gelir ve uygulama için hem bir çerçeve hem de bir sanal alan işlevi görür:

• Yaşam tarzı kılavuzu, UI öğeleri (başlıklar, listeler, bağlantılar, giriş kontrolleri vb. gibi) için bir tanım çerçevesi ve bir bileşen kitaplığı (navigasyon sistemleri, araç çubukları, arama araçları, ızgara tabloları vb. gibi) olarak hizmet eder. ) kullanıma açıktır. Bu, geliştirmenin her seferinde sıfırdan başlamadığı anlamına gelir. Bunun yerine, UI sistemindeki mevcut tanımları temel alır ve ona katkıda bulunur.
• Aynı zamanda bir sanal alan çünkü uygulamayı inşa etmek ve test etmek için bir tanıtım alanı olarak hizmet ediyor. Geliştirme, uygulamaya entegre edilmeden önce tam olarak burada gerçekleşir.

Stil kılavuzuna dayalı geliştirmenin son adımı olan entegrasyon aşaması, modüler tasarımdaki montaj adımına benzer. İhtiyaç duyulan UI elemanları veya bileşenleri geliştirilmiş ve uygulamaya entegre edilmeye hazır hale getirilmiştir. Geriye bunları yapılandırmak ve özelleştirmek kalıyor. Entegrasyon sırasında stil kılavuzu, fiziksel bir modüler tasarımı bir araya getirmek için kullanılan herhangi bir iyi talimat kılavuzuna benzer.

Modüler tasarımın ve stil rehberli geliştirmenin temel kavramlarını belirlediğimize göre, şimdi bunları kullanmaya başlayalım.

Modüler Bir Şekilde Tasarım

Şunu hayal edin: Harika bir kullanıcı akışı oluşturdunuz, etkileşimleri göstermek için maketleri ve prototipleri bir araya getirdiniz ve her bir parçayı belgelediniz. Muhtemelen tasarımlarınız, size büyük bir avantaj sağlayabilecek bir stil rehberini zaten takip ediyor. (Değilse, üzülmeyin!) Geri çekilin ve tasarım çözümünüzün ana parçalarını yüksek düzeyde haritalamaya başlayın. Bu kısımlar, belirli şeylerin gerçekleştirildiği etkileşim noktaları olabilir. Örneğin, bir ödeme akışı şöyle görünebilir:

Ama silahlarınızı tutun! Bunlar henüz modül değil. Oraya ulaşmak için, akışta kalıcı olan UI öğelerini tanımlamamız gerekiyor, örneğin:

• ödeme adımları göstergesi,
• bilgi girmek için kullanılan form öğeleri,
• sepette ürünlerin temsili,
• başkalarının satın aldığı ilgili ürünlerin temsili,
• satın alma ile ilgili politikalar,
• Yardım Metni,
• mesajlar ve uyarılar.

Biraz daha derine inerek, stiller ve etkileşim kalıpları da bulacağız:

• Stiller:

• belirtmek için kullanılan renkler:

  • hata, başarı, uyarı ve bilgilendirme mesajları;
  • birincil ve ikincil eylemler;
  • etkin olmayan ve seçilmiş durumlara karşı devre dışı durumlar;
  • normal metne karşı bağlantılar;
  • markalaşma;

• farklı içerik türlerini belirtmek için kullanılan tipografi:

  • bilgileri hiyerarşik olarak düzenlemek için yazı tipi boyutu;
  • mesajları vurgulamak veya ek bilgi sağlamak için yazı tipi türleri;
  • bilgileri özetlemek için listeler;

• görsel anlamı iletmek ve ortak eylemlere hızlı bir şekilde başvurmak için ikonografi.

• Etkileşim kalıpları:

  • yaklaşan adımları gösterme (devre dışı);
  • önceki adımları gösterme (bilgilerin düzenlenebilmesi için etkinleştirildi);
  • düzenlenebilecek özetlerin görüntülenmesi;
  • kullanıcı alanın dışına tıkladığında bilgilerin doğrulanması;
  • rollover'da yardım metni sağlamak;
  • seçim yapıldıktan sonra sepetin güncellenmesi.

Tasarım tüm bu küçük parçalara ayrıldığında, nihayet modüllerimize sahip olacağız. Bu noktada, birçoğunun sadece ödeme işlemi için değil, uygulamanın diğer birçok alanı için de geçerli olduğunu görmek daha kolay. Modüler bir tasarım yaklaşımıyla, bu modüller, bu özel tasarımda ve gelecekteki tasarımlarda kullanılabilir olacak şekilde oluşturulabilir.

Atomik tasarım, modüler tasarımlar yaratma sürecini hızlandırabilecek bir metodoloji olarak bahsetmeye değer. Bu metodoloji, kimyayı bir benzetme olarak kullanarak sistemin farklı parçaları arasındaki ilişkileri ve bunların birbirleriyle nasıl ilişkili olduğunu analiz eder. Adımlardan geçmek, önceki alıştırmamızın hemen hemen tersidir:

1. Sistemdeki en küçük modüller olan atomlardan başlıyoruz (örneğimizde düğmeler, tipografi ve ikonografi).
2. Modüller, daha fazla işlevsellik sağlayan moleküllere bağlanarak karmaşıklık içinde büyür (örneğimizde, ödeme adımları göstergeleri ve ilgili ürünler modülü).
3. Ardından, uygulamada birlikte gruplandırılmış moleküller olan organizmalar vardır (örneğimizde, uygulamanın başlığı ve çeşitli formlar).
4. Kimya analojisini bırakarak, bir sonraki seviye, organizmaların yerleştirildiği önceden tanımlanmış yapılar olan şablonlardır .
5. Son olarak, şablon örnekleri olan sayfalar vardır.

Buradaki eksik parça, tanımlanan modülleri belgelemenin bir yoludur. Bu, yalnızca modüllerin nasıl oluşturulması gerektiğini yakalamak için bir belirtim belgesi oluşturma veya marka renkleri ve yazı tipi aileleri gibi (herhangi bir standart stil kılavuzunda tipik olan) üst düzey tanımları yakalayan yönergeler yazma meselesi değildir. Bunun yerine, belgelerin daha karmaşık ve dinamik olması gerekir, böylece bu modüller değiştiğinde (ki değişeceklerini bilirsiniz!), belgeler eski haline gelmez. İşte tam da bu noktada yaşam tarzı rehberleri boşluğu dolduruyor!

Bir Yaşam Tarzı Rehberi Kullanmak

Bir yaşam tarzı rehberi, birçok şey sağladığı için tasarım sürecinde çok faydalı olabilir.

Üzerinde Çalışılacak Bir Temel

Stil kılavuzu, her seferinde sıfırdan başlamak yerine, tasarımı oluşturmak için kullanmanız gereken görsel yönü ve modülleri sağlar.

Gerçek koddan bir yaşam tarzı kılavuzu oluşturulduğundan, uygulanan tasarımın en son ve en büyük sürümünü yansıtır.

Tasarım Çözümlerinin Belgelenmesi

Belirli bir UI veya UX problemini çözmek için edinilen bilgi daha sonra kullanılmak üzere gönderilebilir.

Bu, uygulamada tutarlılığın korunmasına yardımcı olur ve herhangi bir yeni çözümü mevcut tasarımın bir parçası haline getirmeye teşvik eder.

Kullanıcıların aşina olabileceği kalıplar geliştirecek ve böylece kullanılabilirliği artıracaksınız.

İletişim Kolaylığı

Kılavuz, kullanıcı arayüzünün en güncel temsilini sağlayarak tasarımın iletilmesine yardımcı olur (hızlı bir şekilde güncelliğini yitiren statik maketlerin aksine).

Stil kılavuzundaki çeşitli öğeleri adlandırmanız gerektiğinden ortak bir UI dili geliştirilmiştir. Bu, yalnızca UI tasarımcıları arasında değil, aynı zamanda bir tasarımın nasıl uygulanması gerektiğini iletmeniz gerektiğinde büyük bir avantaj olan tasarımcılar ve geliştiriciler arasında da işbirliğini gerektirir.

Mevcut bir stil rehberiniz olsun veya bir tane oluşturmayı planlıyor olun, süreci otomatikleştirmek sizi doğru yöne götürecek ve tasarım sürecini modüler bir şekilde yönlendirecektir. Bu nedenle, bir yaşam tarzı rehberi üreticisi için alışveriş yapmaya hazırsanız, aşağıdaki kaynakları tavsiye ederim:

• Smashing Magazine'den Robert Haritonov, “Yaşam Tarzı Kılavuz Araçlarına Derinlemesine Bir Bakış”
• “Desen Kitaplığı Üreticilerine Genel Bakış,” David Hund, GitHub
• “Stil Rehberi Oluşturucu Özeti,” Susan Robertson, A List Apart

Aşırıya Kaçmayın!

Modülerliği birleştirmek için tasarım sürecini nasıl ince ayar yapabileceğimize ve bir yaşam tarzı kılavuzunun avantajlarına baktık, şimdi yol boyunca karşılaşabileceğiniz bazı yaygın tuzakları keşfedelim.

Stil Rehberi Tasarım Çalışmasının Yerine Geçmez

Yöneticilerden, yaşam tarzı rehberi yerleştirildikten sonra tasarım çalışmalarının çoğunun yapıldığını duymak alışılmadık bir şey değil. Bir çok tekrarlı ve önemsiz iş yapılırken (bir düğmenin farklı durumlarını defalarca prototiplemek gibi), şunu göz önünde bulundurun:

• sürekli olarak yeni özelliklerin oluşturulması gerekecek,
• bir çözüm bulmak, tasarım kararları vermeyi içerir.

Yani, evet, bir yaşam tarzı rehberine sahip olmak ve stil rehberliği odaklı geliştirmeyi takip etmek, geliştirme iş akışını iyileştirir, ancak tasarımcıyı denklemden çıkarmaz. İş akışlarını hızlandıran ve iletişimi artıran bir araca sahip olmak hem tasarımcılar hem de geliştiriciler için avantajlıdır. Ancak bu yaklaşımın en güzel yanı, kullanıcı arayüzünün özelleştirilmesi için çok fazla alana izin vermesi ve böylece kullanıcı deneyimini geliştirmesidir - ve bunu çözmek tasarımcının rolünün bir parçasıdır.

Kalıpları Aşırıya Uymayın

Bir uygulamada her zaman kalıpları kullanmaya çalışmalıyız. Örneğin, renklerin ve yazı tipi boyutlarının tutarlı kullanımı, kullanıcı arabiriminde etkileşim kurulabilecek kullanıcı öğelerini hızlı bir şekilde gösterebilir. Ancak, daha önce uygulanmış olduğu için bir kalıp kullanmaktan kaçının; bunun yerine, eldeki sorunu gerçekten çözdüğü için kullanın.

Örneğin, ekranın üst kısmında araç çubuklarını görüntüleme düzenini kurduysanız, bu model çoğu durumda işe yarayacaktır, ancak bağlamsal bir araç çubuğu sunarken, kullanıcının eylemde bulunduğu yere daha yakın, daha mantıklı olan zamanlar olacaktır. . Bu nedenle, bir kalıbın yeniden kullanımının, uygulama kolaylığına kullanıcı deneyimine göre öncelik verip vermediğini daima sorgulayın.

Tasarım Yinelemesini Gözden Geçirmeyin

Bu, önceki noktayla biraz bağlantılı. Yeni modeller denerken ve bir arayüz tasarlamanın yollarını bulurken, ilk bakışta stil rehberini takip etmeseler bile, yinelemenin ve yeniliğin değerini göz ardı etmeyin. Stil rehberi, mümkün olan en iyi kullanıcı deneyimini yaratma çabanızı dizginlememelidir. Aksine, adından da anlaşılacağı gibi, önceki çalışma ve deneyimlere dokunarak sorunları çözmenize yardımcı olacak bir rehber, bir başlangıç ​​noktası olmalıdır. Tasarım aşamasında yineleme her zamanki kadar önemli olmaya devam etmeli ve sizi yerleşik kalıpları geliştirmeye teşvik etmelidir.

Bakım Yükü

İşinizin içerdiği milyonlarca şey arasında, stil rehberini sürdürmek size yük gibi gelen son şey olmalıdır. Bunun üstesinden gelmek için aşağıdaki uygulamaları faydalı buluyorum:

• Kurulumu kolay ve düzenli olarak etkileşime girmesi kolay bir dokümantasyon sistemi bulun.
• Uygulama zaten sona erdikten sonra sonradan düşünmek yerine, belge güncellemelerini iş akışınızın bir parçası yapın. Gittiğiniz gibi belgeleyin!
• Herkesin belgelere katkıda bulunmasını kolaylaştıran yönergeler oluşturun. Bu, iş yükünü dağıtacak ve sahiplenme duygusunu artıracaktır.

Modüler Oluşturmak için Modüler Tasarım

Tutarlı ve özelleştirmesi kolay, aynı zamanda ölçeklenebilir ve uygun maliyetli esnek bir UI sistemi oluşturmak, yalnızca nasıl oluşturulduğuna değil, nasıl tasarlandığına da bağlıdır. Her yeni tasarım bağımsız olarak, yerleşik standartlar ve kalıplar göz ardı edilerek oluşturulursa, bir bileşen kitaplığı çok az değere sahiptir.

Diğer taraftan, kullanışlı olduğu için aynı stilleri ve kalıpları yeniden kullanan çerez kesici arayüzler yapmakla ilgili değil. İyi bir tasarım, benzersiz olduğu için değil , harika bir deneyim yaratmak için hem biçim hem de işlevi birleştirdiği için etkilidir. Bu hedef her zaman akılda tutulmalıdır ve hem tasarıma hem de geliştirmeye modülerlik getirmek için stil rehberli geliştirme gibi bir yöntem kullanmak, bu hedefe ulaşan uyumlu bir UI sistemi oluşturmanıza yardımcı olacaktır.