UI设计中如何让颜色作为寻路工具?

仔细使用,颜色可以成为有用的寻路工具,以更好地帮助用户了解自己的位置和下一步去处。当涉及到用户界面设计时,您可能希望限制颜色的使用。相反,请以非常有意和有意义的方式谨慎使用它。

当过多使用颜色时,不清楚最需要注意什么。可以把它想像成一群说话的人。如果每个人都在同一时间讲话,那么除非有人比其他人大声喊叫,否则您不会听到某人说重要的话。相反,如果只有一个人在说话,那么您很可能会听到那个人在说什么。

例如,请看下面的圆点图案。随着颜色的减少,更容易注意到任何一个点。想象一下,这些点代表链接。在右下角的设置中,哪个是重要链接?

寻路指南

在寻路方面,我相信至少可以通过四种重要方式使用颜色:

标识:作为品牌标识,通常与徽标保持一致

动作:用于链接,按钮和其他动作,例如投票和评分

含义:让您知道您在“您在这里”中的位置

通知:让您知道有新事物

值得注意的是,色彩通常只是通过媒体内容(例如照片和视频)自然而然地产生的。让我们看一下FacebookQuoraPandoraNetflix制作的一些流行应用程序的示例。

(从左上方按顺时针方向:FacebookQuoraNetflixPandora

当您看到这些示例时,在哪里看到颜色?您认为这些颜色试图告诉您什么?

您可能已经说过Netflix App充满了色彩(因为它是如此)。但是,当我们删除媒体资产并用低保真度的形状和颜色替换生动的图像时会发生什么呢?

您能看到这些应用程序如何使其中的媒体艺术产生很大的色彩和趣味吗?用灰色框替换内容后,可以在哪里找到添加的颜色,这一点更加明显。具有大量图像的Netflix仅使用很少的颜色,而具有大量文本的Quora则可以区分品牌和动作颜色。

还要注意的是,由于它增加了视觉上的趣味和对比度,所以它还可以用作指南(这就是为什么在我的示例中,图标已替换为圆圈)。图标(和圆圈)用作文本旁边的对比信标。

现在,在YouTubeBehanceInstagramVine中查看这些模式 。

(从左上方按顺时针方向:  YouTube,  BehanceVine和 Instagram

你知道你在哪里吗 你知道该怎么办吗?你知道下一步去哪里吗?您能看到如何精心使用颜色吗? 

少量的颜色可以作为寻路设备使用很长的路要走。 

总之 

当您将色彩带入用户界面设计时,请尝试做出谨慎而有意义的选择,以帮助优化应用程序的寻路和可用性。您的用户不会那么困惑,并且您可能会获得更大的成功,让他们按照自己的意愿去做。

作者:Tom Osborne

本页面最后更新于 2021年04月26日 14:56