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

Ответ 1

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

http://www.extjs.com/

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

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

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

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

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

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

Для покупки здесь доступно несколько "административных" тем, которые могут удовлетворить ваши потребности.

Ответ 9

Такие каркасные макеты, как это, являются блестящим способом начать.

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

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

• jQueryUI имеет tabcontrol и кучи на аккуратных быстрых способах стилей.

Ответ 10

Если вы ориентируетесь на современные, не IE, браузеры, то вы должны проверить Sproutcore. Для макетов я использую mockingbird.

Ответ 11

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

http://agiletoolkit.org/

Ответ 12

Вы пробовали Axure? Это инструмент для быстрого создания каркасов, прототипов и спецификаций для приложений и веб-сайтов.

Он работает аналогично Balsamiq, но позволяет экспортировать ваши каркасы/прототипы в виде HTML, CSS и Javascript.

Затем вы можете загрузить его на сервер или запустить на своем компьютере в качестве рабочего примера.

Вы можете создавать формы, ссылки, вкладки, опрокидывания, эффекты Javascript.

Ответ 13

Комбинация из 960gs для компоновки и jQuery-UI или JQuery отлично  я использую их почти в каждом проекте, но я бы хотел добавить к http://easyframework.com/ хотя это не не забудьте проверить его лицензию но мне нравится

Ответ 14

Если вы уже используете Balsamic Mockups для своих прототипов, вы должны рассмотреть Napkee. Чтобы процитировать сайт "Napkee", вы можете экспортировать макеты Balsamiq в HTML/CSS/JS и Adobe Flex 3 одним нажатием кнопки ".

Ответ 15

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

• Подводя итог вашей проблеме, есть страница wikipedia.
• yaml-css, который принимает yaml и превращает его в css
• baseline, но он принимает некоторые знания css.
• Я также предлагаю посмотреть Adobe Dreamweaver. У них много инструментов для создания CSS и стиля, которые обеспечивают очень читаемый и совместимый с w3c код.

Я надеюсь, что это поможет.

Ответ 16

Недавно я обнаружил красивый веб-сайт iplotz.com, где вы можете создать макет вашего приложения/веб-сайта/проекта в Интернете, не устанавливая ничего. Он также имеет большинство общих элементов управления, а также гораздо больше возможностей для управления всем проектом и совместного использования его с другими пользователями в Интернете.

Должен признаться, я еще не пробовал это самостоятельно, но я немного посмотрел на него, и это выглядит довольно круто. Вероятно, я буду использовать его достаточно скоро.

Ответ 17

Sass выглядит так, как будто у него есть потенциал, чтобы смягчить некоторые головные боли css.

Ответ 18

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

Ответ 19

Мне нравится RocketCSS. Хороший чистый дизайн, дайте ему идти.