网页动效设计

UI设计的学习内容是很丰富的，同样在学完UI设计后能够做的工作也是比较广泛的。源码时代UI设计学习完能做的工作：视觉设计师：实现平面设计、企业形象设计 、卡通形象创作等；WEB网页设计师 ：实现WEB网站产品设计、元素设计，深入学习WEB端的交互设计理念；电商产品包装设计师：实现通过色彩搭配、设计构图、创意思路等完成电商创意广告设计和店铺专题设计。用户界面设计师：此阶段学习可以胜任用户界面设计、APP设计、产品用户体验设计与AN交互动效设计等工作。全栈UI设计师：学完这几个阶段可以完成品牌视觉形象的设计，web网页的设计与前端布局，移动APP的视觉设计规范与交互动画设计，HTML5、CSS3动画情景专题页面的设计与制作。

　　HTML5页面制作工具，大体分为两类：基于HTML5的网站工具和手机APP工具（当然还有一些其他的，例如基于微信公众号的等，下面也会介绍）。　　先总的说一下个人感受1.基于HTML5的工具网站：功能较强大，单页面的操作性较强，可完成各种页面交互效果；但是某些时候会有操作“失灵”的现象，如上传图片失败，点击保存失败，生成失败等。原因你懂得~2.手机工具APP：相比起工具网站来讲，显得比较顺手，有大量模板套用，制作简单快捷；但是拘泥于现有的模板，使得单页面不会有较大的可操作空间，从而无法实现DIY交互效果。　　下面展开说下每个使用过的工具吧基于HTML5的工具网站：【兔展】 优点：页面DIY程度较高，动效实现起来也简易方便，可制作比较任性的H5页面。缺点：屏幕界面大小不可调节，上传的图会比例失调；生成后到各尺寸屏上页面会存在拉伸现象。（此图意在说明上传的图片的尺寸都是网站自己默认的一个尺寸，不是图片本身的尺寸，不利于使用者调整）【MAKA.im】 可以具体编辑，单页操作性较高，有新手（有模板）和高阶（无模板）两种编辑模式；翻页效果比兔展多，模板也更强大一些。【居高互动刊】 优点：最简单易上手的工具之一，根据提示一步一步的添加，共4步，最后生成微杂志。相比其他在线工具，较稳定。缺点：目前没试通制作单页上的交互效果，没找到开启pro功能的入口。【ANIMATRON】 优点：像flash的在线版，功能强大，可以创建HTML5动画。适合有动画基础的人做演示制作。缺点：需要动画制作基础；工作界面响应时间长；貌似只能分享到twitter、Facebook、google+、tumblr？【iSpring 7】 噱头是PPT转HTML5工具，完美与PPT兼容，可制作Html5移动课件。不过，目前我只能连着VPN再用Safari才能打开网站链接。【秀制作】 优点：版式轻松，制作快捷，宽带稳定。缺点：对图片和文字在各种屏幕上的显示没有做很好的适配；不能对模板中文字的编辑调整位置。手机工具APP：【初页】优点：模板质量高，套用模板编辑时效率高，操作简单快捷，效果和体验在制作H5页面的APP工具里面算是出类拔萃。缺点：单页面可操作性较低，仅支持套用模板。【快邀约】快速制作邀请函优点：易上手，省时高效，便于统计。缺点：页面简陋，只能选择固有模板创建文字和添加图片。【易企秀】中小微企业的移动场景营销管家优点：套用模板，创建快捷，用来做企业介绍、产品推荐。拥有强大的推广统计、客户管理功能。嗯，这里应该赞一个。缺点：只能用模板，DIY程度低；统计数据是否准确需要进一步确认，目前看来可能有遗漏数据的现象（在小范围测试中，统计到的数量小于应有的数量）。【微贴】：通过微信公众号创建H5页面优点：手机公众号内直接创建简单页面，根据提示创建即可，无脑方便快捷。缺点：只是单页面展示，承载不了交互效果等特效和内容。　　总结　　工具网站做的H5页面，多注重单独页面的自定义交互方案，DIY程度高，相对来说用时较长，又受制于带宽因素，故影响操作；工具APP做的H5页面，多注重效率，目前都是套用模板，因而对单页面的DIY程度较低，交互效果受限。作为我个人而言，移动互联的新任PM，我平时常用到的是【MAKA】和【兔展】，这两个相对来说更适合半天时间来完成；如想快速制作展示页面就用【初页】，这个在功能效率与设计感方面更突出一些；组织活动、制作邀请函、分发活动通知等用【快邀约】；平时推广新产品、联络客户和招聘新人用【易企秀】。转载

