Gaya UI Web Umum

91

Saya harus mempresentasikan prototipe aplikasi web di hari-hari berikutnya kepada salah satu klien saya, masalahnya adalah saya tidak begitu pandai dalam CSS dan yang terburuk dari semuanya saya hampir tidak pernah senang dengan hasil yang saya dapatkan.

Pengkodean logika bisnis tidak menimbulkan tantangan bagi saya, namun desain UI membutuhkan lebih dari 80% waktu saya. Saya tidak perlu ada yang mempesona, hanya lingkungan yang bersih, bagus dan rapi, contoh:

teks alt

Ini adalah masalah berulang yang saya alami, saya berharap pengembangan UI web dapat memiliki gaya default yang tidak terlalu telanjang , pendekatan yang mirip dengan Visual Studio atau iPhone SDK akan sangat berguna bagi saya.

Maket di atas yang dibuat dengan Balsamiq Mockup adalah contoh yang bagus, semua "komponen" paling umum tersedia untuk digunakan, dan yang terbaik dari semuanya: hanya ada satu gaya yang bagus untuk dipilih.

Apakah ada yang seperti ini di web? Kerangka CSS atau Javascript UI yang netral namun bagus?

Opsi sejauh ini:

Saya tertarik untuk mengetahui apakah ada kerangka kerja UI khusus CSS.

Saya menemukan halaman ini dengan daftar Perpustakaan UI Web yang sangat bagus , tetapi kebanyakan dari mereka (setidaknya yang bagus) tampaknya khusus untuk Java, apakah ada alternatif yang sama baiknya dalam CSS atau JS murni?

PS: Saya tidak tertarik dengan AJAX, efek, perilaku dan sebagainya ... perhatian utama saya (satu-satunya) adalah gaya.

Terima kasih atas semua saran semuanya!

Setelah mempertimbangkan dengan cermat semua pustaka UI yang disarankan, saya sampai pada kesimpulan bahwa ExtJS dan Qooxdoo adalah yang paling sesuai dengan kebutuhan saya. jQuery UI tampaknya menjanjikan tetapi hanya menawarkan sejumlah kecil elemen.

Sejauh pustaka hanya CSS, saya telah menemukan BlueTrip / BluePrint dan tema yang disarankan oleh tambler untuk menjadi yang terbaik. Selain itu, Flex dan Napkee juga sepertinya patut untuk ditelusuri.

Saatnya mempelajari ExtJS sekarang! =)

css  user-interface 
— Alix Axel
sumber
6
Perlu dicatat, jQuery-UI memiliki perancang tema yang bagus untuk mempercepat sesuatu yang disebut "Roller Tema": jqueryui.com/themeroller
— Nick Craver

Jawaban:

7

Saya tidak percaya tidak ada yang menyebutkan:

http://www.extjs.com/

Ini adalah kerangka kerja js komersial, tetapi cukup terjangkau, dan membuat menyusun UI yang bagus menjadi mudah. Ada set elemen yang jauh lebih lengkap daripada jqueryui, dan dirancang untuk membuat aplikasi secara keseluruhan. Saya hanya bermain-main sedikit, tapi sejauh ini saya sangat menyukainya. Gratis untuk penggunaan pribadi.

Jika Anda benar-benar ingin merasakan UI lengkap yang dikembangkan dengan EXT, coba url ini:

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

— Erik
sumber
@Erik: Terima kasih atas sarannya. Apakah Anda mengetahui buku / tutorial yang dapat Anda rekomendasikan? Saya mengalami sedikit kesulitan untuk mencari tahu bagaimana saya harus mengintegrasikan ExtJS ke dalam aplikasi PHP MVC yang khas.
— Alix Axel
Tempat terbaik untuk memulai adalah tutorial yang ditawarkan EXT: extjs.com/learn/Tutorials Sejauh mengintegrasikannya dengan kerangka kerja PHP Anda, saya tidak dapat mengatakannya - tetapi ini adalah halaman HTML Anda, jadi Anda akan mengintegrasikannya sesuai keinginan Anda. akan mengintegrasikan halaman lain, bukan?
— Erik
11

Kombinasi 960gs untuk tata letak dan jQuery-UI untuk gaya mungkin adalah yang Anda cari.

Anda juga dapat mempertimbangkan kerangka kerja CSS cetak biru daripada 960gs.

