如何创建精致的UI界面(二):图形篇

1 评论 9268 浏览 72 收藏 15 分钟

本文通过对图形的研究分析,介绍了图形对界面的影响是有多大,同时告诉大家如何更好将图形元素正确的运用到自己界面设计中。

上周完成了“如何创建精致的UI界面-排版篇”,本周接着这个基础系列中的图形篇,图形与界面会是什么样的,我们可以思考下图形对界面有什么影响,我们该如何正确使用图形及如何更好的去运用到界面设计中,来帮助我们提升界面的品质。

今天我希望通过这篇文章和大家分享一些我的观点和看法,我说的并不一定都是对的,大家可以理性的阅读文章。当然了,不光是我的文章,包括网上所有文章,我们都需要带着辩证思维去阅读,而不是一味像海绵一样的去吸收。

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

为什么图形如此重要?

在这里,我想从设计语言说起,我们可以看下大公司发布的一些设计系统(苹果,谷歌,微软,及IBM),基本在Style栏里面都包含着图形图标模块,Google更是在去年更新设计语言时候,直接将图形与品牌集合起来,并且做了一些案例使用演示。

为什么他们会那样做?其实我们可以感知到图形的重要性,图形能让你的产品有记忆点,同时能传递品牌理念,提升设计品质的同时又能增强界面细节。在一些枯燥的纯文字界面,如果有了图形的辅助,整体设计又有了新的感受。

有哪些方式来运用图形

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

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

  1. 品牌DNA符号的运用
  2. 底纹图形的运用
  3. 点与线的运用
  4. 使用图形需要注意的点

1. 品牌DNA符号的运用

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

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

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

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

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

Kakao Page,最早之前也是由韩国顶尖设计团队 Plus X设计完成,和29cm一样,他们将品牌符号图形,贯穿于整个产品设计中,以符号折角为元素,将其融入产品设计细节中。

下面我们看下当时这个产品运用图形的一些思路:

符号贯穿于图标中,不断重复直角和折角这两个元素。

这套图标个性十分鲜明,但是现在看来稍微有些过了,不过大家关键是看他们当时的设计思路是如何融入这些元素,如果换做是我们来做,那又会是一个什么样子的结果?

界面UI设计和Banner运营设计都融入这个折角符号,不过现在线上这个版本已经改得面目全非了,视觉特征并没当初这么好,具体什么原因不得而知。

2. 点与线的运用

点与线在设计中算是运用非常广泛的了,包括平面设计,品牌设计,包装设计,甚至MG动态设计,UI界面设计等等,有些产品甚至是将其运用得非常好,形成一种自己品牌独有的特殊符号,比如29cm。

那么下面我们来看下点线在界面中是如增强设计感和细节的:

上面设计中,该设计师通过线条的运用,增添了设计细节在里面,但是第张和第三张图的线条会略多了一些,如果我们减少一些线呢?如下图:

大家看下我减少一些线,是不是整体干净简约很多了,画面也没那么乱,线条运用可以是很小一根细线,也可以是一根长线作为内容之间的区分,所以线条虽然能提升设计感,但是也不能使用过度。

在上面设计案例中,设计师将线点融入界面中,增强设计氛围感同时线在标题上的运用,也起到了强调的作用,或者对于web来说可点击。

我们可以对比看下左右两张设计,右边我把线条去掉和左边的对比,感受会如何的呢?

是不是觉得右边少了一些设计的东西在里面,同时信息区分并没有左边的明显,也没有一个视觉引流的轴。之前我写了一篇文章就是关于排版,其中就有一个对齐轴的概念,感兴趣同学可以再去看下,然后回过头来在看这个设计。

上图设计师同样的在设计中填充线区分各信息板块,同时线也在里面起到增强细节的作用,提升设计质感。

这是线上一个案例,一个韩国的的音乐app Vibe,大家可以去下载体验下,我们可以从启动页中看出,该产品logo有带律动节奏粗快线条,那他们在设计各种各种音乐流派曲风时候,提取线的元素,在根据当前功能完成各种曲风的设计,比如上面 90年代,摇滚等。

当然这是一个稍微高级一点的案例,对于这样的应用是需要有系统思考,真正做起来并非易事,就像前面 29cm产品设计一样,运用线的元素,贯穿整个产品设计。

3. 底纹图形运用

底纹图形的运用,在产品设计中也是运用非常广泛的了,一般存在于个人中心,会员卡片等等设计上。开屏启动页或者一些重点栏目的功能卡片上面,当然平面类和杂志类设计运用也是非常广泛,底纹运用最佳诀窍是使用“重复”规则,我们一起看下他们是如何被运用到设计中的。

上面的海报设计,设计师通过线的元素,加粗线条,使用弧度,然后不断重复他们来完成底纹背景的设计,有一种空间感,使得设计不那么枯燥,也增加了海报的氛围。

上面6张电子书封面,设计师也是将背景用图形元素去填充设计,通过色彩对比,空间构造,不断重复使用同一种图形元素,完成最终设计。我们也能细微发觉,图形带来的设计感,氛围感,单色图形和有色渐变图形给我们感受是不一样的。

苹果Apple Pay Cash 卡片设计也是不断重复使用点元素,整个点元素填充成球形,象征他们用户量全球覆盖范围,同时也可以看出背后思路,新的Apple Pay支持全球化(当然这个含义是我自己理解的,也许他们设计师有其他想法呢?),图形一定要有他的意义,要么是品牌图形的延伸,要么就是切合主题的。

上面两张设计图都是线图形元素作为背景打底,第张图,线本身就有律动的感觉在里面,因此用在音乐卡片上,也是合情合理。

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

(1)图形元素,在一个产品里面最好是单一的符号,通过这个符号不断重复运用在整个产品设计当中,大家看看29cm就知道了,为什么会只是线元素?如果是一个产品都很多图形,将无法快速分辨你们品牌图形,用户根本无法感知,也无法形成记忆点。单一的图形能让界面高度统一,形成高度品质感。

(2)图形元素在界面中,色彩一定要控制,要么使用单色或者渐变色,如果在海报上为了渲染氛围那个另当别论。

(3)以内容为中心,图形只是辅助,就像我们上面看到电子书封面一样,图形既增强视觉感官感受,同时也没有抢主要内容

(4)图形在产品界面中的使用需要有意义的,最高级的用法能与设计品牌理念集合,设计哲学集合起来,向用户传达出产品人文精神

总结

本篇文章总体给大家带来更多的是思路和我个人的一些想法,通过线上与网上案例分析佐证,目的是希望借此能表达我对图形的一些认知。大家在运用图形时候,最好记住我最后说那部分,如果能合理掌握图形运用技巧,那么你的界面将不会单一枯燥,设计感能有质的提升。

好了,下一期见。

#相关阅读#

如何创建精致的UI界面(一):排版篇

视觉层次结构的4大武器

#专栏作家#

Tony,微信公众号:洞见设计,人人都是产品经理专栏作家。百度设计师。很乐意帮助年轻设计师成长,简历指导,每周分享最有价值的设计经验,擅长产品体验设计,关注【洞见设计】后台回复“彩蛋”领取设计资料。

本文原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 很棒

    回复