ui图形插画-为什么UI设计师的加分技能是插画

AI插画基础教程,教你简单搞定UI小插画

我们在使用AI的时候,AI工具的组合步骤不同的时候,出来的效果都会完全不同,本文就来为大家介绍如何配合基础工具,重复使用图形我们可以做出非常多样化的设计,下面我们一起来看看吧。

1、制作花盆基础形.

选择原角矩形工具,通过按住键盘上、下键控制切圆角弧度。

2、选择‘删除锚点工具’,删除掉其中一个锚点后,切换为“直接选择工具”,拖动至中间,再次切换“钢笔工具”---“锚点工具”,按住鼠标左键不放拖出上方贝塞尔曲线,调整好弧度。

3、选择“删除锚点工具”,删除右顶点锚点(切忌不能直接delete,否则会变成非闭合路径).

4、选择“直接选择工具”,拖动两边锚点为以下形状。

5、接下来我们要来制作花盆口,包含花盆外圈和内部土壤。

首先把填充颜色选择为土壤色,描边切换为花盆外圈黄亮色。选择“椭圆工具”,拖出自定义大小花盆口,大小就按自己喜好啦。然后放置为花盆上方。

6、虚线装饰。

制作花盆不是最复杂的,如何利用软件自带装饰做效果同样可以提升工作效率哦。

接下来我们利用AI自带描边款式加花盆的装饰细节。

切换“选择工具”,选中刚刚制作好的花盆雏形,按住Alt键同时点击鼠标左键,往右复制出花盆,切换填充为描边,确保填充为关闭状态哦。

7、调取描边款式。

如果描边选项没有在选择范围内的童鞋,请参考以下图示1-2-3-4步骤,这是隐藏的装饰功能,里面很多都是可以直接调取出来使用。

TIP: 这里还有个技巧,自带的虚线默认设置是黑色的,无法吸取自定义颜色,那么我们也有办法进行设置。

首先双击“虚线”选项,随后出现如下面板, 在面板中找到着色--方法--色调,点击确定,就可以自定义选虚线颜色啦!

8、制作更多细节。

沿用步骤7中做法,复制一个花盆口,关闭填充,更换描边为虚线。在这里我想要的款式为只有下半圆,点击选中上方节点,选择delete,就得到下半圆弧形咯!

9、花盆暗面制作。

选择椭圆工具,按住Shift键,拉取出一个正圆形。同时选中花盆和正圆,选择“窗口”--“路经查找器”,选择第二排第一个“分割”,接下来把剩余不要的边角料delete就ok啦。

10、勾勒仙人掌和小花。

用钢笔工具勾勒出如下图形,也可以自己设计哦,外形不用太规则,大自然的产物有些不规则才是最美的!此外注意制作仙人掌暗面时建议也用复制的办法,这样可以保证和原本亮面完美重合。

11、俄罗斯风花盆制作。

因为这种配色出现在俄罗斯教堂中很多次,花纹是极简的,所以我命名为俄罗斯风。

复制红色花盆,更改为喜欢的配色,以下是教程提供配色参考和色值。

12、选择“钢笔工具”拉出水波纹般弧度,切换描边为虚线。

仙人球部分可以直接选择椭圆工具,再选择锚点进行变形。

13、接下来要制作第三个日式和风花纹花盆。

第一步钢笔工具绘制出单个仙人掌造型,然后复制出大小五个, 错落拼在一起。

14、制作一个单位和风花纹。

选择椭圆工具,按住Shift键拉取出正圆圈,关闭填充。复制几个同心圆---以圆圈中心放大。

接下来,选择“矩形工具”拉取矩形块,放置在圆圈中心处,顺序在圆圈上层形成遮挡。

然后,选择“窗口”---“路径查找器”--“分割”,删除掉不需要的下半部分。一个花纹的基础单元制作完成。

15、选择颜色,描边为纯白色,蓝色与花盆本身颜色一致,色号参加下图。

接下来复制单个花纹一层一层叠加上去。如何让多余花纹去掉,完美绕排在花盆周边呢?

同样采用“路径查找器”--“分割”,但是这里需要注意,我们需要分层次来分割。

首先参考下图step1中,选中底排两边花纹、花盆外框,然后分割--删除不需要的边角;再次重复以上动作,选中第二排两边花纹、花盆外框,分割--删除不需要的边角,图示请看step2。

至此我们三盆不同的仙人掌就制作完成啦!为了突出效果,我们可以用相同的素材搭建不同的插画效果哦!一种沙漠风,一种星空风,还有其他风格期待来交作业咯!

