扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
一篇看懂网页端交互创意怎么做(2)
2021-03-16 栏目：行业资讯 查看()
（运用特殊的图层顺序结构，在页面滚动查看时，形成奇妙的元素穿梭视感。通常会穿梭替换背景或让元素接力，这样相比静态写死的页面滚动时会更有层次感）
示例地址：
示例地址：
（输入关键内容后，页面自动生成结果进行呈现，整个过程可以是缓慢有序的，适用于降压或画面创意生成的产品，可以让用户感受整个过程与细节变化）
示例地址：https://www.solaas.com.ar/dreamlines/ #输入关键词后页面会自动生成迷幻的动态画面
示例地址： #输入选项后生成转盘随机抽取，别再问我选哪个好！转就是了
（将产品内容以游戏的形式或交互呈现，让内容充满趣味和互动性，使得用户在参与游戏互动的过程中打破了常规的阅读体验）
示例地址：https://dccxi.com/trust/ #国内
（建立一个三维或者全景空间进行查看或操作，再赋予操作按钮或说明，实现3D场景的交互与视觉效果，常用与地图全景查看或3D游戏应用，可以巧妙的结合产品3D模型，打造非凡的互动体验）
示例地址：
示例地图：https://map.baidu.com/@13371285.96,3516997.92,19z #百度地图的全景查看
（打造一个非平面的视觉场景。用鼠标点击或滚轮联动交互利用分层的元素变化，营造出由近到远或由上至下的一镜到底的视角穿梭体验。界面场景切换更加自然，还有超强的空间感与趣味性，让人难以忘怀如临其境）
示例地址：
（将某些功能或任务引用按键进行交互或触发。常使用字母、数字、空格、方位键，界面需要有提示对用户进行指导）
示例地址：https://www.julianabrams.co.uk/ #基于键盘即可完成所以浏览
（常见的有弹窗、抽屉、卡片展开、转盘等，通过个性轻松的显示结构与交互方式也能让人眼前一亮）
示例地址：
示例地址：
（对一些颜色或形状元素提供切换或DIY的空间，允许用户进行意料之外的交互或配置能力，提升网页趣味性或用户个性化需求满足）
示例地址：https://ant-design.gitee.io/docs/spec/introduce #可自定义的主题色
（围绕产品介绍的媒体内容，常见有视频或音频且支持基本交互控制，结合场景需求可以丰富交互的形式或更多媒体控制功能，例如长按快进、倒退、剪辑、混音等，常用于娱乐互动场景或音视频类产品）
示例地址： #一个优秀的媒体交互网站
示例网址：
（通过抖动进行报错或反馈，常见为密码输入错误时或游戏中受到伤害的场景，可伴随音效提示一起。使用场景不广泛，但是也可以进行创意应用，例如抖掉灰尘小游戏，长按元素抖动干净为止）
（结合现实场景中的交互方式，打造相似的线上场景帮助用户共情带入，再配合交互和动效完成类似的动作，为用户带来仪式感和共情效果）
示例地址：https://issuu.com/matskafte/docs/mathias_skafte_andersen_portfolio_f #书籍预览的场景打造
（通过麦克风采集声音来影响交互，是一种声音的交互，如果网站支持，甚至可以语音交互，是一种少见的网页交互形式，并非传统的音视频控制而已）
示例地址： #搞点声音就能动起来
（通过摄像头授权获取镜头画面进行交互，通常是一些镜头滤镜效果或者增强现实技术结合做交互创意，网页上少见新颖）
示例地址：
找对方法去创新很重要！在实际工作中，我们不仅要衡量界面设计与交互效果，同时还要兼顾开发资源、实现难度以及产品架构本身考虑。对此我们也需要了解一下开发实现的概念，之后再研究如何进行创新设计。
1. 开发者的痛点与解决方案在进行创意设计时不考虑开发，那不是自嗨就是对开发耍流氓。静态界面开发或简易的切换效果并不难。而代码层的图形变化效果、仿物理效果(例如反弹、律动、重力等效果)、3D交互效果相对会复杂许多。大多的动效不能依赖GIF或Lottie进行解决，这对交互控制或性能优化都是挑战，而代码能够更好的保障这俩点，所以大量的交互动效还是需要开发者支持，而代码实现显然会比设计师产出复杂。
那么如何解决呢？
大多数网页的交互动效都是基于Javascript或CSS进行实现，部分动画元素可以由设计师通过第三方软件或在线生成CSS、Svga、lottie文件（相对下lottie更消耗性能，在线生成icon动画代码：https://loading.io/ ，在线Lottie模版搭配使用：https://design.alipay.com/emotion ，自主绘制导出lottie： ，Svga在线创造：https://www.svgator.com/ ，2D动画制作： ）。
而大部分的特殊物理效果或特殊动效，其实会有可用的第三方库或代码资源来解决，首先就是保证你所设计出来的动效是可行的，过于逆天可能还是有难度，剩下的便是提供动效关键词方便开发查找相关资源，或者你给出参考来源。常见的代码动效素材网有：https://hakim.se/ 、https://www.17sucai.com/pins/33749.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 验证：
首先通过内部自测优化，再根据产品类型考虑是否找利益相关者进行可用性测试验证，或者找专家做顾问。之后再进行下一步的优化完善即可
原谷歌冲刺策略概念相关材料： 《谷歌的设计冲刺（Google design sprint）》
八、网页框架如何搭配创意形式也许讲了这么多，你还是不知道前面诸多的创意方式怎么用，没关系，这里我进行了简单的整理对标，希望你看完还有救！
1. 明确产品定位网站本身即视为一个产品，一个产品的风格定向一定是由产品本身属性或用户属性影响，了解产品定位或目标用户也是重要的环节，这些环节可以制定更符合产品或用户的信息框架或视觉表现。通常我们可以将网站类型分为企业官网、品牌官网、营销官网、门户网站、论坛相关、综合网站六大类，这里简单讲一下这些网站定位与视觉特征；
企业官网风格较为庄重正式，个性化体现少且相对板正些；
品牌官网内容是多元化的，视觉与交互都更具个性化，没有太多表现限制，传递品牌优势或能力为主；
营销网站更加体现产品或业务能力，并且都有相关咨询或消费入口，图片插画应用不会少；
门户网站是指提供某类综合性互联网信息资源并提供有关信息服务的应用系统，内容多紧凑型；
论坛相关又称BBS，是聚集用户进行资讯、情感、娱乐等领域的电子公告系统，导航多，偏资讯；
综合网站，内容结构更丰富，如企业营销品牌一体化，通常是产品营销做核心，图文搭配干活不累；
2. 信息框架决定板式细节通常一个网页怎么设计版式、如何调整布局结构、调整基础交互，都是需要参考原型的信息框架。信息框架中的元素情况会直接影响视觉输入和基本交互。如信息框架中有很多图，那么设计时就需要考虑是平铺直叙还是轮播显示。
信息框架设计学习：《Web信息框架》
那么关于不同的信息架构有什么好的布局方法吗？这一点通过内容的搭配形式，整理了几种方式供参考：
文の处理：
通常一个纯文本的界面是很难设计的，因为过于单调，对此可采用
几何色块进行搭配，配合字号对比形成冲击力
点线面装饰，标点符号箭头等都可以合理运用
利用板式跳跃率排版，有大有小有节奏有对比
补充插画搭配文案，采用小范围插画弥补单调
……
图の处理：
纯图片的形式不多见，但是不能否定，一般可能是图本身有有一定的信息传达，或者是图片浏览类型的服务
Banner走马灯的形式进行大图轮播
大图展示加预览切换控件
非全屏图片展示，配合hover状态提示切换，或屏幕上显示切换按钮，适合全屏布局
图片响应式陈列排放，鼠标悬浮选中时进行聚焦放大
环绕显示，通过鼠标拖拽或按钮切换聚焦对象
多张图可陈列摆放或通过大小对比叠加摆放，也以栅格化错位摆放，再适当的配合切换控件
……
图文の处理：
少量图文配套是比较好处理的，手法也比较多，根据配套数量情况还可以调换位置形成错位区分模块
大图背景铺满加遮照文案，控件与内容少可采用全屏切换的页面交互
图片抠图加文案左右排版，注意留白。多组可左右调换位置往下排布，或者使用不同的背景色分割
图片陈列分割或多个横向排布，文字可以在图上下方摆放或图内加遮照显示，也可以鼠标悬浮聚焦时显示
小图片配合加大文案叠加显示，突出文字，图片为辅
……
视频の处理：
视频的处理分为自动跟手动控制，自动即作为背景自动播放，可进行简单的切换，手动则要注意相关按钮布局和显示遮挡问题
视频封面配合播放按钮做入口，不用直接播放，入口可以更小数量更多，点击后画中画或全屏播放都行
设定好视频播放的大小或位置，给予封面以及播放按钮提示，或者鼠标移入范围显示播放按钮
单个模块的多视频交互最好给予切换按钮，或者加以带缩略封面的切换栏进行处理，以减少视频模块的占比
在能够保证内容播放清晰的情况下可以多个陈列摆放，鼠标移入目标时可以直接播放达到视频预览效果
……
图文视频の混合：
通常图文视频混合的情况很少见，视觉焦点不好控制，其中视频做背景是最好处理的，但内容信息不易过多
视频做背景，少量图文或按钮搭建页面框架，确保视频内容不被过分遮挡，也能较好兼容这些元素
在视频未播放前，也可以叠加遮照与相关图文信息或按钮控件，点击播放按钮后，收起即可
通过鼠标悬浮选中目标后，Tips浮框显示额外的图文视频信息或按钮控件即可
小范围播放视频支持全屏，使得图片文字视频能够在有限的范围显示更多有效内容
半沉浸式全屏视频交互，采用幽灵式风格将图文按钮控件等往屏幕边缘分布，留出核心区域交互视频或观看
……
三维の处理：
因为是三维的场景，所以需要考虑到三维场景下的视角形式与操作方式
固定视角，有一个固定的场景和视角，可以通过交互使场景的内容发生变化，内容和操作可以轻量化
穿梭视角，通过交互场景中的图或模型，形成向前后穿梭的效果，适合多层内容逐步查看或过程演变
自由视角，控制元素或视角在场景中自由移动，或者围绕某个元素全景查看，适合细节展示或空间体验
固定操作，指固定的操作按钮布局或通过键盘控制场景变化，适合场景中效果简易有规律的产品
三维操作，在三维场景中含有鼠标可以选取操作的元素，适合带有场景元素互动、交互丰富的产品
…….
按钮の处理：
按钮是网页中最常见的交互控件，是页面扭转或功能启用的基础
色块按钮，色块式的按钮，有视觉明显易触达的优点
线性按钮，用于弱化显示或透出背景内容时较为常见的按钮样式
鼠标悬浮按钮，不直接显示而通过鼠标经过相关模块时显示对应按钮
元素按钮事件，对图文内容加上点击事件，通按钮使用，例如超链接
……
控件の处理：
控件组适用于复杂场景的任务交互，通常由多个按钮或控件单元组成，特点就是控件单元多模块占比大
覆盖式卡片，通过卡片承载控件，控件多了就用更大的卡片呗 [滑稽狗头表情]
幽灵式控件，线性样式展示控件来兼容背景，并结合鼠标悬浮加强选择样式
为控件留白，；留出控件交互的区域，通常采用留白或纯色背景来陈列控件组
鼠标悬浮展开，结合图标或直接隐藏，在鼠标悬浮选中时显示相关控件详情
展开收起式控件组，小面积显示核心控件，配合展开收起按钮隐藏更多
折叠按钮与跳转，通过按钮入口触发新的弹框，或者打开新的页面来陈列控件组完成任务
……
郑重申明：勤人信息以外的任何单位或个人，不得使用该案例作为工作成功展示！