简要回答

图标是UI设计师必须掌握的技能。 图标是UI设计师必须掌握的技能之一。 一个好的图标是如何设计的?

首先,在制作图标之前考虑以下几点(默默地写在那张纸上):

您的图标主要适合哪些设备?

您需要什么风格的图标?

还有其他设计要求吗?

接下来我们进入设计流程:

1.设计从网格开始

我们将使用不同尺寸的网格来进行不同的设计。 这里我们以32*32的网格为例。

网格边缘的2px在我的设计中是不可触及的,即空白边缘。 如果没有特殊情况,我绝对不会让我的设计图形进入这个边缘限制。 留白的目的也是为了让设计看起来不会太饱满,给用户一定的呼吸感。

图标的结构分为两部分:形状和方向。 如果你的图标有边框,一般会在边框框位置绘制正方形、圆形、三角形、矩形等形状作为边框。

圆形图标将位于网格的中心。 在圆形图标设计中,四个边缘将接触内容区域的边缘,但不会接触空白区域。 一些小形状和角会超出圆圈,但不用担心,这是常见现象。

方形图标通常也会位于网格的中心,但在大多数情况下也会接触内容区域的边缘。 我们看一下下图:图片分为三个正方形区域(蓝色、橙色和绿色),图标中的大部分图形都在中间的橙色区域。 每个区域的图形比例取决于图标的整体视觉效果,而这个控制需要你不断练习找到一些感觉,然后才能运用自如。

在 32px 网格中,您会注意到有一个 20px 区域与 28px 区域在垂直和水平方向上分开。 一般来说,在设计图标时,你会尽量遵循这个规则。

不规则的图标设计将使用圆圈对齐,如下所示。 您可以看到该形状已触及圆的边缘。 这里不需要非常精确地夹紧边缘,只要靠近即可。

但您必须记住,并非所有设计都必须遵循网格规则。 图标的本质远远超出了这样的规则的设定。 网格将帮助你提高图标设计的一致性,但如果你在设计一个伟大的图标和遵循规则之间做出选择,我相信你会选择一个伟大的设计。

2.从简单的几何图形开始

设计图标就像绘制草图:从简单、粗糙的圆形、矩形或三角形开始。 在设计小图标时,手绘的表情可能看起来不那么精致,所以使用AI进行设计是更好的选择。 使用一些基本几何形状进行设计将更加准确(尤其是在弯曲边缘周围),调整速度更快,并且更准确地适应网格图案。

3、边、角、曲线、角度规格

尝试设计符合数学惯例的边、角、曲线和角度,同时仍然有趣。 换句话说,不要太相信自己的眼睛。 在一些细节上你需要遵循规范,因为如果这些元素不一致,将会极大地影响图标的质量。

角度

在设计中,大多数情况下我会使用45度角或其倍数。 45 度角会显得非常均匀(在像素下会显得更强)。 这条完美的对角线会让眼睛非常舒适、清晰。 这种模式还可以在一组图标中建立统一。 如果我要打破这个规则,我可能会根据情况使用一半角度(22.5 或 11.5 度)或 15 的倍数。 使用45度的好处是,即使反向使用也不违反规则。

曲线

曲线是技术考虑尤为重要的地方。 即使画面质量很差,光看曲线也能看出设计师的能力。 而且,人眼的测量总会存在一些小误差。 大多数人的眼睛和手的协调能力都没有那么高,所以他们使用软件的形状工具和一些数字来创建曲线来达到效果。

角落

圆角可能用得不多。 半径为2px的圆角显然是一个圆。 你要根据你设计的整体特点来选择是否使用圆角,以及圆角应该有多大。

像素效果

图标的像素效果是用户界面的重要组成部分,尤其是在小尺寸设计中,影响整体视觉效果。 如果像素网格中的行间距未对齐,则会导致锯齿状边缘,并且在小图标上看起来模糊。 调整图标的像素网格会使直线更细,角度和曲线更不精确。 这就是为什么建议您使用45度角,这样更容易掌握,更准确,更容易对准。

线的粗细

