提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
本文首发简书。
在UI设计工作中,设计师往往更关注如何做出好看的图,而忽略屏幕的适配。在实际项目中,设计稿的最终落地才是最重要的,我们要熟悉开发的适配规则才能设计出实际可用的设计稿,所以我们要把适配当做一项基本技能牢牢掌握。
像蓝湖、zeplin等一些标注软件虽然功能很全面,提升了设计师的效率,但它们也有自己的短板:每个间距尺寸都标注出来,反而不知道该怎么适配,这个时候开发就会凭感觉,按自己的喜好做适配。
下面我就尝试介绍几种常见的适配方式,希望能让你们理解适配的重要性,以及当下标注工具的弊端。
在说明适配方式之前得先说说定位方式,页面布局首先是要规定一个元素在页面中的位置,其次再是在各个屏幕中的展现规则。
同样一个页面,里面元素的位置描述也可能会有很多种,举个简单的例子。
下图中按钮的位置最简有几种表述方式?
1. 表述按钮x轴上距离左边100,y轴上距离上边200/距离下边500;
2. 表述按钮x轴上居中,y轴上距离上边200。
3. 表述按钮x轴上居中,y轴上距离中线100,
4. 等等…
基于以上几种排版方式,我们挨个来探讨与之相应的适配方式。
假设三个卡片看成整体,x轴上居中,y轴上居中,y轴最小边距分别为40;
当屏幕高度变大时,y轴边距分别小于150时卡片数量不变,反之增加卡片数量;
虚线部分为增加的卡片。
什么是rem?rem是一个相对单位,简单来说,当你的前端工程师用rem作为单位标记一个按钮的宽高时,按钮的大小就会根据屏幕尺寸做自适应。
rem除了标记尺寸还可以标记间距,设计们只需要说明好定位方式就可以了。
想更全面了解rem可以参考下面这篇文章
这是几篇我认为写得比较详细的适配文章,主要针对iOS和Android端,看完就能系统地了解当下流行的屏幕适配了。虽然公司目前的项目都是用web前端技术实现,适配方式都是异曲同工的。
第二篇:UI适配攻略·教程②Android&iPhone碎片化误区
第四篇:UI适配攻略·教程④一稿配双平台
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册