如何用「8点网格」来规范你的设计？看这篇好文！

如何用「8点网格」来规范你的设计？看这篇好文！

八边形网格已经流行了一段时间，我第一次了解到那种想象是在看了Google的材料设计想象规范之后。发明那种想象的方式真的很适合我这种文史空想家，所以我已经给大家解释过为什么要用8边格了。

阅读本文后，您将了解到:

1.八面网格管理系统的现实意义

2.为什么要用8面网格管理系统？

3.8面网格管理系统有哪些技巧？

什么是八边形网格？

就是以8个面为一个模块创建一个网格，所有的元素大小都是8的放大倍数。

△图片来自材料设计想象规范

为什么是八面？

为什么网格是按照8个面定义的，而不是6个面或者10个面左右？选择下面Quora最后一个问题的回答:

如果您使用8，您可以轻松地调整大小，而不会以一半或四分之一像素结束。8/2=4，4/2=2，2/2=1。如果你从10开始，你会得到2.5个像素，然后1.25(10，5，2.5，1.25…)你明白了。8比10给你更多的灵活性。/SjurO.桑丁，资深UX建筑师/设计经理——加州圣地亚哥/

实际意义是:如果你用8作为最小模，你可以很容易地减少你的假设尺寸，8/2=4，4/2=2，2/2=1。如果从10开始，你降到的网格模块可以是2.5清晰度，已经降到1.25清晰度了。

△8×8元素连续减少50%

如果你假设一个2折的屏幕，1折就是偶数的大小。如果你想有一个组合尺寸的显示器(所有的显示器尺寸都是组合在一起的)，那么在戏剧中两端对齐的影响上就会有一个小数平面。如果再次放大和缩小，那么十进制平面将以原始元素大小再次出现。相信栏目的网瘾一定不能忍。

为什么要使用管理系统？

选择那边材料设计中的一些思路来引导Spec中一篇文章的疑惑，把自己的经历分开来展示:

1.更加一致的用户界面

当所有的元素大小都符合相同的划分规则时，你会得到一个更加纯粹自然的相同UI。

△图片来自材料设计想象规范

2.越来越少的选择=节省大量时间

也许当你已经想象出了某个元素，而你定义了某个空空缺的地方时，你似乎和8有了一个稍微宽一点的范围，于是你一天一天的协商。但是，当你选择了空借7个小时或者8个小时的时候，你在其他工作上的时间就浪费了，最初的结果差别真的就那么大。

更可怕的是，一开始，你的暂定稿里有6，有8。当有了一套明确的划分规则，就会危及到你在暂定稿的要素之间发展维度的认知能力，于是你不小心调整的重点就会恢复得那么好。

我觉得你和先锋有联系:如果我的星座低于8，你也算是8。别的，肯定是放大8倍。

3.多平台的衬托设想

所有主要和次要显示尺寸至少相等。简而言之，一个轴的水平可以被8整除。在许多情况下，两个轴都可以读取。因此，一些设计规范(如材料设计规范)将要求建立4pt或8pt网格，以便一套完整的管理系统能够完全符合该划分规定。

△今天主支流显示屏的解法可以看出，完全可以被8整除。

有些显示器会很容易协商适合哪个管理系统，就像从iPhone6开始的375×667的尺寸，但是解决方案很简单。互相连接挖填空闲置土地(padding&Margin)同样大小遵循分割规则，盈利的室内空房间几乎可以装满小块人民币。有些元素甚至大小不一，只要能让团队遵守分工规则就行。

记住你的客户永远看不到你实际活动的规模。

就像材质设计一样，一个有限元素的下阶必须满足8的倍数，但是让元素的面攻面积服从8面格的划分规则。

所以那一套管理制度大多用来规范自己的思路和开发，节流开发计划一样的努力，开发一样的思路，对客户的方式认知很少。

实施该方案能力

1.创建一个网格，并将网格两端对齐。

几乎所有设想的硬件配置都有“两端对齐网格”的选项。如果你的想法没问题，符合管理体系，那对你设置响应的网格选项，两端对齐，会有很大的帮助。因此，首先确保你打开了“两端对齐网格”选项。

△设置8px为草图中的标准网格。

2.你自己的风俗习惯是毋庸置疑的。

大多数设想的硬件配置可以协商删除值。我喜欢把我的删除值(命令移动的删除值)从默认的10协商到8，这样会方便很多。

△删除电脑键盘已经在草图中协商好了。

3.快速键

很多法式风格都有快捷键，可以让你在已经构思好的情况下快速移动元素，协商尺寸。记住这些快捷键，相互利用网格可以极大地培养你的服从性。

4.创造图标的架构

△建筑材料设计图标

然而，这些标志需要不同的尺寸和净重，以达到相同的视觉效果。用建筑来想象logo，这是一种连接矛盾维度的简单方式。此外，该架构可以有效地检查访问标志的大小以满足网格规范。还要记得把logo的架构大小设置为8的倍数，从大logo开始想象，关键点要在缩放后记的时候协商好。

5.放大和缩小

如果继续放大到1600%去想象，可能会失去整体规划在下垂目标底部的感觉。相反，如果你继续以50%的缩放比例检查你的UI草稿，你可能会失去一些关键点，比如声音清晰度。所以记得要一直放大缩小，在各种比例下检查自己的想法。

材料假设规格:https://material.io/guidelines

规格内容链接:https://spec.fm/specifics/8-pt-grid

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/777838.html