如何用网格系统设计出大师般的APP界面

如何用网格系统设计出大师般的APP界面

色调、图案、版面设计、网格等。都是系统四年视觉效果语言的基础。明天的网格系统已经在物质想象中得到应用和定义。

初剑电网

拼趣

如图，假设物质世界没有网格。网格让世界更有节奏感，信息层次更清晰，让我们能有温暖的参观，善用材料。

漫不经心的格子系统，没有划分规则，没有节奏感，起作用，给客户看的是一种劣质材料。

想象在当今物质世界中的现状

大家在做创意的时候应该听说过gridsystem，也就是网格系统，那么如何在自己的APP创意中准确运用呢？

看一个例子:

左右两边的人都觉得谁的间距更好？仔细看。如果没有细心的同学朋友也没有太大区别的话，那就看看他们的格子怎么样(按照750假设)。

很多刚进入想象世界的学弟学妹，似乎在权利上没有组织纪律性，以至于一些工作两年的幻想家也会表现出同样的测试结果，科技教育的定义也有差距，导致想象世界的产品性感度不高。我们如何通过无规则地利用差距来发展物质性格？

如何定义科技教育:UI网格系统

定义UI网格系统的方法有很多，比如应用8边网格系统，斐波那契数列，删除一个最小的子H模块，定义距离最低系统的参数化设计的距离。这一次，我们将通过讨论删除一个最小子H模块来定义网格系统。

(1)在最后，毫无疑问，基础间距是一个次H模，正如我在那里定义的最小标准值是6，那么以6为标准扩展系统间距，得到如下间距系统。

1,2,6,12,18,24,30,36,42,48,54,60,66,72...、96、192等。，都是6的倍数或者能被6整除。

(2)修整间距的持续恶化如下。为什么要完成？如果间距过大，过度碎片化也会导致画间距的比较(以6为标准，前面的数字是前面的两倍)

1、2、6、12、24、48、96、112

(3)真正的战争考验

如左图所示，我们想象中常用的间距的主要参数是早期世界约定的间距，然后我们想象时使用世界约定的间距，不必随意删减间距。如果间距不够，可以把间距切6，这样就可以熟练使用了。

演示其他组件的扩展利用

大家都清楚了吗，书上的例题的加减方法真的很清楚吗？书中例子的间隔还处于早期阶段。是的，真的很简单，方法要运用巧妙。如果间距不够，可以适当剪一剪。记住不要使用空格。

总结

定义了面间距过程中需要注意的事项:

其实最小书H模不是随便定义的，推荐以下几种；

间距的定义是通过删除一个最小的书H来定义的；

记住不要使用间隔，而是要有组织有纪律地使用它。

制片人:托尼，UX视觉效果幻想家，喜欢研究所有新奇的事物，分享和发表文章。

文章由@托尼本创发布。我已经同意了，并劝阻拦截。

图片来自Unsplash，据CC0和平谈判。

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

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