常见的Web UI风格

我必须在接下来的日子里向我的一个客户展示一个networking应用程序的原型,事情是我不擅长CSS,最糟糕的是,我几乎从不满意自己的结果。

对业务逻辑进行编码对我来说不构成挑战,但是UIdevise占用了我80%以上的时间。 我不需要什么惊人的东西,只是一个干净,漂亮,和现实的环境,一个例子:

替代文字http://i48.tinypic.com/t0p1fq.png

这是我一直在遇到的问题,我希望Web UI开发可以有一个较不裸的默认风格 ,类似于Visual StudioiPhone SDK的方法将是非常有用的我。

以上Balsamiq Mockups创build的模型就是一个很好的例子,所有最常见的“组件”都可以使用,最重要的是:只有一种好看的风格可供select。

有没有这样的networking? 一个中立但不错的CSS或Javascript UI框架?


迄今为止的选项:

  • 引导
  • 的Qooxdoo
  • jQuery UI
  • jQuery工具
  • MochaUI
  • Ext JS
  • 雅虎 用户界面库
  • 的BlueTrip
  • 蓝图
  • Uki ( 演示 )
  • Napkee
  • YAML
  • 底线
  • iPlotz
  • SproutCore的
  • ForeUI

我有兴趣知道是否有任何纯CSS的UI框架。

我发现这个页面有一个非常漂亮的Web UI库列表 ,但是其中大部分(至less是好的)似乎都是Java特有的,在纯CSS或JS中是否还有其他同样好的select?

PS:我对AJAX,效果,行为等不感兴趣…我主要(唯一的)关注是风格。


感谢大家的所有build议!

在仔细考虑了所有的UI库之后,我得出结论:ExtJS和Qooxdoo是最符合我需求的。 jQuery UI看起来很有前途,但只提供了less量的元素。

至于只有CSS的图书馆,我发现BlueTrip / BluePrint和赌徒build议的主题是最好的。 除此之外,Flex和Napkee似乎也值得探索。

现在是学习ExtJS的时间了! =)

我不敢相信没有人提到:

http://www.extjs.com/

它是一个商业js框架,但相当实惠,并使得一个很好的用户界面变得轻而易举。 有一个更完整的元素,然后jqueryui,它的目的是使整个应用程序。 我只是玩了一下,但我真的很喜欢它。 免费供个人使用。

如果你真的想得到一个用EXT开发完整UI的感觉,试试这个URL:

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

960gs的布局和jQuery-UI风格的组合可能是你在做什么。

你也可以考虑蓝图 CSS框架而不是960gs。

怎么使用dojo和dijit ?

Dijit是创build小部件和元素的一种快速方法。 它还带有3个容易修改的默认主题。

这里有不同的小部件的好列表

专注于UIdevise的 人员配对

如果你在处理业务逻辑方面更好,那么你的时间最好专门编写业务逻辑,以便掌握它。 这将要求您学习如何与擅长演示的其他人交stream。 ( xml和json是常用的手段)

业务逻辑和表示是非常不同的。 devise一个不仅看起来很好,而且直观易用的系统是相当困难的。 同build立复杂应用程序的内部工作一样困难和耗时。

一个好的界面并不像包含一个css框架那么简单。

我认为自己是一个更有创意的程序员,擅长expression。 我碰巧碰到了一个人,他首先是很有动力的,其次是非常擅长“商业逻辑”。 他有更多的计划和实施复杂系统的经验,而我主要关注界面devise。

如果你在系统架构,计划,开发等方面更有成效,你应该把自己推向这个方向。 虽然独立开发项目可以相当成功,但我认为它是低效的。 有人拥有独自开发顶级应用程序的技能是非常罕见的。

面临的挑战是find一个与你合作的人。

查看Google Web Toolkit 。 它有一个相当干净的默认外观。 他们有例子 。 特别是,他们的Showcase示例演示了所有可用的小部件和用于实现外观的css样式。

