Общие стили веб-интерфейса

Question

Я должен представить прототип веб-приложения в следующие дни одному из моих клиентов, дело в том, что я не очень хорош в CSS и, что хуже всего, я почти никогда не доволен результатами, которые я получаю.

Кодирование бизнес-логики не представляет для меня проблемы, однако дизайн пользовательского интерфейса занимает более 80% моего времени. Мне не нужно ничего захватывающего, просто чистая, приятная и презентабельная обстановка, пример:

Это повторяющаяся проблема, с которой я сталкивался, я хотел бы, чтобы разработка веб-интерфейса могла иметь менее простой стиль по умолчанию , подход, подобный Visual Studio или iPhone SDK был бы очень полезен для меня.

Приведенный выше макет, созданный с помощью Balsamiq Mockups , является отличным примером, все наиболее распространенные «компоненты» доступны для использования, и, что самое приятное: есть только один красивый стиль на выбор.

Есть ли что-то подобное для Интернета? Нейтральная, но приятная CSS или Javascript UI Framework?

---

Вариантов пока:

• Bootstrap
• Qooxdoo
• jQuery UI
• jQuery Tools
• MochaUI
• Ext JS
• Yahoo! Библиотека пользовательского интерфейса
• BlueTrip
• BluePrint
• Uki ( Демо )
• Napkee
• YAML
• Базовый
• iPlotz
• SproutCore
• ForeUI

Мне интересно знать, существуют ли какие-либо фреймворки только для CSS.

Я нашел на этой странице с очень хорошим списком библиотек веб-интерфейса , но большинство из них (по крайней мере, хорошие), похоже, относятся к Java, есть ли одинаково хорошие альтернативы в чистом CSS или JS?

PS: меня не интересуют AJAX, эффекты, поведение и так далее ... моя главная (единственная) проблема - стиль.

---

Спасибо за все предложения всем!

После очень тщательного рассмотрения всех предложенных библиотек пользовательского интерфейса я пришел к выводу, что ExtJS и Qooxdoo - те, которые наиболее точно соответствуют моим потребностям. Пользовательский интерфейс jQuery выглядит многообещающе, но предлагает только ограниченное количество элементов.

Что касается библиотек, работающих только с CSS, я нашел BlueTrip / BluePrint и темы, предложенные Tambler, лучшими. Помимо этого, кажется, что Flex и Napkee также заслуживают изучения.

Время изучать ExtJS сейчас! =)

Answer 1

Комбинация 960gs для макета и jQuery-UI для стиля, вероятно, то, что вы ищете.

Вы также можете рассмотреть blueprint CSS framework вместо 960gs.

Answer 2

Не могу поверить, что никто не упомянул:

http://www.extjs.com/

Это коммерческие js-фреймворки, но довольно доступные по цене, что делает создание приятного интерфейса легким. Существует гораздо более полный набор элементов, чем jqueryui, и он предназначен для создания целого приложения. Я только немного поиграл с этим, но я до сих пор люблю это. Бесплатно для личного использования.

Если вы действительно хотите почувствовать полноценный пользовательский интерфейс, разработанный с EXT, попробуйте этот URL:

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

Answer 3

Как насчет использования dojo и dijit ?

Dijit - это быстрый способ создания виджетов и элементов. Он также поставляется с 3 темами по умолчанию, которые легко изменить.

Хороший список различных виджетов здесь

Answer 4

Соединитесь с кем-то, кто специализируется на дизайне пользовательского интерфейса.

Если вы лучше разбираетесь в бизнес-логике, вам лучше тратить время исключительно на программирование бизнес-логики, чтобы вы могли овладеть ею. Это потребует от вас научиться взаимодействовать с кем-то, кто преуспевает на презентации. ( xml и json являются общими средствами)

Бизнес-логика и представление очень разные. Разработка системы, которая не только выглядит хорошо, но и интуитивно понятна и проста в использовании, довольно сложна. Столь же трудный и трудоемкий, как создание внутренней работы сложного приложения.

Хороший интерфейс не так прост, как включение фреймворка CSS.

Я считаю себя более «креативным» программистом, преуспевающим в презентации. Мне посчастливилось встретиться с кем-то, кто был, во-первых, очень мотивирован, а во-вторых, очень хорошо разбирался в «бизнес-логике». У него было гораздо больше опыта в планировании и внедрении сложных систем, в то время как я в основном занимался дизайном интерфейса.

Если вы более продуктивно занимаетесь системной архитектурой, планированием, разработкой, чем угодно ... вам следует подтолкнуть себя в этом направлении. В то время как проекты одиночной разработки могут быть довольно успешными, я считаю это неэффективным. Очень редко кто-то обладает навыками разработки приложений высшего уровня в одиночку.

Задача - найти кого-то, с кем вы хорошо работаете.

Answer 5

Оформить Google Web Toolkit . Он имеет довольно чистый вид по умолчанию. У них есть примеров . В частности, их пример Showcase демонстрирует все доступные виджеты и стили CSS, используемые для достижения внешнего вида.

Answer 6

Это не поможет вам в вашем текущем проекте, но стоит подумать о будущих проектах. Потратив много лет на создание приложений с графическим интерфейсом в HTML 4 и постоянно борясь с ограничениями CSS и HTML, я решил попробовать Adobe Flex. Какое улучшение!

Вместо того, чтобы подделывать элемент управления страниц с вкладками или сетку данных, в Flex или Silverlight ваша разметка может просто указать элемент управления страниц с вкладками или сетку данных. И фреймворки поставляются со стандартными стилями, которые скучны, но вовсе не плохи. Я не говорю, что они полностью заменяют HTML, но если вам нужны виджеты и макет графического интерфейса, я считаю, что они являются гораздо лучшей альтернативой.

Answer 7

Вы можете рассмотреть возможность просмотра следующего сайта:

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

Здесь можно приобрести несколько «административных» тем, которые могут удовлетворить ваши потребности.

Answer 8

Есть несколько платформ, нацеленных на (G) дизайн пользовательского интерфейса; Qooxdoo , JQuery UI и MochaUI являются некоторыми из них (хотя последний является скорее проверкой концепции, чем используемой платформой). Эти структуры обычно предлагают различные элементы на основе JS (элементы формы, такие как поля ввода и кнопки отправки, но также и другие элементы, такие как вкладки). Тем не менее, вам все равно придется расположить эти элементы и, возможно, придать им стиль по своему вкусу.

Возможно, знакомство с CSS-фреймворком (например, 960GS ) может дополнить вышеприведенные фреймворки JS UI.

(В качестве личного отказа от ответственности; у меня очень мало опыта работы с любой из упомянутых выше платформ. Но я уверен, что Google или SO могут дать ответы, которые я не могу.)

Answer 9

Относительно новый PHP-фреймворк, специально разработанный для разработки UI-ориентированного программного обеспечения. Элементы, которые у вас есть, включая вкладки, фильтры и сетки, включены и потребуют около 20 строк кода для реализации.

http://agiletoolkit.org/

Answer 10

Каркасные макеты, подобные этому, - отличный способ начать.

Используя большинство фреймворков пользовательского интерфейса, обсуждаемых здесь, я хотел бы направить вас к jQueryUi по следующим причинам:

1. jQueryUI CSS Framework заботится о согласованном и классном CSS для вас (это действительно просто - просто сделайте некоторую разметку и примените классы)

2. jQueryUI имеет tabcontrol и позволяет быстро и просто создавать стили.