首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

优化夜间阅读体验 - 夜间模式设计通用方法

原则1:保证色彩通用性:关注特殊人群 所选色彩需要考虑色盲人群的特性,尽量保证他们所看到的颜色和我们接近一致,减少该类人群的色的 差异性,增强设计的统一性。...从软件角度来看,无色彩更能减少正常人和色盲等特殊人群的色差别。(可利用Sim   Daltonsim for Mac软件检测)。 ?...2  依据方法步骤逐步完成 步骤1:选择通用性色彩作为主色系 利用软件Sim  Daltonsim for Mac可以观察到,无色彩系列对色盲人群来说,和普通人群的色差异不大。...因此,我们选择无彩色系列作为背景和文字的颜色,减轻色盲等特殊人群的负担: 步骤2:选择低亮度色彩(避免纯黑) 依据QQ 品牌色推荐的无彩色透明度色阶,我们通过色彩亮度公式进行逐个计算,最终符合底色标准的颜色定在...设计方案场景应用 将方案1的设计扩展应用到 QQ iPad版、QQ Android 版和QQ iPhone版中,如下图所示: ? ? ?

1.4K30

QQ空间缓存图片_QQ空间原图

今天偶然打开PC端QQ空间时,我发现了一种似乎更好的方式 —— 鼠标移入时在范围内上下滚动图片预览,移出时停止滚动。...顺着思路,一键 f12 打开源码,我看到了这样的代码: 显而易见,QQ应该是采用了js监听鼠标位置的做法,动态改变 img 标签中自定义属性的值,并根据此去改变图片的 margin-top..."img/nan.png" class="img" /> 这里class为before和after的两个标签就是前面所说的“占位”元素(至于QQ...再回到PC端QQ空间 —— 我们发现,它的transition时间竟然是动态变化的: 这…我猜测可能是设定了一个从上到下固定的时间,然后在JS中按照滑出部分高度(已经滑动的距离)占总高度的比例动态调节时间...相关代码笔者正在尝试ing ---- 当然,本文对QQ前端团队对图片的处理来说也许只是沧海一粟,,,更多的还有比如:根据图片整体平均色差调整说明文字的颜色黑/白(canvas-getImageData

6.2K20
领券