我决定在 2010 年设计更多东西。我在 2009 年并没有做太多直接设计的事情。所以与其等待机会来找我，我宁愿选择一些随机的东西来重新设计。在日常工作中，我们刚刚为客户完成了大量的数据输入，这是我们每年在他们修改产品目录时都会做的事情。我们为客户的商店使用 Pinnacle Cart，除了使用基于表格的模板外，它是一款相当不错的电子商务软件。在花费大量时间编辑产品后，我决定尝试重新设计该特定屏幕，看看我是否可以解决一些问题。
我重新设计的区域只是整个页面的一个部分，所以不要被没有整体的管理导航等等的事实分散注意力。
之前
问题
- 空白空间使用效率低下
- 选项卡感觉很拥挤
- 字段顺序不合理（例如，为什么“元描述”和其他 5 个字段位于产品标题和价格之间，这两个是最重要的字段）
- 页面长度太长，为什么不将图像拆分为单独的选项卡
- 促销和折扣选项卡可以合并
- 页面底部的上/下导航毫无用处
- 重置表单按钮毫无用处
- 不应该需要滚动才能保存
- 元关键词毫无用处
之后
改进
- 选项卡被替换为顶行中更大的可点击链接
- 上/下导航位于右上角。这样，您可以点击点击点击，链接将始终位于相同的位置。
- 字段分组更符合逻辑
- 通过删除某些内容并重新排列内容来缩短页面长度。同时，输入字段实际上更大。
- 提供两个保存按钮，这样您就永远不必滚动才能保存，并且命名为“保存所有更改”，这有助于消除对按钮实际保存内容的混淆（它保存所有内容，而不仅仅是上半部分或下半部分）。该按钮还提供一个分隔线，将基本内容与更深入、更具体的內容分开。
- 描述区域中 HTML 标签的按钮
对我来说，这感觉更好，但您不必同意我的观点。如果您有改进的想法或关于我哪里做错的评论，请告诉我。我还将 提供 PSD，以防您想自己重新排列内容。
我不喜欢双按钮。在一个这么小的页面上真的需要两个吗？
这肯定适合大多数人的浏览器尺寸吧？
如果不是，我可能会在页面底部使用一个固定按钮，但仍然保留内容的断开。
我认为在我的模拟中肯定会出现页面滚动。我对此特别敏感，仅仅是因为此页面所看到的动作数量巨大。
例如，对于 1000 次价格更改，CLICK-TYPE-SAVE 比 CLICK-TYPE-SCROLL-SAVE 快得多。
固定按钮是一个巧妙的想法。
我想我忘记了与此相关的装饰，例如导航等等。
但是的，我认为单独的页面可以在大多数现代显示器上显示而无需滚动。
尽管如此，如果您要执行 1000 次保存操作，也许使用 AJAX 自动保存是更好的选择？
他们不能只按回车键吗？我唯一使用提交按钮而不是回车键的时间是在最后输入文本区域时，就像现在这样。
这绝对是一个改进，我不介意两个按钮，但我认为一个更好的解决方案是使用一些简单的 JavaScript 添加键盘快捷键！
@Vasili
我必须承认，我甚至在文本区域中也不会点击提交。我实际上是那种反鼠标的人，我会使用 Shift-Tab（即跳回最后一个输入字段，其中“Enter”有效） - 然后按 Enter。
就像现在这样 :-)
/me 按 Shift-Tab -> Enter
我喜欢 AJAX 保存的想法。至于滚动，如果使用“返回顶部”之类的锚点也可以，但我更喜欢选项卡。
最后，我认为大多数用户不熟悉 Shift+Enter 或 Tab+Enter 来提交。如果出现任何情况，我都会禁用它以确保安全。
我建议精简页眉以节省空间。然后，不确定这有多难，但要创建一个包含所有价格/运费信息的选项卡。保持每个选项卡简短而简单……
我喜欢只保留一个“保存所有更改”按钮的想法。
原始表单太丑了，很难想象如何才能让它看起来更好。
不错，
我喜欢字段现在按逻辑分组的改进，例如图像
干得好，
谢谢
您的 Gravatar 有一些东西会产生视觉错觉，使其逆时针旋转一度或两度。太疯狂了。
确实 O_O，
很奇怪。
我认为这是因为纸张折痕在右下方，而不是（更合乎逻辑的）左上方。
嗯……
哇，看着它会让我眼睛发疯！非常酷的错觉。
无论如何，Chris，您能够重新设计这样的东西真是太棒了，干得好。除了保存按钮可能应该稍微小一点，以及上面有人建议的那样，固定之外，我没有发现任何问题。
恕我直言，产品图像在首页上是需要的，而不是在自己的选项卡中。也许在产品名称附近显示一个缩略图，然后可能在悬停时显示一个弹出窗口。
我认为看到所有三个都太多了，但我可以看到缩略图可能有效。我不确定是否应该保留或删除图像选项卡……让用户清楚主图像同时出现在两个区域可能是一个挑战。
如果您正在寻找一个位置来将图像识别为“图标”，我建议使用缩略图而不是页面顶部的编辑图形（在“编辑产品”旁边）。
我同意 John 的观点。拥有正在编辑的项目的视觉辅助不会造成任何伤害，并且可能非常方便。
而且你必须喜欢 Benjamin 的固定位置“保存按钮”的想法..很棒的方法！
除此之外，重新设计很棒..
我觉得你重做了得不错。
一些我想改变的东西
– 粘性保存按钮（如之前建议的那样）
– 预览图片，旁边显示名称，可能还有产品代码（你总是希望看到一些关于你正在编辑内容的视觉信息……让事情更清晰）
– 我认为你应该将带有数字的输入对齐到右侧（例如价格）……加上货币符号也不错！
– 有时候将事物分组并使用<legend>标签是个好主意。
只是一些想法～
我真的很喜欢“保存所有”功能，而且经常间隔放置它们也很棒。
他们的版本看起来像是“开箱即用，剪切粘贴”的产物，而你的版本更直观。
我认为你呈现的结果更具吸引力，因此更有用。我会花更多时间查看这些功能并创建我的页面，因为它们的存在。
很棒的重新设计！
我比之前的版本更喜欢它，但我认为你对按钮和输入字段的大小过度设计了。
尽管如此，它仍然更人性化！
我同意DesignLovr的观点，这种尺寸开始看起来有点吓人，也许稍微小一点，既要大又要微妙。
Chris，干得好，我碰巧喜欢Magento的产品页面，那里的一切都很好地分开，易于操作。我唯一想批评的是，在我看来，它感觉有点紧凑。我个人喜欢从上到下操作字段，输入所有内容，但再次强调，干得漂亮！
新设计好多了。在页面顶部有一个固定工具栏，包含操作按钮（保存和删除），这样会多么好用？
我喜欢固定工具栏的想法，但我不确定是否有足够的动作来证明它的存在。
保存
撤销（稍微复杂一点，并且在刷新按钮只需几个像素/按键即可到达的情况下可能不是必需的）/取消 – 情况相同
新增
删除
下一项
前一项
选择项目/搜索 – 随着空间的增加，我认为可以使用动态搜索或下拉框直接跳转到所需项目，从而节省点击浏览的时间，并更容易对多个不同项目进行多次更新，一个过滤器框，它本身并不进行搜索，而是生成一个建议列表，可以通过代码或名称跳转到项目。
我认为有足够多的通用重复或方便的待办事项，可以在固定栏中提高可用性。
重新设计是一个很好的开始，但我个人觉得“保存所有更改”按钮有点过大且占据主导地位。
我也不赞成重复它们，我理解你使用它们的理由，它们确实很好地分割了内容——但综合考虑因素，我认为固定栏是值得的。
我认为你的重新设计看起来好多了，但似乎你是免费做的。
我确实做了，但这只是一个想法。我没有详细设计页面的其余部分，也没有做子页面，甚至没有编写代码。我很乐意这样做，但这将不再是免费的=）
看起来非常漂亮且用户友好，在我看来，Pinnacle Cart的后端并非如此。你是否真的实现了这些更改，或者它只是一个模型？
模型。
我认为最初的设计似乎非常实用，可能没有那么性感；）
在我看来，新的标签不如旧的标签直观和清晰。我不同意你将表单标签右对齐的选择，因为该表单“非标准”（例如地址或登录），用户无法轻松扫描标签。原始版本中的标题似乎非常清晰并提供醒目的视觉效果——好的，可折叠的部分应该在左侧，编辑或任何图标应该在右侧。
你选择的字体和颜色绝对更具吸引力，输入字段的大小可能对我来说有点过大，但话又说回来，这似乎很流行，但它会占用重要的屏幕空间还是会真正帮助你的用户？目标受众是谁？老年人？
总的来说，干得好，干杯，迈克
我对UX的技术方面了解不多——我不确定这是否是正确的缩写——但我知道我喜欢什么，就像人们常说的那样。我喜欢这个！
漂亮、开放、清晰、吸引人、简洁、井然有序。当我看到它时，这些词语浮现在脑海中。
有一件事我想建议给所有我们这些笨蛋——在不熟悉的表单中，我发现那些显示有关正在填写表单部分的解释性消息的小问号非常有用，这样你就可以轻松地了解你在任何给定字段中输入的内容。这些小问号并不常见。
这可能是另一个话题，但那个所见即所得编辑器是什么，你推荐哪些轻量级且跨浏览器的编辑器？
http://wmd-editor.com/
CTech的Kevin说：感谢你撰写这篇文章。这正是我想要改进我的自定义电子商务商店的内容。
我真的很喜欢重新设计的较大输入表单、聚焦时的边框更改、更好地利用可用空白以及最小的所见即所得编辑器。非常好，伙计:) 只想知道你是如何处理图像的。
gr
绝对是巨大的改进！
不过，我不太喜欢表单中右对齐的标签。在我看来，它看起来有点“凌乱”，就像输入只是漂浮着一样。也许我患有轻微的强迫症，但我喜欢表单输入整齐排列——这似乎让阅读/跟随变得更容易:-)
在这个页面中，最后三张图片不太好。在设计方面，我喜欢——我认为是这样的。
～像这样h1、h2、h3
Chris，干得好，它很漂亮！
好多了 :)
好文章 :)