Ortak Web Kullanıcı Arayüzü Stilleri

91

Sonraki günlerde bir web uygulamasının prototipini müşterilerimden birine sunmam gerekiyor, mesele şu ki CSS'de o kadar iyi değilim ve en kötüsü aldığım sonuçlardan neredeyse hiç memnun değilim.

İş mantığını kodlamak bana zorluk çıkarmaz, ancak UI tasarımı zamanımın% 80'inden fazlasını alıyor. Nefes kesici hiçbir şeye ihtiyacım yok, sadece temiz, güzel ve şık bir ortama, bir örnek:

alternatif metin

Bu, karşılaştığım yinelenen bir sorundur, keşke web kullanıcı arayüzü geliştirmesinin daha az açık bir varsayılan stili olsaydı , Visual Studio veya iPhone SDK'ya benzer bir yaklaşım benim için çok yararlı olurdu.

Balsamiq Mockups ile oluşturulan yukarıdaki mockup harika bir örnek, tüm en yaygın "bileşenler" kullanılabilir ve hepsinden önemlisi: aralarından seçim yapabileceğiniz tek bir güzel görünümlü stil var.

Web için buna benzer bir şey var mı? Nötr ama güzel bir CSS veya Javascript UI çerçevesi?

Şimdiye kadarki seçenekler:

Yalnızca CSS kullanan kullanıcı arabirimi çerçevelerinin olup olmadığını bilmekle ilgileniyorum.

Bu sayfayı çok güzel bir Web UI Kitaplıkları listesiyle buldum , ancak bunların çoğu (en azından iyi olanlar) Java'ya özgü görünüyor, saf CSS veya JS'de eşit derecede iyi alternatifler var mı?

Not: AJAX, efektler, davranışlar ve benzeri konularla ilgilenmiyorum ... asıl (tek) endişem stil.

Tüm öneriler için herkese teşekkürler!

Önerilen tüm UI kitaplıklarını çok dikkatli bir şekilde değerlendirdikten sonra, ExtJS ve Qooxdoo'nun ihtiyaçlarıma en çok uyanların olduğu sonucuna vardım. jQuery UI umut verici görünüyor, ancak yalnızca azaltılmış miktarda öğe sunuyor.

Sadece CSS kütüphaneleri gittiği sürece BlueTrip / BluePrint ve tambler tarafından önerilen temaların en iyisi olduğunu buldum. Bunun dışında, Flex ve Napkee de keşfetmeye değer görünüyor.

Şimdi ExtJS öğrenme zamanı! =)

css  user-interface 
— Alix Axel
kaynak
6
Dikkat çekmeye değer, jQuery-UI'nin "Tema Silindiri" adı verilen şeyleri hızlandırmak için güzel bir tema tasarımcısı var: jqueryui.com/themeroller
— Nick Craver

Yanıtlar:

7

Kimsenin bahsetmediğine inanamıyorum:

http://www.extjs.com/

Ticari bir js çerçevesi, ancak oldukça uygun fiyatlı ve güzel bir kullanıcı arayüzü oluşturmayı çocuk oyuncağı haline getiriyor. Jqueryui'den çok daha eksiksiz bir öğe kümesi var ve tüm bir uygulama yapmak için tasarlandı. Onunla sadece biraz oynadım ama şimdiye kadar onu gerçekten seviyorum. Kişisel kullanım için ücretsizdir.

EXT ile geliştirilmiş eksiksiz bir UI için gerçekten bir fikir edinmek istiyorsanız, şu url'yi deneyin:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html

— Erik
kaynak
@Erik: Öneriniz için teşekkürler. Önerebileceğiniz herhangi bir kitap / öğretici biliyor musunuz? ExtJS'yi tipik bir PHP MVC uygulamasına nasıl entegre etmem gerektiğini bulmakta biraz sorun yaşıyorum.
— Alix Axel
Başlamak için en iyi yer, EXT'nin sunduğu öğreticilerdir: extjs.com/learn/Tutorials PHP çerçevenizle entegre etme konusunda söyleyemem - ama bunlar sizin HTML sayfalarınız, bu yüzden onları istediğiniz gibi entegre etmelisiniz Başka herhangi bir sayfayı entegre ederdiniz, değil mi?
— Erik
11

