是什么使此POS设计看起来过时?


25

我试图了解是什么使此销售点(POS)屏幕设计显得过时。

是3D按钮,颜色,布局,字体吗?您将如何使它看起来很新?

我不是专业设计人员,但可以看到它已经过时了。但是我不确定为什么以及如何改变它。

POS屏幕


2
嗨,您好!欢迎来到GD.SE :)在这里有人问过与您的问题类似的问题:graphicdesign.stackexchange.com/questions/17885/…但是,我认为您应该将您的问题变成一个批判性问题,您会得到很多更详细的反馈。您可能需要添加一些信息,以使其更容易为我们虽然回复:meta.graphicdesign.stackexchange.com/questions/672/...
Yisela

7
啊!Extra's!!
user56reinstatemonica8'8

2
天哪,我在打开此线程时并不了解您使用它时所用的“ POS”一词。用“件”代替“ P”的口语含义似乎很合适。
polkovnikov.ph,2016年

此系统使用内置的系统按钮,设置背景时缺少边框样式。在90年代后期的Visual Basic 6和Delphi 7时代,这是可以接受的。
polkovnikov.ph,2016年

Answers:


35

其他答案集中在如何改进设计上,但是由于您询问了为什么设计看起来过时:

字体太小。最左边的日期看起来比其他地方的日期少,这是为什么呢?左侧的字体大小与文本可用的垂直空间匹配,而在所有其他按钮中,字体都太小。我们还将所有大写字母Arial和每个按钮上的3条固定文本行都放入(除Pay之外的所有其他按钮都被格式化为可以接收垂直顶部,中央和底部的文本,如果只有2行,则会导致尴尬)实际文本)。

没有吸引力的颜色。屏幕看起来好像使用了9种几乎随机的颜色,所有这些颜色都是原始的64种EGA颜色的一部分。除非按钮之间没有很大差异,否则许多现代GUI会使用更细微的颜色差异。一些现代的GUI还在按钮中使用颜色渐变。

没有图像。

2彩色3D效果。3D按钮使用2像素宽的边框,左上角具有均匀的白色,右下角具有均匀的灰色,再加上一个像素,其周围的黑色边框确实过时了。

太简单。仅使用按钮,就没有机会直观地表明我们当前正在查看食物部分。现代的Gui将使用其他线索来指示洋红色和黄色部分属于同一部分,例如黄色按钮后面的实心矩形,该矩形延伸到食物按钮后面的背景:

在此处输入图片说明

最后,POS系统标头困扰着我,但我认为这只是一个糟糕的设计,与它的过时没有任何关系。

更改任何内容之前,请确保当前的显示器支持的内容超过EGA(从64色表中选择的16种调色板),并且如果要使用图像,请确保显示器的分辨率允许用户识别显示器上的显示内容。图片。有时,现场使用的设备要比人们想象的要旧很多。另外,更改颜色时请记住色盲。


19

考虑到这是一个POS系统,我想说这里的功能。这些按钮很大,相对易于阅读,并且按组进行组织,这将有助于我找到所需的内容。

话虽如此,我看到了良好的结构决策,但设计决策却不多。这就是我要研究的内容:

  • 字体:您应用中的所有内容均使用Arial大写字母,但并非每个元素都相同。有一个层次结构,您可以使用字体样式或系列来表示它。例如,底行可以使用大小写混合,因为它们实际上并不是主要选项的一部分。您选择使“ Pay”变大,这很棒,但这是唯一一个具有不同字体大小的按钮。为什么要更改字体,而不要更改颜色?并不是说您应该这样做,而是意味着以这种方式思考可以使您发现分离元素的新方法。例如:您是否考虑过使用分频器?

  • 间距:许多元素的间距(边距)不同。查看网格系统,您将从中受益匪浅。均衡的布局将使设计看起来更有条理和更有光泽。您还会发现按钮内的文本存在一些奇怪的间距问题(IMO)。1行的按钮居中,2行的行之间有很大的空间,3行看起来不错,因为到处都有相等的间距。在文本行之间始终保持相同的间距,而不是尝试将文本拉到尽可能靠近边界的位置,这不是更有意义吗?

  • 颜色:分组的目的是使不同的按钮清晰地显示不同的功能,但是我看不出调色板背后的原因。尝试朝以下方向思考:我可以使用颜色来进一步推送消息吗?我可以使用颜色来简化查找按钮的任务吗?您已经通过给“发送”一个不同的音调来做到这一点。这是一个伟大的决定。但是然后我看到您选择的颜色是不同的,取决于它是在右列还是在中央列。为什么?。Thenn认为,您还能在其他地方以类似方式使用颜色吗?看看Google Material,他们可能会启发您尝试新的连击。

  • 阴影和效果:3D效果在这种情况下非常有用,我认为您可以将其进一步推广。这是3D POS示例。此外,您是否考虑过使用图标?它们可以提供良好的视觉帮助。

