本文介绍了几个关于用户体验度量的模型，UES模型、适合网站的 PLUSE、谷歌的 HEART、蚂蚁的 PTECH和GSM模型，它们各有切入点，也各有其适应场景。对各个模型的概念和它们相应的维度做了详细的介绍。
伴随短视频平台的崛起，移动互联网的主流内容消费形态向短视频视听语言转变，视频信息流广告的时代已经来临。如何通过设计提升转化，是视频信息流广告所面临的挑战。
为了提升广告转化效果，我们结合实际项目，通过大量的实验与思考，梳理并总结了一套适用于视频信息流广告的转化组件呈现原则，我们将其命名为“延迟增强”。涵盖了沉浸式竖视频流、图文混合信息流、横视频列表流等各类常见信息流场景。
///
延迟增强是什么？
视频信息流广告有三要素：内容、框架、转化组件。其中广告内容来源于广告主投放的物料，基础框架需对齐宿主保持一致性，所以仅有承载转化信息和行为的转化组件，是可设计部分。
而“延迟增强”就是针对“转化组件”的一种伴随视频内容分阶段/渐进式的呈现方式。它由消费者决策时的理想心理动线，结合广告行为推导得出，并经过实验验证了其对于转化提升的有效性。
“延迟增强”包括两个阶段：1.广告展现初始阶段，延迟展现广告意图，通过内容吸引潜在用户；2.广告内容逐步呈现阶段，转化组件渐进式增强，辅以增益信息，不断强化，引导转化行为。
它指导了转化组件从“呈现”到“增强”的全流程，从时机（出现&增强时机）/引导（动效&互动引导）/前置（信息&转化前置）三个部分，帮助提升广告转化效果。
///
时机-延迟增强如何呈现？
转化组件的呈现时机包含“何时展现”与“何时增强”两个部分，前者帮助增加广告接收率，后者提升广告转化率。
01/ 出现时机：
延迟展现广告意图，可以提升广告卖点的展现机率
互联网的快速发展使得受众被动卷入爆炸式增长的资讯信息体中，广告借助这一媒介迅速发展，但也因为部分商业广告的过度宣传与其降低用户信息获取便捷性的本质，不可避免的使受众产生了心理上的逆反与抵触情绪，从源头拒绝了广告信息。
所以对广告来说，在广告展现初始，延迟展现广告意图，融入内容，可以缓解受众的抵触情绪，提升广告卖点的展现机率。
02/ 增强时机：
通过用户行为和视频特征动态决定增强时机，可以有效提升转化
对广告来说，搭配广告内容进行增强，通过内容积累购买欲/信任感，然后通过阶段性的增强来提示操作，对比一成不变能起到更好的转化效果。
我们首先尝试了程序化的增强时机，在不增加技术成本的前提下，根据历史经验，面向不同的广告均采用固定时段的阶段性增强。
但不同的广告物料内容不同，不同的用户偏好也不同，固定的增强时机并不能很好的满足所有广告需求。所以在技术能力可以承载的时候，我们采用了动态时机策略，通过用户行为和视频特征动态决定增强时机，在程序化增强时机之后，再次实现了转化提升。
///
引导-延迟增强如何引导转化行为？
转化组件如何引导转化，则可分为基础的视觉引导与进阶的互动引导，前者帮助抢夺视觉注意力，后者则能够在互动体验中植入部分帮助决策的“小心思”。
01/ 视觉引导：
适当增加视觉吸引点，可以有效引导点击
延迟增强需要通过阶段性的增强来提示操作，而如何增强能有效吸引注意则需要琢磨，已有实验表明转化按钮增加扫光动效与智能取色，能有效吸引注意，引导点击，对转化提升有良好效果。
02/ 互动引导：
让用户主动选择，可以增加广告曝光，辅助转化决策
互联网产品设计对于用户交互体验的追求越发极致，如影视行业走向可交互网剧，本质上是从用户接收转变为用户主动参与，用户本身对于获得优质体验的意识逐渐觉醒。商业化产品也需要紧跟“体验”与“互动”，将广告变为互动体验或具备使用价值的信息，让用户从被动浏览到主动参与，掌握对广告的选择权。
以互动投票为例，我们通过用户与用户之间的观点表达，以投票选择的形式诱发群体性选择，引起好奇心与同侪压力。
若用户选择符合群体选择，则带来群体性背书，增强信任感；若用户选择不符合群体选择，基于从众心理，用户极有可能对群体选择产生好奇，从而浏览两种选项的内容，有效的增加了品牌曝光。
///
前置-延迟增强如何帮助转化达成？
转化组件的前置主要包含信息前置与转化前置，前者辅助转化决策，后者帮助便捷操作，更好更快的完成转化。
01/ 信息前置：
增加增益信息或前置落地页信息，可以辅助转化决策
购买/转化一定是需要足够的信息积累信任感才能达成的，在前卡适当的增加卖点信息能够更好的帮助用户决策。针对下载类广告可增加评分与星级，二电类广告可以增加价格信息，甚至可以前置优惠劵、图片banner等信息，均能实现转化的正向提升。
02/ 转化前置：
缩短转化路径，可以帮助转化行为更便捷的达成
在信任感积累与阶段性的增强都达成的时候，在当前转化对比跳转落地页再进行转化，链路更短，用户流失概率更小。比起实验尝试，更像是延迟增强的基础能力配置。
首先，我们针对表单/咨询/电话/安卓下载都进行了转化前置，具有用户明确意向的按钮点击会直接在当前进行反馈。
除了直接将操作前置外，针对不同细分场景的需求，还可以通过交互形态的优化在感官上缩短路径。
这里以百度的视频MAX广告为例，我们针对重落地页的商家，将MAX首屏（视频页）与H5落地页的关系变拼接结构为双层结构，通过浮层面板承载落地页，延时自动弹出，强引导下方内容，激发用户上滑浏览兴趣，解决了落地页隐藏较深，转化链路过长的问题，同时增加了落地页曝光从而提升转化。
在视频信息流领域中，延迟增强仍然可以继续深挖，作为“基础建设”承载未来更多细分场景下的互动化、个性化的“精神需求”。
同时延迟增强设计方法也可以横向复用于广告前卡、落地页、IM工具等各种需要在合适时机抓取用户注意的场景中，去追求点击或者转化的提升。甚至在未来可以尝试其在长视频或图文场景中的应用。
文章来源：站酷 作者:MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先，为什么要动？可能你会想到以下几条理由：
呵呵，你要这么想就完了。
那么该如何衡量一个动效是否应该出现呢，我们认为有几个考核标准：
1. 这个动效是否会影响性能？
首先，这个动效是否会影响性能？这个是最重要的，添加任何动效前都要考虑是否会影响产品的性能，如果一个很酷炫的动效会拖累性能，使体验变得卡顿不流畅，那么必须毫不犹豫的砍掉或简化。
例子：化身间谍
比如这个例子，这是一个穿越情景的过场动画，随着年份的倒转背景出现各个历史大事件，给人以历历在目的感觉，设计师考虑到了多张图片会出现卡顿的可能性，所以特意降低了每张图的清晰度，因为内容本身就是老照片的风格，所以这种降低画质的手法反而增强了画面的真实感。
2. 这个动效是否会提高产品的可用性？
任何动效的出现都必须带有明确的目的性，能够解决用户在使用过程中的困惑，而不是炫技。单纯的炫技只会分散用户的注意力，弱化内容，变得适得其反。
例子：翻页提示
比如这个上滑提示。不用解释，用户一看知道该做什么。动效增加了产品的可用性，所以这样的动效是非常有意义的！
3. 这个动效是否会给你的产品带来独特气质？
这里所说的气质是动效本身会有助于增强用户对于产品的认知和情绪带入。一个相得益彰的动效会为你的产品锦上添花，深化你的主题和功能，注意，一定是与主题相关的，牵强的搭配只会叫人觉得莫名其妙，毫无意义。
例子：人生四时
再看这个例子，人生四时，四根火柴依次燃烧，慢慢燃尽，这种油尽灯枯的感觉很切合的体现了产品生老病死的主题。
4. 重新审视第一条，看你的动效是否影响性能
所以，合理的动效不应是花拳绣腿，而应该是解决问题的手段。
好，我们再看看哪里需要动效，这里举几个例子：
1. 加载
首先是出现在加载环境，不管是网页还是H5都不可避免的会出现让用户等待的情况，在等待的过程中为了让用户知道他的手机没有死机以及网络是通畅的，我们应该在这个时候加入一些与主题相关的动效来提醒他内容正在加载中。
例子：化身间谍H5 loading
这是一个穿越类的H5，所以设计师在设计loading的时候选用了虫洞的理念，与内容本身紧密贴合。
2. 转场
第二个情景是转场。具有意义的转场会降低产品割裂感，我们看两个例子就明白了。
例子：QQ会员观影特权
这个例子里元素在默认状态下会做上下浮动的效果，当我们滑动时候，元素很自然的做了一个出场入场的效果。很自然，没有割裂感。对吧？
3. 页面元素的互动
也可以为网页元素增加一些必要的动效。
例子：好声音第四季首页：
看下好声音的专题页面，在网页上的能够点击的按钮或者文字链，在鼠标经过时都有点变化，这个十分必要。因为表面上的变化会给用户一种心理暗示，那就是点击后也会有变化。
4. 心理需要
这里所说的心理需求是指气氛和情景的营造，例如节日，游戏活动等产品，是需要一些动效去满足用户心理需求的。大家都知道在微信里输入“生日快乐”是会掉下生日蛋糕的，这个动效就比干巴巴的文字有趣多了。
例子：一封家书
一封家书，注意看，背景有飘落的雪花，漫天大雪勾起思乡情，对吧，合情合理，有情有义！
好，说完哪里动，我们现在看看怎么动。
1. 基于真实形态的模拟
基于真实的动画会叫人看起来自然流畅，符合规律，比如物体运动时的加速度现象。
例子：Look
注意看这个笔画的动势，是有快有慢的，模拟了写字时起笔收笔的那种节奏感，所以看起来是自然真实的。
2. 人物动作夸张化
在H5的设计中，经常会出现各种各样的人物形象，夸张的人物动作会生动你的形象，增加趣味性，给用户以惊喜。
例子：巴菲特这一年
巴菲特老爷爷，动作很亲切。
3. 给元素赋予弹性
有弹性的物体会叫用户觉得具有生命感和真实性，弹的程度取决于你对元素软硬度的设定。
例子：拍个大头鬼
三个小鬼一跳一跳，弹性赋予了他们顽强的生命力。
4. 蒙太奇
这是一种类似蒙太奇的手法，通过快速切换的画面来形成一种奇妙后现代感觉。
例子：传奇硬箱
炫酷了，节奏很快，提气！
好，以上只是一些基本的动效手法，在实际的应用中其实有很多手段，在这里我建议大家可以去看看迪士尼和皮克斯的动画，应为动画本身是一种对于动作行为高度概括的手段。虽然这些都是电影，但是他们使用的手段和遵循的理念是非常值得我们去学习和借鉴的。注意观察这些大牛们的作品，你会发现他们的作品中充满了走心的细节。
简单来说，当用户打开一个界面，注意力首先会被动态的物体吸引，然后才会把注意力转向颜色对比强的部分，最后才是形状。这一过程是人在进化过程中形成的本能反应，基本适用所有用户。同时一个非常重要且容易被忽略的原则：用户的注意力是有限的，而且越来越少。很可能在用户注意到一段动效之后，注意力和耐心已经用尽，无法看到其他内容就着急去下一个界面了。
所以，对于动效这样一个非常强势的工具，一定要用在希望用户注意的部分，并且认真打磨。真正做到“不为动而动”。
文章来源：优设 作者:程远
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当互联网不断的深入到我们的生活中，我们对安全感的需求也延续到了互联网使用中，特别体现于互联网金融产品。由于其具有风险性、收益性、流动性等特点，用户对于资产安全的掌控感更为关注，产品使用体验欠佳也直接影响客户安全感。
以下将基于自身工作总结和行业经验，聚焦互联网金融产品分享和总结如何向用户营造安全感。
目录：
一、需要什么样的安全感？
二、如何传达出安全感？
三、怎样体现出安全感？
安全感是人类最底层的需求，但不同类用户群体需要的安全感也各有千秋，我们参考第一财经商业数据中心×蚂蚁财富的2019线上理财人群报告，将线上理财的人群分为四类：
分别是初入职场的95后、职场新兴力量的90后、理财中坚力量的80后和经历风雨的70后。其中近一年的新增移动互联网基民中超五层为90后、95后，成为金融移动互联网的中坚力量。
这类型的投资者由于具有碎片化处理事务的习惯和金融知识不足、理财经验不丰富、资金的抗风险能力不高的特点，当市场普遍行情下跌时，更容易产生焦虑的情绪而导致“割韭菜”，进而可能会影响到卸载APP的行为。根据Mob研究院的数据显示，在2021年3月天天基金日均卸载用户规模为前两个月的6倍，而当时对应的市场行情正为基金普遍大跌。
因此从安全感的需求上他们更侧重高效的信息降维、足够的理财产品的风险提示、合理的预期收益宣传以及投后亏损及时的内容陪伴。
而根据腾讯理财通×国家金融与发展实验室出品的2021年互联网理财行为与安全研究报告显示，理财知识更充足，理财经验更丰富的80后、70后在安全感的维护上则更关注理财产品的信息披露风险、信息不透明风险、市场政策风险、个人信息泄露风险此类问题。
安全感是一种感性的心理感受，而人类的情感由本能、行为、反思三个层面共同决定的。
这三个层次作为人类大脑的运作的规律，映射到设计当中，同样是可供遵循、值得探究的。
先于意识和思维，它是外观要素和第一印象形成的基础，着重于产品的外观、触感等。“美观即实用原则”人们会潜意识里认为好看的东西也是好用的，所以在界面设计当中，主要设计对象是视觉设计。
而金融产品中，常用蓝、绿等冷色调的色彩，给人以冷静，稳定的感觉，表现金融产品的科技感和可靠性；常用红、黄、橙等暖色调，代表着热情、温暖与责任。
是人类身体日常行为的运作，行为层的设计与产品使用过程中的愉悦感和效率有关。好的行为层设计对应产品功能传达、易学性与易用性，以及正面的心情感受。在界面设计当中，主要设计对象是交互设计。（将在下文通过投资场景详细分析）
超越了本能层和行为层，存在意识和更高级的感觉、情绪及知觉。对应的是产品的情感温度，主要的设计对象是正向情感的结果反馈以及品牌信任。
良好的企业品牌形象和口碑很大程度上会给用户带来认知上的安全感。用户在初次选择购买金融产品时，往往强大的品牌背书起到了关键作用，即使是同一只基金，用户也会选择在自己信赖的平台里购买。
我们可以通过在页面设计中加入更多的品牌元素，如品牌主题色、LOGO、品牌IP形象、品牌slogan等，来潜移默化地让用户感受企业的价值：
另一种常见于一些平台利用强大的背书以及所获的成就，清晰地向用户展示可以提供的保障权益，责任条款及资质介绍等来传达企业对用户负责的态度，提升用户对产品乃至对企业的信任感：
我们将金融的生命周期分为三个阶段，分别可以概括为：投资前（产品选择）、投资中（产品交易）、投资后（产品管理），不同阶段的关注点不同，而对于安全感需求各不相同：
结合文章一开始对人群的分析，由于投前的行为特点更多聚焦于产品的选择，因此从理财小白的角度对于安全感的缺乏更集中于“买了会不会亏钱？”、“产品买对了吗”、“看不懂规则”、“这个适合我吗”等，尤其存在于一些新形式的理财组合产品和策略智能投产品中。
在这个阶段的安全感维护，除了相关页面的信息降维、必要的投教启蒙以外，还需要考虑用户疑问的快速解答、合理的预期收益宣传等。另外投钱的启蒙教育更可以考虑结合一些运营活动，让小白用户通过更有趣的方法了解产品，了解自己适合的产品。
而对于较有经验的理财“老司机”而言，安全感的缺乏更集中于“过往表现怎么样，如最大回撤率等”、“市场行情、政策是否利好”、“基金经理的资历”等，而更需要考虑信息的多维度展示、信息披露、行情资讯的展示、甚至是产品的对比等来表达产品的未来盈收能力可期。
当投资者已经选择好信任的理财产品时，在产品交易的各个界面也需要关注交易流程中安全感的反馈。
其中包括正向反馈和负向反馈。正向反馈是指用户跟产品发生正确的交互时，系统给予用户的正确引导，可以帮助用户打消顾虑，建立信心，让用户感受到一切都在顺利地进行着，这对那些在设备操作方面缺乏信心的用户来说尤为重要，用户不会对自己的操作或对平台产生质疑，如：专属的密码输入键盘、正向反馈如金额输入时的金额提示、特别提出易误解的交易规则等
而反向反馈是指用户在操作过程中出现或疑似出现误操作时，系统向用户展示提示或二次确认以促进错误的纠正或确保此操作无误。它能确保在第一时间告知用户出现了不正确操作，及时更改，使流程顺利进行，尤其是对于一些理财小白而言，合理的容错设计更促进有效投资，提高未来的盈利体验。如撤销操作二次确认、购买超出风险承受能力的产品、输入错误金额时的反馈。
引起思考：
虽然天天基金的撤单确认展示了退回帐户，但是此弹窗的取消按钮引导性过强，首次操作仅通过银行卡的列表的箭头较难联想到是确认撤单的下一步操作（还以为是可选择退的帐户）。
产品交易成功后，投资者的关注会更集中于自己的资产的变化，产品的未来走势等，因此在安全感的提供上，需要向投资者传达准确的交易状态、资产状态、资产的保护等，甚至可以在产品购买的完成页设置快捷加入自选和涨跌提醒等
引起思考：
在支付宝的基金总金额中，存在交易进行中的提示文案为“买入待确认*元”，但不少小白会产生疑问，当前展示的基金总金额是否包含提示的待确认金额，此时是否可将文案改为“含买入待确认*元”（毕竟也有部分直销app并不会将待确认金额包含进产品的总金额中）
另一方面的更需要考虑当基金产品存在亏损时，及时向投资者传达情感陪伴和合理的投资交易，以促进投资者优化持仓或保持中长期持有，避免频繁的短期交易而导致不良的盈利体验。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为大家概括性地介绍5种流行移动应用中常见的界面设计模式以供大家在自己的项目中参考。这些设计模式有助于大家提高设计的可用性，让界面变得更加直观。文章将侧重介绍能够帮助大家进行下列各方面设计的模式：
在这个社交网络盛行的时代，我们是不是真的还需要用这种陈旧的方式提交个人资料？社交登陆这一设计模式完全可以让用户轻松快捷的登陆，从而取代注册、填写表单之类的麻烦工作。
用户可以直接登陆自己的社交网络账号（Facebook、Twitter或者Google等），无需另外创建一个以后不太可能继续使用的账户，这样可以大大提高注册效率。除此之外，这一设计模式还有下列好处：
注：在国内这一设计演变成了：您可以使用QQ/微博合作帐号登录，然后给你绑定，继续回到注册界面 – –
通知功能可突出显示近期的活动和操作。我们每天要接触大量的信息，但百忙之中却没有时间（或者不愿意把时间）花费在手机上。我们都喜欢在尽可能短的时间内完成要做的事，然后马上知道是否有新的活动或者情况能够引起自己的关注。因此，对于通知设计模式的透彻理解和妥当实施非常重要。
很多知名公司的移动应用采用了下列几种不同的方法实施其通知设计：
你可以模仿一下你最喜欢的解决办法，试试这个办法是否适合于你和你的用户。
通知栏该怎么设计，具体方法右戳学习：《怕打扰用户？来看看怎样设计通知栏不会讨人厌》
弹窗（也叫层叠窗口）是一种常用于互联网广告的方法。弹窗会在不创建新窗口的情况下遮盖住主要内容，无法使用拦阻软件进行拦截，因此用户非看不可。一般来说这种情况很让用户讨厌，但在有些情况下，弹窗打断用户的使用反而能给用户带来帮助。例如，用户可能会希望在不丢失当前用户界面的情况下查看某些信息。
下面是一些弹窗设计模式帮助解决问题的案例：
在习惯了使用Facebook、Twitter或Google等社交网站后，我们都会很自然的使用下拉手势进行内容更新。第一个使用这个设计模式的公司是Apple，在此之后这一设计就广为流行开来了。
当用户需要显示一列非静态，但不能自动刷新的内容时，就可以适用下拉刷新模式。下拉刷新时，屏幕会滚动到顶部，刷新完成后新内容将从顶部开始显示。这种设计模式可以节约空间（不需要使用按钮）而且简单易懂。这种方式还不仅局限于更新内容，其还可以用于在一系列短信、图片或资料更新中加载早先的内容。
除了下拉刷新手势外，滑动也是智能手机上最为常用的手势之一。很多应用都允许用户在文章上左右滑动来了解详细信息或执行其他操作。与依赖于点击鼠标的传统web应用相比，这一方法充满创新意义。
在Android和iOS上有大量采用了滑动、点击及其他特定用户交互方式的移动应用，你可以在自己的项目过程中予以参考。每个应用对于自己的用户来说都有不同的意义和价值。你应当在画线框图的过程中做好规划再投入设计或开发流程。在测试过程中花点时间思考用户的反馈、建议和批评。
文章来源：优设 作者:程远
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
经过一些项目经验，结合几个方法论，我整理出了一个评估交互方案完整性的方法，也可以作为前期考虑方案的分析方式。下面就来介绍一下，希望能给大家帮助和启发。
放眼过去大量同质化或跟风的网站风格，空有一副美观的皮囊，却少了些什么，为何不交互创新一下呢？具有创意的交互必然能使一副黑白的画面瞬间点亮色彩。
你可能想有创意的交互能为网页带来什么？
挺多的，我举例：一个连微动效都没有的静态网页你进去后也就看见的这样，那么如果这个网页进去时，内容会有入场动效，你是不是马上能感觉到这个网站有点儿东西，要抄起鼠标探索一番？换言之，好的交互创意甚至能让你产生心流模式，你通过鼠标到处点击，页面上不断的给出动画效果，然后你收获惊喜，最终促使你进行更多的尝试。
好了，说多了，就是希望为更多设计师提供设计思路或执行概念，帮助大家找到更多的创意灵感。
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. 鼠标拖拽特效
通过鼠标点击长按某个元素进行移动的组合交互，一般用于拖拽移动、内容绘制、元素连接等。应用场景广，互动性较高，能为用户带来更多的参与感和趣味性，甚至制造小惊喜
示例内容：阿里内测的 Real 3D
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 进行解决，这对交互控制或性能优化都是挑战，而代码能够更好的保障这俩点，所以大量的交互动效还是需要开发者支持，而代码实现显然会比设计师产出复杂。
那么如何解决呢？
CSS 进行实现，部分动画元素可以由设计师通过第三方软件或在线生成 CSS、Svga、lottie 文件（相对下 lottie 更消耗性能，在线生成 icon 动画代码： https://loading.io/ ，在线 Lottie 模版搭配使用： https://design.alipay.com/emotion ，自主绘制导出 lottie： http://airbnb.io/lottie/ ，Svga 在线创造： https://www.svgator.com/ ，2D 动画制作： http://zh.esotericsoftware.com/ ）。而大部分的特殊物理效果或特殊动效，其实会有可用的第三方库或代码资源来解决，首先就是保证你所设计出来的动效是可行的，过于逆天可能还是有难度，剩下的便是提供动效关键词方便开发查找相关资源，或者你给出参考来源。常见的代码动效素材网有： https://hakim.se/ 、 https://www.17sucai.com/pins/33749.html 、 http://www.sucai58.com/tag/2408.html 等（欢迎补充哈，别藏着掖着）。对于 3D 效果的前端开发呢，暂推荐新开源的 Oasis 引擎或 Three js 这些来实现，当然其他引擎也没问题。2. 网页创新设计的策略考虑
考虑到创新开发的背景情况不一致，这里我提供了一些创新研发的策略提供参考：
传统改版：
1.明确改版目的，挖掘价值点
会议说明，清楚改版需求的背景与痛点，挖掘价值找到设计发力点
制定改版目标，明确分工计划，同步项目情况
2. 构建原型框架，评审优化
设计新版架构，确认范围层细节（功能型：功能规格支持。信息型：内容需求），完善流程与信息框架，然后拉拢项目相关人员进行评审优化，直到新版框架大体定型后，再进行视觉层输出
3. 明确产品定位，建立设计语言
要保障产品气质与视觉风格的契合，即一个资讯网站肯定不适合采用电商视觉进行输出。然后根据内容占比，考虑呈现的布局方式，即不同模块中的视频、图片、文字比例情况。然后你可以结合上文的视觉层创意形式进行套用，当主要的静态视觉设计完成后即可进入评审阶段
4. 高保真评审，挖掘交互创新点
对网页高保真进行评审，确认页面信息框架或界面设计可行。然后对交互创新方案探讨，结合网页的板式设计，提出交互创新的细节，与开发者同步，确保实现的可行性与项目工时可控，同时披露交互细节帮助开发者进行调研或准备
5. 交互创新对齐开发，进入研发阶段
准备提供交互的细节 Demo 或参考内容，在基础内容开发完成后或开发者认为适合介入的时机，进行交互创新内容的对齐，使创新方案在最小可行的基础上进行开发实现。之后建议设计同学耐心的陪同开发小哥进行还原，确保效果
6. 测试验收，预发上线
最后进行成果验收，确保基本的内容是否符合标准，再根据工时情况或上线计划等，考虑交互创新部分的细节还原调试，适公司实际情况可以考虑再迭代一版。之后根据产品情况自行考虑是否 A/B 测试、灰度上线等，上线后就是线上数据跟进或用户调研了，希望你的新版本收获一片叫好 哈哈
敏捷开发：
对于想要敏捷实现目标的话，可以采用谷歌冲刺法（Google Sprint)，当前基本分为六个阶段进行，分析理解阶段、定义阶段、发散思考阶段、决策阶段、原型产出阶段、测试验收阶段。这里我结合交互创新的方法，对多个阶段进行了补充，内容如下：
1. Understand 理解
明确建站目的、需求背景、梳理业务或用户需求。通过用户研究或竞品分析等手段，更好的理解产品、行业现状以及痛点机会，也为后面阶段提供可靠的依据或支撑
2. Define 定义
基于对此次建站需求与背景深度理解，定义产品设计目标，挖掘价值点
3. Diverge 发散
让参与者们集思广益，发散思考，将不同的点子记录下来，最好图文并茂的画一下，然后形成自己的方案。在这个过程中不必共处一室，独立进行即可，这样可以避免被带偏或扰乱
4. Decide 决策
方案决策环节，产品经理、设计师、开发小哥等将各自的方案进行展示说明，这个过程中不要急着评价对方，只要投票选出最佳方案即可，这是一个方案的根基，之后再进行优化和细节完善
5. Prototype 原型
建议先将方案框架进行原型绘制或 demo 产出，然后经过一轮初步测试评审后可以再次优化复盘。在原型绘制的过程中，主要是确认流程与信息框架，不必着急视觉层的问题。若准备进入视觉设计，则可以带入这几个问题进行思考；
6.Validate 验证
首先通过内部自测优化，再根据产品类型考虑是否找利益相关者进行可用性测试验证，或者找专家做顾问。之后再进行下一步的优化完善即可
也许讲了这么多，你还是不知道前面诸多的创意方式怎么用，没关系，这里我进行了简单的整理对标，希望你看完还有救！
网站本身即视为一个产品，一个产品的风格定向一定是由产品本身属性或用户属性影响，了解产品定位或目标用户也是重要的环节，这些环节可以制定更符合产品或用户的信息框架或视觉表现。通常我们可以将网站类型分为企业官网、品牌官网、营销官网、门户网站、论坛相关、综合网站六大类，这里简单讲一下这些网站定位与视觉特征；
通常一个网页怎么设计版式、如何调整布局结构、调整基础交互，都是需要参考原型的信息框架。信息框架中的元素情况会直接影响视觉输入和基本交互。如信息框架中有很多图，那么设计时就需要考虑是平铺直叙还是轮播显示。
信息框架设计学习：《Web 信息框架》
那么关于不同的信息架构有什么好的布局方法吗？这一点通过内容的搭配形式，整理了几种方式供参考：
文の处理：
通常一个纯文本的界面是很难设计的，因为过于单调，对此可采用
图の处理：
纯图片的形式不多见，但是不能否定，一般可能是图本身有一定的信息传达，或者是图片浏览类型的服务
图文の处理：
少量图文配套是比较好处理的，手法也比较多，根据配套数量情况还可以调换位置形成错位区分模块
视频の处理：
视频的处理分为自动跟手动控制，自动即作为背景自动播放，可进行简单的切换，手动则要注意相关按钮布局和显示遮挡问题
图文视频の混合：
通常图文视频混合的情况很少见，视觉焦点不好控制，其中视频做背景是最好处理的，但内容信息不易过多
三维の处理：
因为是三维的场景，所以需要考虑到三维场景下的视角形式与操作方式
按钮の处理：
按钮是网页中最常见的交互控件，是页面扭转或功能启用的基础
控件の处理：
控件组适用于复杂场景的任务交互，通常由多个按钮或控件单元组成，特点就是控件单元多模块占比大
结合信息框架对不同元素类型进行视觉设计调整后，再对页面内容的基本交互进行考虑，例如轮播、切换、弹出、展开收起、转场等。之后才是更加细腻的交互创意思考。
基本交互发力点
鼠标经过反馈：常见且重要的交互方式，通过鼠标经过时反馈选中状态或提示相关信息
按钮点击反馈：在鼠标点击后，按钮或控件的颜色形状变换效果，用于反馈点击成功，实现眼手体验一致
按钮长按效果：长按状态的动效示意，通过对长按目标加动画响应进度或持续的状态，而非单纯的变色或样式切换
完善 Loading 动画：如点击上传下载更新等，出现对应进度条或 loading 动画帮助用户完善体感
内容入出场动效：页面切换加载或滑动页面后，内容采取动效有序的进入场景定格，而非生硬的静态切换
多内容轮播应用：对 Banner 或其他多个内容展现，进行轮播交互完善和时间细节控制
锦上添花交互发力点
按钮切换动画：通过 icon 的路径动画表达按钮切换，而非直接的图标对换，更具个性和视觉观赏性
鼠标跟踪动画：可以适当的做一些鼠标跟踪事件，让一些背景或界面元素跟随鼠标律动起来，增强互动
特殊滚轮联动效果：通过鼠标滚动联动其他元素进行交互变化，来呈现更有创意的场景切换或内容展示
内容穿插滚动：将内容分层控制，页面滚动时将元素固定或交替显示，产生穿梭感提升界面层次
响应式展开收起：主要用于二级或下级内容的自动展开，由鼠标经过自动展开并聚焦，减少用户操作
结合音视频媒体控制：在页面中植入音视频内容通过按键或鼠标进行交互或切换，打造互动性更高的媒体传达
趣味转场或页面加载：对页面转场或加载深度优化。采取更有创意的方式或动画来过渡，让视觉体验提升亿点点
内容或窗口抖动报错：合理采用抖动效果进行报错反馈或特殊场景应用，使呆板提示更灵动
可 DIY 的颜色或图形：提供主题或模块的 DIY 空间，满足用户编辑符合自己喜好的视觉效果
结合产品的场景创意
打造个性的模块呈现方式：结合产品的应用场景打造有个性的呈现方式
打造游戏互动的呈现：将有剧情有故事的产品或内容游戏化，可以让用户趣味互动更加深刻
打造一镜到底的转场：结合鼠标滚轮联动做镜头创意，突出产品细节或内容呈现
打造三维或全景场景：根据产品属性考虑用三维的场景来增强互动与突出产品
打造仪式感交互：利用视觉和交互变化来制作符合产品的应用效果，实现仪式感线上体验
有声交互：比较少见，视产品情况应用，可以使声音产生互动或视觉影响
镜头交互：适合有镜头针对性应用的产品采用，需要授权，要做好隐私说明
补充按钮交互触发：在场景更为复杂交互需求更多后，进行的常规解决方法
补充按键与鼠标配合交互：适合按键触发且需要鼠标控制变量的复杂交互
文章来源：优设 作者：泡泡bing
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com