「Airbnb」收藏！Google和Airbnb设计师都在用方法！( 二 )
本文插图
本文插图
▲ 运用了一排二布局
本文插图
本文插图
▲ 运用了一排一布局
本文插图
不知道这样讲解大家有没有明白 ， 其实网格建立好了只是第一步 ， 更多是运用布局的组合在设计中运用 ， 当你的内容需要占住水槽时候 ， 这个时候是连着列一起用的 。
本文插图
本文插图
▲ 运用了横向网格布局
本文插图
▲ 一个完整的网格系统是由网格+布局组成 ， 先定完网格 ， 再把布局设计好 。
网格运用场景
本文插图
▲ 网页：目前主流的网站 ， 特别一些电商和新闻网站 ， 大多使用网格系统布局 。
本文插图
▲ 书籍：目前印刷中数据很多排版布局也基本运用这网格系统 。
本文插图
▲ 报纸：传统的报纸 ， 通过网格来定义报纸每个框架里面放什么内容 。
本文插图
▲ 平面设计：好的平面设计一定是很好通过网格设计 ， 来辅助布局让整个设计有序的同时充满美感 。
本文插图
▲ 移动端：包括手机系统 ， 平板电脑等等 。
可以说网格系统在设计中无处不在 ， 掌握了它我们才是对设计进行了基础的入门 。
如何从0到1定义网格
本文插图
1.了解你所设计的内容
关于怎么设置网格 ， 首先一点我们得弄清楚这个设计 ， 你需要传递的设计主张是什么 ， 是高端的还是热闹的 ， 还是冷静的 ， 你的设计调性前期需要根据产品背景 ， 用户人群去了解清楚 。
本文插图
▲ 如果是为一个商场超市海报做设计 ， 那么你的设计主张就是“热闹” ， 那么整个网格系统一定需要设计的紧凑一些 ， 这样才能让里面内容看起来更加热闹 。
本文插图
▲ 假如是为一个艺术品网站做设计 ， 那么你的整个设计主张可能就高雅 ， 高贵 ， 那么你对应的网格系统一定不是超市的那种 ， 一定是需要留白很舒服 ， 呼吸感很多的 。
本文插图
▲ 假如是为一个奢侈品的电商网站 ， 那么一定你的网格系统要简单 ， 足够简单 ， 让整个页面内容都在商品上 ， 可能网格列表只需要3列 。
推荐阅读
- 右手网|Android 手机将通过 Google Clock 更新获得 “就寝模式” 等新功能
- google|shopify卖家快上车！google送免费广告位了
- 飞象网|Google为Pixel机型推送6月安全补丁
- SpaceXSpaceX载人火箭发射成功，马斯克离火星又近一步（收藏版）
- 兼容机之家小牛|英特尔停产“足球包装盒”，为了收藏而买上代处理器到底值不值？
- cnBeta|英特尔宣布酷睿i9-9900K特别版十二面体包装停产 闲鱼收藏价150元左右
- 三弟看月球|Google AR新工具「Solar」！ 开启2米虚拟社交距离助防疫
- cnBeta|Gmail用户未来可直接在收件箱中拨打Google Voice电话
- 搜狐新闻|iPhone SE（第二代）的强劲对手Google“Pixel 4a”将发布
- 潮黑|手机性质的不断改变，从通讯工具到收藏品，厂商真是无所不用其极