网页交互效果集（一）

我大概算一个偏执的人，以下大部分案例来源于国外，国内部分做得好的页子也有，但是弱一线，国外屡见不鲜，而国内更加罕有。

官网设计就像这个世界上无数个产品一样，我们是积弱的。

如果你问为什么我们有那么多人买苹果，为什么我们要选择特斯拉，甚至可以说是是中国人把他送上市值最高公司的位置。

为什么我们会更多推崇洋货，而对国货天然就缺乏信任。只因为过去人家确实好丫。

所以我们选择了他们，所以外国人愈富有，富有又愈能使他们投入到自己想做的事情中去，如此循环反复。

而中国人幸福感欠缺，我们中的大部分人都是困于现实现状，忙于生活，追寻理想需要付出比人家double甚至更多的努力才能稍微挣脱下环境束缚，前行那么一丢丢。

企业要赚钱，客户要省钱，设计师需要养家糊口同时有更进一步的上升空间，都是非常难调和的矛盾。

要问我什么要去做知识分享这么件事情，我只是不想让自己这些年懂的一些东西平白浪费掉罢了。只要看到这篇文章的你，哪怕能为你节约一丝丝摸索的时间，加快你成长的步伐，或者激发你的热情或是兴趣，就值了。

而且那一年的我，也是这么过来的，我只是把那些分享干货给过我的人的精神传递下去罢了，而未来改变环境的希望和关键可能就在你身上。

这个世界上大部分人的想法都是主流的，赚钱，买房，买车，追求活得比别人好。其实没毛病，但有时候也不妨改变下，不需要让自己活在别人的羡慕中。跟随你内心的声音，随着心出发就好。

网页的交互手法非常非常多，越是头部公司的案例，越能发现非常多的亮点。

在这里我例举了基本的3种手法。因为并未有行业的统一命名规范，在这里我私下另取的，若是描述不到位的地方，欢迎指正

1.网页交互效果之

隐藏卷轴式

主要指的是网页滑到其中一屏，类似卷轴一样横向左右缓缓滑动展开感觉，就像清明上河图这种横板宽幅山水画，一屏不足以看全貌。

OPPO find XPro的官网就是采用这样的设计形式，浏览一气呵成，更为独特。

它是间隔有一个板块之后再接着重复这样的交互，就不会给人感觉连续动太突兀

奥佳华按摩椅也是采用这样的页面设计，但相对可能更加接地气一些，把一些不那么好看但又必须放的图片藏到了最里面。兼顾了品牌与内容。

以下是日韩欧美外国几个类似的网站。

Deeponde官网的设计设计感与舒适度更强，内容更为简约规整。

这个效果与其他案例相比，它不同的地方是把文字弹出移动的效果也加入了其中。

从最初切换画面没有文字到文字隐现，又多了一层难度。

这个网站的设计中，作者做了一些小小的逆向思维，也就是前一个效果还是从左到右移动，下一个板块则反之从右到左。

YORKYS冰淇淋蛋糕的网页，又和前一个不同，上一个页面的设计是文字在最上方，下面的图片移动，这个是图片在上方移动，同时下面也有不同颜色的装饰圆跟随展示主体出现/隐藏的交互。

这几个案例都是同样具备隐藏卷轴式交互效果的同时，也有一些更多根据实际情况而来的小心思。

2.网页交互效果之

同屏滑轮式

这个交互形式意思就是说在同一个屏幕区域范围内，网页被切分为二，一侧背景被固定，形成静态，一侧则可以上下滑动，变成动态

一动一静，动静对比，产生错落有致的效果。

其中传播最广的案例是星巴克的中国官网，其实完全是可以普及流行起来的。奈何中小企业老板不懂。。。

这个设计左侧固定了板块的同时，也跟随右侧移动的内容，去展示不同的标题。不似常规设计，标题一定要与内容在一边放一起。

（现实中可能不需要给到左侧这么多留白空间，虽然好看，但不利于右边放更多内容。但是也是值得借鉴的）

在这个设计当中，车辆随着鼠标经过缩放到左侧，然后显示内部零件构造，右侧文案也是随之滚动，是一左一右都做了动态效果，唯一固定不变的是白色背景的高度。

当然同屏滑轮也不一定需要固定在左边或者右边，这个设计当中，汽车就被固定在中间，而是左右两边的文案随之上下滚动。

这个设计也是我比较喜欢的，一方便，它左侧的标题有随着右边的图片移动，更换颜色与定位位置。以方便右侧的图片滑动也额外灵动。

