我们之前将「复杂应用」界定为特定专业领域当中，需要经过广泛培训之后使用的，有着非结构化目标、非线性工作流程的任何应用程序。这个概念可能听起来有点抽象，不过这么说你可能会更容易理解：从科学研究到专业人员，诸如金融分析师，它们常用的那些专业软件应用。这类应用通常有着这些特点：
尽管不同的复杂应用之间差异很大，但是他们的共同点是，专业的从业人员对于这类工具有着极强的依赖性。
考虑到设计师和开发者在面对这类工具的时候的挑战，我梳理总结了8个复杂应用的设计原则和指南。
很多研究表明，对于复杂的应用和工具，用户更加青睐可以立刻上手开始使用而不受它复杂度影响的那类工具。
与大量的教程、文档、帮助和设置说明相比，能够立刻开始的任务和项目，对于用户有着莫大的吸引力。这种现象被称为「活跃用户悖论」。
虽然在专业领域当中，倚靠摸索和试错学习是不恰当也不安全的，但是一定程度的边做边学是必须的，因为不可能在培训和手册当中涵盖所有的使用场景。
在Salesforce控制面板当中，就可以实时预览面板编辑的效果。
值得一提的是，这个时候依赖冗长的文档和教程其实很难达成效果，更合理的方式是结合用户所处的上下文环境，通过界面工具提示的方式，适时地告知用户「有更高效方便的方法」。
通常，可以使用悬停提示，或者是弹出式工具提示来实现这一功能。
ArcMap是一款地理信息系统类工具，它通常会通过上下文环境下的信息引导，来帮助用户了解技巧。
复杂的应用程序，通常会有很多功能是分散的而非线性的，不同的功能组合起来可以实现特定的功能。在这类工具当中，用户日常可能也不是很确切知道最终的目标是什么，而需要通过数据分析来逐步推进，同时，在知道确切目标的情况下，也应该可以遵循不同的路径灵活地达成目标。
设计师这些应用的时候，设计师应该避免使用固定、唯一、僵化的实现路径，迫使用户必循严格按照某一固定路径来做事情。一方面，允许用户跳过某个步骤，或者回滚到更早的路径，另一方面，允许用户遵循不同的方式和路径来达成目标。
比如万事达卡的自助服务就可以通过交互式的图表来引导用户完成不同的任务。
复杂的任务，通常意味着它需要很多步骤，不同的环节，而在实际的应用场景中，某个分析步骤耗费几个小时甚至几天，都是有可能的。在高度复杂的现实生活中，某个步骤可能会换人接手，可能会因为硬件、网络等问题而暂停甚至丢失，这也意味着「可追溯性」是很重要的。
在决策建模软件TreeAge当中，用户可以在分析和建模过程中进行开放式的注释，可以后续在底部快速访问这些笔记。
复杂的应用通常还会面临一个状况，就是工具本身的不足，用户需要在多个工作空间上使用工具和内容的时候，它需要具备切换的功能。对于不具备的功能，应用程序应该允许使用第三方的应用来作为补充。
减轻工作负担的一个要点，是尽量使用通用的API、接口和标准，尽量兼容行业标准软件，比如Excel、Powerpoint，尽量使用标准格式，等等。
微软的商业分析软件PowerBI就提供了标准化的导出和复制功能，非常方便
复杂应用通常旨在保持泛用性。使用场景多样，多种不同的功能，一家汽车生产厂家，可能会和蜜蜂养殖机构采用同样的工具和软件来监测机器故障。但是，这种泛用性的另外一面，就是混乱性。复杂的应用可能会同时兼顾到基础型的小白用户和进阶型的专家用户，而后者用到的功能很小概率会被基础用户用到。
所以，设计者需要在不降低功能性的情况下，基于应用场景、用户需求来进行简化和优化，在保持功能完整易用的前提之下，降低复杂度和混乱度。
分阶段和层级展现就是一种降低混乱度但是不影响功能性的一种常见策略。当用户进行到特定任务、特定阶段、特等级别之后，再呈现特定功能，是有效的设计方法。
即使降低了混乱度，在复杂应用当中，信息量可能依然是过载的。通常，对于这种情况可以通过区分信息层级的主次来进行快速的区分，不过，从交互上来说，这可能依然不够。
对于诸如控制面板一样的界面，用户可能需要时刻查看面板上的信息，需要了解次级信息但是又不能离开界面，这就体现出主次信息之间的过渡呈现的重要性了。
一般而言，使用类似与悬停显示的方式，能够比较柔和地将次级信息呈现出来，允许用户查看详细的定量数据。下面这个案例当中就是，悬停显示更多次级信息。
复杂应用通常在界面上包含由大量的信息，而这个时候关键性的数据如果不在视觉上做突出显示，会被用户错过。通过视觉区分、提示警报的方式，让用户及时注意到，才有可能规避可能存在的问题。
值得注意的是，让关键信息和元素凸显的方式，并不一定非得是使用鲜艳的色彩和较粗的字体，简单的放大呈现，使用图形化的元素辅助提示，或者是提供足够的留白都可以达到目的，就像下面的案例一样：
在用户操作后尽快/立即给予反馈是最有效的。即时反馈有助于帮助用户养成正确的操作习惯，或纠正用户的不当操作。
例如：知乎App在加载内容的过程中，增加了IP形象的动态效果：
在设计交互反馈时，不仅仅要给出正确或错误的判断结果，同时也应该考虑到用户的个性化需求，针对不同类型、场景、地区的用户提供差异性引导和服务。
例如：大众点评、高德地图可以根据用户的位置，在用户开始使用产品时就推送个性化信息：
通常来说，正面的反馈会激发用户的自信等积极情绪，因此我们更习惯使用正面反馈。但是一些不得不使用负面反馈的时候，我们可以在其中穿插一些正面的消息，减少或缓解用户的因负面反馈带来的消极情绪。
这就好像是别人跟你说：“坏消息是……，但是，这样做的好处是……”，坏消息不可避免，但加上一点转折，就会让他人心里稍微舒服一些。
例如：美团单车在你骑完车之后，需要支付费用时提示你可以购买单车套餐，虽然是在劝用户花钱，但看上去依旧很友善，其中的话术包括：“本次骑行免费”，“当前已是最优价格”：
有效的反馈会主动多引导一步，对用户的下一步行动给出清晰的、正确的、指导性的意见，有助于驱动用户继续做出有效操作。
有科学依据证实，人脑会更容易被附带情绪的信息所吸引。用户更有可能会注意那些看上去承载了一些情绪的反馈，从而也更有可能改变其行为方式。
一些特殊情况下的、有重大意义的反馈可以被追溯到其根本原因，可以提供给用户进行申诉和询问的渠道，供用户进行反馈。
例如：电商平台和外卖平台都会在用户下单或退单之后，提供商品物流的详细信息，在查看购买的商品的当前状态时，并可以追溯到商品所在的各个历史环节：
再比如，高德打车如果发现用户的行程订单金额与预估金额差距较大时，会给用户发短信提示，并给出客服和投诉渠道：
在这个信息过载而注意力稀缺的时代，好的反馈在于质量，不在于数量。有时数量越多，反而会对用户造成不必要的负担。用户并不需要给出很多反馈或者记录生活中一切信息的产品，而是需要能够帮他们理出头绪、提出有效解决方案、呈现有用信息的产品。
原文链接：长弓小子（公众号）
作者：元尧
转载请注明：学UI网》干货｜交互设计中的「有效反馈」7大准则！
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
对于本能层，设计师需要在符合功能需求的前提下，尽可能的给用户带来听觉、视觉、触觉的感官刺激，极力去促成用户与产品的“一见钟情”。
案例1：AppStore的卡片推荐做的很有新意，比如：把吉祥物（品牌形象）是小熊的工具收集到了一起，并取名为：熊帮手。
案例2：微博长按点赞按钮，可以选择不同的点赞状态。图标还是动态的，很有趣。
对于行为层，设计师需对用户的行为进行预判和引导，利用细节处理打动用户，让用户对产品产生信任感和依赖感。
案例1：当苹果公司发现用户最近在官方渠道购买了新的iPhone，老iPhone的设置页面就会给出提示，让用户为新的iPhone做好数据迁移准备。
案例2：iOS系统后台在看缩略效果时，会将用户的敏感、私密的信息的App页面进行模糊处理，保护用户的隐私安全。
案例4：货拉拉在展示搬家车辆详细信息时，使用了剖面图，并模拟了不同搬家场景下的家具内容，让用户更好估算车辆空间。
对于反思层，设计师要调动用户最深层的记忆和感知，将视觉效果、产品功能和用户认知紧密结合，形成用户对于产品和品牌的深刻认知。
案例1：FigJam是一款来自Figma的多人协作在线白板工具，可以进行头脑风暴、绘制流程、多人协同标记等。里面也有很多人性化的小功能，比如：当两个人同时长按“H”键时，就会出现highfive（击掌的动效），非常适合当设计师达成共识时使用：
案例2：小睡眠App发现学生时代的我们经常会在枯燥的课堂上睡觉，所以准备了各种课堂讲解、校长发言、领导开会的声音作为催眠、助眠的音乐，让人会心一笑。
案例3：饿了么在异常天气下通过在界面上增加天气的元素，让用户看到外卖小哥的辛苦，使用视觉和内容共情，唤起用户的同理心，降低用户因外卖迟到而做的投诉和差评。
转载请注明：学UI网》案例锦囊｜交互设计中「情感化」设计优秀案例（二）
*设计师：AntonShmatko,GreenSharkStudio,PavelKhenkin
*亮点：该款软件采用了一个极具特色的配色方案—所有界面整体使用黑红两种颜色的对比，经典而不失大气。而局部渐变色的使用,也让其功能和按钮更加突出，极具层次感。而且,软件图片,按钮和图标的层级叠加,也使整个界面更加的时尚柔和。总之，软件界面设计整体简洁漂亮而不失易用性。
*设计师：Tubik
*软件介绍：WateringTrackerapp,顾名思义，就是一款可以追踪盆栽或植物的水分情况，及时提醒用户浇水的生活类手机应用。
*亮点:首先，这种能够监测植物水分情况，通知用户浇水的创意，新颖且有趣。其次，界面背景和局部添加的绿色植物图片使整个界面更加的直观舒适，带给用户好心情。当然，作为植物监测的工具，同时也设置了显示各株植物水分，湿度，光照之类细节信息的功能区，即点即可了解到植物的具体生长情况，简单易操作。而且，配色方面，黑色背景搭配白色和绿色图片及按钮，符合整个植物主题的同时，也更易于用户接受和使用。
*设计师：CDUXT
*软件介绍：Listen是一款致力于为喜爱不同音乐风格的用户提供独特且愉悦体验的音乐软件。整个界面设计简洁清晰，用户可以简单的通过不同频道（例如最新歌曲，电台，主体和专辑等）和不同场景（例如驾车，运动，工作和约会等）快速的搜寻到最喜爱的歌曲。而且，软件还特别为用户提供了根据不同心情播放不同音乐列表的功能，更具个性。总之，喜欢闲暇时沉浸在自己的音乐世界的你，它会是你最佳的选择。
*设计师：QuebleSolutions
*软件介绍：NightOwlCoffee是一款能够帮助用户根据自己的需要快速订购各式咖啡的手机应用软件。
*亮点：软件整体采用了独具特设的插画风：主页添加的由明亮颜色和各种几何元素呈现的卡通咖啡机，可爱且切合主题。纯色的背景搭配上灰色插画以及黄色图标和按钮，使整个软件界面更加干净整洁，易于用户使用。
*设计师：AdrainRudzik
*设计师：MelanyRoa
*软件介绍：iOSAppSliderCar是一款专门针对iOS手机研发的应用软件，能够帮助用户分类搜索各式汽车信息，并实现在线交易的一种手机端应用。同时，它也是一款能够帮助用户结交不同汽车爱好者的社交工具。
*亮点：简单纯色的背景，使用户专注于汽车图片，价格，描述和所有者等信息。搜索界面添加各种搜索参数，用户简单点击即可实现汽车信息搜索。总之，整个界面简单，整洁而实用。
*设计师：VarduhiAdami
*软件介绍：Karoline是一款手机端服装购物软件，提供了各类服装的详细信息和购买渠道。
*设计师：DoeunShin
*软件介绍：Space是一款能够帮助用户更加有效的管理日常生活的手机端应用。主要提供了两项特色服务：早上，自动结合用户的日常习惯，提供有用的日程管理信息和建议，例如交通和天气情况等；晚上，通过自动分析用户语音日记，提供符合用户心情的主体和提示音等等。
*亮点：该软件以插画风为基础，添加了各式动画按钮及图片，直观生动。蓝色主题，漂亮舒适，无论早上还是晚上使用，用户都不会反感。而且，软件本身添加多样的功能性界面，例如语音日记，心情日历，日常服务，节日简介等等，简单全面。总之是一款极具吸引力的管理软件。
*设计师：MonishMohanan
*软件介绍：Wallet一款能够帮助使用者理财的移动端软件。
*亮点：软件使用黑色，红色和紫色三种颜色的对比和渐变，极具特色，漂亮时尚。简易图标和多色几何图形，是软件界面更加简洁使用，令人印象深刻。
这些就是我们所搜集的10款最新的优秀手机端软件UI设计作品。希望他们不仅能给你新的设计带来灵感，同时也能帮助你把握和预计2018年手机应用UI设计的发展趋势。
原文地址：Mockplus
作者：jongde
转载请注明：学UI网》10个最新优秀手机应用界面设计实例
亮点：神秘的烟雾特效
因此，在你的Web或app加载动画设计中，也可添加类似的烟雾效果，让简单常见的圆环，柱状或条形动画，也能脱颖而出。
设计师：NickButurishvili
亮点：结合网页产品特色
作为一款专为酒类网站设计的加载动画，设计师结合产品特色，将其酒类产品制作流程以动画的形式展示出来，减缓用户可能产生的负面情绪的同时，又能让用户更加生动直观地了解公司或产品。
所以，在你的动画设计之中，也可结合产品，公司甚至品牌特色，添加产品制作流程，动态产品展示以及公司文化展示等等，留住用户的同时，加深他们对产品，公司甚至品牌的印象，提升产品知名度。一举三得，何乐而不为呢？
设计师：VitalySilkin
亮点：图形的前后位置变换，加之渐变色彩的精彩应用
所以，在你的设计中，也可利用类似图形左右，前后，上下等等位置依次变换的方式，同时结合发光，流体以及背景色彩对比之类效果，让整个动画兼具视觉效果和趣味性。
设计师：MakitoNinomiya
亮点：形象的动态沙漏计时，以及文本与动画的结合
这款加载动画，除了采用了更加形象贴切的动态插画沙漏，拉近与客户的距离。还选择了动画与文字的结合方式，安抚用户的同时，也能尽量获取用户理解，实现与用户的情感层面的交流。
所以，在你的设计中，也可适当的采用一些微文本设计，获取用户共鸣的同时，也能提升用户体验。
设计师：LilianTedone
亮点：简单的形状，跳跃以及旋转的完美结合
整款设计简洁清爽，舒适而不失趣味。简单形状，跳跃以及旋转的完美结合，让整个动画设计更加灵动而富有感染力。对于减缓用户等待时的枯燥乏味之感，效果也是立竿见影的。
所以，在你的设计中，也可效仿这款设计，利用有限的简单图形，添加旋转和跳跃等动效，配合颜色和阴影的变化，让整个动画设计简单灵动，丰富多变，视觉效果也是绚丽吸睛。用户体验当然也不会差。
亮点：巧妙的流体融化特效和发光特效
所以，在你的网页或软件加载动画中也可采用类似的流体或水滴特效，利用背景与形状的色彩的对比，制作出发光的效果等等，让你的设计更加与众不同。
设计师：UI8
亮点：多层圆环嵌套以及3D立体效果的应用
此款设计，采用了多层圆环嵌套，简单而流畅。3D立体效果的应用，也使整个动画更加直观大气。非常值得效仿。
所以，在你的设计中，为增加加载动画的吸引力，也可采用类似图形嵌套的方式。当然，采用3D立体呈现，对于增强整框设计的视觉效果，提升用户体验，效果也是非常显著的。
设计师：RodetyoPrast
亮点：可爱的插画风以及与节日特色的有趣结合
此款加载动画不仅采用了美观独特的插画风，而且还结合圣诞节主题，添加了极具圣诞特色的驯鹿作为其主体，可爱而富有童趣。非常适合一些以儿童为对象的在线课程（尤其是绘画），在线儿童购物以及类似儿童网站或软件，制作一些圣诞专栏时，使用的加载动画。
所以，在你的设计中，也可适当结合各种节日元素，习俗，故事甚至经典人物，让设计更加丰富多变的同时，也能使其极具趣味性和地方特色。
当然，添加一些产品特色，也能让设计更具独特性。总之，这些些设计切入点的使用在转移用户用户注意力，减缓其因等待而产生的焦虑情绪，提升用户体验，效果也是极佳的。
设计师：BurhanKhawaja
亮点：多屏展示与色彩变化，以及旋转动效的极佳结合
此款加载动画，不同于一般设计师惯用单屏展示各类动画，以吸引用户驻足的方式，而是采用不同比例多屏展示的方式，结合动态渐变色彩的应用，以及正反旋转动效的对比嵌套，使整个动画设计，华丽炫酷，优质吸睛。
所以，在你的加载动画中，也可采用多屏展示方式，结合色彩，旋转以及形状之类的动态变化，让整个设计更加华丽而吸睛。
设计师：NguyenTran
亮点：美观而炫酷的科幻视觉效果
此款专为iOS或Android手机软件或网页设计的加载动画，采用黑色背景搭配浅蓝色旋转地球和进度条的设计，创造出荧光效果的同时，美观时尚，又带有科幻色彩。极具视觉效果。
所在你的设计中，也可采用类似色彩的对比，动态进度条的添加等等，制造出科幻炫酷的iOS或Android加载动画。
设计师：AlexSailer
亮点：快速旋转与数值的变化设计，极大地提升了用户体验
所以，在你的设计中，也可适当的效仿此类应用数值的变化，尤其是进度条与数值变化的组合，留住用户，提升用户体验。
亮点：动态展示正在加载地内容，配合背景颜色的变换，可爱，有趣且吸睛
此款加载动画，采用直接动态展示正在加载的网页或软件内容的方式，利用可爱有趣的sticker吸引用户，而且根据不同sticker的主题色，相应变换背景色，也让整个动画更加多变而吸睛。非常有特点。
所以，在你的设计中也可通过，直接展示加载内容的方式，激起用户继续阅读或浏览的兴趣，让动画更加的实用，而且视觉效果也会更佳。
设计师：DannyPerry
亮点：色彩条的旋转变换
多色的色彩条旋转本就十分炫酷吸睛，再结合多样的旋转方式，整个动画设计就会更具变化，从而提升吸引力。
所以，在你的设计中也可采用这种色彩条与旋转的结合方式进行设计。让你的设计更具特色。
设计师：ZachRoszczewski
亮点：各类图标的组合变换
此款加载动画，则采用简单图标的组合和变化，简洁而不失趣味。
所以，在你的设计之中，当没有特别的设计点子时，直接选用软件或页面中的高频使用的图标，结合旋转，色彩以及位置的变化，也可创作出极具特色的加载动画。
设计师：GraigMederios
亮点：采用产品或公司logo以及发光的效果，引起用户共鸣
此款设计，直接采用逐步构建产品或公司3Dlogo的过程，非常直观而炫酷，对于加深用户印象，提升产品或公司知名度，作用显著。而且，直接使用其logo,对于激起用户共鸣，效果也是不错的。此外，制作的发光效果，对于吸引用户注意力也是非常有用的。
所以，在你的设计中，也可结合产品或公司logo进行设计。
总之，无论你是需要创建和设计，网页，Android或iOS软件加载动画，希望这里罗列和分析的15款最新的Web和软件加载动画设计能对你有所启发。
1.利用MP封装的强大项目和页面示例，快速制作出能够嵌入加载动画的原型
尽管，加载动画需要嵌回到对应的软件或网页才能更加直观准确的评估其功能，但并不意味着必须从头一步一步重新制作相应的原型用以测试。事实上，Mockplus封装了强大而丰富的项目和页面示例，能够帮助你简单下载导入，即可根据需要改进所需项目原型，从而尽快的开始加载动画功能的检测和提升工作。
2.利用MP强大的组件库和图标库，轻松快捷地手动制作所需web/app原型
当然，作为专业而严谨的设计师，希望能够手动制作更加贴切优质的web/app原型，以求更加精准地检测加载动画的有效性和可行性？不用担心！Mockplus提供的强大组件库和图标库，快速灵敏的交互设计以及多样的弹出窗口/页面设置等等，都能助你轻松快捷地手动制作所需原型。此外，Mockplus许多新增功能，对于简化设计过程，也是非常有效的。
3.利用GIF组件直接嵌入加载动画
完成所需Web或软件原型之后，你可以简单的拖拽Mockplus的GIF组件，直接将需要的加载GIF文件添加到任何希望的原型界面或位置，简单方便。
2.团队协作功能，对于设计师协作编辑和改进加载动画效果也是极佳的
总之，无论你是需要尽快制作出Web/app原型，还是希望在原型中检测和评估加载动画的可行性和有效性，Mockplus都能满足你的需求。
加载动画，作为设计师用于留住用户的重要平台之一，无论是一个小小的加载进度条，文案，按钮，背景图片，动效甚至色彩的选择和搭配，都对增强web和软件趣味性和独特性，提升用户体验发挥着至关重要的作用。所以，在具体的设计中，设计师不仅需要将其看作与软件功能和界面一样重要的部件进行设计，同时也可结合网站，软件产品特色，创建一个能供用户暂时放松，娱乐甚至开怀一笑的场所或模块。
总之，无论设计师设计的初衷是什么，为设计和创建最优质的加载动画，最好选择一款最佳的原型工具（例如以上介绍的简单快捷的Mockplus），以便将设计的所有细节快速地转化成直观可视的交互原型，切实地测试和评估，这款加载动画设计能否达到你所期望的，甚至更好的效果。
总之，希望这里介绍的15款最新优质加载动画设计能对你有所帮助。
转载请注明：学UI网》15个优质加载动画设计，让等待成为一种享受
放眼过去大量同质化或跟风的网站风格，空有一副美观的皮囊，却少了些什么，为何不交互创新一下呢？具有创意的交互必然能使一副黑白的画面瞬间点亮色彩。
你可能想有创意的交互能为网页带来什么？
好了，说多了，就是希望为更多设计师提供设计思路或执行概念，帮助大家找到更多的创意灵感。
Web端交互围绕计算机为中心。主要涉及键盘鼠标两类设备的交互，个别网站的产品可能会涉及麦克风声音采集或摄像头应用。
1.鼠标允许的交互
现在的鼠标可以支持更多功能，但是通常来讲需要严格的考虑兼容问题，所以仅以鼠标左右键滚轮滚动以及光标映射选取为主；
以上所有交互都可以根据实际场景进行设定，不过鉴于用户习惯，一般不会用到快速的连击交互以及右键的双击、长按或拖拽，这不符合交互手势的舒适度或简化易用的初衷。
2.键盘交互支持
键盘支持大量的按键交互，除去一些全局的功能按键和组合快捷键，在网页交互应用中常见的还可以分为以下几种情况；
在应用键盘按键功能的时候，除去那些作用明确大众悉知的按键功能，其他的按键操作应该保证界面上有指引有提示。
组合的交互动作常配合不能简单直接完成的任务，这里的组合指有两个及以上交互动作完成的类型，复杂的交互动作尽量少用，且尽可能的为用户提供操作指引，若非必要，费力不讨好；
组合动作主要分为以上9类，鼠标拖拽的组合动作通常会细分来应对界面场景的应用，例如通过横向拖拽将一个竖放的圆柱物体旋转起来，那么垂直的拖拽必然是没办法转动起来的，而且左右还会决定拖拽的方向。
简单来讲，无非就是看得见的元素、听得见的元素。听得见的元素无非就一个声音，讲深一点，也就涉及一些音效的交互控制。而看得见的元素则会相对丰富很多，如果再次细分的话还可以归为以下几种情况；
1.常见变化形式
位置变化、透明度变化、角度变化、大小变化、形状变化、颜色变化、翻转效果、特效变化
web端的交互概念即触发到呈现的过程。用户可以使用交互设备进行事件触发或变量，页面则将内容进行对应的呈现。其中交互过程主要影响的事件由“可交互的元素“、“功能交互“、“转场切换“构成。
页面内容呈现通常分为“默认时“、“选择时“、“运行时”三个时态（鼠标短暂的点击时属于“选择时”，若长按有内容影响则属于“运行时”），因此在网页交互的过程中，我们需要考虑好这三种完整的状态时呈现形式，另外在考虑补充合适的动效进行过滤或信息反馈。归根到底网页的交互概念就是控制内容呈现罢了，这是网页价值的本质。
web端内容呈现的结构应该算是页面交互的范畴吧，其实上网页的页面并不只是长页面的形式，实际上会有更多种结构可用。因为电脑显示器更大的缘故，web端结构上比移动端更加灵活，同时根据产品的性质也有需要考虑移动端响应式的需求，一般来讲这些页面结构可以分为以下六类：
网页的组成区块通常分为五大类型，即导航、面包屑、背景、内容呈现、弹出框。菜单导航栏通常分为顶部导航、侧边导航、底部导航、组合导航四大类，也有个别是通过点击弹出的导航。内容布局则更是五花八门了，是板式与技巧的呈现了。
1.几何色块搭配文案
色块搭配标题文案，简约大气有视觉冲击力，再也不用担心没有图片或插画素材了
2.精美大图背景搭配内容
采用精美大图背景搭配文案或交互控件，精美的图片本身就很抢眼，再搭配标题大字，瞬间就使得页面有冲击感有层次，常见于游戏官网或活动专题
3.关联插画或图标搭配文案
采用小范围的插画或图标来表达服务或产品优势，搭配文案说明，风格统一精致耐看。常见于服务描述或产品说明模块应用
4.留白大图搭配文案
将某个产品或其他元素放大显示再结合极简的排版说明，有较好的视觉冲击力和产品凸显效果，同时留白保证呼吸感和减少视觉噪点，使得用户能够更加专注产品图
5.动态的背景或微动效装饰
6.点线面装饰与文案排版
应用简单点线面元素去装饰界面，再结合有对比有版式的文案排版。页面简洁美观，适合简约干净少图的页面模块
7.栅格化应用与板式跳跃率
应用栅格化与版式跳跃率，使界面整体充满平面艺术，富有节奏感且不显凌乱。在日本的网页设计上有大量应用
9.充满个性的视觉装扮
采用卡通化、科技感、故障效果、毛玻璃效果、赛博朋克风、手绘插画等视觉风格，来打造符合产品的特殊视觉效果，为网页印象加分，提升品牌感染力
10.引用3D视觉装饰
运用3D视觉搭建页面场景，常见的有3D图标、3D动效或3D产品大图等，有较强画面立体感和表达能力，视觉新颖让人眼前一亮，也是当前的一种视觉趋势效果
11.产品元素或其他元素来填充背景
将品牌元素进行弱化处理后作为背景墙，凸显个性和丰富画面，结合微动效可以有进一步的效果增强
12.矩形陈列或卡片陈列
将内容模块用矩形陈列显示或卡片陈列，Win10菜单或WP系统的手机桌面有较好体现，特点是干净利落模块分明，适合同类模块较多的场景进行排列显示
13.极致的简约
采用极简的方式呈现内容核心，可以是一张图一段字、一段文案排版等，总之就这么简单的搞定了
14.魔幻或神秘感界面呈现
如示例网址一样，魔幻且神秘，有着迷之吸引力和趣味性，不过需要慎用，比较恶搞。而适当给出一些神秘感，可以使得页面内容更有吸引力，用户更愿意去点击尝试。
1.光标跟随动画
会使页面上的元素根据光标的位置或移动产生相应变换，增加页面的互动性与趣味，适用于装饰或加强背景层次感，在特定的场景也可以使整套控制UI往鼠标移动的方向微微靠近，结合菲兹定律公式，距离的不断缩减也能够加快选中的效率）
2.鼠标悬浮动画
简单易用的鼠标悬浮动画，用于聚焦显示或Tooltip说明，常用与内容选中状态区分或元素细节展示，加上一组好的动效创意非常能够凸显个性，使用户感到惊喜为体验加分
如果是一个完整动画缓慢播放完会更有叙述性
3.鼠标点击特效
由鼠标点击进行触发，基本样式即点击状态显示，触发后的特效可以是图标动画、光效、音效、界面动画等，游戏场景中较为常见，点击后不仅有光效反馈还有音效附和，这是一种触发反馈效果。
4.鼠标长按特效
通过长按持续增加细菌圆点
5.鼠标拖拽特效
通过鼠标点击长按某个元素进行移动的组合交互，一般用于拖拽移动、内容绘制、元素连接等。应用场景广，互动性较高，能为用户带来更多的参与感和趣味性，甚至制造小惊喜
示例内容：阿里内测的Real3D
6.鼠标滚轮巧妙的联动效果
主要用于页面某个值的控制或页面滚动，在页面滚动的时候可以配合控制元素变化来实现更具创意的展现效果，通常元素透明度、位置、大小、序列图都可以控制
国内官网
7.鼠标选中自动展开
鼠标经过选项时自动展开选项并聚焦，可以省去鼠标点开的动作，但不适用于选项内容较多且内容密集的场景
8.按键与鼠标配合触发
通过指定按键和鼠标配合交互进行触发，适用于同界面的复杂交互场景，且存在某些变量需要鼠标控制。如果你的网页内交互丰富且包含变量元素，不妨试试看
9.模块或分页加载动效
在页面滑动或分页信息加载时，界面构成元素有序的缓入进场。采用流畅的动效演示数据加载的过程，缓解数据加载渲染压力的同时，使得用户可以更加从容不迫地浏览信息，让界面呈现更加精致优雅
10.趣味转场或加载等候
应用转场效果与Loading动画，运用某个元素变大覆盖或页面移动交替转场，而非生硬的直接替换，使得页面切换更有趣味和层级关系体现。再对加载较慢的内容补充Loading动画，缓解用户焦虑的同时还能延展品牌信息
11.大图或多图轮播应用
精美的图片总是想要放大看，看了还想看。运用超大的轮播图展示与沉浸式功能布局，满足用户操作与大图赏析
12.内容穿插滚动
运用特殊的图层顺序结构，在页面滚动查看时，形成奇妙的元素穿梭视感。通常会穿梭替换背景或让元素接力，这样相比静态写实的页面滚动时会更有层次感
13.内容自动生成
输入关键内容后，页面自动生成结果进行呈现，整个过程可以是缓慢有序的，适用于降压或画面创意生成的产品，可以让用户感受整个过程与细节变化
14.游戏互动模式
将产品内容以游戏的形式或交互呈现，让内容充满趣味和互动性，使得用户在参与游戏互动的过程中打破了常规的阅读体验
15.三维或全景空间
建立一个三维或者全景空间进行查看或操作，再赋予操作按钮或说明，实现3D场景的交互与视觉效果，常用与地图全景查看或3D游戏应用，可以巧妙的结合产品3D模型，打造非凡的互动体验
16.一镜到底的视角呈现
打造一个非平面的视觉场景。用鼠标点击或滚轮联动交互利用分层的元素变化，营造出由近到远或由上至下的一镜到底的视角穿梭体验。界面场景切换更加自然，还有超强的空间感与趣味性，让人难以忘怀如临其境。
17.按键交互效果
将某些功能或任务引用按键进行交互或触发。常使用字母、数字、空格、方位键，界面需要有提示对用户进行指导。
18.个性的模块展现方式
常见的有弹窗、抽屉、卡片展开、转盘等，通过个性轻松的显示结构与交互方式也能让人眼前一亮。
19.可交互的颜色或图形
对一些颜色或形状元素提供切换或DIY的空间，允许用户进行意料之外的交互或配置能力，提升网页趣味性或用户个性化需求满足。
20.音视频媒体控制
围绕产品介绍的媒体内容，常见有视频或音频且支持基本交互控制，结合场景需求可以丰富交互的形式或更多媒体控制功能，例如长按快进、倒退、剪辑、混音等，常用于娱乐互动场景或音视频类产品。
21.内容或窗口抖动
通过抖动进行报错或反馈，常见为密码输入错误时或游戏中受到伤害的场景，可伴随音效提示一起。使用场景不广泛，但是也可以进行创意应用，例如抖掉灰尘小游戏，长按元素抖动干净为止。
22.打造仪式感
结合现实场景中的交互方式，打造相似的线上场景帮助用户共情带入，再配合交互和动效完成类似的动作，为用户带来仪式感和共情效果。
23.有声交互
通过麦克风采集声音来影响交互，是一种声音的交互，如果网站支持，甚至可以语音交互，是一种少见的网页交互形式，并非传统的音视频控制而已。
24.镜头交互
找对方法去创新很重要！在实际工作中，我们不仅要衡量界面设计与交互效果，同时还要兼顾开发资源、实现难度以及产品架构本身考虑。对此我们也需要了解一下开发实现的概念，之后再研究如何进行创新设计。
在进行创意设计时不考虑开发，那不是自嗨就是对开发耍流氓。静态界面开发或简易的切换效果并不难。而代码层的图形变化效果、仿物理效果(例如反弹、律动、重力等效果)、3D交互效果相对会复杂许多。大多的动效不能依赖GIF或Lottie进行解决，这对交互控制或性能优化都是挑战，而代码能够更好的保障这俩点，所以大量的交互动效还是需要开发者支持，而代码实现显然会比设计师产出复杂。
那么如何解决呢？
考虑到创新开发的背景情况不一致，这里我提供了一些创新研发的策略提供参考：
传统改版：
1.明确改版目的，挖掘价值点
会议说明，清楚改版需求的背景与痛点，挖掘价值找到设计发力点
制定改版目标，明确分工计划，同步项目情况
2.构建原型框架，评审优化
3.明确产品定位，建立设计语言
要保障产品气质与视觉风格的契合，即一个资讯网站肯定不适合采用电商视觉进行输出。然后根据内容占比，考虑呈现的布局方式，即不同模块中的视频、图片、文字比例情况。然后你可以结合上文的视觉层创意形式进行套用，当主要的静态视觉设计完成后即可进入评审阶段
4.高保真评审，挖掘交互创新点
对网页高保真进行评审，确认页面信息框架或界面设计可行。然后对交互创新方案探讨，结合网页的板式设计，提出交互创新的细节，与开发者同步，确保实现的可行性与项目工时可控，同时披露交互细节帮助开发者进行调研或准备
5.交互创新对齐开发，进入研发阶段
准备提供交互的细节Demo或参考内容，在基础内容开发完成后或开发者认为适合介入的时机，进行交互创新内容的对齐，使创新方案在最小可行的基础上进行开发实现。之后建议设计同学耐心的陪同开发小哥进行还原，确保效果
6.测试验收，预发上线
最后进行成果验收，确保基本的内容是否符合标准，再根据工时情况或上线计划等，考虑交互创新部分的细节还原调试，适公司实际情况可以考虑再迭代一版。之后根据产品情况自行考虑是否A/B测试、灰度上线等，上线后就是线上数据跟进或用户调研了，希望你的新版本收获一片叫好哈哈
敏捷开发：
对于想要敏捷实现目标的话，可以采用谷歌冲刺法（GoogleSprint)，当前基本分为六个阶段进行，分析理解阶段、定义阶段、发散思考阶段、决策阶段、原型产出阶段、测试验收阶段。这里我结合交互创新的方法，对多个阶段进行了补充，内容如下：
1.Understand理解
明确建站目的、需求背景、梳理业务或用户需求。通过用户研究或竞品分析等手段，更好的理解产品、行业现状以及痛点机会，也为后面阶段提供可靠的依据或支撑
2.Define定义
基于对此次建站需求与背景深度理解，定义产品设计目标，挖掘价值点
3.Diverge发散
让参与者们集思广益，发散思考，将不同的点子记录下来，最好图文并茂的画一下，然后形成自己的方案。在这个过程中不必共处一室，独立进行即可，这样可以避免被带偏或扰乱
4.Decide决策
方案决策环节，产品经理、设计师、开发小哥等将各自的方案进行展示说明，这个过程中不要急着评价对方，只要投票选出最佳方案即可，这是一个方案的根基，之后再进行优化和细节完善
5.Prototype原型
建议先将方案框架进行原型绘制或demo产出，然后经过一轮初步测试评审后可以再次优化复盘。在原型绘制的过程中，主要是确认流程与信息框架，不必着急视觉层的问题。若准备进入视觉设计，则可以带入这几个问题进行思考；
6.Validate验证
也许讲了这么多，你还是不知道前面诸多的创意方式怎么用，没关系，这里我进行了简单的整理对标，希望你看完还有救！
通常一个网页怎么设计版式、如何调整布局结构、调整基础交互，都是需要参考原型的信息框架。信息框架中的元素情况会直接影响视觉输入和基本交互。如信息框架中有很多图，那么设计时就需要考虑是平铺直叙还是轮播显示。
信息框架设计学习：《Web信息框架》
那么关于不同的信息架构有什么好的布局方法吗？这一点通过内容的搭配形式，整理了几种方式供参考：
文の处理：
通常一个纯文本的界面是很难设计的，因为过于单调，对此可采用
图の处理：
纯图片的形式不多见，但是不能否定，一般可能是图本身有一定的信息传达，或者是图片浏览类型的服务
图文の处理：
少量图文配套是比较好处理的，手法也比较多，根据配套数量情况还可以调换位置形成错位区分模块
视频の处理：
图文视频の混合：
通常图文视频混合的情况很少见，视觉焦点不好控制，其中视频做背景是最好处理的，但内容信息不易过多
三维の处理：
因为是三维的场景，所以需要考虑到三维场景下的视角形式与操作方式
按钮の处理：
按钮是网页中最常见的交互控件，是页面扭转或功能启用的基础
控件の处理：
控件组适用于复杂场景的任务交互，通常由多个按钮或控件单元组成，特点就是控件单元多模块占比大
结合信息框架对不同元素类型进行视觉设计调整后，再对页面内容的基本交互进行考虑，例如轮播、切换、弹出、展开收起、转场等。之后才是更加细腻的交互创意思考。
基本交互发力点
按钮点击反馈：在鼠标点击后，按钮或控件的颜色形状变换效果，用于反馈点击成功，实现眼手体验一致
按钮长按效果：长按状态的动效示意，通过对长按目标加动画响应进度或持续的状态，而非单纯的变色或样式切换
完善Loading动画：如点击上传下载更新等，出现对应进度条或loading动画帮助用户完善体感
内容入出场动效：页面切换加载或滑动页面后，内容采取动效有序的进入场景定格，而非生硬的静态切换
锦上添花交互发力点
按钮切换动画：通过icon的路径动画表达按钮切换，而非直接的图标对换，更具个性和视觉观赏性
鼠标跟踪动画：可以适当的做一些鼠标跟踪事件，让一些背景或界面元素跟随鼠标律动起来，增强互动
特殊滚轮联动效果：通过鼠标滚动联动其他元素进行交互变化，来呈现更有创意的场景切换或内容展示
内容穿插滚动：将内容分层控制，页面滚动时将元素固定或交替显示，产生穿梭感提升界面层次
响应式展开收起：主要用于二级或下级内容的自动展开，由鼠标经过自动展开并聚焦，减少用户操作
结合音视频媒体控制：在页面中植入音视频内容通过按键或鼠标进行交互或切换，打造互动性更高的媒体传达
趣味转场或页面加载：对页面转场或加载深度优化。采取更有创意的方式或动画来过渡，让视觉体验提升亿点点
内容或窗口抖动报错：合理采用抖动效果进行报错反馈或特殊场景应用，使呆板提示更灵动
可DIY的颜色或图形：提供主题或模块的DIY空间，满足用户编辑符合自己喜好的视觉效果
结合产品的场景创意
打造个性的模块呈现方式：结合产品的应用场景打造有个性的呈现方式
打造游戏互动的呈现：将有剧情有故事的产品或内容游戏化，可以让用户趣味互动更加深刻
打造一镜到底的转场：结合鼠标滚轮联动做镜头创意，突出产品细节或内容呈现
打造三维或全景场景：根据产品属性考虑用三维的场景来增强互动与突出产品
打造仪式感交互：利用视觉和交互变化来制作符合产品的应用效果，实现仪式感线上体验
有声交互：比较少见，视产品情况应用，可以使声音产生互动或视觉影响
补充按钮交互触发：在场景更为复杂交互需求更多后，进行的常规解决方法
补充按键与鼠标配合交互：适合按键触发且需要鼠标控制变量的复杂交互
2022年的UI/UX设计趋势是什么呢？在本文中，我们将发现：
旧的滚动是无聊的。如果你想吸引注意力，你就需要实现滚动叙事（scrollytelling）。（彩云注：这个技术的核心在于边滚动页面边讲故事）
它是一种叙事形式，可以在网页和APP上呈现。想象一下，在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地，你会想看到这个故事的结局。它就像一个游戏，带你穿越迷宫。虽然你不能影响它的进程，但却让你感觉自己能参与其中。
2022年，Scrollytelling将会出现在你看到的每一个流行网站上。
另一方面，scrolllytelling让用户真正去阅读内容。你可以用动态文本让他们产生兴趣，比如谷歌的网站。他们的团队知道如何让信息看起来更好:
Scrollytelling在用户向下滚动时被激活，因此得名。没有点击，没有选择的麻烦，没有弹出窗口。你似乎停留在一个地方，但通过滚动，把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果，还需要认真思考一个你想要讲述的故事情节。
IAmBinadam令人惊艳的叙述设计
Scrollytelling是为用户而创建的，用户很喜欢它，不需要到其他页面去阅读整个故事。相反，网页设计的整个故事都是事先考虑好的，并尽可能以最有趣的方式设计出来。
数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事（Scrollytelling）紧密结合。以下是IAmBinadam展示数据的方式:
通过去除数据集的复杂性，使信息更容易让读者感知。
不同级别的数据具有不同的大小，这样用户知道应该先从哪里查看
读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大，那些干净整洁的数字带来的正面影响更大。
有些图表乍一看甚至不像图表，这使得它们更加能被注意到
还有一种现象叫做“新冠后遗症”。这是Covid对公司及其员工的长期影响。根据英国国家统计局的数据，2018年，压力和焦虑的平均得分约为2.7/10。自新冠疫情发生以来，得分已升至4.0/10，很少低于这一水平。同样因为大流行，在过去两年里工作量增加了4个小时。
人们压力太大，卷的太辛苦，以至于不愿去看复杂的数据。
IllustrationbyMonaChalabi
以下是我们推荐的一些表示数据的方式
IllustrationbyInkFactory
如何让信息图表看起来更好
一个好的图表，或者任何其他形式的数据可视化，都应该具有在EdwardTufte的“定量信息的可视化显示”中描述的特征。在他的书中，Tufte通过图表解释了好图表的3个原则：
1）展示数据的图形元素与数值总数的比值应趋向于1。简单地说，应该删除一切不必要的元素，保持整洁。
GraphbyHootsuite
2）充分利用好画面空间。也就是说，需要将数据编排的更紧密。
3）客观地描述数据。不要使用夸张的图表，可视化数据可以看起来很酷，但真实永远是更重要的。
根据WeAreSocial的数据，2021年有52.2亿人使用手机，约占世界人口的66%。自2020年1月以来，手机用户数量增长了1.8%(9300万)，而手机联网总数量增长了7200万(0.9%)，到2021年初达到80.2亿。
令人印象深刻的数字，是吗？似乎到2022年，为产品做一个APP将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用？有以下几点可供评估：
1）用户主要通过移动设备访问你的网站
2）帮助内部业务流程更加有效
如果你想要提高员工的工作效率、改进工作流程或增加利润，那么就制作一个可以帮助管理业务流程的移动应用。
如今，像这样的手机应用使企业能够执行越来越复杂和多样化的任务，加快日常重复操作和文档管理。
3）实现一些网站上没有的新功能
如果你认为APP能为用户打开新的触点，并让用户体验更加友好，那么它就值得考虑开发。问问自己的APP能提供什么新的商业机会？例如，随着疫情的蔓延，许多人开始用上健身APP在家里锻炼。
4）竞争对手的情况
要了解竞争对手在做什么，他们是否有APP，能做什么，以及他们是否真的对用户有用。
5）复购率
一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了，给他们发送一个通知就能完成，成本更低。
出租车服务公司有回头客，他们肯定需要一个应用
6）促销工具
做原生APP还是移动端网站
开发手机网站比开发手机应用需要更少的工作量，这反过来可以降低整体推广成本。
这部分是由于响应式设计的出现，它允许你根据打开网站的设备屏幕来调整网站。至于APP，它们必须为许多移动平台单独编写:Android、iOS、Windows等。
一些设计师认为“前端驱动的网络体验”会是2022年的一个好机会，我非常同意!（彩云注：在国内，现在开发小程序的肯定越来越多了。）
我们一开始并没有将其放在首位，因为这并不是一个新的趋势，在很久以前设计师们就已经设计了很多3D图像和动画了。
CardiBrhymeswith3D
3D技术已经在过去流行了很多年，但它不会很快消失。此外，我们预测3D图形将变得更加多样化和包容。
“从技术上讲，通过3D更容易传达更多内容，因为它比平面图片更接近我们的感知。3D插图更有深度，信息量更大，也更具互动性。”
许多设计师将3D对象无缝地“安置”在2D空间中。它允许创建更有趣的组合，也作为一个优秀的工作方法蕴藏着巨大的潜力。
乌克兰政府网站用3D手模拟了黑客帝国
注意一点：在整合3D图形等重量级内容之前，确保你的应用性能是OK的，能够快速加载所有元素。
Meta的logo既不是2D也不是3D。或者两者兼而有之？这就是即将到来的2022年的莫比乌斯带和薛定谔的猫。
Metalogo的变化
越来越多的公司在网站和移动应用中使用动画，以提高用户的沉浸感和体验，使内容更有趣。
动画是2022年重要的网页设计趋势。2022年，如果没有它，你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和3D动画的结合，2D动画和3D动画的结合。设计师这样做是为了获得不同寻常的风格解决方案，以及提高最终产品的质量。
2022年如何使用网页动画
1）讲故事
动画可以通过在界面和用户之间建立情感联系来传达信息。
加载动画YoichiKobayashi
2）更有趣的加载
3）光标效果
用户可以精确地观察光标所在的位置。通过添加智能互动动画，对这个光标作出反应来探索网站。这种效果在21世纪初非常流行。如你所知，流行趋势往往每20年就会重演一次。
4）动态排版
你有没有想过让字母跳舞
添加角色的动画插图
宝马历史动画
这样的作品通常用于两种情况:
1）用于解释视频
动画解说的趋势出现在几年前，解说视频清楚地显示点击的位置或公司的项目是关于什么的。
在招聘或商业视频中，用户更喜欢看画出来的人物，而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣，就像活着的人一样。
微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果：它们显示发生了什么，将导致什么操作，下一步需要做什么。
重要的是要达到元素的和谐，而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色，它们为界面元素增强价值。
CTAanimated
微交互有助于页面导航，解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能，以实现特定的行为。
2022年，在线品牌面临着新的挑战，需寻求新的解决方案，其中之一就是动画logo设计。
动画logo主要有以下几点营销优势:
一家洗衣机[公司]的标志
现在有很多设计模板，可以很容易地用字体制作一个动画logo: