解决移动端字体适配两个问题

https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

IOS PT 和 PX 的关系

淘宝美工交付我的设计稿是375(PT)宽度,然后我就去琢磨了一下这个单位。一开始,我通过百度呢,说 PT 是一个绝对单位,一个PT = 1/72英寸,IPHONE6上一个PX等于1/326英寸(可以通过屏幕英寸和像素的 PPI 比如说 326 值得到),然后一个 PT 等于 326/72 = 4个PX。然后我按照这个计算结果来写代码,发现尺寸是设计稿的4倍多(326/72),而实际上设计稿的PT和PX是1比1的关系。

带着这个疑惑,我查到了这个说法,在不同的屏幕上(普通屏幕 vs retina屏幕),CSS像素所呈现的大小(物理尺寸)是一致的,不同的是1个CSS像素所对应的物理像素个数是不一致的。(这篇文章里)。这和我的实验是一致的。

所以IOS的PT其实是他的逻辑像素,任何CSS像素值在IOS上都会被转换成逻辑像素。关键的是这个转换不是用户去做的,而是IOS自动做的转换。你只要写1PX,系统自己转换成逻辑上的1个PT(物理上是多个像素组成)。

继续阅读解决移动端字体适配两个问题

颜色术语——来自 Happy Hues

今天看了 Happy Hues 这个网站,很有意思,其中的动效很棒值得借鉴。除此之外,也收获了一些色彩方面的术语,Hues、Tint、Shade、Tone、Value、Saturation

Hues 是指原色,Tint 是指在原色上加入白色(在 PS 中一般降低饱和度来调节),Shade 是指在原色上加入黑色(在 PS 中一般通过明度来调节),Tone 是指在原色上加入灰色,Value 是指原色的亮度,Saturation 是指原色的纯度(饱和度),色彩越纯就越鲜艳和亮、否则就会越暗淡。

我在 PS 中操作了一下的确也验证了。饱和度 S 实际上是通过加入白色多少来控制,亮度 B 实际上是通过加入黑色多少来控制,颜色 Hue 实际上是通过设定色轮上的度数(0-360)来控制。

初学者在 UI 设计中需要知道的细节

Photo by Sandra Seitamaa on Unsplash

在实际开发中,在 UI 设计方面我总结了一些问题,其中包括色调,交互设计的一些细节。干货太多,现总结如下。

主色调明度饱和度适中

主色调主要用在突出显示按钮、交互图标的位置,高饱和度的色调更加容易和背景分离,视觉上更加突出。比如这里的叮咚买菜用的绿色,京东用的红色,闲鱼用的黄色都是明度比较适中,不会显得太白,饱和度也比较适中不会显得过于暗淡。

继续阅读初学者在 UI 设计中需要知道的细节