Общие стили веб-интерфейса
Я должен представить прототип веб-приложения в следующие дни одному из моих клиентов, дело в том, что я не очень хорош в CSS и, что хуже всего, я почти никогда не доволен результатами, которые я получаю.
Кодирование бизнес-логики не представляет для меня никакой проблемы, однако дизайн пользовательского интерфейса занимает более 80% моего времени. Мне не нужно ничего захватывающего, просто чистая, приятная и презентабельная обстановка, пример:
http://i48.tinypic.com/t0p1fq.png
Это повторяющаяся проблема, с которой я столкнулся, я хотел бы, чтобы разработка веб-интерфейса могла иметь менее простой стиль по умолчанию, для меня был бы очень полезен подход, подобный Visual Studio или iPhone SDK.
Приведенный выше макет, созданный с помощью макетов Balsamiq, является отличным примером, все наиболее распространенные "компоненты" доступны для использования, и, что самое приятное, есть только один красивый стиль на выбор.
Есть ли что-то подобное для Интернета? Нейтральный, но приятный CSS или Javascript UI Framework?
Варианты пока что:
- начальная загрузка
- Qooxdoo
- JQuery UI
- Инструменты jQuery
- MochaUI
- Ext JS
- Yahoo! Библиотека пользовательского интерфейса
- BlueTrip
- BluePrint
- Уки ( Демо)
- Napkee
- YAML
- базисный
- iPlotz
- SproutCore
- ForeUI
Мне интересно знать, есть ли какие-либо CSS-фреймворки только для пользовательского интерфейса.
Я нашел эту страницу с очень хорошим списком библиотек веб-интерфейса, но большинство из них (по крайней мере, хороших), похоже, специфичны для Java, есть ли такие же хорошие альтернативы в чистом CSS или JS?
PS: меня не интересуют AJAX, эффекты, поведение и так далее... моя главная (единственная) проблема - стиль.
Спасибо всем за предложения!
После очень тщательного рассмотрения всех предложенных библиотек пользовательского интерфейса я пришел к выводу, что ExtJS и Qooxdoo - те, которые наиболее точно соответствуют моим потребностям. Пользовательский интерфейс jQuery выглядит многообещающе, но предлагает только ограниченное количество элементов.
Что касается CSS-библиотек, то я считаю, что BlueTrip / BluePrint и темы, предложенные Tambler, являются лучшими. Помимо этого, Flex и Napkee также, похоже, заслуживают изучения.
Время изучать ExtJS сейчас! знак равно
19 ответов
Я не могу поверить, что никто не упомянул:
Это коммерческие JS-фреймворки, но довольно доступные по цене, что делает создание приятного пользовательского интерфейса простым делом. Существует гораздо более полный набор элементов, чем jqueryui, и он предназначен для создания целого приложения. Я немного поиграл с этим, но я до сих пор люблю это. Бесплатно для личного использования.
Если вы действительно хотите почувствовать полноценный пользовательский интерфейс, разработанный с EXT, попробуйте этот URL:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html
Возможно, вам нужна комбинация 960gs для макета и jQuery-UI для стиля.
Вы также можете рассмотреть концептуальный CSS-фреймворк вместо 960gs.
Соединитесь с кем-то, кто специализируется на дизайне пользовательского интерфейса.
Если вы лучше разбираетесь в бизнес-логике, ваше время лучше потратить исключительно на программирование бизнес-логики, чтобы вы могли овладеть ею. Это потребует от вас научиться взаимодействовать с кем-то, кто преуспевает на презентации. ( XML и JSON являются общими средствами)
Бизнес-логика и презентация очень разные. Разработка системы, которая не только выглядит хорошо, но и интуитивно понятна и проста в использовании, довольно сложна. Столь же трудным и трудоемким, как создание внутренней работы сложного приложения.
Хороший интерфейс не так прост, как включение фреймворка CSS.
Я считаю себя более "креативным" программистом, преуспевающим в презентации. Мне посчастливилось встретиться с кем-то, кто был, во-первых, очень мотивирован, а во-вторых, очень хорош в "бизнес-логике". У него было гораздо больше опыта в планировании и внедрении сложных систем, в то время как я в основном занимался дизайном интерфейса.
Если вы более продуктивно занимаетесь системной архитектурой, планированием, разработкой, чем угодно... вы должны подталкивать себя в этом направлении. В то время как проекты одиночной разработки могут быть довольно успешными, я считаю это неэффективным. Очень редко кто-то обладает навыками разработки приложений высшего уровня в одиночку.
Задача - найти кого-то, с кем ты хорошо работаешь.
Проверьте Google Web Toolkit. Он имеет довольно чистый вид по умолчанию. У них есть примеры. В частности, их пример Showcase демонстрирует все доступные виджеты и стили CSS, используемые для достижения внешнего вида.
Вы могли бы рассмотреть просмотр следующего сайта:
http://themeforest.net/category/site-templates/admin-skins
Здесь можно приобрести несколько "административных" тем, которые могут удовлетворить ваши потребности.
Это не поможет вам в вашем текущем проекте, но стоит подумать о будущих проектах. Потратив много лет на создание приложений с графическим интерфейсом в HTML 4 и постоянно борясь с ограничениями CSS и HTML, я решил попробовать Adobe Flex. Какое улучшение!
Вместо того, чтобы подделывать элемент управления с вкладками или сетку данных, с помощью Flex или Silverlight ваша разметка может просто указать элемент управления с вкладками или сетку данных. И фреймворки поставляются со стандартными стилями, которые скучны, но вовсе не плохи. Я не говорю, что они полностью заменяют HTML, но если вам нужны виджеты и макет GUI, я считаю, что они являются гораздо лучшей альтернативой.
Есть несколько структур, нацеленных на (G) дизайн пользовательского интерфейса; Qooxdoo, JQuery UI и MochaUI - вот некоторые из них (хотя последний является скорее проверкой концепции, чем используемой платформой). Эти структуры обычно предлагают различные элементы на основе JS (элементы формы, такие как поля ввода и кнопки отправки, но также и другие элементы, такие как вкладки). Тем не менее, вам все равно придется располагать эти элементы и, возможно, стилизовать их по своему вкусу.
Возможно, знакомство с CSS-фреймворком (например, 960GS) может дополнить вышеупомянутые фреймворки пользовательского интерфейса JS.
(Как личный отказ от ответственности; у меня очень мало опыта работы с любой из платформ, упомянутых выше. Но я уверен, что Google или SO могут дать ответы, которые я не могу.)
Подобные макеты в виде каркасов - отличный способ начать.
Используя большинство фреймворков пользовательского интерфейса, обсуждаемых здесь, я хотел бы направить вас к jQueryUi по следующим причинам:
Инфраструктура CSS jQueryUI заботится о согласованном и классном CSS для вас (это действительно просто - просто сделайте некоторую разметку и примените классы)
В jQueryUI есть tabcontrol, и он позволяет быстро и просто создавать стили.
Относительно новый PHP-фреймворк, специально разработанный для разработки UI-ориентированного программного обеспечения. Элементы, которые у вас есть, включая вкладки, фильтры и сетки, включены и потребуют около 20 строк кода для реализации.
Если вы ориентируетесь на современные, не IE, браузеры, то вам стоит попробовать Sproutcore. Для макетов я использую пересмешника.
Если вы уже используете бальзамические макеты для своих прототипов, вам следует подумать о Napkee. Цитируя сайт: "Napkee позволяет экспортировать макеты Balsamiq в HTML/CSS/JS и Adobe Flex 3 одним нажатием кнопки".
Недавно я обнаружил хороший сайт под названием iplotz.com, где вы можете создать макет своего приложения / веб-сайта / проекта онлайн, не устанавливая ничего. Он также имеет большинство общих элементов управления, а также гораздо больше функций для управления всем проектом и обмена им с другими в Интернете.
Должен признаться, я сам еще не пробовал, но я посмотрел на это немного, и это выглядит довольно круто. Я вероятно буду использовать это достаточно скоро.
Вы пробовали Axure? Это инструмент для быстрого создания каркасов, прототипов и спецификаций для приложений и веб-сайтов.
Он работает аналогично Balsamiq, но позволяет вам экспортировать ваши каркасы / прототипы как HTML, CSS и Javascript.
Затем вы можете загрузить это на сервер или запустить на своем компьютере в качестве рабочего примера.
Вы можете создавать формы, ссылки, вкладки, ролловеры, эффекты Javascript.
Сочетание 960gs для компоновки и jQuery-UI или инструментов Jquery прекрасно, я использую их почти в каждом проекте, но я хотел бы добавить на http://easyframework.com/ хотя это не подходит для бизнеса, поэтому обязательно ознакомьтесь с его лицензия, но мне это нравится
Я столкнулся с этим некоторое время назад, и не мог ничего найти, поэтому я использовал это как возможность выучить CSS. Но с тех пор, кажется, были достигнуты большие успехи в этом вопросе.
- Подводя итог вашей проблеме, есть страница википедии.
- Существует yaml-css, который принимает yaml и превращает его в css
- Существует базовый уровень, но он предполагает некоторые знания CSS.
- Я бы также посоветовал взглянуть на Adobe Dreamweaver. У них есть много инструментов генерации CSS и стилей, которые создают очень читаемый и совместимый с w3c код.
Надеюсь, это поможет.
Мне нравится добавлять Bootstrap, это интуитивно понятный и мощный интерфейс для быстрой и простой веб-разработки.
Sass выглядит так, как будто он способен уменьшить некоторые головные боли CSS.