Typowe style interfejsu WWW

W następnych dniach muszę przedstawić prototyp aplikacji webowej jednemu z moich klientów, rzecz w tym, że nie jestem za dobry w CSS, a co najgorsze, prawie nigdy nie jestem zadowolony z wyników, które osiągam.

Kodowanie logiki biznesowej nie stanowi dla mnie żadnego wyzwania, jednak projekt interfejsu użytkownika zajmuje ponad 80% mojego czasu. Nie potrzebuję nic zapierającego dech w piersiach, wystarczy czyste, ładne i reprezentacyjne otoczenie, przykład:

Jest to powtarzający się problem, który mam, chciałbym, aby tworzenie interfejsu użytkownika sieci Web miało mniej nagi domyślny styl , podejście podobne do Visual Studio lub iPhone SDK byłoby dla mnie bardzo przydatne.

Powyższa makieta stworzona za pomocą Balsamiq Mockups jest świetnym przykładem, wszystkie najpopularniejsze "komponenty" są dostępne do użycia, a co najważniejsze: do wyboru jest tylko jeden dobrze wyglądający styl.

Czy jest coś takiego w sieci? Neutralny, ale przyjemny framework CSS lub JavaScript UI?

Dotychczasowe opcje:

• Bootstrap
• Qooxdoo
• jQuery UI
• Narzędzia jQuery
• MochaUI
• Ext JS
• Wieśniak! Biblioteka interfejsu użytkownika
• BlueTrip
• Projekt
• Uki ( wersja demonstracyjna )
• Napkee
• YAML
• Linia bazowa
• iPlotz
• Sproutcore
• ForeUI

Interesuje mnie informacja, czy istnieją ramy interfejsu użytkownika tylko dla CSS.

Znalazłem tę stronę z bardzo ładną listą bibliotek interfejsu użytkownika sieci Web , ale większość z nich (przynajmniej te dobre) wydaje się być specyficzna dla języka Java, czy są jakieś równie dobre alternatywy w czystym CSS lub JS?

PS: Nie interesuje mnie AJAX, efekty, zachowania i tak dalej ... moim głównym (jedynym) zmartwieniem jest styl.

Dzięki za wszystkie sugestie wszystkim!

Po bardzo dokładnym rozważeniu wszystkich sugerowanych bibliotek UI, doszedłem do wniosku, że ExtJS i Qooxdoo są tymi, które najlepiej odpowiadają moim potrzebom. Interfejs jQuery wydaje się obiecujący, ale oferuje tylko zmniejszoną liczbę elementów.

Jeśli chodzi o biblioteki CSS, to uważam, że BlueTrip / BluePrint i motywy sugerowane przez tamblera są najlepsze. Poza tym warto zbadać Flex i Napkee.

Czas nauczyć się ExtJS teraz! =)

Nie mogę uwierzyć, że nikt nie wspomniał:

http://www.extjs.com/

To komercyjne frameworki js, ale dość przystępne cenowo i sprawia, że ​​składanie przyjemnego interfejsu użytkownika jest dziecinnie proste. Jest znacznie bardziej kompletny zestaw elementów niż jqueryui, a jego zadaniem jest stworzenie całej aplikacji. Tylko trochę się tym bawiłem, ale do tej pory naprawdę to kocham. Bezpłatnie do użytku osobistego.

Jeśli naprawdę chcesz poczuć kompletny interfejs użytkownika opracowany za pomocą EXT, wypróbuj ten adres URL:

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

Połączenie 960g dla układu i jQuery-UI do stylizacji jest prawdopodobnie tym, czego szukasz.

Można również wziąć pod uwagę plan ramy CSS zamiast 960gs.

A co z korzystaniem z Dojo i Dijit ?

Dijit to szybki sposób na tworzenie widżetów i elementów. Zawiera również 3 domyślne motywy, które można łatwo modyfikować.

Dobra lista różnych widżetów tutaj

Połącz się z kimś, kto specjalizuje się w projektowaniu interfejsu użytkownika.

Jeśli lepiej radzisz sobie z logiką biznesową, lepiej spędzić czas wyłącznie na kodowaniu logiki biznesowej, abyś mógł ją opanować. Będzie to wymagało nauczenia się, jak komunikować się z kimś, kto wyróżnia się w prezentacji. ( XML i json są typowymi środkami)

Logika biznesowa i prezentacja są bardzo różne. Zaprojektowanie systemu, który nie tylko dobrze wygląda, ale jest intuicyjny i łatwy w obsłudze, jest dość trudne. Równie trudne i czasochłonne, jak ustalanie wewnętrznych zasad działania złożonej aplikacji.

Dobry interfejs nie jest tak prosty, jak włączenie frameworka CSS.

Uważam się za bardziej „kreatywnego” programistę, który wyróżnia się prezentacją. Miałem szczęście, że spotkałem kogoś, kto po pierwsze był ... bardzo zmotywowany, a po drugie bardzo dobry w „logice biznesowej”. Miał dużo większe doświadczenie w planowaniu i wdrażaniu złożonych systemów, podczas gdy ja głównie skupiałem się na projektowaniu interfejsów.

Jeśli jesteś bardziej produktywny, zajmując się architekturą systemu, planowaniem, programowaniem itp. ... powinieneś popchnąć się w tym kierunku. Chociaż samodzielne projekty rozwojowe mogą być raczej satysfakcjonujące, uważam to za nieefektywne. Bardzo rzadko ktoś ma umiejętności samodzielnego tworzenia aplikacji na najwyższym poziomie.

Wyzwaniem jest znalezienie kogoś, z kim dobrze się pracuje.

Sprawdź Google Web Toolkit . Ma całkiem czysty domyślny wygląd. Mają przykłady . W szczególności ich przykład Showcase pokazuje wszystkie dostępne widżety i styl CSS użyty do uzyskania odpowiedniego wyglądu.

