授权 | 菜心设计铺（ID：caixinshejipu）视觉设计在网页中是比较常见的，基本上都是在配色上和动效中体现的，但今天给大家分享的视觉设计很是与众不同。在下方的案例中，设计师通过画面中心的红点来抓住用户的视线，让用户的视觉中心点始终停留在红点上。人的心理和视线总是会被亮点的东西吸引，设计师很好的利用了这一点，通过与画面中颜色的反差，中间的小红点格外刺眼。随后，在用户滑动页面时，以红点为中心延伸出动画。这样的设计，不仅能够抓住用户的视线，还能够让画面中的动画衔接更加流畅稳定，整体的视觉观感和舒适感都很不错。
如果我们的网页中有很多的动效设计，那么我们同样可以采用这样的设计手法，来保证我们网页中的动效衔接的稳定，不至于出现视觉观感很差的反响。另一个案例中，视觉中心使用的是网页中的吉祥物。两个案例之间的总体意思差不多，唯一不同的是这个案例中不是为了延伸出后面的动画，这里只是用来展示文字信息。
并且，画面中的吉祥物还加入了一直在转圈的动效设计，整个画面看起来非常有层次感，设计感。前面我们也分享过按钮设计，今天再来重点分享一下趣味性按钮。简单来说，趣味性按钮就是在原本普通按钮的基础上，加入了一些趣味性设计，让按钮发生了一些不同的变化。
比如在下方的案例中，这个图标本身看起来没有什么设计感，就是一个很普通的图标。不过，设计师在图标下方加入了阴影，这样一来图标看起来就充满了层次感，以及立体感。
并且设计师还在其中加入了动画，用户将鼠标放在图标上方的时候，图标会出现一个被往下按的效果。加入了层次和动效之后，原本一个普通的图标就变成了一个充满趣味性的按钮。
下方这一个图标和上方的案例相同，都是在其中加入层次和动效，来让图标充满趣味性。下方这一个图标案例，和上述的两个不同，这一个图标中没有层次，只加入了动效设计。当用户将鼠标放置在上方的时候，图标就会向四周撒出五颜六色的小元素。不是说每一个趣味性图标都需要有层次有动效，我们要根据网页的定位不同，来使用不同的设计手法，让每一个图标都充满趣味性。趣味性设计能够增加用户的粘性，增强网页的浏览量。我们同样需要根据网页的不同定位，以及不同的内容表达，来做出相对应的趣味性设计。
首先，像下方的案例中，想表达的是合作的意思。所以，根据合作这一呢内容，设计师在其中加入了两只手，当用户将手放置在圈内，那么就会出现握手的效果。
除了根据内容之外，我们还可以根据网页定位来设计。下方是一个购物网站，当我们浏览完网页中的所有商品之后，画面中的两只小兔子就会离开。四、分页设计
在网页设计中，分页设计出现的很少。基本上都是一整个页面，但是其实分页设计有时候能够更好地让用户明白想表达的意思。
分页设计简单来说就说将网页的一个页面，利用颜色、元素来一分为二。让本来是一个页面的网页变化成了两个，可以用来展示两种不同的元素，更好的让用户看清楚其中的意思。
下面这个案例中，设计师利用颜色的区分，来让页面从一个整体演变成了两个画面。其中左边放的是一些文字信息，而右边则是一些插画。当用户滑动文字的时候，相对于的插画也会自动切换，这样可以更好的让一些理解不清楚文字信息的用户根据插画提示来完成指引！
上面的案例是用颜色来区分的，下面我们再来看一个用元素进行区分的。下方的案例中，设计师利用两张不同的图片来铺满了整个页面，两张图片之间的分割线就成了区分页面的线条。
这样一来，两张图片的信息都可以充分的展示在用户面前，让用户更直接的感受到。并且，在分割线上，设计师还在上方放上了一段文字信息，用来链接两张不同内容的图片。
这一个案例和上面都有些区别，用户通过滑动网页，网页的主页面就会出现在页面的左边，继续滑动之后，左边保持不变右边则会开始展示网页内容。这样的分页设计，可以很好的强调品牌文化，加深用户对品牌的记忆。
除了上述的之外，分页设计可以用来展示不同类型的元素，让每一个设计的亮点的充分展示出来。所以，我们设计网页时不要固步自封，分页设计有很多的优势。但是还是那句话，适合自己的才是最好的。卡片设计如果觉得没有新意的话，那么今天给大家分享一个比较有新意的卡片设计方式，那就是重叠式卡片设计。
重叠式卡片设计就是将两张普通的卡片一部分进行重叠，这样两张普通的卡片进行组合之后，原本普通的卡片就变的有层次感和立体感了。下方的案例中，就是将两张普通的卡片进行了一部分重叠，并且在重叠的基础上还加入了切换的动画。
用户将鼠标放置在那张卡片上，那么那张卡片就会切换到上方，方便用户查看。
上述的案例中，在重叠卡片的基础上加入了切换动效，下面我们再来看看另一个没有切换动效的案例。
下方的案例中，两张卡片虽然重叠的部分很少，但是设计师将卡片的方向设计成了倾斜的状态，这样一来虽然重叠的部分很少不过卡片的立体感却没有减少。卡片虽然没有动效，不过却在卡片中的按钮上加入了一个颜色动效变化，整体的设计感同样非常出彩。
这样的设计，在普通的卡片上增加了很多细节和设计感，相对其他卡片设计来了，多了一点新意。用户的体验感变好，卡片的设计感也增加了，何乐而不为。以上就是今天分享的内容，今天分享的内容不多，不过每一个都是精挑细选出来的重点。我们不是说只是单纯的欣赏一下，我们要学以致用。将这些好的设计手法融入到自己的设计中。欢迎加入设计圈交流群，加群 (fxhd99)，合作 (fxhd99)与13w+设计师共同探讨行业资讯，获得更多设计素材。![]()
2.下方扫描二维码添加小编个人微信，备注：样机，小编会将下载地址发给你（小编不是机器人，回复会慢一些，大家稍等![]()
）。![]()
已有小编微信的，无需重复添加
提前加好友，朋友圈每日放送更多有价值的设计资源
设计圈交流群：仅对星标“设计圈”公众号的用户开放。添加上方领福利的小编微信备注「设计群」加入。
