首页

2022年标志设计趋势:标志的未来

ui设计分享达人

2021年,标志设计师朝着更大胆、更具创新性的设计迈出了一大步。与平面设计趋势类似,品牌推广大量采用软循环动画和鲜艳的配色方案。它还开辟了实验排版,鼓励创造性思维重新审视标志设计。

2022年的标志设计趋势很可能会延续这一大趋势,我们希望看到上述美学在全球范围内得到重塑。您会看到设计师同样选择极简主义和卡通标志、3D 和平面标志、花卉和文字标志。我们认为2021年是创作自由的一年。然而,看起来在2022年,我们将看到它真正的肆无忌惮。

1) 简单的几何图形和基本形状

2) 高大的标志

3) 饱和颜色和渐变

4) 象征主义和极简主义代替现实主义

5) 涂鸦和草图

6) 粗体字标标志

7) 无衬线标志

8) 花艺和微妙的装饰

9) 黑白标志

10) 3D与平面样式

简单的几何图形和基本形状

在2022年,拥有基于复杂图形的标志几乎会很少见。此类标志通常难以记住,客户可能会很难发现在品牌与其图形表示之间的联系。对于寻求加强存在感和提高品牌知名度的大企业来说,这可能是一个巨大的问题。因此,公司倾向于拒绝此类标志,而倾向于使用一些基本的东西。

基本的几何形状是各种三角形、圆形、正方形、点和线,它们使标志设计成为简单的图像。作为优化,建议设计师使用充满活力或独特的配色方案。或者相反,切换到黑白,将这种极简效果发挥到极致。最后,还有负空间,这是另一种采用简单几何形状并保持视觉趣味的好方法。

高大的标志

虽然2022年的大多数标志设计趋势与我们两年、三年或五年前曾经拥有的一切产生共鸣,但高大的标志就像一口新鲜空气和创造力。反对过度使用的三角形、方形和圆形标志。正如我们从多个Behance项目中看到的那样,它们的美学非常适合寻求领先的时尚公司、精品店、创意工作室和大品牌。

高大的标志部分借鉴了装饰艺术风格,它们特别喜欢优雅的垂直框架。高大的标志同样具有波西米亚风美学和现代几何元素。事实上,这种标志设计趋势的根源并不那么重要。真正重要的是新的形状让设计师想出了新的标志创意,所以在这里我们希望他们以不同的方式处理字体和图形元素。

饱和颜色和渐变

实践表明,标志的颜色工作和色彩的选择是一个非常个人化的故事,通常很难跟踪全球趋势或与特定颜色相关的任何标志趋势。有人更喜欢黑白标志。有人会选择现在特别流行的单色、裸色或大地色。然而,如果我们看看大品牌,我们将能够在标志设计中使用生动、饱和的颜色来定义一个巨大的趋势。

对标志设计中颜色的兴趣已经发展到这样的程度,创作者不仅要增加饱和度,还要选择纯粹、生动的解决方案,同时尽可能地简化标志。太多的细节和颜色会造成混乱的外观,因此选择其中一个至关重要——在极简主义时代,选择很明确。然而,我们不禁强调鲜艳的色彩很难处理——尤其是糖果色。它们可以使品牌标识看起来廉价甚至业余。因此,当您关注这一标志设计趋势时,重要的是要取得平衡——否则您将面临使用可疑标志的风险。

象征主义和极简主义代替现实主义

有多种与简化标志和极简主义相关的标志趋势——这可能是最能说明问题的。我们每个人都将标志创建为一件真正的艺术品。动物、花卉、神话和生物——在标志内,它们展示了精湛的技艺和对细节的迷人关注。诚然,这样的标志确实看起来很引人注目,但从响应式设计的角度来看,它们失去了其他类型的标志。

您可能还记得响应式标志,这个术语是在大约4年前引入的。这些是可以适应不同屏幕尺寸或其他媒体的标志。为此,设计人员可以删除字标、简化或隐藏标志。今天几乎没有人认为响应式标志是一种独立的现象或趋势。相反,响应性是标志的自然特征,象征主义和极简主义的运动正好证明了这一点。

涂鸦和草图

2022年,草图和涂鸦将作为图形设计趋势回归,因此它们作为单独的标志设计趋势出现。其复兴的关键是人们对设计师个人品牌方法的兴趣增加。显然,没有什么比以独特风格绘制的快速草图、卡通人物和形状更好的了。

因此,要为标志设计中的更多涂鸦以及企业品牌中草率的卡通标志和快速绘制的吉祥物做好准备。以快速和朴实的方式制作的手绘标志也受到欢迎,我们已经看到以这种方式书写品牌名称的项目和团队。

粗体字标标志

如果我们考虑2021年的标志设计趋势,粗体字标志将是最好的例子。于2020年底推出的实验排版项目专注于不常见的几何解决方案。难怪品牌和标志设计师不能忽视这种大规模的图形设计创新——在这里,我们在标志设计方面有了一个全新的方向。

许多跨国公司选择字标标志。例如H&M、可口可乐、Zara、谷歌、Visa等品牌。然而,几乎没有人认真考虑使用实验字体进行品牌重塑。这就是为什么此类文字商标标志主要在独立工作室、小型企业、精品店、沙龙和个人创作者中传播。也许,这些大胆标志的特征是其吸引力的另一个关键。您可以将它们视为那些知道要注意什么的鉴赏家的标志——或者那些想要感受品牌美学的人。

无衬线标志

虽然使用大胆的实验排版并不是每个人的趋势,但无衬线字体是每个人都知道和理解的。自从设计师拒绝花哨的脚本和衬线字体而支持无衬线字体以来,已经有一段时间了。但由于存在普遍趋势,我们可以说它仍然是2021年的标志设计趋势——顺便说一下,这得到了我们上面写的极简主义和基本几何形状的流行的支持。

拒绝花哨字体的动机非常简单——使用无衬线字体要容易得多。使它们适应不同的屏幕和画布尺寸并不复杂,因此它们更适合响应式标志。有趣的是,几年前,我们观察到了一个相反的过程:许多公司从无衬线字体切换到衬线字体,因为复古设计非常流行。今天,随着复古狂热慢慢释放出来,健康的实用主义出现了,无衬线字体再次相关。

花艺和微妙的装饰

我已经不知道设计师和产品创造者用极简主义制作了一系列标志多少年了。与此同时,许多小企业继续选择和使用它们,所以这些标志不会退缩——就好像它们刚刚出现在市场上一样。所以请放心,它们将与您共存数个季节,同时还会定期推出新款式,例如2022年风靡一时的Boho。

也许,这种标志设计趋势是最流行的。优雅的线条看起来令人着迷,因此使用它们的诱惑很大。2019年如此,2022年依旧如此。 事实上,这种微妙的视觉风格并不仅仅集中在花艺上。有很多日常用品:从家具到文具和衣服。重要的是这些标志模板是如何制作的!

黑白标志

随着我们继续从各个方面学习了解极简主义,让我们在这个市场中传递2022年的另一个自信趋势:黑白标志。实际上,将黑白色调视为一种趋势是很奇怪的,因为它是一种经典的解决方案,并且它的存在与时间和风格的变化无关。所以,我们需要让您注意到对此类标志的兴趣是日益增加的,其中最重要的例子是GoDaddy的重新设计之一。他们逐渐简化了他们的标志,现在他们似乎到达了最后阶段——带有带有无衬线字体和保留标志的黑白标志。

黑白标志的最佳之处在于它们令人难以置信的风格灵活性,这使得它们在品牌设计师中流行起来。它们完美地适应了品牌的审美,因此可以将它们用于字体、装饰元素和几何形状的各种实验。极简主义、创造性的排版、花卉、象征主义、原始几何——一切都与黑白标志相得益彰。

3D与平面样式

3D是2021年最有前途的图形设计趋势之一。随着技术的发展,这种图形变得如此庞大,以至于我们永远无法预见。甚至可以在直观的在Spline或 Procreate的最新更新中进行高质量3D对象的制作。图像质量也得到了发展。

然而,在标志设计中,情况颇有争议。设计师将平面样式的 logo 转换为3D,反之亦然,力求使 logo 风格更加生动和简洁——后者对于旧版本的3D和假3D尤为典型。出于同样的原因,他们付出了很多努力来探索类似于3D的方向——等距艺术。它允许在视错觉、鲜艳的色彩、渐变、阴影和形状的帮助下获得大量图像。可能它看起来比3D更适用于标志设计——但时间会证明公司和客户会习惯什么。

最后

显然,2022年和2021年的标志设计趋势没有明确的界限。大多数处于巅峰的趋势已经伴随我们很长一段时间了。

但是,我们可以肯定地说,例如之前非常受欢迎的故障风格,不太可能成为本季标志设计的主角。在过去的几年里已经有很多这样的事情。动画标志也是如此,这是2021年最有希望的标志趋势之一。动画本身继续引起人们的兴趣,这是展示品牌的一种成功技术——但不幸的是,它并没有被证明是可行的。

最后,3D的命运也没有确定,我们还不能说3D或扁平风格的标志设计是否会成为一种趋势。我们已经写过,设计师的立场是模棱两可的,一个方向和另一个方向都有品牌重塑。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷 作者:对啊设计君
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

仪表盘设计的 7 个阶段

资深UI设计者

你知道仪表盘应该如何被设计,才能更符合用户需求、满足用户的使用期待吗?过于复杂的仪表盘设计可能是不可取的,在进行仪表盘设计前,你需要做好相应的规划和设计策略。本篇文章里,作者总结了仪表盘设计的七个阶段,一起来看一下。

一个看起来很酷炫的仪表盘可能有很多功能但实际上,它通常只是一个闪亮的玩具,而不是一个有用的工具。这些仪表盘类似于多臂机器人,能随机拖拽数据并将这些数据分门别类地整理在一起,让你目瞪口呆。

就像魔术师玩纸牌戏法一样,它看起来令人印象深刻,但它的大脑和巧夺天工的手法一样好。

([1] Widget:全称Web widget是一种Web2.0 的衍生物,它好像是一个小型的应用程式,是一小块可以在任意一个基于HTML的网页上执行代码构成的小部件。)

