?点击上方“交互设计学堂”关注我们,送电子书

有些朋友会有疑问，做UI到底需不需要掌握一些开发知识呀？我觉得了解是有必要的，但不需要研究的太深入。

那怎么了解呢？我来教你个方法（需要有安卓手机才行，但苹果手机也没关系，看了此文也会有所收获！）

今天的大纲如下：

1.先找到打开页面布局的开关

2.认识布局中的三个内容

3.举个例子

4.注意事项

1.找到打开页面布局的开关

我们需要先打开显示页面布局的开关，这是我们今天学习的基础。

先打开安卓系统手机的设置页面：

找到“开发者选项”，点击进入：

再找到“显示布局边界”，打开开关后，你会的得到下面这个各种框框的页面：

这就是我们今天要研究的效果，可能现在看着有点蒙，但等我下面给你介绍完，你就知道开发实现页面的基本原理了！

屌不屌？

2.认识布局中的三个内容

想弄明白原理，就必须知道，这上面各种形式的框框、颜色都是啥意思！

其实，只要我们用心观察，就会发现，里面只有三种形式的内容。

第一种：

这种矩形就是控件区，里面可能是文字呀、按钮呀、图片呀等等！

第二种：

这种紫色矩形是指控件与控件之间的间距。

第三种：

剩下就只剩白色区域了，其实严格来说是透明区域，这部分内容是控件内部的间距：

认识了这三个内容，你再来看这个页面是不是就知道，开发哥哥是怎么实现页面的了？

如果还不懂，我们下面来举个例子。

3.举个例子

我们就来看下面这个区域怎么实现的：

这样，一条内容的布局就完成，之后就往相应的地方里面放东西就行了！

4.注意事项

说个注意事项吧，我们工作中经常遇到的一个问题，看下图：

两排文字之间是有间距的（红色部分高度12像素），但是当我们看开发布局的时候：

两个文字控件之间是没有间距的。

也就是说，其实字体控件本身上下是带有一定间距的，如果这时候我们还标注间距为12像素，那实现出来的行间距就会比设计稿要大，所以在做效果图标注的时候一定考虑好，后期实现出来难免会有微调的情况。

5.总结

没事的时候可以多看看开发的布局情况，让自己对页面的实现有更深的了解。

转载自：公众号 菜心设计铺

欢迎投稿：anhejiao@126.com

加老D私人微信18605817040，和老D一起学交互，老D会在朋友圈多发干货文章哦。新手小伙伴可以问老D3个专业问题哦。

交互设计学堂已经开设了新的栏目-行知书院，旨在帮助小伙伴们来高效的学习现在市面上优秀的用户体验书籍比如《交互设计精髓》等等，同时结合老D的工作经验来帮助你们从不同的高度和角度来解读书中的内容。每天一课，积少成多。已有134位小伙伴加入。详细了解行知书院

• 蜜菓饮品加盟怎么样？前景如何_挣钱吗？
• 600万的房子还是留不住老婆的心,离婚时财产如何分割?
• 胡说有理 | 学习如何学习，成为高效率学习者！（一次演讲）
• 音乐桌面 2.0：音乐工作者如何提升生产力？
• Q新闻丨中兴一程序员跳楼身亡；Kotlin和C成年度候选语言；谷歌在
• 肺癌都有哪些症状？如何早点发现？
• 斑马线究竟如何礼让？ 德宏司机很困扰
• 乘政策东风,看恒大养生谷如何落地新时代“大健康观”
• 如何挑选出优质基金，实现财富快速增值？
• 水泥行业去产能行动计划印发 概念股迎来布局契机（附每日一股）