颜色术语——来自 Happy Hues

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

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

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

走火入魔做产品

在业余时间一直开发一款小程序应用,陆陆续续也有大半年的时间。半年时间来,我的感受是产品和开发不同,开发侧重与实现与做到,产品注重是做好。

做好相对于做到没有一个明确的目标,因此需要反复迭代。半年以来设计了很多 UX/UI,过了一段时间觉得很不好用,又推翻重来。这种自虐的感觉真的很难受。

UX/UI 到组件封装复用其实每个过程都是渐进迭代,过程很曲折,但是想到也算慢慢接近目标,也就宽慰了。放上目前的阶段性成果留作纪念。

继续阅读走火入魔做产品

HTTPS 理解关键问题

Photo by stefan moertl on Unsplash

防止中间人攻击

为了防止中间人拦截攻击,对于采用证书机构来加密服务器端公钥。这样中间人假如拦截了 HTTPS 流量,并且使用自己生成公私钥对,使用自己的私钥加密数据发给客户端,那么客户端无法使用机构提供的服务器公钥对密文进行解密,从而导致协议出错。

防止中间人窥探

由于在握手阶段是协议出一个双方都可以对称密钥,客户端采用机构认证的服务器公钥对协商好的对称密钥进行加密。这样即使中间人劫持到,由于没有服务器私钥所以无法对这段密文进行解密。

证书防篡改

证书颁发机构将服务器公钥等一系列信息首先做摘要算法,然后使用 CA 机构的私钥(非服务器公钥)对服务器公钥信息进行加密,作为数字签名,在客户端需要使用机构的公钥对证书内容进行解密。

继续阅读HTTPS 理解关键问题

z-index 层叠的一些细节

最近要把一个筛选的功能做组件化,涉及到了z-index 和定位的一些细节。z-index 的最大特点是它只有作用于定位的组件之上才有效果,比如 relative,absolute 或者 fixed。

其中 relative 很特殊,它不会脱离文档流,因此一旦 relative 定位的组件被渲染,会把父结点撑开,然后不管你怎么移动 transform 那个坑都会在。

相反 absolute 和 fixed 都脱离了文档流,因此它不会把父组件撑开,也不会留一个空白坑。其中 fixed 和 fixed 的图层处于同一维度。同一维度意味着父组件的范围可以限制子组件的表示范围,假如父组件写了 overflow:hidden,那么子组件也不会显示出来。

absolute 和其最近定位的父结点处于同一维度。同一纬度在上一段落已经得到解释。

最后,微信小程序组件中使用 fixed 定位很奇怪,模拟器可以但是 IOS 端不行。

Throttle 与 Debounce 使用场景

Photo by Cristina Gottardi on Unsplash

不管什么技术概念,都要落到实际使用场景比较容易理解。Throttle 和 Debounce 也是一样,这里我分别解释一下。

单位时间只做一次使用 Throttle

单位时间只做一次使用 Throttle。PC 上有些操作在小程序真机上延迟特别明显,比如点击按钮展开菜单的动画,假如用户点击频率过高就会导致小程序显示异常。为了解决这个问题,需要在单位时间比如 500ms 之内对用户点击只响应一次,这样可以减少动画调用的频率。

等待操作不再发生使用 Debounce

等待操作不再发生使用 Debounce。比如我们搜索根据关键词从实时后台拿到商品名称,我们不知道用户什么时候结束输入。假如每监听一个关键字就去后台拿数据会导致后端压力比较大。那么再前端就可以做一个 Debounce。当用户键入一个关键字后等待 500ms,若这 500ms 之内没有新的输入,当作用户结束输入,然后再去后台请求数据,可以减轻后端压力。

2020的最后一篇

2020年我迎来了宝贝女儿的诞生。

2020年我通过了系统架构师考试。

2020年我做了很多小玩意儿。

2020年我思考了两年的小程序也在慢慢做起来。

2020年我慢慢开始学习理财、关注投资。

疫情之下,2020 仍然给我带来了很多惊喜。感恩、努力!

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

Photo by Sandra Seitamaa on Unsplash

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

主色调明度饱和度适中

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

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

系统架构师备考指南

Photo by Waldemar Brandt on Unsplash

2020年9月至11月初,博客均未更新,主要是本人业余时间都用来备考软考系统架构师这一科目,考试的目的很简单,就是为了评职称。今天查分 59 58 53 顺利通过,幸喜之余分享一下备考中的干货,可以让备考的同学多一份指南,少走点弯路。

首先要从战略上明确一点,系统架构师考试并不是选拔性考试,而是一门面向社会的通过性考试,因此目标就是通过,即单科都在 45 分以上即可。考试分为三个科目分别是综合题(75道单选,2个半小时),案例分析题(简答题,一个半小时),论文(3000字大作文,2个小时)。备考也是从这三个方面展开。

继续阅读系统架构师备考指南

Hexo 本地图片上传完美解决方案

本来以为 Hexo 图片上传很容易,没想到搜索出来若干个解决方案。其中有若干还是淘汰的方案,浪费了不少时间。其实这边官方文档给出了一个最完美的解决方案

_config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

然后在 hexo new post 之后把新的图片 image.jpg 放到对应的文件夹下,然后直接使用标记 ![](image.jpg) 引用即可。

Nginx 转发常规问题

Nginx 最让人头疼的其实是转发的语法。特此记录。

单条路径做映射

假如想把 /a?xxx 转发到 localhost:3000/b?xxx 那么可以写作

location /a {
        proxy_pass localhost:3000/b;
}

多条路径做映射

假如想把 /api/a /api/b 下所有路径转发到 localhost:3000/a localhost:3000/b 那么可以写作

location /api/ {
        proxy_pass localhost:3000;
}