常见的 Web UI 样式答案

【问题标题】：Common Web UI Styles常见的 Web UI 样式
【发布时间】：2011-01-09 00:54:26
【问题描述】：

我必须在接下来的几天内向我的一个客户展示一个 Web 应用程序的原型，问题是我不太擅长 CSS，最糟糕的是，我对得到的结果几乎从不满意。

编写业务逻辑对我没有挑战，但 UI 设计占用了我 80% 以上的时间。我不需要任何令人惊叹的东西，只需要一个干净、漂亮和像样的环境，一个例子：

这是我一直遇到的一个反复出现的问题，我希望 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 库而言，我发现 BlueTrip / BluePrint 和 tambler 建议的主题是最好的。除此之外，Flex 和 Napkee 似乎也值得探索。

现在是时候学习 ExtJS 了！ =)

【问题讨论】：

值得注意的是，jQuery-UI 有一个不错的主题设计器可以加快速度，称为“主题滚轮”：jqueryui.com/themeroller

标签： css user-interface

【解决方案1】：

960gs 用于布局和jQuery-UI 用于样式的组合可能就是您所追求的。

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

【讨论】：

你是指jQuery UI JS框架还是jQuery UI CSS框架？
为混淆道歉，我的意思是他的 jQuery UI CSS 框架的样式。但是你也没有理由不能也加入 JS 小部件框架。
谢谢，我会调查的。 =)

【解决方案2】：

我不敢相信没有人提到：

http://www.extjs.com/

它是一个商业 js 框架，但价格实惠，并且可以轻而易举地组合出漂亮的 UI。有一套比 jqueryui 更完整的元素，它的设计目的是制作一个完整的应用程序。我只玩过一点，但到目前为止我真的很喜欢它。免费供个人使用。

如果你真的想感受一下使用 EXT 开发的完整 UI，试试这个网址：

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 页面，所以你可以集成他们会以您集成任何其他页面的方式，不是吗？

【解决方案3】：

如何使用dojo 和dijit？

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

不同小部件的良好列表here

【讨论】：

dijit 似乎是我需要的，但是我无法访问该页面 - 不知道为什么。
哪个页面不能访问？
dijit，但它现在正在工作。 =) 我一靠近电脑就会仔细看看（我目前正在用手机浏览）。

【解决方案4】：

与UI 设计专业的人结对。

如果您更擅长处理业务逻辑，那么您最好花时间专门编写业务逻辑，以便掌握它。这将要求您学习如何与擅长演示的其他人交流。（xml和json是常用手段）

业务逻辑和表示方式非常不同。设计一个不仅看起来不错，而且直观且易于使用的系统是相当困难的。与建立复杂应用程序的内部工作原理一样困难和耗时。

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

我认为自己是一个更有“创意”的程序员，在演示方面表现出色。我碰巧有幸遇到了一个人，他首先...非常积极，其次非常擅长“业务逻辑”。他在规划和实施复杂系统方面拥有更多经验，而我主要专注于界面设计。

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

挑战在于找到与你共事的人。

【讨论】：

【解决方案5】：

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

【讨论】：

GWT UI 是用 java 编写的。然后 GWT 获取该 java 并将其转换为纯 html/javascript。

【解决方案6】：

有一些框架是针对 (G)UI 设计的； Qooxdoo、JQuery UI 和 MochaUI 是其中的几个（尽管最后一个更像是概念验证而不是可用的框架）。这些框架通常提供各种 JS 驱动的元素（表单元素，例如输入字段和提交按钮，但也提供其他元素，例如选项卡）。但是，您仍然可以根据自己的喜好定位这些元素，或许还可以设置它们的样式。

也许熟悉 CSS 框架（例如 960GS）可能会补充上述 JS UI 框架。

（作为个人免责声明；我对上述任何框架的经验都很少。但我确信 Google 或 SO 都可以提供我无法提供的答案。）

【讨论】：

960.gs 真的没有做太多的造型 - 你想要像 Bluetrip (bluetrip.org) 这样的东西。 960.gs 真的只是提供了一个基于网格的布局。
我看了一下你建议的框架，qooxdoo 似乎过于复杂（一切似乎都是通过 Javascript 定义的——甚至是表单输入等），MochaUI 有一个非常好的界面，非常酷中性色，我还没有看到它的源代码，但它似乎也相当有限（缺少很多基本样式）。到目前为止，jQuery UI 似乎是最好的选择。 960.gs 不错，但就像 Dominic 所说的那样，它不是用来造型的。

