怎样创建风雅的UI界面（二）：图形篇
本文经过对图形的研讨分析，先容了图形对界面的影响是有多大，同时报告各位怎样更好将图形元素准确的运用到本人界面计划中
上周完成了“怎样创建风雅的UI界面-排版篇”，本周接着这个基本系列中的图形篇，图形与界面会是什么样的，我们可以思索下图形对界面有什么影响，我们该怎样准确使用图形及怎样更好的去运用到界面计划中，来协助我们提升界面的品格。
今天我渴望经过这篇文章和各位分享一些我的看法和看法，我说的并不一定都是对的，各位可以感性的阅读文章。固然了，不但是我的文章，包含网上一切文章，我们都必要带着辩证头脑去阅读，而不是一味像海绵一样的去吸取。
那底下我们就开头研讨下图形在界面中怎样提升界面的风雅度。
为什么图形云云紧张？
在这里，我想从计划言语提及，我们可以看下大公司公布的一些计划体系（苹果，谷歌，微软，及IBM），基本在Style栏内里都包含着图形图标模块，Google更是在客岁更新计划言语时分，直接将图形与品牌聚集起来，并且做了一些案例使用演示。
为什么他们会那样做？但是我们可以感知到图形的紧张性，图形能让你的产物有影象点，同时能转达品牌理念，提升计划品格的同时又能加强界面细节。在一些单调的纯笔墨界面，假如有了图形的帮助，全体计划又有了新的以为。
有哪些办法来运用图形
在界面计划中，图形的运用办法厘革多端的，但是有些使用后果并不佳，招致界面没有什么计划的提升，反而成了一种装饰。为了计划而计划这就是所说的地道的装饰主义，固然看上去顺眼，但是只需换个颜色在任何产物都能使用。
综合现在我所了解的一些很好的运用办法与思绪，总结总结了三个大的朝向，最初一点是一个使用图形必要注意的一些紧张点：
- 品牌DNA标记的运用
- 底纹图形的运用
- 点与线的运用
- 使用图形必要注意的点
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，群众号：光阴UX，各位都是产物司理专栏作家。百度高等UI计划师，眷注互联网To C产物，眷注物联网车载方面，善于产物界面计划，产物基本计划言语界说，前瞻性计划作风探究。
本文原创公布于各位都是产物司理。未经允许，克制转载
题图作者提供
