发布时间:2021-3-15 分类: 电商动态
“界面中存在的每个元素都是有意义的。”这是我在设计产品时的一致看法。
小到标点符号,分界线,大小如图标,图片,字段,必须有其存在的原因。
那么产品设计中真正高质量的图标是什么?有什么真正的价值观?
当我考虑产品的视觉方面时,以下关于这一点的总结是对图标的几点调查:
装饰
表现
有趣的
产品公告
1.装饰
装饰,也称为修饰,是指用图标修饰页面以使页面看起来更饱满。同时,通过图标增加页面的分层性,从而可以区分页面的每个部分的内容。
在我看来,图标的装饰效果是图标的基本功能,大多数图标都可以起到装饰作用。
我们经常听到描述视觉效果的形容词:“节奏”,“等级”,“呼吸”等等。
为了使页面具有节奏感和层次感,除了“白色”,“分割”,“分割”,“对比”等方法外,图标也是常用手段。
以下是一些例子:
△了解网络版
上面的图片是关于网页版的侧边栏,灰色图标,不仅起到装饰的作用,而且不会引起用户的注意,因此用户的注意力可以集中在阅读内容本身上。
△东兴198
上图是东兴198的第一个界面。通过图标的“存在”或“强度”,整个页面分为三个部分。
顶部的“买入,卖出,撤回,持有,检查”是股票交易中最常见的操作,因此使用文本图标。它不仅起到装饰作用,而且清晰直接地表达其意义。这也是许多股票应用程序使用的图标样式。它还可以在第一时间在视觉上吸引用户的注意力。
其次,使用相对低频的功能来操作“新股认购,资产管理产品,港股,国债逆回购”使用四个颜色填充,小尺寸的方形图标。
最下面的列表项功能不使用图标,使其与上面的其他功能不同。
在整个图标和布局的转换过程中,整个页面都很松散,并且具有强烈的层次感。用户可以通过简单地使用视觉指导来区分功能。
“一切都太多了,太多了。”
虽然图标的装饰效果可以使页面具有节奏感和层次感,但不应过度使用。
例如,在页面中使用了空白区域和分隔线以创建整个页面的分层感。如果您需要使用图标进行装饰,您应该说出来。
如果使用图标进行装饰,如何在图标和装饰物(通常是文本内容)之间实现最佳平衡,如何在不打扰用户的情况下发挥装饰作用,是设计图标时的一个重要考虑因素。
2.表达
在我看来,“观念”是图标的第二个功能,它已经在“装饰”的基础上升华。简单来说,图标的含义反映在函数的解释中。
经过几年互联网的快速发展,用户已形成对一些图标的一些共识。在设计我们的产品时我们必须注意,在使用它们时我们永远不应该违反规则。
以下是一些常见的图标:
△常用图标
对于构成用户心中固有模式的这些图标,我们可以在此基础上使用转换和创新,但如果我们想要打破用户的习惯感知,我们必须谨慎。
以下是我个人认为在表意上完成的几个很好的例子:
△QQ音乐
上图是QQ音乐的下载图标。它结合了“下载”和“钱”。乍一看,似乎是“付费下载”,其含义非常明确。
△XMind Cloud
上图是xmind移动版的编辑页面和底部的功能图标。作为大脑地图软件的移动版本,各种功能并不像社交和电子商务软件的功能那样普遍,因此如何设计功能图标更加可测试,并且必须清晰。当我第一次使用xmind移动应用程序时,我非常看到这些图标,因为它们的表意形式非常简单,图标并不复杂,简单和清晰度的结合非常好。
想象一下,如果用文本替换上图中的图标,底部的工具栏将非常拥挤,文本描述不一定比图标更准确。
3.有趣
有趣也可称为快乐,给人以愉悦感的图标可称为好图标。
如果你快乐并拥有良好的意识形态,那绝对是一个伟大的偶像。但是,令人困惑的图标通常不会给人一种愉悦感。
我们来看一个例子。同样是QQ系列:
以上三张图片是QQ在选定和未选中状态下底部的三个标签的表现,可以说是非常可爱。
注意消息图标和联系人图标,他们的眼睛,但他们会移动,按照您的选择,并乐趣。虽然动态图标没有眼睛,但图标的形状有偏差。如果未选中,则整个图标在形态上倾向于被选中,这非常有趣。
4.产品介绍
产品推广,也称品牌推广。
在互联网发展的年代,市场上的产品确实太多,同质化非常严重。优质产品不希望增加自己产品的曝光率,增加用户的忠诚度。品牌,品牌色调,品牌和品牌价值越来越受到公司的重视。作为产品,具有高外观率的图标也是产品的一部分。
这部分可以从以下两个方面看出:
将图标与产品徽标结合使用可增加产品徽标的曝光度。
通过图标色调来传达产品的色调,在用户的心中塑造出产品的独特特征。
我们来看几个例子:
△饿了?
△热健身
△支付宝
△淘宝
在上图中,几个APP直接使用产品的徽标作为底部标签的图标。
△饿了?
△美国集团外卖
△美国集团外卖
在上图中,订购界面的购物篮,美国集团外卖的装载风格和默认页面图标,产品标识被整合到图标设计中,图标本身的动态设计也非常有趣。膳食或装载都与品牌有关。
△一个
△享受
上面的图片是我喜欢“One”和“ENJOY”的两个应用程序。两个应用程序的UI设计一直非常时尚,图标设计也非常有趣,这符合产品的色调。
以上是我对图标设计的看法,希望对大家有所帮助。