Düzen için 960gs ve stil için jQuery-UI kombinasyonu muhtemelen peşinde olduğunuz şeydir.

960gs yerine blueprint CSS çerçevesini de düşünebilirsiniz .

— Shane O'Grady
kaynak
JQuery UI JS çerçevesini mi yoksa jQuery UI CSS çerçevesini mi kastediyorsunuz?
— Alix Axel
1
Karışıklık için özür dilerim, stil için jQuery UI CSS çerçevesini kastetmiştim. Ancak JS widget çerçevesini de dahil edememeniz için hiçbir neden yok.
— Shane O'Grady
Teşekkürler, bununla ilgileneceğim. =)
— Alix Axel
7

Dojo ve dijit kullanmaya ne dersiniz ?

Dijit, widget'lar ve öğeler oluşturmanın hızlı bir yoludur. Ayrıca değiştirmesi kolay 3 varsayılan temayla birlikte gelir.

Farklı widget'ların iyi bir listesi burada

— Peirix
kaynak
dijit ihtiyacım olan şey gibi görünüyor, ancak sayfaya erişemiyorum - nedenini bilmiyorum.
— Alix Axel
Erişemediğiniz sayfa hangisi?
— peirix
dijit, ama şimdi çalışıyor. =) Bir bilgisayara yaklaşır yaklaşmaz daha iyi bakacağım (şu anda bir telefonla göz atıyorum).
— Alix Axel
6

UI tasarımında uzmanlaşmış biriyle eşleştirin .

İş mantığıyla başa çıkmada daha iyiyseniz, zamanınızı yalnızca iş mantığını kodlayarak harcamanız daha iyi olur, böylece ustalaşabilirsiniz. Bu, sunumda üstün olan başka biriyle nasıl etkileşim kuracağınızı öğrenmenizi gerektirecektir. ( xml ve json yaygın yöntemlerdir)

İş mantığı ve sunum çok farklı. Sadece güzel görünmekle kalmayıp aynı zamanda sezgisel ve kullanımı kolay bir sistem tasarlamak oldukça zordur. Karmaşık bir uygulamanın iç işleyişini oluşturmak kadar aynı derecede zor ve zaman alıcı.

İyi bir arayüz, bir css çerçevesi eklemek kadar basit değildir.

Kendimi sunumda mükemmel olan daha 'yaratıcı' bir programcı olarak görüyorum. Her şeyden önce çok motive olmuş ve ikincisi 'iş mantığı'nda çok iyi olan biriyle yolum kesişecek kadar şanslıydım . Karmaşık sistemleri planlama ve uygulama konusunda çok daha fazla deneyimi vardı, ben ise esas olarak arayüz tasarımına odaklandım.

Sistem mimarisi, planlama, geliştirme, her neyse, daha üretken iseniz ... kendinizi bu yöne itmelisiniz. Tek başına geliştirme projeleri oldukça tatmin edici olsa da ben bunu yetersiz buluyorum. Birinin tek başına üst düzey uygulamalar geliştirme becerisine sahip olması çok nadirdir.

Buradaki zorluk, iyi çalıştığınız birini bulmaktır.

— Derek Adair
kaynak
4

Check out Google Web Toolkit . Oldukça temiz bir varsayılan görünüme sahiptir. Onlar sahip örnekler . Özellikle, Vitrin örneği, mevcut tüm widget'ları ve görünümü elde etmek için kullanılan css stilini gösterir.

— Abtin Forouzandeh
kaynak
1
GWT kullanıcı arayüzleri java ile yazılmıştır. GWT daha sonra bu javayı alır ve saf html / javascript'e dönüştürür.
— Abtin Forouzandeh
3

