常见的Web UI样式

91

接下来的几天里，我必须向一位客户介绍一个Web应用程序的原型，问题是我不太擅长CSS，最糟糕的是，我几乎对获得的结果不满意。

编写业务逻辑对我来说并不构成挑战，但是UI设计占用了我80％以上的时间。我不需要任何令人叹为观止的事情，只需一个干净，漂亮且宜人的环境，例如：

替代文字

这是我一直遇到的一个反复出现的问题，我希望Web UI开发可以使用一种不太裸露的默认样式，类似于Visual Studio或iPhone SDK的方法对我来说非常有用。

上面使用Balsamiq Mockups创建的模型是一个很好的例子，所有最常见的“组件”都可以使用，并且最重要的是：只有一种漂亮的样式可供选择。

网络上有类似的东西吗？一个中立而又不错的CSS或Javascript UI框架？

到目前为止的选项：

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

我在此页面上找到了非常不错的Web UI库列表，但是其中大多数（至少是好的）似乎都是Java特有的，在纯CSS或JS中是否有同样好的替代品？

PS：我对AJAX，效果，行为等不感兴趣，我主要（唯一）关注的是风格。

谢谢大家的所有建议！

在仔细考虑了所有建议的UI库之后，我得出的结论是，ExtJS和Qooxdoo最适合我的需求。jQuery UI看起来很有希望，但是只提供了减少的元素数量。

就纯CSS库而言，我发现BlueTrip / BluePrint和Tambler建议的主题是最好的。除此之外，Flex和Napkee似乎也值得探索。

现在就来学习ExtJS！=）

css  user-interface 
— Alix Axel
source
6
值得注意的是，jQuery-UI拥有一个不错的主题设计器来加速“ Theme Roller”：jqueryui.com/themeroller
— Nick Craver

Answers:

7

我不敢相信没有人提到：

http://www.extjs.com/

它是一种商业js框架，但价格合理，并且可以轻松组合漂亮的UI。有一个比jqueryui更完整的元素集，其设计目的是制作一个完整的应用程序。我只玩了一点，但到目前为止我真的很喜欢它。免费供个人使用。

如果您真的想体验一下使用EXT开发的完整UI，请尝试以下URL：

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

— Erik
source
@Erik：谢谢你的建议。您知道您可以推荐的任何书籍/教程吗？我在弄清楚如何将ExtJS集成到典型的PHP MVC应用程序中时遇到了一些麻烦。
— Alix Axel
最好的起点是EXT提供的教程：extjs.com/learn/Tutorials 就无法将其与您的PHP框架集成而言，我不能说-但这是您的HTML页面，因此您可以按照自己的方式进行集成会整合其他页面，不是吗？
— 艾瑞克（Erik）2010年
7

使用dojo和dijit怎么样？

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

这里有各种小部件的好清单

— 佩里克斯
source
dijit似乎是我所需要的，但是我无法访问该页面-不知道为什么。
— Alix Axel 2010年
您无法访问哪个页面？
— peirix'2
dijit，但现在可以使用了。=）当我靠近计算机时（我目前正在用手机浏览），我会对其进行更好地研究。
— Alix Axel'2
6

与专门从事UI设计的人员配对。

如果您更擅长处理业务逻辑，那么最好花时间专门编码业务逻辑，这样您就可以掌握它。这将需要您学习如何与擅长演讲的人进行交流。（xml和json是常见方法）

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

好的接口并不像包含CSS框架那样简单。

我认为自己是一个更具“创造力”的程序员，在表现上表现出色。我碰巧很幸运地与一位首先是……非常有动力，并且第二位非常擅长“业务逻辑” 的人走过了道路。他在规划和实现复杂系统方面有很多经验，而我主要专注于界面设计。

如果您在进行系统体系结构，规划，开发等方面的工作效率更高，则应该朝着这个方向努力。虽然单独开发项目可能会相当令人满意，但我认为它效率低下。很少有人拥有独自开发顶级应用程序的技能。

面临的挑战是找到与您一起工作的人。

— Derek Adair
source
3

有一些针对（G）UI设计的框架；Qooxdoo，JQuery UI和MochaUI只是其中的一部分（尽管最后一个更多是概念验证而非可用的框架）。这些框架通常提供各种基于JS的元素（表单元素，例如输入字段和提交按钮，但其他元素也包括标签）。但是，您仍然可以根据自己的喜好放置这些元素，甚至可以对它们进行样式设置。

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

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

