看完后就知道web端产品该如何设计了

时间：2023-09-19 23:24:01 | 来源：网站运营

时间：2023-09-19 23:24:01 来源：网站运营

看完后就知道web端产品该如何设计了：web产品作为最早的互联网产品，虽然现在移动产品是主流，但是web端也是互联网产品一个重要的渠道，所以了解web产品的布局对我们设计web网页产品大有裨益，本篇文章我们主要讲解web端常见的布局方式，分为三个部分：

1、 搜索类的网站







谷歌是搜索类网站中做的最优秀的，右上角显示页面内容和登录信息，中间模块显示logo以及它最主要的功能，搜索模块，底部还放置了网站的其他信息，供我们跳转；相反百度的搜索网站，考虑到自身的发展，提供了大量的推荐信息以及广告位。










2、博客类网站







顶部有页面的1级导航以及登录的信息，考虑道博客类网站有大量的一些其他模块，然后在左侧有一个二级的树状性的导航，放在网页的最左侧，中间模块是博客类网站的大头，它有一个最重要的博客发文功能，然后是关于其他人发送的一些博客内容，以及下面具体的详细信息，而在网站的最右侧会显示一些不是特别重要的信息，比如博主的信息，还有热门话题等一些其他信息。




3 、购物类的网站







这种类别最常见的就是淘宝，我们可以看一下淘宝的整个页面布局，像我们平时都经常去用，但是作为产品经理我们更需要去观察它整个页面的设计情况，我们看一下，它顶部依然是显示了用户的信息，以及整个网站的大的布局情况，对于淘宝这类的购物网站，左侧会显示它的logo，中间展示它的搜索功能，在淘宝这种品类很繁杂的网站，搜索功能是非常有必要的，所以说它也放在了一个很重要的位置上面，其次是天猫、聚划算、淘宝头条等这样的一级菜单，因为淘宝网种类比较繁杂，所以这里列举了它下面所有的子品牌，包括天猫、聚划算、淘宝头条等，同时因为它里面的品种很多，所以在左侧做了一个二级的商品分类，供用户快速的定位自己所需要选择的商品，中间的banner主要是推荐一些商品，或者是活动的页面。




4、 图片类的网站







在这个网站我们主要是快速的浏览相关图片信息，在整个网站上图片的布局占了很大的篇幅，但它也提供了一些比较显著的搜索功能，顶部很突出的提供了搜索栏和个人信息，下面是网站的主体，包含了图片的陈列，右下角放置了一些不太重要，但是偶尔也会用到的一些功能，供用户在一些特殊的情况下去使用。




5、 新闻类的网站







新闻类的网站也是我们经常逛的，这是一个种类比较繁杂的网站，我们看到里面有很多信息，这类网站它导航做得比较强大，在它左上角放置了logo和导航的信息，新闻类的网站种类比较繁杂，所以导航也要做的相当强大，右上角放置了一些个人的信息，包含了个人名称，关注的账号，以及粉丝数量等。

因为要考虑到盈利，所以要放置一些广告链接。










6、 产品类的网站







我们拿苹果的官网举例，顶部依然放置了官网的导航，因为他这里是以具体产品线为模块设计的，所以这里的导航以各个端来命名，比如mac端、ipad、iphone等等，中间是公司产品的主要内容，这里会首推当前正在热卖的产品去展示。

中间是一些其他类型的产品。







上面我们列举了常见的web网站布局，分别有搜索类、博客类、电商类、图片类、新闻资讯类、产品类，各个网站的布局可以总结如下:







除了这些布局以外，还有一些比较新颖的或者前卫的网页布局，可以向大家介绍一下。

像这种卡片式的布局，以前多用于后台管理里面，但是现在也大量用于饰品类的网站，或者是图片类的网站中。







一些关于滚动视图的网页布局。







其次还有一些动态效果的，像这类的网站可以通过动态动画的效果，来浏览整个商品的细节。







本篇文章介绍了web端设计中几种常见的布局样式，希望对大家设计有所启发。

欢迎有问题的小伙伴加我得私人微信：yw5201a1交流，马上就快要5000人了，抓住这最后不多的名额吧。







更多干货可关注微信公众号：chanpinliu880

http://weixin.qq.com/r/xUi6ohPENE5LrVfB9x3X (二维码自动识别)