玩这个仪表盘机器人一开始可能很有趣,但最终会让客户失望,因为它没有达到用户的期望值。为什么会发生这种情况呢?设计一个工具而不是一个很快就会被丢弃的玩具的诀窍是什么呢?

一、构想仪表板:核心大脑 Conceiving the dashboard: the brain

让我们深入剖析仪表盘设计。

仪表盘是由客户、设计师和开发人员共同设计的,他们每个人通过合作做出一定的贡献,并且所有的基础功能在一开始就确定了(或者他们没标明)。

一个有思考能力的人是从胚胎发育而来的。脑细胞和神经细胞是最先形成的,随后是身体的其他细胞,而这正是任何可行项目被创建的方式。

第一个阶段是最重要的。如果你在这个阶段遗漏了什么,那么任何奇特的设计都无法挽救。因为在这一阶段你正在为仪表盘的长期发展奠定基础。“我为什么被设计出来?谁需要我?”如果仪表盘会说话的,它一定会问这些问题。你能回答这些问题吗?

  • 仪表盘将如何促进公司目标的达成?
  • 什么样的结构、功能和视觉效果能让仪表盘执行它的任务?
  • 哪种设计最适合你的目标受众?

这些问题的答案将构成你设计理念的基础(现在你可以告诉你的仪表盘存在的意义了)。

仪表盘设计的 7 个阶段

网页Perls仪表盘设计

1)仪表盘的“智能”是其实现目标的能力。

有些人认为只有分析类仪表盘才需要智能性能,而可操作的仪表板只需要可读性,实际上这个想法是错的。比方说,你有一个用于激励员工的操作类仪表盘,用户的注意力应该放在比较结果,然而设计师会让其在视觉效果上更加突出。

2)仪表盘上没有琐碎的细节。仪表盘上需要展示足够的信息使用户来做决定。设计师的职责是帮助用户,而不是通过一系列很酷的小微件来帮助用户解决难题。任何不是出于这个目的设计的都会阻碍用户使用。

3)从项目的初始阶段到最终阶段,设计师必须关注公司的目标、仪表盘的目标,和用户的目标。否则仪表盘将永远无法运行。

仪表盘设计的 7 个阶段

仪表盘设计:Clover

二、数据及关键绩效指标的选择:这属于血液循环系统 Data & KPI selection: the circulatory system

仪表盘的数据就像是身体内的循环血液。我们必须了解它们来自哪里,它们在被用户需要时是如何被处理的,以及它们该如何被可视化。

理所当然地,设计师需要了解指标的目的,显然,这将帮助他们选择合适的微件,但不仅仅只有这些。

举个例子,一个客户想在屏幕上看到许多不同的读数。你(作为设计师)并不需要从屏幕上去除任何东西来清理仪表盘的展示空间;但你可以做的是突出最重要的东西,并在视觉上淡化次要的内容。

然而,要做到这一点,你必须得知道哪个指标是最重要的且哪个是次要的。

仪表盘设计的 7 个阶段

仪表盘设计:Bidding Car

最重要的一系列指标有助于实现目标,且能帮助控制流程(或者产品),例如:

  • 它们展示实际的成功率;
  • 它们影响产品被感知的方式;
  • 它们激励创建该仪表盘的团队。

指标的选择还需要了解受众。用户应该看到哪个 KPI以及他们认为最容易理解的视觉表现形式?

人们喜欢对应他们目标的一系列数字。

仪表盘设计的 7 个阶段

仪表盘设计:Panch

三、仪表盘的结构:这类似于骨头 Dashboard structure: the skeleton

想象一下,你进入一家酒店房间,看到一张床、一面桌椅、一个镜子和一个衣柜,就算不打开壁橱,你也能猜到里面有什么,吹风机、拖鞋、浴巾就放在你所认为的地方——有人已经保证了这些。

一个好的仪表盘设计就如同那个房间:它是干净、整洁且可被预知的。你可以立即看到所有必需品,并且直观地知道剩下的东西会在哪里。设计师们有他们自己的工具来确保仪表盘设计的整洁性。

1. 层级

首先,你需要理清思路,在发挥创意之前,要对所有数据进行排序将其分类并充分理解优先级等等,确定用户可以立即看见的关键指标数据

1)视觉层级必须反应信息层级。

设计师可以通过微件的大小及位置来表现数据的层级权重。如果你的用户是从左往右阅读的,那么关键信息必须放在左上角,而相关性最弱的信息放在底部右下角。

对数据重要性的排序方法取决于仪表盘的设计用途。重要的是根据信息的优先级构造信息并搭建逻辑链路。

2)将信息面板视为一个故事,而不是一系列的数据点。

2. 网格

网格对于创建页面的总体布局排序协调和对齐元素非常有用。

仪表盘设计的 7 个阶段

3. 信息模块

系统的模块类似于一个住宅中的功能分区:卧室用来睡眠,餐厅用来吃饭之类,每个区域有其功能。你的舒适性取决于它们放置的位置有多方便。

一个糟糕的布局不能靠翻新和布置家具来挽救,因此与之相类似的,信息模块的布局需要被提前考虑。信息模块帮助你展示内容的层次结构且帮助你根据数据内容的重要性、相关性和逻辑连接对内容进行分组。每个模块应该在给定过程中执行特定的目的。

仪表盘设计的 7 个阶段

仪表盘设计的 7 个阶段

4. 连续性和接近性

如果你在去往厨房的路上需要穿过一个有两扇门的走廊,那么这是一个糟糕的室内布局。相互关联的进程则会假定在逻辑上也具有相似性。如果一个模块的进程需要来自另一个模块的数据,那么数据的布局就需要有近似性。

这一点必须事先考虑,这样用户就不需要在晦涩难懂的信息海里挖掘他们需要的信息。所有相关的信息应依据相似性,从最重要到最不重要性来进行分组和定位。

5. 分离模块

没有人需要一个与卧室相连的厨房。为了将两个区块分开,你需要留白或者负空间。你一定要在一开始就考虑到:将负空间视为视觉平衡所需要的设计元素组合

仪表盘设计的 7 个阶段

仪表盘设计:Wingle

四、功能:这就类似于身体的肌肉部分 Functions: the muscles

功能和工具的数量取决于仪表盘的用途和其用户的主要目标。为了自由地移动,人类需要两条腿,狗需要四条腿,而蜘蛛需要八条腿。一个拥有太多功能的仪表盘就像一条有着六条腿的狗一样优秀,但这有点让人毛骨悚然。

不要在控制面板上放太多工具,只需要在最表层放置用户必需品就好。太多的可用工具会让用户困惑且被吓退,因为这会让仪表盘看起来很复杂。个性化总是比定制要好。

仪表盘设计的 7 个阶段

仪表盘设计:Band

五、微件:重要的器官 Widgets: thevital organs

如果屏幕上有超过 5~7 个的小微件,人们则会难以理解其内容。所以我们(设计师)的工作是让相关数据可以被访问但数量保持一定,不过多,这样就能使用户能在数秒中理解他们看到的内容。视觉可视化的工具包括:

  • 表格
  • 图形
  • 图表
  • 卡片
  • 指标
  • 地图
  • 图片
  • 分组
  • 过滤器
  • 列表
  • 资料结构

仪表盘设计的 7 个阶段

仪表盘数据微件的选择取决于你仪表盘的目的和你的受众。请思考以下问题:

  • 哪一种微件最能展示特定的 KPI(关键绩效指标)?
  • 用户需要最先在仪表盘上看到什么?
  • 哪一种微件将会是用户最容易理解的?
  • 什么可以帮助用户更快地找到他们需要的东西?

请选择容易理解和可读的微件。这里有一个让人困惑的与最易理解的微件对比示例:‍‍‍‍‍‍‍‍‍

仪表盘设计的 7 个阶段

请考虑什么是主要的目标来吸引用户的注意力。

例如,如果你的首要任务是业绩目标,则应使用数字;如果你需要比较数值,则应使用折线图或者柱状图;如果是为了激励团队,则应使用具有亮点突出的排行榜。

选择一个不合适的部件或默认的小部件模板可能会混淆用户或导致他们误解数据。最好的解决方案总是分析和测试的结果。

仪表盘设计的 7 个阶段

最好的小部件设计是简约的并且易于阅读的

例如,一个 3D 图可能看起来令人印象深刻,但它占用了用户太多的注意力,最终证明它会分散用户的注意力。渐变、过度使用颜色和太多细节也同样会造成困扰。

六、视觉设计:通用技巧 Visual design: general tips

我们已经构建了仪表盘的大脑和身体。最后需要构建的是仪表盘的皮肤——最表面的一层。这可以根据好的经典设计的基本原则来完成,但这里仍然有些细节需要具体说明。

1. 简约性

一个仪表盘应该跟你喜欢的工作桌面一样干净:它只有必需的文件和工具,没有任何干扰项。

仪表盘设计的 7 个阶段

仪表盘设计:MEMO

2. 配色板

仪表盘的颜色选择必须服务于一个目的:尽可能清晰地呈现信息。你的配色板越大,就越难清晰地展示信息。所以不要在仪表盘上使用过多颜色。尽可能用相同颜色的深浅色或者不同的色相。

仪表盘设计的 7 个阶段

首选,你需要选择一个基础色,然后选择一个辅助色。每个颜色都必须有特定的用途。一个颜色可以用来结合/组合元素,另一种颜色可以用来强调元素。颜色还经常用来展示一个元素是主动的还是被动的。避免使用可能具有负面含义的颜色。

例如在下面的例子中,红色看上去像展示一些不好且不受欢迎的数据:

仪表盘设计的 7 个阶段

如果仪表盘提供可定制的颜色,请确保所有的可选颜色看上去都不错。Aodbe Color CC 是一个用来选择配色的优秀工具。

3. 强调

语义的强调之处应和视觉的强调之处一一对应。你可以使用颜色(对比、亮度)、形状、大小、负空间等等来强调元素。

4. 可读性和数字格式

这是确保视觉上清晰清楚的一切:干净的布局,视觉层级,突出重点,对比鲜明的元素,适当的字体,且这些字体也必须具有对比性和易读性

高精度的数字格式是难以让人理解的。最好的办法是将任何数字四舍五入,并减少较长的数字。

七、适应性 Adaptability

