UI资源框架化

发布于:2021-03-30 作者:admin 浏览人数:
UI在工作中最烦的是什么?很早以前大家最烦的应该就是标注和核对UI了,虽然最近五六年,设计师们再也不用标注了,因为出现了太多的自动标注工具了,然而UI核对这个流程我们目前好像依然没办法自动化解决,还是需要你截图,然后放到设计稿上一点点对比,一点点手动给开发大哥标注哪里差了几个像素,那么到底怎么让我们核对起来没那么困难,让开发也更好的还原设计稿?
 
我目前的做法是:UI资源框架化;讲白话就是按开发的布局思 路来设计界面,从开发角度整理你的设计资源,恰巧figma出现了Auto layout3.0功能,这个功能就是与前端开发的盒子模型相契合,用起来可以帮助设计师与开发更好的“对话”。
什么是盒子模型
 
在网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。很早以前的网页设计师基本都会具备一些前端的能力,这些基础知识和认识在移动端依然可以使用。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型,是一个非常容易理解的入门知识点。
 
 
如果你想上手看看这个盒子会发生什么变化,你可以从我贴的这个链接用电脑打开,试着修改我图上标注的那几个参数。
 
在设计界面的时候,我们都知道大家会用格式塔原理,格式塔里面的原理很简单就是可以帮助你做好信息分类处理,带着这个思路我们可以把界面上的各种元素信息归纳分类成一个个盒子。这些盒子可以互相嵌套或者搭积木,例如:
一个按钮就是一个小盒子
一组tab是由多个按钮小盒子拼接而成
一个页面由多个大盒子无缝拼接而成,要么左右拼接,要么上下拼接。
 
Auto layout如何实现盒子模型
Auto layout最让设计师感兴趣的应该就是可以实现自适应布局,会觉得很神奇,但是很多设计师转头一想,我好像也不做网页设计,我一般就做个iOS 1倍的尺寸来同时适配安卓多种机型,我工作就产出一个稿子,好像不太需要这功能,所以很多设计师就不去用这个功能,还是像画画一样自由的在画UI。
但是如果你用好这功能,对开发来说是个福音,特别是对手机厂商的开发来说,因为现在一般大家都有做平板,折叠屏等项目,例如华为。做好栅格布局对你自己的设计工作也是有巨大的帮助,一劳永逸。
当然最重要的还是开头说的,是要更好的跟开发对接,让我们和开发顺畅“对话”,只有语言角度一致,大家才能更好的还原设计效果。
 
 
可以看到如上这个截图所示,这个跟开篇第一张盒子模型的示意图是一模一样的,非常简单,直接输入数字就完事了。
你还可以完全按照开发的书写习惯来写参数;如上图下方截图所示:
padding:上、右、下、左,对应截图所示8,92,24,92;
如果只写上,右,例如:8,24;这表示了上下为8,左右为24。
要注意的是“,”不能是汉字的“,”
 
Auto layout里面的Resizing都是什么
 
共3个内容:
Fixed width/height:自定义的固定宽度;
Hug contents:盒子根据里面的内容大小来变化;
Fill container:填充满父级(父级盒子)的宽度;
你只要熟练的对高、宽进行设置,就可以做出自适应的布局效果,随意拉伸你的组件去适配各种尺寸。
 
新手常常可能发现Auto layout在面板上消失了:
 
所有frame都可以生成Auto laout,只要遇见无法生成Auto laout的情况,就将当前元素打包成frame;
在具体项目里,Auto laout需要和frame密切配合,有些场景frame也不一定要转Auto laout;
注:都用figma了,就不建议使用group,frame会更灵活友好。
 
Resizing少了Fill container
 
如果这个盒子外面没有父级盒子的话,那么也就不存在Fill container,Resizing在工具面板上会跟Constraints合并在一起,可以灵活搭配使用frame。
 
UI设计资源需要注意
 
1.描边:如果需要开发实现的描边,那么UI设计师在软件上应该使用内描边;
2.投影:投影不会被计算到盒子里面;
3.各种边距:数值可以为0,上下左右都可单独设置数值。
4.外边距不影响盒子面积,影响位置。
5.不用要剪切蒙版填图片,会干扰开发查看盒子大小。
6.图标需要合并到只剩路径,千万不要一堆图层。
 
 
开发如何查看设计师的布局思路
任何人用一个新工具的时候都需要简单的说明,开发在使用figma的时候,作为设计师也该去提供一份简单的说明书,我们的设计团队的公共组提供了详细的使用指南,包括从注册到查看标注切图等,对于布局这一块,我做了简单的说明,在跟开发对接时候提供给开发,知悉一下即可。
 
关于界面设计中,我还常常遇见比如说小数点时候,奇数,无法均分时候等情况,例如在360dp屏幕下,我要做3列的相册,页面两边为16dp,图片间距为4dp,那么你计算出来一个封面宽106.666667,这时候你手动怎么挪都挪不好位置。其实在开发这个模式下,都是直接写好栅格的间距,16、4是固定,内容区域程序自动计算均分,所以设计稿不要纠结一些特殊情况下的奇数、0.5像素等,特别是用了Auto layout,你就不再有这种烦恼了,直接都是自动计算,不要再去手动挪。

 

返回顶部