Bu POS tasarımının tarihli görünmesini sağlayan nedir?

Bu Satış Noktası (POS) ekran tasarımının neyin eski görünmesini sağladığını anlamaya çalışıyorum .

3B düğmeler, renkler, düzen, yazı tipi mi? Ve onu güncel göstermek için ne yapardın?

Tasarım uzmanı olmamak, tarihlendiğini görebiliyorum. Ama neden ve nasıl değiştirileceğinden emin değilim.

Diğer cevaplar, tasarımın nasıl geliştirileceğine odaklanır, ancak tasarımın neden tarihli göründüğünü sorduğunuzdan beri:

Yazı tipi çok küçük . Sol taraftakiler diğerlerinden daha az tarihli görünüyor, neden? Solda, yazı tipi boyutu metin için mevcut olan dikey boşlukla eşleşirken, diğer tüm düğmelerde yazı tipi çok küçük. Ayrıca, tüm büyük harf Arial ve her düğmedeki 3 sabit metin satırını da atalım (Pay dışındaki her düğme dikey üst, orta ve altta metin alacak şekilde biçimlendirilmiş görünüyor, yalnızca 2 satır varsa garipliğe yol açıyor Asıl metnin

Çekici renkler . Ekran, hepsi orijinal 64 EGA renginin bir parçası olan neredeyse rastgele 9 rengi kullanıyor gibi görünüyor. Birçok modern GUI, düğmeler arasında büyük bir fark olmadığı sürece, daha ince renk farklılıkları kullanır. Bazı modern GUI'ler ayrıca düğmelerde renk degradeleri kullanır.

Görüntü yok.

2 Renk 3D efekti. Sol üstte tek tip beyaz ve sağ alt tek düz gri olan 2 piksel genişliğinde bir kenarlık ve etraflarında tek bir siyah kenarlık olan bir piksel kullanan 3B düğmeler modası geçmiş durumda.

Çok basit. Yalnızca düğmeleri kullanarak, şu anda Gıda bölümüne baktığımızı sezgisel olarak belirtme şansı kaçırılmış. Modern bir Gui, Gıda düğmesinin arkasındaki arka plana uzanan sarı düğmelerin arkasındaki dolgulu bir dikdörtgen gibi, Kırmızı ve sarı parçaların birbirine ait olduğunu belirtmek için diğer ipuçlarını kullanır:

Sonunda, POS Sistemi başlığı beni rahatsız ediyor, ama bence bu sadece kötü bir tasarım ve bunun tarihlendirmeyle ilgisi yok.

Herhangi bir şeyi değiştirmeden önce, geçerli ekranın EGA'dan (64 renk tablosundan seçilen 16 renk paleti) fazlasını desteklediğinden emin olun ve görüntüleri kullanmak istiyorsanız, ekranın çözünürlüğünün kullanıcının ekranda gösterileni tanımasını sağladığından emin olun. Görüntüler. Bazen sahada kullanılan cihazlar tahmin edebileceğinden biraz daha eskidir. Ayrıca, renkleri değiştirirken renk körlüğünü aklınızda bulundurun.

Bunun bir POS sistemi olduğu düşünüldüğünde, işlevselliğin orada olduğunu söyleyebilirim. Düğmeler büyük, nispeten kolay okunur ve gruplar arasında düzenlenmiş ve bu da aradığımı bulmamı kolaylaştıracak.

Bunu söyledikten sonra, iyi yapılandırma kararları görüyorum, ancak çok fazla tasarım kararı görmedim. Bakacağım şey bu:

• Yazı Tipleri : Uygulamanızdaki her şey Arial büyük harf kullanıyor, ancak her öğe aynı değil. Bir hiyerarşi var ve bunu temsil etmek için font stillerini veya aileleri kullanabilirsiniz. Örneğin, alt satırlar karışık durum kullanabilir, çünkü bunlar ana seçeneklerin bir parçası değillerdir. "Ödemeyi" büyütmeyi seçtiniz, ki bu harika, ama farklı yazı tipi boyutuna sahip tek düğme. Yazı tipini neden değiştirelim, örneğin rengi değil? Yapmanız gerektiğini söylememekle, demek istiyorum ki bu şekilde düşünmek elementleri ayırmanın yeni yollarını keşfetmenizi sağlayabilir. Örneğin: Bölücüler kullanmayı düşündünüz mü?

• Boşluk : Öğelerin çoğu için aynı boşluğu (kenar boşluklarını) kullanmıyorsunuz. İçine bak ızgara sistemleri , birini kullanarak korkunç yararlanacak. Dengeli bir düzen tasarımın daha düzenli ve cilalı görünmesini sağlar. Ayrıca, düğmelerin içindeki metinle ilgili garip boşluk sorunlarınız da (IMO) var. 1 satırlı düğme ortalanır, 2 satır sıralar arasında büyük bir alana sahiptir ve 3 satır iyi görünür, çünkü her yerde eşit boşluk vardır. Metni sınırlara mümkün olduğunca yakın çekmeye çalışmak yerine, metin satırları arasında her zaman aynı boşluğa sahip olmak daha mantıklı olmaz mıydı?

• Renk : Gruplandırma, farklı düğmelerin farklı şeyler yapmasını sağlamak için çalışır, ancak paletin arkasında bir neden göremiyorum. Yönünü düşünmeye çalışın: Mesajımı daha fazla itmek için renk kullanabilir miyim? Düğme bulma görevini kolaylaştırmak için renk kullanabilir miyim? Bunu zaten "Gönder" e farklı bir ton vererek yapıyorsunuz. Bu harika bir karar. Ama sonra seçtiğiniz rengin, sağ sütunda mı yoksa ortada mı olduğuna bağlı olarak farklı olduğunu görüyorum. niye ya?. Sonra, rengini benzer bir şekilde başka nerede kullanabilirsin? Google Materyal’e bir bakın, yeni kombinasyonları denemeniz için size ilham verebilirler.

• Gölgeler ve efektler : 3D efekti bu bağlamda çok kullanışlıdır ve bence daha da ileri götürebilirsiniz. İşte 3D POS örneği. Ayrıca simgeler kullanmayı düşündünüz mü? Güzel bir görsel yardım için yapabilirler.

Uygulamanın tarihli göründüğünü düşünüyorum, çünkü bazı tasarımların ve kodlama dillerinin bu konuda çok fazla yaratıcılığa izin vermediği norm olan alt gölgelerle renk blokları dışında hiçbir eğilimi takip etmiyor. Şimdi, hemen hemen her şeyi yapabilirsiniz. Tasarımınız tarihli görünüyor çünkü son yıllarda popüler olan tasarım püf noktalarından ve seçeneklerden faydalanmıyor.

Diğer benzer uygulamalara bir göz atmanızı, doğru ya da yanlış ne yaptıklarını kontrol etmenizi, sizin bu fikirlerden bazılarının nasıl beslendiğini görün. Zaten harika bir iskeletin var, sadece biraz ete ihtiyacı var. Bir ızgara ve belki de bazı tamamlayıcı renklerle oynamak, uygulamanız için harika şeyler yapar.

İlk bakışta, ne olduğunu hızlı bir şekilde anlayamıyorum (ve restoran POS sistemlerinde deneyimim var). Bana göre, UI'nin sağındaki gri renkli öğeler birbirine ait görünmüyor. Ekranın ortasındaki sarı renk 3 bölüm gibi gözüküyor, fakat bu net değil mi?

Aşağıda gösterdiğim örneklerden (ve kalitesinden hiçbir şey söylemiyorum, bunlar hızlı bir aramadan rastgele bir seçimdir) İkonlar, Görüntüler ve büyük renk bloklarının kullanımını görebilirsiniz. Bunlar eylemleri tanımlamak ve ayrı işlev alanlarını veya bilgi hiyerarşisini ayırt etmek için faydalı araçlardır.

Daha ayrıntılı bir cevap için zamanım yok ama söyleyeceğim şey şu anki UI (Kullanıcı Arayüzü) tasarımı örneklerine bir göz atmak. Örneğin, 'POS UI Design' için hızlı bir arama, aşağıdakiler gibi görüntüler sunar:

Bir kenara tasarlayın, işlevsel mi ve işleten insanlar nasıl kullanılacağını biliyor mu? Bu durumda eğer kırılmayan şeyi düzeltmeyen bir unsur var.

Evet, tarihli görünüyor, ancak kullandığım sistemlerin çoğu aynı basit görünümden suçlu. Erişilebilirliği göz önünde bulundurarak seçilen yuvarlatılmış düğmeler ve renkler onu artırabilir, ancak benim içgüdülerim bunun tamamen işlevsel bir parça olduğu ve denemek ve "caz" için çalışanların kafasını karıştırabilir.

3D efekti aslında bu durumda, kullanıcıya hızlı bir şekilde tıklanabilir bir tuş olduğunu söylediği için faydalıdır ve restoranın ticaret zamanının büyük önem taşıdığını hayal ediyorum.

Ben de bir tasarım uzmanı değilim, ancak mobil uygulamalar oluştururken böyle bir şeyi göz önünde bulundurmam gerektiğinden ...

1. Eski okul win32 3d efekti hendek. Herkesin dokunmatik ekran dostu görünmesini beklediği bir çağda kelimenin tam anlamıyla temassızlık. Kullanmak istediğiniz, her bir eylem alanı (düğme) için, ilgili düğme grupları veya düğmelerin altındaki gölgeler arasında boşluk bırakmayan büyük düz bölgelerdir. Android'in Materyal Tasarımı içine bak . Mobil olmayan uygulamalar için bile faydalıdır.

2. Bu öğeler aralarında boşluk varsa, ilgili öğeleri gruplamak için kenarlıkları kullanın (renkleri değil). Aralarında boşluk yoksa, renkleri kullanmaya devam edin, böylece ilgili alanın tamamı tek bir düz arka plan rengine sahip gibi görünür.

3. Daha yumuşak renkler (pastel renkler düşünün) ve ücretsiz bir renk düzeninin parçası seçin. Her rengin açık ve koyu sürümlerinin paletinizde olduğundan emin olun. Umarım hala yalnızca eski CGA / VGA 16 renk paletinden görüntüleyebilen bir sistemle ilgilenmiyorsunuzdur.

4. UI öğeleri, renk düzenine göre tutarlı bir şekilde renklendirilmelidir. Örneğin: UI girişi sağlayan düğmeler, sayfaları değiştiren veya birincil işlevselliği tetikleyen düğmelerden farklı olarak kabul edilebilir, ancak genellikle belirli bir işlev alanındaki tüm düğmeler için 1 renge karşılık, bu tür düğmelerin her biri için kullanılan 1 renk olmalıdır. Bu, kullanıcının her bir UI öğesinin ne yapacağı hakkında daha iyi bir fikir edinmesine yardımcı olur.

5. Bunları ayırmak için eylem alanları arasındaki boşlukları ve eylem öğeleri arasında düz, yumuşak kenarlıklar kullanmayı tercih edin. Bir alandaki eylem öğelerinin normal boyutta olması gerekir (her eylem öğesinin ızgarada 1 veya daha fazla bitişik hücre olduğunu hayal edin).

6. Pencerede bir başlık alanı kullanırken:

   a. Bu alandaki tüm eylem öğeleri başlık alanına sığmalıdır.

   b. Bu alandaki tüm eylem öğeleri uygulama için genel olmalıdır (örn. Giriş, ayarlar vb.).

   c. Başlık, logodan başka hiçbir şeyle örtülmemelidir.

Umarım bu yardımcı olur.

Hemen hemen tüm öğeler düğme gibi görünüyor. Ancak etiketleri okuduğumda, bazı düğmeler eylem düğmeleriyken diğerleri gezinti amaçlı görünüyor.

Modern bir arayüzde, ikisini ayırt edersiniz. Bir dizi sekme, hem şu anda nerede olduğunuzu hem de başka bir yere nasıl gideceğinizi göstermek için etkili bir gezinme aracı işlevi görür. Tüm pizza seçenekleri için bir sekme Pizza, tüm makarnalar için bir sekme Makarna alın.

Belki de mor GIDA düğmesi zaten böyle bir sekme görevi görüyor ve DRINKS böyle bir sekme. Kesinlikle sağda olmamalı - İngilizce yukarıdan aşağıya, soldan sağa okunur ve iş akışınız bunu kopyalamalıdır.

Bir dizi sekme oldukça iyi çalışır, ancak burada daha derin bir hiyerarşi olabilir. Bu durumda, geçerli UI durumunu bir yol olarak göstermek akıllıca olabilir: Food > Starters >başlangıç ​​karakterleri sayfasının üstünde bir satır. "Başlangıç" menüsünün ilk girişini "<Yiyeceklere Geri Dön" düğmesi haline getirin; Bu, epeyce kontrolleri gizlemenizi sağlar.

İlk önce, amacın ne olduğunu soracağım.

Operatörün anahtarı hızlı bir şekilde bulmasını ve yanlış giriş yapmadan siparişi daha hızlı yapmasını gerektirir mi? veya kullanıcıları makine için GUI'yi kullanmaya çekmek ve teşvik etmek zorunda mı?

Bu durumda, parçanın amacı açıkça verimli ve hızlı işlem girişi için olduğunu gösterir. Bu nedenle, form, renk ve hiyerarşinin, tasarım eğilimi ve fanteziliğe göre mantıksal düzeni dikte etmesi gereken daha organize bir yolla daha basit gidebiliriz.

Mevcut GUI'deki sorun şudur:

Renk : Çok sert renkler, zaman içinde stres yaratacak ve kullanıcıların kararlarının etkinliğini etkileyecektir. Diğer yüksek kontrast renklerle beyaz arka plan, kesinlikle göz yorgunluğu yaratır ve kullanıcının toplaması gereken gerekli bilgileri hızlıca bulmak zordur.

Yazı tipi : Bulmak ve karar vermek için çok küçük, bu da metin arasındaki sert renk ve kontrasttan etkilenir. Bu, ilk kez kullanıcıları sisteme alışmaları, daha uzun sürmesi ve daha fazla hatalı giriş yapması büyük ölçüde etkileyebilir.

Sipariş ve gruplandırma : Yukarıda "büyük yazı tipinde" POS Sistemi adı olmalı mı? Faydalı mı? HAYIR! Bu sistemin kullanıcıları ve ekrandaki unsurlar açıkça söyler. Gruplama mantıklı geliyor mu? Pek değil, çok gruplandırılabilir, böylece kullanıcılar bunu mantıklı bir şekilde bulabilirler. Seçim sözcüklerinden bazıları mantıklı mı? HAYIR! "GÖNDER"? ne yolla "Menüleri Ayarla"? Her gün menüleri ayarlıyor musunuz? HAYIR! ileri. Hiyerarşi ve kelime seçimine dikkatle bakmak gerekir.

Bazı insanlar GUI ile görüntü ve süslü şeyler yayınladılar, ekipmanın amacından olduğu gibi, bunun süslü olması gerekmediğini, ancak son derece işlevsel ve düşünceli olması gerektiğini söylüyor.

"Döşemelerin" Mobil cihazlar, Android veya Windows işletim sistemi için özel olarak tasarlandığı hiçbir şeye benzemediğinden, görsel olarak modaya uygun olanın çoğunu yöneten bir çatışmaya neden olduğu için tamamen Uygulamaya benzemez. Bu konuda hemen hemen her şey "yanlış" yani özellikleri atlayacağım.

Tüm bunlar harika cevaplar, ancak referans malzeme istiyorsanız, iyi ve modern bir POS sisteminin neye benzediğini gösteren parlak bir örnek istiyorsanız, iPad'deki Square uygulamasını inceleyin.

https://itunes.apple.com/us/app/square-register-point-sale/id335393788?mt=8

Mevcut olanı iyileştirmek için yapabileceğinizi düşündüğüm en büyük şey (ve neden bu kadar tarihli görünüyor), modern UI'nin çok fazla beyaz alanı sevme eğiliminde olması ve beyaz alanı da beyaz yapmaktır. Bu günlerde pek çok tasarım ters tip (siyah zemin üzerine beyaz metin veya koyu renkte beyaz metin) çok az kullanıyor. Bu siteyi beğenin: https://developer.wordpress.com/calypso/

Düğmeler fonksiyona göre düzenlenmeli, hiyerarşik olmalı ve düğmeler yerleşim metodolojisine uygun olmalıdır.

Layman'ın terimiyle:

1) En çok kullanılan düğmeleri herkesin kolayca bulabileceği bir yere yerleştirin;

2) İç düğmeler dış kabuk tarafından "kontrol edilmelidir" (bir pencerenin içinde, pencerenin içinde);

3) Giriş düğmesine (veya bu konuda başka bir düğmeye sahipseniz), ekranlar değişebilse bile aynı yerde tutun.

Pek çok POS sistemi fonksiyonel tasarımı optimize etmeye çalıştı ancak bir oyunun biraz önünde olduğunu düşündüğüm bir POS Rezku POS .