在实践过程中,当桌面版本是用户的优先选择时,则应该优先构建网页版,然后创建移动端的。如果你的目标受众主要使用移动端版本,则应首先着眼于构建移动端的仪表盘。然后再创建桌面端的。

仪表盘设计的 7 个阶段

仪表盘设计:Snap

八、结论 In conclusion

设计一个优先的仪表盘并不容易。我们将其创建过程类比作人类发展,因为它是记住重要东西和展示工作的连续阶段的好方法。当你在开发你的仪表盘,请不断地自我提问:是否一切各就其位、各司其职?是否有多余的部分吗(需要去掉)?各部位协作时工作正常吗?用户会喜欢这样的结果吗?这(功能)会有用吗?

如你所见,视觉设计实际上是设计师最后需要担心的事。如果你什么都没有漏过,你的仪表盘将对你的用户产生有价值的帮助,而不只是一个玩具。

本文翻译已获得作者的正式授权(授权截图如下)

仪表盘设计的 7 个阶段


文章来源:人人都是产品经理   作者:TCC翻译情报局


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


 


毛玻璃图标的设计教程

lanlanwork


1. 一定要注意识别度

其实我一直不敢使用毛玻璃效果的原因,就是害怕有识别度问题,其实网上现在有很多毛玻璃图标:

图片

做概念稿练习练习还好,如果真的落地肯定不行,太影响识别了。

为了不影响识别,我们可以有两个做法。

其一:就是毛玻璃的透明度别太低,像腾讯视频这种:

图片

这样不影响我们识别图形的轮廓。

其二,我们可以把图标主图形用颜色填充,毛玻璃的面积只是很小一部分,起到辅助作用即可,比如像喜马拉雅这种:

图片

这样整体的识别度也不会太受影响。

以上就是关于不影响识别的小方法。

 

2. 技法

毛玻璃图标大部分一共分三层,填充层、玻璃层,模糊层(模糊层是嵌入到玻璃层的)。

其中最重要的一个关键点就是,玻璃层其实是假的,并不是透明的,而是100%的填充色。

举个最简单的例子,我们先画一个深蓝色的填充层:

图片

然后加一个玻璃层,这个玻璃层不是透明的,而是100%填充色:

图片

那有同学就会问了,毛玻璃效果怎么产生呢?其实就是把下面的深蓝色圆复制一个进入到前面的玻璃层:

图片

有人又会问,这也没效果啊,对,因为复制进入玻璃层的圆形和后面的原型位置一摸一样,如果不做改变,就看不出变化,所以我们先来模糊下:

图片

区分的还是不够开,我们再降低透明度:

图片

这效果就立马出来了。

所以从技法层面来说,并不是很难,主要是要注意识别度和整体的设计感。(当然,这只是我个人制作的方法,可能别人也有其他的方式)。

 

3. 底色

前几天在群里看到一位星友问,说为什么他做的效果是第二个,而不是第一个那种透透的毛玻璃感觉:

图片

其实我在最开始做毛玻璃效果的时候和她遇到了一样的问题,这个问题产生的原因就是因为底色,现在的底色是黑色,一个玻璃放在黑色上面,透出来的颜色肯定是深灰色,而不是浅白色(除非你这块毛玻璃本来就是白色的)。

我在之前的一次练习时,做一个黑金配的的毛玻璃效果,最开始就做成了这个样子:

图片

总感觉有点奇怪,其实就是因为在黑色背景上,玻璃层的颜色用了白色,感觉没透过去,就感觉怪怪的,后来我把玻璃层的颜色变成深灰色:

图片

这样看起来就好多了。

制作的原理和刚才说的是一样的,先把大形画完:

图片

然后前面整一个玻璃层,选一个深灰色:

图片

然后把下面的形状复制一个剪切到玻璃层中:

图片

现在看不出效果是因为玻璃层里面的图形和后面的图形位置是一摸一样的,这时候我们把玻璃层的图形模糊:

图片

现在已经差不多区分出来了,如果想要更明显的区分,可以把透明度再降低一点:

图片

也还ok,当然,我觉得加不加透明度,还是看具体效果调整就可以了!

再强调下,大家在做毛玻璃的时候一定要注意背景色哦,不然可能就会看起来很奇怪。

 

总结

好了,以上就是我个人对于毛玻璃效果的一点总结,我个人还是比较喜欢一组毛玻璃图标是多色的,如果是一个颜色,比如这种:

图片

相对来说没那么耐看,如果是多色的:

图片

就会耐看很多,希望给大家一点启发,下期见,默默扔!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》好惨,我竟然被批评了,问我为什么不安排教程?我怕了

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

B端图标如何设计和应用

资深UI设计者


1.1 图标的主要类型


理解图标,首先关注的是图标本身的类型,在整个 UI 体系中,图标基本就分成3个大类:



工具图标:包含一定产品功能隐喻的简化抽象图形,代替文字节省界面空间,方便用户理解

装饰图标:主要目的是用来装饰界面的视觉元素,样式大于功能,常用于节日活动中

启动图标:产品的启动图标,即用来在系统中打开该产品的图形按钮,基本以自身 LOGO 为主


在 B 端项目中,应用最广泛的必然是工具图标,而装饰、启动图标却鲜有露面机会。但出现的少,不代表没有,解释工具图标前,我们先优先讲解下装饰和启动图标在什么情况下会出现。


其中,SAAS 类服务就有很多会重点强调品牌、情感化设计的案例,例如大家比较熟悉的阿里云和腾讯云。项目中就大量启用 3D 化的装饰图标提升界面的质感。



启动图标则会应用在一些比较大型的项目里,当项目出现了很多下级功能模块或类似插件的体系时,就会采取使用应用图标的方式作为入口。


比如 Figma 也是一个 B 端工具,它的插件列表中就可以看见不同的启动图标。还有类似 Slack、Invision、Teambition 等产品,一个庞大的产品生态就必然会衍生出强化不同子产品身份的需求,就自然而然会用到启动图标了。



最后,就是我们熟知的工具图标了,前两种图标,在前期画不好不要紧,毕竟这类规格的产品会有经验更丰富的设计或总监坐镇,新手当个切图仔即可……


但是工具图标,重要性就不言而喻了,B 端项目对工具图标的需求非常大,几乎每个组件中都会包含图标。



虽然今天网上有非常丰富的图标素材库,但在形式各异的 B 端项目里依旧是供不应求的,各种行业特有的功能、实物、隐喻,只能设计师自己完成。


B 端设计师在图标设计领域的主要工作,就是确定图标样式、设计图标、导出切图。下面的分享我们也会主要围绕工具图标展开。


1.2 B端工具图标的风格


工具图标的应用主要包含两个部分,线性图标和面性图标。



这里再提图标风格,不是把以前的知识点重新讲一遍,而是要强调 B 端图标的特殊性。和 C 端相比,B 端图标的实用属性更高,并不需要过多凸显本身的视觉风格。


所以,工具图标中,使用大量渐变、插画、投影的类型都要排除掉,它们对 99.9% 的项目都只会造成体验的负影响,不要被网上的追波风飞机稿给带偏。



适合 B 端项目的工具图标只要应用最基础的线性和面形风格即可,一定要划分出差异,应该只包含圆润、纤细、尖锐这几种。



很多人好奇线性和面形图标在 B 端设计中有什么使用上的差异呢?答案是没有差异。


线性和面形的使用,纯粹看设计师在当前场景判断哪个合适用哪个,只要保证对应图标风格统一即可。


不过如果遇到一些比较特殊的情况,比如要表现各类设备的复杂图标,那用线性的做法还是相对合适和简单一点。



1.3 图标的统一性规范


对 B 端设计来讲,独立设计图标的步骤是必不可少的,应该掌握的图标规范还是必须要懂的。


我们虽然没有 C 端那么多风格和技法的拖累,但想画好 B 端图标却多出了其它难点,那就是一个页面中出现的图标实在是太多了。



这就引发了我们要讲的第一个规范要点 —— “统一性”,所有同规格类型图标具有一致性的特征,这些特征包含了:

  • 粗细一致:首先使用统一的描边、线段粗细参数

  • 圆角一致:使用一致的圆角数值,不要一下尖角一下圆角

  • 透视一致:使用接近的透视角度,不要有的侧视有的正视图

  • 大小一致:视觉的大小保持一致,有均衡的大小感受


如果不能保证统一性的基本要求,那么整个页面看起来就会非常的廉价、业余。很多新手处理 B 端项目就是应用了多套素材库图标,它们的细节完全不一样,统一性当然无从谈起。


而让整套图标保持统一性,是相当有难度的,其中最难的一点,就是如何让一套图标的大小均衡。虽然我们要对每套图标确定一个固定的尺寸,但不代表图标实际图形的长宽数值是完全一致的。


几何图形对视觉有一定的欺骗性,有不同的大小体验,比如下方案例(鱿鱼游戏乱入?):



所以,基于这样的特性,每个图标本身都包含了两层属性,图标的占位尺寸和视觉尺寸。占位尺寸指它在界面中的实际占地大小,是透明白的,排版的时候以这个尺寸作为实际的边缘来测量。



而视觉尺寸,则是在占位尺寸下图标图形的实际大小,这个大小是带给我们实际视觉感受的部分。一套图标的不同图形必然视觉尺寸是各不相同的,我们用占位尺寸包裹它们来方便我们进行统一的应用。



所以,使用成熟的图标素材必然会发现图形周边还会有透明的空白区域。当然,不同的素材,这个留白也是有区别的,下一个小节就会解释。


最后要声明一点,一套项目中可以包含多个规格(2-5个)的工具图标,比如导航用的图标比普通工具图标更复杂一点,设计师只要保证每种规格保持的统一性即可。


1.4 图标的栅格系统


图标越多,大小的控制越困难,所以专业的图标库绘制就必然会应用图标的栅格系统进行辅助。


在 Ant 的体系中,一个基于栅格的图标实际包含3层,背景层、格线层、图形层。



背景层,即图标展位尺寸,需要先确定出这个元素的大小,然后才是里面的绘制区域。通常,栅格系统会为边缘预留 1-4 像素的内边距(出血位),正所谓四周留一线,日后好相见。