Istnieje kilka frameworków ukierunkowanych na (G) UI Design; Qooxdoo , JQuery UI i MochaUI to tylko kilka z nich (chociaż ten ostatni jest bardziej sprawdzeniem koncepcji niż użytecznym frameworkiem). Te frameworki zwykle oferują różnorodne elementy oparte na JS (elementy formularzy, takie jak pola wejściowe i przyciski przesyłania, ale także inne elementy, takie jak karty). Jednak to do Ciebie nadal będzie należało umiejscowienie tych elementów i może nadanie im odpowiedniego stylu.

Być może zapoznanie się z frameworkiem CSS (takim jak 960GS ) może uzupełnić powyższe ramy JS UI.

(Jako osobiste zastrzeżenie; mam bardzo małe doświadczenie z którymkolwiek z wymienionych powyżej frameworków. Jestem jednak pewien, że Google lub SO mogą udzielić odpowiedzi, których nie mogę).

To nie pomoże ci w twoim obecnym projekcie, ale warto to rozważyć przy przyszłych projektach. Po wielu latach tworzenia aplikacji GUI w HTML 4 i ciągłych zmaganiach z ograniczeniami CSS i HTML, pomyślałem, że wypróbuję Adobe Flex. Co za poprawa!

Zamiast udawać kontrolkę strony z zakładkami lub siatkę danych, za pomocą Flex lub Silverlight, Twój znacznik może po prostu określić kontrolkę strony z kartami lub siatkę danych. Struktury są dostarczane z domyślnymi stylami, które są nudne, ale wcale nie złe. Nie mówię, że całkowicie zastępują HTML, ale jeśli potrzebujesz widżetów i układu GUI, uważam, że są znacznie lepszą alternatywą.

Możesz rozważyć przeglądanie następującej witryny:

http://themeforest.net/category/site-templates/admin-skins

Dostępnych jest do zakupu kilka motywów „administracyjnych”, które mogą odpowiadać Twoim potrzebom.

Takie makiety szkieletowe są doskonałym sposobem na rozpoczęcie.

Korzystając z większości omawianych tutaj framewroksów interfejsu użytkownika, chciałbym pokierować Cię w stronę jQueryUi z następujących powodów:

1. Framework jQueryUI CSS dba o spójny i fajnie wyglądający CSS dla Ciebie (to naprawdę proste - po prostu zrób trochę znaczników i zastosuj klasy)

2. jQueryUI ma kontrolę tabulatorów i mnóstwo schludnych, szybkich i łatwych sposobów stylizacji formularzy.

Jeśli kierujesz reklamy na nowoczesne przeglądarki inne niż IE, wypróbuj Sproutcore . Do makiet używam mockingbirda .

Stosunkowo nowy framework PHP zaprojektowany specjalnie do tworzenia oprogramowania obsługującego interfejs użytkownika. Elementy, które tu masz, w tym karty, filtry i siatki, są uwzględnione i zajmują około 20 linii kodu do zaimplementowania.

http://agiletoolkit.org/

Czy próbowałeś Axure ? Jest to narzędzie do szybkiego tworzenia makiet, prototypów i specyfikacji dla aplikacji i witryn internetowych.

Działa podobnie do Balsamiq, ale pozwala na eksportowanie makiet / prototypów jako HTML, CSS i Javascript.

Następnie możesz przesłać to na serwer lub uruchomić na swoim komputerze jako działający przykład.

Możesz tworzyć formularze, linki, zakładki, najazdy, efekty Javascript.

Jeśli używasz już Balsamic Mockups do swoich prototypów, powinieneś rozważyć Napkee . Cytując stronę internetową „Napkee umożliwia eksportowanie makiet Balsamiq do formatu HTML / CSS / JS i Adobe Flex 3 jednym kliknięciem przycisku”.

Wpadłem na to jakiś czas temu i nie mogłem nic znaleźć, więc wykorzystałem to jako okazję do nauczenia się css. Ale od tamtej pory wydaje się, że poczyniono wielkie postępy w tym temacie.

• Podsumowując Twój problem, istnieje strona Wikipedii .
• Istnieje yaml-css , który pobiera yaml i zamienia go w css
• Istnieje podstawa , ale zakłada pewną wiedzę o CSS.
• Proponuję również przyjrzeć się Adobe Dreamweaver . Mają wiele narzędzi do generowania CSS i stylów, które tworzą bardzo czytelny i kompatybilny z W3c kod.

Mam nadzieję że to pomogło.

Połączenie 960gs dla układu i narzędzi jQuery-UI lub Jquery jest świetne. Używam ich prawie w każdym projekcie, ale chciałbym dodać do http://easyframework.com/, chociaż nie jest to przyjazne dla biznesu, więc koniecznie sprawdź jego licencja, ale mi się podoba

Niedawno odkryłem fajną stronę internetową o nazwie iplotz.com, na której możesz stworzyć makietę swojej aplikacji / witryny / projektu online bez instalowania czegokolwiek. Posiada również większość typowych elementów sterujących, a także znacznie więcej funkcji do zarządzania całym projektem i udostępniania go innym online.

Muszę przyznać, że jeszcze tego nie próbowałem, ale trochę na to spojrzałem i wydaje się całkiem fajne. Prawdopodobnie wkrótce go użyję.

Wygląda na to, że Sass ma potencjał jako sposób na złagodzenie niektórych bólów głowy związanych z CSS.

Lubię dodawać Bootstrap , intuicyjny i potężny framework front-end dla szybszego i łatwiejszego tworzenia stron internetowych.

Lubię RocketCSS . Ładny, czysty projekt, spróbuj.