江苏龙网

  1. 首页 > 资讯 > 科技 > >

「Airbnb」收藏！Google和Airbnb设计师都在用方法！( 三 )


「Airbnb」收藏！Google和Airbnb设计师都在用方法！
本文插图

▲ 假设是需要设计一个高端 ， 杂志感的海报 ， 那么你的网格系统一定也需要根据内容去设计 。
网格的参数怎么定新手问我最多的就是参数设置多大 ， 边距留多大？水槽留多大？内容区域多大？
没有标准答案 ， 每个产品不同 ， 运用场景 ， 用户人群 ， 都各不相同， 没有一个标准的参数 ， 只有我们多试 ， 找到合适的那个就是最好 ， 但是有一些常用的网格参数可以分享给大家
「Airbnb」收藏！Google和Airbnb设计师都在用方法！
本文插图

▲ 移动端经典网格：比如Airbnb
「Airbnb」收藏！Google和Airbnb设计师都在用方法！
本文插图

▲ 移动端经典网格：pinterest
「Airbnb」收藏！Google和Airbnb设计师都在用方法！
本文插图

▲ 移动端经典网格：pinterest
「Airbnb」收藏！Google和Airbnb设计师都在用方法！
本文插图

▲ 移动端经典网格
「Airbnb」收藏！Google和Airbnb设计师都在用方法！
本文插图

▲ 移动端经典网格
网格不是固定的 ， 是可以去变化的 ， 有一个简单原理就是 ， 网格越多列数越多 ， 布局越灵活 ， 一定根据实际页面去定义好 ， 但是切记：一套APP里面最多一个网格系统 ， 如果多个就失去系统的意义了 。
UI中怎么运用这也是很多新人运用网格容易疑惑地方 ， 如何对齐？
「Airbnb」收藏！Google和Airbnb设计师都在用方法！
本文插图

▲ 内容一定放在单元格内 ， 并保证它们的对齐 ， 贴紧网格 ， 水槽里面一般不放内容 ， 如果放需要让水槽和列一起使用 。
「Airbnb」收藏！Google和Airbnb设计师都在用方法！
本文插图

▲ 避免水槽和边距太大（上图来自星球用户Tony的总结）
制作网格的工具
「Airbnb」收藏！Google和Airbnb设计师都在用方法！
本文插图

▲ 推荐我经常使用的 ， 来自国内开发团队flavor的插件工具 ， 非常好用
「Airbnb」收藏！Google和Airbnb设计师都在用方法！
本文插图

▲ 在线网格生成工具可以根据你输入的参数和你设置好不同的组合形式 ， 但是别太依赖于工具 ， 正如我前面所说 ， 网格参数是需要你页面调性决定 。
最后网格系统到这里就讲完了 ， 网格更多还是靠大家在设计中经常练习这样才能玩熟练了 ， 相信我 ， 网格掌握会了 ， 能让你设计进步至少3年 ， 希望大家可以学习并掌握此方法 。
优逸客（微信公众号sx-uek）UI设计、Web全栈开发、JAVA开发等课程免费试听课火热报名中 ， 愿这个时代的每个人都可以站在风口 ， 成就更好的自己！
【「Airbnb」收藏！Google和Airbnb设计师都在用方法！】4月学习坚持不懈 ， 9月就业傲视群雄！


推荐阅读


上一篇：【批发】晋江鞋体博会成功落幕，1688“新批发”五重奏的又一处高声部

下一篇：『王思聪』乐视网巨亏112亿 王思聪陈思成等人或损失严重