格线层,则是使用的栅格线段,也是最重要的部分。格线层通常由 4 个基本图形构成,包含正方形、圆形、水平长方形、垂直长方形。


这四个图形的长宽大小不一,原因是为了对应几何图形视觉尺寸不同的特征。把它们并列排列,就可以发现它们的视觉大小非常接近。



这些格线的作用,就是提前帮我们确定好视觉比例,帮助我们快速绘制相同图形类型的图标。



但是,不是完美符合这四个图形要求的图标该怎么办,总不能格线把所有轮廓都给你实现出来吧?


格线的另一层作用,也就是最重要的作用,其实是一个用来做测量的工具,而不是轮廓依据。在几何视觉差中,最基础的大小原理是占用面积越大的图形,尺寸感受越大。所以,长宽一致的正方形大于圆形,圆大于三角形。


所以当我们绘制的非常规图形,和类似格线进行对比时,长宽缺少的一侧,就要由另一侧增加数值来填补它的面积。


比如下图 Ant 官方的电脑图标,它的宽是横向矩形,但是中间区域面积较小,所以增加了高度进行平衡。



再看一些其它的案例



这一步没有固定的参数使用技巧,设计师需要将完成的图标置入到其它图标旁边进行调试,确保尺寸是合适的。

格线只是一个图标大小设置的参考工具,一切以最终效果为标准。





理解完图标的基本规范,就到图标的使用逻辑了,解决一些常见的设置误区。


2.1 图标应该做多大

图标该做多大的,这是目前被问到最多的问题。本来应该是非常简单的一件事,但很多工作多年的设计师也搞不清楚。


仔细捋了捋,罪魁祸首就是 AntDesign 这套规范中对图标画布的解释了。



要重点强调,Ant 设计图标的意图,和一般项目的是完全不同的。Ant 作为一套庞大的开源项目,它的图标核心特征之一就是 —— 适应性


这些图标要被应用到各种不同的设备、显示器、系统中,图标尺寸会用多大,在几倍图环境显示全都是不确定的。所以图标一开始按越大的规格完成,后续实际应用中的缩放、匹配也就越容易,适应性越高。


但是,在我们自己的项目中,这种做法是完全没有必要的,1024 图标的负面影响包含:

  • 像素数过多使得数值的制定难度大大提升,不管是元素尺寸还是描边粗细

  • 矢量图形源文件进行缩放很容易发生错位,提前轮廓化会破坏源文件

  • 缩放图标后描边的数值往往会出现非整数和 0.5 的状态,虚边问题严重


在常规项目里,一套项目是可以包含不同尺寸和规格的图标的,而不是我们做一套相同风格的图标在整个应用中无差别使用。


这也意味着,每个图标在产品中的使用场景通常只有一个尺寸,不需要去面临缩放的情况。即使需要缩放,也只是这套图标中的少数几个需要,或者相对特殊的项目。


所以,图标尺寸设定,就是根据当前位置合适的尺寸来制定。可以使用素材在已经设计好的布局中尝试多大的数值合适,然后创建同样的数值即可(尽量以4的倍数为标准)。



2.2 素材的正确使用方法


我们知道图标的素材非常丰富,不管是 Iconfont、IconPark 还是 Iconsearch 等网站,都提供了海量的素材。但是只要稍微专业点的项目,往往素材库都满足不了,部分规格的图标还是需要我们自己重新绘制。


所以说图标素材就完全没用了吗?当然不是。


图标的正确用法是作为一种快速试错的参照物,它可以帮助我们实现:

  • 参考图标的具体尺寸在哪个数值最合理

  • 参考当前场景使用面性还是线性的风格更合理

  • 参考图标的设计风格是圆还是尖锐更合理

  • 参考相关隐喻的图形样式哪种更合理


在项目的界面设计阶段,我们一向建议优先使用外部的素材,尤其是 IconPark 这种比较统一,还可以快速调节图标样式的工具网站。



这个过程即使素材找不到和寓意一致的也没关系,用相近的图标替代就可以。等到页面布局基本完成以后,最后再集中精力对需要绘制的图标重画一遍(甚至是在开发阶段绘制)。


通过别人的图标来快速匹配尺寸、风格、样式,会帮助我们节省非常多的时间,也有助于我们设计出更专业、美观的图标。


另外,就是针对项目一些偏小尺寸的通用图标,就可以比较放心的应用素材,例如翻页的左右、更多、下拉、搜索等等。



2.3 图标的色彩和状态


图标的尺寸、样式都确定了,最后就是关于图标的色彩和不同状态的制定了。


前面讲过,B 端项目对图标的装饰属性没有那么迫切,所以正常情况下,太花哨的图标是要尽量避免的。彩色、渐变色、投影,都不应该在这个情况下胡乱使用。


常规的图标只要使用中性色即可,而需要特别对待的图标,色彩可以从主色或者辅助色中选取。比如需要高亮显示的打勾或者打岔。


当然,如果项目涉及到一些特殊的工具图标,类似工厂、工业领域表达实体设备的拟物图标,可以打破这个原则。但是,同样避免这套拟物图标的每个图标用色不同,尽量只使用 3 种以内的颜色完成拟物的填色。



同时色彩的使用还有一个重要的意义就是对图标不同状态的呈现,部分图标会承担按钮的功能,包含默认、选中两个基本状态。


普通权重的图标,未选中状态可以在默认色彩基础上使用透明度来实现。



高权重的图标,则可以在选中的状态替换色彩,或者更改图标的类型,将原本的线性更改成面形并填充色彩制造反差。





完成所有图标的设计以后,最后一步就是切图和导出了,这决定你的图标能不能被正确运用到线上项目中。


3.1 图标的收纳和命名


在一套专业的 B 端项目中,已经设计好的图标是设计规范的 “资产” 内容之一。图标的文件不能散落在项目的各个界面里,而是在规范页面中有统一的整理和收纳。



这种做法的流程是,先在软件的规范库中创建对应的图标组件( Symbol / Compoent ),然后再在具体页面中应用,方便后续的统一管理和修改。


而在这个过程中,我们也需要对图标有正确的命名方法,来确保团队调用、检索图标的效率。通常,我的图标命名规范如下:

尺寸 / 类型 / 图标名-状态


示例:

48px/导航图标/表盘页-默认

24px/一般图标/搜索-默认


“/” 号的引用主要是方便软件中对组件层级进行划分,而我调用图标的规则势必是先从尺寸开始,再选择对应规格,最后类型和状态。


提前命名也是方便后续我们切图和导出,但要提及一点,图标的命名不要追求英文化,因为我们的词汇量不可能实现正式的英文命名规则,只会写一堆大家都看不懂的单词。


而开发在使用我们的图标切图时,也不会用我们之前取的命名,会根据自己的命名习惯重新命一遍,写个让他能看懂的名字远比用乱七八糟的英文强


3.2 图标的切图格式


接下来,就要解释切图的规则了。很多没有经验的设计师切图就只是随手加个切片,然后上传蓝湖发给开发自生自灭了,这是一个非常不合理的操作。


再或者,强行使用 Fonticon 格式,而不管实际情况如何,造成最后实现效果完全不同步或实现不了。


切图是通过前端调用并在浏览器中进行显示的图形,而要被浏览器正常显示,就有必要了解适合使用的切图格式。


图片的格式包含位图和矢量两种,位图是通过记录像素色值的图形格式,假设一张图是 100*100 像素,那么记录 1W 个像素点的色彩,所以无法支持无损缩放。而矢量则是通过记录点线面的坐标绘制出显示图形的格式,可以支持自由缩放。


理论上,矢量格式是最佳的图标切图格式,但是它的限制同样有很多,例如:

  • 无法记录渐变色

  • 导出轮廓容易有错误

  • 无法记录拟物图形

  • 无法记录投影元素


前面说过,普通项目中同一图标是很少出现一会儿大一会儿小的需求,所以矢量最大的特征无损缩放,往往就不需要我们去考虑。矢量格式切图的主要出发点是用来应对移动端显示器 1x、2x、3x、4x 等不同倍率缩放的问题,而不是网页端的基本使用。



当一套项目中出现了矢量格式无法覆盖的图标时,那么即用矢量切图,又用位图,就会显得非常的混乱。只有类似 LOGO 等图形元素,才需要考虑 SVG 格式,而不是一看到图标就上。


所以,最适合切图的格式就是位图的 PNG 格式,一方面它是无损的,另一方面它支持透明背景,在切图应用上可以完美和设计稿结合,而这是其它大多数位图格式不具备的特征。


当每次项目完成以后,并不需要通过蓝湖来实现切图的导出,如果切图文件分散在各个项目页面里,那么一定会有很多图标被遗漏,尤其是图标的不同状态切图。


所以,最理想的切图形式,就是将所有图标完成整理和命名以后,一起框选,然后导出成 PNG 格式,再同步给程序员即可。






以上就是关于 B 端图标应用的所有知识点了。后续会将这些内容进行分拆,更新到原子核系列课程中去,会有更细节的案例说明。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷 作者:酸梅干超人
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


如何选择合适的图标?来看这份图标类型和风格汇总

ui设计分享达人

常见的分类是简单的线性分类,缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。


大家好,我是Clippp。看到好的图标我们会习惯性地截图保存,但随着收集的图标越来越多,会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题!

一、定义图标类型

对图标进行分类时,普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标,样式很简单,但可以划分到多个类别中。

面对这样的问题,推荐使用系统性的结构来划分图标类别: 
  • 首先将图标按尺寸大小分为两类;

  • 继续细分对应的面性、线性、线面结合、扁平、拟物化等类型;

  • 最后选择标准、容器、渐变、3D、手绘、阴影等风格。

利用这种结构层级,可以明确定义图标类别。

二、图标尺寸

图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷,但把它缩小到16px,这些酷炫的效果都无法呈现出来。

在对图标归类时,首先要考虑图标用在什么位置需要多大尺寸。这里将图标分为两大类: 
  • 大尺寸图标通常指标志性图标,例如App启动图标或代表品牌形象; 
  • 小尺寸图标用作UI控件,起到引导功能或装饰目的。

三、图标类型

确定图标尺寸后,进一步细分图标类型: 
面性图标 
线性图标 
线面结合图标 
扁平化图标 
拟物化图标 