这个设计好的地方就在于，它也是左边文字滑动，右边图片也会随之上下切换的。

这个设计更是不差苹果的产品页面了，多种交互效果在其中，它的特色在于，同屏滚动展示产品。除了上文提到的形式，还有文字交叉移动，包含接下来我要提到的一个新的交互形式，那就是。

1.网页交互效果之

缩扩聚散式

缩扩聚散也是我发明的词汇，如果说第一种形式是把画卷平铺展开，这种形式更具视觉冲击力，是让人去走进画卷，当你鼠标下滑的时候，会触发画面中心某物体（又或者是LOGO或形状）陡然视觉上由远极近向你扑面而来，形成视觉冲击力的效果。

如果你看过3DIMAX电影就见过那开头的画面就是会了解那种跟随屏幕深入到其中的感觉。

此处有两种形式的交互，既可以缩回小的效果又能扩散到更大的画面。缩能让画面更聚焦，形成特殊的有记忆力的图片或者形状，产生留白；放，亦能吸引你更多注意，给人花朵绽开，终现全貌的感觉。

问界汽车的官网就是从一开始的LOGO形状到外扩展示更大气的全屏视频的交互效果。可以说是兼顾了品牌感（体现了这个LOGO）又有视觉冲击力了。

这个设计中间的图片尺寸从一开始的正方形变成长方再接着变成全屏继续往下又成了3张贴图的一部分，可以说前端的设计与技术协作做得各种娴熟非常有有小细节小心思了。

VIVO官网是反其道而行之，一开始是全屏大图，然后就缩小变成手机壁纸的一部分（这个与原本内容就是为了体现手机系统有关）所以该缩还是该放，哪个先做，还是得结合具体使用场景。

香飘飘的设计，也是由大变小，不过这次不是缩为LOGO而是缩为产品也就是奶茶杯的形状，并且在接下来的环节也有个图片从中型尺寸放大的效果。

更新一波大疆新产品mini的设计，可以说是结合了2和3的效果，即左侧文字变化，又右侧产品变化，最后还通过产品的镜头达到放大全景的效果。所以其实没什么约定俗成，只有敢于尝试，才能产生新的突破。

最后，最最最流畅的效果，还得是苹果，（苹果镇楼）也是最先把这一交互潮流带到整个行业中来，带着一起学一起卷的。在交互的顺滑顺畅度上，苹果如果称第二没有其他页面敢称第一。苹果每年发布新品与之般配的产品页面的交互，都非常值得每一位网页设计师去学习去研究。苹果可以说是第一个做到把如此多的内容做到一个专题页里，通过合理的排版分布，多而不拥挤，不乱。有品牌感有逼格，同时还能促进成交的。

拥有如此多元化的交互手法与方式，比传统线下平面更加生动，这也是互联网网页这行行业魅力所在。

任何网页，做到后期，一定是有交互概念贯穿始终，给到用户更佳的浏览体验同时传递更多信息。这就要求网页设计需要更多去了解相关的参考案例，丰富自身的想法，创造自己的交互灵感集。在设计过程中才有据可依。

2022.7.12

by 祝小贱

题外话：

以上，只是我眼中的最最常见基础的三种网页交互形式，但即使是已经有这么多案例，在现实项目中依然落地有不少困难。很多效果，我自己也未能一一去尝试或者试过结果现实落地惨遭大变样。在把营销内容交互化这条路上，我也算屡试屡败，屡败屡试了。

在圈里可能司空见惯的，在客户那理解相对有难度，可能需要设计师前期搭配动态效果才能让其理解，这样一来制作成本又蹭蹭增加了。（特别若是没采用就很吐血了）

有些到开发那边也不一定乐意去做。不投入自己的时间，精力，不投入成本在这上面，怎么能有更好的。

真觉得有些效果能从石头缝里蹦出来么？没有一次次沉淀，积累经验。。。去搞掂新鲜点的事情，怎么追赶国外效果缩短与他们之间的差距丫。

一不小心又是各种吐槽和碎碎念了。。。

还有更多更稀有的特效有待下次再总结分享吧（我先卖个关子保留下，又貌似给自己挖了个坑，还有好几个没填完，我又想抽自己了）

今天又是电脑面前码一整天字的一天。。。腰有点酸了。。。

最近赞和流量比较少，感觉有点缺乏动力了。。。各位看官老爷们，看得觉得还有用的话，给个赞呗