专栏名称: 微交互
分享交互经验,提升产品用户体验。帮助您打造优秀产品。细节设计成就卓越产品。
目录
相关文章推荐
51好读  ›  专栏  ›  微交互

如何用「8点网格」来规范你的设计?

微交互  · 公众号  · 设计  · 2017-12-05 08:30

正文

请到「今天看啥」查看全文


△ 8×8的元素被一直缩小50%的情况

如果你是2倍屏设计,1倍下就是奇数的尺寸,如果是要在偶数尺寸的屏幕中(基本上的屏幕尺寸都是偶数的)剧中对齐位置上就会产生小数点了,如果是再缩放一倍,这时候元素尺寸又产生了小数点了,相信各位的洁癖肯定是不能忍的。

为什么要使用这套系统?

这里引用一些Material Design中的设计指导和Spec的一篇文章中的信息,结合自己的经验来说明下:

1. 更统一的UI

当所有的元素尺寸都符合同样的规则时,你自然就获得了一套更加统一的UI。

△ 图片来自Material Deisgn设计规范

2. 更少的选择=节约更多的时间

也许在设计某个元素的时候,或者定义某个空隙的时候,你用8好像稍微宽了点,于是你一点一点地调整。但你在选择空隙是7还是8的时间时,你做其他事情的时间也就被浪费了,最后效果的差异其实并没有那么大。

更可怕的是最后你的设计稿里这里是6,那里是8,没有一套清楚的规则的时候,会影响到开发对你设计稿元素间尺寸的认知,于是你精心调好的细节也会没有那么好的被还原。

试想你跟开发达成一种默契:如果我这里的标注小于8,那你看成8就好。其他的,一定是8的倍数。

3. 多平台的响应式设计

基本的主流屏幕尺寸都至少在横竖一个轴的维度上能被8整除,很多时候两个轴的未读都可以。甚至,有些平台的设计规范(比如Material Deisgn)会特别要求建立4pt或8pt为基准的网格,这样整套系统就能自然的符合这一规则。







请到「今天看啥」查看全文