美狮美高梅-美狮美高梅官方网站

美高梅视点
美高梅曾经做过哪些事情?美高梅的发展怎样
不管什么APP 都会加上的「夜间模式」,腾讯是怎么策划的?
发表时间:2018-08-22

美狮美高梅

【直营信誉】MGM,美狮美高梅官方网站最具公信力的博彩集团官网、更有高质料的游戏平台、打造在线博彩第一直营,美狮美高梅不单拥有环境上最多样化的游戏投注平台,再是为衣食父母供给实时、刺激、高信誉的效劳保证和高质料的游戏。

众家都知道,策划一定没有单纯的「感性的策划」与「理性的策划」。

接连许多年以上,我在一本书中读到过这么一段对于绘画和策划异同的描述:「绘画是客观的,策划是客观的。绘画是绘画者对自身情感的表达与宣泄,为的是取悦自己。而策划是策划师较小限度摒除自我见识所带来的障碍,为的是取悦大众。」

虽然这个分类方法灰子 窍缘胑asy粗暴了些,但是大体上我深以为然。

下面会讲到的是我以上接手过的一个porject——策划 app 的「夜间模式」。在这个porject中,为了能够达到用户观看的最佳舒适度,不断的调试试验,此道也融入了一些方法,算是在感性策划底子上,多了一些理性的考量。

下文我会从两大块进行说明:策划+实现。

一、如何策划出舒适的夜间模式

1. 背下:为何要做夜间模式




吾们的 app 受众以低龄学生为主,work日内,低龄学生用户需要早起上学,受此影响,他们习惯在早上的吃饭或上学途中、课间或午休,利用碎片化时间阅读漫画。

他们也习惯在睡上和熄灯下,把白天没看完的漫画读完,此时是使用较为聚集的时间段,易于 他们对夜间阅读功能有一定需求,目上的白天版本在夜晚看来实在太过闪耀了。

2.策划倾向

提高夜间使用 app 的舒适度。

3. 策划思考

细目策划倾向以下,接下来就要先捋一捋可能会面临的各种小case。界面中,包含了图片、文字、图标、背下色、分割线等,吾们首尾细鹄的是背下色值,因为它决定了夜晚模式的基调。so背下色值又与什么相关联呢?我会按照下图顺序一个个的来解答。




4. 背下色之亮度思考

先说说亮度,亮度莫过于可以被测量,也有相对应的单位。(此处有参考 qq 夜间模式)

吾们常用来描述光的物理量有4个:发光强度/光通量/光照度/亮度。

这末了一项「亮度」正是吾们想要的。亮度是指物体明暗的程度,定义是单位面积的发光强度,它的单位是 nit(尼特);1nit=1 cd/m2。




上图是人眼细胞的一些特性,划横线处可以看出,主要负责夜晚视觉的杆状细胞,感化范围是0.034cd/m2。

结论:夜晚,吾们最终的屏幕亮度应该保证在0.034cd/m2左右是较为合适的。

(题外话:有种东西叫亮度测试仪,可以测量亮度。)

5. 背下色之彩度思考

夜晚中,吾们对图片中颜色的判断会有误差,如下图,单看右边图中的色彩,很难猜到其真实的色彩;因为在夜晚,主要是吾们人眼的杆状细胞起感化。



官方解释:杆状细胞主要负责夜晚及周边视觉。相较于锥状细胞,杆状细胞对光更为敏感,较匆子 侄每吹轿⑷醯牧凉猓子 在极低的照度下,人眼仅依赖杆状细胞,称为暗视觉,其无法分辨颜色,易于 一切表面看起来仅有灰阶明暗的异议;人眼约有一亿两千万个杆状细胞,仅存在于视网膜的周边,因该处缺乏锥状细胞,以致吾们对视野的周边部份有辨色上的困难。杆状细胞的损伤则导致夜盲。

通俗一点解释:人眼在夜间可辨识出的颜色种类较少,以是不用和白天一样使用缤纷的色彩表现;还有一点需要care,晚上长时间注视着高饱和度的色彩,会觉得刺眼,舒适度不够。

结论:夜晚,应使用低彩度的色彩、且尽量减少颜色的种类。

除了低彩度,还有另一个小case也值得care:不同色相下的暗色系需要保持相对的视觉亮度均衡。

下图中的暗色系,通过亮度公式,换算成灰色系之下,亮度上灰子 腔嵘杂幸煲椋谑导嗜∩幸猚are均衡这一点,保证视觉舒适度。(亮度公式:0.299*R + 0.587*G + 0.114*B=y)




6. 背下色之护眼模式

在夜间,一贯环境下,吾们面对屏幕的跨距会比白天更近,在长时间近跨距的注视下,对眼睛伤害比白天更大。使得吾们眼睛遭成伤害的就是 HEV 蓝光,易于 这般,蓝光对人眼遭成的伤害程度取决于很多原因,包括屏幕的 技术实现 、屏幕大小、屏幕亮度、色温和用户脸部的跨距和持续的时间。

