如何创建微信群_如何创建精致的UI界面：图形篇

通过对图形的研究和分析，本文介绍了图形对界面的影响，并告诉每个人如何更好地将图形元素应用到自己的界面设计中。上周，

完成了“如何创建一个精致的用户界面——排版”。本周，我们将继续阅读本基本系列中的图形文章，了解什么样的图形和界面。我们可以考虑图形对界面的影响，如何正确使用图形，以及如何更好地将它们应用到界面设计中，以帮助我们提高界面的质量

今天，我希望通过这篇文章与大家分享我的一些观点和看法。我说的不一定是对的。你可以理性地阅读这篇文章。当然，不仅是我的文章，包括网上所有的文章，我们需要用辩证的思维来阅读它们，而不是像海绵一样吸收它们。

，那么让我们开始研究图形如何提高界面的精细度。

在这里，我想从设计语言开始。我们可以看看一些大公司(苹果、谷歌、微软和IBM)发布的设计系统，它们基本上在风格栏中包含图形图标模块。谷歌在去年更新设计语言时直接将图形和品牌结合起来，并做了一些案例研究和演示。

他们为什么要这么做？事实上，我们可以感受到图形的重要性。图形可以让你的产品有记忆点，同时可以传达品牌理念，提高设计质量，同时增强界面细节。在一些枯燥的纯文本界面中，借助图形，整体设计有了新的感觉。

在界面设计中，图形有多种使用方式，但有些方式并不有效，导致界面设计几乎没有改进，反而成为一种装饰为设计而设计这就是所谓的纯装饰。虽然它看起来不错，但只要你改变颜色，它就可以用在任何产品上。

整合了我目前知道的一些好的应用方法和思路，总结了三个主要方向。最后一点是使用图形时应注意的几个要点:

符号的应用是目前最先进的。顶层应用程序贯穿整个设计系统，包括一种在组件的血液中具有最多记忆点和强大创意的设计方法。当然，品牌图形的提取并不容易。应该考虑图形的扩展和应用范围是否有限。

品牌图形也可以在许多场景中使用，所以让我们与您分享一些案例，看看其他人如何使用它们。上面的

是韩国的一款29厘米的APP。他们产品的最早设计是由韩国设计团队Plus X完成的，左边是产品图标，右边是定义产品图形元素“线”的元素。完成整个产品设计后，让我们看看界面中线条元素的视觉范例:

。从上面的设计中，我们可以看到线元素无处不在，并且被反复使用来形成线元素记忆点，包括纤细的图标。详细页面界面的布局使用线条作为标题来强调，同时，最后一张图片中的线条也起到了划分信息层次的作用。线程的使用使整体设计感觉非常强大，它更像杂志

。同时，我们还可以注意到，29厘米的产品在每个设计角落都使用了螺纹元素，与产品自然融合在一起。早在之前，

拷页就由韩国顶级设计团队Plus X设计。像29厘米一样，他们在整个产品设计中使用品牌符号图形，将符号角作为元素，并将其融入到产品设计细节中

让我们看看当时使用图形的一些想法:

符号贯穿图标，不断重复直角和折角两个元素

图标集具有非常鲜明的个性，但现在看起来有点过分，但关键是要看他们当时是如何将这些元素融入他们的设计理念中的。如果我们做到了，会是什么样子？

用户界面设计和横幅操作设计都包含了这个角符号，但是现在在线版本已经变得面目全非，视觉特性也不如开始时那么好了。具体原因尚不清楚。

点与线广泛应用于设计，包括平面设计、品牌设计、包装设计，甚至是MG动态设计、UI界面设计等。有些产品甚至很好地使用了它们，形成了自己品牌独有的特殊符号，如29厘米

然后让我们看看界面中的以下虚线，以增强设计感和细节:

在上面的设计中，设计师通过使用线条添加了设计细节，但是第二和第三张图片中的线条会稍微多一些，如果我们减少一些线条呢？如下图所示:

，让我们看看我是否减少了一些行。整个画面更清晰、更简单，画面也不那么凌乱。线的使用可以是一条很细的线或一条很长的线来区分内容。因此，虽然线条可以增强设计感，但不能过度使用。

在上述设计案例中，设计师将线点融入界面，以增强设计氛围感。同时，标题中线条的使用也起着重要的作用，或者可以在网上点击。

我们可以比较左右设计。在右边，我将删除该行，并与左边进行比较。感觉如何？

是否觉得右侧设计较少，左侧信息区别不明显，也没有视觉引流轴之前，我写了一篇关于排版的文章，其中有一个对齐轴的概念。感兴趣的学生可以再看一遍，然后再看看设计。

上的图形设计者同样在设计中填充线条以区分每个信息板，同时线条也在增强细节和改善设计纹理方面发挥作用。

这是一个在线案例，一个韩国音乐应用Vibe，你可以下载并体验它。从发布页面上我们可以看到，这款产品的logo有节奏的粗线条和快速线条。当他们设计各种音乐流派时，他们提取线条的元素，并根据当前的功能完成各种流派的设计，如90年代、摇滚等。

，当然，这是一个稍微高一点的情况。对于这样的应用，需要系统的思考，而且不容易做到。与之前的29厘米产品设计一样，line元素用于贯穿整个产品设计。

底纹图形的应用也广泛应用于产品设计中，一般存在于个人中心、会员卡制作等设计中。当然，在启动页面的功能卡或一些关键栏目上，图形设计和杂志设计也得到广泛应用。着色应用的最佳技巧是使用“重复”规则。让我们看看它们是如何应用于设计的。在

的海报设计中，设计师使用线条元素、粗线、弧度，然后重复它们来完成阴影背景的设计，具有空间感，使设计不那么枯燥，增加了海报的氛围。

在六个电子书封面上，设计者还用图形元素作为背景填充设计，通过色彩对比和空间结构，设计者反复使用同一图形元素来完成最终设计。我们还可以发现，图形给我们带来的设计、氛围、单色和彩色梯度图形是不同的。

苹果支付现金卡设计也反复使用点元素。整个点元素被填充到球体中，象征着用户的全球覆盖。同时，我们可以看到它背后的思想。新的苹果支付支持全球化(当然，我自己也理解这个意思。或许他们的设计师有其他想法？)，图形必须有它的含义，要么是品牌图形的延伸，要么适合主题

以上两幅设计图纸均以线条图形元素为背景。在第二幅图中，线条本身有一种节奏感，所以在音乐卡片上使用它是合理的。

(1)图形元素，最好在产品中使用单一符号。通过这个符号，它在整个产品设计中被反复使用。你可以看到29厘米，为什么它只是一个线元素？如果一个产品有很多图形，你将无法快速区分你的品牌图形，用户将无法感知，也无法形成记忆点。一个图形可以使界面高度统一，形成高质量的感觉。

(2)图形元素的界面，颜色必须控制，单色或渐变，如果为了渲染海报上的气氛那是另一回事。

(3)以内容为中心，图形只是辅助。就像电子书的封面一样，图形不仅能增强视觉，而且不会抢走主要内容

(4)的图形。产品界面中图形的使用需要有意义。最先进的用法可以与设计品牌概念集和设计理念集相结合，向用户传达产品的人文精神

。这篇文章带给我们更多的想法和一些个人想法。通过在线和在线案例分析，目的是表达我对图形的一些认知当你使用图形时，你最好记住我说的最后一部分。如果你能合理地掌握图形应用技巧，你的界面就不会单调乏味，你的设计感也会得到质的提高。

好，下期见

如何创建精致的用户界面(一):排版文章

视觉层次的四种武器