Stili comuni dell'interfaccia utente Web

91

Devo presentare un prototipo di un'app web nei giorni successivi a uno dei miei clienti, il fatto è che non sono molto bravo con i CSS e peggio di tutto non sono quasi mai soddisfatto dei risultati che ottengo.

La codifica della logica aziendale non rappresenta una sfida per me, tuttavia la progettazione dell'interfaccia utente richiede più dell'80% del mio tempo. Non ho bisogno di niente di straordinario, solo di un ambiente pulito, carino e presentabile, un esempio:

testo alternativo

Questo è un problema ricorrente che ho riscontrato, vorrei che lo sviluppo dell'interfaccia utente web potesse avere uno stile predefinito meno nudo , un approccio simile a Visual Studio o iPhone SDK sarebbe molto utile per me.

Il mockup sopra creato con Balsamiq Mockups è un ottimo esempio, tutti i "componenti" più comuni sono disponibili per l'uso e, soprattutto, c'è solo uno stile di bell'aspetto tra cui scegliere.

C'è qualcosa di simile per il web? Un framework UI CSS o Javascript neutro ma carino?

Opzioni finora:

Mi interessa sapere se esistono framework UI solo CSS.

Ho trovato questa pagina con un elenco molto carino di librerie dell'interfaccia utente Web , ma la maggior parte di esse (almeno quelle buone) sembrano essere specifiche per Java, ci sono alternative altrettanto buone in puro CSS o JS?

PS: Non sono interessato ad AJAX, effetti, comportamenti e così via ... la mia (unica) preoccupazione principale è lo stile.

Grazie per tutti i suggerimenti a tutti!

Dopo un'attenta considerazione di tutte le librerie dell'interfaccia utente suggerite, sono giunto alla conclusione che ExtJS e Qooxdoo sono quelli che più si adattano alle mie esigenze. jQuery UI sembra promettente ma offre solo una quantità ridotta di elementi.

Per quanto riguarda le librerie solo CSS, ho trovato BlueTrip / BluePrint e i temi suggeriti da tambler per essere i migliori. A parte questo, sembra che vale la pena esplorare Flex e Napkee.

È ora di imparare ExtJS ora! =)

css  user-interface 
— Alix Axel
fonte
6
Degno di nota, jQuery-UI ha un bel designer di temi per velocizzare le cose chiamato "Theme Roller": jqueryui.com/themeroller
— Nick Craver

Risposte:

7

Non posso credere che nessuno abbia menzionato:

http://www.extjs.com/

È un framework js commerciale, ma abbastanza conveniente e rende la creazione di una bella interfaccia utente un gioco da ragazzi. C'è un set di elementi molto più completo di jqueryui ed è progettato per creare un'intera app. Ci ho giocato solo un po ', ma finora lo adoro. Gratuito per uso personale.

Se vuoi davvero avere un'idea di un'interfaccia utente completa sviluppata con EXT, prova questo URL:

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

— Erik
fonte
@Erik: grazie per il suggerimento. Conosci libri / tutorial che puoi consigliare? Ho qualche problema a capire come integrare ExtJS in una tipica applicazione PHP MVC.
— Alix Axel
Il posto migliore per iniziare sono i tutorial offerti da EXT: extjs.com/learn/Tutorials Per quanto riguarda l'integrazione con il tuo framework PHP non potrei dire - ma queste sono le tue pagine HTML, quindi le integreresti come te integrerei qualsiasi altra pagina, non è vero?
— Erik
11

Una combinazione di 960gs per layout e jQuery-UI per lo stile è probabilmente ciò che stai .

Potresti anche considerare il framework CSS blueprint invece di 960gs.

— Shane O'Grady
fonte
Intendi il framework JS jQuery UI o il framework CSS jQuery UI?
— Alix Axel
1
Mi scuso per la confusione, intendevo il framework CSS dell'interfaccia utente jQuery per lo styling. Ma non c'è motivo per cui non si possa incorporare anche il framework dei widget JS.
— Shane O'Grady
Grazie, lo esaminerò. =)
— Alix Axel
7

Che ne dici di usare dojo e dijit ?

Dijit è un modo veloce per creare widget ed elementi. Inoltre viene fornito con 3 temi predefiniti facili da modificare.

Un buon elenco di diversi widget qui

— peirix
fonte
dijit sembra quello di cui ho bisogno, tuttavia non riesco ad accedere alla pagina - non so perché.
— Alix Axel
A quale pagina non puoi accedere?
— peirix
dijit, ma ora funziona. =) Lo guarderò meglio non appena mi avvicino a un computer (attualmente sto navigando con un telefono).
— Alix Axel
6

Fai coppia con qualcuno specializzato nella progettazione dell'interfaccia utente.

Se sei più bravo a gestire la logica aziendale, è meglio dedicare il tuo tempo esclusivamente alla codifica della logica aziendale in modo da poterla padroneggiare. Ciò richiederà di imparare come interfacciarsi con qualcun altro che eccelle alla presentazione. ( xml e json sono mezzi comuni)