利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中,所以在小图标分类中没有展示。

四、图标组成


图标尺寸越小,展示的细节越有限。相比于大图标,小图标的尺寸有一定局限性,图标组成包括 标准和容器两种。 


大图标利用尺寸上的优势能展示更多内容,分为多种组成形式。

五、小尺寸图标样式


简单的图像可以更具包容性。图标的尺寸越小,越考验设计师传达信息的能力。 

1.面性图标

1.1标准面性图标

面性图标易识别,适合应用在小尺寸图标中。 
关键点:
确保图标有清晰的边缘,避免羽化; 
图标复杂程度随着尺寸变小而灵活调整。 

1.2带有背景色的面性图标

彩色背景为简约设计带来了更多可能。通过这个技巧使面性图标更友好,更具吸引力。 
关键点:
为背景选择4-12种颜色。 
考虑图标是浅色还是深色,是否适用于所有背景色。 
在彩色背景上使用白色图标比黑色效果更好。 

2.线性图标

2.1标准线性图标

线性图标因为简洁性和现代性而受到用户的欢迎。随着屏显越来越清晰,我们可以更加大胆地使用线性图标。 
关键点:
确保轮廓像素清晰。 
越简单越好。 
追求更简单的细节。 

2.2双色线性图标

设计小尺寸图标时,必须放弃细节并强调简单的形状。但当使用一种颜色效果不太理想时,可以考虑添加一些颜色。 
关键点:
使用两种搭配和谐的颜色。 
考虑将一种颜色用于主要形状,另一种颜色用于细节。 
少即是多。 
使用粗线条。 

3.线面结合图标

线面结合拥有更多细节,提升用户的愉悦感。 
关键点:
最好使用深色而不是纯黑色描边。 
限制图标的颜色种类。 
避免过多细节。 

 4.扁平化图标 

扁平化图标既简单又巧妙,表达品牌形象的同时具有丰富的内涵。 
关键点:
避免在<20px的尺寸中使用此图标样式。 
选择2-3种颜色,可以一起使用。 
一种颜色为主色,另一种颜色应为高光/细节色。 

六、大尺寸图标样式

大尺寸图标在界面中使用较少,更多用于产品标识或品牌宣传。 

 1.线性图标 

1.1标准线性图标

在设计任何图标前,都可以先创建一个线性轮廓,确保形状看起来足够美观后再添加颜色。 
关键点:
这类图标最容易制作。 
避免出现轮廓羽化。 
线条粗细要一致。 
不要害怕添加细节。 

1.2渐变线性图标

添加一些渐变能让原本单一的线性图标赋予更多的个性。 
关键点:
在小尺寸图标中添加渐变会降低图标的可视性。 
选择渐变时,首先考虑邻近色。 
线条越粗,渐变越明显。 
线条细节越多,渐变越明显。 

1.3等距线性图标

2.5D图标做起来会花费很多时间,但效果会很好。在设计汽车、房屋、家具等实体产品时,建议优先使用2.5D图标。 
关键点:
同一组图标要使用相同的等轴测网格。 
2.5D等轴图标很复杂,在较小的尺寸下会失去作用。 
如果可以,让所有图标都朝向同一个方向。 

1.4手绘线性图标

随着设计趋势向简约化、扁平化发展,很多设计师丧失了手绘图标的能力。实际上手绘图标让品牌更真实甚至更有趣。 
关键点:
手绘图标扫描后,再用数字方式重新绘制,这样可以保证线条粗细一致。 
尽量让所有的线条保持相同的颜色,这会使文件更小。 

1.5断线图标

标准的线性图标看起来可能会很单调,而简单灵活的断线处理能为图标增加更多个性。 
关键点:
断线粗细应该相同。 
图标的中断次数尽可能保持一致。 

1.6双色线性图标

关键点:
确保两种颜色具有相同的对比度,否则可能会导致用户看不清其中一种颜色,因此无法识别完整的图标。例如左下角的浅绿色对于视力弱的用户来说就很不友好。 

2.线面结合图标

线面结合图标可以看作是添加颜色后的线性图标。线面结合具有很强的轮廓,让图标能够清晰可见。 
2.1标准线面结合图标

关键点:
使用有限的颜色和统一的线条风格,使图标具有品牌性。 
使用线条和点来添加更多细节。 
避免使用纯黑色描边。 

2.2带有背景色的线面结合图标

关键点:
描边断开时,图标效果很更好。 
避免在小尺寸时使用。 
使用有限的调色板。 
考虑使用较浅的描边/背景色。 
考虑在图标下方添加一条水平线,使图形具有相同的位置(中间的图标示例) 

2.3错位线面结合图标

当填充色与描边错位时,颜色移到右边图标左上角留出高光,带来一种清新的感觉。 
关键点:
考虑使用断线描边。 
使用有限的调色板。 
确保描边和填充色简单且一致。 

2.4色块图标

这种风格的图标的特点在于并不依赖于颜色,仅将其用于装饰。 
关键点:
选择有限的调色板。 
先关注轮廓再关注颜色,颜色仅用于装饰。 
避免形状色和背景色过于相似,降低可见度。 

2.4单色线面结合图标

关键点:
避免使用暖色调尤其是红色,会让用户感到压抑。 
首先确定合适的描边颜色,再考虑填充色。 

 3.扁平化图标 

扁平化图标通常没有描边,主要使用形状和颜色来完成组合搭配。简洁、友好和适当的细节,让这类图标非常具有吸引力。 
3.1标准扁平化图标

关键点:
使用柔和的调色板,避免明亮的颜色。 
分清简化和添加细节之间的界限。 

3.2带有容器的扁平化图标

尝试让图形打破容器,带来动态的感觉。 
关键点:
尝试让图形从容器中凸出来,以增加深度。 
因为在容器中,可以添加更多的细节而不用担心图形变得混乱。 
尝试使用正方形、椭圆形或与品牌相关的容器形状。 

3.3等距图标

关键点:
保持所有图标朝向同一方向。 
选择恰当的调色板能让图标看起来更一致。 
避免小尺寸使用。 

3.4半阴影扁平图标

半阴影图标是在扁平图标的基础上添加半色调阴影,得到更具个性的图标。 
关键点:
小尺寸图标不起作用。 
使用有限的调色板。 
确保所有的图标色调相似。 

3.5长阴影扁平图标

当图标位于容器中时,可以考虑添加长阴影,主要包括纯色阴影和渐变阴影两种类型。 
关键点:
使容器具有相同的颜色或类似的色调。 
只在大尺寸图标中使用。 
将半阴影与长阴影组合使用效果更好。 

 4.拟物化图标 

拟物化图标实际上已经包含了大部分的样式,例如它们是立体的,有丰富的渐变和阴影。 

这种风格的图标看起来与现实生活中的图标尽可能类似,让用户感到更舒适。 
关键点:
考虑添加底部阴影。 
使光源来自同一方向。 
确保图标都朝向相同的方向。 
目前绝大多数界面不在有这种风格的图标,可以考虑使用3D建模来实现这种效果。 

总结

希望大家能对图标的分类及设计有更全面深入的认识,从而构建一套完整的图标思维体系。

文章来源:站酷  作者:Clippp
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


一个ICON设计过程的价值挖掘

资深UI设计者

每一个设计需求的背后都必然有其商业逻辑在里面,所以在拿到设计需求后,尝试多去问几个为什么。有什么样的商业目标?为什么做这个功能?用户是谁...当你琢磨清楚这些之后,并以此为出发点的设计方案,必然是有据可依、有说服力的,多角度的参与产品设计也更能体现设计师的价值、培养全局观。


商业目标是个大方向,有了目标就会产生解决方案(需求),当然方案可能不只是一种类型(可能是APP、网站、宣传H5或宣传海报等),设计师负责的去做的可能只是其中的一种。


以我参与过的冬奥会某冰雪 APP TAB 栏的 ICON 风格设计为例:


01

业务沟通,商业目标分析,明确设计目标


这个阶段一定要多去沟通、沟通、再沟通,如果是产品公司,那么需要去和产品、研发、市场等多部门沟通;如果是外包项目,那么就需要和客户多次沟通。退而求其次,也要和负责该项目的直属领导多去沟通,以求更精准的了解商业目标,最终明确设计目标,从而为接下来的设计创意设计指明方向。



该项目为二次设计外包项目,着手出图之前,我和该项目负责人、项目小组成员多次深入的讨论了甲方为了什么目的去做?从而确认了商业目标:“传播冰雪文化,激发人们对冬季运动的兴趣和热情”。


这是个大方向,接下来去考虑用什么形式承载,可能是常见的APP、网站、小程序...(这个形式还需要考虑下目标用户的使用习惯)。以及更具体的有哪些内容分类、个性化主题设计、互动形式等。


最终,该项目负责人决定采取安全策略(作为项目负责人,对投入产出比等全局性因素的考量是极其重要的),先做一款内容型APP,内容分类借鉴、提炼几款APP的精华,暂不考虑独创功能。


虽然有时候结果未必和自己期待的一致,但积极去参与的过程是应该的。。



知晓了商业目标和产品内容,接下来就有方向了。我将设计目标定为:将设计与“水凝化冰、冰积成雪”的物理现象相结合,体现冰雪主旨,烘托冬季竞技氛围。



02

创意分析,设计推演


这个阶段重点在于说服力,或许关系到客户是否买单。由于是内容型产品,内容结构上和其它APP并无太大区别,那么客户会不会想:你们是不是抄了一个软件,改了改就发给我了。。基于此,我在设计创意推演前,做了内容分类由来的分析。


人类接受信息的三种方式:视觉、听觉、触觉,对用户传达冰雪文化采用这三种手段,规划APP内容,视觉:图文资讯、视觉画面;听觉:音视频、直播;触觉:榜单、互动等。



借用“水凝化冰,冰积成雪”物理现象,结合基因创意法,对 ICON 进行设计推演,紧扣冰雪主旨。



通过品牌LOGO取色法,提炼 ICON 配色。



03

设计执行


到了这个阶段,基本的设计思路应该是比较清晰了,剩下的细节打磨就可以自由发挥了。



