平面吉祥物设计软件-学会这14个技巧，助你通过产品界面初稿

如何从视觉层面提升用户体验，我总结了14点，可以帮助工作中通过初稿。

1.排版是基本能力

版式是信息媒介与接受者沟通的桥梁，也是设计者最基本的能力。 可以简单理解为信息的有序排列。

1、模块间距的三种表达方式

制作界面最常用的工具是垂直网格系统，所以制作UI必须有一个模块的概念。 模块也称为“容器”，是承载文本、图标、颜色等元素的载体。

模块之间的间距通常用线、面、留白三种切割方式来表示。

2. 留白是一种很好的表达方式

在设计过程中ip形象，我喜欢使用“留白”的表达方式。 我们在设计界面时不需要填满所有的屏幕空间。 在我看来，“留白”与图标、颜色、图片一样重要的设计元素，它能让整个设计有呼吸感。

像下面这个设计案例，你是不是觉得右边的接口更透气呢？

在我眼里，苹果不仅是一家科技公司，也是一家非常优秀的设计公司。 不仅产品营销案例每年都做得很好，产品设计表现能力也是最好的之一。 例如，苹果官网经常采用“留白”的设计方式。

比如下面这两个网页设计作品，你觉得右边的渲染图看起来更大气，效果更好吗？

3. 比较&信息整理

作为UI设计师，最重要的任务是突出页面上的重要元素，并清晰有效地向用户传达信息。

做到这一点其实并不难，所以我就讲一下我最常用的两种设计技巧——比较和信息组织。

什么是对比度？ 简单来说，就是不一样。 我们通过颜色、字体粗细、空间关系和形状等元素突出显示重要信息。

如下图所示，只需调整字体颜色和空间关系，就能让右侧的信息更加高效。

那么什么是信息整理呢？

这里我们就来说说版式四大原则中的“亲密”原则。 亲密性原则是将相关项目的信息组织在一起。 在页面上，位置的接近表明两者之间存在关系。

我们对信息的整理一般分为三个步骤，即“理解、提取、设计”。

理解：属于你自己的思考阶段，思考文案中的信息意味着什么，信息之间是否存在关联。 提取：这一步需要思考哪些信息是最重要的，哪些信息是次要的，并按照重要程度对信息进行排序。 设计：在这一步中，利用“亲密性”的原则，通过对信息的重新排列和排序，对信息进行重新设计。 如果有必要，还可以适当减少一些冗余信息。

2.文字间距设计规则

在UI界面中，字体大小决定了信息的层次和权重。 不同字体大小的清晰排列会让整体设计更加清晰有序。

1. 垂直和节奏间距

在大段落文章列表的场景下，对齐肯定是没有必要的。 大家都知道两边要留有固定的安全距离，所以文字内容一定要垂直对齐。

我想说的是节奏，很多同学认为规范是固定的，所以在处理大段落标题、正文、第二段标题、第二段正文时，都会采用相同的间距。 严格来说，这种做法并没有错，只是缺乏节奏感。

我们不知道，但是标题和正文之间仍然使用固定的间距，并且第一段和第二段之间使用较大的间距卡通形象，以保证段落之间层次清晰，视觉层次更好。

2.标题的行高

标题文案越短越简洁，最好用一行显示。 但特殊情况下就需要分两行显示，比如书名、新闻场景等。 在这种情况下，必须考虑标题的行高。

我建议标题的行高是正文字体大小的1-1.3倍。 你可以使用文字默认的行高来设计，也可以使用我推荐的规格来尝试一下效果。 总之，保持规格与你一致，按照合理的规格设计行高就够了。

3.必须添加品牌元素

品牌是一个很大的话题。 如果你想了解更多，可以阅读我的文章《数字拆解为什么你的设计没有品牌感？》的内容 ”。

1.添加一些品牌元素

公司花费大量资金打造企业形象和精致的品牌标志。 作为设计师，一定不能放过这些资源。

例如，一些大厂家的产品会在产品中反复展示品牌标志，以加深用户的印象。

小米有品：用户登录并进入首页场景后，左上角将始终显示“有品”的标志。 这样的设计会加深用户的印象。

百度浏览器：在搜索引擎等常用功能中添加品牌标志也是一个不错的设计方案。

我们之前讲过，如果品牌没有运营支撑，会给用户一种产品没有迭代的感觉，所以在每次活动、节日的时候，也可以在界面中放入特殊的节日元素。

