设计师如何计算与应用黄金比例栅格系统?

用户头像
厦门/网页设计师/6年前/1758浏览
设计师如何计算与应用黄金比例栅格系统?

在这个大数据时代,一些家具等行业开始重视自己品牌的企业网站设计。其中也应用到了黄金比例栅格,值得学习。


























1、首页设计


我们先来看看整个首页设计,第一眼给人的感觉就是简约、舒适。在浏览整个网页时用户很容易就能分辨出这个网

站是做什么产品的。


首页结构:1. BANNER海报图;2. 热销分类;3. 热卖产品列表;4. 其他宝贝推荐;5. 引导订阅。





2、网页配色


这种极简网站配色通常越少越好,所以整个画面都是以黑白为主,但单色调容易单调烦燥,所以会有一些副色调进

行点缀。





3、新闻页&信息列表页设计 


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





  



4、产品页


产品列表页设计和大部分网站的产品列表一样,喜欢使用宫格式布局,但网页的难点还是留白的运用。其次我们细

心的看一下,列表中的产品图的背景以及产品排列都是被设计师「刻意修饰」过的,所以最终网站出来的效果可能

会因为产品图的原因会打点折扣。


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





5、分类目录页面


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





6、黄金比例栅格系统


这么好看的排版方式,到底是怎么排版出来的呢?通过分析终于可以看出一些规律,设计师使用了两种比例栅格系

统,分别是黄金比例和铂金比例。使用这些比例来设计总比「凭感觉」去排列好得多,而且也能让前端人员有规律

的写代码。





那怎么去计算黄金比例呢?建议使用黄金比计算工具


http://www.shejidaren.com/examples/tools/golden-ratio/index.html





总结


像这样一个极简的企业网站设计,看似没什么东西,但无论从设计、代码、以及后期资料维护都是非常复杂的,就

看图片质量要求就知道,每个图片都是高品质,修图、输出透明背景PNG图,好了不说太多……希望大家有所收获。


12
举报
|
25
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
平面插画设计女孩喝咖啡
金色颗粒质地的平面
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
古风平面仕女与瓷器
城市园林平面布局航拍
中国传统纹样创新图案设计
平面书法字手写
金色颗粒质地的平面
金色颗粒质地的平面
城市园林平面布局航拍
城阙凡花
金色颗粒质地的平面
牛奶乳液层次梯田平铺平面
空的平台平面和自然景观
平面风格黄绿色系花朵装饰
平面插画情侣/矢量
倒计时,海报,平面
城市园林平面布局航拍
玄关入门地毯印花图案红地毯
平面男孩喝咖啡插画设计
平面人物插画
空的平台平面和自然景观
平面设计 吊牌设计
“知识宅急送”外卖,快递,平面,海报,素材,教育
你可能喜欢
相关收藏夹
大家都在看
登录注册