是什么让这个 POS 设计看起来过时了?
其他答案侧重于如何改进设计,但既然您问为什么设计看起来过时:
字体太小。最左边的看起来没有其他的那么过时,这是为什么呢?在左侧,字体大小与文本可用的垂直空间相匹配,而在所有其他按钮中,字体太小了。让我们也加入全部大写、Arial 和每个按钮上的 3 个固定文本行(Pay 以外的每个按钮似乎都被格式化为接收垂直顶部、中心和底部的文本,如果只有 2 行会导致尴尬实际文本)。
没有吸引力的颜色。屏幕看起来使用了 9 种几乎随机的颜色,所有这些颜色都是原始 64 种 EGA 颜色的一部分。许多现代 GUI 使用更细微的颜色差异,除非按钮之间存在很大差异。一些现代 GUI 还在按钮中使用颜色渐变。
没有图像。
2 彩色 3D 效果。3D 按钮使用 2 像素宽的边框,左上角为统一的白色,右下角为统一的灰色,再加上一个像素的全黑边框,确实已经过时了。
太简单。仅使用按钮,就错失了直观地表明我们当前正在查看食品部分的机会。现代的 Gui 会使用其他线索来指示洋红色和黄色部分属于一起,例如黄色按钮后面的填充矩形延伸到食物按钮后面的背景:
最后,POS 系统标题困扰着我,但我认为这只是糟糕的设计,与它过时没有任何关系。
在更改任何内容之前,请确保当前显示输出支持的不仅仅是 EGA(16 色调色板,从 64 色表中选择),并且如果您想使用图像,请确保显示器的分辨率允许用户识别显示在图片。有时,现场使用的设备比人们想象的要老得多。此外,在改变颜色时,请记住色盲。
考虑到这是一个 POS 系统,我会说功能就在那里。按钮很大,相对容易阅读,并且按组进行组织,这将有助于我找到我要查找的内容。
话虽如此,我看到了很好的结构决策,但没有多少设计决策。这就是我要研究的:
字体:您的应用程序中的所有内容都使用 Arial 大写,但并非每个元素都相同。有一个层次结构,您可以使用字体样式或系列来表示它。例如,最下面的行可以使用大小写混合,因为它们实际上并不是主要选项的一部分。您选择将“支付”变大,这很好,但它是唯一具有不同字体大小的按钮。为什么要更改字体,而不是例如颜色?不是说你应该,我的意思是这样思考可以让你发现分离元素的新方法。例如:您是否考虑过使用分隔线?
间距:您没有为许多元素使用相同的间距(边距)。看看网格系统,你会从使用一个中受益匪浅。平衡的布局将使设计看起来更加有序和优美。按钮内的文本也有一些奇怪的间距问题 (IMO)。1 行的按钮居中,2 行在行之间有很大的空间,3 行看起来还可以,因为到处都是相等的间距。在文本行之间总是有相同的空间不是更有意义,而不是试图将文本尽可能靠近边界吗?
颜色:分组用于明确不同的按钮做不同的事情,但我看不出调色板背后的原因。试着往以下方向思考:我可以使用颜色来进一步推送我的信息吗?我可以使用颜色来促进查找按钮的任务吗?你已经通过给“发送”一个不同的音调来做到这一点。这是一个伟大的决定。但后来我看到你选择的颜色是不同的,这取决于它是在右列还是在中间。为什么?。然后想想,你还能在哪里以类似的方式使用颜色?看看Google Material,它们可能会激发你尝试新的组合。
阴影和效果:3D 效果在这种情况下非常有用,我认为您可以进一步推动它。这是3D POS 的示例。另外,您是否考虑过使用图标?它们可以提供很好的视觉辅助。
我认为该应用程序看起来过时了,因为它并没有真正遵循任何趋势,除了带有一些阴影的色块,这是设计软件和编码语言在这方面不允许太多创造力时的常态。现在,您几乎可以做任何事情。你的设计看起来过时了,因为它没有利用过去几年流行的那些设计技巧和选择。
我建议您看看其他类似的应用程序,检查它们的正确或错误之处,看看您的应用程序如何从其中一些想法中培养。你已经有了一个很棒的骨架,它只需要一些肉。网格和一些补色可能会为您的应用程序做很多事情。
抛开设计不谈,它是否实用,操作它的人是否了解如何使用它?如果是这样的话,有一个元素是不要修复没有损坏的东西。
是的,它看起来过时了,但是我使用的许多直到系统都具有相同的简单外观。考虑到可访问性而选择的圆形按钮和颜色可以让它变得漂亮,但我的直觉是,这纯粹是一个功能性的部件,尝试“让它变得活泼”可能会给员工带来混乱。
3D 效果在这种情况下实际上很有用,因为它可以快速告诉用户这是一个可点击的按钮,我想在餐厅交易时间非常重要。