进行界面适配与标注的注意事项

发布者: 乾学优行者 发布时间: 2020-03-24 浏览 51
    开发在实现过程中,需要计算好我们每一个元素包括文字、图片等的位置等,然后再调用我们切好的图进行一个填充。但这个填充不是说简单的去给它进行直接放进去就行了,它是需要我们用技术来进行实现的。

  有哪些内容需要切图呢?第1个是ICON,第2个就是不规则的一些形状。一般切图我们在导图的时候,我们需要注意的是它的格式必须为 png24的图片,因为png为24的一个图片,它是不透明的图底,它具有不透明图底的一个功能,所以说ICON很多都是不规则图形,但是它需要嵌套在一个长方形或者说一个正方形的规则的切片内,在周围边缘需要一个透明的图底,同时png24对于色彩的还原程度相对来说是比较高的。

进行界面适配与标注的注意事项

  想要快速切图,少不了切图软件。这边我给大家介绍一下切图软件,Cutterman,其实它属于PS里的一个拓展功能切图插件。我们看一下这张图,面板里面它会有安卓和以外的三个选项,当你需要切哪种屏幕图的时候,我们就可以相对应的对哪个选项进行一个选中,因为我们都知道在我们切图的时候需要注意的是需要二倍图和三倍体大小,所以说我们这边可以直接用分辨率来进行调整。

  第2张图显示的是Cutterman切图插件,Cutterman的切图方式在我们整个图层里面可以生成这样一个插图;第3张图我们可以看到它是有一个红框,我们都是把它已经框出来了。在我们的红框里面,它会有选出、选中导出、选中图层,然后当我选中到导出的图层,也就是说当我点一下以后,我直接选择图层里面的切片,作为我最终导出的切片,这样相对来说是比较方便的。

  然后我们可以看到底部它会有一个固定尺寸的调节,分别为1X 、2X以及3X也就是我们的一倍图、二倍图、三倍图。我们可以自己在面板里面对切图的大小进行选择,最下面有一个输出,其实就是我们的存储物资,我们可以改变整个切图的一个路径,或者说我们来决定它放到哪个文件夹的下面。像这样一个切图的插件,对我们日常的工作来说,会给我们提供很大的便利。

  接下来我们谈谈命名的规范,通用的切图命名格式是:控件/页面 _类别 _功能 _ 状态@倍率.png。这边要注意几点,第一就是我们不能用拼音,必须用英文命名;第二就是我们每一部分都需要用下划线进行分割;第三就是二倍图和三倍图,名字的后面需要加上@2x或者@3x。

图片2_副本.png

  大家看一下,以登录界面为例,进行一个命令,像登录界面中我们需要对登录页的背景进行命名,比如说login+b g+@2X或者3X。还有一个就是我们登陆页的ICON,以login_logo@3X.png 命名。在登录按钮中我们需要注意的是登录按钮的一个选中状态和未选中状态,也就是按照默认状态。这边要注意,我们在切图的时候,由于我们刚刚有讲到我们所有的命名必须用英文,所以说我们在命名的时候最好是以它缩写的形式进行命名,这边大家可以去记一下。

  我们切好图以后,我们就需要用到标注。我们需要注意用到的是一个新的软件叫马克鳗(高效设计标注工具),我们在标注的时候需要遵循一个原则,就是从左往右、从上到下以及就近原则。

  在标注时,我们需要按照位置、大小、样式分开标注,就是说我在标注的时候,我要一个页面去标注所有的控件的位置。因为全部标注到一个页面中,看上去会比较乱,主要目的其实还是为了后续工作的一个展开,当然如果有特殊的说明或者特殊要求的话,我们是需要用笔记进行一个记录。而第二就是相同的元素可以不用重复标注。第三就是通栏的高度不需要进行一个标注。

  之所以要进行标注,主要目的有四个。第一就是制定开发人员和UI设计师在交接工作的时候的一个技术标准。第二就是遵循统一操作规范,有利于工作的交接,统一设计标准。第三就是以标准化的方式提高沟通和技术协作水平,提高设计效率。第四就是便于后期加入的设计人员能够快速的了解产品,然后着手设计。

  标注的内容有以下6点,第一是我们的文字,包括我们的字体、字体的大小、间距等;第二是颜色,包括字体颜色、图标颜色以及背景色、组件颜色;第三就是导航,包括我们导航栏的高度、宽度等等;第四是一些通用的图片,刚刚有讲到通用的图片不需要重复标注;第五是我们的按钮;最后就是我们的图标,图标包括图标的颜色、图标的大小、图标的间距等等。

  今天我的分享就到此介绍了,谢谢大家。如果大家对设计感兴趣的话,也可以去做更深一步的学习。

本页网址:https://www.u-walker.com/news/2240.html

上一篇: 进行画册设计需要把握的排版技巧

下一篇: 设计师要遵循的IOS设计规范

相关推荐

预约报名

免费试学 先学后付 预约试听 证书认证 就业薪资






400-073-5855
返回顶部