(G) UI Tasarımını hedefleyen birkaç çerçeve vardır; Qooxdoo , JQuery UI ve MochaUI bunlardan birkaçıdır (sonuncusu, kullanılabilir bir çerçeveden çok bir kavram kanıtı olmasına rağmen). Bu çerçeveler genellikle çeşitli JS destekli öğeler (giriş alanları ve gönderme düğmeleri gibi form öğeleri, ancak sekmeler gibi diğer öğeler) sunar. Ancak, bu öğeleri konumlandırmak ve belki de beğeninize göre biçimlendirmek yine de size kalacaktır.

Belki kendinizi bir CSS çerçevesine ( 960GS gibi ) alıştırmak , yukarıdaki JS UI Çerçevelerini tamamlayabilir.

(Kişisel bir sorumluluk reddi beyanı olarak; yukarıda bahsedilen çerçevelerin herhangi biriyle çok az deneyimim var. Ancak eminim ki Google veya SO, yapamayacağım yanıtları sağlayabilir.)

— Duroth
kaynak
1
960.gs gerçekten çok fazla stil yapmıyor - bunun için Bluetrip ( bluetrip.org ) gibi bir şey istiyorsunuz . 960.gs gerçekten sadece ızgara tabanlı bir düzen sağlar.
— Dominic Rodger
Önerdiğiniz çerçevelere bir göz attım, qooxdoo aşırı derecede karmaşık görünüyor (her şey Javascript aracılığıyla tanımlanmış görünüyor - hatta form girdileri vb.), MochaUI çok güzel nötr renklerle gerçekten güzel bir arayüze sahip, görmedim kaynak kodu ancak oldukça sınırlı görünüyor (birçok temel stil eksik). jQuery UI şimdiye kadarki en iyi seçenek gibi görünüyor. 960.gs güzel ama Dominic'in dediği gibi stil için değil.
— Alix Axel
3

Bu, mevcut projeniz için size yardımcı olmayacak, ancak gelecekteki projeler için düşünmeye değer. Uzun yıllar HTML 4'te GUI uygulamaları oluşturduktan ve sürekli olarak CSS ve HTML sınırlamalarına karşı mücadele ettikten sonra, Adobe Flex'i deneyeceğimi düşündüm. Ne bir gelişme!

Flex veya Silverlight ile sekmeli bir sayfa kontrolünü veya veri ızgarasını taklit etmek yerine, işaretlemeniz basitçe sekmeli bir sayfa kontrolü veya veri ızgarası belirtebilir. Ve çerçeveler, sıkıcı ancak hiç de kötü olmayan varsayılan stillerle birlikte gelir. Bunların tamamen HTML'nin yerini aldığını söylemiyorum, ancak widget'lara ve GUI düzenine ihtiyacınız varsa, bunların çok daha iyi bir alternatif olduğuna inanıyorum.

— Jacob
kaynak
Flex gerçekten harika bir araçtır ama dünya HTML 5 doğru hareket bugünlerde düşünün ve esnek javascript kazanç ve ne fiyat hakkında düşünüyorsunuz boyut ve çok dilli ile pek çok sorun vardır ama hala flex düşünmek harika bir araç
— tawfekov
Standartlar sürecinden uygulamalar için saf bir HTML / Javascript / CSS çözümünün ortaya çıkacağını umuyorum.
— Jacob
Flex oldukça hantal olabilir ve arama motoru dostu olmayabilir ... ama bence sistem yenilmez. 'Kıdemli' bir web geliştiricisi değilim, ancak gerçekten esnek çerçeve içinde çalışmanın faydasını görüyorum. Adobe'nin gerçekten iyi bir sistemi var. Tek çerçeve / standartlaştırılmış dağıtım araçlarıyla masaüstü / web / VE mobil için kodlama yapabilmek kelimelerin ötesinde değerlidir.
— Derek Adair
2

Bunun gibi tel kafes maketleri, başlamak için harika bir yoldur.

