一文彻底看懂UI设计适配与落地(下)

@胡桃子:很多小伙伴从来不标注直接丢蓝湖,或者全都标出来,这种方式是错误的。如果在标注的时候,设计师不能明确标注出来页面的适配方式,开发都有十足的理由自行选择适配方式,如果适配方式和设计师希望的效果不相符的话,设计师要求开发进行调整,我想开发是有权利拒绝设计师的,毕竟设计师在标注的时候,没有明确自己希望使用哪种适配方式。

上一期→《一文彻底看懂UI设计适配与落地(上)》

在接下来的文章中,我会详细跟大家讲解适配应该怎样标注…

标注决定呈现

在设计师的眼中,页面是静止不动的,在程序员的眼里,并不是对每个机型单独进行开发和适配,他们是通过一套代码,实现多个机型的页面展现。

举个例子:

将下图640px @2x适配到750px @2x 中,设计师喜欢把页面上所有的元素一五一十的标注出来,这样是错的。

qrlwv1bihk2.png插图

如果我们要将一个页面的元素进行适配,我们势必只能标注一部分参数,还有一部分参数不能去标注,这一部分参数要随着屏幕宽度的变化而变化。

如上图标注,开发会有4种适配的可能:

第1种适配:头像尺寸以及边距不变,但是头像间的间距发生变化。如下图:

第2种适配:左右间距、上下间距、头像间的间距不变,变的是头像的大小。头像大小:( 750-30*2-20*5)/8≈98,控件高度:20+98+30=148。结果如下图:

ftcdmc1a4uu.png插图(1)

(提示:有时候缩放会小数点,需要调整为整数;或者间距不均等,需要将中间一些间隙调大一点。在开发的时候也会遇到这样的情况,这个是正常的,因为屏幕发生变化,有些等分的参数面临除不尽的情况,)

第三种适配:如果设计把所有的参数都标注出来,开发会误解为随着屏幕宽度的变化进行等比缩放。

第四种适配:除了以上的几种可能,还有一种锁定比例,跟第二种类似,跟着屏幕宽度放大而放大。如下图。输入框宽度:(750-60*2-40*2)/4≈138,输入框高度按照比例5/7缩放。

ftcdmc1a4uu.png插图(1)

无论按那种方式实现,都是合理的,设计要标注清楚用什么样的方式适配,不要让开发去猜测。

标注思路

如果把标注看成是开发说明书,那么就要求我们精简一部分内容,精简的内容就是我们留给开发进行适配自适应的区域,标注文档核心就要清晰。作为一个合格的设计师,只有自己标注清楚才能去要求对方。标注主要分为四个步骤:边距、元素尺寸、间距、详情。

1. 边距

边距就是起到留白的作用,屏幕的边距是统一的尺寸,边距只适用于内容区,底部和顶部导航栏的边距需要单独标注。

wkkivrzonim.jpg插图(2)

2. 元素尺寸

元素的尺寸一共有四种类型,元素的尺寸是固定的,常见的就是按钮的大小,输入框的高度、banner图的比例一般是不会发生变化,对话气泡根据内容多少发生变化。

3. 元素之间的间距

间距有两个概念:相对位置、绝对位置。

绝对位置:只用屏幕的边缘进行标注,比如边距。相对位置:不是根据屏幕的边缘进行确定,依靠另外一个元素来确定自己的位置,标注组件里面的位置。

32up3dgryh3.png插图(3)

4. 详情

详情主要指的是文字的详情(字号、字色、字重)、输入框、分割线、圆角等。

设计适配的标注方式

继续讲解,逻辑适配三原则的三种适配方式:文字流、弹性控件、等比缩放。

1. 文字流

除了要标注字号、字色、字重、截断之外,还需要标注文字到其他元素的间距。

常犯的错误:

a. 字段的标注

错误:标注字段的宽度

正确:标注标注到其他元素的距离

(安卓用的是dp单位,iOS用的是pt单位)

1sknhfyjmwd.png插图(4)

错误的方法

jyvy3cxlzng.png插图(5)

正确的方法

b. 在文字前后添加标签的情况

错误:在折行文字后面添加标签

正确:标签放在文字前端,或单行文字末尾跟随标签

3bvqfrsx0wx.png插图(6)

c. 文字数量不确定的情况

需要给左侧的文字和右侧的文字留一个安全的距离,如果不留安全距离,两边的元素很容易发生重叠。(通常留的安全距离是20px或者30px)

prweap0okdh.png插图(7)

d. 左边文字、右边图片的情况,需要考虑小手机(iPhone5等)元素之间会不会重合。

小技巧:安全间距+110px(110px为iPhone5和iPhone6宽度的差距),再调字段。

z2iucd32zbw.png插图(8)

不需要改变设计图整个的布局,只需要对有存疑的元素进行微调,放入屏幕差距的矩形块,就可以知道当前屏幕的效果,在其他手机上是否会产生重叠。

2. 弹性控件

弹性控件就是元素的尺寸、高度、以及到屏幕两端的间距都不会发生变化,唯一发生变化的就是两端元素之间的间距会自适应。

a. 列表中组件尺寸不变,间距自适应,屏幕边框,水平方向显示的内容越多。

xtfuy0dbnen.png插图(9)

当列表中有长度自适应的文字的时,“间距自适应”被“文字长度自适应”代替。

rdxl55ddbtp.png插图(10)

b. 屏幕越宽,显示按钮越多的情况。

0f3uu5ykdoq.png插图(11)

3. 等比缩放

常见的例子,banner图,标注图片比例即可,长宽不需要被标的。

5lthijh5pgb.png插图(12)

有些图片的尺寸是无法根据自身得出来的,而是需要在别的图里面得出来。

vpr0u0dvxd5.png插图(13)

cdq5wbxi4gu.png插图(14)

写在最后

以上便是我前段时间学习总结的笔记,有不正确的地方,望大家指出改正~

原文地址:胡诌青年(公众号)作者:胡桃子didlagvfxr4.jpg插图(15)

人已赞赏
UI设计

想做好设计细节,有时候你的眼睛要比软件靠谱

2020-10-10 22:05:03

UI设计

设计思考——如何设计空状态界面

2020-10-11 0:04:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索