— Shane O'Grady
sumber
Yang Anda maksud adalah kerangka kerja jQuery UI JS atau kerangka jQuery UI CSS?
— Alix Axel
1
Maaf atas kebingungannya, maksud saya dia jQuery UI CSS framework untuk styling. Tetapi tidak ada alasan bahwa Anda juga tidak bisa memasukkan kerangka widget JS.
— Shane O'Grady
Terima kasih, saya akan memeriksanya. =)
— Alix Axel
7

Bagaimana dengan menggunakan dojo dan dijit ?

Dijit adalah cara cepat untuk membuat widget dan elemen. Itu juga dilengkapi dengan 3 tema default yang mudah dimodifikasi.

Daftar bagus dari berbagai widget di sini

— peirix.dll
sumber
dijit sepertinya yang saya butuhkan, namun saya tidak dapat mengakses halaman - tidak tahu mengapa.
— Alix Axel
Halaman mana yang tidak dapat Anda akses?
— peirix
dijit, tapi sekarang bekerja. =) Saya akan melihatnya lebih baik segera setelah saya berada di dekat komputer (saya sedang menjelajah dengan telepon).
— Alix Axel
6

Berpasangan dengan seseorang yang berspesialisasi dalam desain UI.

Jika Anda lebih baik dalam menangani logika bisnis, lebih baik waktu Anda dihabiskan secara eksklusif untuk mengkodekan logika bisnis sehingga Anda dapat menguasainya. Ini akan mengharuskan Anda untuk belajar bagaimana berinteraksi dengan orang lain yang unggul dalam presentasi. ( xml dan json adalah cara umum)

Logika bisnis dan presentasi sangat berbeda. Merancang sistem yang tidak hanya terlihat bagus, tetapi juga intuitif dan mudah digunakan cukup sulit. Sama sulit dan memakan waktu seperti membangun cara kerja bagian dalam dari aplikasi yang kompleks.

Antarmuka yang baik tidak sesederhana menyertakan kerangka css.

Saya menganggap diri saya sebagai programmer yang lebih 'kreatif' yang unggul dalam presentasi. Saya kebetulan cukup beruntung untuk bertemu dengan seseorang yang, pertama-tama ... sangat termotivasi, dan yang kedua sangat ahli dalam 'logika bisnis'. Dia memiliki lebih banyak pengalaman dalam merencanakan dan mengimplementasikan sistem yang kompleks, sementara saya terutama berfokus pada desain antarmuka.

Jika Anda lebih produktif melakukan arsitektur sistem, perencanaan, pengembangan, apa pun ... Anda harus mendorong diri Anda sendiri ke arah itu. Sementara proyek pengembangan tunggal bisa jadi cukup memuaskan, saya melihatnya tidak efisien. Sangat jarang seseorang memiliki keterampilan untuk mengembangkan aplikasi tingkat atas sendirian.

Tantangannya adalah menemukan seseorang yang bekerja dengan Anda dengan baik.

— Derek Adair
sumber
4

Lihat Google Web Toolkit . Ini memiliki tampilan default yang cukup bersih. Mereka punya contoh . Secara khusus, contoh Showcase mereka mendemonstrasikan semua widget yang tersedia dan gaya css yang digunakan untuk mendapatkan tampilan tersebut.

— Abtin Forouzandeh
sumber
1
GWT UI ditulis dalam java. GWT kemudian mengambil java itu dan mengubahnya menjadi html / javascript murni.
— Abtin Forouzandeh
3

Ada beberapa kerangka kerja yang ditujukan untuk (G) Desain UI; Qooxdoo , JQuery UI dan MochaUI adalah beberapa di antaranya (meskipun yang terakhir lebih merupakan bukti konsep daripada kerangka kerja yang dapat digunakan). Kerangka kerja ini biasanya menawarkan berbagai elemen yang didukung JS (elemen formulir, seperti bidang masukan dan tombol kirim, tetapi elemen lain seperti tab juga). Namun, Anda tetap bebas untuk memposisikan elemen-elemen ini, dan mungkin menatanya, sesuai keinginan Anda.

Mungkin membiasakan diri dengan kerangka CSS (seperti 960GS ) dapat melengkapi Kerangka Kerja JS UI di atas.

