Wireframes ve Mockups arasındaki farkı bilmek istiyorum. Aradaki farkı basit bir şekilde anlama veya her ikisinin de aynı olduğunu kesin olarak bilmeyi umuyorum.
Googledim ama aradaki farkın ne olduğunu tam olarak anlayamadım, eğer biri bana net bir şekilde açıklayabilirse sevinirim.
Yanıtlar:
Bir tel kafes işlevsellik ile ilgilidir. Tasarımınızda ne tür şeyler yapabileceğinizi gösteren basit bir taslak olabilir. Örneğin, bir web sitesinin tel kafesinde gezinme, ana düğmeler, sütunlar ve farklı öğelerin yerleştirilmesi gösterilir. Bir web sitesi için bir taslak olarak düşünebilirsiniz.
Bir mockup , bu durumda ürünün neye benzeyeceğinin gerçekçi bir temsilidir, bu durumda: bir web sitesi. Nihai sonuç tam olarak maket gibi görünebilir veya sürüm revizyonlarından sonra bir varyasyon olabilir. Bazı insanlar, makbuzları grafik yazılımı kullanarak çizmeyi tercih ederken, diğerleri doğrudan HTML / CSS'de bunu yapar.
Tel kafesler için Balsamiq'i ve örnekler için Photoshop / Illustrator veya HTML + CSS'yi (karmaşıklığa bağlı olarak) kullanıyorum.
Bir tel kafes örneği:
Tel kafesler , sadece konum ve / veya büyüklüğü belirtmek için kullanılan ilkel şekiller veya çizgilerdir. Herhangi bir tel kafesin amacı, elemanları bir mizanpaja "sığdırmak", elemanların gerçekte son tasarımda nasıl görüneceklerini, sadece yerleştirilecekleri yeri göstermeyeceğini göstermemektir.
Mockup'lar tel kafeslerin üzerine inşa edilmiştir ve tip seçimleri, renk seçimleri vb. Dahil bir tasarımın genel görünüm özelliklerini göstermek için daha da ileri gitmektedir.
@Yisela'nın ayrıntılı cevaplarını destekliyorum, ayrıca aşağıdaki sunumda ortaya çıkan vizyonumuzu da ekliyorum.
Marcin Treder tarafından yazılmış bir makalenin kısa bir özeti :
Tel Çerçeve
Bir tel kafes, bir tasarımın düşük kaliteli bir temsilidir. Açıkça göstermeli:
• Bilginin yapısı (nerede?)
• Kullanıcı arayüzü etkileşiminin tanımı ve temel görselleştirmesi (nasıl?)
Model
Tel çerçeveler çerçeveyi, bilgi hiyerarşisini tanımlamak, iş akışını göstermek, ekranda ne olduğuna dair ayrıntılı bilgi vermek ve bir bileşenin nasıl çalıştığına dair açıklama (ek açıklama) tanımlamak için kullanılır. Uygulamanın veya alanın karmaşıklığına bağlı olarak, tel kafesler, teslim edilebilecek başka bir gereklilik üzerine kurulmalıdır; süreç modelleri. Wireframes, bir müşteriden gereksinimleri ortaya çıkarmak ve sonunda bir müşteriyle gereksinimleri onaylamak için kullanılabilir. Tel kafesler, bir sitenin veya uygulamanın yapısının görsel bir modelidir. Kullanılacak yazı tipini, dolguyu, rengi, stili vb. Tanımlamıyorlar. Ölçeklenmiyorlar ve tonları veya degradeleri yok. Tüm bunların müşteriyle iletişim kurması gerekir, böylece diğer gereklilikler ile birlikte, teslim edilebilir süreci ve tel kafesin içeriğini anlarlar.
Genellikle Photoshop'ta oluşturulan bir model oluşturulur ve onaylanan tel çerçevenin teslim edilebilir yapısına veya çerçevesine dayanmasına rağmen, belirgin bir zamanlama ve onay süreci ile farklı bir teslim edilebilir. Mock-up'lar veya kompozisyonlar, arayüzün görsel stilini veya tonunu tanımlar. Kabul edildikten sonra, mock-up'lar, CSS kodu, stil kılavuzları, grafik varlıklar vb. Gibi ek gereksinimlere veya iş ürünlerine çevrilebilir.
Tel kafesler asla makbuz olmamalıdır. Mock-up olabilir wireframesçakışacak olarak kullanılabilir ancak bu gerekli ve önemli ölçüde bütçenizi etkileyebilir olabilecek revizyonlar için de etkileri olacaktır.
Kaynak: İletişim Tasarımcısı olarak 15 yıl, UX Lead, Web ortamında ve uygulama geliştiren bir kurumsal ortamda İş Analisti. Ve sevgili BABOK
Henüz Dave Kaye'nin cevabı üzerine yorum yapacak itibarımı bulamadım, bu yüzden doğrudan cevap vermek zorunda kaldım. Rachuru'nun mükemmel cevabı ile karşılaştırıldığında cevabını not etmekte fayda var.
Modern ifadelerin yorumunda, yatmanın açıklamasının açıklaması olabilir / olmalıdır;
Gerçek terminoloji 80'lerden kaynaklanmaktadır. O zamanlar, gerçek zamanlı görüntüler üretmek için bilgisayar gücü yoktu ama olabilir gerçek zamanlı olarak ekranda yüzen grafiklerin "wireframes" izleyin. Uygun bir "demo" bir gecede render vb. Gerekli.
Bu zamanlarda, bir "tel kafes" bir iskeleti "tasarım" olarak temsil eder ve iyi bir yinelemeli tasarım süreci ile insanlar tel kafes tasarımını geliştirmeli, geri bildirim almalı ve tel kafes tasarımını iyileştirmek için geri göndermelidir.
Ne yazık ki, günümüzde, müşterilere, programcılar tarafından doğrudan kullanılabilecek hiçbir şey kullanmayan makbuzlar tasarlamalarını sağlayan birçok yazılım bulunmaktadır. Sık sık, tasarımları başkaları tarafından inşa edilir, bu nedenle mockup, programcılara büyük tasarımları etkilemek için geri getirilmek yerine özel olarak artırılır.
Bence Dave, bahsetmekten biraz daha kibar davranıyordu.
Keith
Basitleştirmek için:
Tel kafesler : iskelet / yapı
Örnekler : cilt / görsel yönü
Bazılarının da belirttiği gibi, bugünlerde modeller prototiplerle kaynaşırken tel kafesler daha fazla önem kazanıyor.
İnsanların yapmadığı bir noktaya eklemeliyim ... bu cevapların hepsi iyi teknik açıklamalar veriyor ancak bir iş ortamında farklılıklar her zaman çok net değil. Bazı şirketler bir mockup'a işlevsellik ekleyebilir, bazıları ise bir tel kafes üzerine yüksek düzeyde tasarım gereksinimleri getirebilir. Her ikisinin de, ikisi de olmayan bir şey yapabilecekleri ilk şirket olarak ne olması gerektiğine dair bir cevaba hapsolmak konusunda dikkatli olurdum!
Bilgime göre mockup ekranları UI'nin son temsilidir, bak ve hisset. Normal akış ne olacak ve alternatif akış ne olacak. Bunun en çok HTML ve CSS'de oluşturulan bir tür web prototipi olabileceğini düşünüyorum. Bunu daha sonra HLD aşamasında müşteriden göstermek ve kabul etmek için yaparız.
Karşılaştırma yapılan tel kafesler, genel bir tanımın olduğu yerde daha çok akış şeması şeklinde yoğunlaşmaktadır. Etkinliğe tıklandığında ne olduğu gibi birkaç ayrıntı açıklaması yoksa, etkinliği ve benzeri şeyleri değiştirin. Çoğunlukla SA / BA tarafından yapılır ve alay tasarımcı / geliştiriciler tarafından yapılır. Bazı insanlardan daha fazlası, söz konusu UI ile ilgili DB gibi tel kafesler ile teknik özellikler ekler.
Fakat yine de projeden projeye bağlı. Bizim durumumuzda tel kafesler gerçeğin kaynağını oluşturmaktadır.
Onlardan fark olarak anladığım şey bu
Bir tel kafes bir maket olabilir. Bir maket bir tel kafes olarak kabul edilebilir. Bazen ayrı şeyler olsalar (diğerlerinin de söylediği gibi), genellikle birbirinden ayrı olmayan şeylerdir.
Bir zamanlar, Visio'nun yaratacağı tel kafesleri düşünebiliriz. Ve örnekler, PhotoShop'un yaratacağı şey olurdu.
Ancak bugün, sahip olduğumuz araç yelpazesiyle, genellikle aynı belgeler. Başlangıçta, tel kafes olarak başlayabilirler (tamamen düzen ve işlev) ancak zamanla bir mockup olarak kabul edilebilecekleri noktaya göre daha ayrıntılı hale gelirler. Axure gibi etkileşimli bir araç kullanıyorsanız, belli bir noktada prototip olarak kabul edilebilir.
Bu yüzden örtüşen bir spektrum.
Wireframes
Bir mobil uygulama veya bir web uygulaması tasarlamayı düşündüğünüzde, önce her sayfanın nasıl görüneceğine dair bir taslak gerekecektir. Bir tasarımcı, yalnızca işletme kavramlarına dayanarak, uygulama akışını ve ilk tasarım taslağını tanımlayabilir, nasıl görüneceği, hangi düğmelerin orada olacağı, hangi alanların orada olacağı vs. gibi bir taslak çizebilir. içindir.
Maketler
Örnekler daha canlı resimlerdir. Görsel olarak daha çekici, renkler, yazı tipleri, temalar, düğmeler, logo vb. Var. Bu aşamada alanların etiketleri, notlar, yazı tipleri, gezinti menüsü vb. Tasarımda belirtilmiş. Mobil uygulamanın nasıl görüneceğini veya web sayfalarının nasıl görüneceğini tam olarak gösterir.
Wireframe ve Mockups arasındaki detaylı karşılaştırmayı bu bilgilendirici makalede bulabilirsiniz: Wireframe, Mockup ve Prototip Arasındaki Fark