守望者

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

上一期→《一文彻底看懂UI设计适配与落地(上)》
 
在接下来的文章中,我会详细跟大家讲解适配应该怎样标注…
 
 

标注决定呈现

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

举个例子:

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

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

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

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

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

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

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

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

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

 

标注思路

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

1. 边距

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

 

2. 元素尺寸

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

 

3. 元素之间的间距

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

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

 

4. 详情

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

 

设计适配的标注方式

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

1. 文字流

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

常犯的错误:

a. 字段的标注

错误:标注字段的宽度

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

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

错误的方法

正确的方法

 

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

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

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

 

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

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

 

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

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

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

 

2. 弹性控件

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

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

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

 

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

 

3. 等比缩放

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

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

写在最后

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

 
原文地址:胡诌青年(公众号)
作者:胡桃子

转载请注明:学UI网 » 一文彻底看懂UI设计适配与落地(下)

登录收藏
 
你可能喜欢的:
一岚美业APP v1.0一岚美业APP v1.0
App bars: top 顶部应用栏App bars: top 顶部应用栏
设计向善|QQ群作业策划故事设计向善|QQ群作业策划故事
UI 场景中的 Banner 布局样式探索UI 场景中的 Banner 布局样式探索
设计进阶:设计方案如何被量化验证?设计进阶:设计方案如何被量化验证?
Feed流 - 图片比例设计(二)Feed流 – 图片比例设计(二)
设计沉思录 | 如何用感染力提升设计价值设计沉思录 | 如何用感染力提升设计价值
“个人主页”设计相关思考“个人主页”设计相关思考
手机端主按钮应该放在那里?手机端主按钮应该放在那里?
原创 | IM聊天界面的设计规则原创 | IM聊天界面的设计规则