Burada tartışılan UI çerçevelerinin çoğunu kullandıktan sonra, sizi aşağıdaki nedenlerle jQueryUi'ye yönlendirmek isterim:

  1. jQueryUI CSS çerçevesi sizin için tutarlı ve havalı görünen CSS ile ilgilenir (gerçekten çok kolaydır - sadece biraz işaretleme yapın ve sınıfları uygulayın)

  2. jQueryUI sekme kontrolüne sahiptir ve formları biçimlendirmek için düzgün, hızlı ve kolay yollar kullanır.

— Zengin
kaynak
Önerilen tüm seçeneklerden ExtJS'ye daha meyilliyim, hiç kullandınız mı? Bunu jQuery UI ile nasıl karşılaştırırsınız?
— Alix Axel
ExtJS çok olgun ve eksiksiz. Çift lisanslı GPL ve ticari olduğunu unutmayın. Gerçekten çok zengin kullanıcı arayüzlerini hedefleyen bir widget arayüzüdür. Dolayısıyla, daha 'kurumsal' ve daha az 'dostane' bir şey istiyorsanız, bu hiç de kötü bir seçim değil. Tek şey, biraz öğrenme eğrisine sahip olması, gerçekten kendi başına bütün bir çerçeve. Web'den çok GUI programlamaya benziyor. İyi şanslar
— Zengin
2

Özellikle UI odaklı yazılım geliştirmek için tasarlanmış nispeten yeni bir PHP çerçevesi. Burada Sekmeler, Filtreler ve Izgaralar dahil olmak üzere sahip olduğunuz öğeler dahildir ve uygulamak için yaklaşık 20 satırlık kod alır.

http://agiletoolkit.org/

— Romaninsh
kaynak
1

Axure'u denedin mi? Uygulamalar ve web siteleri için hızla tel kafesler, prototipler ve spesifikasyonlar oluşturmak için bir araçtır.

Balsamiq'e benzer şekilde çalışır, ancak tel çerçevelerinizi / prototiplerinizi HTML, CSS ve Javascript olarak dışa aktarmanıza izin verir.

Daha sonra bunu bir sunucuya yükleyebilir veya çalışan bir örnek olarak bilgisayarınızda çalıştırabilirsiniz.

Formlar, bağlantılar, sekmeler, rollover'lar, Javascript efektleri oluşturabilirsiniz.

— Jonny Haynes
kaynak
Teşekkürler, Axure hoş görünüyor ama peşinde olduğum şey bu değil.
— Alix Axel
1

Prototipleriniz için zaten Balsamik Mockup'lar kullanıyorsanız, Napkee'yi düşünmelisiniz . "Napkee, Balsamiq Mockup'larını tek bir düğmeye tıklayarak HTML / CSS / JS ve Adobe Flex 3'e dışa aktarmanıza olanak tanır."

— Paul
kaynak
1

Bununla bir süre önce karşılaştım ve hiçbir şey bulamadım, bu yüzden css öğrenmek için bir fırsat olarak değerlendirdim. Ancak o zamandan beri bu konuda büyük adımlar atılmış gibi görünüyor.

Umarım bu yardımcı olur.

— icco
kaynak
1

Kısa bir süre önce iplotz.com adında güzel bir web sitesi keşfettim, burada hiçbir şey yüklemeden uygulamanızın / web sitenizin / projenizin bir modelini çevrimiçi olarak oluşturabilirsiniz. Ayrıca, tüm projeyi yönetmek ve çevrimiçi olarak başkalarıyla paylaşmak için çok daha fazla özelliğin yanı sıra ortak kontrollerin çoğuna sahiptir.

Kabul etmeliyim, henüz kendim denemedim, ama biraz baktım ve oldukça havalı görünüyor. Muhtemelen yakında kullanacağım.

— Gillyb
kaynak
Balsamiq'e çok güzel bir alternatif, tarayıcım çok yavaş ATM ama ilk izlenimden paraya değer gibi görünüyor, teşekkürler.
— Alix Axel
0

Sass , bazı css baş ağrılarını azaltmanın bir yolu olarak potansiyele sahip gibi görünüyor.

— Terrance
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.