(Sebagai penafian pribadi; Saya hanya memiliki sedikit pengalaman dengan kerangka kerja yang disebutkan di atas. Tapi saya yakin Google atau SO dapat memberikan jawaban yang saya tidak bisa.)

— Duroth
sumber
1
960.gs benar-benar tidak melakukan banyak penataan - Anda menginginkan sesuatu seperti Bluetrip ( bluetrip.org ) untuk itu. 960.gs benar-benar hanya menyediakan tata letak berbasis grid.
— Dominic Rodger
Saya mengintip kerangka kerja yang Anda sarankan, qooxdoo tampaknya terlalu rumit (semuanya tampaknya didefinisikan melalui Javascript - bahkan masukan bentuk, dll ..), MochaUI memiliki antarmuka yang sangat bagus dengan warna netral yang sangat keren, saya belum melihat kode sumbernya tetapi juga tampaknya agak terbatas (banyak gaya dasar hilang). jQuery UI tampaknya merupakan opsi terbaik sejauh ini. 960.gs bagus tapi seperti yang Dominic katakan itu bukan untuk gaya.
— Alix Axel
3

Ini tidak akan membantu Anda untuk proyek Anda saat ini, tetapi ini layak dipertimbangkan untuk proyek masa depan. Setelah menghabiskan bertahun-tahun membuat aplikasi GUI dalam HTML 4 dan terus-menerus berjuang melawan keterbatasan CSS dan HTML, saya pikir saya akan mencoba Adobe Flex. Suatu peningkatan!

Daripada memalsukan kontrol halaman tab atau kisi data, dengan Flex atau Silverlight, markup Anda dapat dengan mudah menentukan kontrol halaman tab atau kisi data. Dan kerangka kerja hadir dengan gaya default yang membosankan tetapi tidak buruk sama sekali. Saya tidak mengatakan ini sepenuhnya menggantikan HTML, tetapi jika Anda membutuhkan widget dan tata letak GUI, saya yakin itu adalah alternatif yang jauh lebih baik.

— Yakub
sumber
Flex benar-benar alat yang hebat tetapi pertimbangkan hari-hari ini dunia bergerak menuju HTML 5 dan flex memiliki banyak masalah dengan ukuran dan multi bahasa di mana javascript menang dan apa pendapat Anda tentang harga tetapi saya Masih menganggap flex adalah alat yang hebat
— tawfekov
Saya sangat berharap solusi HTML / Javascript / CSS murni untuk aplikasi akan muncul dari proses standar.
— Jacob
Flex mungkin agak besar, dan tidak ramah mesin telusur ... tetapi menurut saya sistemnya tidak dapat dikalahkan. Saya bukan pengembang web 'senior', tetapi saya benar-benar melihat manfaat bekerja dalam kerangka fleksibel. Adobe memiliki sistem yang sangat bagus. Hanya dapat membuat kode untuk desktop / web / DAN seluler dengan SATU kerangka kerja / sarana pengiriman standar sudah sangat berharga di luar kata-kata.
— Derek Adair
2

mockup wireframe seperti itu adalah cara yang brilian untuk memulai.

Setelah menggunakan sebagian besar framewroks UI yang dibahas di sini, saya ingin mengarahkan Anda ke jQueryUi karena alasan berikut:

  1. Kerangka CSS jQueryUI menangani CSS yang konsisten dan tampak keren untuk Anda (sangat mudah - cukup buat markup dan terapkan kelas)

  2. jQueryUI memiliki tabcontrol, dan banyak cara yang cepat dan mudah untuk mengatur gaya formulir.

— Kaya
sumber
Dari semua opsi yang disarankan saya lebih cenderung ke ExtJS, apakah Anda pernah menggunakannya? Bagaimana Anda membandingkannya dengan jQuery UI?
— Alix Axel
ExtJS sangat dewasa, dan lengkap. Ketahuilah bahwa ini adalah GPL berlisensi ganda dan komersial. Ini benar-benar antarmuka widget yang ditujukan untuk UI yang sangat kaya. Jadi jika Anda menginginkan sesuatu yang lebih 'korporat' dan kurang 'ramah', itu sama sekali bukan pilihan yang buruk. Satu-satunya masalah adalah ia memiliki sedikit kurva pembelajaran, itu benar-benar merupakan keseluruhan kerangka kerja tersendiri. Lebih seperti pemrograman GUI daripada web. Semoga berhasil
— Kaya
2