下图中可以看出,各大手机厂商的护眼模式,通过降低亮度,蓝光得到有效把握;而蓝黄是一对互补色,如果想从色温上降低Blue,黄色自然会增强。




题外话:如果吾们将「蓝光下降比-亮度下降比」的值近似看成在亮度条件一样的环境下蓝光的减少量,so除了apple(超过60百分比)之外其余7款手机的蓝光量只下降了25百分比左右,给apple鼓掌。

结论:在硬件与时间不能更改的环境下,通过上面提到的降低亮度和调整屏幕色温也能降低 hev 蓝光对眼睛的伤害。

小结:夜晚,背下色应该决定低彩度、色相偏黄、亮度值在0.034-34之间。

按照如该结论,选出了夜间模式的背下色#1A1714。

7. 对比色的处理

背下色确立之下,需要care的有两点:

背下色/文字/图片的区分处理

如下图,在夜晚长时间观看的环境下,左边一组「图片/文字/辅助文字」的组合比右边来的舒适;由此可得出,在夜间,对比度不需要太过明显,需要柔和一些,视觉舒适度会更高;否则对比会太明显,文字或过亮或过暗。



多机型验证

有了如该 的大致思路以下,就是进行海量的机型测使闼;经过一段时间真实晚上场景的测试,以及对热门且夜晚模式舒适度较高的 app 做了研究,我得出:

  • 文字与背下对比度—3:1~5:1
  • 图片色与背下对比度—4:1~6.5:1

下图是夜间模式的部分策划稿:


(对比度可通过软件 Colour Contrast Analyser 测出)

下面是我挑选了几个肉眼看上去舒适度高的 app,对它们的夜间模式做了些研究,看看是否符合我如该的研究,结果如下:基本也与我拟订的范围贴合度很高。(y 表示的是总亮度)


二、如何把策划稿实现出来

思考实现这部分的时候,有很多的疑问。整个 app 的页面太多,我要全部做出来,再给开发标注吗?icon 如何处理,我需要重新制作一份夜间模式的 icon 吗?夜间模式和换肤莫过于很像,可不可以复用呢?如何做到把策划和开发投入产出比较小化呢?

下面就一一来讲解,我将这部分分为三块来说明:文字+图片+icon。

1. 文字

面对的小case:页面太多,无法针对每个页面做视觉稿。

解决Plan:找出共性,归纳白天文字色,针对每个色值给出对应的夜间色值;按照上面的归纳,夜间模式的对比度是不需要做明显区分的,以是我把以下5种文字色,缩减成2种带透明度的白色:45百分比、30百分比。辅助文字色的选取care上面说的视觉平衡,可以用亮度公式来判断。



Plan延展:我为什么选用了带透明度的白色呢?因为夜间模式莫过于也是一种换肤,那这个Plan是否可以为以下的换肤做准备呢?末了我把分割线与文字色由纯色变成带透明度的色值,这么做能适配任意色值背下(除浅色背下下),为下续换肤打底子(全局背下&弹框背下除外)。


按照如该的规律,把白天的文字色做减法,归纳为以下的表格;只要把这个表格给到开发,让他蒙洗照表格去实施,就能够完美的实现夜间模式的文字替换了。



2. 图片

图片变暗的方式有两种,各有优缺点,但可以解决大部分的图片变暗小case。

方法一:图片处于顶层,背下设置为黑色,改动图片透明度,达到图片视觉变暗的成果。




存在的小case:图片变透明以下,可能会露出底层的某些隐藏控件。

结论:可以小面积使用

方法二:图片处于底层,上面覆盖一层黑色透明层,达到图片视觉变暗的成果。


存在的小case:开发的实现方法在这里就不细说了,但这两种实现方法会稍有内存开销,且对 gif 图不适用。

结论:目上来说比较合适的Plan,可以使用。

3. icon

Icon 的表现形式比较的多样化,但灰子 怯泄媛煽裳野 icon 分为三种:单色、非单色、特殊地位。

单色icon

小case:这么多 icon?难道我要重新画一遍,切图给开发吗?

答案:肯定不用。我先统一收拢了 icon 的颜色种类,只留下直营色、正常点缀色、不可点击色,分别对这三种给出相应的色值,再配合一段代码即可;这样为以下的换肤做准备,不同的皮肤颜色,只需要潇洒的给开发一个颜色值即可得到以下的成果。





非单色icon

非单色的 icon 是指包含两种及两种如该的颜色值的 icon,此类 icon 可以参考图片的实现方式即可。

特殊地位的icon

有些部分的 icon 是不能用代码实现变暗的,譬喻下图中的头像旁边的「VIP身份标识」,这些 icon 就只能重新策划夜间模式的样子,切图给开发。



总结

吾们来回顾一下上面说的夜间模式整体过程是什么?



瞩望每一个策划的背下,都有可以支持的理论按照,不纯是客观臆想,吾们也正在这条道路上慢慢摸索。




——美高梅分享,作者腾讯动漫TCD 




XML 地图 | Sitemap 地图