2.2APP设计之栅格与布局

栅格系统在平面设计中的一种对版面进行有效布局的系统，可以将信息整理又有秩序地展现，以达到更好地阅读体验。在APP设计当中也会不经意间的使用到栅格系统。例如界面当中左右两侧的边距保持固定，就简单地利用了栅格系统。在界面的设计当中，设计师一般会给予这个栅格一定的数值，比如3，4，5这种。在整个的设计当中，所有的间距均保持了这个栅格的整数倍以保持界面的协调性。

简单的边距也是一种栅格系统

而对于设计的布局，常见APP布局一般有如下几种：

列表式

其优点是信息展示的比较直观，节省界面的空间，具有很高的浏览效率，常见于新闻资讯类的应用当中。但是过于单一的列表浏览起来容易疲劳，这就需要设计师在其中穿插一些丰富的元素，让页面看起来更舒适美观。

澎湃新闻在列表流中增添专题

瀑布流

常见于以图片、视频等内容为主的应用当中。让用户主要通过图片的识别来分辨是否是自己想要查看的内容。小红书，淘宝，快手APP等应用很好地利用了这种布局。但需要质量比较高的图片进行支撑，否则会降低界面的整体档次。

小红书的瀑布流

多面板布局

一般用于类别比较多的页面当中，让用户减少页面的跳转，更清晰快捷地找到自己想要查看的内容，如旅游类选择国家和城市、京东商城选择产品大分类和小分类的情境下。

京东商城的分类是一种多面板布局

标签布局

常用于各种APP中的金刚区部分。入口清晰便捷，方便查找信息是其优点。但在设计过程中需要对于其中的图标需要风格的统一和精致。

卡片布局

卡片布局最大的特点，是在信息密度比较多的时候，能更好的更清晰地将其混合展现并且不杂乱。但是比较占据页面的空间，放置的信息比较少，增加用户的浏览时间成本。但如果合适的利用好卡片式布局，会让界面非常清爽，并且方便以后的升级迭代。

京东的个人中心卡片布局

本人是做UI设计工作的，特借贵平台输出一些内容为大家分享，旨在共同学习和进步。以上部分分享内容来自《规律与逻辑》。如有部分侵权请告知，将会立即删除。