CRUD Web窗体设计的最佳示例

时间:2009-02-23 15:56:02

标签: forms

我希望改进我们的CRUD网络表单,并欣赏任何良好的UI设计示例。

我们有很多数据库表,用户对编辑的需求很少 - 国家代码,税码,产品价格等等 - 这些目前都使用简单的CRUD格式,但它是由开发人员设计的非常乏味,很可能有更好的可用性,当然还有更好的设计。

我们的流程是:

查找屏幕 - 其中还有一个“添加新按钮”。输入与搜索相关的任何参数的值,然后按“查找”按钮。使用EDIT链接匹配网格中显示的记录。相应的编辑表单允许CLONE,DELETE和SAVE。

在适当的情况下,编辑表单可能会显示子记录。

对于非常复杂的记录/关系,编辑表单被记录卡取代,记录卡显示包括厨房水槽在内的所有内容!并且适当的记录/子记录具有EDIT链接。

它的功能,但没有吸引力。

在80:20的基础上,代码都是机械生成的,因此重新生成它以用于新的比喻不应该太难。

我喜欢Magento eCommerce Admin页面中的很多用户界面,但我会对您推荐的其他任何示例感兴趣

6 个答案:

答案 0 :(得分:33)

以下是UI模式的一些示例:

Input Controls

Stacked Tabs

Inline Input Adder

One Page Wizards

Overlay

通常每个部分都会解释模式,使用方式和原因,并提供一些图形作为真实世界的例子。

作为额外的资源,您还可以访问ThemeForest's admin template site并浏览他们的许多产品,并获得精心设计和风格管理页面的图片和实时参观。我个人已经将一些这些模板用于数据量很大的网站。

希望这些可以帮到你一些。

7/25/18更新:虽然很难保持9年前的链接工作,但似乎托管UI示例的网站现在已经不存在了。请阅读Farewell from Patternry以获取更多信息。

答案 1 :(得分:7)

答案 2 :(得分:4)

您可以使用.Net 3.5创建的动态数据网站非常方便。良好的清洁动态CRUD能力,但非常可定制。路由可以在需要时默认为生成的页面,如果您选择创建它们,则可以自定义页面。

Dynamic Data Web Site

答案 3 :(得分:4)

这些家伙有很好的例子 -

http://wufoo.com/gallery/

答案 4 :(得分:3)

对我而言,Django admin interface是CRUD界面的一个很好的例子。

答案 5 :(得分:1)

我偶然发现了这个

你会发现一些非常棒的模板!!!

http://www.webappers.com/2009/09/18/20-professional-web-admin-templates-on-themeforest/