2024年网页动效设计 篇1
1.了解您的用户
最重要的是，您必须知道您的用户是谁 - 内部和外部。这意味着了解您的分析应用程序可以提取的所有人口统计数据，是的。但更重要的是，它意味着知道他们需要什么，以及阻碍他们实现目标的方式。
达到这种同理心需要的不仅仅是对统计数据的仔细分析。它需要了解使用您网站的人。这意味着与他们面对面交谈，看着他们使用你的产品（也许还有其他人），并向他们提出更深入的问题，“你对这个设计有什么看法？”
他们的目标是什么？是什么阻碍了他们实现这些目标？网站如何帮助他们克服或解决这些挑战？
不要因为知道用户的需求而停下来。深入挖掘并找出他们需要的东西。毕竟，欲望只是需求的产物。如果您能满足用户的根本需求，您将满足他们的需求，同时满足更多基本要求。
通过分析数据和与用户交流，您将发现的见解将告知您做出的每个决策，从人们如何使用您的界面到您将在该界面中突出显示的内容类型。
2.定义人们如何使用您的界面
在设计界面之前，您需要定义人们如何使用它。随着基于触摸的设备越来越普遍，它比您想象的更为关键。看看吧
应用程序的用户体验实际上是通过简单滑动的轻松和冲动来定义的。
人们以两种方式使用网站和应用程序：直接（通过与产品的元素交互）和间接（通过与产品外部的元素交互）。
有时，互动太容易了。
您的用户是谁以及他们使用的设备应该在此深入了解您的决策。如果您是为老年人或其他手动灵巧度有限的人设计的，那么您不希望依靠滑动。如果您正在为主要通过键盘与应用程序进行交互的编写者或编码人员进行设计，那么您将需要支持所有常用的键盘快捷键，以最大限度地减少使用鼠标的时间。
3.设定期望
与网站或应用程序的许多交互都会产生影响：单击按钮可能意味着花钱，删除网站或对奶奶的生日蛋糕做出贬低评论。任何时候都有后果，也有焦虑。
因此，请确保让用户知道在他们执行此操作之前单击该按钮后会发生什么。您可以通过设计和/或复制来完成此操作。
用设计来设定期望
突出显示与所需操作对应的按钮
使用广泛理解的符号（例如用于删除按钮的垃圾桶，用于添加内容的加号或用于搜索的放大镜）与复制相结合
选择具有相关含义的颜色（“go”按钮为绿色，“stop”为红色）
用副本设定期望
写清晰按钮副本
在空旷的州提供定向/鼓励的副本
发出警告并要求确认
对于具有不可逆转后果的行为，例如永久删除某些内容，向人们询问他们是否确定是有道理的。
在InVision中，单击垃圾桶图标不会立即删除屏幕。相反，它会询问您是否确定并让您知道它无法撤消。
4.预见错误
人们会犯错误，但他们不应该（总是）不得不承担后果。有两种方法可以帮助减轻人为错误的影响：
在错误发生之前预防错误
提供在发生之后修复它们的方法
您在电子商务和表单设计中看到了许多防错技术。在您填写所有字段之前，按钮保持不活动状态。表单检测到未正确输入电子邮件地址。弹出窗口问你是否真的想放弃你的购物车（是的，我知道，亚马逊 - 无论多么可能让可怜的东西伤痕累累）。
预计错误往往比在事后修复错误更令人沮丧。这是因为它们出现在满足的完成感之前，单击“下一步”或“提交”按钮可以设置。
也就是说，有时你只需要让事故发生。那是详细的错误消息真正进入他们自己的时候。
当您编写错误消息时，请确保它们执行以下两项操作：
解释问题。例如，“你说你出生在火星上，人类没有殖民。然而。”
解释如何解决它。例如，“请进入地球上的出生地。”
请注意，您可以从同一本书中获取非错误情况的页面。例如，如果我删除了某些内容，但可以恢复它，请告诉我一行副本，例如“您可以通过转到”已删除邮件“并单击”还原“来恢复已删除的项目。
预测用户错误的原则称为poka-yoke原则。Poka-yoke是一个日语术语，意思是“防错”。
5.快速提供反馈
在现实世界中，环境为我们提供了反馈。我们说话，其他人回答（通常）。我们刮了一只猫，它发出嘶嘶声或嘶嘶声（取决于它的情绪和我们对猫搔痒感到多少）。
通常情况下，数字接口无法提供太多回馈，让我们想知道是否应该重新加载页面，重新启动笔记本电脑，或者只是将它扔出最近的可用窗口。
所以给我加载动画。当我点击它时，让该按钮弹出并弹回 - 但不要太多。当我做一些事情时，给我一个虚拟的高五，我同意很棒。
安排或发送电子邮件时提供反馈和鼓励。
只要确保一切都快速发生。定义任何超过1秒的延迟作为中断。超过10秒，中断。而后者的慷慨：对于大约一半的美国人口来说，3秒就足以导致反弹。
如果页面将在5秒内加载，请不要显示进度条，因为它实际上会使加载时间看起来更长。相反，使用一个并不意味着进步的可视化，就像Mac臭名昭着的“死亡风车”。但不是那样。如果您确实在网站上使用了进度条，请考虑尝试一些可视化技巧，以使加载看起来更快。
6.仔细考虑元素的位置和大小
Fitts'Law是人机交互的基本原则，它指出：
获取目标的
2024年网页动效设计 篇2
很多人对于UI设计的理解还是很狭窄的，以为UI设计师只是做一些app的图标或者简单的网页设计，这也是对UI设计师的一种误解，其实UI设计是关联比较多的职业。目前市面上的UI培训，基本上在四个月左右，就能涵盖所有UI所学知识。
那么去UI培训要学哪些内容呢？
第一阶段：软件基础及视觉手绘设计、软件基础熟练掌握及基础手绘
第二阶段：广告创意设计、视觉设计商业实战
第三阶段：商业品牌视觉设计、商业品牌商业实战
第四阶段：网页版式设计、Web界面设计及视觉包装、Web端交互及用户体验设计
第五阶段：阶段移动端界面及UE用户体验设计、移动端设计基础、Ue用户体验研究
第六阶段：交互动画体验设计、交互设计理念及Axure的运用、Ae交互动画设计
第七阶段：HTML5及css3响应式情景网页设计、HTML网页架构、Css网页样式标准
2024年网页动效设计 篇3
作为过来人说几句吧，去年七月份来到厦门开始实习生涯，作为一个通信工程专业的大四学生，又对通信岗位不感兴趣，在大三下学期的时候学会了html css以及js，技术水平自己觉得找个实习还是没问题的吧，能独立完成页面的布局，会用原生写轮播图，侧滑栏这些常见的组件。会点jq。
刚来的时候还是挺顺利的，顺利的找到了一个1200每月，不包吃不包住的实习工作。但是以厦门的生活水平，房租水电700，平均一天吃30一个月最低的生活消费都得1600元，这就是说我每个月最少得倒贴400元才能在实习下去。起初的时候想想自己没工作经验，能学到东西就好，就留下来实习了。开始上班第一天给我介绍了公司的主要业务，他和我说是做游戏的，我还以为是家技术很强的公司，觉得能学到很多东西，但是下午他们就让人教我怎么去别的平台偷游戏，怎么把那个平台的logo，开始界面和结束界面删除，换成自己的。就这样的工作，我还天真的以为再待几天会让我上手干正事学到点东西，但是两个半月过去了，连ajax这个最基本的都没让我碰过，失望透顶之下决定辞职好好的再学学，留下来只是浪费时间被当成免费劳动力。
接着就开始了我的自学生涯了，在九月多的时候经历了厦门十几年来最大台风，停水停电一个星期，毕生难忘。学习的日子里面先是学习了bootstrap框架，做了几个响应式的小demo，然后看了bootstrap的源码，发现还有sass,less这种预编译工具，遂学之，解放生产力的好东西啊哈哈。接着看了一点的面对对象，继承，多态，原型，原型链这些，看书的，高程3，有点懵逼。看的不是很懂就开始学习移动端自适应web了，主要就是理解rem的特性，通过这个特性和js结合，通过动态改变html字体的大小来实现网页的自适应。其他的和pc端差不多，这点理解就差不多能做移动web页面了。但是，由于手机端上的浏览器一般不用考虑兼容。所以可以用一些比较洋气的东西了，比如说flex布局，真的是个好东西，有了他从此告别浮动啦。当时是看阮一峰大神的博客学习的，推荐看看。
这些学完就到了十一月了，觉得技术应该没问题了，开始忙碌的投简历了，但是，现实是残酷的，几十封简历可能只有一个回的，去面试了还说要工作经验的，要会ajax和后段交互的。当时心里十万只草泥马，老子找实习的哪来的工作经验给你，虽然ajax学过觉得也不难，但是毕竟没在工作中用过，每次都实话实说，结果都是回去等消息。接下来的几家也差不多都是这样，对了我找的这些都是正式岗，不过去前我都说好我是找实习工作的，现在实习岗太少了，招聘网上的大多数都是培训班，建议大家找的时候百度一下，基本不会被培训班骗去。在找工作的期间又陆续的学习了gulp，前端自动化工具。简单来说就是可以帮我们做压缩代码，图片，编译sass这种可以自动化的工作的。学完之后发现，妈的，又可以省点力气了，怎么不早点学呢，哈哈。还有把面对对象又看了下，想着面试的时候可以吹吹牛逼，能装的技术好点。找实习一直持续到11月底，终于在拉勾上看到一家招实习的正经公司了哈哈，去了发现公司很小，是创业公司，刚想着面试表现好点呢，结果就和我聊了聊天就让我回去了，给我了一个指定任务，让我回去完成了放在git上给他看，对了，我还学了git，用github搭了一个作品展示的demo。回去立马开始做了那个demo，为了体现技术，还特意用原生写，并且风骚的每一行都注释起来了，对的，是每一行哈哈。
等了两天，还以为自己没戏了，在周天的晚上给我发了录取函，当时真是激动的泪流满面。哈哈，现在在公司也有三个多月了，在公司没人带，就我一个前端，所以事情比较多，当然学到的也多啦，这是我最满意的地方。期间学了下微信小程序，为公司开发了一个小程序，移动端app的分享页面做了几个。用bootstrap做了一个响应式的官网，我发誓，下次再让我做响应式，如果样式和bs的差别很大的话我就自己重新写，否则覆盖bs的样式会让你想死，主要的时间都他妈浪费在这上面了，最恶心的是他还有媒体查询，覆盖的时候要注意别覆盖错了。还有用css3动画和过渡个属性配合fullpage.js做了个带动画效果的app展示页面。最近在鼓弄vue.js这个框架，同时还要做毕业设计，node的，真心觉得当时自己在选题目的时候在给自己挖坑。
哈哈，祝你好运。不过不是我打击你，如果不是人品爆发的话，你现在的情况建议还是好好的学习下吧。不过现在实习机会可能会比较多吧，应该不至于像我那时候那样。