至此,一个ICON的设计已完成。该过程的最大价值在于:帮助项目理清了整个项目的核心价值、创意思路与设计提案思路,甚至可以由此推测到未来产品的功能规划方向,当然最重要的是协助项目负责人成功拿下了项目。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷   作者:空白思维

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


这6种类型的菜单图标和用法

资深UI设计者

一个简单的汉堡菜单就可以包括多种不同的样式,可能有的样式甚至没有官方的名称,但因为样式的差异在功能上这些菜单也会出现差异性。

我们可以通过分析这些样式,来思考不同的样式代表着怎样的设计含义和设计目的,不能因为简单常见而忽视了功能的内核。

汉堡菜单

这6种类型的菜单图标和用法,这篇全总结了!

关键词:横条、多个菜单选项

这个图标的样式简洁易懂,通常位于网页和 App 的上下角,用来告知用户这个按钮之外还有更多内容可以探索。

当产品有多个菜单选项时,考虑使用汉堡图标来显示,但尽可能避免在桌面视图中使用。

垂直三点式菜单

这6种类型的菜单图标和用法,这篇全总结了!

关键词:垂直、内嵌菜单

通常位于屏幕或窗口的右上角或顶部,是用于打开带有附加选项的图标,打开的内容往往是一个较小的内嵌菜单而不是整个全新的页面。

水平三点式菜单

这6种类型的菜单图标和用法,这篇全总结了!

关键词:水平、内嵌菜单、web

水平三点式菜单同样常位于屏幕或窗口的右上角,用于打开菜单或显示相关项的操作。

因为图标样式是水平的,所以更容易在 web 上或者在表格等水平方向中使用。

九宫格菜单

这6种类型的菜单图标和用法,这篇全总结了!

关键词:子分类、子功能

九宫格菜单通常用于打开同一产品中包含不同子产品或子功能,可以在它们之间快速切换,此图标常位于产品主页的右上角。

过滤式菜单

这6种类型的菜单图标和用法,这篇全总结了!

关键词:过滤、排序

过滤式菜单由三行不同长度的线段水平叠放而成,是最广泛使用的过滤符号。可以将过滤式菜单与“排序方式”选项结合使用,或者与全局过滤器结合使用。

汉堡菜单变体

这6种类型的菜单图标和用法,这篇全总结了!

关键词:样式特殊、时尚感更强

作为汉堡图标的替代品,与显示列表菜单的目的相同吗,但是这些样式我们平常见的可能会比较少,更常用在充满现代感、时尚感和艺术感的网站上。

这6种类型的菜单图标和用法,这篇全总结了!

最后

不同的样式可能代表着截然不同的设计目的,常思考这些小而精的细节,是保证产品体验提升的关键。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设   作者:Clip设计夹

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



版式设计没思维?这样做让你事半功倍!

周周


再过几天就又双叒叕到「双十一」了,身边的许多朋友已经开始忙着囤优惠券,找链接了,而做为「设计“狮”」的我却还在连夜赶着各大品牌和公司的「宣传海报」,整天埋在做图—改图—再做图的循环中,不知道各位设计大大们最近的生活是不是也跟我一样呢。

版式设计没思维?这样做让你事半功倍!

好了,在开始今天的干货分享之前,我想先请大家一起来看几张海报:

版式设计没思维?这样做让你事半功倍!

看完之后,大家有没发现这几张海报有什么特点呢?

没错,他们的共同之处就在于,虽有通篇的文字,但画面依旧充满着空间结构感、层次感,而辅助图形的运用更是起到了点睛之笔的作用,给人眼前一亮的感觉。想必有的小伙伴肯定在思考,这是为什么呢?

版式设计,对,就是「版式设计」。

相信大家都曾有过,熬了一整晚,好不容易设计出几个画面的元素,结果看着一大堆的文字和图片,心中顿时思绪万千,脑海中却一片茫然,折腾来折腾去,还是不知道该如何排版才好的经历。

版式设计没思维?这样做让你事半功倍!

在当今这个高速发展的时代,无论是纸质媒体还是新媒体,信息的传播都离不开版式设计,一副好的版式设计作品,可以在有限的页面内,以最快速、最直接、最有效的方式传递出核心的内容和信息,并让读者和受众留下深刻而良好的印象。

所以,今天我就给大家分享一些版式设计知识,希望可以带给你些许灵感,帮助你早日做出爆款的设计作品~

曾在一本版式设计书上看到其对板式设计是这样定义的:“版式设计既版面编排,就是把特定的视觉信息要素,根据主题表达的要求在特定的版面上进行的一种编辑和安排。”

即排版并不是指简单的「东拼西凑」,而是需要经过合理化的对照排列整合,以此传递出高效的信息和特性差异的画面。

对比与突出

对比又称为「对照」,即把具有明显差异和矛盾的视觉元素配置在一起,碰撞出特性差异的现象,从而使主题更加的突出,视觉效果更加跳跃。具体又分为大小对比、粗细对比、虚实对比、主次对比等。通过利用不同方向、大小、粗细的字体重新排列整合,以突显出画面的主次信息,正如下面的几张海报。

版式设计没思维?这样做让你事半功倍!

△ 图一:大小对比

版式设计没思维?这样做让你事半功倍!

△ 图二:虚实对比

版式设计没思维?这样做让你事半功倍!

△ 图三:主次对比

字体的协调与统一

文字作为「语言符号」,无论在何种视觉媒体中都直接影响版式的视觉效果,在提高作品诉求力的同时也赋予了版面审美的价值观。在选用字体时,我们应当依据设计风格来决定,不同风格的作品,选择不同的字体形式。而协调则是指画面内在的东西,元素、字体配合得适度和恰当。即说明他们内在相似的东西或状态,以达到画面相统一的风格。

版式设计没思维?这样做让你事半功倍!

△ 图四:风格统一

版式设计没思维?这样做让你事半功倍!

△ 图五:颜色统一

版式设计没思维?这样做让你事半功倍!

△ 图六:元素统一

构成与比例分配

版式设计有很多种的构成方式和方法,一切美的东西皆有规律,三分法、白银比例、黄金比例就是其中的代表。

三分法(1:2)即「井字构图法」,是日常生活中最常见的一种构图手法,通过将视觉重心或者最吸引人的东西靠近四条线的相交处,使「画面和谐」的同时,也达到了「突显主体」的目的。

版式设计没思维?这样做让你事半功倍!

△ 图七:三分法

白银比例(1:1.414),也是在排版设计中最为常见的比例,给人一种「安稳恬静」,「惬意」的感觉。

版式设计没思维?这样做让你事半功倍!

△ 图八:白银比例

相对于其他比例而言,黄金比例(1:1.618)则显得更加突出,正如它的名字,常常给人一种「恰到好处」、「自然」的感觉、无论是在LOGO设计中、还是排版设计、抑或是摄影中,灵活的运用黄金比例,都能够带来不错的效果。

版式设计没思维?这样做让你事半功倍!

△ 图九:黄金比例

怎么样,看完之后,有没有找到一些灵感呢


文章来源:优设网    作者:艺海拾贝Design


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




搞懂这7个图标设计原则,你就能像专业图标设计师一样

周周


编者按:设计原则总是看起来简单抽象不言自明的,但是在细分的设计领域,这些原则其实有着各自不同适用情况,有着「特定的条件」。图标设计,就是如此。今天的这篇文章,来自专业的图标设计师 Helena Zhang,她结合自己制作 Phosphor 系列图标的经验,来分享她对于图标设计原则的理解。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

这些设计原则就像一份清晰的设计框架,或者设计自查表单一样,帮你规避设计陷阱,让你的设计成果更加出色。

创建高质量系列图标,你得使用一套周到系统的方法,需要有训练有素的双眼,大量的迭代学习,以及坚持实践,才能做到。下面,我将结合7项设计原则,和大量的实际案例,来为你详细说明,如何创建高质量的图标。

掌握这些设计原则,就是创造出优质图标的关键。

1、清晰

图标存在的目的,是快速传达概念。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

下图是 Prius Prime 仪表板上的图标。

在这一系列符号当中,你能明白其中哪些的含义?对于这款车的驾驶者而言,可能会随着使用时间的积累,逐渐明白其中一部分图标的含义。很大程度上,这是因为这些图标本身并不直观。你可能需要对着说明书,才能明白它们各自的含义。

我们可以从下面看到,图标是怎么一步步变得难以识别的:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

当图标开始使用我们不熟悉的含义和隐喻时候,它就自然变得难以理解。从左往右数第三个图标,是安全带的提示灯图标,当它亮起的时候,意味着你没有系好安全带。这个含义相对直观,你可能能够很快掌握。而最右边的这个「电动助力转向系统警告灯」含义就非常模糊了。

通常,不清晰的图标设计会让你感到沮丧,但是对于开车的人而言,含义模糊的图标意味着误解,而误解的结果可能是生命安全。

下面是我们更为熟悉的图标——喜爱、警告、音乐和向上。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

上图为 Phosphor Carbon 中的图标

向上的箭头在很多场景当中,都是非常清晰、实用的符号。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

纽约地铁中的标识

最成功的图标设计,不仅仅是让图标本身易于理解,而且对于不同的文化背景、不同年龄段、不同知识背景的人都能理解,只有做到这样才行。

如果你想要表达的信息过于抽象,那么单独使用图标,可能不是最清晰的解决方案,应当将图标和文本标签结合起来使用。

2、可读性

有了易于理解的图标之后,你需要确保它的可读性足够强。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Icons in the Amtrak mobile app

由于细节太过精细,很难让 Amtrak 的图标被清晰地感知到。

Transit 应用图标也有相同的问题。它们的剪贴板这个图标中的细节很难看清:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Icons in the Transit mobile app

稍加调整之后,好了很多:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Adjusted clipboard icon

当你在处理图标中多个不同的图形元素的时候,应该确保其中的空间留足。太细小的笔触细节、更多的信息量会让图标显得更加难以阅读。

Google Maps 的公交车图标就非常的出色——它看起来足够小,但是可读性也很强。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Google Map icons

3、对齐

确保每个图标都感觉平衡,尽量进行视觉对齐

不平衡的播放图标

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Unbalanced play icon