有一些针对(G)UIdevise的框架; Qooxdoo , JQuery UI和MochaUI是其中的一部分(尽pipe最后一个更像是一个可用框架的概念validation)。 这些框架通常提供各种JS驱动的元素(表单元素,如input字段和提交button,但也包括其他元素,如标签)。 然而,将这些元素定位,或许也可以根据自己的喜好来devise。

也许熟悉一个CSS框架(如960GS )可能会补充上面的JS UI框架。

(作为个人声明,我对上述任何框架都没有经验,但是我确定Google或SO都可以提供我不能提供的答案。)

这对你目前的项目不会有什么帮助,但对于未来的项目来说这是值得考虑的。 花了很多年在HTML 4中创buildGUI应用程序,并经常与CSS和HTML的限制摔跤,我想我会尝试Adobe Flex。 有什么改进!

使用Flex或Silverlight,而不是伪造标签页面控件或数据网格,您的标记可以简单地指定一个标签页面控件或数据网格。 而框架来的默认样式是无聊的,但并不坏。 我不是说这些完全替代HTML,但是如果你需要小部件和GUI布局,我相信他们是一个更好的select。

您可能会考虑浏览以下网站:

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

有几个“行政”主题可供购买在这里,可能适合您的需求。

像这样的线框模型是一个很好的开始。

在使用了这里讨论的UI框架大部分function之后,我想要引导您使用jQueryUi,原因如下:

  1. jQueryUI CSS框架为您提供了一致和酷的CSS(这非常简单 – 只需做一些标记并应用这些类)

  2. jQueryUI具有tabcontrol,并堆积整齐快捷简单的方式风格的forms。

如果你的目标是现代,非IE浏览器,那么你应该检查出Sproutcore 。 对于我使用模仿鸟的模型。

一个相对较新的PHP框架,专门为开发面向UI的软件而devise。 包含Tabs,Filters和Grids在内的元素都包含在内,并且需要大约20行代码才能实现。

http://agiletoolkit.org/

你尝试过Axure吗? 它是快速创build应用程序和网站的线框,原型和规范的工具。

它的工作方式与Balsamiq类似,但它允许您将线框/原型导出为HTML,CSS和Javascript。

然后,您可以将其上载到服务器或在您的计算机上运行,​​作为一个工作示例。

您可以创build表单,链接,选项卡,翻转,Javascript效果。

如果你已经使用香醋原型,那么你应该考虑Napkee 。 引用网站“Napkee可以让你点击一个button,将Balsamiq Mockups导出到HTML / CSS / JS和Adobe Flex 3”。

我之前碰到过这个,也找不到任何东西,于是我把它当成学习CSS的机会。 但从那以后,这个问题似乎已经取得了很大的进展。

  • 总结你的问题,有一个维基百科页面 。
  • 有yaml-css ,它需要yaml并把它变成css
  • 有基线 ,但它假设一些CSS知识。
  • 我也build议看看Adobe的Dreamweaver 。 他们有很多的CSS和风格的生成工具,这些工具生成非常可读和W3C兼容的代码。

我希望有帮助。

布局和jQuery-UI或Jquery工具960gs的组合是伟大的,我几乎在每个项目中使用它们,但我想添加到http://easyframework.com/虽然它不友好的商业,所以一定要检查它的许可证,但我喜欢它;

我最近发现了一个很好的网站iplotz.com,你可以在网上创build一个你的应用程序/网站/项目的模型,而不需要安装任何东西。 它也具有大部分常见的控制function,还有更多function用于pipe理整个项目并在线与其他人共享。

我必须承认,我自己并没有尝试过,但我看了一下,看起来很酷。 我可能会很快使用它。

Sass看起来像它有潜力,以减轻一些CSS头痛。

我喜欢添加Bootstrap,它是直观的,function强大的前端框架,可以更快更轻松地进行Web开发。

我喜欢RocketCSS 。 干净的devise,给它一个去。