UI视觉设计师突破和独立UI设计教程(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

其次就是,在做新产品或者练习的之前,我们都需要明确几个点就是,1.我的产品性格关键字是什么?(比如稳重的、活力的、简约的)2.我的产品主色调是什么  3.我的产品风格是什么(卡片的,拟物的,通栏的)  4.我的产品图标风格是什么…..等等之类的问题。


当我们搞清楚了这几个问题,就会对我们接下来的工作减少很多的时间,也会减少改稿的次数,比如高高手的性格关键字是:简约、设计感、简约的,颜色是品牌色等等等。在设计过程中就开始不断的把品牌规范制定好,后续的沿用就会减少大量时间以及说服力。


UI视觉设计师突破和独立

接下来是设计师的另外一项需要 突破的方法。就是要学会做模块化规范,这会大大减少你接下来的修改时间,以及让整套视觉看起来更合理。


UI视觉设计师突破和独立



比如图上是一个示意图,你在设计一款产品的时候,你就要有意识的为后续的界面做风格延续规范制定,比如左右两边间距的规范制定、模块之间上下的间距、文案主副标题的字号、正文的字号规范等等


UI视觉设计师突破和独立



比如,产品会有有非常多图标,你可以经过分析,找到符合产品调性或者基因的图标风格,先设计一个,然后把它组建模块化风格延续,让后续的图标看起来都是一个产品的。那么总结起来在工作中的几个工作原则就是:


1.充分了解原型图以及用户心理需求

2.明确产品性格、调性、风格、主色调等等

3.制定模块化的标准,比如间距,字号规范,图标风格等等

4.制定产品设计规范模版


UI视觉设计师突破和独立


3.在工作和练习中如何做出好的动效


可能有人会问我们为什么要做动效设计?


动效作为一个更高效更灵活的信息载体,可以在有限的时间内呈现更好的视觉效果,也是目前高质量APP不可缺少的信息载体之一,2、能为静态页面提供更清晰的信息关联形式。3、我们能通过动效设计产生和用户之间的互动,产生共鸣!


一款好的产品,一定多多少少会有动效的介入,接下来会对以下几点进行一个讲解:


1.如何在平淡界面中融入动效

2.如何锻炼自己动效的逻辑思维

3.如何和开发哥哥对接动画


在开始之前,我们先看看市面上优秀的一些商业动效案例!


UI视觉设计师突破和独立

UI视觉设计师突破和独立



图上是国外设计团队Ramotion的设计作品,非常合理的在资金管理网站融入了动效,看起来既时尚又提升产品调性!


UI视觉设计师突破和独立


3.1 如何在平淡界面中融入动效


UI视觉设计师突破和独立



这是年前的一款产品页面,看起来中规中矩但是却少了亮点!如何打破这个格局呢,那就是融入动效来辅助产品。首先带大家分析一下,我的设计初衷是什么。首先首图我融入了左上右下两个圆圈,是为了做循环动画而设计的。那么还有什么地方可以融入呢?


接下来我们做一个拆分的步骤给你们看看!


UI视觉设计师突破和独立


大家不妨仔细看几分钟,分析一下我当时的想法。实际上在这个平淡页面上我融入了3种动画第一:onepage的两个圆圈循环动画。第二:重点文案逐个进场,吸引用户多次阅读 。 第三:第二模块的四个图标隐藏在手机底下,滑动的时候出来。


UI视觉设计师突破和独立


实际上在平淡页面中融入更好的动画,需要不断的思考,你在做设计的同时就要考虑动画的存在,不管最终能不能实现,实际上我在设计这个网站的同时,就是基于动画的存在来实现的布局和结构,总结几点就是:


1.动画基本模式:不透明度改变、位置改变、缩放改变、旋转改变(可同时叠加)


UI视觉设计师突破和独立


3.2 如何锻炼自己的动效逻辑思维


在平时日常工作和练习中,动效都是能提高品质感以及体现设计表现力的比较基础的方式,下面我们聊聊如何锻炼自己的动效逻辑思维!


首先和大家说的是,这件事并没有捷径,需要通过不断的分析,和练习来提高,那么怎么去执行我会和大家细细聊一下!


1.学会分析别人的动效作品

2.自己主动练习


UI视觉设计师突破和独立



3.21 如何分析别人的动效作品


我们先看一组我年前的案例!


UI视觉设计师突破和独立



我用了以下三张图做一个示意,首先我在构思的时候,是希望用户滑动进来的时候,是由一台大型的汽车,向上的缩小,把左右可切换的车做一个大小比例关系,通过左右切换的时候汽车之间做一个大小变化和文字的变化。


UI视觉设计师突破和独立



这是分析别人动效的方法,其实就是多次观看反复观看和思考的过程,并且记录到脑海里,下面推荐一些常用到的动效学习灵感网站。


UI视觉设计师突破和独立



Dribbble就不用多介绍了,是全球最大的设计灵感聚集地,我一般会在上边建立很多的文件夹,比如loading动画、转场动画、翻页动画等等,整理的越清晰,后期参考的意义就越大。另外就是要多去观看安卓还有ios的动效官方案例,学习巨人的动效方法,对商业案例很有帮助。

UI视觉设计师突破和独立



3.22 自己主动练习


万事只有自己主动练习掌握了才有作用!平时可以多做一些概念性的尝试,比如我要做一个艺术类的网站,如何融入动效呢?


UI视觉设计师突破和独立


图上是我们一个粗糙的原型图,那么你们认为可以融入什么动画呢?


UI视觉设计师突破和独立



首先可以考虑在文字上做动画,比如右侧的图片上下滑动切换的时候,左边的文章模块有一个淡入淡出的动画、又或者有一个向上浮动消失切换的动画、又或者右侧图片上下滑动的时候有一个淡入淡出的动画,怎么做,要靠自己多去思考和尝试!还有更多的细节,可以仔细观看,分析我的思路!


UI视觉设计师突破和独立



UI视觉设计师突破和独立


3.3 如何和开发哥哥对接动画


工作中有四种常见的动效交接方式,接下来会给大家了解到:


方式一:使用png序列

png序列是比较常见的一种动效落地方案,兼容性高,但是png序列会占用较大的空间,一旦动画多起来,对产品整体流畅性有挑战。优点是可以把动画高度还原!


方式二:使用gif

gif是dribbble常见的动画文件格式,很多新手可能误认为动图就是gif格式的,但是安卓设备没有提供原生 gif 的 api 支持,且同样占用较大的空间,清晰度不太理想,在这里不是特别推荐这种方式!


方式三:使用Bodymovie插件导出json文件

可能很多小伙伴都了解过Bodymovie插件了,它配合的软件是after effct,我们用这个插件可以吧动画导出json文件,直接和开发对接,支持渲染svg/canvans/html。并且开发可以控制动画的暂停与播放,这意味着Bodymovie导出的json文件是非常便捷且可编辑的一种方式,在这里推荐大家作为首选,具体插件安装可以自行百度下!


方式四:手动标注

目前还是有很多的产品需求,需要用到手动标注这个比较枯燥的工作,但是也是必不可少的,一般情况是以转场动画、元素模块进场等用的比较多。我们一般要在文档写出元素名称、元素贝塞尔曲值、变化的属性(缩放、位移等等)我们下面进行一个案例讲解!


UI视觉设计师突破和独立



这个案例,我们需要给到开发的文档是什么呢?首先分析一下,运动元素是 汽车,变化属性是缩放和位移,贝塞尔值是多少具体看你们ae调节的曲线了,运动了250ms。然后等汽车缩放位移之后,对应文字从不透明度0变为1,那么怎么写这个文档呢?


UI视觉设计师突破和独立

实际上会更复杂,这里就不一一举例,大家可以参考我的方案来研究研究,来完善运用到你们的商业项目当中去,祝大家动效做的越来越好!


UI视觉设计师突破和独立


4.1 坚持不懈大步向前、UI自学提升的方法


自学其实是最快能提升的方法,它能锻炼你的思维和解决事物的能力,下面推荐几个方式:


方式一:制定昼夜学习目标

方式二:自己给主题需求练习

方式三:改版上线的优质产品,锻炼交互和视觉能力


其实我这三个方式是一个循环渐进的方式,大家可以自由配合安排,下面一一讲解:


方式一:制定昼夜学习计划


我们常说:“站在岸上学不会游泳”,设计修行之路也正是这样,不动手永远不知道自己的水平纠结到了什么地步,差距在哪里,所以这一步就要讲讲如何制定可行性提升计划。


很多朋友问我,关于一些四昼夜计划的内容,我就在这里说一下吧。


UI视觉设计师突破和独立



首先,四昼夜计划仅仅是我起的一个计划命名,一个昼夜分为28天,一个昼夜会有一个核心学习领域和目标。四个昼夜为一个季度。


比如,我当初认为自己的图标设计非常的欠缺,我就会提取出这个元素,作为一昼夜的核心学习主题,也就是这样:


一昼夜计划核心:图标综合训练


UI视觉设计师突破和独立



训练包含:线性ICON绘制(200个)、填充形ICON绘制(200个)、主题型ICON绘制(100个)、扁平微拟物ICON绘制(100个)


 收藏