(1)淘宝

中秋活动期间，淘宝聚划算频道将图标转化为GIF版中秋赏月，加深了用户的视觉体验，吸引用户点击进入聚划算频道二级页面。

(2)夸克浏览器

冬奥会期间，运动员形象将与品牌标志相结合，并在中国运动员获得奖牌时更新动画形象。

2.有场景的话添加IP图片

拟人化的IP形象设计无疑是产品与用户之间最有效的沟通工具。 很多企业都会将ip形象融入到活动的运营中。 比如腾讯组织的99慈善日。 小红花的图像已添加到产品页面。

随后，设计师巧妙地与集团其他产业线的吉祥物结合，输出不同风格的设计稿，不仅宣传了99慈善日，也弘扬了腾讯集团的企业文化。

4.颜色的选择

颜色是界面中最大的元素，也是用户体验最直观的设计元素。

1. 谨慎使用高饱和度的颜色

虽然高饱和度的色彩会让产品看起来不错，但是当它大面积出现时，很容易让用户感觉眼花缭乱，尤其是在文案信息较多的场景下。

在如下图的红包场景中，你会发现右侧的饱和度比较低，文案阅读起来比较舒服。

2.加强对比度，使文案更清晰

任何时候，我们都应该尽量保持文案尽可能清晰，那么如何让较浅的文案显示在较浅的背景（图片）上呢？

解决办法很简单，如下图所示，我们只需要在文案下面添加一个深色的不透明图层，或者改变文案的颜色，总之就是加强文案与背景的对比度。

3.背景颜色的选择

在电商产品中，虽然产品展示图片采用白色或灰色作为背景色，会显得产品很高级，但如果想让产品展示更有趣，不妨尝试选择一些与产品相似的颜色，调整其明度和纯度应用于背景、文字或图标，这将使整体界面年轻、活泼。

4.让配色更高级

如今，很多电商图片都使用具有挑战性的配色方案来吸引用户的注意力。 对此我保留个人意见。 我觉得还是把产品图片的色彩设计得更和谐、更高级，才能获得用户的信任。 学位，特别是对于医疗或制药产品。

5、合理利用阴影

在现实生活中，当物体出现在空间中时，就会出现相应的阴影。 虽然我们做的界面是扁平化的，但是在UI界面上添加三维效果是很流行的。 阴影的使用也有一些要点。 注意。

1. 海量投影的制作

很多人会选择直接在图层样式上制作阴影，但我更喜欢自己制作漫反射阴影。

例如下图中，在现有元素下添加一个同等大小的元素，将元素缩小到70%-80%，底部对齐平面吉祥物设计软件，然后垂直向下移动6-10个像素。

然后给元素添加高斯模糊效果，模糊半径控制在6到16之间，打造item悬停的效果。

2. 给阴影添加一些颜色

学过绘画的同学应该知道，当我们画色彩斑斓的风景时，老师会给投影添加一些其他的颜色，目的是让投影也有色彩倾向。

很多人都有疑问。 我观察到投影的颜色是黑色的。 为什么需要添加颜色？ 对于对此有疑问的人，我建议你看看莫奈的《日出》。

在我们的现实世界中，如果你把一个红苹果放在白布上平面吉祥物设计软件，盯着投影，你会发现投影不仅是黑色的，而且还有环境色。 这就是投影在现实生活中的样子。

我们在制作投影效果时也应该这样做，尽量避免使用黑色阴影，还原现实世界中投影的外观。 例如，您可以添加一点背景颜色，使其看起来更自然。

3.阴影的扩展

市场上还有一种类似于阴影的效果，称为“磨砂玻璃拟态”风格，因为这种效果注重空间感，有助于产品和用户在界面中建立层次结构和深度感，比如我们的电视就经常使用这个效果。

后来，有设计师在磨砂玻璃的基础上重新设计，产生与物理空间中真实玻璃相同的效果，并且很多产品将这种风格应用到图标上，以增加产品的趣味性，缓解用户的视觉疲劳。

6. 结束

以上是经验总结。 还是需要自己在实际工作中积累经验。 祝你有草稿~

#专栏作家#

斜杠7湿，公众号：斜杠7湿，人人都是产品经理专栏作家。 星光不问路人，时间有回报，鼓励做知识分享者。