Поширені стилі веб-інтерфейсу


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 зараз! =)


6
Варто зазначити, jQuery-UI має приємний дизайнер тем, щоб пришвидшити процес, який називається "Тематичний ролик": jqueryui.com/themeroller
Нік Кравер

Відповіді:


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.
Alix Axel

Найкраще з початку - підручники, які пропонує EXT: extjs.com/learn/Tutorials Що стосується інтеграції його з вашим PHP фреймворком, я не міг би сказати - але це ваші HTML-сторінки, тож ви б інтегрували їх так, як ви Ви б інтегрували будь-яку іншу сторінку, чи не так?
Ерік

11

Можливо, вам потрібна комбінація 960 г для макета та jQuery-UI для стилю.

Ви також можете розглянути проект CSS-рамки замість 960gs.


Ви маєте на увазі фреймворк jQuery UI JS або фреймворк jQuery UI CSS?
Алікс Аксель

1
Вибачаюся за плутанину, я мав на увазі, що він використовує інтерфейс jQuery CSI для стилізації. Але немає жодної причини, що ви також не могли включити структуру віджетів JS.
Шейн О'Грейді

Дякую, я розгляну це. =)
Алікс Аксель

7

А як щодо використання dojo та dijit ?

Dijit - це швидкий спосіб створення віджетів та елементів. Він також має 3 теми за замовчуванням, які легко змінити.

Хороший список різних віджетів тут


dijit здається тим, що мені потрібно, проте я не можу отримати доступ до сторінки - не знаю чому.
Алікс Аксель

До якої сторінки Ви не можете отримати доступ?
peirix

dijit, але зараз це працює. =) Я краще подивлюсь, як тільки підійду до комп’ютера (зараз переглядаю за телефоном).
Alix Axel

6

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

Якщо ви краще маєте справу з бізнес-логікою, ваш час краще витратити виключно на кодування бізнес-логіки, щоб ви могли її опанувати. Для цього потрібно буде навчитися взаємодіяти з кимось іншим, хто перевершує презентацію. ( xml та json - загальноприйняті засоби)

Бізнес-логіка та презентація дуже різні. Розробити систему, яка не тільки добре виглядає, але є інтуїтивно зрозумілою та простою у використанні, досить складно. Так само складно і трудомістко, як встановлення внутрішньої роботи складного додатка.

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

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

Якщо ви ефективніше робите архітектуру системи, плануєте, розробляєте, що завгодно ... вам слід підштовхнути себе в цьому напрямку. Незважаючи на те, що проекти сольного розвитку можуть бути досить ефективними, я вважаю це неефективним. Дуже рідко хтось володіє навичками самостійно розробляти додатки верхнього рівня.

Проблема полягає в тому, щоб знайти когось, з ким ви добре працюєте.


4

Ознайомтеся з Google Web Toolkit . Він має досить чистий зовнішній вигляд. Вони мають приклади . Зокрема, їх приклад Showcase демонструє всі доступні віджети та стиль CSS, що використовується для досягнення зовнішнього вигляду.


1
Інтерфейси GWT написані на Java. Потім GWT бере цей java і перетворює його на чистий html / javascript.
Абтін Форузанде

3

Є декілька основ, спрямованих на (G) UI Design; Qooxdoo , JQuery UI та MochaUI - деякі з них (хоча останній є скоріше доказом концепції, ніж придатним для використання фреймворком). Ці фреймворки зазвичай пропонують різноманітні елементи на основі JS (елементи форми, такі як поля введення та кнопки подання, але також інші елементи, такі як вкладки). Однак ви все одно будете залежати від розміщення цих елементів і, можливо, їх стилізації на ваш смак.

Можливо, ознайомлення з фреймворком CSS (наприклад, 960GS ) може доповнити вищезазначені JS UI Frameworks.

(Як особисте застереження; у мене дуже мало досвіду роботи з будь-яким із зазначених вище фреймворків. Але я впевнений, що Google або SO можуть дати відповіді, я не можу.)


1
960.gs насправді не робить багато стилів - для цього вам потрібно щось на зразок Bluetrip ( bluetrip.org ). 960.gs насправді просто надає макет на основі сітки.
Домінік Роджер

Я зазирнув до запропонованих вами фреймворків, qooxdoo здається надмірно складним (здається, все визначається за допомогою Javascript - навіть введення форми тощо), MochaUI має справді приємний інтерфейс з дуже холодними нейтральними кольорами, я не бачив вихідний код, але він також здається досить обмеженим (багато елементарних стилів не вистачає). Інтерфейс jQuery здається найкращим варіантом на сьогодні. 960.gs - це приємно, але, як Домінік сказав, це не для стилізації.
Алікс Аксель

3

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

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


Flex - справді чудовий інструмент, але розглянемо, як у наші дні світ рухається до HTML 5, і flex має багато проблем із розміром та багатомовністю, де перемагає javascript, і що ви думаєте про ціну, але я все ще вважаю, що flex - це чудовий інструмент
tawfekov

Я дуже сподіваюся, що в процесі стандартизації з'явиться чисте рішення HTML / Javascript / CSS для додатків.
Яків 02

Flex може бути досить громіздким і не таким зручним для пошукових систем ... але, на мій погляд, систему неможливо обіграти. Я не є `` старшим '' веб-розробником, але я справді бачу користь роботи в рамках гнучкості. У Adobe дійсно хороша система. Просто можливість кодування для настільних комп'ютерів / Інтернету / І мобільних пристроїв за допомогою ОДНОГО фреймворку / стандартизованих засобів доставки є цінною, окрім слів.
Дерек Едір


2

такі каркасні макети - чудовий спосіб почати.

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

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

  2. jQueryUI має контроль табуляції та набір акуратних швидких простих способів стилізації форм.


З усіх запропонованих варіантів я більше схиляюся до ExtJS, чи використовували ви його коли-небудь? Як ви порівняєте його з інтерфейсом jQuery?
Alix Axel

ExtJS дуже зрілий і повний. Майте на увазі, що це подвійна ліцензія GPL та комерційна. Це справді інтерфейс віджетів, спрямований на дуже багаті інтерфейси. Тож якщо ви хочете чогось більш «корпоративного» та менш «дружнього», це зовсім не поганий вибір. Єдине, у нього є трохи кривої навчання, це насправді ціла структура для себе. Більше схоже на програмування графічного інтерфейсу, ніж на веб. Удачі
Багатий

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. Але з тих пір, здається, були зроблені великі кроки до цієї теми.

  • Підсумовуючи вашу проблему, є сторінка wikipedia .
  • Існує yaml-css , який бере yaml і перетворює його на css
  • Є базовий рівень , але він передбачає певні знання css.
  • Я також пропоную поглянути на Dreamweaver від Adobe . Вони мають багато інструментів для створення css та стилів, які створюють дуже читабельний і сумісний з w3c код.

Я сподіваюся, що це допоможе.


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.