使用8点网格使UI设计更高效

利用适合的网格系统辅助工具,让页面布局统一、规范,提高沟通效率

网格布局设计的目的

建筑设计最重要的因素之一是架构,同样设计界面也需要打好基础架构。设计师通过使用统一的元素、间距、材料设计布局可以保持平台、环境和屏幕大小之间的一致性,提升设计效率、减少决策时间,减少与开发的沟通成本。

为什么用8点网格

避免虚边和半像素

网页设计中如果你用8作为设计的最小步进单位,你可以很方便的缩小的你的设计尺

寸,8/2=4,4/2=2,2/2=1。如果你从6或者10开始,你缩小到的网格单位可能是1.5或

者2.5像素,再往下是0.75或者1.25像素。会出现虚边和半像素现象,这样你设计的界

面就会不精致。

屏幕适配性高

基本的主流屏幕尺寸都至少在横竖一个轴的维度上能被4和8整除。如果用4作为基本步进单位,页面内容会被分割的过于细碎,因此8作为基本步进单位进度合适,既不显得过于细碎,也不会因为间隔太大而显得内容分散,更适合多平台响应。

减少沟通成本

目前使用广泛的前端开源组件库都基于8的基本单位来设计,比如:Ant Design、Matierial Design等。因此如果设计师也使用以8点网格系统,开发可以轻松的丈量8的倍数,开发与设计师对接沟通效率就会很高,页面的还原度也会更高一些。

Sketch设置

在sketch中设置好相应的网格选项,设置网格尺寸为8px,并在“首选项”的“画布”中调整移动增量值为8,这样在设计的时候会方便很多。

Powered by Froala Editor

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章