La logica aziendale e la presentazione sono molto diverse. Progettare un sistema che non solo abbia un bell'aspetto, ma sia intuitivo e facile da usare è piuttosto difficile. Altrettanto difficile e dispendioso in termini di tempo quanto stabilire il funzionamento interno di un'applicazione complessa.

Una buona interfaccia non è semplice come includere un framework CSS.

Mi considero un programmatore più "creativo" che eccelle nella presentazione. Mi è capitato di avere la fortuna di incrociare il percorso con qualcuno che era, prima di tutto ... molto motivato, e secondo di tutto molto bravo in "logica aziendale". Aveva molta più esperienza nella pianificazione e implementazione di sistemi complessi, mentre io mi sono concentrato principalmente sul design dell'interfaccia.

Se sei più produttivo nell'architettura del sistema, nella pianificazione, nello sviluppo, qualsiasi cosa ... dovresti spingerti in quella direzione. Mentre i progetti di sviluppo da solista possono essere piuttosto soddisfacenti, lo considero inefficiente. È molto raro che qualcuno possieda capacità per sviluppare da solo applicazioni di alto livello.

La sfida è trovare qualcuno con cui lavori bene.

— Derek Adair
fonte
4

Dai un'occhiata a Google Web Toolkit . Ha un aspetto predefinito piuttosto pulito. Hanno degli esempi . In particolare, il loro esempio Showcase mostra tutti i widget disponibili e lo stile CSS utilizzato per ottenere l'aspetto.

— Abtin Forouzandeh
fonte
1
Le UI di GWT sono scritte in java. GWT quindi prende quel java e lo trasforma in puro html / javascript.
— Abtin Forouzandeh
3

Ci sono alcuni framework volti a (G) UI Design; Qooxdoo , JQuery UI e MochaUI sono alcuni di loro (sebbene l'ultimo sia più un proof-of-concept che un framework utilizzabile). Questi framework di solito offrono una varietà di elementi basati su JS (elementi del modulo, come campi di input e pulsanti di invio, ma anche altri elementi come le schede). Tuttavia, starà comunque a te posizionare questi elementi, e magari modellarli, a tuo piacimento.

Forse familiarizzare con un framework CSS (come 960GS ) potrebbe completare i precedenti framework JS UI.

(Come disclaimer personale; ho poca esperienza con nessuno dei framework sopra menzionati. Ma sono sicuro che Google o SO possono fornire risposte che non posso.)

— Duroth
fonte
1
960.gs non fa davvero molto stile: vuoi qualcosa come Bluetrip ( bluetrip.org ) per quello. 960.gs fornisce solo un layout basato su griglia.
— Dominic Rodger
Ho dato uno sguardo ai framework che hai suggerito, qooxdoo sembra eccessivamente complicato (tutto sembra essere definito tramite Javascript - anche gli input dei moduli, ecc.), MochaUI ha un'interfaccia davvero carina con colori neutri molto belli, non ho visto il codice sorgente ma sembra anche piuttosto limitato (mancano molti stili elementari). jQuery UI sembra l'opzione migliore finora. 960.gs è carino ma come ha detto Dominic non è per lo styling.
— Alix Axel
3

Questo non ti aiuterà per il tuo progetto attuale, ma vale la pena considerare per i progetti futuri. Dopo aver trascorso molti anni a creare applicazioni GUI in HTML 4 e lottare costantemente contro i limiti di CSS e HTML, ho pensato di provare Adobe Flex. Che miglioramento!

Invece di simulare un controllo di pagina a schede o una griglia di dati, con Flex o Silverlight, il tuo markup può semplicemente specificare un controllo di pagina a schede o una griglia di dati. E i framework sono dotati di stili predefiniti che sono noiosi ma per niente male. Non sto dicendo che questi sostituiscano completamente l'HTML, ma se hai bisogno di widget e layout della GUI, credo che siano un'alternativa molto migliore.

— Giacobbe
fonte
Flex è davvero uno strumento eccezionale, ma considera che in questi giorni il mondo si sta muovendo verso HTML 5 e flex ha molti problemi con le dimensioni e il multilingue dove vince JavaScript e cosa ne pensi del prezzo, ma penso ancora che il flex sia un ottimo strumento
— tawfekov
Spero davvero che dal processo degli standard emerga una soluzione HTML / Javascript / CSS pura per le applicazioni.
— Jacob il
Flex può essere piuttosto ingombrante e non essere adatto ai motori di ricerca ... ma il sistema non può essere battuto secondo me. Non sono uno sviluppatore web "senior", ma vedo davvero il vantaggio di lavorare all'interno del framework flessibile. Adobe ha un sistema davvero buono. Il solo fatto di essere in grado di codificare per desktop / web / E dispositivi mobili con UN quadro / mezzo di consegna standardizzato è prezioso oltre le parole.
— Derek Adair
2

mockup wireframe come questo sono un modo brillante per iniziare.

Avendo utilizzato la maggior parte dei framewroks dell'interfaccia utente discussi qui, mi piacerebbe guidarti verso jQueryUi per i seguenti motivi:

  1. Il framework jQueryUI CSS si prende cura del CSS dall'aspetto coerente e accattivante per te (è davvero facile: basta fare un po 'di markup e applicare le classi)

  2. jQueryUI ha un controllo a schede e accumula modi semplici e veloci per modellare i moduli.