【解决方案7】：

这对您当前的项目没有帮助，但对于未来的项目值得考虑。在花了多年时间在 HTML 4 中创建 GUI 应用程序并不断与 CSS 和 HTML 的限制作斗争之后，我想我会尝试 Adobe Flex。多么大的进步！

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

【讨论】：

Flex 确实是很棒的工具，但考虑到当今世界正在向 HTML 5 发展，而 flex 在大小和多语言方面存在许多问题，其中 javascript 胜出，您对价格有何看法，但我仍然认为 flex是个好工具
我真的希望一个纯 HTML/Javascript/CSS 的应用程序解决方案能够从标准过程中出现。
Flex 可能相当笨重，而且对搜索引擎不友好......但我认为该系统无法被击败。我不是“高级”Web 开发人员，但我确实看到了在 flex 框架内工作的好处。 Adobe 有一个非常好的系统。仅仅能够使用 ONE 框架/标准化交付方式为桌面/网络/和移动设备编写代码就非常有价值。

【解决方案8】：

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

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

这里有几个“管理”主题可供购买，可能适合您的需求。

【讨论】：

【解决方案9】：

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

已经使用了这里讨论的大部分 UI 框架，我想引导您使用 jQueryUi，原因如下：

jQueryUI CSS 框架为您处理一致且外观酷炫的 CSS（这真的很简单 - 只需做一些标记并应用类）
jQueryUI 具有选项卡控件，并且提供了多种简洁快捷的表单样式设置方法。

【讨论】：

从所有建议的选项中我更倾向于 ExtJS，你用过吗？你如何将它与 jQuery UI 进行比较？
ExtJS 非常成熟、完整。请注意，它是双重许可的 GPL 和商业。它确实是一个针对非常丰富的 UI 的小部件界面。因此，如果您想要更“企业”而不那么“友好”的东西，这根本不是一个糟糕的选择。唯一的问题是它有一点学习曲线，它本身就是一个完整的框架。更像是 GUI 编程而不是 Web。祝你好运

【解决方案10】：

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

【讨论】：

谢谢，知更鸟真的让我很开心！至于 Sproutcore，它看起来不错，但有些演示在 Firefox 3.5.7 中看起来有点问题。

【解决方案11】：

一个相对较新的 PHP 框架，专为开发以 UI 为中心的软件而设计。您在此处拥有的元素，包括选项卡、过滤器和网格都包括在内，并且需要大约 20 行代码来实现。

http://agiletoolkit.org/

【讨论】：

【解决方案12】：

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

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

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

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

【讨论】：

谢谢，Axure 看起来不错，但不是我想要的。

【解决方案13】：

如果您已经在为您的原型使用 Balsamic Mockups，那么您应该考虑使用 Napkee。引用网站“Napkee 让您只需单击一个按钮即可将 Balsamiq Mockups 导出为 HTML/CSS/JS 和 Adobe Flex 3。”

【讨论】：

【解决方案14】：

我前段时间遇到这个，找不到任何东西，所以我把它作为学习css的机会。但从那时起，似乎在这个主题上取得了长足的进步。

总结你的问题，有一个wikipedia page。
有yaml-css，取yaml，转成css
有 baseline，但它假定你有一些 css 知识。
我还建议查看Adobe's Dreamweaver。他们有很多 css 和样式生成工具，可以生成非常易读且与 w3c 兼容的代码。

希望对你有帮助。

【讨论】：

【解决方案15】：

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

【讨论】：

如果您对排版感兴趣，请务必查看 cufon cufon.shoqolate.com/generate

【解决方案16】：

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

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

【讨论】：

它是 Balsamiq 的一个非常好的替代品，我的浏览器是非常慢的 ATM，但从第一印象来看，它似乎物有所值，谢谢。

【解决方案17】：

Sass 看起来有潜力作为缓解一些 CSS 问题的方法。

【讨论】：

【解决方案18】：

我喜欢添加Bootstrap，它直观且功能强大的前端框架可以更快、更轻松地进行 Web 开发。

【讨论】：

【解决方案19】：

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

【讨论】：