— 杜洛斯
source
1
960.gs确实没有做太多样式-您想要像Bluetrip（bluetrip.org）这样的东西。960.gs实际上只是提供基于网格的布局。
— 多米尼克·罗杰
我窥视了您建议的框架，qooxdoo似乎过于复杂（似乎所有内容都通过Javascript定义-甚至包括表单输入等。），MochaUI的界面非常漂亮，具有非常酷的中性色，我还没有看到它的源代码，但似乎也很有限（缺少许多基本样式）。到目前为止，jQuery UI似乎是最好的选择。960.gs不错，但就像Dominic所说的，不是为了样式。
— Alix Axel 2010年
3

这不会帮助您完成当前的项目，但是值得在以后的项目中考虑。在花了很多年用HTML 4创建GUI应用程序并不断努力克服CSS和HTML的局限性之后，我想我会尝试使用Adobe Flex。真是个进步！

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

— 雅各布
source
Flex确实是很棒的工具，但考虑到当今世界正朝着HTML 5迈进，而flex在尺寸和多语言方面存在许多问题，其中javascript胜出，您对价格有何看法，但我仍然认为flex是很棒的工具
— tawfekov
我真的希望标准应用程序能够为应用程序提供纯HTML / Javascript / CSS解决方案。
— 雅各布
Flex可能相当庞大，并且不如搜索引擎友好……但是我认为该系统无法被击败。我不是“高级” Web开发人员，但我确实看到在flex框架中工作的好处。Adobe有一个非常好的系统。仅仅能够使用ONE框架/标准化的交付方式为台式机/网络/ AND移动设备进行编码就非常有价值。
— 德里克·阿黛尔
2

这样的线框模型是一个很好的起点。

使用了这里讨论的大多数UI框架后，出于以下原因，我很乐意将您引向jQueryUi：

  1. jQueryUI CSS框架为您处理了一致且外观酷的CSS（这非常简单-只需做一些标记并应用类）

  2. jQueryUI具有tabcontrol，并堆积了许多简单易用的样式表样式。

— 丰富
source
在所有建议的选项中，我更倾向于ExtJS，您使用过吗？您如何将其与jQuery UI进行比较？
— Alix Axel
ExtJS非常成熟且完整。请注意，这是GPL和商业双重许可。它实际上是针对非常丰富的UI的窗口小部件界面。因此，如果您想要更多“公司”而不是“友好”的东西，那绝对不是一个坏选择。唯一的事情是它有一点学习曲线，实际上它本身就是一个整体框架。更像GUI编程而不是Web。祝您好运
— 富裕人士
2

如果您定位的是现代非IE浏览器，则应查看Sproutcore。对于样机，我使用模仿鸟。

— 酪蛋白
source
谢谢，模仿鸟真的让我开心！至于Sproutcore，它看起来不错，但是其中一些演示在Firefox 3.5.7中似乎有点问题。
— Alix Axel
2

一个相对较新的PHP框架，专门用于开发以UI为中心的软件。此处包含的元素包括制表符，过滤器和网格，这些元素将带您大约20行代码来实现。

http://agiletoolkit.org/

— 罗曼尼什
source
1

您尝试过Axure吗？它是用于为应用程序和网站快速创建线框，原型和规格的工具。

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

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

您可以创建表单，链接，选项卡，过渡，Javascript效果。

— 乔尼·海恩斯
source
谢谢，Axure看起来不错，但这不是我想要的。
— Alix Axel
1

如果您已经将Balsamic Mockups用于原型，则应考虑使用Napkee。引用网站“通过Napkee，您只需单击一下按钮，即可将Balsamiq样机导出到HTML / CSS / JS和Adobe Flex3。”

— 保罗
source
1

我前一段时间遇到了这个问题，但是找不到任何东西，所以我以此为契机学习了CSS。但是自那时以来，似乎在这一主题上已取得了长足的进步。

  • 总结您的问题，这里有一个维基百科页面。
  • 有yaml-css，它将yaml转换成css
  • 有基线，但是它假设有一些CSS知识。
  • 我还建议您查看Adobe的Dreamweaver。他们有很多CSS和样式生成工具，它们可以生成易读且与W3C兼容的代码。

希望对您有所帮助。

— 艾科
source
1

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

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

— 吉利布
source
这是Balsamiq的非常不错的替代品，我的浏览器的ATM速度很慢，但是从一开始就感觉很值得，谢谢。
— Alix Axel
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.