我认为该应用看起来过时,是因为它实际上并没有遵循任何趋势,除了带有阴影的色块外,这是设计软件和编码语言在这方面没有太多创造力的规范。现在,您几乎可以做任何事。您的设计看起来过时,因为它没有利用最近几年流行的那些设计技巧和选择。

我建议您看看其他类似的应用程序,检查它们在做对还是错,看看您的应用程序可以如何从这些想法中培养出来。您已经有了一个很好的骨骼,它只需要一些肉即可。网格,也许还可以使用一些互补的颜色,这将为您的应用程序带来很大的帮助。


好吧,现在所有基地都覆盖了...所以我可以删除我的。
joojaa

@joojaa我处于编辑疯狂状态,我只注意到其他As不断弹出,但是没有检查它们。我看到我们几乎分享了所有评论!可惜您删除了自己的,仍然有效-尤其是。复古的斜角,再好不过了。
伊塞拉

15

乍看之下,我无法快速分辨出什么是什么(而且我在餐厅POS系统方面拥有经验)。对我来说,UI右侧的灰色项目似乎并不属于同一类。屏幕中央的黄色项目实际上是3个部分,但这不清楚吗?

从下面显示的示例中(我并不是说它们的质量,它们是从快速搜索中随机选择的),您可以看到图标,图像和大块彩色的使用。这些是识别动作和区分功能的不同区域或信息层次结构的有用工具。

我没有时间得到更详细的答案,但是我要说的是看一下当前UI(用户界面)设计的示例。例如,快速搜索“ POS UI设计”将为您提供图像,例如:

在此处输入图片说明

在此处输入图片说明

在此处输入图片说明


11

撇开设计,它是否起作用,并且操作它的人员是否了解如何使用它?在这种情况下,有一个因素是不修复未损坏的内容。

是的,它看起来有些陈旧,但是我使用的许多系统都具有相同的外观。考虑到可访问性而选择的圆形按钮和颜色可能会使它更加漂亮,但是我的直觉是,这纯粹是功能性的部件,尝试“爵士乐”可能会使员工感到困惑。

3D效果在这种情况下实际上很有用,因为它可以快速告诉用户这是一个可单击的按钮,并且我想在餐厅交易时间非常重要。


2
用户体验和功能是良好设计中的重要元素-感谢您提出这一点。如果效果良好,请非常小心并测试将来的任何设计更改。不要仅仅为了使系统看起来“更黑”而使功能恶化。
bemdesign

我认为这里另一个答案中的照片示例是形式胜过功能的清晰示例。他们也给经理/销售人员增加了创建自定义图标的负担,并且他们毫无理由地认为图标可以简化选择过程。如果必须在繁忙的环境中选择要用于POS的UI,则可以选择原始的“过时” UI。
Yorik

1
显然,圆角哟。这个家伙还在运行Windows 2000 ...
Mazura '16

9

我也不是设计专业人员,但是由于我在构建移动应用程序时必须考虑这种事情。

  1. 抛弃老式的win32 3d效果。在每个人都希望事物看起来对触摸屏友好的时代,这简直是脱节。您要使用的是每个动作区域(按钮)的较大平坦区域,相关按钮组之间没有间隔,或者按钮下方的阴影不存在。查看Android的Material Design。即使对于非移动应用程序,它也很有用。

  2. 如果相关项目之间有间距,请使用边框(而非颜色)对相关项目进行分组。如果它们之间没有间距,则请坚持使用颜色,以便整个相关区域看起来像具有一种纯色背景色。

  3. 选择较柔和的颜色(请考虑柔和的颜色),并选择一种免费配色方案。确保调色板中每种颜色都有浅色和深色版本。希望您不再使用只能从旧的CGA / VGA 16调色板显示的系统。

  4. UI元素应根据颜色方案一致地着色。例如:提供UI输入的按钮可被视为与更改页面或触发主要功能的按钮不同,但是通常每种类型的按钮应使用一种颜色,而不是给定功能区域中的所有按钮使用一种颜色。这有助于用户更好地了解每个UI元素将要做什么。

  5. 最好使用动作区域之间的间距将它们与动作项目之间的平坦软边界分开。区域中的操作项应具有常规大小(将每个操作项想象为一个或多个网格中的相邻单元)。

  6. 在窗口中使用标题区域时:

    一种。该区域中的所有操作项都应位于标题区域内。

    b。该区域中的所有操作项应是应用程序全局的(即登录名,设置等)。

    C。标题不得与徽标重叠。