人是高度视觉化的生物,能够即时处理大量的视觉信息,据统计我们所获取的90%的信息都是视觉化的。单一图像比起大块的文本对于用户而言更容易消化吸收。

因此,在许多情况下,静态的图片能够传达出相当复杂多样的想法,尤其是在进行大范围展示的时候,它比文本的表现力要强的多。人的大脑对与图像信息的处理速度要比识别文本要快得多。

长期以来,图片都作为UI界面中最具有表现力的元素而存在,而最近几年,插画在UI中出现的比例越来越高,在许多地方都有替代图片的趋势。其实原因并不复杂,插画比起图片可控性更强,更容易发挥创意,营造氛围,传递信息。从内容到技术细节,插画都在某种程度上超过现成的图片。

插画的特点

实际上,现在我们所说的插画(illustration)的词根 illustrate

原本的含义是“澄清,说明”。在现代平面设计中,插画是颇为常用的展示性元素,是视觉传达的重要工具。插画在设计作品中,常常用来引导、启发和呈现信息,更有针对性地、视觉化地同用户进行交流。真正高效的插画一定是有针对性的,易于识别的,并且能够被不同的用户轻松理解的。

想要让插画最大化地为用户创造价值,你可以参考下面的四个范例:

1、首页插画

好的网页设计设计对于潜在用户的影响是巨大的。许多用户在判断一个企业、团队或者品牌的优劣的时候,他们的网站的优劣是一个重要的判据。这也是为什么现如今网页设计师们都在想尽一切办法提升网页的用户体验。

这一点,网页和现实世界是一样的,好的第一印象往往源自于优秀的视觉效果。吸引用户,激发想象力,这样才能和用户构建起紧密的关联。独特而传神的插画的价值就在这里,尤其是当这些独特的插画呈现在打开率最高的网页首页上的时候。和品牌气质所匹配的插画不仅能够帮网站筛选用户,而且能够强化品牌属性。

2、吉祥物

品牌所传递的感受、气质最好的落脚点就是品牌代言人和品牌吉祥物。吉祥物能够让虚拟的品牌调性更加真实,作为品牌的外化表现,吉祥物能够让品牌给人更加值得信赖的感觉,让品牌更加富有吸引力。

吉祥物的呈现形式很多,在网页上,它通常是以插画的形式出现的。吉祥物在UI界面中出现,能够赋予界面交互以生命力,保持用户持续的注意力,成为整个用户体验中无法忽略的重要元素,提升整体的参与度。

目前,电子邮件服务供应商 Mailchimp 可能是借助吉祥物来提升用户体验最成功的案例。Mailchimp

每个页面上都有黑猩猩吉祥物 Freddie 扮演不同的角色,搞笑,甚至替代某个元素来强化互动,它的存在让Mailchimp

的体验和用户黏度都有了不小的提升。

优秀的吉祥物是积极用户体验的基础。

3、新手教程和新用户引导流程

插画还有一个重要功能,就是提供视觉引导。插画能够将复杂的概念简化为易于理解的视觉信息,图片比文字的呐喊更加响亮,这也是为什么插画会常常运用到新手教程和新用户引导流程中来。

新手教程和新用户引导流程常常会介绍应用或网页的主要功能、优点,插画以图形化的形式为用户提供上下文环境,让界面所要传递的信息更加明朗,帮助用户明白如何执行当前步骤,怎么进入下一步。

当页面或者APP采用极简设计的时候,界面搭配一幅简单的插画来传递关键性的信息,不需要太多的文本就可以了。

富有吸引力的插画和强互动性的功能让刚刚进入新用户引导流程的用户对APP产生兴趣,从中感到快乐的用户会更加渴望使用APP。到了现在这个时间点,插画和动效往往会搭配起来使用,达到最大化的效果。

使用插画能将一个漫长无聊的教程变为一段有趣的旅程。相比于复杂的文本解释,图像、插画和动效能让用户更轻松吸收和理解。即使你不会绘制复杂的插画,简单的漫画也能够达到类似的效果。

4、奖励界面插画

对于游戏我们这代人应该有所接触,甚至非常熟悉。几乎每个游戏在达成成就、闯过关卡之后,都会出现奖励界面,“解锁成就”这个词就是由此而来的。解锁成就为什么对于用户这么重要呢?

一方面,紧张的游戏过程带来的成就感让用户感到快感,另一方面,解锁成就的奖励界面能够给用户一种屏幕背后有个真实的人在为他们庆贺。这是一种情感上的交互。

奖励机制的核心在于,通过积极的情绪刺激来建立情感联系。这种积极的情绪激励严格意义上算是情感化设计的范畴,情感上的引导会让用户关注到他们想看的内容,或者让他们看的内容,部分应用的缺陷甚至可以被用户所忽略。

