极简电子商务网站设计惊现黄金比例栅格

8月 22, 2019 发表于: 设计作品. 评论

Sponsor

在这个网络时代，大件物品也开始在网络销售，所以汽车、家具等行业的也开始重视自己品牌的企业网站设计。今天跟大家分享与家具有关电子商务网站，推荐理由：简约而不简单，属于极简主义风格的网页设计作品，在研究该网页的同时，小编还发现了黄金比例栅格，值得学习。

网页设计作品由创意总监Daniel Tan制作，该客户的企业网站主要是销售一些简约、北欧风格的家饰、家具类产品，比如坐椅、花瓶、灯具、挂钟、摆设饰品等等。这些产品的设计都是非常简约与时尚，所以设计师在设计网页的时候就要选择简约的主题风格，重点突出产品，不带其它花销的设计。

首先我们来看看整个首页设计，第一眼给用户的感觉就是简约、舒适。在浏览网页时用户很容易就能分辨出这个网站是做什么的。首页结构：1. 焦点BANNER广告图; 2. 主打分类（图片格式）；3. 流行产品列表；4. 推荐产品集；5. 引导订阅。

新闻列表页面使用了左右对称布局设计，为了不让页面过于单一，在列表之后加入了「Our Service」内容来填充。

产品页通常由产品列表页和产品详细页组成，我们先来看列表页的设计。

产品列表页设计：和大部网站的产品列表一样，喜欢使用宫格式布局，但这具网页的难点还是留白的运用。其次我们细心的看一下，列表中的产品图的背景以及产品排列好像是被设计师「刻意修饰」过，所以最终网站出来的效果可能会因为产品图的原因会打点折扣。

这种「刻意修饰」小编认为非常有用，为了过稿，不要偷懒，就像下图展示一样，每行的产品配色、与排序是经过精心布置的。

点击和首页的「推荐产品集」的布局是基本一致的，这个布局相当好看，所以必须要研究一下它的栅格系统。

这么好看的排列方式，到底是怎么排版出来的呢？通过分析终于可以看出一些规律，设计师使用了两种比例栅格系统，分别是黄金比例和铂金比例。使用这些比例来设计总比「凭感觉」去排列好得多，而且也能让前端人员有规律的写代码。

不知道黄金比例怎么计算？建议使用黄金比计算工具：
http://www.shejidaren.com/examples/tools/golden-ratio/index.html

使用这个工具的好处就是不用自己计算比例啦，集成黄金比、铂金比、白银比等等自动换算。

这种极简网站配色通常越少越好，所以整个画面都是以黑白为主，但单色调会不会在烦燥？不会，因为还有产品图片、以及图片的背景色进行点缀。

购物车画页面：

表单设计：

像这样一个极简的企业网站设计，看似没什么东西，但无论从设计、代码、以及后期资料维护都是非常复杂的，就看图片质量要求就知道，每个图片都是高品质，修图、输出透明背景PNG图，好了不说太多……希望大家有所收获。

如果喜欢这类的灵感文章，请分享和点赞，后期会分享更多高品质作品给大家学习。

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。