视觉设计 » 大神做的详情页设计,都爱用这3种过渡衔接技巧!

大神做的详情页设计,都爱用这3种过渡衔接技巧!

发表于: 视觉设计. 评论
Sponsor

最近刷花瓣,我发现很多大佬设计的详情,视觉上看起来特别是流畅自然,每一屏详情页的衔接过渡设计都遵循了一些规律。

回顾下详情页的变化。

在2015年到2018年左右,移动互联网第一波时候的详情,屏与屏很少有过渡,一屏就是一个内容海报,板块感很强。特别是当时的小米,很有代表性。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

之后从18-19年左右,至今这些年。很多设计师开始尝试不同构图花样,使得详情页的屏与屏的方式也呈现不同的衔接方式。

下面我整理了3种衔接方式,下面一起来看看。

以下案例图采自花瓣/站酷等。

一、中间衔接装饰线

大神做的详情页设计,都爱用这3种过渡衔接技巧!

屏与屏用装饰线过渡,特别是金属装饰线。一些跟传统相关的美食、美妆详情等,都非常常见。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

大神做的详情页设计,都爱用这3种过渡衔接技巧!

大神做的详情页设计,都爱用这3种过渡衔接技巧!

也有这种类似一个小banner的形式。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

二、立体式转折。

第二种立体自然转折,什么意思呢?比如下面这个例子。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

这种过渡形式,在一些大合成详情中,很常见。并且3个面可以一直往下循环,

大神做的详情页设计,都爱用这3种过渡衔接技巧!

这种很像语文里的起承转合,过渡的很自然,没有割裂感。这种形式需要中间通过一张桌子来实现过渡的转折。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

桌子往下转折的第二屏,既可以做成俯视,也可以做平视。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

下面这个黄色的转折处理,很666。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

还有这种,桌子没做竖面,直接统一一个颜色,顺着下去了。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

三、通屏背景串联

具体表现就是背景统一一个颜色,背景是打通的,然后内容用矩形框分割开。执行操作起来比上面的形式要容易很多。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

这种形式就像餐客一体的房子一样,因为背景是连通的,所以视觉看起来很通畅。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

多放点例子看一下。

这种形式背景避免单调,也要适当做一些明暗变化。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

也有这种,一个大通屏下来的,甚至都没有边框。

大神做的详情页设计,都爱用这3种过渡衔接技巧!

最后总结下,当你做详情页屏与屏衔接没思路的时候,不放试试这3种。3种形式也可以根据不同情况混合搭配。

1、中间加装饰线

2、立体式转折

3、通屏背景串联

感谢阅读!

作者 | 舵主来源 | 超级美工(id: chaojimeigong)

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }