「Airbnb」收藏！Google和Airbnb设计师都在用方法！
他们都在用的方法
本文插图
网格为什么在国内很多公司不知道 ， 甚至有的少 ， 一方面原因是大家了解的少 ， 或者不会用 ， 不了解它正确的用法 ， 所以没有普及开 ， 但是国外来说网格在他们设计中却是至关重要的 ， 来看pinterest的界面中是如何运用的：
本文插图
▲ 上图是我从pin的界面中截图的两个页面 ， 然后从中算出它们的网格系统 ， 可以看出他们是运用一个6列网格系统 ， 所有的图片各占3列 ， 按钮占6列 ， 每个页面的左右边距相同 。
本文插图
▲ 可以看出pin的设计中每个图片都占据着三个格子 ， 左右边距对齐 ， 文字信息和图标都贴紧网格系统访问按钮也同样的撑满六个格子 ， 通过这种形式来保证页面的统一 。
本文插图
airbnb大家都知道 ， 设计和体验都非常棒 ， 它的设计很有秩序感 ， 块面突出 ， 那么airbnb是怎么定义规范的呢 。
本文插图
▲ 除了常用的字体字号 ， 组件外 ， 同样也把网格系统融于到它们的设计血液里面 ， 一起来看看线上的设计案例：
本文插图
本文插图
▲ airbnb采用的左右边距48 ， 中间24的网格系统 ， 可以看出这套栅格系统留白会比较多 ， 在浏览airbnb的设计页面时 ， 会要人感觉非常舒服原因也是如此 。
本文插图
被称为规范鼻祖的谷歌在最新的设计语言中 ， 第一次把栅格系统提出来讲 ， 谷歌的产品覆盖手机 ， web ， 以及平板 ， 那么谷歌是如何去用栅格系统来定义产品体系呢？
本文插图
本文插图
▲ 谷歌的栅格系统除了传统的边距和水槽 ， 内容区域外 ， 同时也定义了4栏 ， 可以在谷歌官网去详细了解 https://material.io/design/ 。
网格如何使用
本文插图
上面我们分析了国外优秀APP都在运用网站 ， 但是细节同学看见这里肯定有疑惑看顶部两个按钮 ， 还有下面文字按钮都没有贴齐网格？
本文插图
▲ 布局
这里其实有一个很重要的知识点就是网格布局 ， 很重要一个知识点就是网格布局 ， 需要把页面中常用的布局形式划分出来 。
本文插图
本文插图
▲ 运用了一排一布局
推荐阅读
- 右手网|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”将发布
- 潮黑|手机性质的不断改变，从通讯工具到收藏品，厂商真是无所不用其极