常见的Web UI样式

时间:2010-01-25 09:51:16

标签: css user-interface

我必须在接下来的几天里向我的一个客户展示一个网络应用程序的原型,事情是我不太擅长CSS,最糟糕的是我几乎从不对我得到的结果感到满意。

对业务逻辑进行编码对我没有任何挑战,但UI设计占用了我80%以上的时间。我不需要任何令人惊叹的东西,只是一个干净,漂亮和可呈现的环境,例如:

alt text http://i48.tinypic.com/t0p1fq.png

这是我一直遇到的一个反复出现的问题,我希望Web UI开发可以有一个更少的裸体默认样式,类似于 Visual Studio iPhone SDK 对我来说非常有用。

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

网上有这样的东西吗?一个中立但不错的CSS或Javascript UI框架?


到目前为止

选项:

我很想知道是否有任何仅限CSS的UI框架。

我找到了this page with a very nice list of Web UI Libraries,但其中大多数(至少是好的)似乎是特定于Java的,在纯CSS或JS中有没有同样好的选择?

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


感谢所有人的建议!

在仔细考虑了所有建议的UI库后,我得出的结论是ExtJS和Qooxdoo是最符合我需求的。 jQuery UI似乎很有前景,但只提供了少量的元素。

就CSS-only库而言,我发现BlueTrip / BluePrint以及tambler建议的主题是最好的。除此之外,Flex和Napkee似乎也值得探索。

现在学习ExtJS的时间! =)

19 个答案:

答案 0 :(得分:11)

布局960gs与造型jQuery-UI的组合可能就是你所追求的。

你也可以考虑使用blueprint CSS框架而不是960gs。

答案 1 :(得分:7)

如何使用dojodijit

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

不同小部件的完整列表here

答案 2 :(得分:7)

我无法相信没人提到:

http://www.extjs.com/

它是一个商业化的js框架,但非常实惠,并且可以轻松组合一个漂亮的用户界面。有一套比jqueryui更完整的元素,它的设计是为了制作一个完整的应用程序。我只玩了一点,但到目前为止我真的很喜欢它。免费供个人使用。

如果您真的想要了解使用EXT开发的完整用户界面,请尝试以下网址:

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

答案 3 :(得分:6)

在UI设计中专门的人配对。

如果您更擅长处理业务逻辑,那么您可以花时间专门编写业务逻辑,以便掌握它。这将要求您学习如何与擅长演示的其他人交流。 (xmljson是常用手段)

业务逻辑和演示非常不同。设计一个不仅外观美观,而且直观且易于使用的系统非常困难。与建立复杂应用程序的内部工作同样困难和耗时。

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

我认为自己是一位更具创造力的程序员,在演示方面表现出色。我碰巧幸运地与一个人交往,首先是......非常有动力,其次是非常擅长“商业逻辑”。他在规划和实施复杂系统方面有很多经验,而我主要专注于界面设计。

如果你在提高系统架构,规划,开发等方面的工作效率更高,那么你应该把自己推向这个方向。虽然单独的开发项目可以相当充实,但我认为它效率低下。很少有人具备开发顶级应用程序的技能。

挑战在于找到一个与你合作的人。

答案 4 :(得分:4)

结帐Google Web Toolkit。它有一个非常干净的默认外观。他们有examples。特别是,他们的Showcase示例演示了所有可用的小部件和用于实现外观的CSS样式。

答案 5 :(得分:3)

有一些针对(G)UI设计的框架; QooxdooJQuery UIMochaUI只是其中的一小部分(尽管最后一个更像是一个概念验证,而不是一个可用的框架)。这些框架通常提供各种JS驱动的元素(表单元素,如输入字段和提交按钮,但其他元素,如选项卡)。但是,您仍然可以根据自己的喜好定位这些元素,并根据自己的喜好来定位它们。

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

(作为个人免责声明;我对上述任何框架的经验都很少。但我确信Google或SO都可以提供我不能提供的答案。)

答案 6 :(得分:3)

这对您当前的项目无济于事,但值得考虑未来的项目。花了很多年在HTML 4中创建GUI应用程序并不断克服CSS和HTML的限制,我想我会试用Adobe Flex。有什么改进!

使用Flex或Silverlight,您的标记可以简单地指定选项卡式页面控件或数据网格,而不是使用Flex或Silverlight伪制选项卡式页面控件或数据网格。而且框架的默认样式很无聊,但并不是很糟糕。我不是说这些完全取代HTML,但如果你需要小部件和GUI布局,我相信它们是一个更好的选择。

答案 7 :(得分:3)

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

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

这里有几个可以购买的“管理”主题,可以满足您的需求。

答案 8 :(得分:2)

一个相对较新的PHP框架,专门用于开发以UI为中心的软件。这里包含的元素包括标签,过滤器和网格,将为您提供大约20行代码。

http://agiletoolkit.org/

答案 9 :(得分:2)

如果您的目标是现代的非IE浏览器,那么您应该查看Sproutcore。对于模型,我使用mockingbird

答案 10 :(得分:2)

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

在使用了这里讨论的大部分UI框架后,我会因为以下原因而引导你走向jQueryUi:

  1. jQueryUI CSS框架为您处理一致且酷炫的CSS(它非常简单 - 只需制作一些标记并应用类)

  2. jQueryUI有tabcontrol,并采用简洁快捷的方式来设置表单样式。

答案 11 :(得分:1)

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

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

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

您可以创建表单,链接,标签页,翻转,Javascript效果。

答案 12 :(得分:1)

我最近发现了一个名为iplotz.com的网站,您可以在线创建应用程序/网站/项目的模型而无需安装任何内容。 它还具有大多数常用控件,以及用于管理整个项目并在线与其他人共享的更多功能。

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

答案 13 :(得分:1)

我前一段时间遇到过这个问题,找不到任何东西,所以我把它作为学习CSS的机会。但从那以后,似乎在这个问题上取得了很大进展。

  • 总结您的问题,有一个wikipedia page
  • yaml-css,需要yaml并将其转换为css
  • baseline,但它假定有一些css知识。
  • 我还建议查看Adobe's Dreamweaver。他们有很多css和样式生成工具,可以生成非常易读和兼容的w3c代码。

我希望有所帮助。

答案 14 :(得分:1)

如果您已经为原型使用Balsamic Mockups,那么您应该考虑Napkee。引用网站“Napkee让你只需点击一下按钮就可以将Balsamiq Mockups导出到HTML / CSS / JS和Adobe Flex 3。”

答案 15 :(得分:1)

960gs的布局和jQuery-UI或Jquery工具的组合非常棒  我几乎在每个项目中使用它们但我想添加到http://easyframework.com/ 虽然它不是商业友好所以 请务必查看其许可证 但我喜欢它

答案 16 :(得分:0)

Sass看起来有可能减轻一些css头痛。

答案 17 :(得分:0)

我想添加Bootstrap直观,强大的前端框架,以便更快,更轻松地进行Web开发。

答案 18 :(得分:0)

我喜欢RocketCSS。干净漂亮的设计,试一试。