网页创新设计的方法（下）

      大多数网页的交互动效都是基于Javascript或CSS进行实现，部分动画元素可以由设计师通过第三方软件或在线生成CSS、Svga、lottie文件。

相对下lottie更消耗性能：

1、在线生成icon动画代码：https://loading.io/ 

2、在线Lottie模版搭配使用：https://design.alipay.com/emotion 

3、自主绘制导出lottie：http://airbnb.io/lottie/ 

4、Svga在线创造：https://www.svgator.com/ 

5、2D动画制作：http://zh.esotericsoftware.com/ ）。

网页框架如何搭配创意形式

       也许讲了这么多，你还是不知道前面诸多的创意方式怎么用，没关系，这里我进行了简单的整理对标，希望你看完还有救！

1. 明确产品定位

       网站本身即视为一个产品，一个产品的风格定向一定是由产品本身属性或用户属性影响，了解产品定位或目标用户也是重要的环节，这些环节可以制定更符合产品或用户的信息框架或视觉表现。通常我们可以将网站类型分为企业官网、品牌官网、营销官网、门户网站、论坛相关、综合网站六大类，这里简单讲一下这些网站定位与视觉特征；

• 企业官网风格较为庄重正式，个性化体现少且相对板正些；
• 品牌官网内容是多元化的，视觉与交互都更具个性化，没有太多表现限制，传递品牌优势或能力为主；
• 营销网站更加体现产品或业务能力，并且都有相关咨询或消费入口，图片插画应用不会少；
• 门户网站是指提供某类综合性互联网信息资源并提供有关信息服务的应用系统，内容多紧凑型；
• 论坛相关又称BBS，是聚集用户进行资讯、情感、娱乐等领域的电子公告系统，导航多，偏资讯；
• 综合网站，内容结构更丰富，如企业营销品牌一体化，通常是产品营销做核心，图文搭配干活不累；
  
   

2. 信息框架决定板式细节

       通常一个网页怎么设计版式、如何调整布局结构、调整基础交互，都是需要参考原型的信息框架。信息框架中的元素情况会直接影响视觉输入和基本交互。如信息框架中有很多图，那么设计时就需要考虑是平铺直叙还是轮播显示。

信息框架设计学习：《Web信息框架》

       那么关于不同的信息架构有什么好的布局方法吗？这一点通过内容的搭配形式，整理了几种方式供参考：

文の处理：

通常一个纯文本的界面是很难设计的，因为过于单调，对此可采用

1. 几何色块进行搭配，配合字号对比形成冲击力
2. 点线面装饰，标点符号箭头等都可以合理运用
3. 利用板式跳跃率排版，有大有小有节奏有对比
4. 补充插画搭配文案，采用小范围插画弥补单调
        
    

图の处理：

纯图片的形式不多见，但是不能否定，一般可能是图本身有有一定的信息传达，或者是图片浏览类型的服务

1. Banner走马灯的形式进行大图轮播
2. 大图展示加预览切换控件
3. 非全屏图片展示，配合hover状态提示切换，或屏幕上显示切换按钮，适合全屏布局
4. 图片响应式陈列排放，鼠标悬浮选中时进行聚焦放大
5. 环绕显示，通过鼠标拖拽或按钮切换聚焦对象
6. 多张图可陈列摆放或通过大小对比叠加摆放，也以栅格化错位摆放，再适当的配合切换控件
   
    

图文の处理：

少量图文配套是比较好处理的，手法也比较多，根据配套数量情况还可以调换位置形成错位区分模块

1. 大图背景铺满加遮照文案，控件与内容少可采用全屏切换的页面交互
2. 图片抠图加文案左右排版，注意留白。多组可左右调换位置往下排布，或者使用不同的背景色分割
3. 图片陈列分割或多个横向排布，文字可以在图上下方摆放或图内加遮照显示，也可以鼠标悬浮聚焦时显示
4. 小图片配合加大文案叠加显示，突出文字，图片为辅
        
    

视频の处理：

       视频的处理分为自动跟手动控制，自动即作为背景自动播放，可进行简单的切换，手动则要注意相关按钮布局和显示遮挡问题

1. 视频封面配合播放按钮做入口，不用直接播放，入口可以更小数量更多，点击后画中画或全屏播放都行
2. 设定好视频播放的大小或位置，给予封面以及播放按钮提示，或者鼠标移入范围显示播放按钮
3. 单个模块的多视频交互最好给予切换按钮，或者加以带缩略封面的切换栏进行处理，以减少视频模块的占比
4. 在能够保证内容播放清晰的情况下可以多个陈列摆放，鼠标移入目标时可以直接播放达到视频预览效果
        
    

图文视频の混合：

通常图文视频混合的情况很少见，视觉焦点不好控制，其中视频做背景是最好处理的，但内容信息不易过多

1. 视频做背景，少量图文或按钮搭建页面框架，确保视频内容不被过分遮挡，也能较好兼容这些元素
2. 在视频未播放前，也可以叠加遮照与相关图文信息或按钮控件，点击播放按钮后，收起即可
3. 通过鼠标悬浮选中目标后，Tips浮框显示额外的图文视频信息或按钮控件即可
4. 小范围播放视频支持全屏，使得图片文字视频能够在有限的范围显示更多有效内容
5. 半沉浸式全屏视频交互，采用幽灵式风格将图文按钮控件等往屏幕边缘分布，留出核心区域交互视频或观看
6. ……