一句话，美工从事的是技术性的工作，而设计师不仅仅要有技术，要懂得创造。举个例子： 淘宝美工：一般来说懂ps就能能干，只要知道淘宝详情页，直通车之类的的尺寸要求，布局要求，就可以胜任。干的工作无非就是排版、修图、在图上加字。之类的，把控整体，包括颜色，样式，字体，图片的风格统一。 手机UI设计师：要懂得ps，懂AI，熟悉主流手机设计尺寸，要会动效AE或者sketch之类的，要会会设计logo。要懂颜色，要懂用户需求。要会切图，要懂一些代码，知道什么样的效果能不能实现。 总之设计师是美工的进阶，需要的不仅仅是技术，还要有灵感要懂创作懂人心。

2017 年会出现哪些新趋势?1. 传统网页设计的消亡网页设计正从传统的概念中逐渐的消亡。或像 Eric Meyer 在最近的 Offscreen 杂志中所说的，他停止称自己为网页设计师，而是称自己为“体验设计师”。在传统的网页设计中，设计的作用是让研发人员看起来不错，而现如今网页设计已演变的不仅如此了。网页设计师(或体验设计师)不再只是使网站“看起来美丽”。 相反，他们需要研究用户的体验以及他们之间的故事。2. 对话式 UI2016 年是对话式交互发展的重要的一年，作为 hashtag 的创始人以及前 Google 员工Chris Messina 说：“2016 年是对话式商务的元年。”Chris 在这篇文章里提到，人们将通过聊天应用，通讯应用和其他自然语言界面来与公司、服务商和机器人进行交互。作为通讯应用平台(例如 Slack，Facebook Messenger 或 WeChat)也超越了社交网络应用的下载，企业开始思考如何利用这一变化。因此，对话式用户界面(例如网站)的设计，将成为大多数网页设计师在 2017 年关注的重点。虽然，仍然有诸多问题尚未解决，但请放心：对话式界面将成为 2017 年里的一个主要的话题。3. GIFs 和其他动画众多的网站和应用程序正在使用着动画，而 GIFs 也逐步的成为了主流。作为 Buffer 网站的内容制作官 Ash 说：“GIFs 是伟大的。它们无处不在。”现在它已经内置到 Facebook 和 Twitter 中，你也可以将 GIFs 用于你的网页设计。但不要过度的依赖它们——虽然，它们很好的吸引了用户的注意。GIFs 可让你提供更丰富的产品体验，演示工作流程，或者为你的客户提供简单的指导。随着多款 GIF 制作工具的出现(如 Photoshop，Giphy 或 record.it)，网页设计师在其设计的过程中也不会受到限制。4. 下一代响应式设计响应式设计将继续占据着主导地位，因为它是实现最佳用户体验的有效方式之一。CSS media queries 为网站提供了灵活性，并根据访问网站的不同设备进行调整。2016 年 4 月，谷歌对网站的排名算法进行了调整，并对网站内容进行了优化。我们看到了不少公司正忙于重新提升他们网站的 Google 排名。作为建站者，我们必须接受这种情况。虽然，没有一个通用标准，但我确信的是网站提供的选项越少，响应的时间越短，那么网站的转化率就会得到提升。5. 极简主义的网页设计在 2017 年极简主义将会达到一个全新的高度。当用户点击首页后，呈现的将是类似于“卡片”一样的展现，它们成为了用户获取网站信息的入口。而对于网站本身，多图片的展示也可用于可视化的专题推荐，并可以促使用户进行点击。Netflix 就是一个比较成功的网站示例。卡片图像不仅能够诠释节目或电影的内容，而且可以减少网站的使用空间。总体上，人们更青睐那些在视觉上清晰、简单的网页设计。6. 数据可视化现如今，数据和分析越来越重要。而大品牌服务商正为用户提供了一个查看自己网站的统计数据的机会。通过可视化的数据展示来增加用户与数据间的交互。当涉及让用户更好的表达时，丰富多彩的图表会特别有用。例如你可以使用 Tableau 来创建吸引用户注意的图表。7. 减少图库图片，增加真实照片这是一个简单却有趣的网页设计趋势。 在过去几个月浏览网站的过程中，我们发现使用图库图片的网站在不断的减少。作为用户，我们更愿意看到那些能够表明公司或业务的照片，而不只是一张通用的图片。我也有这样的感觉，网页设计师宁可不选择图片，也不会使用图库图片。摄影是一种艺术的表现形式，却被人们遗忘了若干年。但在2017年它会强势回归。然而，铭记于心的事情是你网站的服务目的是什么。因此，上述的一切，包括网站图像的选择，请务必要这样做。个人照片(团队照片)同样很受欢迎——请给品牌一个门面不仅真实图像的使用率在不断的增长，而且像卡通、漫画以及其他插图的使用比例也在增加。尤其是在一些科技类的社区中，通常会用一则漫画来谈论特定的主题或阐述一些细节。8. Material Design近年来，由 Google 推出的材料设计语言正稳步的推广到其应用程序中，包括 Gmail，Google 地图，Google 云盘和 YouTube 。而早在 2013 年，材料设计就以搜索词的形式出现了，但直到 2015 年它才成为了主流。它是一种在页面上创建具有意义的层次排版结构的设计方法，在移动和响应用户动作的同时，将用户的焦点绘制到不同的区域。他们称后者为材料动效。而材料设计则是利用几何形状从视觉上来增强他们网站的体验。由于它具备极大的灵活性，以及所有设备的兼容性，它也越来越受欢迎。这是一个关于材料设计及其未来的持续讨论。要详细了解材料设计，请参阅Google上的简介。9. 长滚动页网站它是一个拥有利弊的长滚动页网站。总而言之，我们看到了越来越多的长滚动页网站的出现，例如 Facebook，Twitter 或 Instagram 。它们看似无底，然而又很成功。在 Facebook，Twitter 和 Instagram 网站上，用户通过长时间滑动页面，来不断的刷新与浏览新的内容。作为慵懒的人类，我们已经习惯了现在的行为方式。许多网站也都在摒弃菜单和标签选项，取而代之的是将所有内容放在一个长长的页面上。而网站也可以拆解为图像、文字与视频，用以增添一些让人们感到有趣的体验。那么，就继续愉快地滚动吧!10. 字体排印越来越大字体排印越来越大，并且更大胆。2016 年我们已经看到了字体的大小与外观设计的增长，但这种趋势不会很快就停止。品牌名称将会变得更大、更醒目，甚至会全屏出现。而动态的颜色与纹理也将添加到那些有趣、充满活力的字体中，并创造出一个让你“哇”的效果。无论是用于绘图，还是用来吸引用户的注意，字体排印工作都在有条不紊的进行着。而大型字体的排印可以有效地打破网格的界限，尤其针对那些拥有较长滚动页面的网站。总结：虽然，我们认为这份列表上的所有内容都相当不错的，但不要尝试将每一个趋势都纳入到你设计的新网站上。它们中的一些适合为企业服务，而你也可以选择一些客户需要和想要的样式和功能。同时，不要尝试太多不必要的功能，这样会立刻降低网站的用户体验。所以，请谨慎的选择，最重要的是要有创意。