成就徽章是成就系统中最常见的元素,一系列设计精巧的徽章图标加上游戏和用户互动,能够让用户逐步沉迷到这套体系当中。

精致的插画出现在成功状态的页面当中,能够让你的用户感觉到被重视。

结语

插画增强用户体验是客观存在的,它是提高UI吸引力的强大工具。虽然插画的运用并没有太多硬性的规定,但是务必记住一点:确保插画的可用性。插画最终是要应用到产品当中,成为产品和品牌的一部分。

学习UI设计,软件只是UI设计的第一阶段,新手或者零基础的小伙伴可以从软件入手,到后面的设计理论,规范,交互这些设计思维学起。

学习UI设计,首先要明白UI设计师需要做的工作,大致介绍就是界面、图标、动效、交互、切图、标注等,这些内容都需要用到不同的软件。

在这里主要列举UI设计常用的四款软件:PS,AI,AE、ARP、XD、另外还有一些辅助软件偶尔也会用到

Adobe Photoshop

Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件。 Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。ps有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及。PS可以用来从事,平面设计,网页设计,UI设计等多种设计工作。在UI设计中PS的使用率在90%以上,所以作为一个合格的UI设计师。PS是肯定得掌握的。PS可以在UI设计中,绘制界面设计,图标设计等

Adobe illustrator

Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,作为一款非常好的图片处理工具,Adobe Illustrator广泛应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等,也可以为线稿提供较高的精度和控制,适合生产任何小型设计到大型的复杂项目。在UI设计中AI的使用率也是非常之高,主要可以用来绘制图标,界面等设计,插画等

Adobe After Effects

Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件,适用于从事设计和视频特技的机构,包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。属于层类型后期软件。在UI设计中主要主要是用来做动效设计,交互效果,

Axure RP

Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理 。

Axure RP已被一些大公司采用。Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等,另外,架构师、程序开发工程师也在使用Axure。

在UI设计中主要起的作用主要是用来做交互原型图

Sketch

这里重点介绍一下Sketch,它是个很好的界面设计工具,很方便,完全就是为扁平化界面而生的。这在做做流行的扁平化界面设计方面确实方便,比ps效率会高,现在很多UI设计师都喜欢用,但是我们做设计,肯定会接触到各种东西,你可能要画个拟物图标,做个宣传海报,做个网站bannr,做个酷炫的字体效果,那就还是得乖乖打开ps,在图像处理方面目前地球上没有什么软件能超过ps,还有一点,目前Sketch只有mac版,如果公司没有给你配苹果电脑的话就还是安静的用Adobe公司的PS和XD吧,能做好东西就行,不要太纠结一定要用哪个工具。

Experience Design CC

Adobe XD官方版全称Adobe Experience Design CC,是Adobe旗下专业的交互原型设计工具。Adobe XD官方版跨平台支持Win10 与 macOS,并且所有用户均可免费下载使用。Adobe XD CC 2018可快速进行APP设计、网站设计,UX/UI 产品设计,是设计师、产品经理和开发者们必备的设计工具

Adobe Dreamweaver

简称“DW”,中文名称 "梦想编织者",最初为美国MACROMEDIA公司开发 ,2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持,设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

Cinema 4D

UI设计师的附加软件,最近几年非常流行的建模软件,建模渲染效果特别好!因而,成为了设计创意工作者的效率生产工具。现在,无论是影视后期、还是工业设计、或平面设计行业,C4D软件都得到了广泛的运用。用来做一些平面软件达不到的3D效果,视觉效果,能做很多的概念设计,这个软件,能让你的设计表现力更丰富更有趣。

Mindjet MindManager简称思维导图

MindManager,中文商标译作C,俗称“脑图”,又叫“心智图”,是一款创造、管理和交流思想的通用标准的绘图软件,由美国Mindjet公司开发,界面可视化,有着直观、友好的用户界面和丰富的功能。在UI设计中主要用来整理交互逻辑思维层。

蓝湖

蓝湖,产品设计协作平台&原型制作工具。中文版、全免费,支持Mac、Web、iOS。 支持从Sketch一键分享、在线讨论、自动为设计图生成标注,而且只需简单几步就能将设计图变成一个可以点击的演示原型,支持分享给同事,让他也可以在手机中查看设计效果。蓝湖已经成为新一代产品设计的工作方式。

墨刀

一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。墨刀同时也是协作平台,项目成员可以协作编辑、审阅 ,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行Demo展示,或是在团队内部协作沟通、项目管理