众所周知，设计中一定没有简单的“感性设计”和“理性设计”。多年前，我在一本书上读到过这样一段描写绘画与设计的异同：“绘画是主观的，而设计是客观的。绘画是画家对自己情感的表达和宣泄，以取悦自己。”而设计，就是设计师尽可能地排除自知之明带来的障碍，以取悦大众。”虽然这种分类方式还是有些简单粗暴，但是我大体上是赞同的，下面就说说我之前接手的一个项目——设计app的“夜间模式”。在这个项目中，为了实现为了用户的最佳观看舒适度，不断调试和测试，也融入了一些方法，算是在感性设计的基础上增加了一些理性的考虑，下面我从两部分来解释：设计+实现1.如何设计舒适的夜间模式1.背景：为什么需要夜间模式？我们app的受众主要是年轻学生，平日里年轻学生用户需要早起上学。影响至此，他们习惯了早上吃饭喝水，在上学路上，课间或午休时间，利用碎片化的时间看漫画，也习惯把白天没看的漫画看完在克之前上床睡觉和关灯后。这是一个比较集中的时间段，所以他们对夜读功能有一定的需求。当前的白天版本在晚上似乎太多了。太闪亮了。2.设计目标是提高夜间使用app的舒适度。3.设计思维确定了设计目标之后，接下来就是对可能面临的各种问题进行梳理。界面包括图片、文字、图标、背景色、分割线等，我们首先确定的是背景色值，因为它决定了夜间模式的基调。那么与什么相关的背景色值呢？我会按照下图的顺序一一解答。4.思考背景颜色的亮度先说亮度。亮度其实是可以测量的，也有相应的单位。（这里参考qq夜间模式）我们常用来描述光的物理量有四个：发光强度/光通量/照度/亮度。这最后的“亮度”正是我们想要的。亮度是指物体的明暗程度，定义为单位面积的发光强度，其单位为尼特（nit）；1nit=1cd/m2。上图显示了人眼细胞的一些特征。从横线上可以看出，主要负责夜视的杆状细胞的射程为0.034cd/m2。结论：在晚上，我们最终的屏幕亮度应该保证在0.034cd/m2左右，比较合适。（题外话：有一种叫做亮度计的东西，是测量亮度的。)5.想一想背景色的色度在晚上，我们对图片中颜色的判断会有误差，如下图，光看图片中的颜色很难猜出它的真实颜色正确的;因为到了晚上，主要是我们人眼的视杆细胞发挥作用。官方解释：视杆细胞主要负责夜视和周边视觉。与视锥细胞相比，视杆细胞对光更敏感，更容易看到微弱的亮光。因此，在极低的照度下，人眼仅依靠视杆细胞，称为暗视觉，无法分辨颜色。因此，所有表面似乎只有灰度明暗差异；人眼中约有1.2亿个视杆细胞，仅存在于视网膜周边。难以区分颜色。视杆细胞受损会导致夜盲症。一个简单的解释：人眼在晚上能识别的颜色较少，所以没有必要像白天一样用五颜六色的颜色表达；还有一点要注意，晚上看高饱和度的颜色看久了会觉得刺眼，舒适度不够。结论：夜间应使用低彩度的颜色，尽量减少颜色的种类。除了彩度低，还有一个问题值得注意：不同色相下的暗色需要保持相对的视觉亮度平衡。下图中的深色系，通过亮度公式转换成灰色系后，还是会存在细微的亮度差异。在实际的色彩选择中，一定要注意平衡这一点，以保证视觉上的舒适。（亮度公式：0.299*R+0.587*G+0.114*B=y）6、背景色护眼模式为夜间。通常情况下，我们面对屏幕的距离会比白天更近。在阳光的注视下，对眼睛的伤害比白天更大。对我们眼睛造成伤害的是HEV蓝光。当然，蓝光对人眼的伤害程度取决于多种原因，包括屏幕技术、屏幕尺寸、屏幕亮度、色温、与用户脸部的距离、持续时间等。如下图可以看出，各大手机厂商的护眼模式，通过降低亮度，可以有效控制蓝光；蓝色和黄色是一对互补色。如果要降低蓝色的色温，黄色自然会升高。题外话：如果我们将“蓝光衰减率-亮度衰减率”的数值近似为相同亮度条件下的蓝光衰减量，那么除苹果外其他7款手机的蓝光量（60%以上）仅下降了25%左右，给苹果鼓掌。结语：在硬件和时间无法改变的情况下，上述提到的降低屏幕亮度和调整色温也可以降低hev蓝光对眼睛的伤害。总结：晚上背景色应为低彩度，色调偏黄，亮度值在0.034-34之间。基于以上结论，选择夜间模式的背景色#1A1714。7、对比色的处理背景色建立后，有两点需要注意：背景色/文字/图片的区分如下图所示。组合起来比右边那个舒服；可以得出结论，在夜间，对比度不需要太明显，需要柔和一些，视觉舒适度会更高；否则对比度会太明显，文字会太亮或太暗。Multi-modelVerification有了上面的大体思路，接下来就是对大量模型进行测试了；经过一段时间的真实夜景测试和夜间模式舒适度高的热门APP研究，我得出结论：文字与背景对比度—3:1～5:1图片颜色与背景对比度—4:1～6.5:1下图部分夜间模式的设计稿：（对比度可以通过软件ColorContrastAnalyzer测量）下面是我的选择我找了几个肉眼看起来舒服的app，对它们的夜间模式做了一些研究看看它们是否符合我上面的研究。结果如下：基本上很符合我提出的范围。（y代表总亮度）二、设计稿如何实现在思考这部分的实现时，有很多疑惑。整个应用的页面太多了。我是否必须全部制作然后标记它们以进行开发？如何处理图标？我需要为夜间模式制作一个新图标吗？夜间模式其实和换肤很像，可以重复使用吗？如何最大化设计开发的投入产出比？下面我们一一解释。我将这部分分成三个部分来说明：文字+图片+图标。1、正文面临的问题：页数太多，不可能每一页都做视觉稿。解决方案：找出共性，总结白天的文字颜色，并为每个颜色值给出对应的夜间颜色值；根据前面的分析，夜间模式的对比度不需要分得很清楚，所以我把下面的5种文字颜色，还原为2种白色带透明度：45%、30%。辅助文字颜色的选择注意上面提到的视觉平衡，可以通过亮度公式来判断。解决方案扩展：为什么我选择透明的白色？因为夜间模式其实就是换皮，这个方案可以为以后换皮做准备吗？最后，我将分割线和文字颜色从纯色改为带透明度的颜色值，这样可以适配任何颜色值背景（浅色背景除外），为后续换皮打下基础（除了全局背景和弹出背景）。根据以上规则，减去白天的文字颜色，汇总成下表；只要把这个表交给开发，让他们按照表来实现，就可以完美实现夜间模式下的文字替换。2、图片变暗有两种方式，各有优缺点，但都可以解决大部分图片变暗的问题。方法一：图片在顶层，背景设置为黑色，改变图片的透明度，达到视觉上使图片变暗的效果。存在问题：图片变透明后，可能会暴露出一些底部隐藏的控件。结论：可以小范围使用。方法二：图片在底层，上面覆盖一层黑色透明层，达到图片视觉变暗的效果。存在的问题：开发的实现方式这里就不细说了，但是这两种实现方式都会有轻微的内存开销，不适用于gif图片。结论：目前是比较合适的方案，可以使用。3、iconIcon的表达方式比较多样，但还是有规律可循的。我把图标分为三种：单色、非单色和特殊位置。单色图标问题：这么多图标？我是否必须重新绘制并剪切它以进行开发？答：绝对不是。我先把icon的颜色类型统一收集起来，只留下品牌色、普通装饰色、不可点击色，并给这三种对应的颜色值，然后配合一块代码；这是为了将来的皮肤变化。做好准备，针对不同的肤色，只需要潇洒地制定一个色值，就可以得到以下效果。非单色图标非单色图标是指包含两个或多个颜色值的图标。此类图标可以参考图片的实现方法。某些特殊位置的图标无法通过代码调暗。比如下图中头像旁边的“VIP身份标识”，这些图标只能在夜间模式下重新设计，裁剪开发。综上所述，我们来回顾一下上面提到的夜间模式的整体流程。希望每一个设计的背后，都有一个可以支撑的理论基础。它不是纯粹主观的。我们也在这条路上慢慢摸索。正确的地方，欢迎指正。