UI，指的是用户界面，也就是人与机器互动的界面。同时又有GUI和WUI之分，不过一般的话统称是UI设计师。在PC端从事网页设计，我们称呼WUI设计师或者网页设计师。在移动端，从事移动设计的称呼为GUI设计师。而UI可以理解为UX的一个分支，不同于 UX 设计师需要关注产品的整体感觉，UI 设计师更关注产品以怎样的界面呈现。其实互联网领域中，UI 和 UX 设计师的界限相当模糊，在很多创业公司，这两个设计角色是合二为一的。这个就是为什么很多中小型的公司为什么要求UI设计会交互，或者交互又要懂UI的原因。国内而言，目前一般把屏幕上显示的图形用户界面（GUI ：Graphic User Interface）都简单称为UI。我们经常听到的UI设计师，其实指的是GUI设计师，也就是图形界面视觉设计师，负责产品或网站的图形、图标、色彩、视觉风格等，决定营造出什么样的视觉体验。从视觉层面把控产品界面设计，确保UI稿在视觉上清晰的传达UX设计师的交互设计稿，也就是高保真视觉稿。UX ，英文为 User Experience ,指的是用户体验。一般而言，国内 UX 设计师，也称为交互设计师或 UE 设计师（而国外的 UX 设计师指的是用户体验设计师，交互设计师指的是动效设计师）。UX 设计师主要关注用户对产品的体验感受，确保产品逻辑的流程可以跑得通，甚至跑得顺、跑得精彩。正如一千个人眼里有一千个哈姆雷特，一个设计问题往往也没有唯一解。UX 设计师会深入场景，探索多种不同的解决方案，这种深入思考通常能产生创新方案。UX 设计师们通过头脑风暴、角色扮演、故事版等设计方法探索设计机会点，向着创造出“最好的”用户体验目标而前进，典型案例就是为新用户设计一套令人愉悦的登录流程。总的来讲，UX设计师是设计人与信息产品的流程和关系，归根结底都要研究人、事、物的联系，它是一个囊括计算机工程、心理学、设计的交叉学科。进行利益相关者访谈、用户访谈，挖掘用户需求，提炼用户任务流；完整体验不同产品，挖掘交互设计模式，设计交互模式，撰写交互设计稿，并最终形成交互设计规范/UIspec；跟进视觉设计和开发，确保产品正常上线” 这可能就是UX设计师日常事项。设计产出物 ：流程图，网站地图，故事版，交互设计原型图（线框图），UIspec ，交互设计规范。用的比较多的工具：axure，Visio，Sketch，Illustrator，Fireworks，InVision，PPT，Keynote，Photoshop。

