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

8点网格流行有一段时间了,我最早知道这种设计方式是在看了谷歌的Material Design设计规范之后开始认识这种设计方式的。发现这种设计方式实在是太适合我这种理科出生的设计师了,所以在这里也给大家科普一下为什么要使用8点网格。

什么是8点网格

就是建立8点为一个单位的网格,所有的元素尺寸都是8的倍数。

图片来自Material Deisgn设计规范

为什么是 8点?

为什么是基于8点去定义网格,而不是6点或者10点?引用下Quora上一个提问的回答:

If you use 8, you can easily resize without ending up with half or quarter pixels. 8/2=4, 4/2=2 and 2/2=1. If you start with 10 you’ll end up with 2.5 pixels, and then 1.25 (10, 5, 2.5, 1.25 …) you get the idea. 8 gives you more flexibility than 10. /Sjur O. Sundin, Senior UX Architect / Design Manager – San Diego, CA/

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

意思是:如果你用8作为设计的最小单位,你可以很方便的缩小的你的设计尺寸,8/2=4,4/2=2,2/2=1。如果你从10开始,你缩小到的网格单位可能是2.5像素,在往下是1.25像素。

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

为什么要使用这套系统?

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

更统一的UI

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

图片来自Material Deisgn设计规范

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

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

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

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

多平台的响应式设计

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

当前主流屏幕的解决方案,可以看到基本上都能被8整除

有些屏幕会很难调整适应这个系统,比图iPhone6开始的375×667的尺寸,但是解决方法也很简单。保持填充和空隙(padding & margin)的尺寸统一遵循规则,剩余的空间可以用块状的元素来填充。有一些元素的尺寸是奇数的也没关系,只要他们能让整体遵守这套规则就好。*记住你的用户永远不会看到你实际使用的尺寸*。

比如Material Design没有限制元素的高度一定符合8的倍数,但是让元素的点击范围遵守8点网格的规则

所以说,这套系统更多的是用来规范自己的设计和开发,节省开发和设计沟通的时间,提高设计统一性,对用户来说可能感知不大。

执行这套方案的技巧

建立网格并对齐网格

几乎所有设计软件都有「对齐到网格」的选项。如果你的设计绝对符合这套系统的话,设置好相应的网格选项并对齐绝对会给你很大的帮助。所以首先,你要确保你打开了“对齐到网格”选项。

Sketch中设置8px为基准的网格

确定你自己的增量习惯

大多数设计软件都会允许你调整你的移动增量值,我喜欢把我的大增加值(按住command移动的增量)从默认的10调整到8,这会方便很多。

在sketch中调整键盘增量

快捷键

很多应用程序都有快捷键,可以让你在设计时快速移动元素、调整大小。记住这些快捷键,配合网格使用可以大大提高你的效率。「注1」

建立icon的框架

Material Design icon的框架

图标通常需要不同的大小以保持相同的视觉重量。用框架来设计图标,这是保持尺寸一致性的简单方法。同时,框架能有效保证图标的大小符合网格的规范。同样记得把图标的框架大小设置成8的倍数,并从大的图标开始设计,缩放后记得对细节做调整。

关于如何设计一套像素完美的图标,我有写过一篇文章:点此查看

放大,缩小

如果你一直放大到1600%来设计,你可能会丢失垂直方向上的布局感受。相反,如果你一直在50%的缩放比例下查看你的UI,你可能会丢失一些重要的细节,比如像素完美。记住经常放大缩小在各个比例下查看你的设计。

作者:王青年

(0)

相关推荐

  • QQ音乐业界首创「大咖装」

    小编:当小编看完这篇文章后已是热血沸腾,迫不及待想分享给大家.感谢由腾讯ISUX分享的QQ音乐业界首创「大咖装」.作为QQ音乐的体验者之一,之前对QQ音乐好感不多.升级后的版本立即闪瞎我的双眼.无论从 ...

  • 「全民K歌」原型资源大放送!

    小编:预告-一大波高保真原型正在靠近 注意:图片点击大图看高清哈- @Sophia这年头,你还在经常去KTV么!? 有了移动K歌APP,坐在家里也可以时不时地嗨唱几曲!高品质的伴奏.多种音效的选择.自 ...

  • 教育类App「英语流利说」原型分享

    智能手机和app带来的便利使得人们使用智能手机学习的时间逐渐增长,越来越多的人喜欢用手机学习,而多个年龄段的用户对于英语的学习要求除了教育上的必要,还有对生活品质的提高和自身的提高.对于想学英语的人群 ...

  • 蓝湖支持「切图压缩」了!

    Hey,大佬们,蓝湖正式上线「切图压缩」功能,号称设计师和工程师必备利器!埋头工作的你,还不快来试试! 什么是「切图压缩」?「切图压缩」前后有什么区别? 蓝湖通过智能无损压缩技术,选择性地减少 PNG ...

  • 支付宝「银行卡绑定流程」原型资源分享

    对于涉及电商交易的平台来说,支付系统的重要性是不言而喻的.而其中最重要的环节之一就是绑定银行卡,因为银行卡的绑定与否,直接影响后续的支付.提现的业务.并且也可以在用户进行实名认证与找回支付密码等敏感操 ...

  • 支付宝「生物识别流程」原型资源分享

    生物识别技术是指依靠人体的身体特征来进行身份验证的识别技术,生物识别技术本身具有普遍性.便捷性.安全性.唯一性.不可复制性等特点.随着互联网 / 物联网行业的发展,生物识别技术也被更广泛地应用到各种应 ...

  • 知乎「账号绑定流程」原型资源分享

    账号绑定是用户系统中最重要的环节之一,因为账号之间的绑定和解绑直接关系到用户账号安全及用户信息留存.以知乎为例,在用户注册登录环节,知乎会引导用户使用更便捷的第三方登录.但是为了方便用户后续的使用.以 ...

  • 如何用「订阅号助手」App发布微信公众号内容

    操作方法 01 APP功能:一体化管理 微信团队发布「订阅号助手」App,支持公众号运营者在手机上发表内容.查看和回复消息.管理已关注用户和帐号. 02 第一步登录自己的微信公众平台. 输入自己的用户 ...

  • MP3/MP4连接电脑时未出现「可移动磁盘」的解决

    操作方法 01 以本人MP4「OPPO S9K」.电脑系统为WIN7为例进行说明 02 问题出现情况: 03 ❀ OPPO S9K与电脑连接时只进行充电,未显示「可移动磁盘」的盘符; ❀ 把电脑所有的 ...