Jika Anda menargetkan browser modern, non IE, maka Anda harus memeriksa Sproutcore . Untuk mockup saya menggunakan mockingbird .

— pthulin
sumber
Terima kasih, mockingbird benar-benar menyenangkan! Adapun Sproutcore sepertinya bagus, tetapi beberapa demo terlihat agak bermasalah di Firefox 3.5.7.
— Alix Axel
2

Kerangka kerja PHP yang relatif baru yang dirancang khusus untuk pengembangan perangkat lunak yang berfokus pada UI. Elemen yang Anda miliki di sini termasuk Tab, Filter, dan Kisi disertakan dan akan membawa Anda sekitar 20 baris kode untuk diterapkan.

http://agiletoolkit.org/

— romaninsh
sumber
1

Sudahkah Anda mencoba Axure ? Ini adalah alat untuk membuat wireframe, prototipe, dan spesifikasi dengan cepat untuk aplikasi dan situs web.

Ini bekerja dengan cara yang mirip dengan Balsamiq, tetapi memungkinkan Anda untuk mengekspor wireframes / prototipe Anda sebagai HTML, CSS dan Javascript.

Anda kemudian dapat mengunggah ini ke server atau menjalankannya di komputer Anda sebagai contoh yang berfungsi.

Anda dapat membuat formulir, tautan, tab, rollover, efek Javascript.

— Jonny Haynes
sumber
Terima kasih, Axure kelihatannya bagus tapi bukan itu yang aku cari.
— Alix Axel
1

Jika Anda sudah menggunakan Balsamic Mockups untuk prototipe Anda, maka Anda harus mempertimbangkan Napkee . Mengutip situs web "Napkee memungkinkan Anda mengekspor Balsamiq Mockups ke HTML / CSS / JS dan Adobe Flex 3 dengan satu klik tombol."

— Paul
sumber
1

Saya mengalami ini beberapa waktu yang lalu, dan tidak dapat menemukan apa pun, jadi saya menganggapnya sebagai kesempatan untuk belajar css. Tetapi sejak saat itu tampaknya langkah besar telah dibuat untuk subjek ini.

  • Meringkas masalah Anda, ada halaman wikipedia .
  • Ada yaml-css , yang mengambil yaml dan mengubahnya menjadi css
  • Ada dasar , tetapi mengasumsikan beberapa pengetahuan css.
  • Saya juga menyarankan untuk melihat Adobe Dreamweaver . Mereka memiliki banyak alat penghasil css dan gaya yang menghasilkan kode yang sangat mudah dibaca dan kompatibel dengan w3c.

Saya harap itu membantu.

— icco
sumber
1

Kombinasi 960gs untuk tata letak dan alat jQuery-UI atau Jquery sangat bagus. Saya menggunakannya hampir di setiap proyek tetapi saya ingin menambahkan ke http://easyframework.com/ meskipun tidak ramah bisnis jadi pastikan untuk memeriksa lisensinya tetapi saya menyukainya

— tawfekov
sumber
Pastikan untuk memeriksa cufon cufon.shoqolate.com/generate jika Anda tertarik dengan tipografi
— tawfekov
1

Baru-baru ini saya menemukan situs web bagus bernama iplotz.com di mana Anda dapat membuat mockup aplikasi / situs web / proyek Anda secara online tanpa menginstal apa pun. Ia juga memiliki sebagian besar kontrol umum, bersama dengan lebih banyak fitur untuk mengelola seluruh proyek dan membagikannya dengan orang lain secara online.

Harus saya akui, saya sendiri belum mencobanya, tetapi saya melihatnya sedikit dan sepertinya cukup keren. Saya mungkin akan segera menggunakannya.

— gillyb
sumber
Ini alternatif yang sangat bagus untuk Balsamiq, browser saya ATM sangat lambat tetapi dari kesan pertama sepertinya sepadan dengan uangnya, terima kasih.
— Alix Axel
0

Sass sepertinya memiliki potensi sebagai cara untuk mengurangi beberapa sakit kepala css.

— Terrance
sumber
0

Saya suka menambahkan Bootstrap itu intuitif, dan kerangka kerja front-end yang kuat untuk pengembangan web yang lebih cepat dan lebih mudah.

— Emilio Gort
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.