我希望这有帮助。


我偷看了“材料设计”页面,它是用一种设计语言编写的,以至于凡人都无法理解它。如果您有指向某个页面的链接,该页面可以向那些不谈论能力,隐喻,强化用户的推动者和综合原则的人们进行解释,那么我非常希望看到这一点。
Sami Kuhmonen

2

几乎所有元素似乎都是按钮。但是,当我阅读标签时,似乎有些按钮是操作按钮,而另一些则用于导航。

在现代用户界面中,您要区分两者。一排标签可以用作有效的导航工具,既可以显示您当前所在的位置,又可以显示如何到达其他位置。在所有披萨选项中都有一个“比萨饼”标签,而在所有面食中都有一个“面食”标签。

紫色的FOOD按钮可能已经充当了这样的选项卡,而DRINKS是另一个这样的选项卡。他们绝对不应该在右边-英语是从上到下,从左到右阅读的,您的工作流应该复制它。

一排选项卡的效果相当好,但是在这里您可能具有更深的层次结构。在这种情况下,明智的做法是将当前UI状态显示为path Food > Starters >:,即起始页面顶部的一行。将“入门”菜单的第一项设置为“ <返回食物”按钮;这使您可以隐藏很多控件。


1

首先,我想问一下目的是什么?

是否要求操作员快速找到钥匙并更快地下订单而不会出现任何误输入?还是必须吸引和鼓励用户使用计算机的GUI?

在这种情况下,作品的目的明确表明它是用于高效,快速地输入交易。因此,我们可以采用更简单,更有条理的方式,即形式,颜色和层次结构需要在设计趋势和设计上决定逻辑顺序。

当前GUI的问题是:

颜色颜色太粗糙,随着时间的推移会产生压力,并影响用户决策的有效性。具有其他高对比度颜色的白色背景肯定会造成眼睛疲劳,并且很难快速找到用户需要收集的必要信息。

字体:太小,无法查找和决策,这也受文本之间粗糙的颜色和对比度的影响。这可能会严重影响首次使用该系统的用户,时间更长,产生更多的误输入。

排序和分组:我们是否必须大字体显示名称“ POS System”?有好处吗?不!该系统的用户和屏幕上的元素清楚地表明了这一点。分组有意义吗?并非如此,很多东西都可以分组,因此用户可以逻辑地找到它。选择这个词是否有意义?不!“发送”?发送什么?“设置菜单”?您每天都设置菜单吗?不!向前。层次结构和单词选择需要仔细检查。

从设备本身的用途来看,有些人在GUI上贴上了图像和奇特的东西,它清楚地表明它不一定非要奇特,但必须具有很高的功能性和周到的考虑。


0

因为看起来不像是专门针对移动设备,Android或Windows OS设计的“平铺”方式,所以它也完全不像Apple那样-引起冲突,因为它们在视觉上占据了很多时尚。关于它的几乎所有内容都是“错误的”,因此我将跳过细节。


嘿詹姆斯,欢迎来到GD.SE!细节是我们在这里寻找的。:)显示一些示例来支持您的发言,这肯定会帮助您提高答案的质量,并帮助提出要求的人理解您的意思。随时编辑和阐述!
Vicki

0

所有这些都是很好的答案,但是,如果您需要参考资料,以及一个好的现代POS系统的外观的光辉示例,请查看iPad上的Square应用。

https://itunes.apple.com/cn/app/square-register-point-sale/id335393788?mt=8

我认为您可以做的最大的事情就是改进现有的UI(以及为什么它看起来如此过时),因为现代UI倾向于喜欢大量的空白-并使空白变成白色。如今,许多设计都非常谨慎地使用反向字体(黑色背景上的白色文本或任何深色上的白色文本)。像这个网站一样:https : //developer.wordpress.com/calypso/


0

按钮应按功能进行组织,分层且按钮应与布局方法一致。

用外行的话来说:

1)将最常用的按钮放在容易找到的地方;

2)内部按钮应由外壳“控制”(窗口内的窗口,窗口内的窗口);

3)如果您有输入按钮(或与此相关的任何其他按钮),即使屏幕可能改变,也应将其放在同一位置。

许多POS系统都试图优化功能设计,但是我认为领先于游戏的一个POSRezku POS

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.