在这个播放图标当中,尽管三角形被放置在中间位置,但是它并没有视觉对齐,我们的眼睛看到的时候,会觉得中间的三角形说向左靠的。三角形靠左的这一边在视觉上更重,因此它应该向右移动一点来确保平衡。

就像字体排版设计师,他们也经常会微调文字的布局来确保视觉平衡。比如字母 i 和 j 顶上的小圆点会偏移,而字母 O 的上下部分则为稍微超出边界,来确保字体的平衡。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

设计的时候,适当的微调就能达到平衡的效果。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Balanced play icon

明显更好了。

要点:不要单纯的相信数据,要用你的双眼来进行检查和修正。

4、简洁

用尽可能少的词汇来进行表达和描述,这样会更加优雅高效。

「将你所学的知识分享出去,可以增强你对于这门学科的理解。」

Material Design 在他们的导视系统中,使用的图标大都足够简洁,他们善用图标而是说话:

这是一个复杂的船的图标:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

它还有更为简约的版本:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Succinct boat icon (Source: Material)

简洁是图标设计的精髓之一,因为我们经常需要在很小的屏幕上操作,图标可以传达很多信息,而不同文本或者其他复杂的内容。

在用户界面当中,简约准确的设计风格能够凸显重点,让内容发挥效用。Telegram 的图标设计,就非常的简约有趣:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Telegram icons

有的时候,UI图标会选用更偏向插画风的样式。下面这些关于美食的图标就设计得非常令人愉悦,代表泰国菜的图标中,虾的描绘就非常传神:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Yelp icons by Scott Tusk

图标可以适用于各种不同的硬件平台,手机、 电脑、平板,适当的信息量意意味着设计师可以在色彩、层次纵深上,有更大的操作空间。因为图标本身会应用于特定的APP 或者网站当中,因此图标可以适时地凸显品牌和产品特征。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

iOS 平台上的 Procreate 、火狐和 Netflix 的图标

5、一致性

为了让图标家族显得更加和谐,始终保证相同的样式和设计规则

在 iOS 13 之前,苹果的图标设计有着各种不同的粗细笔触,不同的填充样式,大小也各不相同:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

仔细看看这套图标,是不是有的图标看起来比其他的更重?

任何图标都有着相应的视觉重量。而视觉重量取决于图标笔触的粗细、填充模式、大小和形状这几个属性。而图标设计的难点就在于,如何控制所有的这些参数,做到整体的一致性。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

苹果公司最近引入了 SF Symbols 这个功能,将图标直接制作成为图标字体,在这套字体当中,图标有 9 种不同的「字重」和3种不同的的风格(也许有点复杂,但是绝对充分够用)。从图标到符号,在填充模式、笔触轮廓等多个不同的属性上,确保你能挑出感觉更加和谐的图标。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Icons from Apple’s SF Symbols

对于一个大型的成套图标而言,保持一致性并不是一件容易的事情,尤其当这套图标涉及到多个制作者的时候。遵循清晰的原则和规范在此时上至关重要的。

这套 Phosphor 图标是由我和另一位朋友共同制作并严格测试的,我们使用一套准则确保这 700 个图标保持一致性。尽管每个形状都不尽相同,但是它们给人的整体视觉重量是完全相同的,并且很好地相互组合到一起:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Subset of the Phosphor Carbon icon family

6、个性化

每套图标都应当尤其独有的风格和气质。是什么让它们与众不同?它们对于品牌是否有所助益?它们会给人什么样的情绪?

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Waze icons

Waze 大受欢迎的用户界面,很大程度上是它本身所使用的图标设计所造就的。这些用色跳脱斑斓的图标,仿佛在说「我们就是特立独行!」

Twitter 的图标是柔和、清晰明亮的:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Sketch 的图标则是精致而通透的:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Freemojis 的图标是可可爱爱的:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

而这些 Android 的图标则风格各异,抽象风、像素风、霓虹风,不一而足:

搞懂这7个图标设计原则,你就能像专业图标设计师一样

7、易用性

完美地绘制了整套图标之后,你的工作并没有完成。接下来,你需要继续做测试和其他的准备工作,比如让参与图标制作的志愿者可以更好地参与后续的制作和完善,让设计师在日常设计工作当中使用和测试,在数字屏幕和印刷品上应用确保效果,让开发者将它们集成到其他的服务当中,确保能够应用。

一套高质量的图标,需要经过良好的组织、记录,并且在不同的应用场景中进行测试,并且最好能够得到个性化图标制作工具的支持。

7.1、组织性

你需要确保图标集的整齐规范,有合理的命名,便于查找,并且想清楚以什么样的方式来进行分类。按照字母顺序?按照大小,还是类型?

搞懂这7个图标设计原则,你就能像专业图标设计师一样

这套 Nucleo Sketch 图标,是按照也没类型来进行组织分类的

7.2、有据可查

你需要阐明整套图标的核心原则:

我以我所制作的 Phosphor 系列图标为例(和以上原则内容有重复)来进行说明:

  • 清晰:首先要清晰,确保图标可被识别,具有可读性,不能牺牲图标的意义和清晰度。
  • 简洁:尽可能少地使用细节。Phosphor 系列图标的原则是还原。每个笔触都要简洁明了,传达准确地信息。
  • 个性:可以特立独行一点。谨慎的添加独特的细节,让原本可能非常冷硬的图标设计变得温暖。

下面是技术规则。我还是以 Phosphor 图标作为返利:

  • 使用 48×48 px 的画布
  • 使用 1.5 px 居中笔触
  • 笔触末端使用圆角
  • 使用连续的笔触,除非断开的线条有助于理解
  • 尽可能使用直线、完美的弧线,角度以15度为增量
  • 必要时调整曲线以符合设计原则
  • 尽可能使用整数、使用偶数作为度量,必要时可以减少 1px 或者 0.5px
  • 尽可能使用下面的元素来进行设计:28×28 px 的圆圈,25×25 px 的正方形,28×22 px 的矩形
  • 保留6 px 的裁切区域

按照这这样的步骤来进行设计,并根据需求来公开相应的文档,就像下面这样:

7.3、进行测试

检查一致性。确保图标在不同场合可以使用,并且尺寸合理。确保它们和大型是视觉系统能够协调存在。

将图标排列在一起,并且按照以上的 7 个原则来进行检测。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Phosphor 的品质控制流程中所用到的测试表。

7.4、定制化工具

最后,如果你有足够的资源,可以开发相应的工具来方便用户使用图标。

Material Design 让用户可以通过自定义库来访问图标,搜索文件,选择喜欢的格式、配色、大小和主题。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Font Awesome 的图标设计并没有完全遵循上面所提到的全部原则,但是它依然是目前来说最易用的图标集。它提供的功能甚至超出了以上提到的范畴:它支持前端框架、CDN、图标字体以及 SVG。

搞懂这7个图标设计原则,你就能像专业图标设计师一样

Font Awesome 的图标排行榜

下面是一些额外的图标素材资源。

7.5、资源

  • Feather:这是一款精美的简约线性图标合集,包含有 200+ 图标,可以轻松缩放
  • Material system icons:包含 1000+ 实用的 UI 图标,有5 种不同样式
  • Nucleo:这套图标非常全,有3万多个,有三种不同样式,线性、多彩扁平和符号式
  • Streamline:这是一组精美的、包含三万多个线性图标的图标合集图标合集

这个图标合集项目虽然在质量上参差不齐,但却是非常适合拿来搜集灵感、作为参考好地方。

Icon Managers

这是一款来自 Nucleo 的应用程序,你可以导入图标集,查看,修改,导出,非常实用。




文章来源:优设网    作者:Helena Zhang



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




为什么你的图标看着不舒服?

周周


如何打造视觉平衡:正确的尺寸+视觉对齐+完美的圆角修饰。

我们的眼睛很奇怪,经常误导我们。但如果你知道人类视觉的特殊性,就可以构建更好的设计。

20 世纪 20 年代,格式塔的视觉感知理论得到了发展。它解释了我们的眼睛如何处理不同的图像以及我们的大脑如何解释它们。你可能已经听说过诸如亲近原则或共同命运规则之类的话题,本文引用了格式塔理论的一些观点,重点介绍了实践方面而不是学术研究上的问题。在底部有关于这个主题的相关推荐列表,有兴趣的话可以浏览。

测量尺寸和视觉尺寸

400 px 的正方形和 400 px 的圆哪一个更大?从几何角度来说,它们的宽和高是相等的。但看看下面的图片,我们的眼睛立刻发现正方形大于圆。

为什么你的图标看着不舒服?

下图是带有标注的:

为什么你的图标看着不舒服?

让我们再看一张正方形和圆的图。就视觉重量而言,它们相同吗?

为什么你的图标看着不舒服?

至少很难立即指出哪一个比较重,不足为奇,因为我增加了圆的直径。

为什么你的图标看着不舒服?

我重叠了第一个和第二个示例中的形状。左图,400 px 正方形的面积大于 400 px 圆的面积。这就是为什么我们在视觉上看到它更大的原因。右边,圆和正方形是平衡的,基本上它们的面积也相似,但是宽和高不同。

为什么你的图标看着不舒服?

我们可以看到菱形、三角形具有同样效果。为了在视觉上与正方形保持平衡,它们应该更宽和更高,以使得它们的面积相似。基于面积的方法非常适合最简单的形状。

为什么你的图标看着不舒服?

在 icon 中怎么使用呢?

当你创建一组图标时,重要的是要使它们保持平衡,以使图标不会显得太突出或太小。如果我们直接把图标放在正方形内,那么越像正方形的图标看起来就越大。

为什么你的图标看着不舒服?

我建议补偿不同形状图标的重量,允许视觉上较小的图标悬挂在正方形外,并在视觉上较重的图标和正方形之间留出一些距离。

为什么你的图标看着不舒服?

下面是一组修改过的图标:

为什么你的图标看着不舒服?

现在了解了,为什么一个图标区域总是比图标主体大,只是为了让非正方形图标适合它并且看起来不小于正方形图标。

为什么你的图标看着不舒服?

检查视觉平衡最简单的测试是模糊设计。如果你的图标变成相似的斑点,则它们具有形同的视觉权重。

为什么你的图标看着不舒服?

