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

91

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

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

альтернативный текст

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

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

Есть ли что-то подобное в сети? Нейтральный, но приятный фреймворк пользовательского интерфейса CSS или Javascript?

Варианты на данный момент:

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

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

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

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

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

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

Время изучать ExtJS прямо сейчас! знак равно

css  user-interface 
— Аликс Аксель
источник
6
Стоит отметить, что в jQuery-UI есть хороший дизайнер тем для ускорения работы под названием «Theme Roller»: jqueryui.com/themeroller
— Nick Craver

Ответы:

7

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

http://www.extjs.com/

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

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

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

— Эрик
источник
@Erik: Спасибо за предложение. Знаете ли вы какие-нибудь книги / руководства, которые вы можете порекомендовать? У меня небольшие проблемы с определением того, как мне интегрировать ExtJS в типичное приложение PHP MVC.
— Аликс Аксель
Лучшее место для начала - учебные пособия, которые предлагает EXT: extjs.com/learn/Tutorials Что касается интеграции его с вашей PHP-структурой, я не могу сказать, но это ваши HTML-страницы, поэтому вы должны интегрировать их так, как вы Я бы интегрировал любую другую страницу, не так ли?
— Эрик
11

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

Вы могли бы также рассмотреть план основы CSS вместо 960gs.

— Шейн О'Грэйди
источник
Вы имеете в виду jQuery UI JS framework или jQuery UI CSS framework?
— Аликс Аксель,
1
Приносим извинения за путаницу, я имел в виду CSS-фреймворк jQuery UI для стилизации. Но нет причин, по которым вы не могли бы также включить фреймворк виджетов JS.
— Шейн О'Грейди
Спасибо, я разберусь с этим. =)
— Аликс Аксель
7

А как насчет использования додзё и диджита ?

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

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

— Пейрикс
источник
dijit кажется мне тем, что мне нужно, однако я не могу получить доступ к странице - не знаю почему.
— Аликс Аксель,
К какой странице вы не можете получить доступ?
— peirix 01
dijit, но теперь он работает. =) Я лучше посмотрю на него, как только подойду к компьютеру (сейчас просматриваю с телефона).
— Аликс Аксель
6

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

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

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

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

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

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

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

— Дерек Адэр
источник
4

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

— Абтин Форузанде
источник
1
Пользовательский интерфейс GWT написан на java. Затем GWT берет эту java и преобразует ее в чистый html / javascript.
— Abtin Forouzandeh
3

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

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

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

— Дурот
источник
1
В 960.gs действительно мало стилизации - для этого вам нужно что-то вроде Bluetrip ( bluetrip.org ). 960.gs на самом деле просто предоставляет макет на основе сетки.
— Доминик Роджер
Я заглянул в предложенные вами фреймворки, qooxdoo кажется слишком сложным (кажется, что все определяется через Javascript - даже входные данные формы и т. Д.), MochaUI имеет действительно хороший интерфейс с очень крутыми нейтральными цветами, я не видел исходный код его, но он также кажется довольно ограниченным (отсутствуют многие элементарные стили). jQuery UI пока что кажется лучшим вариантом. 960.gs - это хорошо, но, как сказал Доминик, не для стилизации.
— Аликс Аксель
3

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

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

— Джейкоб
источник
Flex - действительно отличный инструмент, но подумайте о том, что в наши дни мир движется к HTML 5, и у flex есть много проблем с размером и многоязычностью, где побеждает javascript и что вы думаете о цене, но я все еще думаю, что flex - отличный инструмент
— tawfekov
Я действительно надеюсь, что в результате процесса стандартизации появится чистое решение для приложений HTML / Javascript / CSS.
— Джейкоб
Flex может быть довольно громоздким и не таким удобным для поисковых систем ... но, на мой взгляд, эту систему нельзя превзойти. Я не «старший» веб-разработчик, но я действительно вижу преимущества работы во фреймворке Flex. У Adobe действительно хорошая система. Просто возможность кодировать для настольных компьютеров / Интернета / И мобильных устройств с ОДНОЙ структурой / стандартизованными средствами доставки бесценна.
— Дерек Адэр
2

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

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

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

  2. В jQueryUI есть tabcontrol и множество простых и удобных способов стилизации форм.

— Богатый
источник
Из всех предложенных вариантов я больше склоняюсь к ExtJS, вы когда-нибудь его использовали? Как вы сравниваете его с пользовательским интерфейсом jQuery?
— Аликс Аксель
ExtJS очень зрелый и полный. Имейте в виду, что это двойная лицензия GPL и коммерческая. Это действительно интерфейс виджета, предназначенный для очень богатого пользовательского интерфейса. Так что, если вы хотите чего-то более «корпоративного» и менее «дружелюбного», это совсем не плохой выбор. Единственное, что у него есть некоторая кривая обучения, это действительно целая структура сама по себе. Больше похоже на программирование с графическим интерфейсом, чем на веб. Удачи
— Rich
2

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

— птулин
источник
Спасибо, пересмешник действительно сделал мой день! Что касается Sproutcore, он выглядит неплохо, но некоторые из демонстраций в Firefox 3.5.7 выглядят немного ошибочно.
— Аликс Аксель,
2

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

http://agiletoolkit.org/

— романиньш
источник
1

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

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

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

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

— Джонни Хейнс
источник
Спасибо, Axure кажется неплохим, но мне это не нужно.
— Аликс Аксель
1

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

— Павел
источник
1

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

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

Надеюсь, это поможет.

— icco
источник
1

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

— оборота тауфеков
источник
Обязательно посетите cufon cufon.shoqolate.com/generate, если вас интересует типографика
— tawfekov
1

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

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

— гиллиб
источник
Это очень хорошая альтернатива Balsamiq, мой браузер - очень медленный банкомат, но на первый взгляд кажется, что он стоит своих денег, спасибо.
— Аликс Аксель
0

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

— Эмилио Горт
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.