如何创建精致的UI界面-图形篇

版权申明：本文出自“设计TNT”原创，感谢“设计TNT”的原创文章分享！

FEVTE编注：更多经典SKETCH教程和SKETCH经验分享、作品交流请访问飞特网SKETCH教程栏目：https://www.fevte.com/plan/sketch/

前言

上周完成了"如何创建精致的UI界面-排版篇"，本周接着这个基础系列中的图形篇，图形与界面会是什么样的，我们可以思考下图形对界面有什么影响，我们该如何正确使用图形及如何更好的去运用到界面设计中，来帮助我们提升界面的品质。今天我希望通过这篇文章和大家分享一些我的观点和看法，我说的并不一定都是对的，大家可以理性的阅读文章，当然了，不光是我的文章，包括网上所有文章，我们都需要带着辩证思维去阅读，而不是一味像海绵一样的去吸收。

那下面我们就开始研究下图形在界面中如何提升界面的精致度

为什么图形如此重要

在这里，我想从设计语言说起，我们可以看下大公司发布的一些设计系统（苹果，谷歌，微软，及IBM），基本在Style栏里面都包含着图形图标模块，Google更是在去年更新设计语言时候，直接将图形与品牌集合起来，并且做了一些案例使用演示。为什么他们会那样做？其实我们可以感知到图形的重要性，图形能让你的产品有记忆点，同时能传递品牌理念，提升设计品质的同时又能增强界面细节。在一些枯燥的纯文字界面，如果有了图形的辅助，整体设计又有了新的感受。

有哪些方式来运用图形

在界面设计中，图形的运用方式千变万化的，但是有些使用效果并不好，导致界面没有什么设计的提升，反而成了一种装饰，为了设计而设计这就是所说的纯粹的装饰主义，虽然看上去好看，但是只要换个颜色在任何产品都能使用。

综合目前我所了解的一些很好的运用方法与思路，总结归纳了三个大的方向，最后一点是一个使用图形需要注意的一些关键点

1.  品牌DNA符号的运用

2.  底纹图形的运用

3.  点与线的运用

4.  使用图形需要注意的点

1.  品牌DNA符号的运用

品牌图形提取出来的符号，运用是目前最高级，最顶层运用，贯穿全局设计体系，包括组件血液中，最具记忆点，原创性会比较强的一种设计方式，当然品牌图形提取并非易事，要考虑到图形的延展，及运用范围是否受到局限等。

品牌图形的运用，也有很多场景可以去贯穿，下面就来和大家分享一些案例，来看下别人是如何使用的。

【遗憾：这里删掉韩国NAVER 方块图形设计语言介绍，因为腾讯视频上传需审核，因此删掉了，感兴趣的可以去我公众号阅读哦】

上面是韩国一个APP 29cm,他们产品最早的设计由韩国设计团队Plus X设计完成， 左边是产品图标，右边是他们定义这个产品图形元素"线条"  围绕线的元素，完成整个产品设计，下面我们来看下线条元素在界面中具体呈现视觉范式

从上面设计中我们看到，线的元素无处不在，不断的重复使用，形成线元素记忆点，包括纤细的图标，详情页界面排版运用线条作为标题强调，同时在最后一张图中线还起到了分割信息层级的作用，线的运用使得整体设计感非常强，更加杂志化

同时我们也可以注意到，线元素已经被29cm 这个产品运用在各个设计角落，很自然和产品融合一起，

Kakao Page,最早之前也是由韩国顶尖设计团队 Plus X设计完成，和29cm一样，他们将品牌符号图形，贯穿于整个产品设计中，以符号折角为元素，将其融入产品设计细节中，下面我们看下当时这个产品运用图形的一些思路