首页 | 资讯 | 视频影像 | 设计访谈 | 艺术观点 | 素材教程 | 设计赛讯 | 艺术家 | 品牌设计志 | 艺术展览 | 艺见文论
  首页>>素材·教程>>正文

程序员如何布局我们的视觉稿

发布: 2017-10-22 17:23:57 | 作者:雷蕾蕾 | 来源: 交互设计学堂

  有些朋友会有疑问,做UI到底需不需要掌握一些开发知识呀?我觉得了解是有必要的,但不需要研究的太深入。那怎么了解呢?我来教你个方法(需要有安卓手机才行,但苹果手机也没关系,看了此文也会有所收获!)           

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

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

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

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

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

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

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

  只有三种形式内容。 

  第一种: 

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

  第二种:

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

  第三种:   

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

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

   3.举个例子 

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

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

  4.注意事项 

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

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

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

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

  5.总结 

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

转载于:交互设计学堂

编辑:雷蕾蕾



凡注明 “设计·中国” 字样的视频、图片或文字内容均属于本网站专稿,如需转载图片请保留 “设计·中国” 水印,转载文字内容请注明来源:设计·中国,否则本网站将依据《信息网络传播权保护条例》维护网络知识产权。

相关文章推荐:

 数据检索
站内检索 平台检索
 视频·影像 MORE
461_150_0.jpg
 艺见·文论 MORE
 新锐 MORE