界面中的网格设计

时间：2023-09-06 21:42:01 | 来源：网站运营

时间：2023-09-06 21:42:01 来源：网站运营

界面中的网格设计：最近因为一些事情内心很不淡定啊！因为交互设计的欠缺一直很抗拒画界面。

强行更一篇。

记录下如何在界面设计中用网格来布局。

我们都知道黄金分割线：黄金分割是指将整体一分为二，较大部分与整体部分的比值等于较小部分与较大部分的比值，其比值约为0.618。这个比例被公认为是最能引起美感的比例，因此被称为黄金分割。如图：




我们认真看这图，再看一些经典比例：

1:1

16:10

3:2

2:1

还有我们熟悉的16:9、4:3

16:9我们的手机屏幕就是了，我现在裁照片也习惯裁剪这个比例的。还记得多年前魅族的屏幕一枝独秀用的是15:9的吗？那时候魅族说自己是完美的比例，并不是毫无依据瞎吹的。15:9按短边的除以长边得到的是0.6，黄金比例是0.618，这样看16:10的比例几乎就是黄金比例，就差0.018。

除了黄金分割被认为是美的比例，还有对称和平均。

所以上面那些经典比例要么是接近0.618，要么就是对称和平分。

然后我们用网格做界面布局的时候用好这些比例就可以了！

当然我们还要记住，界面设计虽然可以说是很理性很理性了，但也不是所有比例都换算成经典比例就是好的，有些复杂情况下我们会有视觉误差，这需要自己灵活调整。




举个栗子了，我做的日历界面来看，这界面比较简单易懂，用来做笔记比较合适。

下图是我第一次画的日历界面，我除了页面的边距用了我们系统手机系统的规范外，其他都是...凭感觉！但是我该有的间距还是有统一的。




我们现在来用网格所谓调整下，也修改下一些小设计。（这个是2k屏的分辨率）




我们除去必须遵守的公共控件action bar这些外，剩下的2252px高可以将这个页面分两个部分，上面日历数字部分和下面记事提醒部分。上面的占的比重比下面要大，我们就可以把上面看成是16，下面是10，换算下就是1386px和866px（除不尽的四舍五入），得到这样的空间高度：

这个日历上面其实显示五行就够了，我删除掉最下的，星期这行高度我在另一个全屏日历那里得出的高度是160px（这个就相当于你自己模块里自己定义的公共控件，是可以在接下来其他页面复用的，当我在另一个经典页面定义了他的高度后，在这个页面是必须遵守复用的）我们可以5等分一下剩下的空间就得出每行高度，得出这样的图：




接着是下面的，下面是记事提醒（考虑到删除便签这一动作行为，我把他变成卡片式），我们先大致随便画下卡片高度，卡片两边边距和上门日期模块边距我让他是一比一，画完是这样：

从下图我们可以感觉到下图红框区域是拥挤的，这是因为两个绿框间距不一样，就是留白不一样给人的呼吸感就不同，这时候就是主观处理的时候，应该把最后一行间距加大，每次加十个像素，这样保证所有间距都有倍数关系。




最后把下面空间高度减去两个卡片上下间距，把这两个平均算一下，下面的行高就出来了，里面字体使用按照规范来，居中对齐准不会错（如果是整个手机系统的设计，这里的卡片应该遵循自家系统的规范来做，把他看成双行列表做）最后的年月日一行按照手机里的单行列表高度规范画的，为了让页面更有呼吸感，我去掉了没多大影响的分割线，最终如图：

纵向的规范跟横的一样来做，这页面太简单了可以直接用平分来做，按网格做出来的效果最终每个空间都是会有倍数关系，且各个模块间的比例都接近黄金分割的数值，下图参考线是我最终这个页面的网格线。




最后，我看到有朋友在本站邀请回答怎么拿到drbbble邀请码，其实不要为了拿码画东西，上次我送码的时候收到了很多邮件，里面的作品很多都是简单的画几个界面或者毫无技术含量的图标，真的看不出任何思考，画界面出效果真的太简单了，难的是背后解决问题的思考，这才是精华啊。哪怕拿画几个具有艺术感的图标来说，不要一味跟风就用了弥撒大投影，我个人是非常反感这样的作品，写实的图标有很多细节考究可以展示我们的技术水平和造型功底是否扎实，扁平的很考验我们的图形归纳和配色能力，每个方向都不要轻易小看。

以上仅个人目前的看法，下次更新一次主题设计的过程思路笔记，很短。