三维の处理：

因为是三维的场景，所以需要考虑到三维场景下的视角形式与操作方式

1. 固定视角，有一个固定的场景和视角，可以通过交互使场景的内容发生变化，内容和操作可以轻量化
2. 穿梭视角，通过交互场景中的图或模型，形成向前后穿梭的效果，适合多层内容逐步查看或过程演变
3. 自由视角，控制元素或视角在场景中自由移动，或者围绕某个元素全景查看，适合细节展示或空间体验
4. 固定操作，指固定的操作按钮布局或通过键盘控制场景变化，适合场景中效果简易有规律的产品
5. 三维操作，在三维场景中含有鼠标可以选取操作的元素，适合带有场景元素互动、交互丰富的产品
        
    

按钮の处理：

按钮是网页中最常见的交互控件，是页面扭转或功能启用的基础

1. 色块按钮，色块式的按钮，有视觉明显易触达的优点
2. 线性按钮，用于弱化显示或透出背景内容时较为常见的按钮样式
3. 鼠标悬浮按钮，不直接显示而通过鼠标经过相关模块时显示对应按钮
4. 元素按钮事件，对图文内容加上点击事件，通按钮使用，例如超链接
        
    

控件の处理：

控件组适用于复杂场景的任务交互，通常由多个按钮或控件单元组成，特点就是控件单元多模块占比大

1. 覆盖式卡片，通过卡片承载控件，控件多了就用更大的卡片呗 [滑稽狗头表情]
2. 幽灵式控件，线性样式展示控件来兼容背景，并结合鼠标悬浮加强选择样式
3. 为控件留白，；留出控件交互的区域，通常采用留白或纯色背景来陈列控件组
4. 鼠标悬浮展开，结合图标或直接隐藏，在鼠标悬浮选中时显示相关控件详情
5. 展开收起式控件组，小面积显示核心控件，配合展开收起按钮隐藏更多
6. 折叠按钮与跳转，通过按钮入口触发新的弹框，或者打开新的页面来陈列控件组完成任务
        
    

3. 交互创意如何下手

结合信息框架对不同元素类型进行视觉设计调整后，再对页面内容的基本交互进行考虑，例如轮播、切换、弹出、展开收起、转场等。之后才是更加细腻的交互创意思考。

     （1）基本交互发力点

鼠标经过反馈；常见且重要的交互方式，通过鼠标经过时反馈选中状态或提示相关信息

按钮点击反馈；在鼠标点击后，按钮或控件的颜色形状变换效果，用于反馈点击成功，实现眼手体验一致

按钮长按效果；长按状态的动效示意，通过对长按目标加一动画响应进度或持续的状态，而非单纯的变色或样式切换

完善Loading动画；如点击上传下载更新等，出现对应进度条或loading动画帮助用户完善体感

内容入出场动效；页面切换加载或滑动页面后，内容采取动效有序的进入场景定格，而非生硬的静态切换

多内容轮播应用；对Banner或其他多个内容展现，进行轮播交互完善和时间细节控制

     （2）锦上添花交互发力点

按钮切换动画；通过icon的路径动画表达按钮切换，而非直接的图标对换，更具个性和视觉观赏性

鼠标跟踪动画；可以适当的做一些鼠标跟踪事件，让一些背景或界面元素跟随鼠标律动起来，增强互动

特殊滚轮联动效果；通过鼠标滚动联动其他元素进行交互变化，来呈现更有创意的场景切换或内容展示

内容穿插滚动；将内容分层控制，页面滚动时将元素固定或交替显示，产生穿梭感提升界面层次

响应式展开收起；主要用于二级或下级内容的自动展开，由鼠标经过自动展开并聚焦，减少用户操作

结合音视频媒体控制；在页面中植入音视频内容通过按键或鼠标进行交互或切换，打造互动性更高的媒体传达

趣味转场或页面加载；对页面转场或加载深度优化。采取更有创意的方式或动画来过渡，让视觉体验提升亿点点

内容或窗口抖动报错；合理采用抖动效果进行报错反馈或特殊场景应用，使呆板提示更灵动

可DIY的颜色或图形；提供主题或模块的DIY空间，满足用户编辑符合自己喜好的视觉效果

     （3）结合产品的场景创意

打造个性的模块呈现方式；结合产品的应用场景打造有个性的呈现方式

打造游戏互动的呈现；将有剧情有故事的产品或内容游戏化，可以让用户趣味互动更加深刻

打造一镜到底的转场；结合鼠标滚轮联动做镜头创意，突出产品细节或内容呈现

打造三维或全景场景；根据产品属性考虑用三维的场景来增强互动与突出产品

打造仪式感交互；利用视觉和交互变化来制作符合产品的应用效果，实现仪式感线上体验

有声交互；比较少见，视产品情况应用，可以使声音产生互动或视觉影响

镜头交互；适合有镜头针对性应用的产品采用，需要授权，要做好隐私说明

补充按钮交互触发；在场景更为复杂交互需求更多后，进行的常规解决方法

补充按键与鼠标配合交互；适合按键触发且需要鼠标控制变量的复杂交互