例如,Facebook 和 Instagram 的图标是方形的,而 Twitter 的图标则是鸟的轮廓,Pinterest 则是一个环绕的「P」。这就是为什么 Twitter 和 Pinterest 的图标要大一点,以便于它们与 Facebook 和 Instagram 图标保持平衡。

为什么你的图标看着不舒服?

视觉平衡的另一个例子是将文本框与圆形按钮放在一起。如果按钮的直径等于文本框的高度,那么按钮会显得更小。当你把它放大一点,整个结构就会变得更加平衡。

为什么你的图标看着不舒服?

但如果你改变按钮的样式,就不需要放大了。在下图中,按钮和文本框的高度是 80 px,但是右边的按钮视觉上看起来并没有很弱,因为它是黑色的。

为什么你的图标看着不舒服?

Tips:

  • 视觉重量是人眼感知物体大小和重要性的方式,它不一定等于其像素大小或面积。
  • 圆形、菱形、三角形和其他非正方形图形需要更高和更宽的尺寸,才能与正方形图标在视觉上保持平衡。
  • 图标区域应该留有一些空间用于视觉平衡。对于一组图标来说,这是至关重要的,它们应该确保看起来是一致的。

不同形状的对齐

视觉对齐是视觉平衡主题的延续。看下图:它们看起来一样长吗?

为什么你的图标看着不舒服?

以 px 为单位,答案是肯定的。但是,第一眼看上去,第一条要比第二条长一些。

为什么你的图标看着不舒服?

现在看下图,有什么变化吗?

为什么你的图标看着不舒服?

我对第二条矩形应用了视觉补偿。允许尖峰值超过上条矩形长度的 20 px,是补偿峰值之间的间隙并使两个形状在视觉上相等。

为什么你的图标看着不舒服?

还有一些特殊图形的例子:

为什么你的图标看着不舒服?

所以,如果你设计一张带有折叠条纹和文字的海报,或者商品图角标设计时,请注意使它们达到视觉平衡。锐利的边缘应该超出形状的其他部分。

为什么你的图标看着不舒服?

文本和有背景的段落怎么对齐?这取决于背景的视觉密度。如果它很轻,你可以将突出显示的段落与文本的其余部分对齐。

为什么你的图标看着不舒服?

由于背景较浅,因此不会中断正常的文本流。

为什么你的图标看着不舒服?

对于深色背景,可以使用不同的方法。在图片上,黑色背景与文本的其余部分对齐,而其中的白色文本以缩进方式放置。

为什么你的图标看着不舒服?

与浅色背景的情况不同,黑色背景具有较大的视觉重量,如果目标是无缝浏览段落,则最好按照以下所示的方式对齐。

为什么你的图标看着不舒服?

相同的原理同样适用于按钮和输入字段。当然这只是基于人类视觉感知的设计。

为什么你的图标看着不舒服?

左侧输入字段的浅色背景可以超出输入标签和输入文本的范围。「发送」按钮的与输入背景的右对齐,因为该按钮较暗且从视觉角度看较重。

在右侧,输入具有实线边框,当用户输入的框内有凹痕时,我将其与标签对齐。「发送」按钮的侧面为三角形。该按钮向右移动一点,看起来与上面的矩形输入字段保持平衡。

为什么你的图标看着不舒服?

在这里,我们探讨另一个对齐问题:文本和图标按钮的对齐。下图,文字看起来居中吗?

为什么你的图标看着不舒服?

秘诀在于,右边是三角形,因此在右边的按钮上我将文本向左移动了一点。此外,箭头按钮的宽度为 40 像素,看起来与矩形按钮在视觉上相等。

为什么你的图标看着不舒服?

文本按钮不仅具有水平对齐,而且具有文本和背景的垂直对齐。我想讲的第一种方法是在各种操作系统、站点和 APP 中使用的。它是基于字体的大写字母的高度(即上限)对齐方式,它等于「 H」或「 I」的高度。

为什么你的图标看着不舒服?

基本上,大写字母上下的空间和按钮的边缘是相等的。这是有道理的,因为操作按钮通常以大写字母书写,并且英文字母的升序更多,上伸出部分(l,t,d,b,k,h)比下伸出部分(y,j,g,p )多。

为什么你的图标看着不舒服?

另一种方法是使用字体的小写字母的高度(所谓的x高度)来对齐文本和背景。在 sans 和 sans serif  字体中,它等于字母「 x」的高度。

为什么你的图标看着不舒服?

由于文本的主要视觉重量集中在小写字母的区域,因此该方法也是可行的。

为什么你的图标看着不舒服?

这些方法之间有什么区别吗?有区别,但差异不大。

为什么你的图标看着不舒服?

对于「取消」和「确定」(常用按钮),由左列代表的上限高度方法肯定更好,因为「取消」没有下垂部分(y,j,g,p ),并且「确定」都是大写字母。

右栏中显示的 x 高度方法仅对「同步」按钮更好,该按钮的名称同时具有上下突出的元素;「取消」和「确定」两个词似乎位置太高了。

为什么你的图标看着不舒服?

图标按钮的情况与文本按钮略有不同,让我们在圆形背景上放一个「发送」图标。哪个看起来视觉更加平衡?

为什么你的图标看着不舒服?

希望你已经注意到左边的那个有问题。发生这种情况的原因是对齐方法不同。第一个选项将图标视为矩形,在某种程度上说是正确的,因为当你将 SVG 或 PNG 文件给开发人员时,它是一张矩形图。右侧显示图标的位置,使其所有尖锐边缘与圆形按钮背景的距离相等。

为什么你的图标看着不舒服?

如果为开发输出文件,则需要保留一些区域,以便他们可以使图标在背景上正确居中。

为什么你的图标看着不舒服?

同样「播放」按钮也一样,如果直接对齐这些形状(圆角矩形和三角形),它们将看起来很奇怪。

为什么你的图标看着不舒服?

如果要使三角形的视觉位置更好,则将其围绕并使其与按钮背景对齐会更好。

为什么你的图标看着不舒服?

Tips:

  • 带有尖锐边缘的形状应更大或更长,以与相邻的矩形对象保持平衡。
  • 帽高对齐是在按钮背景上定位按钮文本的有效方法。
  • 正确将三角形图标放在按钮上的一种有效方法是将其包围并使其与背景对齐。

视觉圆角

还有什么比圆形更圆的图形吗?

我曾认为没有,但是正如我在本文开头所说的那样,我们的眼睛很奇怪,有时会欺骗我们。那么,下面图片中哪个圆看起来最平滑?

为什么你的图标看着不舒服?

我之前问过的人在 3 号和 4 号之间进行纠结。1 号和 2 号绝对太瘦了,5 号太丰满了。如果我们将第三个和第四个变体(一个几何圆和一个修改的圆)重叠在一起,我们会发现,后者比第一个重一些。

为什么你的图标看着不舒服?

为了说明我的意思,我从 Futura,Circe 和 Geometria 这三种著名的几何字体中选取了字母「 o」。鉴于高质量字体是基于人类的视觉感知构建的,并且使用了复杂的视觉构造系统,因此我认为它们的圆形看起来比几何形状更圆。

为什么你的图标看着不舒服?

让我们将它们与几何圆重叠。即使是最几何图形的 Futura 的「 o」也有四个突出部分。此外,Circe 和 Geometria 的字母比圆圈宽,但即使它们的高度和宽度相等,我们也可以看到这四个「肚子」好像小了。

为什么你的图标看着不舒服?

因此,从视觉角度而言,修改后的圆(右侧)看起来比几何圆(左侧)更「圆形」。

为什么你的图标看着不舒服?

我们如何使用这种现象?当然要进行圆角处理。如果你在图形编辑器中直接修改圆角,效果其实并不好。

为什么你的图标看着不舒服?

人眼立即发现直线突然变成曲线的点,而且这种处理看起来并不自然。

为什么你的图标看着不舒服?

考虑到我们的视觉感知,我修改了这个圆角。

为什么你的图标看着不舒服?

这种嵌入具有超出几何圆的额外区域,使得直线与曲线相交的点不那么明显。

为什么你的图标看着不舒服?

只是尝试感受一下这些嵌入方法之间的差异。

为什么你的图标看着不舒服?

现在,我们可以将这种方法应用于圆形按钮。

为什么你的图标看着不舒服?

你可能已经注意到,右侧的按钮具有更平滑的圆角倒角,并且你的眼睛更加舒适。

与 APP 图标相同,人们不只是使用标准的圆角整数来达到理想的效果。在深入探讨此问题前,让我们看一下下面图形的差异:

为什么你的图标看着不舒服?

第一个是我在 Sketch 中创建的圆角矩形。第二个形状是超椭圆形,也称为 Lamé 曲线。它是由法国数学家加布里埃尔·拉梅(GabrielLamé)发现的,根据公式的不同,其范围可能从四点星形到实际上看起来像是圆角正方形。

为什么你的图标看着不舒服?

马克·爱德华兹(Marc Edwards)提出了 Lamé 曲线的公式,该公式产生了平滑且视觉上完美的形状。从 iOS 7 开始的图标均基于此设计的。

为什么你的图标看着不舒服?

后来,通过添加黄金比例和用于指导新图标设计者的网格来修改此形状。

为什么你的图标看着不舒服?

使用超椭圆等形状的主要好处是其光滑的外观。另一方面,这些非标准形状很难到真实项目中。应该将多个 SVG 组合在一起,在代码中包含特殊的公式或脚本,或者像 Apple 为其应用程序图标那样使用 PNG 掩码。

至于设计过程本身,有一个简单的圆角修复方法。您需要调整合适的圆角度数。

为什么你的图标看着不舒服?

锐角倒圆的差异更加明显,这对于绘制道路或交通设计非常重要。

为什么你的图标看着不舒服?

Tips:

  • 几何圆角看起来很假,因为你可以轻松看到直线突然变成曲线的点。
  • 视觉上正确的圆角需要特殊的公式或手动调整形状。

有时,非几何正方形看起来更像方形。你可能会想,「这是什么废话?」 那么,你看下面的正方形?哪种形状看起来更方形?

为什么你的图标看着不舒服?

如果你选择了左侧的形状,你就能感受到视觉差异的点。

为什么你的图标看着不舒服?




文章来源:优设网    作者:UX Talk



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档