APP深色背景与浅色背景的运用思考

当我们浏览以及想要寻找APP时，除了深入人心的品牌符号外，颜色是辅助品牌符号让用户定位的一个重要因素。色彩有语言，有情绪。在特定的环境和空间，总有最适宜的色彩搭配。在APP方寸之间也是如此。

市面上APP形色各异，缤纷多彩。除了品牌主色调外，大面积背景色的使用，会给用户不同的视觉感受和情绪传达。如下图，左侧：红色为品牌色；深蓝色为背景色。右侧：绿色为品牌色，；白色/浅灰色为背景色。

除了品牌色以外，他们大面积背景的颜色使用是遵循什么原则？还是只是设计师喜好？ 

改版背景

由于去年接手《FitForce》项目时：APP全一系深色调背景。在开始设计迭代之初，我以一个真实的用户姿态来体验APP整个流程，看整体页面，在体验的过程中开始质疑一些点以及有了想要动手优化的冲动。

当我下定决心做APP背景颜色的视觉优化时，因为涉及页面数量多，占据大量的开发时间，是个大工程。为了让此次改版有站得住脚的理论依据，也让团队成员了解：我不是主观上对之前设计的不认可；也不是为了设计而设计；更不是我的个人喜好问题。我开始为此次改版查找相关资料论证以及确认我的想法的可行性。

因为，“设计要基于不可辩驳的理由，设计是理性的，要有完整的推导过程”这是我之前看到的一句话，自从看到后，它就成了我的职业座右铭，不断提醒自己。

关于此次背景颜色的改版，从“战略层”和“视觉感知层”2个方面，结合调研数据分析讲述，并结合产品实际情况得出改版方向的结论。

1.产品战略层面

产品背景：这是一款联合国内顶尖生命科学家、运动科学研究员，给教练团体和个体用户精准定制运动健康计划解决方案APP。

a.产品定位

定位：“以运动干预为主要核心的个体健康管理”

使用人群：25-45岁；健身房人群

b.使用场景

梁宁说过，“场景”包括两个概念：场：时间+空间；景：情景+互动 。

关于“场”

时间：下班后+空间：健身房。下班后，前往健身房运动，由于健身房公共空间，会有可能出现4种打扰情况：

1.  视线打扰：环境物体杂乱；

2. 人员打扰：教练；其他健身者等活动的外界因素；

3. 声音打扰：跑步声，音乐声，说话声等；

4. 中断打扰：一个意外来电，得回公司处理紧急事务；

如：视频类软件，使用场景的不同，背景颜色会有所变化。白天在外的人们看视频一般都会用手机，在白天强光下和频受打扰的环境中，白底黑字更清晰更易阅读。晚上回到家，人们则更愿意拿起iPad享受大屏观影体验，在不易受打扰的环境，深色背景和夜晚更契合，让人更沉浸。

关于“景”

情景：拿着手机看教程 + 互动：跟着教程完成运动。在这样的情景中，以产品的“同理心”换位体验，跟着手机教程一起运动，应考虑到用户在使用的过程中（如：拳击；开合跳等幅度较大的动作）视线波动导致的视觉模糊的情况。

和keep做对比，发现两点问题：

1.深色背景，文字识别度缓慢困难；

2.动作视频教程：暗色调，视觉元素杂乱。当动态引起的视线模糊的时候，不易看清动作具体幅度。

综合以上问题，一款简洁，高易读性，信息层级明显的页面设计，在这样的场景中是必需。优秀的页面设计，不但可以更好的表达产品，还可以在帮助用户达成目标的同时给到更好体验。

2.视觉感知层面

a.识别度

识别度，是视觉传达的最最基础的部分。如果在广告宣传的过程中，因一颗字或一句话变形或者其它原因，让识别度有所折扣，则会影响商业转化率以及商业目的的达成。

然而，关于在深色背景或浅色背景上，文字的阅读情况，数据调研显示： 白底黑字VS黑底白字，两者具有一致的识别度。后者会让用户对文字的识别稍慢一些。深色背景和浅色文本，调研发现参与用户在白色背景深色文本上的阅读正确率高出了26%。

市面上以文字为主的app。如：即时通讯，新闻类，读书类，都是以白色底为主要基调。深谙其道理，因为白底黑字拥有最好的可读性。

白底黑字能让文字内容更好表达？那么，黑底又有怎样的用途呢？当你在河边散步，此时墨蓝至黑的夜空中，突然亮起绚丽的烟花，你会不会驻足停留欣赏它的美丽呢？我想你一定会停留欣赏此刻的浪漫。

图片来源：500px

所以，深色背景更适宜于展示图片、数据图表。在良好的布局和组织结构下，黑色能够显著的提升其他视觉元素的表现力，让内容更具有吸引力。

Tubik Studio， 一篇《Dark Side of UI. Benefits of Dark Background》文章，罗列出深色背景的优势：

· 风格化，优雅

· 给人神秘的感觉

· 带来奢华和高端的氛围

· 拥有良好的对比度

· 更容易创造视觉层次感

· 创造视觉深度，让内容更容易被获取

· 视觉吸引力

b.色彩语言

色彩有语言，有情绪。浅色，给人感觉：整洁、明快、阳光、纯洁、优雅；深色，给人感觉：科技、刚健、正式、神秘、权利；

假如，你分别踏入白色房间和深色房间。白色房间不由得让人觉得空灵，增大视觉感知空间，而深色房间则相比白色房间来看显得压抑，拥挤。APP背景色，同理。

在用户群体间，不同年龄层的用户，有着趋向一致的颜色喜好偏向：年轻人，更喜爱深色背景。因为深色，更具风格化、个性、时尚 、科技感；老年人，更喜爱浅色背景。因为浅色背景，信息直观清晰、注重内容、增加页面空间感。

改版结论

综合：软件定位，使用人群，品牌辨识度，内容识别度与用户体验等多方面考量，得出以下结论。

1.考虑用户阅读性体验，浅色背景应用于文字范围。

2.根据产品定位且迎合受众人群喜好，深色背景应用于图形图表数据表达。

3.根据受众人群喜好以及运动品牌调性，深色&浅色相搭配的背景色，应用于首页等重要内容页面；

总结

UI页面背景色的使用，应考虑受众人群，使用场景，识别度等多方面因素，在视觉风格统一的情况下，不同页面，分别处理。不光在视觉呈现上，有节奏，有变化。也能更好地诠释产品，让用户拥有更好的使用体验。

以上，是我关于APP背景色运用的一些心得与思考。愿对你有所帮助。 

- END -

原创文章，如需转载，请注明公众号名称，谢谢！

如果你觉得还不错，给我点赞吧：）