— Ricco
fonte
Tra tutte le opzioni suggerite sono più propenso a ExtJS, l'hai mai usato? Come lo confronti con jQuery UI?
— Alix Axel
ExtJS è molto maturo e completo. Tieni presente che è una doppia licenza GPL e commerciale. È davvero un'interfaccia widget destinata a un'interfaccia utente molto ricca. Quindi, se vuoi qualcosa di più "aziendale" e meno "amichevole", non è affatto una cattiva scelta. L'unica cosa è che ha un po 'di una curva di apprendimento, è davvero un intero quadro a sé stante. Più simile alla programmazione GUI che al web. Buona fortuna
— Rich
2

Se stai prendendo di mira browser moderni, non IE, dovresti dare un'occhiata a Sproutcore . Per i mockup utilizzo mockingbird .

— ptulina
fonte
Grazie, mockingbird ha davvero reso la mia giornata! Per quanto riguarda Sproutcore sembra carino, ma alcune delle demo sembrano un po 'buggate in Firefox 3.5.7.
— Alix Axel
2

Un framework PHP relativamente nuovo progettato specificamente per lo sviluppo di software incentrato sull'interfaccia utente. Gli elementi che hai qui tra cui schede, filtri e griglie sono inclusi e ti richiederanno circa 20 righe di codice per l'implementazione.

http://agiletoolkit.org/

— romaninsh
fonte
1

Hai provato Axure ? È uno strumento per creare rapidamente wireframe, prototipi e specifiche per applicazioni e siti web.

Funziona in modo simile a Balsamiq, ma ti permette di esportare i tuoi wireframe / prototipi come HTML, CSS e Javascript.

Puoi quindi caricarlo su un server o eseguirlo sul tuo computer come esempio funzionante.

Puoi creare moduli, collegamenti, schede, rollover, effetti Javascript.

— Jonny Haynes
fonte
Grazie, Axure sembra gentile ma non è quello che cerco.
— Alix Axel
1

Se stai già utilizzando Balsamic Mockup per i tuoi prototipi, dovresti prendere in considerazione Napkee . Per citare il sito web "Napkee ti consente di esportare Mockup Balsamiq in HTML / CSS / JS e Adobe Flex 3 con un clic di un pulsante."

— Paolo
fonte
1

Mi sono imbattuto in questo un po 'di tempo fa e non sono riuscito a trovare nulla, quindi l'ho colto come un'opportunità per imparare CSS. Ma da allora sembra che siano stati fatti grandi passi avanti verso questo argomento.

  • Riassumendo il tuo problema, c'è una pagina di wikipedia .
  • C'è yaml-css , che prende yaml e lo trasforma in css
  • C'è una linea di base , ma presuppone una certa conoscenza del CSS.
  • Suggerirei anche di guardare Dreamweaver di Adobe . Hanno molti css e strumenti di generazione di stili che producono codice molto leggibile e compatibile con w3c.

Spero che aiuti.

— icco
fonte
1

Una combinazione di 960gs per il layout e jQuery-UI o strumenti Jquery è ottima, li uso quasi in ogni progetto ma mi piacerebbe aggiungerli a http://easyframework.com/ anche se non è un business friendly, quindi assicurati di dare un'occhiata la sua licenza ma mi piace

— tawfekov
fonte
Assicurati di controllare cufon cufon.shoqolate.com/generate se sei interessato alla tipografia
— tawfekov
1

Recentemente ho scoperto un bel sito web chiamato iplotz.com dove puoi creare un mockup della tua applicazione / sito web / progetto online senza installare nulla. Ha anche la maggior parte dei controlli comuni, insieme a molte più funzionalità per la gestione dell'intero progetto e la condivisione con altri online.

Devo ammetterlo, non l'ho ancora provato io stesso, ma l'ho guardato un po 'e sembra piuttosto interessante. Probabilmente lo userò abbastanza presto.

— gillyb
fonte
È un'alternativa molto carina a Balsamiq, il mio browser è un bancomat molto lento ma dalla prima impressione sembra valerne la pena, grazie.
— Alix Axel
0

Sass sembra avere il potenziale come un modo per mitigare alcuni mal di testa CSS.

— Terrance
fonte
0

Mi piace aggiungere Bootstrap , è un framework front-end intuitivo e potente per uno sviluppo web più semplice e veloce.

— Emilio Gort
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.