就线条粗细而言,2 像素应该是理想的,但 3 像素是最通用的。 我个人更喜欢2px和4px。 理想情况下,我会使用 2 的倍数。在大多数情况下,应避免文本和平面图标的细线,除非您想要达到某种所需的效果。 如果要定义线条的形状,设计师通常会使用光和影。

4.通过设计元素和图标特性实现统一

设计师会利用某种元素让一系列的设计更加统一。 例如,一位荷兰设计师在2015年的Icon Salon上谈到了他为荷兰政府做的项目。 在设计中,他和他的合作伙伴使用了“间隙”元素。 并非每个“Every”图标都具有此元素,但大多数图标的统一赋予了该系列自己的身份,并真正将它们聚集在一起。

5. 谨慎使用细节和装饰

图标的目的是与用户沟通,让他们思考并做出选择。 太多的细节会增加识别图标的复杂性,尤其是尺寸小的,会成为一种负担。 当然,细节的复杂程度也会影响单个或整个系列图标的效果。 所以当你不确定细节的重要性时,最好的办法是考虑细节的最低保证,但要保证高质量和清晰的图标含义。

6. 独特性

虽然我们可以看到很多伟大的设计师制作出高质量的图标,但他们过于关注设计趋势并模仿其他高端设计师的风格。 作为设计师,创造或许才是我们更应该看重的。 我们可以从结构、字体、工业、心理学、自然等其他领域找到灵感。我们都见过相同的图标,但你独特的风格才是用户真正认可的风格。

在设计过程中需要注意以下几点:

1、让用户更容易理解

图标最重要的功能是其识别是否易于用户理解。 人们很难在小图标中做出选择,因此对于品牌来说,大多数平面设计都是为了展示品牌标志。 或者一个标志性的图像。 当然,对于一个新的或者小品牌来说,也会通过一些其他的方式来展示。

2. 图标不是图像

图标可以包含图像,但也可以是文本、徽标或这些元素的组合。 图像图标在其他设备上可能难以阅读,而图形则具有更多的视觉重量。

3.避免言语

对于图标来说,不会用文字作为内容,因为本身空间不大,内容不多,用户理解起来比较困难。 这是一条经验法则:如果文本不是徽标的一部分,请避免使用它。 如果是的话,请仔细考虑一下。

此外,许多图标实际上是在某些上下文中使用的,并且大多数图标下方都包含一行描述性文本。 设计时,字母的颜色和图标或网站的类型也应该一致,以建立品牌统一性。

4.使用鲜艳的颜色

想让你的图标脱颖而出吗? 所以请使用大胆的颜色。 选择鲜艳的颜色可以帮助您吸引用户的注意力并使您的品牌更加独特。 例如,蓝色,尤其是天蓝色和海军蓝色,你可能会回避,因为这些流行的颜色没有吸引力。 但如果蓝色是您的主要标志颜色,您可以尝试一些新的中性颜色,例如柠檬绿,或选择季节性色调,例如夏季亮橙色或春季粉红色。

5. 扩展标志

你的品牌会有它的标志,但一旦它成为一个图标,它就变得更像一个标志。 该徽标可以是简单的徽标或图像。 它需要对客户来说更加直接和难忘。 该品牌还希望在标志和图标之间建立某种联系,以统一自身。

6. 图标的用途

图标并不局限于手机或电脑桌面,所以设计时也必须考虑到它们的大小和用途。 因此,将图标放大然后缩小是一个更好的方法。 图标设计涉及到它的尺度和大小,格式也成为一个重要因素。 对于实际使用,矢量图形是您的最佳选择。

7.内容外部世界

最近,许多图标都使用单色背景和白色图标,将平面设计与阴影相结合。 虽然这种趋势很流行,但不要局限于这种设计,在你的图标中做一些不同的设计。 虽然大多数人都会考虑方形设计,但也许您应该考虑其他东西。 在背景中添加纹理将使其从单色中脱颖而出。

8.单色挑战

设计师多年来一直使用一个有趣的技巧来测试其设计的有效性——单色模式。 在单色设计中,如果你的设计传达了相同的信息,那么它就是一个有效的设计; 如果没有颜色就变弱甚至影响用户识别,那就继续修改。 一些设计师会从黑色和白色开始创建一个坚实的框架,然后添加颜色。

本文地址:https://www.cixiucn.com/cixiutu/10054.html