欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

简单了解程序员如何布局页面

发布时间:2017:11:02 14:28:39 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有786个文字,预计阅读时间2分钟
导语
做UI多多少少还是要了解些开发知识的。

  有些朋友会有疑问,做UI到底需不需要掌握一些开发知识呀?

  我觉得了解是有必要的,但不需要研究的太深入。

  那怎么了解呢?我来教你个方法(需要有安卓手机才行,但苹果手机也没关系,看了此文也会有所收获!)

  今天的大纲如下:

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

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

  3.举个例子

  4.注意事项

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

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

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

  

简单了解程序员如何布局页面

 

  找到“开发者选项”,点击进入:

  

简单了解程序员如何布局页面

 

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

  

简单了解程序员如何布局页面

 

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

  屌不屌?

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

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

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

  第一种:

  

简单了解程序员如何布局页面

 

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

  第二种:

  

简单了解程序员如何布局页面

 

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

  第三种:

  

简单了解程序员如何布局页面

 

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

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

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

  3.举个例子

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

  

简单了解程序员如何布局页面

 

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

  4.注意事项

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

  

简单了解程序员如何布局页面

 

  两排文字之间是有间距的(红色部分12像素),但是当我们看开发布局的时候:

  

简单了解程序员如何布局页面

 

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

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

  总结

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

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:做支付功能时,产品经理需要关注哪些问题?

下一篇:后台系列分享之权限管理

  • 18900 文章总数
  • 2380244访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信