亚博账号登录

守望者
@胡桃子:我来了我来了,很不好meaning,最近电脑被“抢”走了,night没办法写推文to update,等新的电脑回来,五一之后指赐送,this段timehopeeverybody和我一样不断给own充能哦~

 

写stay前面:

stay设计的过程当中,只有新手设计师才会关注于how 是设计精美的picture,或者是how 完成需求,当工作两三年之后,We的设计越来越成熟,how takepicture设计的精美不stay是困扰We最大的problem,而困扰We最大的problem是,怎样take设计精美的page面,也同样精美的落实到真正的product中去,一份精美的设计图无法落地的话,那this份设计图和废纸没what区别!

this段time我stay学习“UI的适配和落地”的课程,做了一些笔记,来和everybody分享。

 

适配的核心概念和正确方法

物理像素:指的是屏幕上的像素格点,不sure调整(除非黄聊唬,iPhone5s的屏幕就是由640行1136列的像素点组成的矩阵图,物理像素=分辨率,单位px。
渲染像素:Software层面的尺寸,通俗一点就是屏幕截图,stay有些机型上,物理像素弯秩鞠袼厥窍嗤摹
逻辑像素:强⒃笔褂玫囊恢旨量单位,决定page面谌莩氏侄嗌伲苯决定着渲染像素(下In the picture缩放就是stay调整逻辑像素)
倍率=渲染像素/逻辑像素
物理像素stay硬件层面构成了液晶屏幕,
逻辑像素staySoftware层面构成了画面图像,
手机图像是由物理像素和逻辑像素共同构成,二者缺一不可。

一稿how 适配多端

不管是iOSstill安卓,Westay做适配的时候,两个平台都是使用一个尺寸的稿件。
由于iOS、android的开发工具不同,逻辑单位stay两个平台的名称不同,iOS逻辑像素单位是pt,android逻辑像素单位是dp。
设计师sure简单理解为:pt=dp
为确保设计图的落地effect,建议:
  • 1X倍率下,尺寸必须为偶数,执行难度:低
  • 2X倍率下,尺寸必须为4的倍数,执行难度:中
  • 3X倍率下,尺寸必须为6的倍数,执行难度:高

(this里however多解释,还不了解的百度病

苹果how 适配安卓?

题目:
how take苹果640*1336px @2x 的设计图适配安卓1080*1920px @3x呢?
适配流程:
先概括一下总流程:苹果@2x > 安卓@2x > 苹果@3x。
  • 1. 绘制一个新的安卓倍率为2的画板,为保证倍率与iPhone5相同,所以take画板设置大小为720*1280px;
  • 2.takeiPhone5 的设计图奖吹叫碌陌沧炕迳希⒍詐age面结构(about间距保持一致)进行调整;
  • 3. take画板从2倍缩放到3倍。
先做逻辑像素适配,再做倍率适配。
逻辑像素适配应用于倍率相同,但逻辑像素不同的设备,对page面结构调整。
倍率像素适配应用于逻辑像素相同,但倍率不同的设备,进行等比缩放。

逻辑适配

逻辑适配,main是stay下面的5个机型中进行自适应的一个适应方式。
叠合stay黄就是下面的effect,宽度stay320~414pt之间,高度stay568~812pt之间。
设计师like使用2倍的倍率设计,Nowtakethis5张尺寸调整为2倍的倍率。
叠合stay黄就是下面的effect,宽度stay640~828px之间,高度stay1136~1624px之间缩放。
stay适配的过程当中并不是一个随性所欲的适配,它需要遵循一定的rule规范,而this些rule规范main有三条:文字流、弹性控件、等比缩放。

1. 文字流

一定数量的文字stay小屏幕上,它的折行问岜冉隙啵瑂tay大屏幕上折行相对较少,对文字下面的谌莼岵欢ǖ挠跋臁F聊辉秸幕埃淖终嫉母叨染驮蕉唷

2. 弹性控件

a. 间距的变化:当屏幕比较小的时候,about元素之间的间距比较小,stay大屏幕上,间距会变大,元素的高度、大小以及到屏幕两端的间距并不会发生变化,变化的只是彼此之间的间距;
b. 数量的变化:stay十字交互(横滑)的模块上,不是体Now元素间距上的变化,而是体Now数量上的变化(如下图)
c. stay不能滑动的情况下,随着屏幕变宽,page面能够容纳的谌菀材增多(如下图)

3. 等比缩放

无论是stay大屏幕still小屏幕上,元素的宽高比都不会发生改变,最常用的staypicture上,例如banner。
等比缩放的好处:
sure确保page面元素之间的大小以及间距stay各个机型上display的effect是统一的。尤其是page面元素很多的时候,sure使用等比缩放。
We大部分适配是基于宽度上进行适配,但也有例外,例如登陆page、video播放器page面。(stay后面的文章会分享高度适配)

倍率适配

先做逻辑适配,再做倍率适配。
倍率适配的方法:stay逻辑像素相同的情况下,进行等比缩放。(@1x > @2x > @3x的适配)
但也要避免下面的几个坑:
  • 1. 指钕卟恍枰缺人醴牛
  • 2. 一些线性图标stay放大1.5倍后,问由original 的整数变成0.5男∈岢鱿窒旅鎝icture中的情况,需要对边缘模糊的图标单独进行调整(调整为内描边、整数)

 

简单回顾一下,不管what机型的适配,main都是以下三个步骤:
  • 1、先逻辑适配,设置好同等的倍率,再调整page面元素的结构和位置,调整的规范有3个何淖至鳌⒌钥丶⒌缺人醴拧
  • 2、进行倍率适配,等比缩放。
  • 3、适配完后,调整一路指钕摺⑼急甑认附诘牟糠帧

 

标注决定呈郑

很多小伙伴从来不标注直接丢蓝湖,或者全都标出来,this种方式是错误的。
ifstay标注的时候,设计师不能to make clear标注出来page面的适配方式,开发都有十足的reason自行choice适配方式,if适配方式和设计师hope的effect不相符的话,设计师要求开发进行调整,我想开发是有权利拒绝设计师的,after all设计师stay标注的时候,没有to make clearownhope使用哪种适配方式。
stay接下来的文章中,我会详细跟everybody步馐逝应该怎样标注…
原文地址:(official account)
author:胡桃子

转载请注明:亚博账号登录 » 原创 | 一文彻底看懂UI设计适配与落地(上)

登录收藏
 
你probablylike的:
开发文字错位,UI需要know 的解决办法开发文字错位,UI需要know 的解决办法
UI界面设计基础知识UI界面设计基础知识
how 提升UI界面中的下拉菜单细节设计how 提升UI界面中的下拉菜单细节设计
保姆级UI界面版式设计实用小技巧,你知多少?保姆级UI界面版式设计实用小技巧,你知多少?
移动端表单表格设计移动端表单表格设计
设计万花筒|进击的盈利模式之member体系设计万花筒|进击的盈利模式之member体系
提升屏效可实施性最强的4大方法提升屏效可实施性最强的4大方法
点击率提升的case点击率提升的case
设计沉思录 | how 构建user决策模型推动page面结构型改版设计沉思录 | how 构建user决策模型推动page面结构型改版
how 把按钮设计做到最好?看完this一篇就够了!how 把按钮设计做到最好?看完this一篇就够了!