动效设计软件有哪些？看到这里可能你最想要知道的就是哪些软件可以做动效？目前市面上确实蛮多的，丝路教育小编建议学好一个，够用就好。学多而不精其实就是浪费时间！1.Adobe After EffectsAE这个软件我想都该知道~火得一塌糊涂，如果我没猜错的话，它目前属于设计师学动效的首选。它的特点就是强大且牛逼。基本上要的功能都有~UI动效制作其实只是用到了这个软件很小的一部分功能而已~要知道很多美国大片都是通过它来进行后期合成制作的~ 配合PS和AI等自家软件来说，更是得心应手啊~dribbble上炒鸡多的大神都是用这个软件在show哦~毕竟这个软件做demo那是拧〔犇逼的~但是有些效果程序猿不见得能够帮你实现出来哦~ 因为实际的项目产品受太多的制约啦~木有那么多程序猿会没事给你做动效的！2.Adobe Photoshop可能很多人都认为ps只用来作图和处理图像的，并不知道ps可以做gif~然而当AE没有火起来的时候，我们这些老ui设计师们都是用ps做gif，用flash做demo（过去我们只需要做PC桌面的动效）。如果我没记错的话，ps从cs6之后开始进一步加强了动效的模块，现在的版本能够实现很多相对复杂的动效哦~而笔者喜欢用ps来制作简单的表情动画，逐帧动画用得居多3.Adobe FlashFlash可以说是过去的王者，也是由于时代的发展原因，现在基本被淘汰了，这里不多做解释，具体可以百度哦。（据说特别耗费cpu和占用内存，软件里面有都爆卡~不淘汰才怪）现在很多很low的网页游戏还在用这种技术~4.Pixate这个软件被大牛Google收购了~然而它被Google收购一年后：Pixate Studio宣布却于10月31号被停止更新了~凄凄惨惨戚戚。简单说下它的优缺点：Pixate是图层类交互原型软件。优点：可交互，共享性强，和Sketch结合相对高，同时对Google Material Design的支持比较好，有许多MD相关预设。Pixate的缺点是没有时间线，层级管理不是很明确，图层一多就会非常的繁杂。5.Origami这个软件可以用一句话来形容：超强大的高难度原型工具。要是没点代码知识做压惊~~建议远处观望就好~6.Hype 3hype 3也算是火了一小段时间的~号称无代码动效神器，像AE一样使用时间轴就做可互动的动画。PC、手机、pad端都可以直接访问（以web的形式），也可以导出视频或者GIF。3.0版还有物理特性和弹性曲线，可以发挥更强大的动画效果。对中国人来讲，它原生支持中文这一点也非常棒！配合sketch效果也是杠杠的·~~7.Flinto界面跟Sketch很像，如果会用sketch那么上手很快。能够快速实现各种滚动、转场、点击反馈效果。手机和电脑端的预览都非常的流畅。貌似现在用的人不少。8.Principle这个软件的和上面的flinto有点类似~界面和sketch类似，同时配合sketch也是非常方便。它主要是做 2 个页面间过渡专场特效，元素切换，细节动效的工具。优点很明显，效率高，质感好，缺点就是不能做整套原型。9.CINEMA 4D说到C4D或者大家第一反应是它是三维软件啊~没错！但是它做起动效来也是帅破天际的。10.keynotekeynote相当于windows的powerpoint，是个幻灯片软件。但是！或许你并不知道，据说苹果的交互设计师都是用keynote做交互演示的......只要能够熟练掌握这个软件，目前app里的绝大多数动效都是可以做出来的~但是相对复杂一点的动效实现起来就有点不够.......但是已经很屌了好吧~~笔者经常为了省事直接都是用它做个简单demo给程序猿看的。快捷方便啊~要知道时间就是金钱啊！好啦~由于丝路小编也并不是全部了解目前市面上的动效软件，按照自己的理解基本上一些相对主流的动效制作软件就是上面这些，如有漏或者不对的地方还请见谅~